/* === GALLERY CSS START (moved from lintec-csd-2500-b-specificatii-tehnice.html) === */
/* Styles for #similarCarousel, .similar-slide, .similar-thumb and GLightbox overrides */
#similarCarousel {
  position: relative;
}
#similarCarousel .carousel-item {
  padding: 0 3rem;
}
.similar-slide {
  display: grid;
  /* Make columns fit the thumbnail size reliably and keep gaps consistent
     Use auto-fit/minmax so columns never collapse and gap works correctly */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; /* slightly larger gap for clarity on wide screens */
  justify-items: center;
  align-items: center;
}

/* Tablet: 4 per row */
@media (max-width: 1200px) {
  .similar-slide { grid-template-columns: repeat(4, minmax(0,1fr)); }
}

/* Small screens / mobile: 2 per row */
@media (max-width: 900px) {
  .similar-slide { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.similar-thumb {
  width: 200px; /* fixed square thumb */
  height: 200px; /* fixed square thumb */
  /* double previous rounding (was 8px) */
  border-radius: 16px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ecef;
  background: #f8f9fa;
  position: relative;
  z-index: 0; /* base stacking so hover can raise the item */
  /* Keep the anchor box stable; zoom will be applied to the inner image to avoid overlap */
  transform: none;
  transition: box-shadow 180ms ease-out;
}
.similar-thumb img {
  width: 100%;
  height: 100%;
  /* cover gives a consistent 200x200 crop; change to contain if you prefer letterboxing */
  object-fit: cover;
  display: block;
  /* make sure the image sits below the overlay */
  position: relative;
  z-index: 1;
  /* perform zoom on the image itself so the anchor's box doesn't grow and overlap neighbors */
  transform: scale(1);
  transition: transform 180ms ease-out;
  will-change: transform;
}
/* magnifier overlay implemented as a real child element to avoid pseudo-element stacking/hover bugs */
.similar-thumb .thumb-zoom {
  /* small centered magnifier to avoid darkening the whole thumbnail
     (prevents the overlay from visually affecting adjacent thumbnails) */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 6; /* sits above the image but inside the thumb */
  opacity: 0;
  transition: opacity 120ms linear;
}


/* magnifier icon centered above the circular backdrop */
.similar-thumb .thumb-zoom::after {
  content: '';
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(0,0,0,0.45) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zM10 14a4 4 0 110-8 4 4 0 010 8z'/></svg>") no-repeat center / 28px 28px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 120ms linear, transform 120ms ease;
}

.similar-thumb:hover {
  /* box shadow only; image scales, overlay icon appears */
  box-shadow: 0 10px 26px rgba(0,0,0,0.14);
  z-index: 3; /* raise hovered thumb so overlay doesn't cover neighbors */
}

.similar-thumb:hover img {
  transform: scale(1.06);
}

.similar-thumb:hover .thumb-zoom {
  opacity: 1;
}

.similar-thumb:hover .thumb-zoom::after {
  opacity: 1;
}

.similar-thumb:focus {
  outline: none;
}

.similar-thumb:focus img {
  transform: scale(1.06);
}
.similar-thumb:hover .thumb-zoom {
  opacity: 1;
}
/* Note: hover UI is driven purely by CSS (:hover). No JS fallback required. */
#similarCarousel .carousel-control-prev,
#similarCarousel .carousel-control-next {
  width: 38px;
  height: 38px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.65);
  border-radius: 50%;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
/* Make prev/next icons white and thicker (use inline SVGs to guarantee color and stroke) */
#similarCarousel .carousel-control-next-icon,
#similarCarousel .carousel-control-prev-icon {
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px 28px;
  width: 36px;
  height: 36px;
  filter: none !important;
  /* fallback solid color if SVG not supported */
  background-color: transparent;
}

/* Right (next) — white, thicker triangle */
#similarCarousel .carousel-control-next-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M8 5l8 7-8 7z'/></svg>") !important;
}

/* Left (prev) — white, thicker triangle */
#similarCarousel .carousel-control-prev-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23ffffff' d='M16 5L8 12l8 7z'/></svg>") !important;
}
#similarCarousel .carousel-control-prev:hover,
#similarCarousel .carousel-control-prev:focus,
#similarCarousel .carousel-control-next:hover,
#similarCarousel .carousel-control-next:focus {
  opacity: 1;
  background: rgba(0,0,0,0.78);
}
@media (max-width: 768px) {
  #similarCarousel .carousel-item {
    padding: 0 1.25rem;
  }
  .similar-slide {
    gap: 10px;
  }
  .similar-thumb {
    max-width: 100%;
    height: 180px;
  }
}

/* === GLightbox overrides (moved) === */
/* Forțează afișarea săgeților GLightbox pe TOATE dispozitivele */
.glightbox-container .gslide-description { display: none !important; }

/* Butoane navigare - vizibile întotdeauna */
.glightbox-container .gnext,
.glightbox-container .gprev {
  display: flex !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(0, 0, 0, 0.75) !important;
  border-radius: 50% !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  transition: background 0.2s ease !important;
}

.glightbox-container .gprev {
  left: 15px !important;
}

.glightbox-container .gnext {
  right: 15px !important;
}

.glightbox-container .gnext:hover,
.glightbox-container .gprev:hover {
  background: rgba(0, 0, 0, 0.9) !important;
}

.glightbox-container .gnext svg,
.glightbox-container .gprev svg {
  width: 28px !important;
  height: 28px !important;
  fill: white !important;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.3)) !important;
}

/* Touch device specific - mai mari și mai vizibile */
@media (hover: none) and (pointer: coarse) {
  .glightbox-container .gnext,
  .glightbox-container .gprev {
    width: 56px !important;
    height: 56px !important;
    background: rgba(0, 0, 0, 0.85) !important;
  }
  
  .glightbox-container .gnext svg,
  .glightbox-container .gprev svg {
    width: 32px !important;
    height: 32px !important;
  }
}

/* Ecrane mici - ajustare dimensiuni */
@media (max-width: 768px) {
  .glightbox-container .gnext,
  .glightbox-container .gprev {
    width: 52px !important;
    height: 52px !important;
  }
  
  .glightbox-container .gprev {
    left: 12px !important;
  }
  
  .glightbox-container .gnext {
    right: 12px !important;
  }
}

/* Foarte mici - mai compacte */
@media (max-width: 480px) {
  .glightbox-container .gnext,
  .glightbox-container .gprev {
    width: 48px !important;
    height: 48px !important;
  }
  
  .glightbox-container .gprev {
    left: 8px !important;
  }
  
  .glightbox-container .gnext {
    right: 8px !important;
  }
}

/* === GALLERY CSS END === */