/* ===================================================================
   Ocean Sun Theme — Accommodation Detail Styles
   ===================================================================
   Single-column layout. Booking widget gets its own full-width section.
   Sticky booking bar appears on desktop after scrolling past booking.

   Section flow:
     1. Full-width Hero Image (atmospheric photo + title overlay)
     2. Room Features + Description (narrow container)
     3. Booking Section (alt background, narrow container)
     4. Amenities (full-width container)
     5. Location (alt background)
     6. Photo Gallery (merged gallery + mosaic)
     7. FAQ
     8. Cross-sell
     9. CTA (deep navy)
    10. Mobile bar (fixed bottom) + Sticky bar (fixed top, desktop)

   Bridge between theme tokens (--os-*) and OSAC plugin (--osb-*).
   =================================================================== */

/* ── Product page theme bridge ──
   Maps theme --os-* tokens to plugin --osb-* tokens.
   Only overrides that DIFFER from variables.css defaults.
   Typography, spacing, radii, shadows, transitions are identical
   and inherited from :root — no override needed. */
.osb-product-page {
  /* Brand: Navy instead of Ocean Blue */
  --osb-brand-primary: var(--os-primary, #1C2E3F);
  --osb-brand-primary-light: var(--os-primary-light, color-mix(in srgb, #1C2E3F 10%, white));
  --osb-brand-primary-dark: var(--os-primary-dark, color-mix(in srgb, #1C2E3F 80%, black));

  /* Text: theme muted color */
  --osb-text-dark: var(--os-text, #1C2E3F);
  --osb-text-main: var(--os-text-body, #4A5568);
  --osb-text-muted: var(--os-text-muted, #7C8694);

  /* Surfaces: theme warm tones */
  --osb-surface: var(--os-bg-white, #ffffff);
  --osb-surface-bg: var(--os-bg, #FDFCF9);
  --osb-surface-bg-alt: var(--os-bg-cream, #F7F4EF);

  /* Borders: theme warm borders */
  --osb-border: var(--os-border, #E2DDD3);
  --osb-border-light: var(--os-border-light, rgba(226, 221, 211, 0.4));

  /* Wizard: flatten inside booking card (no card-in-card) */
  --osb-wizard-bg: transparent;
  --osb-wizard-border: none;
  --osb-wizard-radius: 0;
  --osb-wizard-shadow: none;

  /* Buttons: terracotta instead of teal */
  --osb-btn-cta-bg: var(--os-cta, #B8856C);
  --osb-btn-cta-bg-hover: var(--os-cta-hover, color-mix(in srgb, #B8856C 85%, black));
  --osb-btn-cta-shadow: rgba(184, 133, 108, 0.15);
  --osb-btn-check-bg: var(--os-cta, #B8856C);
  --osb-btn-check-bg-hover: var(--os-cta-hover, color-mix(in srgb, #B8856C 85%, black));
  --osb-btn-check-shadow: rgba(184, 133, 108, 0.15);

  /* Page background */
  background: var(--os-bg, #FDFCF9);
  color: var(--os-text-body, #4A5568);
}

/* ── Hero Section (full-width atmospheric image) ── */
.osb-hero {
  position: relative;
  width: 100%;
  height: clamp(320px, 60vh, 600px);
  overflow: hidden;
}

.osb-hero__image {
  position: absolute;
  inset: 0;
}

.osb-product-page .osb-hero__image img,
.osb-product-page .osb-hero__img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
}

.osb-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(28, 46, 63, 0.65) 0%,
    rgba(28, 46, 63, 0.15) 50%,
    transparent 100%
  );
}

.osb-hero__content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--os-space-8, 32px) var(--os-space-6, 24px);
  max-width: 1400px;
  margin: 0 auto;
}

.osb-hero__content .osb-badge {
  display: inline-block;
  margin-bottom: var(--os-space-3, 12px);
  padding: 5px 14px;
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--osb-radius-full, 9999px);
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.osb-product-page .osb-hero__title,
.osb-product-page .osb-hero__content h1 {
  font-family: var(--os-font-display, 'Fraunces', Georgia, serif);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 500;
  color: #ffffff;
  line-height: 1.15;
  letter-spacing: -0.3px;
  margin: 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
}

.osb-hero__gallery-btn {
  position: absolute;
  bottom: var(--os-space-6, 24px);
  right: var(--os-space-6, 24px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  border: none;
  border-radius: var(--osb-radius-full, 9999px);
  font-family: var(--os-font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--os-text, #1C2E3F);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
  z-index: 2;
}

.osb-hero__gallery-btn:hover {
  background: #ffffff;
  transform: translateY(-1px);
}

.osb-hero__gallery-btn svg {
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .osb-hero {
    height: clamp(240px, 45vh, 360px);
  }

  .osb-hero__content {
    padding: var(--os-space-6, 24px) var(--os-space-4, 16px);
  }

  .osb-hero__gallery-btn {
    bottom: var(--os-space-4, 16px);
    right: var(--os-space-4, 16px);
    font-size: 0.75rem;
    padding: 6px 12px;
  }
}

/* ── Product Header (Title + Badge + Quick Facts) ── */
.osb-product-header {
  margin-bottom: var(--os-space-8, 32px);
}

.osb-product-header h1 {
  font-family: var(--os-font-display);
  font-size: clamp(2rem, 5vw, 2.625rem);
  font-weight: var(--os-font-display-semibold, 600);
  color: var(--os-text);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin: var(--os-space-3, 12px) 0 var(--os-space-2, 8px);
}

.osb-product-header__facts {
  font-family: var(--os-font-body);
  font-size: 0.9375rem;
  color: var(--os-text-muted);
  letter-spacing: 0.02em;
}

/* ── Room Features Grid ── */
.osb-room-features-section {
  margin-bottom: var(--os-space-10, 40px);
}

.osb-room-feature__icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.osb-room-feature__icon svg {
  width: 20px;
  height: 20px;
}

/* ── Description ── */
.osb-product-description {
  margin-bottom: var(--os-space-10, 40px);
  font-family: var(--os-font-body);
  line-height: 1.7;
  color: var(--os-text-body);
}

.osb-product-description p {
  margin-bottom: var(--os-space-4, 16px);
}

.osb-product-description h2,
.osb-product-description h3 {
  font-family: var(--os-font-display);
  color: var(--os-text);
  margin-top: var(--os-space-8, 32px);
  margin-bottom: var(--os-space-4, 16px);
}

/* ── Booking Section ──
   Uses shared .os-course-booking__grid, __intro, __included classes
   from course.css. Only accommodation-specific overrides here. */

/* Strip outer card wrapper — not needed, plugin handles its own card via .osb-product-embed */
.osb-product-page .os-booking-card--accommodation {
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Wider booking column — bungalow form has 4 steppers + 2 date pickers */
.osb-product-page .os-course-booking__grid {
  grid-template-columns: 1fr 480px;
}

/* ── Amenities ── */
.osb-amenities-section {
  margin-bottom: var(--os-space-10, 40px);
}

.osb-amenities-section h3 {
  font-family: var(--os-font-display);
  font-size: 1.375rem;
  color: var(--os-text);
  margin-bottom: var(--os-space-6, 24px);
}

.osb-amenity-list {
  list-style: none;
  padding: 0;
  margin: var(--os-space-3, 12px) 0 0;
}

.osb-amenity-list__item {
  position: relative;
  padding: var(--os-space-2, 8px) 0 var(--os-space-2, 8px) var(--os-space-6, 24px);
  font-size: 0.875rem;
  color: var(--os-text-body);
  border-bottom: 1px solid var(--os-border-light, rgba(226, 221, 211, 0.4));
}

.osb-amenity-list__item:last-child {
  border-bottom: none;
}

.osb-amenity-list__item::before {
  content: '\2713';
  position: absolute;
  left: 0;
  color: var(--os-cta, #B8856C);
  font-weight: 600;
}

.osb-bento__icon svg {
  width: 24px;
  height: 24px;
  color: var(--os-cta, #B8856C);
}

/* ── Location Distances ── */
.osb-location-section h3 {
  font-family: var(--os-font-display);
  font-size: 1.375rem;
  color: var(--os-text);
  margin-bottom: var(--os-space-6, 24px);
}

.osb-location-distances {
  display: flex;
  gap: var(--os-space-4, 16px);
  flex-wrap: wrap;
}

.osb-location-distance {
  display: flex;
  align-items: center;
  gap: var(--os-space-3, 12px);
  padding: var(--os-space-4, 16px) var(--os-space-5, 20px);
  background: var(--os-bg-white, #fff);
  border: 1px solid var(--os-border);
  border-radius: var(--os-radius-lg, 12px);
  flex: 1 1 180px;
  min-width: 180px;
}

.osb-location-distance__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.osb-location-distance__icon svg {
  width: 20px;
  height: 20px;
  color: var(--os-cta, #B8856C);
}

.osb-location-distance__label {
  font-size: 0.875rem;
  color: var(--os-text-body);
  flex: 1;
}

.osb-location-distance__value {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--os-text);
}

/* ── Mosaic Section ── */
.osb-mosaic__img {
  cursor: pointer;
}

/* ── CTA Section (deep background) ── */
.osb-section--deep .osb-cta-section {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.osb-cta-section__btn {
  display: inline-block;
  max-width: 280px;
  margin: 0 auto;
}

/* ── Sticky Booking Bar (desktop — appears after scrolling past booking section) ── */
/* Sticky bar removed — replaced by global dynamic floating booking bar. */

/* ── Lightbox ── */
.osb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}

.osb-lightbox[hidden] {
  display: none;
}

.osb-lightbox__close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  z-index: 2;
  line-height: 1;
  padding: 8px;
}

.osb-lightbox__prev,
.osb-lightbox__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: #fff;
  font-size: 2.5rem;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 8px;
  z-index: 2;
  transition: background 0.2s;
}

.osb-lightbox__prev:hover,
.osb-lightbox__next:hover {
  background: rgba(255, 255, 255, 0.2);
}

.osb-lightbox__prev { left: 16px; }
.osb-lightbox__next { right: 16px; }

.osb-lightbox__stage {
  max-width: 90vw;
  max-height: 85vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.osb-lightbox__img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 4px;
}

.osb-lightbox__counter {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
}

@media (max-width: 640px) {
  .osb-lightbox__prev,
  .osb-lightbox__next {
    font-size: 1.5rem;
    padding: 8px 12px;
  }
}

/* ── Section Spacing ── */
.osb-product-page .osb-section {
  padding: var(--os-space-12, 48px) 0;
}

.osb-product-page .osb-section--compact {
  padding: var(--os-space-8, 32px) 0;
}

@media (min-width: 1024px) {
  .osb-product-page .osb-section {
    padding: 80px 0;
  }
}

/* Container widths.
   CRITICAL: Override plugin FOUC prevention (base.css sets
   .osb-container to opacity:0/visibility:hidden and waits for JS
   to add .osb-container-loaded). Our page doesn't use the plugin's
   init JS, so we must force visibility here. */
.osb-product-page .osb-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--os-space-6, 24px);
  opacity: 1 !important;
  visibility: visible !important;
}

.osb-product-page .osb-container--narrow {
  max-width: 960px;
}

/* ── Print ── */
@media print {
  .os-floating-booking-bar,
  .osb-lightbox,
  .osb-cta-section {
    display: none !important;
  }
}