/*
 * Just Now — booking comfort and polish layer (WP6 UX), round 3, 2026-10-17.
 *
 * Load AFTER assets/css/styles.css, on the booking page (body.page-book) and the
 * request-received page (body.page-received) only. See ux/PATCHES.md, patch H1.
 *
 * Rules for this file (enforced by ux/check-booking-ux.mjs):
 *  - same brand: only the styles.css colour tokens, fonts and Lucide icon shapes (CSS masks reuse
 *    the exact Lucide paths from partials/icons.php); no new libraries, images or fonts;
 *  - logical properties only (inline/block), so Arabic RTL mirrors without overrides;
 *  - rem/em sizing so browser text zoom scales targets and text; min-* instead of fixed heights;
 *  - touch targets >= 2.75rem (44px) for every option, button, date and time choice;
 *    form controls >= 16px text so iOS does not zoom on focus;
 *  - motion only when the visitor has not asked to reduce it; nothing that shifts the layout;
 *  - no !important.
 * Breakpoints are the px values styles.css uses (420 / 639-640 / 999-1000).
 */

.page-book,
.page-received {
    --tap: 2.75rem;      /* 44px minimum touch target */
    --tap-lg: 3rem;      /* 48px for fields and primary actions */
    --focus-ring: 3px solid var(--blue); /* brand blue: 4.9:1 on white; the site-wide sky ring is 2.5:1 */
    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.5rem;
    --sp-6: 2rem;
    --ease: cubic-bezier(.2, .7, .2, 1);
    --dur: .2s;
    --lift: 0 .375rem 1.25rem color-mix(in srgb, var(--ink) 9%, transparent);
    /* Lucide "check" and "triangle-alert" (partials/icons.php), used as masks so colour stays a token. */
    --mask-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
    --mask-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
}

/* ---------- Page frame ---------- */
.page-book .page-hero-compact { padding-block: var(--sp-5) var(--sp-4); }
.page-book .page-hero-compact .hero-trust { gap: var(--sp-2) var(--sp-4); margin-block-start: var(--sp-3); }
.page-book .booking-section { padding-block: var(--sp-5) var(--sp-6); }
.booking-form { box-shadow: var(--lift); }
@media (max-width: 639px) {
    .page-book .page-hero-compact .lead { font-size: 1rem; margin-block-end: 0; }
    .page-book .page-hero-compact .hero-trust { font-size: .875rem; }
}
@media (max-width: 420px) {
    .booking-form { padding-block: var(--sp-5); padding-inline: var(--sp-4); border-radius: var(--radius); }
}

