/* 12D Salon demo — self-contained stylesheet, independent of /assets/site.css
   and every other /demo/*/style.css. critical.css (inlined per page) covers the
   above-the-fold banner/header/hero shape so first paint never waits on this.

   Every color pairing below was computed and verified against WCAG AA (4.5:1
   for text) before this file was written — the discipline established since
   real estate/accounting/physio/doctor/school/lawyer, all of which hit
   accessibility 100 on their first Lighthouse measurement this way. */

/* ---------- self-hosted fonts (Latin subset) ---------- */
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/demo/salon/fonts/playfairdisplay-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/demo/salon/fonts/playfairdisplay-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('/demo/salon/fonts/urbanist-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- fallback metric overrides, so Playfair Display/Urbanist don't
   visibly reflow the page when they finish loading on an uncached visit.
   Method: render a fixed sample directly in the browser, in the real web font
   at the weight it's actually used at, and in each fallback at the same
   weight with NO overrides (so normal OS weight matching resolves a true
   Bold face where one exists), then size-adjust = webFontWidth /
   fallbackWidth, with ascent/descent-override recomputed from the web font's
   own static ascender/descender (assumed weight-invariant) divided by that
   size-adjust. Georgia and Arial are the Windows/Mac fallbacks; Android ships
   neither, so Noto Serif and Roboto (both preinstalled on Android) back them
   up — measured the same way, except Noto Serif/Roboto aren't installed on
   this Windows dev machine, so their own TTFs were loaded as temporary web
   fonts (not local()) purely to get the width ratio; the shipped @font-face
   below still uses local('Noto Serif ...')/local('Roboto'), since on a real
   Android device those names resolve to the OS's own installed copy, same as
   Georgia/Arial do on Windows/Mac.
   Playfair Display vs Georgia:    size-adjust 89.15%, ascent-override 121.36%, descent-override 28.15%
   Playfair Display vs Noto Serif: size-adjust 90.50%, ascent-override 119.55%, descent-override 27.73%
   Urbanist vs Arial:              size-adjust 98.79%, ascent-override 96.16%,  descent-override 25.31%
   Urbanist vs Roboto:             size-adjust 98.84%, ascent-override 96.11%,  descent-override 25.29% */
@font-face {
  font-family: 'Playfair Fallback Georgia';
  font-weight: 700;
  src: local('Georgia Bold'), local('Georgia');
  size-adjust: 89.15%;
  ascent-override: 121.36%;
  descent-override: 28.15%;
}
@font-face {
  font-family: 'Playfair Fallback NotoSerif';
  font-weight: 700;
  src: local('Noto Serif Bold'), local('Noto Serif');
  size-adjust: 90.50%;
  ascent-override: 119.55%;
  descent-override: 27.73%;
}
@font-face {
  font-family: 'Urbanist Fallback Arial';
  src: local('Arial');
  size-adjust: 98.79%;
  ascent-override: 96.16%;
  descent-override: 25.31%;
}
@font-face {
  font-family: 'Urbanist Fallback Roboto';
  src: local('Roboto');
  size-adjust: 98.84%;
  ascent-override: 96.11%;
  descent-override: 25.29%;
}
/* The two blocks above cover body text at 400 — .eyebrow and .btn actually
   render Urbanist at 600 (within the declared 400-600 range, so no range
   fix needed) but had no calibration of their own until now, same class of
   bug fixed for wellness's Work Sans eyebrow. Also: critical.css's own
   .eyebrow/.btn/.salon-brand rules were pointing straight at the generic
   family instead of these fallback names at all — fixed alongside this
   (salon-brand's own weight, 700, already had a calibrated Playfair face;
   it just wasn't being referenced).
   Urbanist@600 vs Arial:  size-adjust 93.37%,  ascent-override 101.75%, descent-override 26.78%
   Urbanist@600 vs Roboto: size-adjust 100.88%, ascent-override 94.17%,  descent-override 24.78% */
@font-face {
  font-family: 'Urbanist Fallback Arial';
  font-weight: 600;
  src: local('Arial Bold'), local('Arial');
  size-adjust: 93.37%;
  ascent-override: 101.75%;
  descent-override: 26.78%;
}
@font-face {
  font-family: 'Urbanist Fallback Roboto';
  font-weight: 600;
  src: local('Roboto SemiBold'), local('Roboto Bold'), local('Roboto');
  size-adjust: 100.88%;
  ascent-override: 94.17%;
  descent-override: 24.78%;
}

/* ---------- tokens ---------- */
:root {
  --ink: #241F1D;
  --ink-soft: #6B615D;
  --paper: #FDF8F6;
  --blush: #F3DCD6;
  --rose: #A8485A;
  --rose-dark: #8E3A49;
  --brass: #B08D57;
  --brass-text: #8C6B3C;
  --line: #E8D9D2;
  --font-display: 'Playfair Display', 'Playfair Fallback Georgia', 'Playfair Fallback NotoSerif', Georgia, 'Noto Serif', serif;
  --font-body: 'Urbanist', 'Urbanist Fallback Arial', 'Urbanist Fallback Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 64px);
  --nav-breakpoint: 900px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--rose-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
/* Links inline within a paragraph must not rely on colour alone to be
   distinguishable from surrounding text (WCAG 1.4.1) — nav/footer/button/
   card-title links are already distinct as standalone UI elements, so this
   is scoped to prose contexts only. */
p a, .lede a, .card__meta a, .faq-item p a {
  text-decoration: underline;
  text-underline-offset: 2px;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.2; margin: 0 0 0.45em; color: var(--ink); }
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.15rem); }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.3rem); }
p { margin: 0 0 1em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
section { padding: clamp(52px, 8vw, 104px) 0; }
.eyebrow { font-family: var(--font-body); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.74rem; color: var(--rose-dark); margin: 0 0 0.9em; }
.section-head { max-width: 640px; margin: 0 0 3em; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.lede { font-size: 1.08rem; color: var(--ink-soft); }

/* ---------- focus & skip link ---------- */
:focus-visible { outline: 3px solid var(--rose-dark); outline-offset: 2px; border-radius: 2px; }
.skip-link {
  position: absolute; left: -999px; top: auto;
  background: var(--ink); color: #fff;
  padding: 10px 18px; z-index: 300; font-weight: 600;
}
.skip-link:focus { left: 0; top: 0; }

/* ---------- demo banner ---------- */
.demo-banner {
  background: var(--ink); color: #fff;
  font-size: 0.86rem; padding: 10px var(--gutter);
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: center;
  text-align: center; position: relative; z-index: 60;
}
.demo-banner p { margin: 0; font-weight: 400; }
.demo-banner a { color: #fff; text-decoration: underline; font-weight: 500; }.demo-region-select{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.5);border-radius:4px;padding:4px 8px;font-size:.86rem;font-family:inherit;min-height:24px;cursor:pointer}.demo-region-select:focus-visible{outline:2px solid #fff;outline-offset:2px}.demo-region-select option{color:var(--ink);background:var(--paper)}.footer-region-note{margin:0 0 8px;font-size:.86rem;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demo-banner__cta {
  background: var(--rose); color: #fff;
  text-decoration: none; padding: 0.35rem 0.8rem; border-radius: 999px;
  font-weight: 500; white-space: nowrap; min-height: 44px;
  display: inline-flex; align-items: center;
}
.demo-banner__cta:hover { background: #7C3C48; }


.demo-banner__book { display: inline-flex; align-items: center; min-height: 24px; }
.demo-banner__link-short { display: none; }
@media (max-width: 1023px) {
  .demo-banner__link-full { display: none; }
  .demo-banner__link-short { display: inline; }
}/* ---------- header / nav ---------- */
.salon-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 248, 246, 0.95); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--line);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
  padding: 20px 0;
}
.salon-header.is-scrolled { padding: 10px 0; box-shadow: 0 8px 24px rgba(36, 31, 29, 0.1); }
.salon-header__wrap {
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; gap: 24px;
}
.salon-brand {
  font-family: var(--font-display); font-weight: 700; font-size: 1.32rem; color: var(--ink);
  margin-right: auto; white-space: nowrap;
}
.salon-brand span { color: var(--rose-dark); }
.salon-nav__links {
  list-style: none; display: flex; gap: 24px; margin: 0; padding: 0; align-items: center;
}
.salon-nav__links a { color: var(--ink); font-weight: 500; font-size: 0.91rem; white-space: nowrap; }
.salon-nav__links a:hover { color: var(--rose-dark); text-decoration: none; }
.salon-header__actions { display: flex; align-items: center; gap: 14px; }
.salon-nav__toggle {
  display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; font-size: 1.25rem; line-height: 1;
  background: transparent; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; color: var(--ink);
}
@media (max-width: 899px) {
  .salon-nav__toggle { display: flex; }
  .salon-nav__links {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: flex-start; gap: 2px;
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 10px var(--gutter) 20px;
  }
  .salon-nav__links.is-open { display: flex; }
  .salon-nav__links li { width: 100%; }
  .salon-nav__links a { display: block; padding: 11px 4px; width: 100%; }
}
@media (min-width: 900px) {
  .salon-nav__links { display: flex !important; position: static; }
}
@media (max-width: 479px) {
  .salon-header__wrap .salon-cta-full { display: none; }
  .salon-brand { font-size: 1.08rem; }
  .salon-header__wrap { gap: 10px; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.92rem;
  line-height: inherit; padding: 14px 28px; border-radius: 4px; border: 1px solid transparent; cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn--primary { background: var(--ink); color: #fff; }
.btn--primary:hover { background: #38302D; }
.btn--rose { background: var(--rose); color: #fff; }
.btn--rose:hover { background: #7C3C48; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--rose-dark); }
.btn--small { padding: 10px 20px; font-size: 0.84rem; line-height: normal; }
.btn--whatsapp { background: #2E7D4F; color: #fff; }
.btn--whatsapp:hover { background: #255F3D; }

/* ---------- hero (asymmetric, full-bleed media) ---------- */
.hero { padding: 0; position: relative; }
.hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.hero__media { border-radius: 4px; overflow: hidden; }
.hero__media img { width: 100%; height: auto; }
.hero__media picture img { aspect-ratio: 1088 / 1360; }
@media (min-width: 641px) { .hero__media picture img { aspect-ratio: 2400 / 1344; } }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.8em; }
.hero__meta { margin-top: 1.6em; display: flex; gap: 20px; flex-wrap: wrap; font-size: 0.88rem; color: var(--ink-soft); }
@media (max-width: 899px) {
  .hero__wrap { grid-template-columns: 1fr; }
  .hero__media { order: -1; }
}

/* ---------- service/about/price-list/hygiene top image — hero-grade ---------- */
.page-hero { padding: 0; }
.page-hero__wrap {
  max-width: var(--max); margin: 0 auto; padding: clamp(28px, 5vw, 56px) var(--gutter);
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center;
}
.page-hero__media { border-radius: 4px; overflow: hidden; background: var(--blush); }
.page-hero__media img { width: 100%; height: auto; display: block; }
@media (max-width: 899px) { .page-hero__wrap { grid-template-columns: 1fr; } .page-hero__media { order: -1; } }

/* ---------- cards / grids ---------- */
.grid { display: grid; gap: 26px; }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 1023px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--line);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow 0.2s ease;
}
.card:hover { box-shadow: 0 16px 36px rgba(36, 31, 29, 0.1); }
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--blush); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 22px 24px 26px; flex: 1; display: flex; flex-direction: column; }
.card__body h2, .card__body h3 { font-size: 1.18rem; font-weight: 700; margin: 0 0 0.3em; }
.card__price { font-weight: 600; color: var(--rose-dark); margin: 0.2em 0 0.6em; font-family: var(--font-body); }
.card__meta { font-size: 0.84rem; color: var(--ink-soft); margin: 0 0 0.6em; }

.section--blush { background: var(--blush); }
.section--ink { background: var(--ink); color: #fff; }
.section--ink h2, .section--ink .eyebrow { color: #fff; }
.section--ink .lede { color: #D8D2CF; }

/* ---------- team / lead stylist profile ---------- */
.profile-card { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0.6em 0; }
.profile-card__tag { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.03em; color: var(--rose-dark); background: var(--blush); padding: 4px 12px; border-radius: 20px; }

/* ---------- reviews ---------- */
.review-card { background: #fff; border: 1px solid var(--line); padding: 26px 24px; }
.review-card blockquote { font-family: var(--font-display); font-size: 1.22rem; margin: 0 0 0.6em; font-weight: 400; color: var(--ink); }
.review-card__label { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brass-text); margin: 0 0 0.6em; }
.review-card cite { font-size: 0.86rem; color: var(--ink-soft); font-style: normal; }

/* ---------- FAQ ---------- */
.faq-item { border-bottom: 1px solid var(--line); padding: 20px 0; }
.faq-item summary { font-weight: 600; cursor: pointer; font-size: 1.0rem; color: var(--ink); }
.faq-item p { margin: 0.8em 0 0; color: var(--ink-soft); }

/* ---------- price list ---------- */
.price-group { margin: 0 0 3em; }
.price-group:last-child { margin-bottom: 0; }
.price-group h2 { border-bottom: 2px solid var(--brass); padding-bottom: 0.3em; margin-bottom: 0.7em; }
.price-item {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.price-item:last-child { border-bottom: none; }
.price-item__name { font-weight: 600; flex: 1; min-width: 0; }
.price-item__duration { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; }
.price-item__price { font-weight: 700; color: var(--rose-dark); white-space: nowrap; font-family: var(--font-body); }
.price-note { font-size: 0.86rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 20px; margin-top: 12px; }

/* ---------- contact form ---------- */
.contact-form { display: grid; gap: 16px; max-width: 520px; }
.contact-form label { display: block; font-weight: 600; font-size: 0.88rem; margin-bottom: 6px; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 4px;
  font-family: var(--font-body); font-size: 0.95rem; background: #fff; color: var(--ink);
}
.contact-form textarea { min-height: 110px; resize: vertical; }
.contact-form__note { font-size: 0.84rem; color: var(--ink-soft); }

/* ---------- gift voucher wizard (in-page, not a modal) ---------- */
.voucher-wizard {
  background: #fff; border: 1px solid var(--line); max-width: 480px;
  padding: clamp(24px, 4vw, 34px); border-top: 4px solid var(--brass);
}
.voucher-step__title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-dark); margin-bottom: 0.7em; }
.voucher-amounts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 18px 0; }
.voucher-amount {
  padding: 13px 16px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 0.98rem; color: var(--ink);
}
.voucher-amount:hover { border-color: var(--rose-dark); }
.voucher-amount[aria-pressed="true"] { border-color: var(--rose-dark); background: var(--blush); }
.voucher-nav { display: flex; justify-content: space-between; margin-top: 20px; gap: 10px; }
.voucher-card {
  background: var(--ink); color: #fff; padding: 30px 26px; text-align: center; margin: 18px 0;
  border: 1px solid var(--brass);
}
.voucher-card__brand { font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.02em; }
.voucher-card__amount { font-family: var(--font-display); font-size: clamp(2rem, 5vw, 2.8rem); margin: 0.25em 0; color: var(--brass); font-weight: 700; }
.voucher-card__to { font-size: 0.92rem; margin: 0.4em 0; }
.voucher-card__message { font-size: 0.86rem; font-style: italic; color: #D8D2CF; margin: 0.6em 0 0; }
.voucher-preview-note { font-size: 0.86rem; color: var(--ink-soft); margin-top: 1em; }

/* ---------- footer ---------- */
.salon-footer { background: var(--ink); color: #D8D2CF; padding: 56px 0 30px; }
.salon-footer__wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 36px; }
.salon-footer a { color: #D8D2CF; }
.salon-footer__brand { font-family: var(--font-display); font-weight: 700; font-size: 1.18rem; color: #fff; margin-bottom: 0.4em; }
.salon-footer__heading { color: #fff; font-family: var(--font-body); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 0.9em; }
.salon-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.salon-footer__legal { max-width: var(--max); margin: 38px auto 0; padding: 20px var(--gutter) 0; border-top: 1px solid rgba(255,255,255,0.14); font-size: 0.76rem; color: #A39B96; }
@media (max-width: 860px) { .salon-footer__wrap { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .salon-footer__wrap { grid-template-columns: 1fr; } }

/* ---------- booking modal (built by script.js) ---------- */
.booking-overlay {
  position: fixed; inset: 0; background: rgba(36, 31, 29, 0.6); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.booking-modal {
  background: var(--paper); max-width: 540px; width: 100%;
  max-height: 88vh; overflow-y: auto; padding: 32px clamp(20px, 4vw, 38px); position: relative;
  border-top: 3px solid var(--rose);
}
.booking-modal__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
  border: 1px solid var(--line); background: #fff; font-size: 1.1rem; cursor: pointer; line-height: 1;
}
.booking-step__title { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rose-dark); margin-bottom: 0.7em; }
.booking-options { display: grid; gap: 10px; margin-top: 18px; }
.booking-option {
  text-align: left; padding: 13px 16px; border: 1px solid var(--line);
  background: #fff; cursor: pointer; font-family: var(--font-body); font-size: 0.94rem; color: var(--ink);
}
.booking-option:hover { border-color: var(--rose-dark); }
.booking-option[aria-pressed="true"] { border-color: var(--rose-dark); background: var(--blush); font-weight: 600; }
.booking-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 18px; }
.booking-date {
  padding: 11px 6px; border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-family: var(--font-body); font-size: 0.8rem; text-align: center; line-height: 1.3;
}
.booking-date:hover { border-color: var(--rose-dark); }
.booking-date[aria-pressed="true"] { border-color: var(--rose-dark); background: var(--blush); font-weight: 600; }
.booking-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; margin-top: 18px; }
.booking-nav { display: flex; justify-content: space-between; margin-top: 26px; gap: 10px; }
.booking-final { text-align: center; }
.booking-final p { font-size: 1rem; }
.booking-final__actions { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.booking-final__cal { margin-top: 12px; font-size: 0.88rem; }
.voucher-final__cal { margin-top: 12px; font-size: 0.88rem; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }