/* ==========================================================================
   Bookable Experience Detail Page
   ========================================================================== */

/* -------------------------------------------------------------------------
   Hero Section
   ------------------------------------------------------------------------- */

.detail-hero {
  position: relative;
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.detail-hero-background {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.detail-hero-background img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.detail-hero-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.1) 40%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 1;
}

.detail-hero-content {
  position: relative;
  z-index: 2;
  padding: var(--space-16) 0 var(--space-12);
}

/* Breadcrumb in hero */
.detail-hero .breadcrumb {
  margin-bottom: var(--space-6);
}

.detail-hero .breadcrumb a,
.detail-hero .breadcrumb-separator {
  color: rgba(255, 255, 255, 0.7);
}

.detail-hero .breadcrumb a:hover {
  color: var(--color-text-inverse);
}

.detail-hero .breadcrumb-current {
  color: var(--color-text-inverse);
}

/* Category Tags */
.detail-hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.detail-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  border-radius: var(--radius-full);
}

.detail-hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-medium);
  color: var(--color-text-inverse);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-4);
  max-width: 800px;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

.detail-hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

.detail-hero-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--text-base);
}

.detail-hero-meta-item svg {
  width: 18px;
  height: 18px;
  opacity: 0.8;
}

/* Hero Price - subtle, aligned right on desktop */
.detail-hero-price {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--text-base);
  font-weight: 400;
}

/* -------------------------------------------------------------------------
   Media Gallery
   ------------------------------------------------------------------------- */

.media-gallery {
  padding: var(--space-8) 0;
  background-color: var(--color-bg);
}

.gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: repeat(2, 200px);
  gap: var(--space-3);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-accent);
}

.gallery-item:first-child {
  grid-row: span 2;
}

.gallery-item img,
.gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-item:hover img,
.gallery-item:hover video {
  transform: scale(1.05);
}

/* Video play button overlay */
.gallery-item-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  transition: background var(--transition-fast);
}

.gallery-item-video:hover::before {
  background: rgba(0, 0, 0, 0.4);
}

.gallery-item-video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-full);
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232D5A47'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
  transition: transform var(--transition-base);
}

.gallery-item-video:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}

/* View all button */
.gallery-view-all {
  display: flex;
  justify-content: center;
  margin-top: var(--space-4);
}

.gallery-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-bg-card);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gallery-view-all-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.gallery-view-all-btn svg {
  width: 18px;
  height: 18px;
}

/* -------------------------------------------------------------------------
   Lightbox Modal
   ------------------------------------------------------------------------- */

.gallery-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.gallery-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  color: var(--color-text-inverse);
}

.lightbox-counter {
  font-size: var(--text-sm);
  opacity: 0.7;
}

.lightbox-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-close svg {
  width: 24px;
  height: 24px;
}

.lightbox-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  position: relative;
}

.lightbox-media {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.lightbox-nav:hover {
  background: rgba(255, 255, 255, 0.2);
}

.lightbox-nav svg {
  width: 24px;
  height: 24px;
}

.lightbox-prev {
  left: var(--space-6);
}

.lightbox-next {
  right: var(--space-6);
}

/* -------------------------------------------------------------------------
   Main Content Layout
   ------------------------------------------------------------------------- */

.detail-content {
  padding: var(--space-12) 0 var(--space-16);
  background-color: var(--color-bg);
}

.detail-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-12);
  align-items: start;
}

/* Main Content Column */
.detail-main {
  min-width: 0;
}

/* Sidebar / Booking Card Column */
.detail-sidebar {
  position: sticky;
  top: 100px;
}

/* -------------------------------------------------------------------------
   Booking Card
   ------------------------------------------------------------------------- */

.booking-card {
  background: var(--color-bg-card);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-accent);
}

.booking-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.booking-price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.booking-price-unit {
  font-size: var(--text-base);
  color: var(--color-text-muted);
}

.booking-meta {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: var(--space-5);
}

.booking-meta-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.booking-meta-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.booking-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.booking-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.booking-field-label {
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
}

.booking-field-input {
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  transition: all var(--transition-fast);
  cursor: pointer;
}

