/* Booking-only theme: no showcase, the booking flow is the page: one app-like screen per step (header with the name, a
   four-step tracker, a serif title, the step). Colors, font and avatar are the owner's (admin → Aspect): public/js/look.js
   sets --paper, --card, --foreground, --muted, --accent, --accent-contrast, --border and the fonts on <html>; the defaults
   below only show until it has run. */
:root { --paper: #efe9e1; --card: #f7f3ee; --accent: #2a2320; --accent-contrast: #f7f3ee; --foreground: #231d1a; --muted: #8a817a; --border: rgba(35, 29, 26, 0.12); --ink: #231d1a; --ink-muted: #8a817a; --line: rgba(35, 29, 26, 0.12); }
/* 100dvh, not 100svh: svh is the height with the browser bars shown, so once they slide away the page ended above the
   bottom edge and the footer sat too high, with a strip of --paper under it. The html canvas is the footer's color, so
   anything below the page (rubber-band, a home-screen app whose viewport is taller than the page) reads as more footer. */
html { background: var(--card); }
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--paper); color: var(--foreground); }
main { flex: 1 0 auto; }

/* The page has its own header (name, back, more): the shared one and its menu stay out of the way. */
.site-header, .mobile-menu { display: none; }

.booking { padding: max(1.25rem, env(safe-area-inset-top)) 0 clamp(2.5rem, 2rem + 3vw, 4rem); background: var(--paper); }
.app { width: min(100% - 2.5rem, 26rem); margin-inline: auto; }

/* Header: wordmark in the middle, back on the left (steps 2+), more on the right */
.app__bar { position: relative; display: grid; grid-template-columns: 2.75rem 1fr 2.75rem; align-items: center; gap: 0.5rem; min-height: 3rem; }
.app__btn { grid-row: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--foreground); }
.app__back { grid-column: 1; margin-left: -0.5rem; }
.app__back:hover { background: color-mix(in srgb, var(--foreground) 6%, transparent); }
.app__more { grid-column: 3; background: color-mix(in srgb, var(--foreground) 7%, transparent); transition: background-color 0.3s; }
.app__more:hover { background: color-mix(in srgb, var(--foreground) 13%, transparent); }
.brand { grid-column: 2; grid-row: 1; text-align: center; min-width: 0; }
.brand__name { margin: 0; font: 500 clamp(0.95rem, 0.85rem + 0.5vw, 1.1rem) / 1.1 var(--font-body); letter-spacing: 0.42em; text-indent: 0.42em; text-transform: uppercase; overflow-wrap: anywhere; }
.brand__tag { margin: 0.35rem 0 0; font-size: 0.5rem; letter-spacing: 0.5em; text-indent: 0.5em; text-transform: uppercase; color: var(--muted); }

/* Steps: a done step shows a check instead of its number */
.booking .steps { margin: 1.75rem 0 0; }
.booking .step + .step::before { top: 0.95rem; right: calc(50% + 1.1rem); left: calc(-50% + 1.1rem); background: var(--border); }
.booking .step.is-done + .step::before, .booking .step.is-done + .step.is-current::before { background: var(--accent); }
.booking .step__btn { gap: 0.55rem; }
.booking .step__num { position: relative; width: 1.9rem; height: 1.9rem; border-color: var(--border); background: var(--paper); color: var(--muted); font-size: 0.75rem; box-shadow: none; }
.booking .step__check { display: none; width: 0.9rem; height: 0.9rem; stroke-width: 1.8; }
.booking .step.is-current .step__num { border-color: var(--accent); background: var(--accent); color: var(--accent-contrast); box-shadow: none; }
.booking .step.is-done .step__num { border-color: var(--accent); background: var(--paper); color: var(--accent); }
.booking .step.is-done .step__n { display: none; }
.booking .step.is-done .step__check { display: block; }
/* Last step (and the finished booking): everything before it is filled in */
.booking .steps:has(.step:last-child:is(.is-current, .is-done)) .step.is-done .step__num { background: var(--accent); color: var(--accent-contrast); }
.booking .step__label { font-size: 0.7rem; color: var(--muted); }
.booking .step.is-current .step__label, .booking .step.is-done .step__label { color: var(--foreground); }