/* ---------- Focus: one clearly visible ring for every booking control ---------- */
.booking-form :focus-visible,
.booking-aside :focus-visible,
.page-received main :focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
.booking-form .choice-card:has(input:focus-visible),
.booking-form .pkg-card:has(input:focus-visible),
.booking-form .check-row:has(input:focus-visible) {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
.booking-form .pill input:focus-visible + span {
    outline: var(--focus-ring);
    outline-offset: 2px;
}
.booking-form .field input:focus-visible,
.booking-form .field select:focus-visible,
.booking-form .field textarea:focus-visible {
    border-color: var(--blue);
    outline: var(--focus-ring);
    outline-offset: 1px;
}

/* ---------- Step indicator ---------- */
.booking-form .stepper {
    /* One equal column per step, whether the page has five or six (INCLUDED_STEP, 2026-10-23). */
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: .375rem;
    margin-block-end: var(--sp-3);
}
.booking-form .stepper li { font-size: .8rem; line-height: 1.3; }
html[lang="ar"] .booking-form .stepper li { font-size: .85rem; }
.booking-form .stepper li::before {
    inset-block-start: calc(1rem - 1.5px);
    inset-inline-start: calc(-50% + 1rem + 4px);
    inset-inline-end: calc(50% + 1rem + 4px);
    transition: background-color var(--dur) var(--ease);
}
.booking-form .stepper .dot {
    inline-size: 2rem;
    block-size: 2rem;
    max-inline-size: 100%;
    transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-form .stepper li.current .dot { box-shadow: 0 0 0 .3125rem var(--blue-tint); }
.booking-form .stepper li.current .lbl { font-weight: 800; }
/* Completed steps show a check instead of the number; the number stays in the accessible name. */
.booking-form .stepper li.done .dot { color: transparent; }
.booking-form .stepper li.done .dot::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 1rem;
    block-size: 1rem;
    background: var(--ink);
    -webkit-mask: var(--mask-check) center / contain no-repeat;
    mask: var(--mask-check) center / contain no-repeat;
}
/* Each step is a real button (patch B1): keyboard reachable, 44px tall, full column wide. */
.booking-form .step-btn {
    display: grid;
    justify-items: center;
    align-content: start;
    gap: .25rem;
    inline-size: 100%;
    min-block-size: var(--tap);
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: inherit;
    font: inherit;
    text-align: center;
    cursor: default;
}
.booking-form .stepper li.done .step-btn { cursor: pointer; }
.booking-form .stepper li.done .step-btn:hover .dot { box-shadow: 0 0 0 .25rem var(--green-tint); }
.booking-form .stepper li.done .step-btn:hover .lbl { color: var(--blue); }
.booking-form .lbl { overflow-wrap: anywhere; }
@media (max-width: 420px) {
    /* styles.css hides the labels here with display:none, which also removes them from the
       button's accessible name. Keep them for screen readers; the visible step name moves into
       the "Step 2 of 5 · Area" line (patch J2). */
    .booking-form .stepper .lbl {
        display: block;
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}
.booking-form .step-count {
    display: table;
    margin-block: 0 var(--sp-5);
    margin-inline: auto;
    padding-block: .25rem;
    padding-inline: var(--sp-3);
    border-radius: 999px;
    background: var(--bg-soft);
    font-size: .875rem;
    font-weight: 700;
    color: var(--ink);
}

/* ---------- Smoother step change (only without reduced motion) ---------- */
@keyframes jnStepIn {
    from { opacity: 0; transform: translateY(.5rem); }
    to { opacity: 1; transform: none; }
}
@keyframes jnPop {
    0% { transform: scale(.6); }
    70% { transform: scale(1.08); }
    100% { transform: scale(1); }
}
@keyframes jnBarIn {
    from { transform: translateY(100%); }
    to { transform: none; }
}
@keyframes jnSpin {
    to { transform: rotate(360deg); }
}
.booking-form .form-step.active { animation: jnStepIn .32s var(--ease) both; }

/* ---------- Step headings with their icon (patches B2–B6) ---------- */
.booking-form .step-title {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-block-end: var(--sp-5);
    line-height: 1.35;
    scroll-margin-block-start: calc(var(--header-h) + 1.5rem);
}
.booking-form .step-title:focus-visible { outline-offset: .375rem; }
.booking-form .step-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: .875rem;
    background: var(--blue-tint);
    color: var(--blue);
}
.booking-form .step-icon .i { inline-size: 1.5rem; block-size: 1.5rem; }
.booking-form h3 { margin-block: var(--sp-5) var(--sp-3); line-height: 1.35; }
.booking-form .summary-box h3 { margin-block: 0 var(--sp-2); }
.booking-form .sub-title,
.summary-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}
.booking-form .sub-title .i,
.summary-title .i { color: var(--blue); }

/* ---------- Option cards (service, furnishing, time): clear selected state ---------- */
.booking-form .choice-grid { gap: var(--sp-3); }
.booking-form .choice-card {
    gap: .25rem;
    min-block-size: var(--tap-lg);
    padding: var(--sp-4);
    padding-inline-end: 2.75rem; /* keeps text clear of the check badge */
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-form .choice-card:hover { box-shadow: var(--lift); }
/* Empty selection circle on every card; styles.css fills it green with a check once chosen. */
.booking-form .choice-card::after {
    content: "";
    position: absolute;
    inset-block-start: .75rem;
    inset-inline-end: .75rem;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    box-sizing: border-box;
    border: 2px solid var(--line);
    border-radius: 50%;
    background: var(--bg);
}
.booking-form .choice-card:has(input:checked) { box-shadow: 0 0 0 1px var(--blue), var(--lift); }
.booking-form .choice-card:has(input:checked)::after {
    inset-block-start: .75rem;
    inset-inline-end: .75rem;
    inline-size: 1.375rem;
    block-size: 1.375rem;
    border-color: var(--green);
    background-size: .875rem;
    animation: jnPop .26s var(--ease);
}
.booking-form .slot-choice.closed::after { border-style: dashed; }
.booking-form .choice-card-row { gap: .875rem; }
.booking-form .choice-icon {
    flex: none;
    inline-size: 2.625rem;
    block-size: 2.625rem;
    transition: background-color var(--dur) var(--ease);
}
.booking-form .choice-card:has(input:checked) .choice-icon { background: var(--bg); }
.booking-form .choice-title { line-height: 1.35; overflow-wrap: anywhere; }
.booking-form .choice-sub { font-size: .875rem; line-height: 1.45; }
html[lang="ar"] .booking-form .choice-sub { font-size: .9rem; }
.booking-form .slot-choice .choice-sub bdi { font-size: .9375rem; font-weight: 700; color: var(--ink); }
.booking-form .slot-closed { font-size: .875rem; line-height: 1.4; }
@media (max-width: 639px) {
    /* One column on phones: put the icon beside the text (as the furnished/empty cards already
       do) so the three service cards and three time cards need about half the scrolling. */
    .booking-form .choice-grid.cols-3 .choice-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: center;
        column-gap: .875rem;
        row-gap: .125rem;
    }
    .booking-form .choice-grid.cols-3 .choice-card > .choice-icon { grid-row: 1 / span 3; }
    .booking-form .choice-grid.cols-3 .choice-card > span:not(.choice-icon) { grid-column: 2; }
}

