html, body {
    /*scrollbar-gutter: stable;*/
}

html.fslightbox-open body {
    margin-right: 0 !important;
}

header .search-popup.active {
    /*z-index: 100;*/
}
.product-upload-page .product-upload-container .products-container-center-box .upload-icon {
  pointer-events: none;
}

.tab-content { display: none; }
.tab-content.active { display: block; }

#glogin_btn{
  display:inline-block;
  min-height:44px;   /* 40–44 px a leggyakoribb */
  min-width:220px;   /* opcionális, ha fix szélességet akarsz */
}

.card-box-img-container{
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;   /* ha négyzet kell */
  overflow: hidden;      /* ne lógjon ki */
}

.card-box-img-container > img{
  position: absolute;
  inset: 0;              /* top/right/bottom/left:0 */
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
  display: block;
}

/* overlay (rács) */
.card-box-img-container > img.grid6{
  z-index: 10;
  object-fit: contain;   /* svg rácsnál általában jobb */
  pointer-events: none;  /* ne fogja meg a kattintást */
}



.unavailable {
    background-color: yellow;
    padding: 10px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 20px;
    font-weight: 600;
}

.tooltip-popup.active {

    width: 100%;
    height: 100%;
}


.profile-img-container {
    width: 6rem;
    margin: auto;
}

.single .img-container img {
    object-fit: contain;
    object-position: center;
}


:root {
  --dur: 1s;
}

.card-box-img-container .uploadimg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;

  transform-origin: top left;

  /* indulás előtt biztosan ne látszódjon */
  transform: scale(0);
  clip-path: inset(100% 100% 100% 100%);

  animation: growIn var(--dur) ease both;
  animation-delay: calc(var(--i, 0) * var(--dur));
  will-change: transform, clip-path;
}

@keyframes growIn{
  0%   { transform: scale(0); clip-path: inset(100% 100% 100% 100%); }
  1%   { transform: scale(0); clip-path: inset(0 0 0 0); }
  100% { transform: scale(1); clip-path: inset(0 0 0 0); }
}

.card-box-img-container::after{
  content:"";
  position:absolute;
  inset:0;
  z-index: 100;
  pointer-events:none;
  opacity:.55;
  background:
    repeating-linear-gradient(to right, #00B8FF 0 2px, transparent 2px 16.6%),
    repeating-linear-gradient(to bottom, #00B8FF 0 2px, transparent 2px 16.6%);
}

.card-box-img-container.no-grid::after{ opacity: 0; }

/* Függőleges vonal – balról jobbra */
.scan-line-vert {
    position: absolute;
    top: 0;
    bottom: 0;          /* teljes magasság */
    width: 2px;
    background: green;
    left: -2px;         /* dobozon kívülről indul */
    z-index: 5;
    pointer-events: none;
    animation: scanX var(--dur) ease 0s 4 forwards;
}

/* Vízszintes vonal – fentről le */
.scan-line-horiz {
    position: absolute;
    left: 0;
    right: 0;           /* teljes szélesség */
    height: 2px;
    background: green;
    top: -2px;          /* dobozon kívülről indul */
    z-index: 5;
    pointer-events: none;
    animation: scanY var(--dur) ease 0s 4 forwards;
}

@keyframes scanX {
    0%   { left: -2px; }
    100% { left: 100%; }
}

@keyframes scanY {
    0%   { top: -2px; }
    100% { top: 100%; }
}

.card-box-img-containerxx::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;              /* teljes magasság */
    width: 2px;
    background: green;    /* vagy amit szeretnél */
    left: -2px;             /* épp a bal szélen kívülről indul */
    z-index: 20;             /* szükség esetén tedd a kép fölé */
    animation: scanX var(--dur) ease 0s 4;
}

@keyframes scanXxx {
    0%   { left: -2px; }
    100% { left: 99%; }    /* végigfut a dobozon */
}


  .corner-note{
    position: fixed;           /* mindig a képernyőhöz rögzítve */
    left: 12px;
    bottom: 12px;
    z-index: 9999;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.2;
    background: rgba(0,0,0,.65);
    color: #fff;
    border-radius: 8px;
    pointer-events: none;      /* ne zavarja a kattintást */
    user-select: none;
  }


  .corner-note-top-left{
    position: fixed;           /* mindig a képernyőhöz rögzítve */
    left: 12px;
    bottom: 12px;
    z-index: 9999;
    padding: 6px 10px;
    font-size: 16px;
    line-height: 1.2;
    background: rgba(0,0,0,.65);
    color: #fff;
    border-radius: 8px;
    pointer-events: none;      /* ne zavarja a kattintást */
    user-select: none;
  }

.editing-table button {
    padding: 1.25rem;
    width: 100%;
    background-color: #d3e8e9;
    cursor: pointer;
    font-family: "Cairo";
    font-size: 1rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}


.card-box-img-container{
  position: relative;
  overflow: hidden;
}

/* a teljes 6×6 rács egy rétegen */
.card-box-img-container::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:0;
  height:0;
  transform:translate(-50%,-50%);
  z-index:100;
  pointer-events:none;

  opacity:0;
  background-position: 50% 50%;
  background:
    repeating-linear-gradient(to right, #00B8FF 0 2px, transparent 2px 16.6667%),
    repeating-linear-gradient(to bottom,#00B8FF 0 2px, transparent 2px 16.6667%);

  transition:
    width 2s cubic-bezier(.2,.9,.2,1),
    height 2s cubic-bezier(.2,.9,.2,1),
    opacity .10s linear;
}

/* hoverre középről kifelé nő */
.card-box-img-container:hover::after{
  width:100%;
  height:100%;
  opacity:.55;
}

.card-box-img-container::after{
  inset:0; left:auto; top:auto;
  transform:scale(0);
  transform-origin:50% 50%;
  opacity:0;
  transition: transform 12s cubic-bezier(.2,.9,.2,1), opacity .15s linear;
}
.card-box-img-container:hover::after{
  transform:scale(1);
  opacity:.55;
}
#glogin_btn {
  /*position: fixed;*/
  /*left: 50%;*/
  /*transform: translateX(-50%);*/
  /*width: auto;*/
  /*height: 55px;*/
  /*z-index: 1000;*/
  /*margin-top: 15px;*/
  /*text-align: center;*/
}

.avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-grid; place-items: center;
  font-weight: 700; overflow: hidden;
  background: #e5e7eb; color: #374151;
}
.avatar .initial {
  font-size: 18px;
}


