:root { color-scheme: light dark; --booking-bg:#f7f7fb; --booking-card:#fff; --booking-text:#232336; --booking-muted:#626273; --booking-border:#dedee9; --booking-accent:#6554df; }
@media(prefers-color-scheme:dark) { :root { --booking-bg:#15151d; --booking-card:#20202b; --booking-text:#f4f3fa; --booking-muted:#bcbacb; --booking-border:#414153; --booking-accent:#8675f5; } }
* { box-sizing:border-box; } body { margin:0; background:var(--booking-bg); color:var(--booking-text); font:400 16px/1.55 Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
a { color:var(--booking-accent); } button,input,select,textarea { font:inherit; } button,select { cursor:pointer; } button,input,select,textarea { color:var(--booking-text); background:var(--booking-card); border:1px solid var(--booking-border); border-radius:10px; padding:10px 13px; min-height:44px; } button:hover:not(:disabled) { border-color:var(--booking-accent); } button:disabled { opacity:.45; cursor:not-allowed; } :focus-visible { outline:3px solid var(--booking-accent); outline-offset:3px; } [hidden] { display:none!important; }
.booking-header { max-width:1200px; margin:auto; padding:28px; display:flex; justify-content:space-between; gap:12px; } .booking-header a { text-decoration:none; } .booking-shell { max-width:1180px; margin:40px auto; display:grid; grid-template-columns:280px minmax(0,1fr); border:1px solid var(--booking-border); border-radius:20px; background:var(--booking-card); overflow:hidden; } .booking-summary { padding:32px; border-right:1px solid var(--booking-border); } .booking-summary p,.booking-summary small { color:var(--booking-muted); } h1 { font-size:26px; line-height:1.2; overflow-wrap:anywhere; } h2 { font-size:23px; margin:0 0 24px; } h3 { font-size:16px; } .eyebrow { font-size:11px; letter-spacing:.12em; font-weight:700; } .booking-content { padding:32px; min-width:0; } .booking-selectors { display:flex; gap:16px; margin-bottom:24px; } label { display:grid; gap:6px; font-weight:500; } .booking-selectors label { flex:1; min-width:0; } select { width:100%; } .booking-calendar-layout { display:grid; grid-template-columns:minmax(240px,1.5fr) minmax(140px,1fr); gap:30px; } .month-nav { display:flex; align-items:center; justify-content:space-between; gap:8px; } .calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; } .calendar-grid button { padding:8px 0; min-width:0; } .calendar-grid span { text-align:center; color:var(--booking-muted); font-size:12px; padding:5px 0; } .calendar-grid [aria-pressed=true],.slot-list [aria-pressed=true] { background:var(--booking-accent); color:white; border-color:transparent; } .slot-list { display:grid; gap:8px; max-height:350px; overflow:auto; padding:3px; } .primary { background:var(--booking-accent); color:white; border-color:transparent; font-weight:600; margin-top:24px; width:100%; } .fields { display:grid; gap:18px; margin-top:24px; } .fields input,.fields textarea { width:100%; } input[type=checkbox] { width:22px; min-height:22px; } #booking-error { padding:16px; border:1px solid #ca4040; border-radius:10px; margin-bottom:20px; } #booking-fields h2 { margin-top:24px; }
@media (max-width: 760px) {
    body:has(.booking-shell) { background: var(--booking-card); }
    .booking-header { padding: 16px; font-size: 14px; }
    .booking-shell {
        margin: 0;
        min-height: calc(100dvh - 76px);
        grid-template-columns: 1fr;
        align-content: start;
        border: 0;
        border-radius: 0;
    }
    .booking-summary { display: none; }
    .booking-summary > :not(#booking-summary) { display: none; }
    /* Keep the chosen service and time available while entering client details. */
    .booking-shell:has(#booking-form:not([hidden]) #booking-fields:not([hidden])) .booking-summary {
        display: block;
        padding: 0 16px;
        border: 0;
        font-size: 14px;
        color: var(--booking-muted);
    }
    .booking-content { padding: 16px 16px 28px; }
    .booking-calendar-layout { grid-template-columns: 1fr; gap: 14px; }
    .slot-list { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; }
    .booking-selectors { flex-direction: column; }
    .calendar-grid { gap: 4px; }
    .calendar-grid button { min-height: 44px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }

body[data-theme=light] { color-scheme:light; --booking-bg:#f7f7fb; --booking-card:#fff; --booking-text:#232336; --booking-muted:#626273; --booking-border:#dedee9; --booking-accent:#6554df; }
body[data-theme=dark] { color-scheme:dark; --booking-bg:#15151d; --booking-card:#20202b; --booking-text:#f4f3fa; --booking-muted:#bcbacb; --booking-border:#414153; --booking-accent:#8675f5; }

/* Shared site typography and lightweight control feedback; no animation runtime. */
.booking-header, .booking-content { -webkit-font-smoothing: antialiased; }
.booking-header a, .booking-header button, #back-booking { font-weight: 500; font-size: .875rem; line-height: 1.4; }
.booking-back, #booking-theme, .month-nav button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; }
.booking-back { text-decoration: none; }
.booking-icon { display: block; flex: 0 0 20px; }
.month-nav button { width: 44px; padding: 10px; }
.calendar-grid button, .slot-list button { font-weight: 500; font-variant-numeric: tabular-nums; }
.month-nav h3, .booking-content h2 { font-weight: 600; letter-spacing: -.025em; }
.booking-theme-icons { width: 20px; height: 20px; display: grid; flex: 0 0 20px; }
.booking-theme-icons .booking-icon { grid-area: 1 / 1; transition: opacity 180ms ease, transform 180ms ease; }
body[data-theme=light] .booking-theme-sun, body[data-theme=dark] .booking-theme-moon { opacity: 0; transform: rotate(-45deg) scale(.8); }
body[data-theme=dark] .booking-theme-sun, body[data-theme=light] .booking-theme-moon { opacity: 1; transform: rotate(0) scale(1); }
body:has(.booking-shell), .booking-shell, .booking-summary { transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease; }
.booking-content button, .booking-header button, .booking-header a { transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease, transform 160ms ease; }
.calendar-grid button:active:not(:disabled), .slot-list button:active:not(:disabled) { transform: scale(.97); }
.calendar-grid button[aria-pressed=true], .slot-list button[aria-pressed=true] { animation: booking-selection 160ms ease-out; }
@keyframes booking-selection { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }
@media (max-width: 460px) {
    #booking-theme { width: 44px; flex: 0 0 44px; padding: 10px; }
    .booking-theme-label { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    body:has(.booking-shell), .booking-shell, .booking-summary, .booking-content button, .booking-header button, .booking-header a, .booking-theme-icons .booking-icon { transition: none; }
    .calendar-grid button[aria-pressed=true], .slot-list button[aria-pressed=true] { animation: none; }
    .calendar-grid button:active:not(:disabled), .slot-list button:active:not(:disabled) { transform: none; }
}

/* Confirmation uses one shared left edge and one localized reservation summary. */
#booking-confirmation { max-width: 560px; text-align: left; scroll-margin-top: 24px; }
.confirmation-status { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; color: var(--booking-accent); font-size: .875rem; font-weight: 500; }
#confirmation-title { margin: 0 0 24px; text-wrap: balance; }
.confirmation-details { display: grid; gap: 14px; margin: 0 0 28px; }
.confirmation-details > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; }
.confirmation-details dt { color: var(--booking-muted); font-size: .875rem; }
.confirmation-details dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; text-wrap: pretty; font-variant-numeric: tabular-nums; }
.confirmation-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
.confirmation-actions > * { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 16px; border-radius: 10px; font-size: .875rem; font-weight: 500; text-decoration: none; }
.confirmation-actions .confirmation-manage { background: var(--booking-accent); color: white; border: 1px solid transparent; }
.confirmation-helper, .confirmation-return { max-width: 42ch; margin: 16px 0 0; color: var(--booking-muted); font-size: .875rem; line-height: 1.6; text-wrap: pretty; }
.confirmation-copy-status { margin: 12px 0 0; font-size: .875rem; text-wrap: pretty; }
.confirmation-copy-status:empty { display: none; }
#confirmation-copy-fallback { margin-top: 12px; font-size: .875rem; }
#confirmation-copy-value { min-width: 0; width: 100%; }
.booking-shell:has(#booking-confirmation:not([hidden])) #booking-summary { display: none; }
@media (max-width: 460px) {
    .confirmation-details > div { grid-template-columns: 80px minmax(0, 1fr); gap: 10px; }
    .confirmation-actions { display: grid; grid-template-columns: 1fr; }
    .confirmation-actions > * { width: 100%; }
}

/* Compact wizard progress; mobile keeps one current-step label. */
#booking-progress { margin-bottom: 24px; scroll-margin-top: 16px; }
#booking-step-current { margin: 0 0 14px; color: var(--booking-muted); font-size: .8rem; }
#booking-progress ol { display: flex; list-style: none; padding: 0; margin: 0; gap: 12px; }
#booking-progress li { flex: 1; border-top: 3px solid var(--booking-border); padding-top: 9px; font-size: .75rem; color: var(--booking-muted); }
#booking-progress li[aria-current=step] { border-color: var(--booking-accent); color: var(--booking-text); font-weight: 600; }
#booking-service { max-width: 580px; }
#booking-service > p, #selected-service-summary { color: var(--booking-muted); font-size: .9rem; }
#booking-service .booking-selectors { flex-direction: column; margin-top: 24px; }
#change-service { margin-bottom: 20px; }
@media(max-width:760px) {
  #booking-progress { margin-bottom: 20px; }
  #booking-progress ol { display: none; }
  #booking-step-current { margin: 0; }
}
.service-cards { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,230px),1fr)); gap: 12px; }
.service-card { display: grid; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto; gap: 8px 12px; min-height: 104px; width: 100%; padding: 18px; text-align: left; border: 2px solid var(--booking-border); border-radius: 14px; background: var(--booking-surface, #fff); transition: border-color .15s ease, box-shadow .15s ease; cursor: pointer; }
.service-card-name { grid-area: 1 / 1 / 2 / 2; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
.service-card:not(:has(.service-card-price)) .service-card-name { grid-area: 1 / 1 / 2 / -1; }
.service-card-icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; color: var(--booking-accent); }
.service-card-icon svg { width: 20px; height: 20px; }
.service-card-title { min-width: 0; }
.service-card-price { grid-area: 1 / 2 / 2 / 3; justify-self: end; align-self: center; font-size: .95rem; font-weight: 700; color: var(--booking-text); white-space: nowrap; }
.service-card-duration { grid-area: 2 / 1 / 3 / 2; font-size: .875rem; color: var(--booking-muted); align-self: center; }
.service-card-selected { grid-area: 2 / 2 / 3 / 3; visibility: hidden; font-size: .72rem; font-weight: 500; align-self: center; justify-self: end; }
.service-card[aria-pressed=true] { border-color: var(--booking-accent); box-shadow: inset 0 0 0 1px var(--booking-accent); }
.service-card[aria-pressed=true] .service-card-selected { visibility: visible; color: var(--booking-text); }