/* ============================================
   Booking Page Styles – Krachtig Succes Hotel & Casino
   ============================================ */

.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(26,42,74,0.7), rgba(10,15,26,0.7));
}
.hero .container {
  position: relative;
  z-index: 2;
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}
.hero-content { max-width: 780px; }
.hero-highlights { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-4); }
.hero-highlights li {
  padding: var(--space-2) var(--space-4);
  border: 1px solid rgba(201,169,97,0.3);
  border-radius: var(--radius-full);
  color: var(--color-text-muted);
}
.hero-media { position: absolute; inset: 0; z-index: 1; opacity: 0.35; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; filter: saturate(0.9) contrast(1.05); }

/* Layout */
.section { position: relative; }
.booking-grid { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); }

@media (max-width: 1024px) {
  .booking-grid { grid-template-columns: 1fr; }
}

/* Lists */
.list-check, .list-benefits { display: grid; gap: var(--space-2); }
.list-check li, .list-benefits li { position: relative; padding-left: 1.25rem; color: var(--color-text-muted); }
.list-check li::before, .list-benefits li::before {
  content: '\2713';
  position: absolute; left: 0; top: 0.1rem;
  color: var(--color-secondary);
}

/* Media figure */
.media-figure { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); }
.media-figure img { display: block; width: 100%; height: auto; }

/* Offer grid */
.offer-grid .card { height: 100%; }

/* FAQ */
.faq details { background: var(--color-background-elevated); border: 1px solid rgba(201,169,97,0.15); border-radius: var(--radius-xl); padding: var(--space-4) var(--space-6); margin-bottom: var(--space-4); box-shadow: var(--shadow-sm); }
.faq summary { cursor: pointer; font-weight: var(--font-weight-semibold); color: var(--color-secondary); }
.faq details[open] { box-shadow: var(--shadow-md); border-color: rgba(201,169,97,0.35); }
.faq p { margin-top: var(--space-3); color: var(--color-text-muted); }

/* Contact list */
.contact-list { display: grid; gap: var(--space-2); }

/* Utility tweaks */
.order-2-mobile { }
@media (max-width: 640px) {
  .order-2-mobile { order: 2; }
}

/* Accessibility helpers */
.inline-flex { display: inline-flex; align-items: center; gap: var(--space-2); }

/* Buttons inside cards full width on narrow */
@media (max-width: 640px) {
  .btn.btn-block { width: 100%; }
  .flex.items-center.gap-4{
    flex-direction: column;
  }
}