/* Extracted minimal wrapper styles to match booking.html visuals. The bulk remains in styles.css and booking.js */
body { background:#e5e7eb; margin:0; padding:0; }
.booking-container { 
  position: relative;
  max-width:100%; 
  margin:0; 
  padding:0; 
  min-height:100vh;
  overflow-x: hidden;
}

/* Ensure proper spacing from header on booking page */
body.booking-page #main {
  padding-top: 70px !important;
}

body.booking-page #main > .booking-container {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

@media (max-width: 1024px) {
  body.booking-page #main {
    padding-top: 70px !important;
  }
}

/* Fixed background image layer - prevents shaking on scroll */
.booking-background-image {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 0;
  pointer-events: none;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}

@media (max-width: 768px) {
  .booking-background-image {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100vh;
  }
}

.booking-hero-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 100%);
  z-index: 1;
  pointer-events: none;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

@media (max-width: 768px) {
  .booking-hero-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    min-height: 100vh;
  }
}

.booking-content-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 8px 20px 60px;
}

.reservation-banner{
  position:relative;
  top:0;
  z-index:3;
  width:calc(100% - 32px);
  max-width:1200px;
  margin:27px auto 10px;
  padding:0 12px 10px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(255,253,241,.98) 0%, rgba(255,248,219,.98) 52%, rgba(245,228,175,.98) 100%);
  border:2px solid #cda24b;
  box-shadow:
    0 10px 24px rgba(0,0,0,.14),
    0 0 0 1px rgba(241,211,142,.65),
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(170,123,42,.32);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  display:flex;
  flex-direction:column;
  gap:8px;
  overflow:visible;
}
.reservation-banner__title{
  width:calc(100% + 24px);
  margin:0 -12px;
  padding:8px 12px 9px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  font-weight:800;
  color:#5c4a22;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.2;
  text-align:left;
  background:linear-gradient(135deg,#ebe0bb 0%,#e4d39c 48%,#d9c47e 100%);
  border:none;
  border-bottom:1px solid #c9a84c;
  border-radius:12px 12px 0 0;
  box-shadow:
    inset 0 1px 0 rgba(255,252,235,.6),
    inset 0 -1px 0 rgba(150,110,40,.15);
  align-self:stretch;
}
.reservation-banner__title-text{
  flex:1;
  min-width:0;
}
.reservation-banner__price-wrap{
  grid-area:price;
  justify-self:center;
  align-self:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-width:0;
  flex-shrink:0;
}
.reservation-banner__price-stack{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  width:100%;
}
.reservation-banner__perk{
  display:none;
  align-items:center;
  justify-content:center;
  gap:6px;
  flex-shrink:0;
  padding:2px 4px;
  border-radius:0;
  background:transparent;
  border:none;
  box-shadow:none;
  color:#3b2f0a;
  font-size:12px;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  line-height:1.15;
}
.reservation-banner__perk.is-visible{
  display:inline-flex;
}
@media (min-width:769px){
  .reservation-banner__perk--mobile{
    display:none !important;
  }
  .reservation-banner__perk--desktop.is-visible{
    display:inline-flex !important;
  }
}
@media (max-width:768px){
  .reservation-banner__perk--desktop{
    display:none !important;
  }
  .reservation-banner__perk--mobile.is-visible{
    display:inline-flex !important;
  }
}
.reservation-banner__perk-icon{
  width:32px;
  height:32px;
  flex-shrink:0;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.14));
}
.reservation-banner__perk-label{
  display:inline-flex;
  align-items:baseline;
  gap:4px;
  min-width:0;
  white-space:nowrap;
}
.reservation-banner__perk-amount{
  color:#2f2408;
  font-size:18px;
  font-weight:900;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
  line-height:1;
}
.reservation-banner__content{
  width:100%;
  min-width:0;
  padding:2px 0 0;
  container-type:inline-size;
  container-name:reservation-banner;
}
.reservation-banner__row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-areas:"lead price meta";
  align-items:center;
  column-gap:10px;
  row-gap:8px;
  width:100%;
  min-width:0;
}
.reservation-banner__lead{
  grid-area:lead;
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  justify-self:start;
}
.reservation-banner__service-line{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
  overflow:hidden;
}
.reservation-banner__thumb{
  width:55px;
  height:55px;
  border-radius:10px;
  object-fit:cover;
  border:1px solid #e5e7eb;
  flex-shrink:0;
  align-self:center;
}
.reservation-banner__service-name{
  flex:0 1 auto;
  min-width:0;
  font-size:14px;
  font-weight:700;
  color:#111827;
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.reservation-banner__duration{
  flex-shrink:0;
  font-size:14px;
  font-weight:700;
  color:#1e4a3d;
  background:#f6e7b8;
  border:1px solid #dcc27a;
  border-radius:999px;
  padding:6px 12px;
  line-height:1.1;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.reservation-banner__meta{
  font-size:15px;
  font-weight:700;
  color:#ffffff;
  text-align:center;
  white-space:nowrap;
  background:#b45309;
  border:1px solid #92400e;
  border-radius:999px;
  padding:6px 12px;
  line-height:1.1;
  min-height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
  max-width:100%;
  grid-area:meta;
  justify-self:end;
}
.reservation-banner__meta.is-selected{
  background:#9a3412;
  color:#ffffff;
}
@container reservation-banner (max-width:820px){
  .reservation-banner__row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "lead price"
      "meta meta";
    column-gap:8px;
    row-gap:8px;
  }
  .reservation-banner__lead{
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  .reservation-banner__service-line{
    flex-wrap:nowrap;
    min-width:0;
    overflow:hidden;
  }
  .reservation-banner__service-name{
    flex:1 1 auto;
    min-width:0;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .reservation-banner__price-wrap{
    grid-area:price;
    justify-self:end;
    align-self:center;
    flex-shrink:0;
    min-width:0;
  }
  .reservation-banner__price-stack{
    align-items:center;
  }
  .reservation-banner__price-group{
    flex-wrap:nowrap;
  }
  .reservation-banner__meta{
    justify-self:center;
  }
}
.reservation-banner__price-group{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:nowrap;
}
.reservation-banner__price-original{
  position:relative;
  font-size:19px;
  font-weight:800;
  color:#fecaca;
  background:#7f1d1d;
  border:1px solid #991b1b;
  border-radius:999px;
  padding:7px 14px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(0,0,0,.2);
  overflow:visible;
}
.reservation-banner__price-original::after{
  content:'';
  position:absolute;
  left:50%;
  top:50%;
  width:calc(100% + 18px);
  height:3px;
  background:#ef4444;
  transform:translate(-50%,-50%) rotate(-14deg);
  transform-origin:center;
  border-radius:1px;
  pointer-events:none;
  z-index:1;
  box-shadow:0 0 2px rgba(248,113,113,.8);
}
.reservation-banner__price{
  font-size:19px;
  font-weight:800;
  color:#f4e4bc;
  background:#1a4a3e;
  border:1px solid #b8945a;
  border-radius:999px;
  padding:7px 14px;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  line-height:1.1;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.booking-header-glass {
  text-align: center;
  padding: clamp(12px, 2vw, 20px) clamp(20px, 4vw, 32px);
  background: rgba(15, 23, 42, 0.4);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-radius: 16px;
  border: 2px solid #d4af37;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.4),
    0 0 20px rgba(212, 175, 55, 0.3),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  max-width: min(85vw, 500px);
  margin: 0 auto 32px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

@media (max-width: 768px) {
  .booking-header-glass {
    padding: 14px 20px;
    border-radius: 14px;
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    margin-bottom: 24px;
    max-width: min(90vw, 450px);
  }
}

.booking-header-glass h1 { 
  font-size: clamp(18px, 3.5vw, 26px); 
  font-weight: 700; 
  color: #f4d03f; 
  margin: 0; 
  font-family: 'Source Serif Pro', 'Times New Roman', Times, serif; 
  letter-spacing: 0.3px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(244, 208, 63, 0.3);
}

.booking-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 32px 0 0;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

@media (min-width: 768px) {
  .booking-grid {
    flex-direction: row;
    align-items: flex-start;
    padding: 0 32px 0 0;
  }
  .calendar-container {
    flex: 0 0 55%;
  }
  .booking-form {
    flex: 0 0 45%;
    min-width: 0;
  }
}
.calendar-container{ 
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius:16px; 
  padding:0; 
  box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.2), 0 4px 6px -1px rgba(0,0,0,.1), 0 0 20px rgba(212, 175, 55, 0.2); 
  border:2px solid #d4af37;
  overflow:visible;
}
.monthly-calendar{ 
  margin-bottom:24px; 
  padding:24px;
}
.calendar-header{ 
  display:flex; 
  justify-content:space-between; 
  align-items:center; 
  margin-bottom:0; 
  background:#1e4a3d;
  padding:clamp(12px, 2vw, 16px) clamp(16px, 4vw, 24px);
  border-radius:16px 16px 0 0;
  border-bottom:2px solid #d4af37;
}
.current-month{ 
  font-size:clamp(18px, 3.5vw, 22px); 
  font-weight:700; 
  color:#fef5c7; 
  font-family:'Source Serif Pro', 'Times New Roman', Times, serif;
  letter-spacing:0.3px;
  text-shadow:0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(254, 245, 199, 0.5);
}
.calendar-nav{ display:flex; gap:8px; }
.calendar-nav button{ 
  background:rgba(255, 255, 255, 0.15); 
  color:#fef5c7; 
  border:1px solid rgba(212, 175, 55, 0.5); 
  border-radius:6px; 
  padding:6px 10px; 
  cursor:pointer; 
  font-weight:500; 
  transition:all .2s; 
  font-size:16px; 
  line-height:1; 
  display:flex; 
  align-items:center; 
  justify-content:center; 
  min-width:32px; 
  min-height:32px;
}
.calendar-nav button:hover{ 
  background:rgba(255, 255, 255, 0.25); 
  border-color:#d4af37; 
  transform:scale(1.05);
  box-shadow:0 0 10px rgba(212, 175, 55, 0.3);
}

/* Monthly Calendar Styles */
.monthly-calendar{ margin-bottom:24px; }
.calendar-header-row{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; margin-bottom:6px; }
.calendar-day-header{ text-align:center; padding:6px 3px; font-weight:600; font-size:11px; color:#6b7280; text-transform:uppercase; letter-spacing:0.5px; }
.calendar-day-header.weekend{ background:#f3f4f6; color:#9ca3af; border-radius:4px; }
.calendar-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:3px; }
.calendar-day-cell{ aspect-ratio:1; min-height:50px; border:2px solid #e5e7eb; border-radius:6px; padding:6px; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; background:#fff; transition:all .2s ease; position:relative; }
.calendar-day-cell.empty{ border:none; background:transparent; cursor:default; }
.calendar-day-cell.past{ opacity:.4; cursor:not-allowed; background:#f9fafb; }
.calendar-day-cell.weekend{ background:#f3f4f6; }
.calendar-day-cell.weekend.selected{ background:#f0fdf4!important; }
.calendar-day-cell.today{ border-color:#3b82f6; border-width:3px; box-shadow:0 0 0 2px rgba(59,130,246,.1); }
.calendar-day-cell.selected{ border-color:#255e50; border-width:3px; box-shadow:0 0 0 2px rgba(37,94,80,.2); background:#f0fdf4!important; }
.calendar-day-cell:not(.past):not(.empty):hover{ border-color:#3b82f6; transform:translateY(-2px); box-shadow:0 4px 8px rgba(0,0,0,.1); }
.day-number{ font-size:14px; font-weight:600; color:#1f2937; }
.booking-badge{ position:absolute; top:3px; right:3px; background:#dc2626; color:white; border-radius:50%; width:18px; height:18px; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700; box-shadow:0 2px 4px rgba(0,0,0,.2); }

/* Time Panel Styles */
.time-panel{ z-index:10; padding:24px; background:#fff; border-radius:12px; border:2px solid #255e50; box-shadow:0 10px 40px rgba(0,0,0,.15),0 4px 12px rgba(37,94,80,.2); min-width:320px; max-width:400px; max-height:85vh; overflow-y:auto; overflow-x:hidden; }
.time-panel-header{ font-size:18px; font-weight:600; color:#1f2937; margin-bottom:20px; padding-bottom:12px; border-bottom:2px solid #e5e7eb; }
.time-panel-header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.time-confirm-btn{
  border:0;
  border-radius:8px;
  background:#255e50;
  color:#fff;
  font-weight:700;
  font-size:12px;
  padding:7px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.time-confirm-btn:hover{
  background:#1e4a3d;
}
.time-rows{ display:flex; flex-direction:column; gap:8px; }
.time-row{ display:grid; grid-template-columns:65px 1fr 1fr 1fr; gap:6px; align-items:center; }
.hour-slot,.quarter-slot{ padding:8px 12px; border:2px solid #d1d5db; border-radius:6px; text-align:center; font-weight:600; cursor:pointer; transition:all .2s ease; background:#fff; color:#374151; }
.hour-slot{ font-size:14px; font-weight:700; color:#1f2937; padding:10px 14px; }
.quarter-slot{ font-size:12px; font-weight:500; padding:8px 10px; }
.hour-slot:hover:not(.booked):not(.disabled),.quarter-slot:hover:not(.booked):not(.disabled){ border-color:#3b82f6; background:#eff6ff; transform:translateY(-2px); box-shadow:0 4px 8px rgba(59,130,246,.2); }
.hour-slot.selected,.quarter-slot.selected{ background:#d1fae5!important; border-color:#34d399!important; color:#065f46!important; box-shadow:0 4px 12px rgba(16,185,129,.3); }
.hour-slot.selected.booked,.quarter-slot.selected.booked{ background:#d1fae5!important; border-color:#34d399!important; color:#065f46!important; box-shadow:0 4px 12px rgba(16,185,129,.3); }
.hour-slot.booked:not(.selected),.quarter-slot.booked:not(.selected){ background:#fee2e2!important; border-color:#fca5a5!important; color:#7f1d1d!important; cursor:not-allowed; opacity:.8; }
.hour-slot.disabled,.quarter-slot.disabled{ background:#f3f4f6!important; border-color:#d1d5db!important; color:#9ca3af!important; cursor:not-allowed; opacity:.5; }

@media (max-width:768px){
  .booking-content-wrapper {
    padding: 6px 16px 60px;
  }
  .reservation-banner{
    width:calc(100% - 20px);
    margin-top:25px;
    margin-bottom:10px;
    padding:0 10px 8px;
    border-radius:12px;
    gap:8px;
  }
  .reservation-banner__title{
    width:calc(100% + 20px);
    margin:0 -10px;
    padding:7px 10px 8px;
    font-size:11px;
    border-radius:10px 10px 0 0;
    gap:6px;
  }
  .reservation-banner__perk{
    gap:5px;
    padding:1px 2px;
  }
  .reservation-banner__perk-icon{
    width:28px;
    height:28px;
  }
  .reservation-banner__perk-amount{
    font-size:16px;
  }
  .reservation-banner__row{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "lead price"
      "meta meta";
    column-gap:6px;
    row-gap:8px;
  }
  .reservation-banner__lead{
    gap:8px;
    min-width:0;
    max-width:100%;
    overflow:hidden;
  }
  .reservation-banner__service-line{
    gap:6px;
    flex-wrap:nowrap;
    min-width:0;
    overflow:hidden;
  }
  .reservation-banner__service-name{
    font-size:13px;
    min-width:0;
    flex:1 1 auto;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    line-height:1.25;
  }
  .reservation-banner__duration{
    font-size:12px;
    min-height:28px;
    padding:5px 10px;
    flex-shrink:0;
  }
  .reservation-banner__price-wrap{
    justify-self:end;
    align-self:center;
    flex-shrink:0;
    min-width:0;
  }
  .reservation-banner__price-stack{
    align-items:center;
  }
  .reservation-banner__price-group{
    gap:6px;
    flex-wrap:nowrap;
    justify-content:flex-end;
  }
  .reservation-banner__meta{
    justify-self:center;
    font-size:12px;
    padding:5px 10px;
    min-height:28px;
  }
  .reservation-banner__thumb{
    width:48px;
    height:48px;
    border-radius:8px;
    align-self:flex-start;
  }
  .reservation-banner__price-original,
  .reservation-banner__price{
    font-size:15px;
    padding:6px 12px;
    min-height:30px;
  }
  .reservation-banner__price-original::after{
    width:calc(100% + 14px);
    height:2.5px;
  }
  .booking-grid{ 
    gap:12px; 
    padding: 0;
  }
  .calendar-day-cell{ min-height:40px; padding:4px; border-radius:4px; }
  .day-number{ font-size:12px; }
  .booking-badge{ width:16px; height:16px; font-size:9px; top:2px; right:2px; }
  .calendar-header-row{ gap:2px; margin-bottom:4px; }
  .calendar-day-header{ padding:6px 2px; font-size:11px; }
  .calendar-grid{ gap:2px; }
  .time-row{ grid-template-columns:55px 1fr 1fr 1fr; gap:4px; }
  .hour-slot,.quarter-slot{ padding:6px 8px; border-radius:4px; }
  .hour-slot{ font-size:12px; padding:8px 10px; }
  .quarter-slot{ font-size:11px; padding:6px 8px; }
  .time-panel{ padding:16px; min-width:280px; max-width:320px; max-height:75vh; overflow-y:auto; overflow-x:hidden; }
  .time-panel-header{ font-size:16px; margin-bottom:16px; padding-bottom:8px; }
  .booking-form{ padding:0; }
  .booking-form-banner{ padding:12px 16px; }
  .booking-form-banner h1{ font-size:clamp(16px, 3vw, 20px); }
  .current-month{ font-size:clamp(16px, 3vw, 20px); }
  .calendar-nav button{ 
    font-size:14px; 
    min-width:28px; 
    min-height:28px; 
    padding:5px 8px; 
  }
  .booking-form form{ gap:8px; padding:12px; }
  .selected-info{ padding:8px 10px; margin-bottom:8px; }
  .selected-info h4{ font-size:13px; margin-bottom:2px; }
  .selected-info p{ font-size:12px; }
  .form-group{ margin-bottom:8px; }
  .form-group label{ margin-bottom:3px; font-size:11px; }
  .form-group input, .form-group textarea, .form-group select{ padding:7px 9px; font-size:13px; }
  .required-note{ font-size:10px; margin:4px 0 8px 0; }
  .submit-btn{ padding:10px; font-size:14px; }
}
.day-header{ text-align:center; padding:12px 8px; border-radius:12px; font-weight:600; font-size:14px; background:#f8fafc; color:#1f2937; border:1px solid #e5e7eb; cursor:pointer; transition:all .2s; }
.day-header:hover{ background:#f1f5f9; border-color:#cbd5e1; }
.day-header.selected{ background:#3b82f6; color:#fff; border-color:#3b82f6; }
.day-header.weekend{ background:#f3f4f6; color:#9ca3af; }
.day-date{ font-size:16px; display:block; margin-top:4px; font-weight:700; }
.time-slot{ padding:10px 8px; border:1px solid #d1d5db; border-radius:6px; cursor:pointer; transition:all .2s; background:#fff; text-align:center; font-size:11px; font-weight:500; color:#374151; margin-bottom:4px; box-shadow:0 1px 2px rgba(0,0,0,.05); }
/* Slightly larger look for full hours (00 minutes) */
.time-slot.full-hour{ padding:14px 8px; font-size:13px; font-weight:700; }
.time-slot:hover:not(.booked):not(.disabled){ border-color:#3b82f6; background:#f8fafc; transform:translateY(-1px); box-shadow:0 2px 4px rgba(0,0,0,.1); }
.time-slot.selected{ background:#3b82f6; border-color:#3b82f6; color:#fff; transform:translateY(-1px); box-shadow:0 2px 4px rgba(59,130,246,.3); }
.time-slot.disabled{ opacity:.3; cursor:not-allowed; }
/* Already booked slots (from server) */
.time-slot.booked{ background:#fdecec !important; border-color:#f5c2c7 !important; color:#7f1d1d !important; cursor:not-allowed; }
/* Newly chosen slots (duration blocking for current selection) */
.time-slot.new-reservation{ background:#e8f5e9; border-color:#a7f3d0; color:#065f46; }
.booking-form{ 
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  border-radius:12px; 
  padding:0; 
  box-shadow:0 8px 32px 0 rgba(0, 0, 0, 0.2), 0 4px 6px -1px rgba(0,0,0,.1), 0 0 20px rgba(212, 175, 55, 0.2); 
  border:2px solid #d4af37;
  overflow:hidden;
}
.booking-form-banner{
  background:#1e4a3d;
  padding:clamp(12px, 2vw, 16px) clamp(16px, 4vw, 24px);
  text-align:center;
  border-bottom:2px solid #d4af37;
}
.booking-form-banner h1{
  font-size:clamp(18px, 3.5vw, 22px);
  font-weight:700;
  color:#fef5c7;
  margin:0;
  font-family:'Source Serif Pro', 'Times New Roman', Times, serif;
  letter-spacing:0.3px;
  text-shadow:0 2px 8px rgba(0, 0, 0, 0.5), 0 0 20px rgba(254, 245, 199, 0.5);
}
.booking-form form{ display:flex; flex-direction:column; gap:10px; padding:16px; }
.selected-info{ background:linear-gradient(180deg,#ecfdf5,#f0fdfa); border:1px solid #34d399; border-radius:10px; padding:10px 12px; margin-bottom:10px; box-shadow:0 4px 14px rgba(16,185,129,.12); }
.selected-info h4{ margin-top:0; margin-bottom:3px; color:#065f46; font-weight:800; font-size:14px; }
.selected-info p{ color:#064e3b; font-weight:600; font-size:13px; margin:0; }
.form-group{ margin-bottom:10px; }
.form-group label{ display:block; margin-bottom:4px; font-weight:600; color:#1f2937; font-size:12px; }
.form-group input, .form-group textarea, .form-group select{ width:100%; padding:8px 10px; border:1px solid #d1d5db; border-radius:6px; font-size:14px; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; transition:all .2s; background:#fff; }
.form-group input:focus, .form-group textarea:focus, .form-group select:focus{ outline:none; border-color:#3b82f6; box-shadow:0 0 0 3px rgba(59,130,246,.1); }
.booking-input-with-icon{
  position:relative;
  display:block;
}
.booking-input-icon{
  position:absolute;
  left:10px;
  top:50%;
  transform:translateY(-50%);
  color:#6b7280;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.booking-input-with-icon input{
  padding-left:36px !important;
}
.service-select-native{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}
.service-select-custom{ position:relative; }
.service-select-button{
  width:100%;
  border:1px solid #d1d5db;
  border-radius:6px;
  background:#fff;
  padding:8px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  transition:all .2s;
}
.service-select-button:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 3px rgba(59,130,246,.1);
}
.service-select-button-content{ display:flex; align-items:center; gap:10px; min-width:0; }
.service-select-button-thumb{
  width:34px;
  height:34px;
  border-radius:6px;
  object-fit:cover;
  flex-shrink:0;
  border:1px solid #e5e7eb;
}
.service-select-button-thumb.hidden{ display:none; }
.service-select-button-label{
  font-size:14px;
  color:#000 !important;
  text-align:left;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  line-height:1.35;
}
.service-select-button-caret{
  color:#374151;
  font-size:18px;
  font-weight:700;
  line-height:1;
  margin-left:10px;
}
.service-select-menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  right:0;
  background:#fff;
  border:1px solid #d1d5db;
  border-radius:8px;
  box-shadow:0 12px 24px rgba(0,0,0,.12);
  z-index:30;
  display:none;
  max-height:min(60vh, 420px);
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.service-select-custom.open .service-select-menu{ display:block; }
.service-select-options{ list-style:none; margin:0; padding:6px; }
.service-select-group{
  font-size:12px;
  font-weight:700;
  letter-spacing:.03em;
  color:#5b4a1e;
  text-transform:uppercase;
  padding:8px 10px;
  margin:8px 2px 4px;
  background:#fff6bf;
  border:1px solid #f5e7a1;
  border-radius:8px;
}
.service-select-option-row{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.service-select-option{
  flex:1;
  width:100%;
  border:0;
  background:transparent;
  border-radius:6px;
  padding:8px;
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  text-align:left;
}
.service-select-option:hover{ background:#f3f4f6; }
.service-select-option.active{
  background:#ecfdf5;
  color:#065f46;
}
.service-select-option-content{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  width:100%;
}
.service-select-option-thumb{
  width:38px;
  height:38px;
  border-radius:6px;
  object-fit:cover;
  border:1px solid #e5e7eb;
  flex-shrink:0;
}
.service-select-option-thumb.hidden{ display:none; }
.service-select-option-label{
  font-size:14px;
  line-height:1.3;
  color:#000 !important;
  overflow:visible;
  text-overflow:clip;
  white-space:normal;
  word-break:normal;
  overflow-wrap:anywhere;
}
.service-select-info-btn{
  width:28px;
  height:28px;
  border-radius:999px;
  border:1px solid #b7d7f3;
  background:#eaf4ff;
  color:#2f5d85;
  font-size:13px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-shrink:0;
}
.service-select-info-btn:hover{
  border-color:#8fbce6;
  color:#21496a;
  background:#dcecff;
}
.service-info-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10001;
  padding:20px;
  box-sizing:border-box;
}
.service-info-modal.open{ display:flex; }
.service-info-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.55);
  backdrop-filter:blur(2px);
}
.service-info-card{
  position:relative;
  z-index:2;
  width:min(700px, 96vw);
  max-height:calc(100vh - var(--header-height, 80px) - 20px);
  overflow:hidden;
  background:#f5f5dc;
  border-radius:24px;
  border:2px solid #F4E4BC;
  box-shadow:0 25px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.1), inset 0 1px 0 rgba(255,255,255,.6);
}
.service-info-header{
  background:linear-gradient(135deg, #1a4a3e, #2d5a4f);
  padding:2rem 2.5rem 1.5rem;
  padding-right:4.5rem;
  position:relative;
  border-bottom:1px solid rgba(255,255,255,.1);
}
.service-info-header h2{
  margin:0;
  font-family:'Cormorant Garamond', 'Times New Roman', Times, serif;
  font-size:1.75rem;
  font-weight:700;
  color:#F4E4BC;
  text-shadow:0 2px 4px rgba(0,0,0,.3);
}
.service-info-body{
  padding:0;
  max-height:calc(85vh - 120px);
  overflow-y:auto;
  background:#f5f5dc;
}
.service-info-close{
  position:absolute;
  top:1.5rem;
  right:2rem;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(0,0,0,.4);
  border:1.5px solid #F4E4BC;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  font-size:0;
  line-height:0;
  backdrop-filter:blur(10px);
}
.service-info-close:hover{ transform:scale(1.1); }
.service-info-close svg{ width:20px; height:20px; }
.service-info-image{
  width:100%;
  max-height:380px;
  object-fit:cover;
  border-radius:0;
  margin:0;
  display:block;
}
.service-info-description p{
  margin:0 0 1.2rem;
  color:#444;
  line-height:1.7;
  font-size:1.25rem;
  padding:0 2.5rem;
}
.service-info-description p:first-child{
  padding-top:2rem;
}
.service-info-description p:last-child{
  padding-bottom:2.2rem;
}

@media (max-width: 768px){
  .service-info-modal{
    padding:10px;
  }
  .service-info-card{
    max-height:calc(100dvh - var(--header-height, 88px) - 20px);
    border-radius:20px;
  }
  .service-info-header{
    padding:1rem 1.5rem .75rem;
    padding-right:3.5rem;
  }
  .service-info-header h2{
    font-size:1.35rem;
  }
  .service-info-close{
    top:.75rem;
    right:1rem;
    width:36px;
    height:36px;
  }
  .service-info-body{
    max-height:calc(100dvh - var(--header-height, 88px) - 140px);
  }
  .service-info-description p{
    font-size:1.1rem;
    padding:0 1.5rem;
  }
  .service-info-description p:first-child{
    padding-top:1.5rem;
  }
  .service-info-description p:last-child{
    padding-bottom:1.5rem;
  }
}
.privacy-consent-group{ margin-top:4px; }
.privacy-consent-label{ display:flex !important; align-items:flex-start; gap:8px; cursor:pointer; font-weight:500 !important; }
.privacy-consent-label input[type="checkbox"]{ width:18px; height:18px; flex-shrink:0; margin-top:2px; accent-color:#255e50; }
.privacy-consent-label a{ color:#255e50; text-decoration:underline; }
.privacy-consent-label a:hover{ color:#1e4a3d; }
.required-note{ font-size:11px; color:#6b7280; margin:6px 0 10px 0; font-style:italic; }
.submit-btn{ width:100%; background:#255e50; color:#fff; border:none; border-radius:8px; padding:12px; font-size:15px; font-weight:700; cursor:pointer; transition:all .3s; }
.submit-btn:hover{ background:#1e4a3d; transform:translateY(-2px); box-shadow:0 8px 20px rgba(37,94,80,.3); }
.submit-btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

/* Thank You Modal */
.thanks-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; }
.thanks-modal.open{ display:flex; }
.thanks-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn .25s ease; }
.thanks-card{ position:relative; background:linear-gradient(180deg,#ffffff,#f7fff9); border:1px solid #bbf7d0; width:min(520px,92vw); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:28px 24px 22px; text-align:center; transform:translateY(16px) scale(.96); opacity:0; animation:popIn .35s cubic-bezier(.22,1,.36,1) forwards; }
.thanks-anim{ position:relative; width:96px; height:96px; margin:0 auto 12px; }
.thanks-anim .ring{ position:absolute; inset:0; border-radius:999px; background:radial-gradient(circle at 30% 30%, #b7f7d3, #e9fff4); animation:pulse 1.8s ease-in-out infinite; }
.thanks-anim .check{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:56px; color:#1a4a3e; text-shadow:0 2px 6px rgba(0,0,0,.15); animation:bounce .6s ease .2s both; }
.thanks-card h3{ margin:6px 0 6px; font-size:22px; color:#1f2937; }
.thanks-text{ color:#4b5563; margin:0 0 16px; }
.thanks-btn{ background:#255e50; color:#fff; border:0; border-radius:12px; padding:10px 18px; cursor:pointer; font-weight:700; transition:transform .15s ease, box-shadow .15s ease; }
.thanks-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(37,94,80,.35); }

@keyframes popIn{ to{ transform:translateY(0) scale(1); opacity:1; } }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.06); opacity:.9; } }
@keyframes bounce{ 0%{ transform:scale(.7); opacity:0; } 60%{ transform:scale(1.1); opacity:1; } 100%{ transform:scale(1); } }

/* Error Modal */
.error-modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:2000; }
.error-modal.open{ display:flex; }
.error-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); animation:fadeIn .25s ease; }
.error-card{ position:relative; background:linear-gradient(180deg,#ffffff,#fff5f5); border:1px solid #fecaca; width:min(520px,92vw); border-radius:20px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:28px 24px 22px; text-align:center; transform:translateY(16px) scale(.96); opacity:0; animation:popIn .35s cubic-bezier(.22,1,.36,1) forwards; }
.error-icon{ width:80px; height:80px; margin:0 auto 16px; display:flex; align-items:center; justify-content:center; font-size:56px; line-height:1; background:radial-gradient(circle at 30% 30%, #fef3c7, #fef9e7); border-radius:50%; animation:bounce .6s ease .2s both; position:relative; }
.error-icon::before{ content:''; position:absolute; inset:0; border-radius:50%; background:radial-gradient(circle at 35% 40%, rgba(255,182,193,0.6), rgba(255,192,203,0.3), transparent 60%); animation:blush 2s ease-in-out infinite; }
@keyframes blush{ 0%,100%{ opacity:0.4; transform:scale(1); } 50%{ opacity:0.7; transform:scale(1.05); } }
.error-card h3{ margin:6px 0 12px; font-size:22px; color:#92400e; font-weight:600; }
.error-text{ color:#7f1d1d; margin:0 0 20px; font-size:16px; line-height:1.6; }
.error-btn{ background:#dc2626; color:#fff; border:0; border-radius:12px; padding:12px 24px; cursor:pointer; font-weight:700; font-size:16px; transition:transform .15s ease, box-shadow .15s ease; }
.error-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(220,38,38,.35); background:#b91c1c; }