/* ---------- Pills (bedrooms, emirate) ---------- */
.booking-form .pill-grid { gap: .625rem; }
.booking-form .pill span {
    min-block-size: var(--tap);
    padding-block: .5rem;
    padding-inline: 1.125rem;
    line-height: 1.3;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-form .pill:hover span { box-shadow: var(--lift); }
.booking-form .pill input:checked + span { box-shadow: var(--lift); }

/* ---------- "What's included?" toggle, add-on and terms rows ---------- */
.booking-form .scope-box summary { min-block-size: var(--tap); }
.booking-form .check-row {
    gap: .75rem;
    min-block-size: var(--tap-lg);
    padding-block: .875rem;
    padding-inline: var(--sp-4);
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.booking-form .check-row input { inline-size: 1.375rem; block-size: 1.375rem; margin-block-start: .125rem; }
.booking-form .check-row small { font-size: .875rem; line-height: 1.45; }
.booking-form .check-row a { overflow-wrap: anywhere; }

/* ---------- Pieces (quantity steppers) ---------- */
.booking-form .qty-list { gap: .625rem; }
.booking-form .qty-row { padding-block: .75rem; padding-inline: .875rem; }
.booking-form .qty-row label { min-inline-size: 0; overflow-wrap: anywhere; }
.booking-form .qty-row small { font-size: .875rem; line-height: 1.4; }
.booking-form .qty-ctrl { gap: .5rem; }
.booking-form .qty-btn { inline-size: var(--tap); block-size: var(--tap); }
.booking-form .qty-ctrl input {
    inline-size: 3.5rem;
    block-size: var(--tap);
    font-size: max(16px, 1rem);
}
@media (max-width: 420px) {
    .booking-form .qty-row { flex-wrap: wrap; align-items: flex-start; }
    .booking-form .qty-ctrl { margin-inline-start: auto; }
}

/* ---------- Fields ---------- */
.booking-form .field { margin-block-start: 1.125rem; }
.booking-form .field label { margin-block-end: .5rem; line-height: 1.4; }
.booking-form .field input,
.booking-form .field select,
.booking-form .field textarea {
    min-block-size: var(--tap-lg);
    font-size: max(16px, 1rem);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-form .field textarea { min-block-size: 6rem; }
/* iOS Safari: keep the empty date box full height and the chosen date aligned with other fields. */
.booking-form .field input[type="date"] {
    display: block;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1.4;
}
.booking-form .field input[type="date"]::-webkit-date-and-time-value {
    min-block-size: 1.4em;
    text-align: start;
}
.booking-form .hint { font-size: .875rem; line-height: 1.5; }
.booking-form .note { font-size: .9375rem; line-height: 1.55; }

/* ---------- Quick date choice (patch J6 builds these buttons; the date field stays the value sent) ---------- */
.booking-form .date-chips {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr));
    gap: var(--sp-2);
    margin-block-start: var(--sp-3);
}
.booking-form .date-chip {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .125rem;
    min-block-size: 3.5rem;
    padding-block: .375rem;
    padding-inline: .25rem;
    border: 2px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink);
    font: inherit;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-form .date-chip:hover { border-color: var(--sky); box-shadow: var(--lift); }
.booking-form .date-chip-wd { font-size: .8125rem; font-weight: 600; color: var(--muted); }
.booking-form .date-chip-dm { font-size: .9375rem; font-weight: 800; }
.booking-form .date-chip[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: var(--bg); box-shadow: var(--lift); }
.booking-form .date-chip[aria-pressed="true"] .date-chip-wd { color: inherit; }

/* ---------- Clearer errors ---------- */
.booking-form .has-error.field input,
.booking-form .has-error.field select,
.booking-form .has-error .field input { box-shadow: 0 0 0 .1875rem var(--error-tint); }
.booking-form .choice-grid.has-error .choice-card,
.booking-form .pkg-list.has-error .pkg-card,
.booking-form .qty-list.has-error .qty-row,
.booking-form .check-row.has-error { box-shadow: 0 0 0 1px var(--error); }
.booking-form .pill-grid.has-error .pill span { box-shadow: 0 0 0 1px var(--error); }
.booking-form .need-hint {
    display: flex;
    align-items: flex-start;
    gap: .625rem;
    padding-block: .875rem;
    padding-inline: var(--sp-4);
    border-inline-start: .25rem solid var(--error);
    line-height: 1.5;
}
.booking-form .need-hint::before {
    content: "";
    flex: none;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: .125rem;
    background: currentColor;
    -webkit-mask: var(--mask-alert) center / contain no-repeat;
    mask: var(--mask-alert) center / contain no-repeat;
}

/* ---------- Team and hours (package) list ---------- */
.booking-form .pkg-list { gap: var(--sp-3); }
.booking-form .pkg-card {
    gap: .75rem;
    min-block-size: var(--tap-lg);
    padding-block: var(--sp-4);
    padding-inline: 1.125rem;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.booking-form .pkg-card:hover { box-shadow: var(--lift); }
.booking-form .pkg-card:has(input:checked) { box-shadow: 0 0 0 1px var(--blue), var(--lift); }
.booking-form .pkg-team { padding-inline-start: 2rem; line-height: 1.35; }
.booking-form .pkg-team::before {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    margin-block-start: -.625rem;
    transition: border-width var(--dur) var(--ease);
}
.booking-form .pkg-price { font-size: 1.2rem; }
.booking-form .pkg-price-team { font-size: .875rem; } /* the "confirmed by our team" note stays a note */
/* Reserve roughly two option rows while options load, so the page does not jump. */
.booking-form .pkg-loading,
.booking-form .pkg-error {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    min-block-size: 7.5rem;
}
.booking-form .btn-sm { min-block-size: var(--tap); }
@media (max-width: 639px) {
    .booking-form .pkg-card { flex-wrap: wrap; }
    .booking-form .pkg-price { margin-inline-start: auto; }
}

/* ---------- Summary (step 5, side card, receipt): one row per line ---------- */
.booking-form .summary-box,
.page-received .summary-box {
    padding-block: 1.125rem;
    padding-inline: 1.25rem;
    border-radius: var(--radius-lg);
}
.booking-form .summary-box dl,
.booking-aside .aside-card dl,
.page-received .summary-box dl { gap: 0 var(--sp-4); }
.booking-form .summary-box dt,
.booking-form .summary-box dd,
.booking-aside .aside-card dt,
.booking-aside .aside-card dd,
.page-received .summary-box dt,
.page-received .summary-box dd {
    padding-block: .5rem;
    border-block-end: 1px solid var(--line);
}
.booking-form .summary-box dl > :nth-last-child(-n+2),
.booking-aside .aside-card dl > :nth-last-child(-n+2),
.page-received .summary-box dl > :nth-last-child(-n+2) { border-block-end: 0; }
.booking-form .summary-box dd,
.booking-aside .aside-card dd,
.page-received .summary-box dd { min-inline-size: 0; overflow-wrap: anywhere; }
.booking-form dd.sum-price,
.booking-aside dd.sum-price { font-size: 1.125rem; }
.booking-aside #liveSummary { border-block-start: .25rem solid var(--green); box-shadow: var(--lift); }

/* ---------- Back / Continue / Send ---------- */
.booking-form .form-nav {
    flex-wrap: wrap;
    gap: .75rem;
    margin-block-start: 1.75rem;
    padding-block-start: 1.25rem;
}
.booking-form .form-nav .btn { min-block-size: var(--tap-lg); }
.booking-form .form-nav .btn-primary { box-shadow: var(--lift); }
.booking-form #submitBtn { padding-inline: 1.75rem; }
.booking-form #submitBtn[disabled] .i { display: none; }
.booking-form #submitBtn[disabled]::before {
    content: "";
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    box-sizing: border-box;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: jnSpin .8s linear infinite;
}
@media (max-width: 639px) {
    .booking-form .form-nav .btn-primary { flex: 1 1 8rem; }
    .booking-form .form-nav .btn-ghost { flex: 0 1 auto; padding-inline: var(--sp-4); }
    /* Send gets a full-width row of its own (one line of text); Back stays first in the DOM and on screen. */
    .booking-form .form-nav #submitBtn { flex-basis: 100%; }
}

/* ---------- Slim summary bar on phones and tablets (patch B8, filled by J5) ---------- */
.booking-form .booking-bar {
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: 95;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding-block: .625rem calc(.625rem + env(safe-area-inset-bottom));
    padding-inline: var(--sp-4);
    border-block-start: 1px solid var(--line);
    background: var(--bg);
    box-shadow: 0 -.375rem 1.25rem color-mix(in srgb, var(--ink) 10%, transparent);
    animation: jnBarIn .26s var(--ease) both;
}
.booking-form .booking-bar-text {
    display: grid;
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
    line-height: 1.3;
}
.booking-form .booking-bar-text strong,
.booking-form .booking-bar-text span {
    overflow: hidden; /* one-line duplicate of the summary in the form; the full summary is above */
    text-overflow: ellipsis;
    white-space: nowrap;
}
.booking-form .booking-bar-text strong { font-size: .9375rem; color: var(--ink); }
.booking-form .booking-bar-text span { font-size: .8125rem; color: var(--muted); }
.booking-form .booking-bar .btn { flex: none; min-block-size: var(--tap-lg); padding-inline: 1.25rem; box-shadow: var(--lift); }
/* While someone types, the keyboard needs the room: hide the bar. */
.booking-form:has(.form-step.active :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus) .booking-bar { display: none; }
@media (max-width: 999px) {
    body.page-book:has(.booking-bar:not([hidden])) { padding-block-end: 5.5rem; }
    /* The bar's Continue replaces the in-form one (same data-next handler); Back stays in the form.
       While a text field has focus the bar steps aside for the keyboard, so the in-form Continue returns. */
    .booking-form:has(.booking-bar:not([hidden])) .form-nav [data-next] { display: none; }
    .booking-form:has(.form-step.active :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus) .form-nav [data-next] { display: inline-flex; }
    /* Step 1 has no Back button: drop its then-empty nav row, with the same keyboard exception. */
    .booking-form:has(.booking-bar:not([hidden])) .form-nav:not(:has([data-prev])) { display: none; }
    .booking-form:has(.form-step.active :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea):focus) .form-nav:not(:has([data-prev])) { display: flex; }
}
@media (min-width: 1000px) {
    .booking-form .booking-bar { display: none; }
}