/* One screen: serif title, then the step */
.booking__panels { margin-top: 2.25rem; }
.booking .panel__title { margin: 0 0 1.5rem; font: 400 clamp(2.5rem, 2.2rem + 1.6vw, 3rem) / 1.05 var(--font-display); letter-spacing: -0.01em; }
.panel__titlebar { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.panel__titlebar .panel__title { margin: 0; }
.panel__date { margin: 0; font-size: 0.9rem; white-space: nowrap; }

/* Step 1: services */
.service-list { display: grid; gap: 0.7rem; }
.booking .service { display: grid; grid-template-columns: 1.75rem 1fr auto auto; align-items: center; gap: 1rem; width: 100%; padding: 1.15rem 1.1rem 1.15rem 1.25rem; border: 1px solid transparent; border-radius: 1rem; background: color-mix(in srgb, var(--card) 80%, transparent); text-align: left; color: var(--foreground); transition: border-color 0.3s, background-color 0.3s, transform 0.3s var(--ease); }
.booking .service:hover, .booking .service.is-selected { background: var(--card); border-color: color-mix(in srgb, var(--accent) 35%, transparent); }
.booking .service:active { transform: scale(0.99); }
.booking .service__icon { width: 1.6rem; height: 1.6rem; stroke-width: 1.5; }
.booking .service__info { display: grid; gap: 0.2rem; min-width: 0; }
.booking .service__name { font: 400 1rem / 1.25 var(--font-body); }
.booking .service__duration { font-size: 0.75rem; color: var(--muted); }
.booking .service__price { font-size: 0.78rem; white-space: nowrap; }
.booking .service__arrow { width: 1rem; height: 1rem; color: var(--foreground); }
.service--skeleton { height: 4.5rem; border-radius: 1rem; }

/* Step 2: month calendar */
.cal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.cal__month { margin: 0; font-size: 1.05rem; }
.cal__nav { display: flex; gap: 0.5rem; }
.cal__step { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.cal__step:hover:not(:disabled) { background: color-mix(in srgb, var(--foreground) 7%, transparent); }
.cal__step:disabled { opacity: 0.25; cursor: default; }
.cal__dow, .cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 0.4rem; }
.cal__dow { margin-bottom: 0.6rem; text-align: center; font-size: 0.7rem; color: var(--muted); }
.day { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 0.8rem; background: color-mix(in srgb, var(--card) 85%, transparent); font-size: 0.95rem; color: var(--foreground); transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease); }
/* Hover only where there's a real pointer (a tap leaves a "sticky" hover on phones), and never on the picked day:
   :hover:not(:disabled) outranks [aria-pressed], so it used to paint the picked day --card under --accent-contrast text. */
@media (hover: hover) { .day:hover:not(:disabled):not([aria-pressed="true"]) { background: var(--card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent); } }
.day:active:not(:disabled) { transform: scale(0.95); }.day:disabled { background: none; color: color-mix(in srgb, var(--foreground) 24%, transparent); cursor: default; }
.day[data-state="outside"] { color: color-mix(in srgb, var(--foreground) 16%, transparent); }
.day--today:not([aria-pressed="true"]) { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
.day[aria-pressed="true"] { background: var(--accent); color: var(--accent-contrast); }
.day--skeleton { background: color-mix(in srgb, var(--card) 70%, transparent); animation: bk-pulse 1.2s ease-in-out infinite alternate; }
.day--blank { visibility: hidden; }
/* Busy dots: under the number of a free day, and in the legend */
.day { position: relative; }
.day[data-load]::after { content: ""; position: absolute; bottom: 0.38rem; left: 50%; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem; border-radius: 50%; background: var(--load); }
.day[aria-pressed="true"]::after { background: var(--accent-contrast); }
[data-load="low"] { --load: #6f9a74; } [data-load="mid"] { --load: #d09a4a; } [data-load="high"] { --load: #c0624f; }
.cal__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.1rem; margin: 1.1rem 0 0; font-size: 0.7rem; color: var(--muted); }
.cal__legend span { display: inline-flex; align-items: center; gap: 0.4rem; }
.cal__legend span::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--load); }
@keyframes bk-pulse { to { opacity: 0.45; } }

