/**
 * Luxury Jewelry Catalog — Preview Modal & Gallery
 *
 * Apple-style glassmorphism modal with image gallery slider,
 * product details, related products carousel, and inquiry sub-modal.
 *
 * @package LuxuryJewelryCatalog
 * @since   1.0.0
 */

/* =========================================================================
   1. Preview Modal
   ========================================================================= */

.ljc-modal {
  position: fixed;
  inset: 0;
  /* Sit above chat widgets and other third-party overlays */
  z-index: 2147483640;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ljc-space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ljc-transition-base);
}

.ljc-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.ljc-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(58, 50, 44, 0.4);
}

.ljc-modal__container {
  position: relative;
  width: 100%;
  max-width: 960px;
  max-height: 90vh;
  border-radius: var(--ljc-radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* Glassmorphism — the ONE and only glass surface */
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 8px 32px rgba(58, 50, 44, 0.08),
    0 24px 64px rgba(58, 50, 44, 0.15);
  transform: scale(0.95) translateY(16px);
  transition: transform var(--ljc-transition-slow);
}

.ljc-modal.is-open .ljc-modal__container {
  transform: scale(1) translateY(0);
}

.ljc-modal__close {
  /* Always fixed in top-right corner of the container — never scrolls away */
  position: sticky;
  top: 0;
  align-self: flex-end;
  flex-shrink: 0;
  z-index: 20;
  width: 44px;
  height: 44px;
  margin: var(--ljc-space-3) var(--ljc-space-3) calc(var(--ljc-space-3) * -1) auto;
  border-radius: var(--ljc-radius-full);
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--ljc-glass-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ljc-text-primary);
  box-shadow: 0 2px 8px rgba(58, 50, 44, 0.12);
  transition:
    background-color var(--ljc-transition-fast),
    transform var(--ljc-transition-fast);
}

.ljc-modal__close:hover {
  background: rgba(255, 255, 255, 0.98);
  transform: scale(1.05);
}

.ljc-modal__body {
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  /* Prevent any child from bleeding outside the container width */
  overflow-x: hidden;
}

/* =========================================================================
   2. Gallery (Left Panel on Desktop)
   ========================================================================= */

.ljc-gallery {
  flex: 1;
  min-width: 0;
  min-height: 0;
  position: relative;
  background-color: transparent;
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--ljc-space-3);
}

.ljc-gallery__hero {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Explicit flex-grow + min-height so height:100% resolves on desktop */
  flex: 1;
  min-height: 260px;
  cursor: zoom-in;
  overflow: hidden;
  border-radius: var(--ljc-radius-md);
  /* === Frosted White Glass Treatment (Section 1) === */
  background: var(--ljc-glass-bg);                       /* rgba(255,255,255,0.65) */
  -webkit-backdrop-filter: blur(var(--ljc-glass-blur));  /* 20px */
  backdrop-filter: blur(var(--ljc-glass-blur));
  border: 1px solid var(--ljc-glass-border);             /* rgba(255,255,255,0.9) */
  box-shadow: var(--ljc-glass-shadow);                   /* soft diffuse */
}

.ljc-gallery__hero-img {
  /* Fill the flex container completely */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
  transition: transform var(--ljc-transition-base);
  touch-action: manipulation;
  display: block;
}

.ljc-gallery__hero.is-zoomed {
  cursor: zoom-out;
}

.ljc-gallery__hero.is-zoomed .ljc-gallery__hero-img {
  transform: scale(2);
  cursor: zoom-out;
}

.ljc-gallery__nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: var(--ljc-radius-full);
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ljc-glass-border);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ljc-text-primary);
  z-index: 5;
  transition:
    opacity var(--ljc-transition-fast),
    background-color var(--ljc-transition-fast);
  opacity: 0;
}

.ljc-gallery__hero:hover .ljc-gallery__nav-btn {
  opacity: 1;
}

.ljc-gallery__nav-btn:hover {
  background: rgba(255, 255, 255, 0.95);
}

.ljc-gallery__nav-btn--prev {
  left: var(--ljc-space-3);
}

.ljc-gallery__nav-btn--next {
  right: var(--ljc-space-3);
}

.ljc-gallery__nav-btn:disabled {
  opacity: 0.3 !important;
  cursor: default;
  pointer-events: none;
}

.ljc-gallery__dots {
  display: flex;
  justify-content: center;
  gap: var(--ljc-space-2);
  padding: var(--ljc-space-3);
}