/* ---------- Help card beside the form ---------- */
.booking-aside .btn { min-block-size: var(--tap-lg); }
.booking-aside .aside-rating { min-block-size: var(--tap); }

/* ---------- Request received page ---------- */
.page-received .received { margin-block-end: 1.75rem; }
.page-received .received-icon {
    inline-size: 5rem;
    block-size: 5rem;
    margin-block-end: var(--sp-4);
    box-shadow: 0 0 0 .5rem color-mix(in srgb, var(--green) 14%, transparent);
    animation: jnPop .45s var(--ease) both;
}
.page-received .received-icon .i { inline-size: 2.75rem; block-size: 2.75rem; }
.page-received .ref-badge {
    max-inline-size: 100%;
    border: 1px solid var(--line);
    background: var(--bg);
    box-shadow: var(--lift);
}
.page-received .ref-badge strong { overflow-wrap: anywhere; }
.page-received .wa-card { padding: var(--sp-5); box-shadow: var(--lift); }
.page-received .wa-card .btn { min-block-size: 3.25rem; }
.page-received .summary-box { border: 1px solid var(--line); background: var(--bg); }
.page-received .next-steps { margin-block-start: var(--sp-6); }
/* "What happens next" as a timeline: numbered dots joined by a line. */
.page-received .steps-compact { gap: var(--sp-2); }
.page-received .steps-compact li {
    position: relative;
    padding-block: .5rem;
    padding-inline: 0;
    border: 0;
    background: none;
}
.page-received .steps-compact li:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 3rem;
    inset-block-end: -.5rem;
    inset-inline-start: calc(1.125rem - 1px);
    inline-size: 2px;
    background: var(--line);
}
.page-received .steps-compact p { padding-block-start: .375rem; }
.page-received .text-center .btn { min-block-size: var(--tap-lg); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    /* Every transition in this file uses var(--dur): zero it so specific rules cannot win back motion. */
    .page-book,
    .page-received { --dur: 0s; }
    .booking-form *,
    .booking-form *::before,
    .booking-form *::after,
    .booking-aside *,
    .page-received main *,
    .page-received main *::after {
        animation: none;
        transition: none;
    }
    .booking-form .form-step.active,
    .booking-form .booking-bar,
    .booking-form .choice-card:has(input:checked)::after,
    .booking-form #submitBtn[disabled]::before,
    .page-received .received-icon { animation: none; }
    .booking-form .btn:active { transform: none; }
    .booking-form .scope-box .chev { transition: none; }
}