.booking-field-input:hover {
  border-color: var(--color-text-light);
}

.booking-field-input:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Guest Counter */
.guest-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.guest-counter-value {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.guest-counter-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.guest-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.guest-counter-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.guest-counter-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.guest-counter-btn svg {
  width: 16px;
  height: 16px;
}

.guest-counter-num {
  min-width: 24px;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

/* Booking Type Badge */
.booking-type {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.booking-type svg {
  width: 14px;
  height: 14px;
}

.booking-cta {
  width: 100%;
  padding: var(--space-4);
  font-size: var(--text-base);
}

.booking-note {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
}

/* -------------------------------------------------------------------------
   Content Sections
   ------------------------------------------------------------------------- */

.detail-section {
  margin-bottom: var(--space-10);
  padding-bottom: var(--space-10);
  border-bottom: 1px solid var(--color-accent);
}

.detail-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.detail-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-5);
}

.detail-section-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.detail-section-text p {
  margin-bottom: var(--space-4);
}

.detail-section-text p:last-child {
  margin-bottom: 0;
}

/* Step List (What You'll Do) */
.step-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.step-item {
  display: flex;
  gap: var(--space-4);
}

.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
}

.step-content {
  flex: 1;
  padding-top: var(--space-1);
}

.step-text {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* Included / Not Included Grid */
.included-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.included-column-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.included-column-title svg {
  width: 18px;
  height: 18px;
}

.included-column-title.included svg {
  color: var(--color-success);
}

.included-column-title.not-included svg {
  color: var(--color-text-muted);
}

.included-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.included-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.included-item svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.included-item.included svg {
  color: var(--color-success);
}

.included-item.not-included svg {
  color: var(--color-text-light);
}

/* Who This Is For */
.audience-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.audience-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--color-text);
}

.audience-item svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
}

.audience-note {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.audience-note svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-accent-warm);
}

/* -------------------------------------------------------------------------
   Host Section
   ------------------------------------------------------------------------- */

.host-card {
  display: flex;
  gap: var(--space-5);
  padding: var(--space-6);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-accent);
}

.host-avatar {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: var(--radius-full);
  overflow: hidden;
  background-color: var(--color-accent);
}

.host-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.host-info {
  flex: 1;
}

.host-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.host-name {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.host-bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.host-languages {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.host-languages-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.host-language-tag {
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Practical Information
   ------------------------------------------------------------------------- */

.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

.info-item {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent);
}

.info-item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}

.info-item-icon svg {
  width: 20px;
  height: 20px;
}

.info-item-content {
  flex: 1;
  min-width: 0;
}

.info-item-label {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.info-item-value {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

/* Full-width info item */
.info-item-full {
  grid-column: span 2;
}

/* -------------------------------------------------------------------------
   Reviews Section
   ------------------------------------------------------------------------- */

/* Reviews Summary */
.reviews-summary {
  margin-bottom: var(--space-6);
}

.reviews-score {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.reviews-score-value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.reviews-score-stars {
  display: flex;
  gap: 2px;
}

.reviews-score-stars svg {
  width: 18px;
  height: 18px;
  color: var(--color-accent-warm);
}

.reviews-score-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Reviews Carousel */
.reviews-carousel {
  position: relative;
}

.reviews-carousel-track {
  position: relative;
  min-height: 220px;
}

.review-card {
  position: absolute;
  inset: 0;
  padding: var(--space-6);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-accent);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  pointer-events: none;
}

.review-card.is-active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
  position: relative;
}

.review-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.review-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.review-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.review-author {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-author-name {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.review-author-location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.review-rating {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
}

.review-rating svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent-warm);
}

.review-rating span {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.review-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
  font-style: italic;
}

.review-date {
  font-size: var(--text-xs);
  color: var(--color-text-light);
}

/* Carousel Dots */
.reviews-carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.carousel-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  border: none;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.carousel-dot:hover {
  background-color: var(--color-text-light);
}

.carousel-dot.is-active {
  background-color: var(--color-primary);
  width: 24px;
}

/* Reviews Empty State (fallback) */
.reviews-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--space-10);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-xl);
  border: 1px dashed var(--color-accent);
}

