/* ══════════════════════════════════════
   PRODUCT LIGHTBOX — Unified Component
   Light + Dark theme, 80/20 layout
══════════════════════════════════════ */

/* ── Theme variables (light default) ── */
:root {
  --plb-backdrop: rgba(0, 0, 0, 0.7);
  --plb-container-bg: #ffffff;
  --plb-container-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
  --plb-image-area-bg: #f4f6f8;
  --plb-nav-bg: rgba(0, 0, 0, 0.08);
  --plb-nav-bg-hover: rgba(0, 0, 0, 0.18);
  --plb-nav-color: #333;
  --plb-thumb-active-border: #417690;
  --plb-counter-color: #6b7685;
  --plb-info-color: #333;
  --plb-sku-color: #1a1a1a;
  --plb-sku-border: #e0e4e8;
  --plb-label-color: #6b7685;
  --plb-value-color: #222;
  --plb-row-border: #eef0f3;
  --plb-desc-border: #e0e4e8;
  --plb-desc-color: #555;
  --plb-close-bg: #c2222c;
  --plb-close-bg-hover: #c2222c;
}

/* ── Dark theme ── */
[data-bs-theme="dark"],
[data-theme="dark"],
.dark {
  --plb-backdrop: rgba(0, 0, 0, 0.85);
  --plb-container-bg: #1a1f2b;
  --plb-container-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  --plb-image-area-bg: #111620;
  --plb-nav-bg: rgba(255, 255, 255, 0.12);
  --plb-nav-bg-hover: rgba(255, 255, 255, 0.25);
  --plb-nav-color: #fff;
  --plb-thumb-active-border: #4da3ff;
  --plb-counter-color: #8b95a5;
  --plb-info-color: #c9d1d9;
  --plb-sku-color: #ffffff;
  --plb-sku-border: #2d3548;
  --plb-label-color: #8b95a5;
  --plb-value-color: #e6edf3;
  --plb-row-border: #1e2636;
  --plb-desc-border: #2d3548;
  --plb-desc-color: #b0bac7;
  --plb-close-bg: #c2222c;
  --plb-close-bg-hover: #c2222c;
}

/* Force dark on the overlay itself (for admin pages without data-bs-theme) */
.plb-overlay.plb-dark {
  --plb-backdrop: rgba(0, 0, 0, 0.85);
  --plb-container-bg: #1a1f2b;
  --plb-container-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
  --plb-image-area-bg: #111620;
  --plb-nav-bg: rgba(255, 255, 255, 0.12);
  --plb-nav-bg-hover: rgba(255, 255, 255, 0.25);
  --plb-nav-color: #fff;
  --plb-thumb-active-border: #4da3ff;
  --plb-counter-color: #8b95a5;
  --plb-info-color: #c9d1d9;
  --plb-sku-color: #ffffff;
  --plb-sku-border: #2d3548;
  --plb-label-color: #8b95a5;
  --plb-value-color: #e6edf3;
  --plb-row-border: #1e2636;
  --plb-desc-border: #2d3548;
  --plb-desc-color: #b0bac7;
}

/* ── Overlay ── */
.plb-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.plb-overlay.plb-open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Backdrop ── */
.plb-backdrop {
  position: absolute;
  inset: 0;
  background: var(--plb-backdrop);
  backdrop-filter: blur(6px);
}

/* ── Close button ── */
.plb-close {
  position: absolute;
  top: 16px;
  right: 20px;
  z-index: 10;
  background: var(--plb-close-bg);
  color: #fff;
  border: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.plb-close:hover {
  background: var(--plb-close-bg-hover);
  transform: scale(1.1);
}

/* ── Main container: 80/20 two-column ── */
.plb-container {
  position: relative;
  z-index: 5;
  display: flex;
  gap: 24px;
  max-width: 95vw;
  max-height: 92vh;
  width: 95vw;
  padding: 24px;
  background: var(--plb-container-bg);
  border-radius: 16px;
  box-shadow: var(--plb-container-shadow);
  overflow-y: auto;
  transform: scale(0.92);
  transition: transform 0.25s ease;
}
.plb-open .plb-container {
  transform: scale(1);
}

/* ── Left: Images (80%) ── */
.plb-images {
  flex: 1 1 80%;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}

/* Main image wrapper */
.plb-main-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--plb-image-area-bg);
  border-radius: 12px;
  padding: 12px;
  min-height: 350px;
  overflow: hidden;
}
.plb-main-img {
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.15s ease;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}
.plb-main-img.plb-zoomed {
  cursor: zoom-out;
}