.ljc-gallery__dot {
  width: 8px;
  height: 8px;
  border-radius: var(--ljc-radius-full);
  background: var(--ljc-hairline);
  border: none;
  cursor: pointer;
  transition: background-color var(--ljc-transition-fast);
  padding: 0;
}

.ljc-gallery__dot.is-active {
  background: var(--ljc-accent-primary);
  width: 20px;
  border-radius: 4px;
}

.ljc-gallery__thumbs {
  display: flex;
  gap: var(--ljc-space-2);
  padding: var(--ljc-space-2);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  max-width: 100%;
}

.ljc-gallery__thumbs::-webkit-scrollbar {
  display: none;
}

.ljc-gallery__thumb {
  width: 56px;
  height: 56px;
  border-radius: var(--ljc-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  cursor: pointer;
  /* Active state uses accent; idle uses a lighter glass border */
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 2px 8px rgba(58, 50, 44, 0.07);
  background: rgba(255, 255, 255, 0.55);
  transition:
    border-color var(--ljc-transition-fast),
    box-shadow var(--ljc-transition-fast);
  padding: 0;
}

.ljc-gallery__thumb.is-active {
  border-color: var(--ljc-accent-primary);
  box-shadow: 0 0 0 2px var(--ljc-accent-primary);
}

.ljc-gallery__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================================
   3. Product Info (Right Panel on Desktop)
   ========================================================================= */

.ljc-modal-info {
  flex: 1;
  min-width: 0;
  padding: var(--ljc-space-6);
  display: flex;
  flex-direction: column;
  gap: var(--ljc-space-4);
  overflow-y: auto;
}

.ljc-modal-info__categories {
  display: flex;
  gap: var(--ljc-space-2);
  margin-bottom: calc(var(--ljc-space-4) * -1 + var(--ljc-space-2)); /* pull closer to header */
  flex-wrap: wrap;
}

.ljc-modal-info__category-tag {
  font-family: var(--ljc-font-mono);
  font-size: var(--ljc-type-micro);
  font-weight: var(--ljc-weight-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ljc-accent-secondary);
  border: 1px solid var(--ljc-hairline);
  padding: 4px 10px;
  border-radius: var(--ljc-radius-full);
}

.ljc-modal-info__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ljc-space-4);
}

.ljc-modal-info__name {
  font-family: var(--ljc-font-display);
  font-size: var(--ljc-type-heading);
  font-weight: var(--ljc-weight-regular);
  color: var(--ljc-text-primary);
  line-height: 1.25;
  flex: 1;
}

.ljc-modal-info__meta {
  display: flex;
  align-items: center;
  gap: var(--ljc-space-4);
  flex-wrap: wrap;
}

.ljc-modal-info__meta-item {
  display: flex;
  align-items: center;
  gap: var(--ljc-space-2);
}

.ljc-modal-info__meta-label {
  font-size: var(--ljc-type-micro);
  font-weight: var(--ljc-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ljc-text-secondary);
}

.ljc-modal-info__meta-value {
  font-family: var(--ljc-font-mono);
  font-size: var(--ljc-type-caption);
  color: var(--ljc-text-primary);
}

.ljc-modal-info__description {
  font-size: var(--ljc-type-body);
  color: var(--ljc-text-secondary);
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.ljc-modal-info__divider {
  height: 1px;
  background: var(--ljc-hairline);
  border: none;
  margin: 0;
}

.ljc-modal-info__actions {
  display: flex;
  gap: var(--ljc-space-3);
}

.ljc-modal-info__actions .ljc-btn {
  flex: 1;
}

/* =========================================================================
   4. Related Products Carousel
   ========================================================================= */

.ljc-related {
  padding: var(--ljc-space-5) var(--ljc-space-6);
  border-top: 1px solid var(--ljc-hairline);
  background: rgba(252, 250, 247, 0.5);
}

.ljc-related__title {
  font-family: var(--ljc-font-display);
  font-size: var(--ljc-type-subheading);
  font-weight: var(--ljc-weight-regular);
  color: var(--ljc-text-primary);
  margin-bottom: var(--ljc-space-4);
}

.ljc-related__scroll {
  display: flex;
  gap: var(--ljc-space-3);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--ljc-space-2);
}

.ljc-related__scroll::-webkit-scrollbar {
  display: none;
}

.ljc-related__scroll .ljc-card {
  flex: 0 0 160px;
  scroll-snap-align: start;
}

.ljc-related__scroll .ljc-card__name {
  font-size: var(--ljc-type-micro);
  -webkit-line-clamp: 1;
}