/* ---------- What's included, before the price (INCLUDED_STEP, 2026-10-23) ---------- */
.booking-form .incl-lead { margin-block: 0 var(--sp-4); color: var(--ink); }
.booking-form .incl-addon { margin-block: 0 var(--sp-4); }
.booking-form .incl-h { font-size: 1.05rem; margin-block: var(--sp-5) var(--sp-3); }
.booking-form .incl-list,
.booking-form .incl-kit {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
    margin: 0;
    padding: 0;
}
.booking-form .incl-list li {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-start;
    padding: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg);
    font-size: .95rem;
    line-height: 1.45;
}
.booking-form .incl-list strong { display: block; color: var(--ink); }
.booking-form .incl-icon {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.25rem;
    block-size: 2.25rem;
    border-radius: var(--radius-sm);
    background: var(--blue-tint);
    color: var(--blue);
}
.booking-form .incl-good .incl-icon { background: var(--green-tint); color: var(--ink); }
.booking-form .incl-kit { gap: var(--sp-2) var(--sp-4); }
.booking-form .incl-kit li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .95rem; color: var(--ink); }
.booking-form .incl-kit .i,
.booking-form .pkg-assure .i { flex: none; color: var(--green); margin-block-start: .15em; }
.booking-form .incl-furn .check-list { margin-block-end: 0; }
.booking-form .incl .scope-box { margin-block-start: var(--sp-4); }
.booking-form .incl-more { margin-block: var(--sp-4) 0; }
.booking-form .incl-more a,
.booking-form .pkg-help a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-block-size: var(--tap);
    font-weight: 700;
}
/* Price step: what every price covers, right above the prices, and the reassurance below them. */
.booking-form .pkg-value {
    margin-block-end: var(--sp-4);
    padding: var(--sp-4);
    border-radius: var(--radius-sm);
    background: var(--blue-tint);
}
.booking-form .pkg-value-lead { margin: 0 0 var(--sp-3); font-weight: 600; color: var(--ink); }
.booking-form .pkg-chips { list-style: none; display: flex; flex-wrap: wrap; gap: var(--sp-2); margin: 0; padding: 0; }
.booking-form .pkg-chips li {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: var(--sp-1) var(--sp-3);
    border-radius: 999px;
    background: var(--bg);
    font-size: .875rem;
    font-weight: 600;
    color: var(--ink);
}
.booking-form .pkg-chips .i { inline-size: 1rem; block-size: 1rem; color: var(--green); }
.booking-form .pkg-assure { list-style: none; display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; }
.booking-form .pkg-assure li { display: flex; gap: var(--sp-2); align-items: flex-start; font-size: .95rem; color: var(--ink); }
.booking-form .pkg-help { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-2); margin: var(--sp-3) 0 0; font-size: .95rem; }
@media (max-width: 639px) {
    .booking-form .incl-list,
    .booking-form .incl-kit { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Customized kitchen: bathrooms and balconies (CUSTOM_KITCHEN, 2026-10-23) ---------- */
/* Step 1 box with the two counters (they reuse the pieces steppers above), shown for a kitchen only. */
.booking-form .ck-box {
    margin-block-start: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
}
.booking-form .ck-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block: 0 var(--sp-2);
    font-size: 1.05rem;
}
.booking-form .ck-title .i { flex: none; color: var(--blue); }
.booking-form .ck-note { margin-block: 0 var(--sp-3); font-size: .9rem; line-height: 1.5; color: var(--text); }
.booking-form .ck-box .qty-list { margin: 0; }
/* Counts are single digits, so a narrower number box keeps both counters on one line on common phone widths. */
.booking-form .ck-box .qty-ctrl input { inline-size: var(--tap); }
/* Step 2: what the added bathrooms and balconies include. */
.booking-form .ck-incl .incl-icon { background: var(--sky-tint); }
@media (max-width: 420px) {
    .booking-form .ck-box { padding-block: var(--sp-3); padding-inline: var(--sp-2); }
    .booking-form .ck-box .qty-row { column-gap: var(--sp-2); }
}

/* ---------- Customer experience fixes (CX_2026_10_24) ---------- */
/* Google rating in the booking hero on phones and tablets; from 1000px the side card shows it. */
.page-book .book-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    max-inline-size: 100%;
    min-block-size: var(--tap);
    margin-block-start: var(--sp-3);
    padding-block: var(--sp-1);
    padding-inline: var(--sp-3);
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--bg);
    color: var(--ink);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}