/* ── Video stage ──
   Matches the image stage's box so switching slides doesn't jump the layout.
   No zoom cursor: video is played, not zoomed. */
.plb-main-video {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  background: #000;
  outline: none;
}

/* ── Nav arrows ── */
.plb-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: var(--plb-nav-bg);
  color: var(--plb-nav-color);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.plb-nav:hover {
  background: var(--plb-nav-bg-hover);
}
.plb-prev { left: 8px; }
.plb-next { right: 8px; }

/* ── Thumbnails strip ── */
.plb-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.plb-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s, border-color 0.2s, transform 0.2s;
}
.plb-thumb:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.plb-thumb.plb-thumb-active {
  opacity: 1;
  border-color: var(--plb-thumb-active-border);
}

/* ── Video thumbnails ──
   A video's thumb is its poster with a play badge on top, so the strip makes
   clear which slides are video before you click them. The wrapper carries the
   active border because the badge has to sit above the poster. */
.plb-thumb-video {
  position: relative;
  display: inline-block;
  line-height: 0;
  border-radius: 8px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color 0.2s, transform 0.2s;
}
.plb-thumb-video .plb-thumb {
  border: 0;
  opacity: 0.75;
}
.plb-thumb-video:hover { transform: scale(1.05); }
.plb-thumb-video:hover .plb-thumb { opacity: 1; }
.plb-thumb-video.plb-thumb-active { border-color: var(--plb-thumb-active-border); }
.plb-thumb-video.plb-thumb-active .plb-thumb { opacity: 1; }

/* Poster missing — show a neutral tile instead of a broken image. */
.plb-thumb-video.plb-thumb-noposter .plb-thumb {
  width: 64px;
  height: 64px;
  background: #2a2f36;
  opacity: 1;
}

.plb-thumb-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
  background: rgba(0, 0, 0, 0.28);
  border-radius: 6px;
  pointer-events: none;
}

/* ── Counter ── */
.plb-counter {
  margin-top: 8px;
  font-size: 13px;
  color: var(--plb-counter-color);
}

/* ── Right: Product info (20%) ── */
.plb-info {
  flex: 1 1 20%;
  min-width: 200px;
  max-width: 280px;
  color: var(--plb-info-color);
  overflow-y: auto;
  max-height: 80vh;
  padding-right: 8px;
}
.plb-sku {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--plb-sku-color);
  margin: 0 0 16px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--plb-sku-border);
}

/* Detail rows */
.plb-detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--plb-row-border);
  gap: 8px;
}
.plb-label {
  color: var(--plb-label-color);
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.plb-value {
  color: var(--plb-value-color);
  font-size: 0.9rem;
  text-align: right;
  word-break: break-word;
}

/* Description block */
.plb-desc {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--plb-desc-border);
}
.plb-desc .plb-label {
  display: block;
  margin-bottom: 6px;
}
.plb-desc-text {
  color: var(--plb-desc-color);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}
.plb-container.plb-wide-info .plb-info {
  flex-basis: 34%;
  max-width: 420px;
}
/* COS003-2440: shown whole. The info panel scrolls when it runs long, the
   text itself is never clipped, and the line breaks it was typed with stay. */
.plb-purchase-text {
  max-height: none;
  overflow: visible;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ── Add to Order button ── */
.plb-add-to-order {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 10px 16px;
  background: #c2222c;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  transition: background 0.15s ease, transform 0.15s ease;
}
.plb-add-to-order:hover {
  background: #c2222c;
  transform: translateY(-1px);
}
.plb-add-to-order:disabled {
  background: #9b9b9b;
  cursor: not-allowed;
  transform: none;
}

/* ── No info panel mode ── */
.plb-container.plb-no-info .plb-info {
  display: none;
}
.plb-container.plb-no-info .plb-images {
  flex: 1 1 100%;
}

/* ── Responsive: stack on mobile ── */
@media (max-width: 768px) {
  .plb-container {
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    max-height: 95vh;
    width: 98vw;
  }
  .plb-images {
    flex: none;
  }
  .plb-main-img {
    max-height: 40vh;
  }
  .plb-info {
    flex: none;
    max-width: none;
    max-height: none;
    min-width: 0;
  }
  .plb-container.plb-wide-info .plb-info {
    max-width: none;
  }
  .plb-sku {
    font-size: 1rem;
  }
  .plb-nav {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }
  .plb-thumb {
    width: 48px;
    height: 48px;
  }
}