.reviews-empty-icon {
  width: 48px;
  height: 48px;
  margin-bottom: var(--space-4);
  color: var(--color-text-light);
}

.reviews-empty-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.reviews-empty-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 320px;
}

/* -------------------------------------------------------------------------
   Related Experiences
   ------------------------------------------------------------------------- */

.related-section {
  padding: var(--space-16) 0;
  background-color: var(--color-bg);
  border-top: 1px solid var(--color-accent);
}

.related-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.related-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

/* -------------------------------------------------------------------------
   Mobile Booking Bar
   ------------------------------------------------------------------------- */

.mobile-booking-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: var(--z-overlay);
  background: var(--color-bg-card);
  border-top: 1px solid var(--color-accent);
  padding: var(--space-4);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.mobile-booking-bar-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.mobile-booking-price {
  display: flex;
  flex-direction: column;
}

.mobile-booking-price-amount {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.mobile-booking-price-unit {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.mobile-booking-cta {
  flex: 1;
  max-width: 200px;
}

/* -------------------------------------------------------------------------
   Mobile Booking Drawer
   ------------------------------------------------------------------------- */

.mobile-booking-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
}

.mobile-booking-drawer.is-open {
  display: block;
}

.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.5);
  animation: fadeIn 0.2s ease;
}

.mobile-drawer-panel {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 90vh;
  background: var(--color-bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  animation: slideUp 0.3s ease;
  overflow: hidden;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.mobile-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-accent);
  flex-shrink: 0;
}

.mobile-drawer-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin: 0;
}

.mobile-drawer-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-full);
  background: var(--color-accent-light);
  color: var(--color-text);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.mobile-drawer-close:hover {
  background: var(--color-accent);
}

.mobile-drawer-close svg {
  width: 20px;
  height: 20px;
}

.mobile-drawer-content {
  padding: var(--space-5);
  overflow-y: auto;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

/* Override booking card styles inside drawer */
.mobile-drawer-content .booking-price {
  margin-bottom: var(--space-4);
}

.mobile-drawer-content .booking-meta {
  margin-bottom: var(--space-4);
}

.mobile-drawer-content .booking-form {
  gap: var(--space-3);
}

.mobile-drawer-content .booking-cta {
  width: 100%;
  margin-top: var(--space-2);
}

/* -------------------------------------------------------------------------
   Responsive - Tablet
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .detail-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-8);
  }

  .gallery-grid {
    grid-template-rows: repeat(2, 180px);
  }

  .related-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .info-grid {
    grid-template-columns: 1fr;
  }

  .info-item-full {
    grid-column: span 1;
  }
}

/* -------------------------------------------------------------------------
   Responsive - Mobile
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .detail-hero {
    min-height: 60vh;
  }

  .detail-hero-content {
    padding: var(--space-10) 0 var(--space-8);
  }

  .detail-hero-title {
    font-size: var(--text-3xl);
  }

  .detail-hero-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  /* Hide hero price on mobile - shown in bottom bar instead */
  .detail-hero-price {
    display: none;
  }

  /* Gallery - simplified layout */
  .gallery-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 200px 150px;
  }

  .gallery-item:first-child {
    grid-column: span 2;
    grid-row: span 1;
  }

  .gallery-item:nth-child(n+4) {
    display: none;
  }

  /* Two-column to single column */
  .detail-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  /* Hide desktop booking sidebar */
  .detail-sidebar {
    display: none;
  }

  /* Show mobile booking bar */
  .mobile-booking-bar {
    display: block;
  }

  /* Add padding to main content for mobile bar */
  .detail-content {
    padding-bottom: calc(var(--space-16) + 80px);
  }

  /* Included grid to single column */
  .included-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  /* Host card stack */
  .host-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .host-languages {
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Related experiences */
  .related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }

  .related-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  /* Lightbox nav hidden on mobile (use swipe) */
  .lightbox-prev,
  .lightbox-next {
    display: none;
  }
}