.page-book .book-rating:hover { border-color: var(--blue); color: var(--ink); }
/* The side card's help under each step on phones and tablets (the card sits below the form there). The price step
   already has its own "Questions before you choose?" line. */
.booking-form .book-help {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 var(--sp-4);
    margin-block: var(--sp-4) 0;
    font-size: .95rem;
}
.booking-form .book-help span { flex-basis: 100%; font-weight: 600; color: var(--ink); }
.booking-form .book-help a {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    min-block-size: var(--tap);
    font-weight: 700;
}
.booking-form:has(.form-step.active #pkgArea:not([hidden])) .book-help { display: none; }
@media (min-width: 1000px) {
    .page-book .book-rating,
    .booking-form .book-help { display: none; }
}
/* WhatsApp link beside the two messages that say "WhatsApp", and the Retry button: full-size tap targets. */
.booking-form #formError .btn,
.booking-form .pkg-error .btn { min-block-size: var(--tap); margin-block-start: var(--sp-2); }
/* Step 6: the Terms link is a full-size tap target (it was 26px tall), only as wide as its words. */
.booking-form .check-row a { display: inline-flex; align-items: center; justify-self: start; min-block-size: var(--tap); }
/* Phone booking bar: the whole service ("Kitchen deep cleaning + 2 bathrooms + 1 balcony") and the date, time and
   area on up to two lines each instead of one cut line; the page keeps room for the taller bar. */
@media (max-width: 639px) {
    .booking-form .booking-bar-text strong,
    .booking-form .booking-bar-text span {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        white-space: normal;
    }
    body.page-book:has(.booking-bar:not([hidden])) { padding-block-end: 6.5rem; }
}
@media (max-width: 420px) {
    .booking-form .booking-bar .btn { padding-inline: var(--sp-4); }
}

/* ---------- Area search (AREA_SEARCH_2026_10_28): the search box above the area list, its matches and its one-line notes.
   The box is in the page from the start (hidden until main.js switches it on), and its list and notes sit in the normal
   flow under it, so nothing moves before the customer types. Matches are 44px rows; the notes wrap on 320px phones. The
   highlighted match (the one Enter picks) has a blue bar at its start, not the blue fill of a chosen card: it is not
   chosen until it is tapped. */
.booking-form .area-find { margin-block-end: var(--sp-4); }
.booking-form .area-find .af-hint { margin-block: 0 var(--sp-2); }
.booking-form .area-find-box { position: relative; }
.booking-form .area-find-box .i {
    position: absolute;
    inset-block: 0;
    inset-inline-start: .875rem;
    margin-block: auto;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--blue);
    pointer-events: none;
}
.booking-form .field .area-find-box input {
    padding-inline-start: 2.75rem;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
}
.booking-form .area-find-box input::-webkit-search-decoration { -webkit-appearance: none; }
.booking-form .af-list {
    display: grid;
    gap: .375rem;
    margin-block: var(--sp-2) 0;
    margin-inline: 0;
    padding: 0;
    list-style: none;
}
.booking-form .af-opt {
    display: grid;
    align-content: center;
    gap: .125rem;
    min-block-size: var(--tap);
    padding-block: .5rem;
    padding-inline: .875rem;
    border: 1.5px solid var(--line);
    position: relative;
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--ink);
    font-weight: 700;
    line-height: 1.35;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