.img-container img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	height: -webkit-fill-available;
	object-position: top left;
}
#search-bar {
	/*background-color: #e2fcfc;*/
}
.editing-container button {
    padding: 1.25rem;
    background-color: #d3e8e9;
    cursor: pointer;
    text-decoration: underline;
    font-family: "Cairo";
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 700;
    line-height: 130%;
}

.edititemformmenu button {
	background-color: transparent;
}
.edititemformmenu button.selected {
	background-color: #fff;
}
.edititem2,.edititem3,.edititem4 {
	display: none;
}

.uploaded-img:hover {
	/*display: none;*/
}

.uploaded-img:hover .arrange-img2 {
	display: block;
}

.arrange-img img {
	/*width: 48px !important;*/
	/*height: 48px !important;*/
}

.arrange-img2 {
	display: none;
    position: absolute;
    /*position: relative;*/
    height: 100%;
    width: 100%;
    background-color: rgba(171, 192, 192, 0.8);
}
.arrange-img2 button {
	position: absolute;
	width: 64px;
	height: 64px;
}
.move-to-right {
	right: 0;
	bottom: 0;
}

.move-to-left {
	left: 0;
	bottom: 0;
}
.delete-btn {
	top: 0;
	right: 0;
}


.product-card.mine .img-container::after {
  /*content: "";*/
  /*position: absolute;*/
  /*left: 0;*/
  /*bottom: -5px;*/
  /*width: 100%;*/
  /*height: 5px;*/
  /*background: rgba(0, 120, 0, 0.5); */
  /* 50% átlátszó fekete */
}

#uploadprogress {
	min-height: 200px;
}


/* Container for the toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
    float: right;
}

/* Hide default checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track */
.slider {
    position: absolute;
    cursor: pointer;
    background-color: #ccc;
    border-radius: 24px;
    width: 100%;
    height: 100%;
    transition: background-color 0.3s;
}

/* The circular slider */
.slider::before {
    content: "";
    position: absolute;
    height: 20px;
    width: 20px;
    left: 4px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: transform 0.3s;
}

/* Toggled state */
.toggle-switch input:checked+.slider {
    background-color: #4caf50;
}

.toggle-switch input:checked+.slider::before {
    transform: translateX(26px);
}


.btn-tip{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:.4rem;
}

/* tooltip alap */
.btn-tip .tip{
  position:absolute;
  left:50%;
  bottom:calc(100% + 10px);
  transform:translateX(-50%) translateY(4px);
  background:#111;
  color:#fff;
  font-size:13px;
  line-height:1.2;
  padding:8px 10px;
  border-radius:10px;
  white-space:nowrap;
  box-shadow:0 10px 24px rgba(0,0,0,.25);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .15s ease, transform .15s ease, visibility 0s linear .15s;
}

/* kis nyíl */
.btn-tip .tip::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%);
  border:7px solid transparent;
  border-top-color:#111;
}

/* desktop: hover + billentyűzet */
.btn-tip:hover .tip,
.btn-tip:focus-visible .tip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}

/* mobil: tap -> :active amíg nyomva van */
.btn-tip:active .tip{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
  transition-delay:0s;
}

/* touch eszközön ne legyen “ragadós” hover */
@media (hover: none){
  .btn-tip:hover .tip{ opacity:0; visibility:hidden; }
}