/* Consistent (lighter-weight) glass border on related card images */
.ljc-related__scroll .ljc-card__image-wrap {
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--ljc-radius-sm);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(58, 50, 44, 0.07);
}




/* =========================================================================
   5. Inquiry Sub-Modal
   ========================================================================= */

.ljc-inquiry-modal {
  position: fixed;
  inset: 0;
  /* Must be above the preview modal (2147483640) */
  z-index: 2147483647;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ljc-space-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ljc-transition-base);
  /* Backdrop blur so the preview modal behind remains visible */
  background: rgba(58, 50, 44, 0.15);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.ljc-inquiry-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

/* The inquiry modal uses its own backdrop for the blur effect above;
   remove the separate dark backdrop div to avoid double-dimming */
.ljc-inquiry-modal__backdrop {
  display: none;
}

.ljc-inquiry-modal__container {
  position: relative;
  width: 100%;
  max-width: 360px;
  border-radius: var(--ljc-radius-xl);
  padding: var(--ljc-space-6);
  text-align: center;
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--ljc-glass-border);
  box-shadow: var(--ljc-glass-shadow);
  transform: scale(0.9);
  transition: transform var(--ljc-transition-slow);
}

.ljc-inquiry-modal.is-open .ljc-inquiry-modal__container {
  transform: scale(1);
}

.ljc-inquiry-modal__title {
  font-family: var(--ljc-font-display);
  font-size: var(--ljc-type-subheading);
  font-weight: var(--ljc-weight-regular);
  color: var(--ljc-text-primary);
  margin-bottom: var(--ljc-space-5);
}

.ljc-inquiry-modal__options {
  display: flex;
  flex-direction: column;
  gap: var(--ljc-space-3);
}

.ljc-inquiry-modal__btn-whatsapp {
  background-color: #25D366;
  color: #FFFFFF;
  border-color: #25D366;
}

.ljc-inquiry-modal__btn-whatsapp:hover {
  background-color: #1da851;
  border-color: #1da851;
}

