.booking-page {
  --booking-green: #667257;
  --booking-green-dark: #4f5b43;
  --booking-ink: #1c211b;
  --booking-muted: #687066;
  --booking-line: #dde2da;
  --booking-soft: #f4f6f1;
  background: #f7f8f5;
  color: var(--booking-ink);
  font-family: "Open Sans", sans-serif;
  padding: 66px 24px 96px;
}

.booking-intro {
  margin: 0 auto 42px;
  max-width: 720px;
  text-align: center;
}

.booking-eyebrow,
.booking-step-label {
  color: var(--booking-green);
  font-family: Montserrat, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.17em;
  margin: 0 0 10px;
}

.booking-intro h1 {
  font-family: Merriweather, serif;
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 400;
  margin: 0 0 16px;
}

.booking-intro > p:last-of-type {
  color: var(--booking-muted);
  font-size: 1.06rem;
  line-height: 1.7;
  margin: 0;
}
.booking-package-link { background: var(--booking-green) !important; border: 1px solid var(--booking-green) !important; border-radius: 999px !important; color: #fff !important; display: inline-flex; font-family: Montserrat, sans-serif; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; margin-top: 24px; padding: 13px 25px; text-decoration: none; }
.booking-package-link:hover,
.booking-package-link:focus-visible { background: var(--booking-green-dark) !important; border-color: var(--booking-green-dark) !important; }

.booking-shell {
  background: #fff;
  border: 1px solid var(--booking-line);
  border-radius: 18px;
  box-shadow: 0 20px 60px rgba(40, 48, 37, 0.08);
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  margin: 0 auto;
  max-width: 1180px;
  min-height: 690px;
  overflow: hidden;
  scroll-margin-top: 120px;
}

.booking-sidebar {
  background: var(--booking-green);
  color: #fff;
  padding: 42px 34px;
}

.booking-logo {
  background: #fff;
  border-radius: 12px;
  height: 82px;
  object-fit: contain;
  padding: 12px;
  width: 100%;
}

.booking-sidebar h2 {
  font-family: Merriweather, serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.35;
  margin: 30px 0 12px;
}

.booking-sidebar > p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.9rem;
  line-height: 1.65;
  margin: 0;
}

.booking-business-details { border-top: 1px solid rgba(255, 255, 255, 0.24); margin: 28px 0 0; padding-top: 24px; }
.booking-business-details div + div { margin-top: 18px; }
.booking-business-details dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.booking-business-details dd { color: rgba(255, 255, 255, 0.8); font-size: 0.84rem; line-height: 1.5; margin: 5px 0 0; }
.booking-selection-summary { border-top: 1px solid rgba(255, 255, 255, 0.24); margin-top: 28px; padding-top: 24px; }
.booking-selection-summary:empty { display: none; }
.booking-selection-summary h3 { font-size: 0.75rem; letter-spacing: 0.1em; margin: 0 0 17px; text-transform: uppercase; }
.booking-selection-summary p { margin: 0 0 14px; }
.booking-selection-summary strong { display: block; font-size: 0.7rem; opacity: 0.68; text-transform: uppercase; }
.booking-selection-summary span { display: block; font-size: 0.88rem; margin-top: 3px; text-transform: capitalize; }