/* Step 3: times */
.booking .time-grid { gap: 0.7rem; }
.booking .time { min-height: 3.4rem; border: 1px solid var(--border); border-radius: 0.85rem; background: var(--card); font-size: 0.95rem; font-variant-numeric: tabular-nums; color: var(--foreground); -webkit-backdrop-filter: none; backdrop-filter: none; transition: background-color 0.25s, color 0.25s, border-color 0.25s, transform 0.25s var(--ease); }
.booking .time:hover:not(:disabled) { border-color: var(--accent); }
.booking .time:active:not(:disabled) { transform: scale(0.97); }
.booking .time:disabled { opacity: 1; background: transparent; border-color: transparent; color: color-mix(in srgb, var(--foreground) 35%, var(--paper)); text-decoration: line-through; }
.booking .time[aria-pressed="true"], .booking .time[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }

/* Continue / confirm: the big pill under each step */
.booking .cta { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); margin-top: 1.75rem; min-height: 3.5rem; justify-content: center; gap: 0.7rem; border-radius: 999px; font-size: 0.95rem; }
.booking .cta:hover:not(:disabled) { filter: brightness(1.15); }
.booking .cta:disabled { opacity: 0.35; cursor: not-allowed; }
.booking .cta .btn__lead { width: 1.2rem; height: 1.2rem; }

/* Extras and the "Cu cine?" picker, above the calendar */
.booking .addons { margin-bottom: 1.5rem; }
.booking .addon { border-color: var(--border); background: color-mix(in srgb, var(--card) 85%, transparent); color: var(--foreground); }
.booking .addon:hover { border-color: var(--foreground); }
.booking .addon[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); }
.booking .model-chip { margin-bottom: 1rem; border-color: var(--border); background: var(--card); }

/* Step 4: what you're booking, as one card with an icon per line */
.booking .confirm { gap: 1.1rem; }
.booking .confirm .panel__title { margin-bottom: 0.4rem; }
.booking .confirm__summary { display: grid; gap: 1.1rem; padding: 1.6rem 1.4rem; border: 0; border-radius: 1.1rem; background: var(--card); }
.booking .confirm__row { display: flex; align-items: center; gap: 1.1rem; padding: 0; border: 0; }
.booking .confirm__row > .icon { width: 1.6rem; height: 1.6rem; color: var(--foreground); stroke-width: 1.3; }
.booking .confirm__value { flex: 1; display: grid; gap: 0.2rem; min-width: 0; font-family: var(--font-body); font-size: 0.95rem; font-weight: 400; line-height: 1.3; text-align: left; }
.booking .confirm__value small { font-size: 0.75rem; color: var(--muted); }
.booking .confirm__price { font-size: 0.82rem; white-space: nowrap; align-self: start; }
.booking .confirm__avatar { display: grid; place-items: center; flex: none; width: 3rem; height: 3rem; overflow: hidden; border-radius: 50%; background: color-mix(in srgb, var(--foreground) 8%, transparent); }
.booking .confirm__avatar { font: 500 1.3rem / 1 var(--font-display); }
.booking .confirm__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Salon card (name + address; the hours are in the footer) */
.salon-card { display: grid; gap: 0.55rem; margin: 0.5rem 0.4rem 0.4rem; font-size: 0.78rem; line-height: 1.5; }
.salon-card__name { margin: 0; font-size: 0.85rem; }
.salon-card__row { display: flex; gap: 0.6rem; align-items: center; margin: 0; }
.salon-card__row .icon { flex: none; width: 1rem; height: 1rem; }
.salon-card__row a { text-decoration: underline; text-underline-offset: 3px; }

/* The form fields: same soft cards */
.booking .field label { color: var(--muted); }
.booking .field input, .booking .field textarea { border: 1px solid transparent; border-radius: 0.85rem; background: var(--card); color: var(--foreground); }
.booking .field input:focus, .booking .field textarea:focus { border-color: var(--accent); }
.booking .confirm .cta { margin-top: 0.4rem; }
.booking .confirm__note a, .booking .link-btn { color: var(--foreground); }
.booking .confirm-done__icon { color: var(--accent); }
.remember { margin: -0.25rem 0 0; font-size: var(--fs-label); color: var(--muted); }
.field__optional { opacity: 0.7; }