@media (max-width: 480px) {
  .detail-hero-title {
    font-size: var(--text-2xl);
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    grid-template-rows: 200px 120px;
  }

  .gallery-item:first-child {
    grid-column: span 1;
  }

  .gallery-item:nth-child(n+3) {
    display: none;
  }

  .related-grid {
    grid-template-columns: 1fr;
  }

  .step-item {
    gap: var(--space-3);
  }

  .step-number {
    width: 28px;
    height: 28px;
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   Discover Experience Page (Non-Bookable)
   ========================================================================== */

/* -------------------------------------------------------------------------
   Discover Page Layout Modifier - Single Column (No Sidebar)
   ------------------------------------------------------------------------- */

.discover-page .detail-layout {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

.discover-page .detail-content {
  padding-bottom: var(--space-16);
}

/* -------------------------------------------------------------------------
   Discover Badge (Hero)
   ------------------------------------------------------------------------- */

.discover-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-accent-warm);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.discover-badge svg {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------
   Expect List (What to Expect)
   ------------------------------------------------------------------------- */

.expect-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.expect-item {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.expect-item-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}

.expect-item-icon svg {
  width: 20px;
  height: 20px;
}

.expect-item-text {
  flex: 1;
  padding-top: var(--space-2);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* -------------------------------------------------------------------------
   Local Tips
   ------------------------------------------------------------------------- */

.tips-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.tip-item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-accent);
}

.tip-item-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-warm);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
}

.tip-item-icon svg {
  width: 18px;
  height: 18px;
}

.tip-item-text {
  flex: 1;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* -------------------------------------------------------------------------
   Enhance This Experience Section
   ------------------------------------------------------------------------- */

.enhance-section {
  padding: var(--space-16) 0;
  background-color: var(--color-accent-light);
}

.enhance-section-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.enhance-section-title {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.enhance-section-subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 600px;
  margin: 0 auto;
}

.enhance-subsection {
  margin-bottom: var(--space-12);
}

.enhance-subsection:last-child {
  margin-bottom: 0;
}

.enhance-subsection-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.enhance-subsection-title svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.enhance-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.enhance-grid-2 {
  grid-template-columns: repeat(2, 1fr);
  max-width: 700px;
}

/* -------------------------------------------------------------------------
   Nearby Discover Section
   ------------------------------------------------------------------------- */

.nearby-discover-section {
  padding: var(--space-16) 0;
  background-color: var(--color-bg);
}

.nearby-discover-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.nearby-discover-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.nearby-discover-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* -------------------------------------------------------------------------
   Callout Section (Soft Guidance)
   ------------------------------------------------------------------------- */

.callout-section {
  padding: var(--space-16) 0;
  background: linear-gradient(
    135deg,
    var(--color-primary) 0%,
    var(--color-primary-dark) 100%
  );
}

.callout-content {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.callout-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  margin: 0 auto var(--space-6);
  color: var(--color-text-inverse);
}

.callout-icon svg {
  width: 28px;
  height: 28px;
}

.callout-text {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-normal);
  color: var(--color-text-inverse);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-6);
}

.callout-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.callout-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.callout-link:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.callout-link svg {
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------------------------
   Discover Page - Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .enhance-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .enhance-grid-2 {
    grid-template-columns: 1fr 1fr;
    max-width: none;
  }

  .nearby-discover-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .discover-page .detail-layout {
    max-width: none;
  }

  .enhance-section {
    padding: var(--space-12) 0;
  }

  .enhance-section-title {
    font-size: var(--text-2xl);
  }

  .enhance-grid,
  .enhance-grid-2 {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .nearby-discover-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .nearby-discover-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .callout-text {
    font-size: var(--text-xl);
  }

  .callout-links {
    flex-direction: column;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .expect-item {
    flex-direction: column;
    gap: var(--space-3);
  }

  .expect-item-text {
    padding-top: 0;
  }

  .tip-item {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
    align-items: center;
  }
}

/* ==========================================================================
   Experience Stay Detail Page
   ========================================================================== */

/* -------------------------------------------------------------------------
   Stay Type Badge (Hero)
   ------------------------------------------------------------------------- */

.stay-type-badge-hero {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.stay-type-badge-hero svg {
  width: 14px;
  height: 14px;
}

/* -------------------------------------------------------------------------
   Meal Plan Selector
   ------------------------------------------------------------------------- */

.meal-plan-selector {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.meal-plan-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.meal-plan-option:hover {
  border-color: var(--color-text-light);
}

.meal-plan-option.is-selected {
  border-color: var(--color-primary);
  background-color: rgba(45, 90, 71, 0.05);
}

.meal-plan-option input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-accent);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-card);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.meal-plan-option input[type="radio"]:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 3px var(--color-bg-card);
}

.meal-plan-label {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-3);
}

