/* ==================================
   BOOKING PAGE – ISOLATED STYLES
   ================================== */

.booking-page{
  max-width: 980px;
  margin: 0 auto;
  padding-top: 96px;
}

/* Keep nav/header vibe (Yomogi from styles.css still applies there) */
.booking-page .site-header{
  backdrop-filter: blur(14px);
}

/* ==================================
   BOOKING PANEL – LIGHT / EDITORIAL
   ================================== */

.booking-panel{
  background: linear-gradient(180deg, #fff1f7 0%, #ffe6f0 100%);
  color: #1a1a1a;
  border-radius: 28px;
  padding: clamp(2rem, 4vw, 3.5rem);
  margin: 2.5rem auto 4rem;
  box-shadow:
    0 40px 90px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,130,198,0.25);
}

/* Booking content uses a professional font — nav stays on main site font */
.booking-panel,
.booking-panel *{
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.booking-panel h1,
.booking-panel h2,
.booking-panel h3{
  color: #12080d;
  letter-spacing: 0.02em;
}

.booking-panel p,
.booking-panel li,
.booking-panel label{
  color: #2a1a22;
}

.booking-panel .muted{
  color: #6a3f52;
}

/* Cards adapt to light background */
.booking-panel .card{
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,130,198,0.35);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* Inputs on light background */
.booking-panel input,
.booking-panel select,
.booking-panel textarea{
  background: #fff;
  color: #1a1a1a;
  border: 1px solid rgba(0,0,0,0.2);
}

.booking-panel input::placeholder,
.booking-panel textarea::placeholder{
  color: #8a5a70;
}

.booking-panel input:focus,
.booking-panel select:focus,
.booking-panel textarea:focus{
  border-color: #ff82c6;
  box-shadow: 0 0 0 3px rgba(255,130,198,0.25);
}

/* ==================================
   HERO
   ================================== */

.booking-page .hero--booking{
  padding: 32px 16px 16px;
}

.booking-page .hero--booking .hero-inner{
  grid-template-columns: 1fr;
  gap: 14px;
}

.booking-page .hero--booking h1{
  font-size: clamp(2.2rem, 4vw, 3rem);
}

.booking-page .hero-sub{
  max-width: 560px;
  font-size: 1.05rem;
}

.booking-page .hero-ctas{
  margin-top: 16px;
}

/* Prevent global .btn margin-top from styles.css affecting booking */
.booking-page .btn{
  margin-top: 0;
}

/* Make sure booking hero buttons never inherit browser blue/purple */
.booking-page .hero-ctas a.btn{
  color: inherit;
  text-decoration: none;
}

.booking-page a.btn.btn-primary{ color: #260917; }
.booking-page a.btn.btn-ghost{ color: #b3477e; border-color: #ff82c6; }

/* ==================================
   QUICK FACTS
   ================================== */

.booking-page .quick-facts{
  margin-top: 28px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.booking-page .quick-facts .card{
  padding: 14px;
  text-align: center;
}

.booking-page .quick-facts h3{
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* ==================================
   SECTIONS
   ================================== */

.booking-page .section{
  padding: 44px 16px;
}

.booking-page .section h2{
  margin-bottom: 10px;
}

/* ==================================
   SERVICES GRID
   ================================== */

.booking-page .grid-cards{
  grid-template-columns: repeat(2, 1fr);
  margin-top: 16px;
}

.booking-page .grid-cards .card{
  padding: 18px;
}

.booking-page .grid-cards .card p{
  margin-top: 8px;
  line-height: 1.55;
}

/* ==================================
   MODEL DETAILS (HEADSHOT + STATS)
   ================================== */

.booking-details .model-details-grid{
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 24px;
  align-items: start;
}

.model-headshot img{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.15);
  object-fit: cover;
  display: block;
}

.model-stats ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.model-stats li{
  margin-bottom: 6px;
  font-size: 0.95rem;
}

/* Box around the whole Model Details section (strong contrast) */
.booking-page .booking-panel .booking-box{
  background: rgba(255,255,255,0.92);
  border: 1px solid rgba(255,130,198,0.45);
  border-radius: 26px;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.16),
    0 0 0 1px rgba(255,255,255,0.6) inset;
}

.booking-page .booking-panel .booking-box h2{
  margin-top: 0;
}

/* ==================================
   FORM (clean, consistent controls)
   ================================== */

.booking-page .form--booking{
  margin-top: 18px;
  padding: 20px;
}

.booking-page .form--booking .form-row{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.booking-page .form--booking label{
  display: grid;          /* stacks label text over the control */
  gap: 8px;
  margin-top: 12px;
  font-size: 0.9rem;
}

.booking-page .form--booking input,
.booking-page .form--booking select,
.booking-page .form--booking textarea{
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.2);
  background: #fff;
  color: #1a1a1a;
  outline: none;
  font: inherit;          /* makes textarea match other fields */
  line-height: 1.4;
}

.booking-page .form--booking textarea{
  min-height: 160px;      /* gives it a nice, deliberate size */
  resize: vertical;       /* keeps it classy; no weird horizontal resize */
}

.booking-page .form--booking input:focus,
.booking-page .form--booking select:focus,
.booking-page .form--booking textarea:focus{
  border-color: #ff82c6;
  box-shadow: 0 0 0 3px rgba(255,130,198,0.25);
}

.booking-page .form--booking .btn{
  width: 100%;
  margin-top: 14px;
}

@media (max-width: 700px){
  .booking-page .form--booking .form-row{
    grid-template-columns: 1fr;
  }
}


/* ==================================
   FAQ / ACCORDION
   ================================== */

.booking-page .accordion summary{
  cursor: pointer;
  font-weight: 600;
}

.booking-panel details[open] summary{
  color: #b3477e;
}

.booking-page .accordion details.card p{
  margin: 10px 0 0;
  color: #6a3f52;
}

/* ==================================
   FOOTER
   ================================== */

.booking-page .site-footer{
  margin-top: 64px;
}

/* ==================================
   RESPONSIVE
   ================================== */

@media (max-width: 900px){
  .booking-page .quick-facts{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 700px){
  .booking-panel{
    border-radius: 18px;
    padding: 1.5rem;
  }

  .booking-page .grid-cards{
    grid-template-columns: 1fr;
  }

  .booking-details .model-details-grid{
    grid-template-columns: 1fr;
  }

  .model-headshot{
    max-width: 240px;
  }
}