.ljc-inquiry-modal__btn-instagram {
  background: linear-gradient(135deg, #833AB4 0%, #FD1D1D 50%, #F77737 100%);
  color: #FFFFFF;
  border-color: transparent;
}

.ljc-inquiry-modal__btn-instagram:hover {
  opacity: 0.9;
}

/* =========================================================================
   6. Responsive — Mobile-First: full-screen single-column stack
   ========================================================================= */

@media (max-width: 767px) {
  /* Inset floating card — 14px breathing room on every side */
  .ljc-modal {
    padding: 14px;
    align-items: flex-end;
  }

  .ljc-modal__container {
    width: 100%;
    /* Height = full viewport minus the 14px top + 14px bottom inset */
    height: calc(100dvh - 28px);
    max-height: calc(100dvh - 28px);
    /* Also account for safe-area-inset on notched phones */
    height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    max-height: calc(100dvh - 28px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    /* Rounded corners — it's a card, not a sheet */
    border-radius: var(--ljc-radius-xl);
    /* Slide up from bottom */
    transform: translateY(calc(100% + 14px));
    overflow-y: auto;
    overflow-x: hidden;
    flex-direction: column;
  }

  .ljc-modal.is-open .ljc-modal__container {
    transform: translateY(0);
  }

  /* Close button: sticky at top so it never scrolls away on mobile */
  .ljc-modal__close {
    position: sticky;
    top: var(--ljc-space-2);
    z-index: 30;
    margin: var(--ljc-space-2) var(--ljc-space-3) calc(var(--ljc-space-3) * -1) auto;
    align-self: flex-end;
  }

  /* Body: single column, no independent scroll (container scrolls) */
  .ljc-modal__body {
    flex-direction: column;
    overflow: visible;
    flex: none;
    min-height: 0;
  }

  /* Gallery: full-width, image capped at 45dvh so content below is visible */
  .ljc-gallery {
    width: 100%;
    flex-direction: column;
    padding: 0;
    gap: 0;
    flex: none;
  }

  .ljc-gallery__hero {
    width: 100%;
    /* Hard cap: never taller than 40dvh, keeps content visible below fold */
    height: clamp(200px, 40dvh, 340px);
    /* Keep the glass treatment — reduce blur slightly for mobile performance */
    background: rgba(255, 255, 255, 0.68);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--ljc-glass-border);
    box-shadow: 0 4px 20px rgba(58, 50, 44, 0.07);
    /* Top corners match the modal card's inset corners */
    border-radius: var(--ljc-radius-xl) var(--ljc-radius-xl) 0 0;
    cursor: default;
  }

  .ljc-gallery__hero-img {
    /* Override desktop absolute; mobile hero has explicit height via clamp() */
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* Hide desktop zoom on mobile */
  .ljc-gallery__hero.is-zoomed .ljc-gallery__hero-img {
    transform: none;
  }

  /* Hide chevron arrows on mobile — swipe-only navigation */
  .ljc-gallery__nav-btn {
    display: none;
  }

  /* Thumbnail strip: horizontal, contained, no overflow bleed */
  .ljc-gallery__thumbs {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    padding: var(--ljc-space-3) var(--ljc-space-4);
    gap: var(--ljc-space-2);
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Dots below image, centered */
  .ljc-gallery__dots {
    padding: var(--ljc-space-2) var(--ljc-space-4);
  }

  /* Product info: full width, padded, no independent scroll */
  .ljc-modal-info {
    width: 100%;
    padding: var(--ljc-space-4);
    overflow: visible;
    flex: none;
    box-sizing: border-box;
  }

  /* Related products section */
  .ljc-related {
    width: 100%;
    /* Padding sides match the content above; extra bottom clears safe area */
    padding: var(--ljc-space-4) var(--ljc-space-4)
             calc(var(--ljc-space-6) + env(safe-area-inset-bottom, 0px)) var(--ljc-space-4);
    box-sizing: border-box;
    /* Must not clip its own scroll strip */
    overflow: visible;
  }

  /* Related scroll strip — contained, never bleeds, last card never clipped */
  .ljc-related__scroll {
    /* Slight negative side margins so strip reaches section edges,
       then padding re-introduces the inset so the last card trails off visibly */
    margin-left: calc(var(--ljc-space-4) * -1);
    margin-right: calc(var(--ljc-space-4) * -1);
    padding-left: var(--ljc-space-4);
    /* *** Key fix: trailing right padding so last card is never clipped *** */
    padding-right: var(--ljc-space-4);
    overflow-x: auto;
    overflow-y: hidden;
    /* proximity snap: partial next card peeks in as scroll affordance */
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    box-sizing: content-box;
    /* Extra room to show peek of next card */
    scroll-padding-left: var(--ljc-space-4);
  }

  /* Related cards: fixed width, snap at leading edge */
  .ljc-related__scroll .ljc-card {
    flex: 0 0 148px;
    scroll-snap-align: start;
  }
}

/* Desktop: two-column layout */
@media (min-width: 768px) {
  .ljc-modal {
    padding: var(--ljc-space-5);
  }

  /* Must have a finite height for children to stretch against */
  .ljc-modal__body {
    flex-direction: row;
    /* overflow-y: auto keeps the whole two-column panel scrollable as one unit */
    overflow-y: hidden;
    flex: 1;
    min-height: 0;
  }

  .ljc-gallery {
    flex: 0 0 50%;
    max-width: 50%;
    /* row-reverse: thumbs column on left, hero fills right */
    flex-direction: row-reverse;
    align-items: stretch;
    padding: var(--ljc-space-4);
    gap: var(--ljc-space-3);
    /* Give column a finite height so child flex: 1 resolves */
    min-height: 0;
    overflow: hidden;
  }

  .ljc-gallery__hero {
    /* Fills the remaining width after thumbs column */
    flex: 1;
    min-width: 0;
    min-height: 0;
    /* Let the image establish the height, capped sensibly */
    height: auto;
    max-height: 100%;
    border-radius: var(--ljc-radius-md);
    cursor: zoom-in;
  }

  .ljc-gallery__hero-img {
    /* On desktop use relative layout so container grows with image */
    position: relative;
    inset: auto;
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  .ljc-gallery__thumbs {
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
    flex-shrink: 0;
    width: 68px;
  }

  /* Dots: hide on desktop, thumbnails take their role */
  .ljc-gallery__dots {
    display: none;
  }

  /* Show chevrons on desktop (revealed on hero hover) */
  .ljc-gallery__nav-btn {
    display: flex;
  }

  .ljc-modal-info {
    flex: 0 0 50%;
    max-width: 50%;
    overflow-y: auto;
  }
}

/* =========================================================================
   7. Modal Loading State
   ========================================================================= */

.ljc-modal__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  width: 100%;
}

.ljc-modal__loading-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--ljc-hairline);
  border-top-color: var(--ljc-accent-primary);
  border-radius: 50%;
  animation: ljc-spin 0.8s linear infinite;
}

@keyframes ljc-spin {
  to {
    transform: rotate(360deg);
  }
}