@media (hover: hover) { .booking-form .af-opt:hover { border-color: var(--sky); } } /* no sticky hover after a tap */
.booking-form .af-opt[aria-selected="true"] { border-color: var(--sky); background: var(--bg-soft); }
.booking-form .af-opt[aria-selected="true"]::before {
    content: '';
    position: absolute;
    inset-block: .5rem;
    inset-inline-start: .3125rem;
    inline-size: .25rem;
    border-radius: .125rem;
    background: var(--blue);
}
.booking-form .af-via { justify-self: start; font-size: .875rem; font-weight: 500; color: var(--text); }
.booking-form .af-msg {
    display: grid;
    gap: var(--sp-2);
    margin-block-start: var(--sp-2);
    padding-block: .75rem;
    padding-inline: .875rem;
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    color: var(--ink);
    font-size: .9375rem;
    line-height: 1.5;
}
.booking-form .af-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin: 0;
}
.booking-form .af-line span { flex: 1 1 12rem; min-inline-size: 0; overflow-wrap: anywhere; }
.booking-form .af-line .btn { min-block-size: var(--tap); white-space: normal; }
.booking-form .af-more { margin: 0; color: var(--text); font-size: .875rem; }
.booking-form .af-tap { margin: 0; color: var(--ink); font-weight: 700; }