.meal-plan-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.meal-plan-price {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.meal-plan-price.included {
  color: var(--color-success);
  font-weight: var(--font-medium);
}

/* -------------------------------------------------------------------------
   Guests Selector (Expandable Dropdown)
   ------------------------------------------------------------------------- */

.guests-selector {
  position: relative;
}

.guests-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.guests-display:hover {
  border-color: var(--color-text-light);
}

.guests-display[aria-expanded="true"] {
  border-color: var(--color-primary);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.guests-display-text {
  flex: 1;
  text-align: left;
}

.guests-display-icon {
  width: 16px;
  height: 16px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.guests-display[aria-expanded="true"] .guests-display-icon {
  transform: rotate(180deg);
}

.guests-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-primary);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  padding: var(--space-3);
  z-index: var(--z-dropdown);
  box-shadow: var(--shadow-md);
}

.guests-dropdown[aria-hidden="false"] {
  display: block;
}

.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) 0;
}

.guest-row:not(:last-child) {
  border-bottom: 1px solid var(--color-accent);
}

.guest-row-label {
  display: flex;
  flex-direction: column;
}

.guest-type {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.guest-row-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.guest-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.guest-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.guest-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.guest-btn svg {
  width: 14px;
  height: 14px;
}

.guest-count {
  min-width: 24px;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

/* -------------------------------------------------------------------------
   Agoda-Style Date Picker
   ------------------------------------------------------------------------- */

.date-picker-agoda {
  position: relative;
}

.date-picker-trigger {
  display: flex;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.date-picker-trigger:hover {
  border-color: var(--color-text-light);
}

.date-picker-trigger[aria-expanded="true"] {
  border-color: var(--color-primary);
}

.date-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
}

.date-display-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex: 1;
}

.date-display-item svg {
  width: 18px;
  height: 18px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.date-display-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.date-display-date {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.date-display-day {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.date-display-arrow {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  flex-shrink: 0;
}

/* Calendar Popup */
.calendar-popup {
  display: none;
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-bg-card);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  padding: var(--space-4);
  z-index: var(--z-dropdown);
  min-width: 580px;
}

.calendar-popup[aria-hidden="false"] {
  display: block;
}

.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-accent);
  margin-bottom: var(--space-4);
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.calendar-nav:hover {
  background: var(--color-accent-light);
  border-color: var(--color-primary);
}

.calendar-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-nav svg {
  width: 18px;
  height: 18px;
}

.calendar-months-header {
  display: flex;
  gap: var(--space-12);
}

.calendar-month-title {
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  min-width: 140px;
  text-align: center;
}

/* Dual Calendar Grid */
.calendar-grid-container {
  display: flex;
  gap: var(--space-6);
}

.calendar-grid {
  flex: 1;
}

.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: var(--space-2);
}

.calendar-weekday {
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-2) 0;
}

.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  font-size: var(--text-sm);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  position: relative;
}

.calendar-day:hover:not(:disabled):not(.is-selected):not(.is-start):not(.is-end) {
  background: var(--color-accent-light);
}

.calendar-day:disabled {
  color: var(--color-text-muted);
  opacity: 0.4;
  cursor: not-allowed;
}

.calendar-day.is-today {
  font-weight: var(--font-semibold);
  border: 1.5px solid var(--color-primary);
}

.calendar-day.is-start,
.calendar-day.is-end {
  background: var(--color-primary);
  color: white;
  font-weight: var(--font-medium);
}

.calendar-day.is-in-range {
  background: rgba(45, 90, 71, 0.1);
  border-radius: 0;
}