@media (min-width: 64em) { .booking { padding-top: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .day--skeleton { animation: none; } }

/* "Programarea ta" (/programare/): the booking page's header and cards around it (public/programare/index.html). These
   replace that page's own rose tints and white cards, which went white-on-white on a dark palette. */
.manage { padding: 0; }
.manage__inner { margin-top: 2.25rem; }
.manage h1 { font: 400 clamp(2.5rem, 2.2rem + 1.6vw, 3rem) / 1.05 var(--font-display); letter-spacing: -0.01em; }
.manage .eyebrow { color: var(--muted); }
.manage__status { background: var(--card); color: var(--foreground); }
.manage__status--pending { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--foreground); }
.manage__status--confirmed { background: color-mix(in srgb, #6f9a74 24%, var(--card)); color: var(--foreground); }
.manage__box { border-radius: 1rem; background: var(--card); color: var(--foreground); }
.manage__box--warn { background: color-mix(in srgb, var(--accent) 12%, var(--card)); }
.manage__box a, .manage__policy a { color: var(--foreground); }
.manage .confirm__summary { margin: 0; }
.manage .confirm__row dd { font: 400 0.95rem / 1.3 var(--font-body); }
.manage .btn--dark, .manage .btn--dark:hover { --btn-bg: var(--accent); --btn-fg: var(--accent-contrast); }
.manage .btn--outline:hover { --btn-bd: var(--border); }
@media (hover: hover) {
  .manage .btn--dark:hover { filter: brightness(1.15); }
  .manage .btn--outline:hover { --btn-bd: var(--foreground); }
}
.manage__skeleton { border-radius: 1.1rem; background: var(--card); animation: bk-pulse 1.2s ease-in-out infinite alternate; }
@media (prefers-reduced-motion: reduce) { .manage__skeleton { animation: none; } }

/* Footer: slim, under the booking flow. One compact block (hours, address, socials), then one small legal line with the
   ANPC badges. Everything comes from salon.json through the shell. The shell gives it .theme-dark (espresso), so the
   owner's look is mapped back in: --ink / --ink-muted / --line aren't touched by .theme-dark, and her accent is carried
   in as --bk-accent / --bk-on. Text is --ink / --ink-muted on --card, the pair her palette is built for. */
:root { --bk-accent: var(--accent); --bk-on: var(--accent-contrast); }
.footer.theme-dark { --background: var(--card); --surface: var(--paper); --surface-2: var(--paper); --foreground: var(--ink); --muted: var(--ink-muted); --border: var(--line); --accent: var(--bk-accent); --accent-contrast: var(--bk-on); background: var(--card); color: var(--ink); }
.footer { padding: 1.5rem 0 calc(1.25rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: 0.8rem; }
/* Demos: room for the fixed demo banner, so the legal line isn't under it */
body:has(.demo-banner) .footer { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
.footer__inner { display: grid; gap: 1rem; width: min(100% - 2.5rem, 26rem); max-width: none; margin-inline: auto; padding: 0; }

/* Hours: a compact day / hours list, the address under it */
.footer__hours { font-size: 0.8rem; }
.footer__heading { margin: 0 0 0.5rem; font: 500 0.65rem / 1 var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); }
.footer__hours dl { gap: 0.15rem; max-width: none; }
.footer__hours dl > div { gap: 1rem; }
.footer__hours dt { color: var(--ink-muted); }
.footer__hours dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.footer__address { margin: 0.6rem 0 0; line-height: 1.45; color: var(--ink); }

/* Socials + contact: one row of small icon links, gone when there are none */
.footer__links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; margin: 0; padding: 0; list-style: none; }
.footer__links:not(:has(li)) { display: none; }
.footer__links a { gap: 0.45rem; min-height: 2.75rem; font-size: 0.8rem; color: var(--ink); }
.footer__links .icon { width: 1rem; height: 1rem; color: var(--ink); }
.footer__links a:hover { color: var(--ink); }
@media (hover: hover) { .footer__links a:hover { text-decoration: underline; text-underline-offset: 3px; } }

/* Legal line: the ANPC badges (required by law), small, then the policies */
.footer__anpc { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0.9rem 0 0; border-top: 1px solid var(--line); list-style: none; }
.footer__anpc img { width: 7.5rem; height: auto; }
.footer__legal { margin: -0.4rem 0 0; font-size: 0.7rem; line-height: 1.7; color: var(--ink-muted); }
.footer__legal a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 35%, transparent); text-underline-offset: 3px; }
@media (hover: hover) { .footer__legal a:hover { text-decoration-color: currentColor; } }

@media (min-width: 48em) {
  .footer__inner { width: min(100% - 4rem, 54rem); grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2.5rem; align-items: start; }
  .footer__hours { grid-column: 1; max-width: 20rem; }
  .footer__links { grid-column: 2; }
  .footer__anpc, .footer__legal { grid-column: 1 / -1; }
}