/* ---------- Booking control (BOOKING_CONTROL_2026_10_31): online booking paused by the owner, and closed days. ----------
   While paused, one card replaces the form: a readable width, the WhatsApp button full size, the number beside it. */
.page-book .book-paused {
    display: grid;
    gap: var(--sp-3);
    max-inline-size: 40rem;
    margin-inline: auto;
}
.page-book .book-paused h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0; }
.page-book .book-paused p,
.page-book .book-paused .notice { margin: 0; }
.page-book .book-paused-wa { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-4); font-weight: 700; }
.page-book .book-paused-wa .btn { min-block-size: var(--tap-lg); margin: 0; }
.page-book .book-paused-booked { color: var(--ink); font-weight: 600; }
/* A closed day's note under the date field (main.js), its WhatsApp link a full-size tap target. */
.booking-form .bc-note { margin-block: var(--sp-3) 0; }
.booking-form .bc-note a { display: inline-flex; align-items: center; min-block-size: var(--tap); font-weight: 700; }

/* ---------- Sofa, mattress, carpet and curtain cleaning as an extra (UPHOLSTERY_GUIDE_2026_11_01) ----------
   Step 1: the add-on is its own card (an "extra service" badge, then the choice), set apart from the package choices.
   Step 2: the note about the added pieces is an attention note (notice-warn). Step 4: a pointer above the prices and the
   price guide for the chosen emirate, filled in by main.js. Blue / attention accents, never the green of "included".
   Only styles.css tokens; the [hidden] rule of styles.css still hides the boxes. */
.booking-form .addon-card {
    margin-block-start: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-inline-start: .25rem solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--warn-tint);
}
.booking-form .addon-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    margin: 0 0 var(--sp-3);
    padding-block: .25rem;
    padding-inline: .625rem;
    border-radius: 999px;
    background: var(--blue);
    color: var(--bg);
    font-size: .8125rem;
    font-weight: 700;
    line-height: 1.4;
}
.booking-form .addon-badge .i { flex: none; inline-size: 1em; block-size: 1em; }
.booking-form .addon-card .check-row { margin-block-start: 0; background: var(--bg); }
.booking-form .addon-card .check-row:has(input:checked) { background: var(--blue-tint); }
.booking-form .addon-card .check-row small { color: var(--text); }
.booking-form .notice.incl-addon { margin-block: 0 var(--sp-4); }
.booking-form .uph-guide-ptr { margin-block: var(--sp-3) 0; }
.booking-form .uph-guide-ptr a { font-weight: 700; white-space: nowrap; }
.booking-form .uph-guide {
    margin-block-start: var(--sp-5);
    padding: var(--sp-4);
    border: 1px solid var(--line);
    border-inline-start: .25rem solid var(--blue);
    border-radius: var(--radius-sm);
    background: var(--bg-soft);
    scroll-margin-block-start: 6rem;
}
.booking-form .uph-guide-title {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-block: 0 var(--sp-2);
    font-size: 1.05rem;
}
.booking-form .uph-guide-title .i { flex: none; color: var(--blue); }
.booking-form .uph-guide-lead { margin-block: 0 var(--sp-3); color: var(--ink); font-weight: 600; line-height: 1.5; }
.booking-form .uph-guide-list { display: grid; gap: var(--sp-2); margin: 0 0 var(--sp-3); }
.booking-form .uph-guide-row {
    display: grid;
    grid-template-columns: minmax(8rem, 1fr) 2fr;
    gap: var(--sp-1) var(--sp-3);
    padding-block-end: var(--sp-2);
    border-block-end: 1px solid var(--line);
}
.booking-form .uph-guide-row dt { color: var(--ink); font-weight: 700; }
.booking-form .uph-guide-row dd { margin: 0; color: var(--text); overflow-wrap: break-word; }
.booking-form .uph-guide-amt { white-space: nowrap; }
.booking-form .uph-guide-min,
.booking-form .uph-guide-discount { margin-block: 0 var(--sp-2); color: var(--ink); font-size: .9375rem; line-height: 1.5; }
.booking-form .uph-guide-min { font-weight: 700; }
.booking-form .uph-guide-final {
    margin-block: var(--sp-3) 0;
    padding-block: .75rem;
    padding-inline: .875rem;
    border-radius: var(--radius-sm);
    background: var(--blue-tint);
    color: var(--ink);
    font-size: .9375rem;
    line-height: 1.5;
}
@media (max-width: 639px) {
    .booking-form .uph-guide-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
    .booking-form .addon-card,
    .booking-form .uph-guide { padding-block: var(--sp-3); padding-inline: var(--sp-3); }
}