.calendar-day.is-start {
  border-radius: var(--radius-full) 0 0 var(--radius-full);
}

.calendar-day.is-end {
  border-radius: 0 var(--radius-full) var(--radius-full) 0;
}

.calendar-day.is-start.is-end {
  border-radius: var(--radius-full);
}

.calendar-day.is-empty {
  visibility: hidden;
}

/* Mobile Calendar */
@media (max-width: 768px) {
  .calendar-popup {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    min-width: auto;
    width: 100%;
    max-height: 80vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    overflow-y: auto;
  }

  .calendar-grid-container {
    flex-direction: column;
  }

  .calendar-months-header {
    flex-direction: column;
    gap: var(--space-2);
  }

  .calendar-month-title {
    min-width: auto;
  }

  .calendar-day {
    width: 100%;
    aspect-ratio: 1;
  }
}

/* -------------------------------------------------------------------------
   Date Range Field (Legacy - keeping for compatibility)
   ------------------------------------------------------------------------- */

.date-range-field {
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast);
}

.date-range-field:focus-within {
  border-color: var(--color-primary);
}

.date-range-inputs {
  display: flex;
  align-items: center;
}

.date-input {
  flex: 1;
  padding: var(--space-3) var(--space-3);
  border: none;
  background: transparent;
  font-size: var(--text-sm);
  font-family: inherit;
  color: var(--color-text);
  cursor: pointer;
}

.date-input:focus {
  outline: none;
}

.date-range-separator {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: 0 var(--space-1);
}

/* -------------------------------------------------------------------------
   Nights Display (Read-only)
   ------------------------------------------------------------------------- */

.nights-display {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.nights-display svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.nights-display #nights-text {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.nights-display .min-stay-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-left: auto;
}

/* -------------------------------------------------------------------------
   Price Breakdown
   ------------------------------------------------------------------------- */

.price-breakdown {
  background-color: var(--color-accent-light);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}

.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) 0;
  font-size: var(--text-sm);
}

.price-row:not(:last-child) {
  border-bottom: 1px dashed var(--color-accent);
}

.price-row-label {
  color: var(--color-text-muted);
}

.price-row-value {
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.price-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-3);
  margin-top: var(--space-2);
  border-top: 1.5px solid var(--color-accent);
}

.price-total-label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.price-total-amount {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* -------------------------------------------------------------------------
   Nights Counter (Reuses guest-counter pattern)
   ------------------------------------------------------------------------- */

.nights-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-lg);
}

.nights-counter-value {
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.nights-counter-controls {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.nights-counter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-card);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  color: var(--color-text);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.nights-counter-btn:hover:not(:disabled) {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.nights-counter-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.nights-counter-btn svg {
  width: 16px;
  height: 16px;
}

.nights-counter-num {
  min-width: 24px;
  text-align: center;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
}

/* -------------------------------------------------------------------------
   Booking Total Price
   ------------------------------------------------------------------------- */

.booking-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.booking-total-label {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
}

.booking-total-amount {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

/* Minimum stay note */
.booking-min-stay {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.booking-min-stay svg {
  width: 14px;
  height: 14px;
  color: var(--color-accent-warm);
  flex-shrink: 0;
}

/* -------------------------------------------------------------------------
   Policy Accordions
   ------------------------------------------------------------------------- */

.policy-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.policy-item {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.policy-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4);
  cursor: pointer;
  transition: background-color var(--transition-fast);
}

.policy-header:hover {
  background-color: var(--color-accent-light);
}

.policy-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent-light);
  border-radius: var(--radius-md);
  color: var(--color-primary);
}

.policy-icon svg {
  width: 18px;
  height: 18px;
}

.policy-content {
  flex: 1;
}

.policy-title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.policy-summary {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.policy-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: var(--color-text-muted);
  transition: transform var(--transition-fast);
}

.policy-toggle svg {
  width: 16px;
  height: 16px;
}

.policy-item.is-open .policy-toggle {
  transform: rotate(180deg);
}

.policy-details {
  display: none;
  padding: 0 var(--space-4) var(--space-4);
  padding-left: calc(var(--space-4) + 36px + var(--space-3));
}

.policy-item.is-open .policy-details {
  display: block;
}

.policy-details-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.policy-details-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.policy-details-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-2);
}

