/* Booking page styles – scoped, minimal, built on base.css */
:root {
  --neon-purple: #7c3aed;
  --neon-blue: #00b7ff;
  --charcoal: #0f1116;
  --magenta: #ff0f7b;
  --cyan: #00e5ff;
  --card-bg: rgba(255,255,255,0.06);
  --card-border: rgba(255,255,255,0.12);
}

.container {max-width: 1200px; margin: 0 auto; padding: 0 1rem;}
.section {padding: 4rem 0;}
.section--alt {background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.04));}
.section-intro {max-width: 60ch; color: #dbe4ff;}

/* Hero */
.booking-hero {position: relative; isolation: isolate; min-height: 56vh; display: grid; align-items: center; justify-content: center; overflow: clip;}
.booking-hero__image {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; filter: brightness(0.6) contrast(1.05);} 
.booking-hero::after {content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(1200px 400px at 20% 0%, rgba(124,58,237,0.55), transparent), linear-gradient(180deg, rgba(0,0,0,0.4), rgba(0,0,0,0.6));}
.booking-hero__inner {padding: 5rem 1rem; text-align: left;}
.booking-hero__title {font-size: clamp(2rem, 4vw, 3rem); color: #fff; margin: 0 0 0.5rem;}
.booking-hero__subtitle {font-size: 1.125rem; color: #e3e8ff; margin: 0 0 1.25rem; max-width: 60ch;}
.booking-hero__actions {display: flex; gap: 0.75rem; flex-wrap: wrap;}

/* Buttons */
.booking-btn {display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.1rem; border-radius: .6rem; text-decoration: none; border: 1px solid transparent; font-weight: 600; transition: transform .12s ease, background .2s ease, border-color .2s ease;}
.booking-btn:active {transform: translateY(1px);} 
.booking-btn--primary {background: linear-gradient(90deg, var(--magenta), var(--neon-purple)); color: #fff;}
.booking-btn--secondary {background: linear-gradient(90deg, var(--neon-blue), var(--cyan)); color: #0b1020;}
.booking-btn--ghost {background: transparent; color: #fff; border-color: rgba(255,255,255,0.35);} 
.booking-btn--link {background: transparent; color: var(--cyan); padding: 0; border: 0;}
.booking-btn--link:hover {text-decoration: underline;}

/* Booking form */
.booking-form-section {padding: 3rem 0 2rem; background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(0,0,0,0));}
.booking-form {margin-top: 1rem; display: grid; gap: 1rem;}
.booking-form fieldset {border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 1rem; padding: 1rem;}
.booking-form legend {padding: 0 .25rem; color: #e9edff; font-weight: 700;}
.booking-form__row {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;}
.booking-form__field {display: grid; gap: .35rem;}
.booking-form__field--wide {grid-column: 1 / -1;}
.booking-form__field label {color: #f8f9ff; font-weight: 600;}
.booking-form__field input, .booking-form__field select, .booking-form__field textarea {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: .6rem; padding: .7rem .8rem;}
.booking-form__field input:focus, .booking-form__field select:focus, .booking-form__field textarea:focus {outline: 2px solid var(--neon-blue); outline-offset: 2px;}
.field-help {color: #b9c2ff; font-size: .85rem;}

.booking-form__summary {display: grid; gap: 1rem; align-items: start; grid-template-columns: 1.2fr .8fr;}
.estimate {background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1rem; padding: 1rem;}
.estimate__nights {margin: 0 0 .25rem; color: #d6ddff;}
.estimate__total {font-size: 1.35rem; font-weight: 800; color: #fff; margin: .25rem 0 .5rem;}
.estimate__note {color: #a5b0ff; font-size: .9rem;}
.booking-form__actions {display: flex; gap: .75rem; justify-content: flex-end; align-items: center;}
.form-feedback {min-height: 1.5rem; color: #e9edff; font-weight: 600;}

/* Content cards and grids */
.cards-grid {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;}
.card {background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1rem; padding: 1rem; color: #dfe6ff;}
.card h3 {margin-top: 0; color: #fff;}
.check-list {padding-left: 1.2rem;}
.check-list li + li {margin-top: .35rem;}

.steps {counter-reset: step; display: grid; gap: .75rem;}
.steps > li {list-style: none; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1rem; padding: .9rem 1rem;}
.steps > li h3 {display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem;}
.steps > li h3::before {counter-increment: step; content: counter(step); display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 999px; background: linear-gradient(90deg, var(--neon-blue), var(--magenta)); color: #0b1020; font-weight: 800;}

.split {display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: start;}
.split--reverse {grid-template-columns: .9fr 1.1fr;}
.image-wrap {border-radius: 1rem; overflow: hidden; border: 1px solid var(--card-border);} 
.image-wrap img {display: block; width: 100%; height: auto;}

.amenities-grid {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;}
.policy-grid {display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1rem;}

.testimonials {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;}
.testimonial {margin: 0; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 1rem; padding: 1rem; color: #e9edff;}

.contact-cards {display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem;}

/* Request form */
.request-form {display: grid; gap: 1rem; max-width: 840px;}
.request-form__row {display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;}
.request-form__field {display: grid; gap: .35rem;}
.request-form__field input, .request-form__field textarea {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); color: #fff; border-radius: .6rem; padding: .7rem .8rem;}
.request-form__field input:focus, .request-form__field textarea:focus {outline: 2px solid var(--neon-purple); outline-offset: 2px;}

/* Responsive */
@media (max-width: 1024px) {
  .cards-grid {grid-template-columns: repeat(2, minmax(0,1fr));}
  .amenities-grid {grid-template-columns: repeat(2, minmax(0,1fr));}
  .policy-grid {grid-template-columns: repeat(2, minmax(0,1fr));}
  .testimonials {grid-template-columns: repeat(2, minmax(0,1fr));}
  .contact-cards {grid-template-columns: repeat(2, minmax(0,1fr));}
  .split, .split--reverse {grid-template-columns: 1fr;}
  .booking-form__summary {grid-template-columns: 1fr;}
}

@media (max-width: 640px) {
  .booking-form__row {grid-template-columns: 1fr;}
  .cards-grid, .amenities-grid, .policy-grid, .testimonials, .contact-cards {grid-template-columns: 1fr;}
  .booking-hero__inner {padding: 4rem 1rem 3rem;}
  .request-form__row {grid-template-columns: 1fr;}
}