.booking-main { padding: 38px 46px 48px; }
.booking-progress { display: grid; gap: 8px; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0 0 54px; padding: 0; }
.booking-progress li { align-items: center; color: #9da39a; display: flex; font-size: 0.72rem; gap: 7px; min-width: 0; }
.booking-progress li::after { background: var(--booking-line); content: ""; flex: 1; height: 1px; margin-left: 4px; }
.booking-progress li:last-child::after { display: none; }
.booking-progress span { align-items: center; border: 1px solid #cfd4cc; border-radius: 50%; display: inline-flex; flex: 0 0 25px; height: 25px; justify-content: center; }
.booking-progress li.is-active { color: var(--booking-green-dark); font-weight: 700; }
.booking-progress li.is-active span { background: var(--booking-green); border-color: var(--booking-green); color: #fff; }
.booking-progress li.is-complete span { background: var(--booking-soft); border-color: var(--booking-green); color: var(--booking-green); }

.booking-step[hidden] { display: none; }
.booking-step h2 { font-family: Merriweather, serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 400; margin: 0 0 28px; }
.booking-step h3 { font-size: 0.86rem; margin: 0 0 14px; }
.booking-step-label { margin-bottom: 8px; }
.booking-back { background: none; border: 0; color: var(--booking-green-dark); cursor: pointer; font: inherit; font-size: 0.82rem; margin: 0 0 24px; padding: 0; }

.service-list { display: grid; gap: 13px; }
.service-card {
  align-items: center;
  background: #fff;
  border: 1px solid var(--booking-line);
  border-radius: 12px;
  color: var(--booking-ink);
  cursor: pointer;
  display: grid;
  gap: 17px;
  grid-template-columns: 44px 1fr auto;
  padding: 20px;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.service-card:hover,
.service-card:focus-visible { border-color: var(--booking-green); box-shadow: 0 8px 25px rgba(76, 89, 68, 0.1); transform: translateY(-2px); }
.service-icon { align-items: center; background: var(--booking-soft); border-radius: 50%; color: var(--booking-green); display: flex; font-size: 1.4rem; height: 44px; justify-content: center; }
.service-copy strong,
.service-copy small,
.service-copy em { display: block; }
.service-copy strong { font-size: 1rem; }
.service-copy small { color: var(--booking-muted); font-size: 0.79rem; line-height: 1.45; margin: 5px 0 8px; }
.service-copy em { color: var(--booking-green); font-size: 0.73rem; font-style: normal; font-weight: 700; }
.service-arrow { color: var(--booking-green); font-size: 1.25rem; }

.booking-timezone { color: var(--booking-muted); font-size: 0.78rem; margin: -18px 0 28px; }
.booking-date-layout { display: grid; gap: 34px; grid-template-columns: minmax(0, 1.4fr) minmax(180px, 0.8fr); }
.calendar-toolbar { align-items: center; display: grid; grid-template-columns: 40px 1fr 40px; margin-bottom: 12px; }
.calendar-toolbar strong { font-family: Merriweather, serif; font-size: 1rem; font-weight: 400; text-align: center; text-transform: capitalize; }
.calendar-toolbar button { background: var(--booking-soft); border: 0; border-radius: 50%; color: var(--booking-green-dark); cursor: pointer; font-size: 1.5rem; height: 36px; line-height: 1; width: 36px; }
.calendar-toolbar button:hover:not(:disabled),
.calendar-toolbar button:focus-visible:not(:disabled) { background: var(--booking-green); color: #fff; }
.calendar-toolbar button:disabled { cursor: not-allowed; opacity: 0.3; }
.calendar-weekdays { color: var(--booking-muted); display: grid; font-size: 0.66rem; font-weight: 700; grid-template-columns: repeat(7, 1fr); margin-bottom: 6px; text-align: center; }
.date-list { display: grid; gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-blank { min-height: 46px; }
.date-card {
  background: #fff;
  border: 1px solid var(--booking-line);
  border-radius: 9px;
  color: var(--booking-ink);
  cursor: pointer;
  font-size: 0.84rem;
  min-height: 46px;
  padding: 5px 2px;
}
.date-card:hover,
.date-card:focus-visible,
.date-card.is-selected { background: var(--booking-green); border-color: var(--booking-green); color: #fff; }
.date-card:disabled { background: #fafafa; border-color: #ecefec; color: #c0c5bd; cursor: not-allowed; }
.time-list { display: grid; gap: 9px; grid-template-columns: repeat(2, 1fr); }
.time-card { background: #fff; border: 1px solid var(--booking-green); border-radius: 9px; color: var(--booking-green-dark); cursor: pointer; font-weight: 700; min-height: 44px; }
.time-card:hover, .time-card:focus-visible { background: var(--booking-green); color: #fff; }
.booking-placeholder { background: var(--booking-soft); border-radius: 9px; color: var(--booking-muted); font-size: 0.8rem; grid-column: 1 / -1; line-height: 1.5; margin: 0; padding: 18px; }

.package-description-card { background:#fff; border:1px solid var(--booking-line); border-radius:14px; box-shadow:0 12px 35px rgba(38,46,34,.07); margin-top:28px; overflow:hidden; }
.package-description-card > header { align-items:flex-start; background:var(--booking-soft); border-bottom:1px solid var(--booking-line); display:flex; gap:25px; justify-content:space-between; padding:24px 28px; }
.package-description-card > header p { color:var(--booking-green); font:700 .63rem Montserrat,sans-serif; letter-spacing:.13em; margin:0 0 7px; }
.package-description-card > header h3 { font-family:Merriweather,serif; font-size:1.3rem; font-weight:400; margin:0; }
.package-description-card > header > span { color:var(--booking-green-dark); flex:0 0 auto; font-size:.75rem; font-weight:700; padding-top:21px; }
.package-description-content { color:#4e554b; font-family:"Open Sans",sans-serif; font-size:.88rem; line-height:1.8; padding:30px 34px 34px; }
.package-description-content h2,.package-description-content h3 { color:var(--booking-ink); font-family:Merriweather,serif; font-weight:400; line-height:1.35; text-transform:none; }
.package-description-content h2 { font-size:1.55rem; margin:0 0 17px; }
.package-description-content h3 { font-size:1.2rem; margin:26px 0 12px; }
.package-description-content p { margin:0; }
.package-description-content p + p { margin-top:14px; }
.package-description-content ul,.package-description-content ol { margin:16px 0; padding-left:22px; }
.package-description-content li + li { margin-top:7px; }
.package-description-content blockquote { border-left:3px solid var(--booking-green); color:var(--booking-ink); font-family:Merriweather,serif; margin:20px 0; padding:4px 0 4px 18px; }
.package-description-continue { margin-top:22px; }

.booking-field-grid { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; }
.booking-field { margin-bottom: 18px; }
.booking-field label { display: block; font-size: 0.8rem; font-weight: 700; margin-bottom: 7px; }
.booking-field label span { color: var(--booking-muted); font-weight: 400; }
.booking-field input,
.booking-field textarea { border: 1px solid #cfd4cc; border-radius: 8px; box-sizing: border-box; font: inherit; padding: 12px 13px; resize: vertical; width: 100%; }
.booking-field input:focus,
.booking-field textarea:focus { border-color: var(--booking-green); outline: 3px solid rgba(102, 114, 87, 0.13); }
.booking-legal-consent { margin:2px 0 24px; }
.booking-consent-row { align-items:center; color:var(--booking-muted); display:grid; font-size:.78rem; gap:11px; grid-template-columns:18px minmax(0,1fr); line-height:1.55; margin:0; }
.booking-consent-row input { accent-color:var(--booking-green); align-self:center; height:18px!important; margin:0!important; min-height:18px!important; padding:0!important; width:18px!important; }
.booking-consent-row label { cursor:pointer; display:block; margin:0; min-width:0; padding:0; }
.booking-consent-row a { color:var(--booking-green-dark); font-weight:700; text-decoration:underline; text-underline-offset:2px; }
.booking-policy-link { background:none; border:0; color:var(--booking-green-dark); cursor:pointer; font:700 .76rem "Open Sans",sans-serif; margin:8px 0 0 29px; padding:2px 0; text-decoration:underline; text-underline-offset:3px; }
.booking-policy-link:hover,.booking-policy-link:focus-visible { color:#303a2a; }
.booking-policy-dialog { background:#fff; border:0; border-radius:17px; box-shadow:0 25px 80px rgba(19,25,17,.26); color:var(--booking-ink); max-height:calc(100vh - 36px); max-width:610px; padding:0; width:calc(100% - 30px); }
.booking-policy-dialog::backdrop { background:rgba(15,19,14,.62); backdrop-filter:blur(3px); }
.booking-policy-dialog form { padding:38px; position:relative; }
.booking-policy-dialog h2 { font-family:Merriweather,serif; font-size:clamp(1.8rem,4vw,2.5rem); font-weight:400; margin:0 40px 25px 0; }
.booking-policy-close { background:none; border:0; color:#555d52; cursor:pointer; font-size:1.8rem; line-height:1; padding:8px; position:absolute; right:16px; top:13px; }
.booking-policy-copy { background:var(--booking-soft); border-radius:12px; padding:19px 21px; }
.booking-policy-copy p { color:#4f574d; font-size:.88rem; line-height:1.7; margin:0; }
.booking-policy-copy p + p { border-top:1px solid var(--booking-line); margin-top:13px; padding-top:13px; }
.booking-policy-copy strong { color:var(--booking-ink); }
.booking-policy-accept { background:var(--booking-green); border:1px solid var(--booking-green); border-radius:999px; color:#fff; cursor:pointer; display:block; font:700 .72rem Montserrat,sans-serif; letter-spacing:.08em; margin:24px 0 0 auto; padding:13px 23px; text-transform:uppercase; }
.booking-policy-accept:hover,.booking-policy-accept:focus-visible { background:var(--booking-green-dark); border-color:var(--booking-green-dark); }
.booking-form-error { background: #f8ebe7; border-radius: 9px; color: #8b463d; font-size: .78rem; line-height: 1.5; margin: -10px 0 18px; padding: 12px 14px; }
.booking-primary,
.booking-secondary { background: var(--booking-green) !important; border: 1px solid var(--booking-green) !important; border-radius: 999px !important; color: #fff !important; cursor: pointer; font-family: Montserrat, sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; min-height: 49px; padding: 13px 27px; text-transform: uppercase; }
.booking-primary:hover, .booking-primary:focus-visible,
.booking-secondary:hover, .booking-secondary:focus-visible { background: var(--booking-green-dark) !important; border-color: var(--booking-green-dark) !important; }
.booking-primary { width: 100%; }

.booking-confirmation { margin: 15px auto; max-width: 600px; text-align: center; }
.booking-check { align-items: center; background: var(--booking-green); border-radius: 50%; color: #fff; display: flex; font-size: 2rem; height: 72px; justify-content: center; margin: 0 auto 24px; width: 72px; }
.booking-confirmation > p:not(.booking-step-label) { color: var(--booking-muted); line-height: 1.65; }
.booking-confirmation-card { background: var(--booking-soft); border-radius: 12px; margin: 28px 0; padding: 20px 25px; text-align: left; }
.booking-confirmation-card p { border-bottom: 1px solid var(--booking-line); display: flex; justify-content: space-between; margin: 0; padding: 11px 0; }
.booking-confirmation-card p:last-child { border: 0; }
.booking-confirmation-card strong { font-size: 0.78rem; }
.booking-confirmation-card span { font-size: 0.8rem; text-align: right; text-transform: capitalize; }
.booking-confirmation-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.booking-whatsapp { background: #237a45 !important; border: 1px solid #237a45 !important; border-radius: 999px !important; color: #fff !important; display: inline-flex; font-family: Montserrat, sans-serif; font-size: 0.78rem; font-weight: 700; justify-content: center; letter-spacing: 0.05em; min-height: 49px; padding: 14px 25px; text-decoration: none; text-transform: uppercase; }
.booking-whatsapp:hover,
.booking-whatsapp:focus-visible { background: #185d33 !important; border-color: #185d33 !important; }
.booking-exit { align-items: center; background: #fff !important; border: 1px solid var(--booking-line) !important; border-radius: 999px !important; color: var(--booking-ink) !important; display: inline-flex; font-family: Montserrat, sans-serif; font-size: 0.78rem; font-weight: 700; justify-content: center; letter-spacing: 0.05em; min-height: 49px; padding: 13px 25px; text-decoration: none; text-transform: uppercase; }
.booking-exit:hover,
.booking-exit:focus-visible { background: var(--booking-soft) !important; border-color: var(--booking-green) !important; }

@media (max-width: 900px) {
  .booking-shell { grid-template-columns: 1fr; }
  .booking-sidebar { padding: 28px 32px; }
  .booking-logo { height: 66px; max-width: 210px; }
  .booking-sidebar h2 { margin-top: 20px; }
  .booking-business-details { display: flex; gap: 35px; }
  .booking-selection-summary { display: none; }
}

@media (max-width: 650px) {
  .booking-page { padding: 45px 13px 70px; }
  .booking-intro { padding: 0 10px; }
  .booking-shell { border-radius: 13px; }
  .booking-sidebar { padding: 24px; }
  .booking-business-details { display: block; }
  .booking-main { padding: 28px 20px 38px; }
  .booking-progress { margin-bottom: 38px; }
  .booking-progress li { font-size: 0; gap: 3px; }
  .booking-progress li span { font-size: 0.72rem; }
  .service-card { gap: 12px; grid-template-columns: 40px 1fr auto; padding: 16px 13px; }
  .service-icon { height: 40px; }
  .booking-date-layout { grid-template-columns: 1fr; }
  .date-list { gap: 4px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .calendar-blank, .date-card { min-height: 40px; }
  .booking-field-grid { grid-template-columns: 1fr; }
  .package-description-card > header { display:block; padding:21px; }
  .package-description-card > header > span { display:block; padding-top:12px; }
  .package-description-content { padding:24px 21px 27px; }
  .booking-policy-dialog form { padding:31px 22px 24px; }
  .booking-confirmation-card p { display: block; }
  .booking-confirmation-card span { display: block; margin-top: 4px; text-align: left; }
}