.policy-details-list li:last-child {
  margin-bottom: 0;
}

.policy-details-list li svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  margin-top: 3px;
  color: var(--color-primary);
}

/* -------------------------------------------------------------------------
   The Stay Experience Section (Primary)
   ------------------------------------------------------------------------- */

.stay-experience-section {
  padding: var(--space-10) 0;
  background-color: var(--color-accent-light);
}

.stay-experience-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-align: center;
  margin-bottom: var(--space-4);
}

.stay-experience-intro {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  text-align: center;
  max-width: 800px;
  margin: 0 auto var(--space-8);
}

.stay-experience-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
}

.stay-experience-primary,
.stay-experience-secondary {
  background-color: var(--color-bg-card);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  border: 1px solid var(--color-accent);
}

.stay-experience-subtitle {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.experience-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.experience-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.experience-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-accent-warm);
  margin-top: 2px;
}

.highlights-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

.highlight-item svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--color-success);
  margin-top: 2px;
}

/* -------------------------------------------------------------------------
   Gallery Category Tabs
   ------------------------------------------------------------------------- */

.gallery-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.gallery-tab {
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text-muted);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.gallery-tab:hover {
  border-color: var(--color-text-light);
  color: var(--color-text);
}

.gallery-tab.is-active {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* -------------------------------------------------------------------------
   Tabbed Gallery Grid
   ------------------------------------------------------------------------- */

.gallery-grid-tabbed {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.gallery-grid-tabbed .gallery-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background-color: var(--color-accent);
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  transition: opacity var(--transition-fast);
}

.gallery-grid-tabbed .gallery-item[data-hidden="true"] {
  display: none;
}

.gallery-grid-tabbed .gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.gallery-grid-tabbed .gallery-item:hover img {
  transform: scale(1.05);
}

/* Video play button in tabbed gallery */
.gallery-grid-tabbed .gallery-item-video::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  z-index: 1;
  transition: background var(--transition-fast);
}

.gallery-grid-tabbed .gallery-item-video:hover::before {
  background: rgba(0, 0, 0, 0.4);
}

.gallery-grid-tabbed .gallery-item-video::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: var(--radius-full);
  z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232D5A47'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  transition: transform var(--transition-base);
}

.gallery-grid-tabbed .gallery-item-video:hover::after {
  transform: translate(-50%, -50%) scale(1.1);
}

/* -------------------------------------------------------------------------
   The Stay Experience - Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .stay-experience-section {
    padding: var(--space-8) 0;
  }

  .stay-experience-title {
    font-size: var(--text-xl);
  }

  .stay-experience-intro {
    font-size: var(--text-base);
    margin-bottom: var(--space-6);
  }

  .stay-experience-content {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .stay-experience-primary,
  .stay-experience-secondary {
    padding: var(--space-4);
  }

  .gallery-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: var(--space-2);
    -webkit-overflow-scrolling: touch;
  }

  .gallery-tab {
    flex-shrink: 0;
  }

  .gallery-grid-tabbed {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .gallery-grid-tabbed {
    grid-template-columns: 1fr;
  }
}

/* -------------------------------------------------------------------------
   Experience Stay - Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 768px) {
  .meal-plan-selector {
    gap: var(--space-2);
  }

  .meal-plan-option {
    padding: var(--space-2) var(--space-3);
  }

  .policy-details {
    padding-left: var(--space-4);
  }
}

/* ==========================================================================
   Stay Detail Page - Compressed Layout (Option A)
   Reduces hero height and vertical spacing to surface booking UI earlier
   ========================================================================== */

.stay-detail-page .detail-hero {
  min-height: 45vh;
}

.stay-detail-page .detail-hero-content {
  padding: var(--space-10) 0 var(--space-8);
}

.stay-detail-page .media-gallery {
  padding: var(--space-4) 0 var(--space-6);
}

.stay-detail-page .detail-content {
  padding: var(--space-8) 0 var(--space-16);
}

/* Stay Detail - Mobile Compressed */
@media (max-width: 768px) {
  .stay-detail-page .detail-hero {
    min-height: 35vh;
  }

  .stay-detail-page .detail-hero-content {
    padding: var(--space-8) 0 var(--space-6);
  }

  .stay-detail-page .media-gallery {
    padding: var(--space-3) 0 var(--space-4);
  }

  .stay-detail-page .detail-content {
    padding: var(--space-6) 0 calc(var(--space-16) + 80px);
  }
}

/* ==========================================================================
   DESTINATION DETAIL PAGE
   ========================================================================== */

/* Hero - Medium Height */
.destination-page .detail-hero {
  min-height: 50vh;
}

/* Destination page experiences grid - 3 columns */
.destination-page .experiences-grid {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
  .destination-page .experiences-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .destination-page .experiences-grid {
    grid-template-columns: 1fr;
  }
}

.destination-page .detail-hero-content {
  padding: var(--space-12) 0 var(--space-10);
}

/* Country Badge */
.destination-country-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: var(--radius-full);
  color: var(--color-text-inverse);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  margin-bottom: var(--space-4);
}

.destination-country-badge svg {
  width: 16px;
  height: 16px;
}

/* Hero Description */
.detail-hero-description {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
  line-height: var(--leading-relaxed);
  max-width: 600px;
  margin-top: var(--space-4);
}

/* -------------------------------------------------------------------------
   Destination Overview Section
   ------------------------------------------------------------------------- */

.destination-overview {
  padding: var(--space-12) 0;
  background: var(--color-bg);
}

.destination-overview-content {
  max-width: 800px;
  margin: 0 auto;
}

.destination-overview-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-6);
}

.destination-overview-text {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-4);
}

.destination-overview-text:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Photo Highlights Section
   ------------------------------------------------------------------------- */

.photo-highlights-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-alt);
}

.photo-highlights-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.photo-highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}

.photo-highlight-item {
  aspect-ratio: 4/3;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.photo-highlight-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.photo-highlight-item:hover img {
  transform: scale(1.05);
}

/* -------------------------------------------------------------------------
   Travel Info Section
   ------------------------------------------------------------------------- */

.travel-info-section {
  padding: var(--space-16) 0;
  background: var(--color-bg);
}

.travel-info-header {
  text-align: center;
  margin-bottom: var(--space-10);
}

.travel-info-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.travel-info-card {
  background: var(--color-bg-card);
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm);
}

.travel-info-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-light);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-4);
}

.travel-info-icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.travel-info-title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

.travel-info-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.travel-info-list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  padding-left: var(--space-4);
  position: relative;
  margin-bottom: var(--space-2);
}

.travel-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
}

.travel-info-list li:last-child {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------
   Nearby Destinations Section
   ------------------------------------------------------------------------- */

.nearby-destinations-section {
  padding: var(--space-16) 0;
  background: var(--color-bg-alt);
}

.nearby-destinations-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-10);
}

.nearby-destinations-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

/* Nearby card - same as listing but with distance */
.nearby-card .destination-card-content {
  background: var(--color-bg-card);
}

.destination-distance {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

/* Section CTA Mobile */
.section-cta-mobile {
  display: none;
  margin-top: var(--space-8);
  text-align: center;
}

/* -------------------------------------------------------------------------
   Destination Page - Responsive
   ------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .travel-info-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .nearby-destinations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .destination-page .detail-hero {
    min-height: 45vh;
  }

  .destination-page .detail-hero-content {
    padding: var(--space-10) 0 var(--space-8);
  }

  .detail-hero-description {
    font-size: var(--text-base);
  }

  .destination-overview {
    padding: var(--space-10) 0;
  }

  .destination-overview-title {
    font-size: var(--text-xl);
  }

  .photo-highlights-section {
    padding: var(--space-12) 0;
  }

  .photo-highlights-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
  }

  .travel-info-section {
    padding: var(--space-12) 0;
  }

  .travel-info-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .nearby-destinations-section {
    padding: var(--space-12) 0;
  }

  .nearby-destinations-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
  }

  .nearby-destinations-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .section-cta-mobile {
    display: block;
  }

  .hidden-mobile {
    display: none;
  }
}