/*
 * ReCalendar booking wizard — mobile-first, brand-neutral.
 * Operator-facing customisation goes in the Asetukset → brand later.
 */

.rc-booking-wizard {
    --rc-border:        #e1e5eb;
    --rc-text:          #1f2933;
    --rc-text-muted:    #6b7280;
    --rc-accent:        #222222;
    --rc-accent-bg:     #f2f3f5;
    --rc-bg:            #ffffff;
    --rc-bg-soft:       #f7f8fa;
    --rc-shadow:        0 2px 12px rgba(15, 23, 42, .06);
    --rc-radius:        14px;
    --rc-radius-sm:     10px;
    --rc-pad:           18px;
    /* alpha.74: brushed-metal button tokens (same recipe as the other apps).
     * alpha.79: a diagonal light sheen (same idea as the dial arc's bright
     * highlight stop) layered over the vertical metal gradient — the light
     * catching the surface. */
    --rc-btn-sheen: linear-gradient(105deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.32) 42%, rgba(255,255,255,.08) 56%, rgba(255,255,255,0) 70%);
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #3a3f45 0%, #2b3036 22%, #222222 50%, #141619 85%, #1b1e22 100%);
    --rc-btn-edge: #7e4b28;
    --rc-btn-bevel: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(0,0,0,.18), 0 1px 2px rgba(0,0,0,.22);
    --rc-btn-text: #fff;
    --rc-btn-text-shadow: 0 1px 1px rgba(0,0,0,.25);
    /* alpha.78: metal face for small pills/chips (alias of the primary face
     * since alpha.79 — kept as its own token so small pills can diverge) */
    --rc-btn-metal: var(--rc-btn-grad);

    position:    relative;   /* anchors the ⋮ kebab */
    /* Petri 23.8.2026: lomake oli tarpeettoman kapea — viiden päivän viikko ja
     * palvelulaatat tarvitsevat tilaa. Reunoille jää vain se mikä on pakko. */
    max-width:   1100px;
    margin:      24px auto;
    /* [reall-booking width=full] → .rc-wizard-full: no own cap, the host
     * container (Divi column) decides the width (sivustointegraatio). */
    color:       var(--rc-text);
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size:   16px;
    line-height: 1.5;
}

.rc-booking-wizard.rc-wizard-full { max-width: none; margin: 24px 0; }

/* ═══════════════════════════════════════════════════════════════════════
 * alpha.59 — app-wide theming (matches the tracking view). Copper default,
 * dark theme. The wizard is token-driven, so the dark override just flips
 * surface variables and cascades to every component. Driven by rc-theme-* /
 * rc-finish-* classes on the mount, set from the same localStorage
 * (rcTheme/rcFinish) as the tracking view.
 * alpha.79: finishes = copper | bronze | gold | champagne | aluminum |
 * silver | glass (liquid glass, Apple style). Diamond removed → maps to gold.
 * ═══════════════════════════════════════════════════════════════════════ */
/* alpha.1003: kupari omaksi luokakseen (oli ennen tiedoston oletus). */
.rc-booking-wizard.rc-finish-copper {
    --rc-accent: #a8693e; --rc-accent-bg: #f6ece6;
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #c9905f 0%, #b5774b 22%, #a8693e 50%, #93582e 85%, #9c6136 100%);
    --rc-btn-edge: #7e4b28;
}
.rc-booking-wizard.rc-finish-gold {
    --rc-accent: #c9a227; --rc-accent-bg: #f7efd2;
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #e0c25a 0%, #d2ad36 22%, #c9a227 50%, #ab8a1c 85%, #b6921f 100%);
    --rc-btn-edge: #8f7416;
}
.rc-booking-wizard.rc-finish-bronze {
    --rc-accent: #8a6533; --rc-accent-bg: #f1e9d9;
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #c29b63 0%, #ac834c 22%, #99713c 50%, #7e5a2c 85%, #8a6533 100%);
    --rc-btn-edge: #66491f;
}
/* champagne / aluminum / silver are LIGHT metals — engraved dark text with
 * a white under-highlight instead of white-on-metal. */
.rc-booking-wizard.rc-finish-champagne {
    --rc-accent: #a07f3a; --rc-accent-bg: #f6efdd;
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #f0e2bd 0%, #e3d09e 22%, #d7c189 50%, #bfa769 85%, #cbb275 100%);
    --rc-btn-edge: #9c8650;
    --rc-btn-text: #46391c;
    --rc-btn-text-shadow: 0 1px 0 rgba(255,255,255,.45);
}
.rc-booking-wizard.rc-finish-aluminum {
    --rc-accent: #75808a; --rc-accent-bg: #eef1f3;
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #f0f1f2 0%, #dcdfe1 22%, #c9cdd0 50%, #aeb3b8 85%, #bcc1c5 100%);
    --rc-btn-edge: #8b9299;
    --rc-btn-text: #232a31;
    --rc-btn-text-shadow: 0 1px 0 rgba(255,255,255,.55);
}
.rc-booking-wizard.rc-finish-silver {
    --rc-accent: #66727e; --rc-accent-bg: #eaeef2;
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, #e9edf1 0%, #cdd5dc 22%, #b6c0c9 50%, #95a1ac 85%, #a3aeb8 100%);
    --rc-btn-edge: #76828e;
    --rc-btn-text: #1f2933;
    --rc-btn-text-shadow: 0 1px 0 rgba(255,255,255,.5);
}
/* alpha.79: liquid glass (Apple style) — a translucent lens: bright top/
 * bottom curvature highlights, refraction rim, iOS-blue accents. The real
 * blur comes from the backdrop-filter rule further below. */
.rc-booking-wizard.rc-finish-glass {
    /* Lasi = PINTA, väri teemasta (Petri 2026-07-19) — iOS-sininen pois. */
    --rc-accent: #222222; --rc-accent-bg: #ececec;
    --rc-btn-sheen: linear-gradient(105deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.5) 42%, rgba(255,255,255,.12) 56%, rgba(255,255,255,0) 70%);
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(244,248,252,.34) 45%, rgba(255,255,255,.55) 100%);
    --rc-btn-edge: rgba(31,41,51,.16);
    --rc-btn-bevel: inset 0 1px 1px rgba(255,255,255,.9), inset 0 -1px 1px rgba(255,255,255,.55), inset 0 -10px 14px -10px rgba(120,140,160,.35), 0 6px 18px rgba(15,23,42,.14);
    --rc-btn-text: #1f2933;
    --rc-btn-text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
/* FLAT (alpha.491, sivustointegraatio) — asuntokuvat.fi:n tyyli: yksivärinen
 * aksentti (musta oletus), suorakulmat, ei kiiltoa/beveliä. HUOM: nappipinta on
 * linear-gradient(var(--rc-accent) …) — siksi brand-chromen !important-aksentti-
 * override värjää napit suoraan brändiväriin (metallifinisseissä hexit ovat
 * kiinteät ja vain reunavärit/tekstit brändäytyvät). */
.rc-booking-wizard.rc-finish-flat {
    --rc-accent: #111111; --rc-accent-bg: #f2f2f2;
    --rc-btn-sheen: none;
    --rc-btn-grad: linear-gradient(var(--rc-accent), var(--rc-accent));
    --rc-btn-edge: var(--rc-accent);
    --rc-btn-bevel: none;
    --rc-btn-text: #ffffff;
    --rc-btn-text-shadow: none;
    /* Nurkkapyöristykset säilyvät flatissakin (Petri 2026-07-18: "minne
     * katosi nurkkapyöristykset?") — flat = väri/kiilto-tyyli, ei kulmatyyli. */
}

.rc-booking-wizard.rc-theme-dark {
    --rc-border: #2a343c; --rc-text: #f3f6f8; --rc-text-muted: #9aa7b0;
    --rc-bg: #10171c; --rc-bg-soft: #0f161b; --rc-shadow: 0 2px 12px rgba(0,0,0,.4);
    --rc-accent-bg: #2a2118;
}
/* dark + finish: tinted accent surfaces; low-chroma metals get a brighter
 * accent so chips/borders stay legible on dark. */
.rc-booking-wizard.rc-theme-dark.rc-finish-gold      { --rc-accent-bg: #2b2514; }
.rc-booking-wizard.rc-theme-dark.rc-finish-bronze    { --rc-accent: #bd9355; --rc-accent-bg: #272014; }
.rc-booking-wizard.rc-theme-dark.rc-finish-champagne { --rc-accent: #d9bd7e; --rc-accent-bg: #2a2415; }
.rc-booking-wizard.rc-theme-dark.rc-finish-aluminum  { --rc-accent: #a6aeb5; --rc-accent-bg: #25282b; }
.rc-booking-wizard.rc-theme-dark.rc-finish-silver    { --rc-accent: #9aa9b8; --rc-accent-bg: #232a31; }
.rc-booking-wizard.rc-theme-dark.rc-finish-flat      { --rc-accent: #f3f6f8; --rc-accent-bg: #232a31; --rc-btn-text: #10171c; }
.rc-booking-wizard.rc-theme-dark.rc-finish-glass {
    --rc-accent: #dfe3e8; --rc-accent-bg: #1c2127;
    --rc-btn-sheen: linear-gradient(105deg, rgba(255,255,255,0) 25%, rgba(255,255,255,.18) 42%, rgba(255,255,255,.04) 56%, rgba(255,255,255,0) 70%);
    --rc-btn-grad: var(--rc-btn-sheen), linear-gradient(180deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,.07) 45%, rgba(255,255,255,.13) 100%);
    --rc-btn-edge: rgba(255,255,255,.28);
    --rc-btn-bevel: inset 0 1px 1px rgba(255,255,255,.4), inset 0 -1px 1px rgba(255,255,255,.18), 0 6px 18px rgba(0,0,0,.4);
    --rc-btn-text: #f3f6f8;
    --rc-btn-text-shadow: 0 1px 1px rgba(0,0,0,.3);
}
/* Tenant-brändi: nappipinta = ULKOASUN heijastustyyli brändivärin päälle —
 * TÄSMÄLLEEN samat kerrokset kuin manage-page.css:n rc-refl-säännöissä
 * (Petri 2026-07-19: "käytä ainoastaan sitä tyyliä mitä Ulkoasussa on
 * määritelty, pidä dynaamisena"). Ei omia keksittyjä kiiltoja. Reflection-
 * luokka tulee shellin data-reflectionista (app_appearance-ketju); ilman
 * brändiä (house) finish-säännöt pätevät ennallaan — oletus flat/mustavalko. */
.rc-booking-wizard.rc-brand-tenant.rc-refl-kaksoiskisko {
    --rc-btn-grad: linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.42) 49%, rgba(255,255,255,.48) 51%, rgba(255,255,255,0) 60%), var(--rc-face);
    --rc-btn-bevel: inset 0 0 0 1px rgba(255,255,255,.30), inset 0 2px 0 rgba(255,255,255,.60), inset 0 -2px 0 rgba(0,0,0,.40), 0 1px 2px rgba(0,0,0,.30);
}
.rc-booking-wizard.rc-brand-tenant.rc-refl-pyoroharjattu {
    --rc-btn-grad:
        conic-gradient(from 0deg at 50% 42%, rgba(255,255,255,.26) 0deg, rgba(255,255,255,0) 34deg, rgba(0,0,0,.12) 90deg, rgba(255,255,255,0) 146deg, rgba(255,255,255,.26) 180deg, rgba(255,255,255,0) 214deg, rgba(0,0,0,.12) 270deg, rgba(255,255,255,0) 326deg, rgba(255,255,255,.26) 360deg),
        repeating-radial-gradient(circle at 50% 42%, rgba(255,255,255,.11) 0px, rgba(255,255,255,0) 1.1px, rgba(0,0,0,.11) 2.2px, rgba(255,255,255,0) 3.3px),
        radial-gradient(78% 88% at 50% 34%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 70%),
        var(--rc-face);
    --rc-btn-bevel: inset 1px 1px 0 rgba(255,250,245,.5), inset -1px -1px 0 rgba(0,0,0,.4), 0 2px 3px rgba(0,0,0,.22);
}
.rc-booking-wizard.rc-brand-tenant.rc-refl-lasikupu {
    --rc-btn-grad:
        radial-gradient(72% 46% at 50% 116%, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 38%, rgba(255,255,255,0) 72%),
        radial-gradient(26% 34% at 30% 16%, rgba(255,255,255,.96) 0%, rgba(255,255,255,0) 60%),
        linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.06) 24%, rgba(255,255,255,0) 46%),
        var(--rc-face);
    --rc-btn-bevel:
        inset 0 1.5px 1.5px rgba(255,255,255,.8),
        inset 0 -3px 8px rgba(255,255,255,.42),
        inset 0 0 0 1px rgba(255,255,255,.30),
        0 8px 22px rgba(0,0,0,.18);
}
.rc-booking-wizard.rc-brand-tenant.rc-refl-none {
    --rc-btn-grad: var(--rc-face);
    --rc-btn-bevel: inset 0 0 0 1px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.16);
}

/* glass buttons refract what's behind them */
.rc-booking-wizard.rc-finish-glass .rc-btn-primary,
.rc-booking-wizard.rc-finish-glass .rc-photog-chip.rc-selected,
.rc-booking-wizard.rc-finish-glass .rc-daycol-slot.rc-selected {
    -webkit-backdrop-filter: blur(14px) saturate(1.5);
    backdrop-filter: blur(14px) saturate(1.5);
}
.rc-booking-wizard.rc-theme-dark .rc-error { color: #ff9b8a; }

/* alpha.74: ⋮ kebab user-menu (top-right) — holds Ulkoasu + kirjautuminen.
 * Replaces the old footer appearance bar (same pattern as the other apps). */
.rc-bw-kebab { position: absolute; top: 0; right: 0; z-index: 60; }
/* Kirjautuneen merkki (15.9.2026): hento harmaa henkilökuvake oikeassa
   yläkulmassa, ei tekstiä. Nimi ja uloskirjautuminen kuplassa. */
/* Reilusti lomakkeen yläpuolella (Petri 15.9.2026: "ettei se ole kalenterin tiellä"). */
.rc-bw-viewer { position: absolute; top: -44px; right: 0; z-index: 55; }
.rc-bw-viewer.rc-bw-viewer-shift { right: 52px; }
.rc-bw-viewer-btn {
    width: 30px; height: 30px; border: 0; background: none; padding: 0; cursor: pointer;
    color: var(--rc-text-muted); opacity: .38; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.rc-bw-viewer-btn:hover, .rc-bw-viewer-btn:focus-visible, .rc-bw-viewer.rc-open .rc-bw-viewer-btn { opacity: .85; outline: none; }
.rc-bw-viewer-pop {
    position: absolute; top: 34px; right: 0; min-width: 180px; display: none;
    background: var(--rc-bg); border: 1px solid var(--rc-border); border-radius: 12px;
    padding: 10px 12px; box-shadow: var(--rc-shadow); font-size: 13px; color: var(--rc-text);
}
.rc-bw-viewer.rc-open .rc-bw-viewer-pop { display: block; }
.rc-bw-viewer-name { font-weight: 600; }
.rc-bw-viewer-sub { color: var(--rc-text-muted); font-size: 12px; margin-top: 2px; }
.rc-bw-viewer-out { display: inline-block; margin-top: 8px; color: var(--rc-text); text-decoration: underline; }
.rc-bw-kebab-btn {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--rc-border);
    background: var(--rc-bg); color: var(--rc-text);
    font-size: 22px; line-height: 1; cursor: pointer;
    box-shadow: 0 2px 10px rgba(15,23,42,.12);
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent;
}
.rc-bw-kebab-menu {
    position: absolute; top: 48px; right: 0; min-width: 230px;
    background: var(--rc-bg); border: 1px solid var(--rc-border);
    border-radius: 14px; box-shadow: 0 12px 34px rgba(15,23,42,.20);
    padding: 8px; display: none;
}
.rc-bw-kebab-menu.rc-open { display: block; }
.rc-bw-kebab-label {
    font-size: 11px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: var(--rc-text-muted);
    padding: 6px 8px 4px;
}
.rc-bw-kebab-row { padding: 2px 6px 6px; }
.rc-bw-kebab-sep { height: 1px; background: var(--rc-border); margin: 6px 4px; }
.rc-bw-kebab-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; text-decoration: none;
    text-align: left; font: inherit; font-size: 14.5px; font-weight: 400;
    color: var(--rc-text); padding: 11px 10px; border-radius: 9px;
    cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.rc-bw-kebab-item:hover { background: var(--rc-bg-soft); }
.rc-bw-seg { display: inline-flex; flex-wrap: wrap; background: var(--rc-bg-soft); border: 1px solid var(--rc-border); border-radius: 18px; padding: 3px; gap: 2px; }
.rc-bw-seg button { appearance: none; border: none; background: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 500; color: var(--rc-text-muted); padding: 7px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; -webkit-tap-highlight-color: transparent; }
.rc-bw-seg button.rc-on { background: var(--rc-bg); color: var(--rc-text); box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.rc-bw-sw { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.18); }
.rc-bw-seg button.rc-locked { opacity: .55; cursor: default; }
.rc-bw-seg button.rc-locked::after { content: "★"; font-size: 10px; color: #c9a227; margin-left: 2px; }

.rc-booking-wizard *,
.rc-booking-wizard *::before,
.rc-booking-wizard *::after {
    box-sizing: border-box;
}

.rc-booking-wizard .rc-loading,
.rc-booking-wizard .rc-error {
    background:    var(--rc-bg-soft);
    border:        1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    padding:       28px;
    text-align:    center;
    color:         var(--rc-text-muted);
}
.rc-booking-wizard .rc-error { color: #a33; }

/* ---------- VAT toggle ---------- */

.rc-vat-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--rc-text-muted);
}
.rc-vat-label { margin-right: 4px; }
.rc-vat-pill {
    appearance: none;
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: 999px;
    padding: 8px 10px;
    color: var(--rc-text-muted);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.rc-vat-pill:hover { color: var(--rc-text); border-color: var(--rc-text-muted); }
.rc-vat-pill.rc-vat-active {
    background:   var(--rc-btn-metal);
    border-color: var(--rc-btn-edge);
    color:        var(--rc-btn-text);
    text-shadow:  var(--rc-btn-text-shadow);
    box-shadow:   var(--rc-btn-bevel);
}

/* ---------- progress strip ---------- */

/* Bookly-tyylinen progress-palkki (Petri 2026-07-18): numeroitu otsikko +
 * paksu palkki, vaiheet jakavat lomakkeen koko leveyden tasan. */
/* ── "Latu"-vaihepalkki (Petri 2026-07-19): YKSI yhtenäinen täyttöraide —
 * uurteet vaiherajoilla, aksenttitäyttö + nuppi liukuvat edistymisen mukaan.
 * Desktopissa nimet rajakohtien alla; @640 nimirivi vaihtuu yhteen kapeaan
 * riviin (aktiivinen nimi + "4/5"). Ei per-vaihe-liitoksia → mikään ei voi
 * jäädä vajaaksi (vanha pallo+viiva-malli hajosi tumman tenantin sivulla). */
.rc-progress {
    position: relative;
    margin-bottom: 20px;
    padding: 4px 48px 0 0;   /* oikealla tila ⋮-kebabille */
}
.rc-progress.rc-nokebab { padding-right: 0; }
.rc-prog-track {
    position: relative;
    height: 6px;
    border-radius: 3px;
    background: var(--rc-border);
}
.rc-prog-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    border-radius: 3px;
    background: var(--rc-accent);
    transition: width 0.24s ease;
}
/* Petri 23.8.2026: TASAINEN palkki. Pykälät (.rc-prog-notch), nuppi
 * (.rc-prog-knob), vaiheiden nimet (.rc-prog-names) ja mobiilin "4/5"-lukema
 * (.rc-prog-cap) poistettu — edistyminen kulkee lomakkeen mukaan eikä
 * vaiheittain, joten vaiherajoja ei ole mitä merkitä. */
@media (max-width: 640px) {
    .rc-prog-track { height: 5px; }
}

/* Jakoviiva-elementti (editorin lisättävä osioerotin) */
.rc-divider {
    border: 0;
    border-top: 1px solid var(--rc-border);
    margin: 10px 0;
}

/* ---------- card ---------- */

.rc-card {
    background:    var(--rc-bg);
    border:        1px solid var(--rc-border);
    border-radius: var(--rc-radius);
    box-shadow:    var(--rc-shadow);
    padding:       22px;
}

/* Teemasuoja myös otsikoille (Petri 2026-07-19): teeman h2/h3-typografia
 * (esim. Divin harvennetut versaalit + oma fontti) ei saa korvata lomakkeen
 * omaa otsikkotyyliä — sama ulkoasu kuin editorissa. */
.rc-booking-wizard h2,
.rc-card h2 {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--rc-text) !important;
    border: 0 !important;
}
.rc-booking-wizard h3 {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    color: var(--rc-text) !important;
    border: 0 !important;
}

.rc-card .rc-card-help {
    margin: 0 0 16px 0;
    color:  var(--rc-text-muted);
    font-size: 14px;
}

/* ---------- photographer chooser (alpha.32) ---------- */

.rc-photog-chooser {
    margin: 0 0 18px 0;
    padding: 14px;
    background: var(--rc-bg-soft);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
}
.rc-photog-chooser-label {
    font-size: 13px;
    font-weight: 400;
    color: var(--rc-text-muted);
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 10px;
}
.rc-photog-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.rc-photog-chip {
    appearance: none;
    border: 1px solid var(--rc-border);
    background: var(--rc-bg);
    color: var(--rc-text);
    font: inherit;
    font-size: 14px;
    padding: 12px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    -webkit-tap-highlight-color: transparent;
}
/* Petri 23.8.2026: kuvaajalla on kasvot — kuva Henkilöstön photo_url:sta,
 * ilman kuvaa nimikirjain samassa koossa (chippien korkeus ei hyppisi). */
.rc-photog-chip-face { display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px 7px 7px; }
.rc-photog-ava {
    width: 30px; height: 30px; flex: 0 0 auto;
    border-radius: 50%; object-fit: cover; display: block;
    background: var(--rc-bg-soft);
}
.rc-photog-ava-fallback {
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600; color: var(--rc-text-muted);
    border: 1px solid var(--rc-border);
}
.rc-photog-chip.rc-selected .rc-photog-ava-fallback {
    color: var(--rc-btn-text); border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.14);
}
.rc-photog-name { line-height: 1; }
@media (hover: hover) { .rc-photog-chip:hover { border-color: var(--rc-accent); } }
.rc-photog-chip.rc-selected {
    background:   var(--rc-btn-metal);
    border-color: var(--rc-btn-edge);
    color:        var(--rc-btn-text);
    text-shadow:  var(--rc-btn-text-shadow);
    box-shadow:   var(--rc-btn-bevel);
    font-weight:  500;
}
.rc-photog-hint {
    margin-top: 10px;
    font-size: 13px;
    color: var(--rc-text-muted);
}

/* ---------- selectable cards / chips ---------- */

.rc-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

/* Kehyksetön lepotila kokeiltiin .949:ssä ja palautettiin .950:ssä (Petri):
 * jokainen laatta piirtää oman reunuksensa myös valitsemattomana. */
.rc-option {
    appearance:    none;
    background:    var(--rc-bg);
    border:        1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding:       14px;
    color:         var(--rc-text);
    cursor:        pointer;
    font-size:     15px;
    font-weight:   400;
    text-align:    center;   /* Petri 2026-07-18: koko/valmius-nappien tekstit keskelle */
    transition:    border-color .15s ease, background .15s ease, transform .05s ease;
}
/* HOVER VAIN HIIRELLE (Petri 16.9.2026: "251-300m2 tulee esivalittuna").
   iOS jättää :hover-tilan voimaan siihen kohtaan, jossa sormi viimeksi oli:
   Seuraava-napin kohdalle piirtyvä seuraavan askeleen viimeinen ruutu sai
   aksenttireunan ja NÄYTTI valitulta, vaikka mitään ei ollut valittu
   (Seuraava pysyi harmaana). Kosketuslaitteella hover-tyyliä ei tarvita. */
@media (hover: hover) {
    .rc-option:hover { border-color: var(--rc-accent); }
}
/* Jäi .949:stä: laatoilla ei ollut omaa fokustyyliä, vaan ne nojasivat
 * selaimen oletusoutlineen. Näppäimistökäyttö on selkeämpi tämän kanssa. */
.rc-option:focus-visible {
    outline: 2px solid var(--rc-accent);
    outline-offset: 2px;
}
.rc-option:active { transform: scale(.99); }
.rc-option.rc-selected {
    border-color: var(--rc-accent);
    background:   var(--rc-accent-bg);
}

/* ── Pakettilaattojen yhdistyminen (Petri 23.8.2026) ─────────────────────
 * Laatat eivät katoa vaan LIITTYVÄT YHTEEN: kumpikin liukuu puolikkaan
 * ruudukkovälin (10px gap → 5px) toisiaan kohti, sisäkulmat suoristuvat ja
 * sisäreunaviiva häviää — kaksi laatikkoa muuttuu yhdeksi leveäksi.
 * Lopputila: yksi laatta joka vie molempien ruudut (grid-column: span 2). */
@keyframes rc-merge-join-right {
    from { transform: translateX(0); }
    to   { transform: translateX(5px); }
}
@keyframes rc-merge-join-left {
    from { transform: translateX(0); }
    to   { transform: translateX(-5px); }
}
@keyframes rc-merge-in {
    from { opacity: .55; }
    to   { opacity: 1; }
}
.rc-option.rc-merging { pointer-events: none; z-index: 1; }
/* Vasemmanpuoleinen: liukuu oikealle, sen OIKEA reuna on sisäreuna. */
.rc-option.rc-merging-right {
    animation: rc-merge-join-right .26s ease forwards;
    border-top-right-radius: 0; border-bottom-right-radius: 0;
    border-right-color: transparent;
}
/* Oikeanpuoleinen: liukuu vasemmalle, sen VASEN reuna on sisäreuna. */
.rc-option.rc-merging-left {
    animation: rc-merge-join-left .26s ease forwards;
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    border-left-color: transparent;
}
/* Yhdistynyt laatta jää LEVEÄKSI — se on kahden tuotteen paketti, ei yksi
 * tuote muiden joukossa. Mobiilin 2-sarakkeisessa ruudukossa span 2 = koko rivi. */
.rc-option-merged {
    grid-column: span 2;
    animation: rc-merge-in .3s ease;
}
@media (prefers-reduced-motion: reduce) {
    .rc-option.rc-merging-right,
    .rc-option.rc-merging-left,
    .rc-option-merged { animation: none; }
}

.rc-option-meta {
    display:    block;
    margin-top: 4px;
    font-size:  13px;
    font-weight: 400;
    color:      var(--rc-text-muted);
}

.rc-option-price {
    display:     block;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 500;
    color: var(--rc-accent);
}
.rc-option-price del { color: var(--rc-text-muted); font-weight: 400; }

/* alpha.62: option chips that carry an icon or thumbnail become centered
 * cards (visual on top, label below). Text-only options are unchanged. */
.rc-option-has-visual { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 14px 12px; }
.rc-option-visual { display: flex; align-items: center; justify-content: center; pointer-events: none; }
.rc-option-icon { color: var(--rc-accent); }
.rc-option-icon svg { width: 32px; height: 32px; display: block; }
.rc-option-thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--rc-bg-soft); }
.rc-option-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rc-option-has-visual .rc-option-label { font-weight: 400; }

/* ---------- summary bar ---------- */

.rc-summary {
    margin-top: 16px;
    background: var(--rc-bg-soft);
    border-radius: var(--rc-radius-sm);
    padding: 12px 14px;
    font-size: 14px;
    color: var(--rc-text);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rc-summary-row { display: flex; justify-content: space-between; }
.rc-summary-row.rc-summary-total { font-weight: 600; font-size: 16px; padding-top: 6px; border-top: 1px solid var(--rc-border); margin-top: 4px; }

/* ---------- actions ---------- */

.rc-actions {
    display: flex;
    flex-wrap: wrap;   /* arviopalkki (flex-basis 100%) omalle rivilleen nappien yläpuolelle */
    gap: 10px;
    margin-top: 18px;
}

.rc-btn {
    flex: 1;
    padding: 14px 16px;
    border-radius: 999px;    /* alpha.74: pill */
    border: 1.5px solid var(--rc-border);
    background: var(--rc-bg);
    color: var(--rc-text);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease, filter .15s ease;
}
.rc-btn:hover { border-color: var(--rc-text-muted); }

/* alpha.74: brushed-metal primary (finish-aware via the --rc-btn-* tokens) */
.rc-btn-primary {
    background: var(--rc-btn-grad);
    border: 1px solid var(--rc-btn-edge);
    color: var(--rc-btn-text);
    box-shadow: var(--rc-btn-bevel);
    text-shadow: var(--rc-btn-text-shadow);
}
.rc-btn-primary:hover { background: var(--rc-btn-grad); filter: brightness(1.05); }
.rc-btn-primary:active:not(:disabled) { filter: brightness(.96); box-shadow: inset 0 2px 5px rgba(0,0,0,.28); }
.rc-btn-primary:disabled,
.rc-btn:disabled { opacity: .5; cursor: not-allowed; filter: saturate(.55); }

.rc-step-stub {
    padding: 28px 18px;
    text-align: center;
    color: var(--rc-text-muted);
    background: var(--rc-bg-soft);
    border-radius: var(--rc-radius-sm);
    font-style: italic;
}

/* ---------- address step ---------- */

.rc-form { display: flex; flex-direction: column; gap: 14px; }

/* Osoite + rappu/ovikoodi samalla rivillä (Petri 2026-07-19); kapenee
 * allekkain kun tila loppuu — desktop ja mobiili molemmat ykkösluokkaa. */
.rc-addr-row { display: flex; flex-wrap: wrap; gap: 14px; }
.rc-addr-row .rc-field:first-child { flex: 2 1 320px; min-width: 0; }
.rc-addr-row .rc-field:last-child  { flex: 1 1 220px; min-width: 0; }

/* ── TEEMASUOJA (Petri 2026-07-19): sivuston teema (esim. Divi) tyylittää
 * lomake-elementit omilla säännöillään ja KUTISTI kentät livenä — editorin
 * esikatselu (oma bleed-guard wp-adminissa) näytti tarkoitetun koon. Sama
 * pariteetti julkiselle lomakkeelle: eksplisiittiset kenttäsäännöt
 * !importantilla, jotta live = editori = suunniteltu ulkoasu. Vain
 * tekstimäiset tyypit — checkboxilla oma sääntönsä alla. HUOM
 * :not(.fe-brand-sel): editorin brändivalitsin elää kanvaasin sisällä
 * mutta on editorin KROMIA, ei lomakkeen kenttä — !important söi sen
 * pillityylin (regressio .538→.543, Petri 2026-07-19). ── */
.rc-booking-wizard input[type="text"],
.rc-booking-wizard input[type="tel"],
.rc-booking-wizard input[type="email"],
.rc-booking-wizard input[type="number"],
.rc-booking-wizard input[type="search"],
.rc-booking-wizard textarea,
.rc-booking-wizard select:not(.fe-brand-sel) {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border: 1.5px solid var(--rc-border) !important;
    border-radius: var(--rc-radius-sm) !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    min-height: 0 !important;
    height: auto !important;
    font-family: inherit !important;
    color: var(--rc-text) !important;
    background: var(--rc-bg) !important;
    box-shadow: none !important;
    margin: 0 !important;
}
.rc-booking-wizard input[type="text"]:focus,
.rc-booking-wizard input[type="tel"]:focus,
.rc-booking-wizard input[type="email"]:focus,
.rc-booking-wizard input[type="number"]:focus,
.rc-booking-wizard input[type="search"]:focus,
.rc-booking-wizard textarea:focus,
.rc-booking-wizard select:not(.fe-brand-sel):focus {
    outline: none !important;
    border-color: var(--rc-accent) !important;
    box-shadow: none !important;
}
.rc-booking-wizard input[type="checkbox"] {
    -webkit-appearance: auto !important;
    appearance: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    accent-color: var(--rc-accent);
    flex: 0 0 auto;
}
.rc-booking-wizard input[type="checkbox"]::before { content: none !important; }

/* Vahvistetun osoitteen kartta (Petri 2026-07-19) — harmaasävy, pyöristetty. */
.rc-addr-map {
    height: 260px;
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    overflow: hidden;
}

.rc-field { display: flex; flex-direction: column; gap: 4px; }
.rc-field-label { font-size: 14px; font-weight: 400; color: var(--rc-text); }
.rc-field input {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--rc-radius-sm);
    border: 1.5px solid var(--rc-border);
    font-size: 16px;
    font-family: inherit;
    color: var(--rc-text);
    background: var(--rc-bg);
}
.rc-field input:focus,
.rc-field textarea:focus { outline: none; border-color: var(--rc-accent); }
.rc-field textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: var(--rc-radius-sm);
    border: 1.5px solid var(--rc-border);
    font-size: 16px;
    font-family: inherit;
    color: var(--rc-text);
    background: var(--rc-bg);
    resize: vertical;
    min-height: 72px;
}
.rc-field-help { font-size: 12px; color: var(--rc-text-muted); }

/* ---------- checkbox row (customer step toggles + consent) ---------- */

.rc-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
    font-size: 14px;
    color: var(--rc-text);
    line-height: 1.4;
}
.rc-checkbox-row input[type="checkbox"] {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin: 2px 0 0 0;
    accent-color: var(--rc-accent);
    cursor: pointer;
}

/* ---------- slot-hold countdown (alpha.16) ---------- */

/* YKSI PAIKKA KOKO LOMAKKEELLA: pääpainikkeen alarivi (Petri 13.9.2026).
 *
 * Ajastin oli aiemmin pilleri kahdessa eri paikassa — irrallaan progressin ja
 * kortin välissä, ja aikavalinnassa valitun päivän alla. Kumpikin roikkui
 * tyhjässä eikä liittynyt mihinkään. Napissa ajastin on siinä mihin asiakas
 * on menossa, ja sama paikka joka vaiheella tarkoittaa ettei sitä tarvitse
 * etsiä uudestaan. */
.rc-hold-chip-slot { min-height: 0; display: flex; justify-content: center; }
.rc-btn-hold {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding-block: 9px;
    line-height: 1.25;
}
.rc-btn-hold .rc-btn-label { font-size: 15px; font-weight: 500; }
.rc-hold-chip-slot-btn:empty { display: none; }
/* Napin sisällä ajastin ei ole oma pilleri vaan napin alarivi: ei taustaa,
 * ei reunaa, väri napista (viimeistely vaihtaa --rc-btn-text). */
.rc-hold-chip-slot-btn .rc-hold-chip {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
    opacity: .75;
    font-size: 11.5px;
    font-weight: 400;
    font-style: normal;
    text-shadow: none;
}
/* Viimeinen minuutti erottuu painolla eikä värillä: napin tausta vaihtuu
 * viimeistelyn mukaan, joten kiinteä keltainen ei toimisi joka taustalla. */
.rc-hold-chip-slot-btn .rc-hold-chip-low { opacity: 1; font-weight: 600; }
.rc-hold-chip-slot-btn .rc-hold-chip-expired { font-style: italic; opacity: .6; }

/* ---------- confirm step summary sections ---------- */

/* Kaksi palstaa työpöydällä, yksi puhelimessa (Petri 13.9.2026).
   Kooste ei enää toista kutistettuja rivejä, joten se on lyhyt — kahdessa
   palstassa se mahtuu kerralla näkyviin eikä vahvistusta tarvitse etsiä
   vierittämällä. Hinnan erittely (Palvelut) ja pitkä Lisätiedot-lista saavat
   koko leveyden: niissä rivin oikea reuna on luvun paikka, ja kapea palsta
   rikkoisi sen. */
.rc-confirm-summary {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 4px;
    align-items: start;
}
@media (min-width: 720px) {
    .rc-confirm-summary { grid-template-columns: 1fr 1fr; gap: 14px 22px; }
    .rc-confirm-summary > .rc-confirm-section-wide { grid-column: 1 / -1; }
}
.rc-confirm-section { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rc-confirm-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--rc-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.rc-confirm-section .rc-summary { margin-top: 0; }

.rc-confirm-pill {
    background: var(--rc-accent-bg);
    color: var(--rc-accent);
    border-radius: var(--rc-radius-sm);
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 500;
}
.rc-warn-pill {
    background: #fff4d6;
    color: #8a6d3b;
    border-radius: var(--rc-radius-sm);
    padding: 10px 14px;
    font-size: 13px;
}

/* Osoite-ehdotukset (MML, 15.9.2026) — oma lista kentän alla.
 * z-index 9999: kelluttava Divi-osioiden päällä. */
.rc-addr-host { position: relative; }
.rc-addr-suggest {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 4px;
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    box-shadow: var(--rc-shadow);
    z-index: 9999;
    max-height: 264px;
    overflow-y: auto;
    scrollbar-width: none;
}
.rc-addr-suggest::-webkit-scrollbar { display: none; }
.rc-addr-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding: 11px 14px;
    font-size: 15px;
    color: var(--rc-text);
    cursor: pointer;
}
.rc-addr-item + .rc-addr-item { border-top: 1px solid var(--rc-border); }
.rc-addr-item:hover,
.rc-addr-item.is-hi { background: var(--rc-accent-bg); }
.rc-addr-item-city { font-size: 13px; color: var(--rc-muted, #777); white-space: nowrap; }

/* ---------- slot picker step ---------- */

.rc-date-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 6px;
    margin-bottom: 14px;
    scrollbar-width: none;
}
.rc-date-strip::-webkit-scrollbar { display: none; }

.rc-date-pill {
    flex: 0 0 auto;
    padding: 12px 14px;
    border-radius: 999px;
    background: var(--rc-bg);
    border: 1.5px solid var(--rc-border);
    color: var(--rc-text);
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
    cursor: pointer;
}
.rc-date-pill:hover { border-color: var(--rc-accent); }
.rc-date-pill.rc-selected {
    background:   var(--rc-btn-metal);
    border-color: var(--rc-btn-edge);
    color:        var(--rc-btn-text);
    text-shadow:  var(--rc-btn-text-shadow);
    box-shadow:   var(--rc-btn-bevel);
}

.rc-slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.rc-slot-pill {
    appearance: none;
    background: var(--rc-bg);
    border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    padding: 12px 8px;
    color: var(--rc-text);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
.rc-slot-pill:hover { border-color: var(--rc-accent); }
.rc-slot-pill:active { transform: scale(.98); }
.rc-slot-pill.rc-selected {
    border-color: var(--rc-accent);
    background:   var(--rc-accent-bg);
}
.rc-slot-time {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: var(--rc-text);
}
.rc-slot-staff {
    display: block;
    font-size: 12px;
    color: var(--rc-text-muted);
    margin-top: 2px;
}

/* ── päivävalitsin: vetovihje (reunahäivytys) + hiiriveto ──────────────── */
.rc-date-strip-wrap { position: relative; }
.rc-date-strip-wrap::after {
    content: '';
    position: absolute; top: 0; right: 0; bottom: 6px; width: 34px;
    background: linear-gradient(to right, rgba(255,255,255,0), var(--rc-bg));
    pointer-events: none;
}
.rc-booking-wizard.rc-theme-dark .rc-date-strip-wrap::after {
    background: linear-gradient(to right, rgba(0,0,0,0), var(--rc-bg));
}
.rc-date-strip { cursor: grab; user-select: none; }
.rc-date-strip.rc-dragging { cursor: grabbing; }

/* ── monipäiväsarakegridi (Bookly-tyyli): päivät sarakkeina, ajat allekkain ── */
/* Viikkonäkymä (Petri 23.8.2026): nuolet päiväsarakkeiden SIVUILLA, ei
 * yläpuolella. Viisi saraketta mahtuu aina leveyteen — EI vaakascrollia,
 * myöskään puhelimessa. Sarakkeet kutistuvat, eivät karkaa reunan yli. */
/* Petri 16.9.2026: KOKO ALUEEN LEVYINEN. Sarakkeet saavat koko leveyden;
 * nuolet istuvat leveällä MA- ja PE-otsikoiden sisällä ja kapealla omalla
 * rivillään päivärivin päällä (.rc-week-narrow, JS valitsee alueen leveydestä). */
.rc-week {
    display: flex; flex-direction: column; gap: 6px;
    margin: 4px 0 2px;
    container-type: inline-size; container-name: rcweek;
}
.rc-week-nav { display: none; justify-content: space-between; align-items: center; }
.rc-week-narrow .rc-week-nav { display: flex; }
.rc-daycol-head { position: relative; }
.rc-daycol-head .rc-weeknav-btn {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; margin: 0; font-size: 14px;
}
.rc-daycol-head .rc-weeknav-prev { left: 6px; }
.rc-daycol-head .rc-weeknav-next { right: 6px; }
/* Cascade: nämä kyselyt ovat yllä olevien perussääntöjen JÄLKEEN, koska sama
 * tarkkuus + myöhempi voittaa. Petri 16.9.2026: "Saisiko millään nuolet pysymään rivin sisällä kuten
 * aluksi" — kapealla alueella nuoli pienenee ja MA/PE-otsikon teksti väistää
 * sitä, jotta nuoli pysyy otsikossa. Rivin päälle vasta alle 330 px. */
@container rcweek (max-width: 640px) {
    .rc-daycol-head .rc-weeknav-btn { width: 22px; height: 22px; font-size: 13px; }
    .rc-daycol-head .rc-weeknav-prev { left: 3px; }
    .rc-daycol-head .rc-weeknav-next { right: 3px; }
    .rc-week:not(.rc-week-narrow) .rc-daycol:first-child .rc-daycol-head { padding-left: 25px; }
    .rc-week:not(.rc-week-narrow) .rc-daycol:last-child  .rc-daycol-head { padding-right: 25px; }
}
@container rcweek (max-width: 340px) {
    .rc-daycol-head .rc-weeknav-btn { width: 19px; height: 19px; font-size: 12px; }
    .rc-daycol-head .rc-weeknav-prev { left: 2px; }
    .rc-daycol-head .rc-weeknav-next { right: 2px; }
    .rc-week:not(.rc-week-narrow) .rc-daycol:first-child .rc-daycol-head { padding-left: 22px; padding-right: 1px; }
    .rc-week:not(.rc-week-narrow) .rc-daycol:last-child  .rc-daycol-head { padding-right: 22px; padding-left: 1px; }
    /* Vain kun nuolet ovat otsikoissa — omalla rivillä (3-tila) kaikki
       päivämäärät ovat samankokoisia (Petri 16.9.2026). */
    .rc-week:not(.rc-week-narrow) .rc-daycol:first-child .rc-daycol-dm,
    .rc-week:not(.rc-week-narrow) .rc-daycol:last-child  .rc-daycol-dm { font-size: 10.5px; letter-spacing: 0; }
}
.rc-weeknav-btn {
    appearance: none; flex: 0 0 auto; margin: 0;
    width: 32px; height: 32px; border-radius: 50%;
    border: 1.5px solid var(--rc-border);
    background: var(--rc-bg); color: var(--rc-text);
    font: inherit; font-size: 16px; line-height: 1; cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}
/* Vain hiirelle: iOS:n tahmea :hover jätti nuoleen korostusreunan napautuksen jälkeen (katselmointi 16.9.2026). */
@media (hover: hover) { .rc-weeknav-btn:hover:not(:disabled) { border-color: var(--rc-accent); } }
.rc-weeknav-btn:disabled { color: var(--rc-border); cursor: default; }
.rc-weeknav-btn:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }
.rc-daycols {
    width: 100%; min-width: 0;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px; align-items: stretch;   /* lokerot samankorkuisiksi */
}
/* Petri 23.8.2026: jokainen päivä on OMA LOKERONSA — pyöristetty laatikko,
 * jonka yläosa on päiväotsikko ja sisällä sen ajat. Tyhjä lokero kertoo
 * itsessään ettei päivälle ole aikoja; erillistä "Täynnä"-tekstiä ei ole. */
.rc-daycol {
    min-width: 0;
    display: flex; flex-direction: column;
    background: var(--rc-bg);
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    overflow: hidden;                 /* otsikko noudattaa nurkkia */
    min-height: 118px;                /* tyhjä päivä ei litisty riviksi */
}
/* Petri 23.8.2026: VÄRI KUULUU VARATTAVILLE AJOILLE, ei päiväotsikoille.
 * Otsikko kertoo vain minkä päivän lokerosta on kyse, joten se on neutraali
 * ja erottuu ohuella alaviivalla. Näin silmä osuu siihen mitä voi klikata. */
.rc-daycol-head {
    background: var(--rc-bg-soft);
    color: var(--rc-text-muted);
    border-bottom: 1px solid var(--rc-border);
    padding: 7px 4px;
    text-align: center;
    line-height: 1.2;
    letter-spacing: .01em;
}
.rc-daycol-wd { display: block; font-size: 11.5px; font-weight: 500; text-transform: uppercase; }
.rc-daycol-dm { display: block; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--rc-text); }
.rc-daycol-times { display: flex; flex-direction: column; gap: 6px; padding: 6px; }
/* Varattava aika = ainoa värillinen elementti lokerossa. */
.rc-daycol-slot {
    appearance: none;
    background: var(--rc-accent-bg);
    border: 1.5px solid var(--rc-accent);
    border-radius: var(--rc-radius-sm);
    padding: 11px 6px;
    color: var(--rc-text);
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
@media (hover: hover) { .rc-daycol-slot:hover { background: var(--rc-bg); } }
.rc-daycol-slot:active { transform: scale(.98); }
.rc-daycol-slot.rc-selected {
    background: var(--rc-btn-metal);
    border-color: var(--rc-btn-edge);
    color: var(--rc-btn-text);
    text-shadow: var(--rc-btn-text-shadow);
    box-shadow: var(--rc-btn-bevel);
}
.rc-daycol-slot .rc-slot-time { display: block; font-size: 15px; font-weight: 600; color: var(--rc-accent); }
/* ── SÄÄKUVAKE VARATTAVASSA AJASSA (Petri 14.9.2026) ──────────────────────
   Kuvake on kellonajan ALLA eikä sen vieressä: sarake on viidesosa leveydestä,
   ja rinnakkain kellonaika kapenisi. Se on myös HILLITTY — aika on se mitä
   valitaan, sää vain kertoo mitä silloin on odotettavissa. Sateelle ja sumulle
   annetaan enemmän painoa kuin selkeälle, koska juuri ne haittaavat kuvausta
   (ja dronella erityisesti näkyvyyttä). */
/* SIJAINTI: KUVAKE VASEMPAAN, KELLONAIKA KESKELLE (Petri 14.9.2026) — mutta
   vain kun ne mahtuvat rinnakkain; kapeassa sarakkeessa kuvake putoaa ajan
   alle kuten puhelimessa.
   Ehto on CONTAINER QUERY eikä media query: leveys joka ratkaisee on
   SARAKKEEN, ei näytön. Sama ero puri tänään jo kerran siirtovalitsimessa,
   jossa näyttöön sidottu pienennys ei auttanut kapeaa korttia leveällä
   ruudulla. Jos selain ei tue container-kyselyitä, voimassa jää allekkainen
   asettelu — turvallinen oletus, ei rikkinäinen. */
.rc-daycol-times { container-type: inline-size; container-name: rcslot; }
.rc-daycol-slot { position: relative; }
.rc-slot-saa { display: block; margin-top: 3px; line-height: 0; }
@container rcslot (min-width: 92px) {
    /* Kuvake pois tekstivirrasta: kellonaika säilyy napin keskellä eikä
       siirry kuvakkeen tieltä. */
    .rc-daycol-slot .rc-slot-saa {
        position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
        margin-top: 0;
    }
}
.rc-slot-saa svg { width: 16px; height: 16px; fill: none; stroke: currentColor;
    stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rc-daycol-slot .rc-slot-saa { color: var(--rc-text-muted, #6b7280); opacity: .75; }
.rc-daycol-slot .rc-saa-sade,
.rc-daycol-slot .rc-saa-rantu,
.rc-daycol-slot .rc-saa-lumi,
.rc-daycol-slot .rc-saa-ukkonen,
.rc-daycol-slot .rc-saa-sumu { color: var(--rc-text, #1f2933); opacity: 1; }
.rc-daycol-slot.rc-selected .rc-slot-saa { color: var(--rc-btn-text, #fff); opacity: .9; }
.rc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.rc-daycol-slot .rc-slot-staff { display: block; font-size: 11px; color: var(--rc-text-muted); margin-top: 2px; }
.rc-daycol-slot.rc-selected .rc-slot-time,
.rc-daycol-slot.rc-selected .rc-slot-staff { color: var(--rc-btn-text); }
.rc-daycol-slot .rc-slot-split { display: block; font-size: 10px; font-weight: 600; margin-top: 2px; color: var(--rc-accent); }
.rc-daycol-slot.rc-selected .rc-slot-split { color: var(--rc-btn-text); }

/* ── aikajananäkymä (vanha, ei enää käytössä slot-vaiheessa) ──────────── */
.rc-timeline-scroll {
    max-height: 480px;
    overflow-y: auto;
    margin: 4px 0 2px;
    border: 1px solid var(--rc-border);
    border-radius: var(--rc-radius-sm);
    background: var(--rc-bg);
}
.rc-timeline { position: relative; margin: 6px 0; }
.rc-tl-axis { position: absolute; inset: 0; pointer-events: none; }
.rc-tl-hour {
    position: absolute; left: 0; right: 0;
    border-top: 1px solid var(--rc-border);
}
.rc-tl-hourlabel {
    position: absolute; left: 6px; top: -8px;
    font-size: 11px; font-weight: 500; color: var(--rc-text-muted);
    background: var(--rc-bg); padding-right: 5px;
    font-variant-numeric: tabular-nums;
}
.rc-tl-lanes { position: absolute; left: 52px; right: 8px; top: 0; bottom: 0; }
.rc-tl-busy {
    position: absolute; left: 0; right: 0;
    background: repeating-linear-gradient(45deg,
        var(--rc-bg-soft) 0, var(--rc-bg-soft) 6px,
        rgba(120,130,140,.10) 6px, rgba(120,130,140,.10) 12px);
    border: 1px solid var(--rc-border);
    border-radius: 6px;
    z-index: 1;
    overflow: hidden;
}
.rc-tl-busy span {
    position: absolute; top: 4px; left: 8px;
    font-size: 11px; font-weight: 500; color: var(--rc-text-muted);
    letter-spacing: .02em;
}
.rc-tl-slot {
    position: absolute;
    appearance: none;
    background: var(--rc-bg);
    border: 1.5px solid var(--rc-accent);
    border-radius: 7px;
    padding: 5px 7px;
    color: var(--rc-text);
    cursor: pointer;
    text-align: left;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
    transition: background .12s ease, transform .05s ease, box-shadow .12s ease;
}
.rc-tl-slot:hover { background: var(--rc-accent-bg); box-shadow: 0 2px 8px rgba(15,23,42,.14); }
.rc-tl-slot:active { transform: scale(.99); }
.rc-tl-slot.rc-selected {
    background: var(--rc-btn-metal);
    border-color: var(--rc-btn-edge);
    color: var(--rc-btn-text);
    text-shadow: var(--rc-btn-text-shadow);
    box-shadow: var(--rc-btn-bevel);
}
.rc-tl-slot .rc-slot-time { font-size: 13px; font-weight: 600; line-height: 1.15; }
.rc-tl-slot .rc-slot-staff { font-size: 11px; margin-top: 1px; }
.rc-tl-slot.rc-selected .rc-slot-time,
.rc-tl-slot.rc-selected .rc-slot-staff { color: var(--rc-btn-text); }
.rc-tl-slot .rc-slot-split {
    display: inline-block; margin-top: 2px;
    font-size: 10px; font-weight: 600;
    color: var(--rc-accent);
}
.rc-tl-slot.rc-selected .rc-slot-split { color: var(--rc-btn-text); }

/* ── elävä hinta-arvio alapalkissa (ARVIO vasemmalla, napit oikealla) ──── */
.rc-actions.rc-has-estimate {
    align-items: center;
    border-top: 1px solid var(--rc-border);
    padding-top: 18px;
    margin-top: 24px;
}
.rc-actions.rc-has-estimate .rc-btn { flex: 0 0 auto; min-width: 150px; }
/* Kaksi otsikoitua saraketta (VARATTU AIKA | HINTA-ARVIO) pystyerottimella.
 * Kevyt versaaliotsikko, luku painavana, tarkenne harmaana alle. */
.rc-estimate-bar {
    flex: 1 1 auto;
    display: flex; flex-direction: row; align-items: flex-start;
    gap: 0; min-width: 0; flex-wrap: wrap;
}
.rc-estimate-col {
    display: flex; flex-direction: column; gap: 3px;
    min-width: 0; padding-right: 22px;
}
.rc-estimate-col + .rc-estimate-col {
    padding-left: 22px; border-left: 1px solid var(--rc-border);
}
.rc-estimate-label {
    font-size: 11.5px; font-weight: 500; text-transform: uppercase;
    letter-spacing: .08em; color: var(--rc-text-muted);
}
.rc-estimate-val {
    font-size: 26px; font-weight: 600; color: var(--rc-text);
    line-height: 1.15; white-space: nowrap;
}
.rc-estimate-val strong { font-weight: 600; }
/* ALV-tarkenne kulkee luvun perässä samalla rivillä, mutta kevyempänä. */
.rc-estimate-vat {
    font-size: 14px; font-weight: 400; color: var(--rc-text-muted);
    margin-left: 5px;
}
.rc-estimate-sub {
    font-size: 13px; font-weight: 400; color: var(--rc-text-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    .rc-estimate-bar { flex-basis: 100%; }
    .rc-estimate-col { padding-right: 16px; }
    .rc-estimate-col + .rc-estimate-col { padding-left: 16px; }
    .rc-estimate-val { font-size: 22px; }
    .rc-actions.rc-has-estimate .rc-btn { flex: 1 1 auto; min-width: 0; }
}

/* ── kehyksetön upotus (Divi määrää leveyden + reunattomuuden) ─────────── */
.rc-booking-wizard.rc-frame-none .rc-card {
    border: 0; box-shadow: none; background: transparent; padding: 0;
}

/* ── Vaihe 2 — schema-driven layout ────────────────────────────────────
   Slots sit in a 12-col grid on desktop and stack to a single column as the
   form narrows (Bookly-style: right-hand blocks move below). rc-field-legend
   labels each bare option-grid within a slot (the legacy step h2 no longer
   carries that when several fields share a step). Desktop AND mobile are both
   first-class — verified at both widths. */
.rc-slots {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px 24px;
    align-items: start;
}
.rc-slot-w1  { grid-column: span 1; }
.rc-slot-w2  { grid-column: span 2; }
.rc-slot-w3  { grid-column: span 3; }
.rc-slot-w4  { grid-column: span 4; }
.rc-slot-w5  { grid-column: span 5; }
.rc-slot-w6  { grid-column: span 6; }
.rc-slot-w7  { grid-column: span 7; }
.rc-slot-w8  { grid-column: span 8; }
.rc-slot-w9  { grid-column: span 9; }
.rc-slot-w10 { grid-column: span 10; }
.rc-slot-w11 { grid-column: span 11; }
.rc-slot-w12 { grid-column: span 12; }
.rc-field-block + .rc-field-block { margin-top: 14px; }
.rc-field-legend {
    font-weight: 400;
    font-size: 14px;
    color: var(--rc-text);
    margin: 2px 0 8px;
}
/* Vastattujen ryhmien lista aktiivisen ryhmän yllä (wizard-jono). */
/* Vastatut rivit LOKEROON (Petri 13.9.2026).
 *
 * Rivit venyivät koko lomakkeen leveydeltä, jolloin otsikon ja vastauksen
 * väliin jäi tyhjä kenttä eikä silmä yhdistänyt niitä pariksi. Sama lokero
 * kuin koosteen tiedoilla (.rc-summary) kokoaa ne yhdeksi luettavaksi
 * ryhmäksi, ja kahdessa palstassa vastaus on lähellä otsikkoaan.
 *
 * Rivit pysyvät nappeina: koko rivi avaa ryhmän muokattavaksi. */
.rc-done-list {
    margin: 0 0 4px;
    background: var(--rc-bg-soft);
    border-radius: var(--rc-radius-sm);
    padding: 12px 14px;
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 26px;
    row-gap: 4px;
}
@media (min-width: 720px) {
    .rc-done-list { grid-template-columns: 1fr 1fr; }
}
.rc-done-list:empty { display: none; padding: 0; }
.rc-done-list + .rc-slots { margin-top: 18px; }
/* Vahvistusvaiheessa lista on koosteen osio "Kohde ja aika" puolikkaassa
 * palstassa (Petri 13.9.2026, malli A) — silloin se ei jakaudu kahteen
 * palstaan sisällään eikä tarvitse alamarginaalia, sillä koosteen grid-gap
 * hoitaa välit. */
.rc-confirm-section > .rc-done-list { margin: 0; grid-template-columns: 1fr; }

/* Kutistettu valintaryhmä (Petri 23.8.2026): "Otsikko … valinta" yhdellä
 * rivillä. Koko rivi on nappi — klikkaus avaa ryhmän muokattavaksi. Ei omaa
 * laatikkoa, vain ohut alaviiva, jotta rivit lukeutuvat listana.
 *
 * TYYLI ON SAMA KUIN KOOSTEEN RIVEILLÄ (.rc-summary-row, Petri 13.9.2026):
 * sama tekstikoko ja -paino molemmissa sarakkeissa, sama riviväli. Aiemmin
 * rivit olivat isompia ja painavampia kuin viereisen lokeron rivit, jolloin
 * lokerot näyttivät kahdelta eri komponentilta. Muutos koskee VAIN tätä
 * lokeroa — koosteen ja muiden lokeroiden omat tyylit ovat ennallaan.
 *
 * ✓-merkki poistettiin: rivi on olemassa vain kun siihen on vastattu, joten
 * merkki toistui joka rivillä kertomatta mitään. */
.rc-field-collapsed {
    appearance: none;
    display: flex; align-items: baseline; gap: 12px;
    width: 100%; padding: 0; min-width: 0;
    /* Petri 23.8.2026: ei vaakaviivoja rivien väliin — otsikko vasemmalla ja
     * vastaus oikealla riittää erottamaan rivit, ja viivat tekivät lomakkeesta
     * taulukon näköisen. */
    background: none; border: 0;
    color: var(--rc-text); cursor: pointer;
    font: inherit; text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.rc-field-collapsed:hover .rc-field-collapsed-value { color: var(--rc-accent); }
.rc-field-collapsed:focus-visible { outline: 2px solid var(--rc-accent); outline-offset: 2px; }
.rc-field-collapsed-label {
    flex: 0 0 auto; font-size: 14px; color: var(--rc-text);
}
/* Arvo työntyy oikeaan reunaan ja RIVITTYY: pitkä palvelulista tai aika
 * tarkenteineen katkesi ennen kolmeen pisteeseen, ja juuri se tieto on se
 * jonka asiakas haluaa tarkistaa. */
.rc-field-collapsed-value {
    flex: 1 1 auto; min-width: 0; text-align: right;
    font-size: 14px; font-weight: 400; color: var(--rc-text);
    white-space: normal; overflow: visible; text-overflow: clip;
    transition: color .15s ease;
}
@media (max-width: 640px) {
    .rc-field-collapsed { gap: 10px; }
}

/* Kirjautuminen lomakkeen sisällä (15.9.2026): kenttä ja nappi rinnakkain,
   puhelimessa allekkain. */
.rc-inline-login { display: flex; flex-direction: column; gap: 10px; }
/* Kirjautumattomalle kirjautumislohkon rinnalla olevat kysymykset ovat
   lukittuja: haaleat, ei kosketusta, ei näppäimistöfokusta (inert). */
.rc-slot-locked { opacity: .38; pointer-events: none; user-select: none; }
/* Ruutu = Kohdetyypin vaihtoehtoruutu (Petri 15.9.2026: "matcha tyylillisesti
   kohdetyypin lokeroihin"): sama reunus, pyöristys ja tausta; kenttä ilman
   omaa reunusta ruudun sisällä, nappi oikeassa reunassa. */
.rc-inline-login-card {
    display: flex; align-items: center; gap: 10px;
    /* Sama korkeus kuin Kohdetyypin ruudulla (kuvake + nimi). */
    min-height: 86px; box-sizing: border-box;
    background: var(--rc-bg); border: 1.5px solid var(--rc-border);
    border-radius: var(--rc-radius-sm); padding: 8px 8px 8px 14px;
    transition: border-color .15s ease;
}
.rc-inline-login-card:focus-within { border-color: var(--rc-accent); }
/* Teeman (Divi) input-tyylit piirtävät kentälle oman reunuksen ja taustan —
   ruudun sisällä kenttä on paljas, joten ne kumotaan tarkemmalla valitsimella. */
.rc-booking-wizard .rc-inline-login-card input,
.rc-booking-wizard .rc-inline-login-card input[type="tel"],
.rc-booking-wizard .rc-inline-login-card input[type="text"] {
    flex: 1 1 auto; min-width: 0; width: auto; margin: 0;
    border: 0 !important; border-radius: 0; box-shadow: none !important; background: transparent !important;
    padding: 8px 0; font-size: 16px; font-family: inherit; color: var(--rc-text); line-height: 1.3;
}
.rc-booking-wizard .rc-inline-login-card input:focus { outline: none !important; box-shadow: none !important; }
.rc-inline-login-card input::placeholder { color: var(--rc-text-muted); }
.rc-inline-login-card .rc-btn { flex: none; margin: 0; }
.rc-inline-login-msg { margin: 0; }
.rc-inline-login-back { align-self: flex-start; font-size: 13px; color: var(--rc-text-muted); text-decoration: underline; }

@media (max-width: 640px) {
    /* Stack every slot to full width — right-hand columns move below. */
    .rc-slots > .rc-slot { grid-column: span 12 !important; }
    .rc-slots { gap: 16px; }
    /* Puhelimessa lokero ei mahdu kentän viereen — se putoaa sen alle. */
    .rc-field-pair { flex-direction: column; align-items: stretch; gap: 14px; }
    /* Petri 16.9.2026: "layout räjähtää auki" — leveän tilan flex-basis
     * 280px on pystysuunnassa KORKEUS, joten liitelohko venyi 280 px:iin
     * ja jätti tyhjän aukon. Pystyssä perusmitta on sisällön mukaan. */
    .rc-field-pair > .rc-field-attach-inline { flex: 0 0 auto; width: auto; }
}

@media (max-width: 560px) {
    /* Viisi saraketta pysyy — vain mitat kutistuvat. */
    .rc-week { gap: 4px; }
    .rc-weeknav-btn { width: 26px; height: 26px; font-size: 14px; }
    .rc-daycols { gap: 4px; }
    .rc-daycol { min-height: 96px; }
    .rc-daycol-head { padding: 6px 2px; }
    .rc-daycol-wd { font-size: 10px; }
    .rc-daycol-dm { font-size: 11.5px; }
    .rc-daycol-times { gap: 4px; padding: 4px; }
    .rc-daycol-slot { padding: 8px 2px; }
    .rc-daycol-slot .rc-slot-time { font-size: 12.5px; }
    }

@media (max-width: 480px) {
    .rc-booking-wizard { margin: 0; }
    .rc-card { border-radius: 0; box-shadow: none; border-left: 0; border-right: 0; padding: 18px; }
    .rc-options { grid-template-columns: 1fr 1fr; }
    .rc-slot-grid { grid-template-columns: 1fr 1fr; }
}


/* alpha.504 (Petri): ruksilistat vaakaan — rivit kiertyvät tarvittaessa. */
.rc-checkbox-grid { display: flex; flex-wrap: wrap; gap: 8px 26px; margin: 2px 0 4px; }
.rc-checkbox-grid .rc-checkbox-row { margin: 0; white-space: nowrap; }

/* ── Vaihe 5: kelluva tilaus + jaettu tarjous ────────────────────────── */
.rc-floating-note {
    border: 1.5px solid var(--rc-accent, #222);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--rc-accent-tint, #f3f4f6);
}
.rc-floating-note h3 { margin: 0 0 6px; font-size: 16px; }
.rc-floating-note p { margin: 0; color: var(--rc-muted, #555); }
/* ── KELLUVAN KÄYNNIN ALUSTAVA TOIVEPÄIVÄ (Petri 14.9.2026) ───────────────
   Päivä, ei kellonaikaa: ulkokuvat ja drone siirtyvät säästä, joten tunnin
   tarkkuus olisi lupaus jota ei voi pitää. Päivät ovat siksi tavallisia
   valintanappeja eivätkä aikaruudukko — muoto kertoo itsessään, että kyse on
   toiveesta eikä varatusta ajasta. "Ei toivetta" on ensimmäisenä ja se on
   oletus, jotta valinta ei tunnu pakolliselta. */
/* ── ILMATILAHUOMIO TILAUKSESSA (Petri 14.9.2026) ─────────────────────────
   Näkyy VAIN kun dronekuvaus EI ONNISTU (Petri 14.9.2026). Lupavaatimus ei
   ole tilaajan asia: kuvaaja hakee luvan, ja tieto lukee keikkakortilla —
   tilaajalle se olisi epäilys ilman toimenpidettä. Vapaa ilmatila ei tuota
   viestiä lainkaan: hiljaisuus on oikea vastaus "saako lentää" -kysymykseen
   silloin kun saa. */
.rc-airspace { margin: 14px 0 0; padding: 13px 16px; border-radius: 12px;
    border: 1.5px solid var(--rc-border, #d0d4d9); background: var(--rc-bg-soft, #f7f8fa); }
.rc-airspace strong { display: block; font-size: 15px; margin-bottom: 3px; }
.rc-airspace p { margin: 0; font-size: 14px; color: var(--rc-text-muted, #6b7280); line-height: 1.45; }
.rc-airspace-kielto { border-color: #d9534f; background: #fdecea; }
.rc-airspace-kielto strong { color: #c0392b; }
/* Sade on este mutta ei lopullinen: kuvaus siirtyy, ei peruunnu. Siksi se on
   huomio eikä varoitus — eri sävy kuin ilmatilan rajoitukselle. */
.rc-airspace-saa { border-color: #b9c6d2; background: #f2f6fa; }

.rc-floating-days { margin-top: 14px; }
.rc-floating-days h4 { margin: 0 0 4px; font-size: 15px; font-weight: 600; }
.rc-floating-days-help { margin: 0 0 10px; font-size: 13px; color: var(--rc-text-muted, #6b7280); }
.rc-floating-day-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-floating-day {
    appearance: none;
    border: 1.5px solid var(--rc-border, #d0d4d9);
    background: var(--rc-bg, #fff);
    color: var(--rc-text, #1f2933);
    border-radius: 999px;
    padding: 9px 14px;
    font: inherit; font-size: 14px; font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .05s ease;
}
@media (hover: hover) { .rc-floating-day:hover { border-color: var(--rc-accent, #222); } }
.rc-floating-day:active { transform: scale(.97); }
.rc-floating-day:focus-visible { outline: 2px solid var(--rc-accent, #222); outline-offset: 2px; }
.rc-floating-day.rc-selected {
    background: var(--rc-btn-metal, var(--rc-accent, #222));
    border-color: var(--rc-btn-edge, var(--rc-accent, #222));
    color: var(--rc-btn-text, #fff);
    text-shadow: var(--rc-btn-text-shadow, none);
    box-shadow: var(--rc-btn-bevel, none);
}
.rc-slot-split {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--rc-accent, #222);
    margin-top: 2px;
}
.rc-split-note {
    margin-top: 10px;
    padding: 10px 14px;
    border-left: 3px solid var(--rc-accent, #222);
    border-radius: 4px;
    background: var(--rc-accent-tint, #f3f4f6);
    font-size: 13.5px;
    color: var(--rc-muted, #444);
}

/* ── Vaihe 6: web-chat-widget (varausassistentti) ────────────────────── */
.rc-agent-bubble {
    position: fixed; right: 20px; bottom: 20px; z-index: 9998;
    width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--rc-accent, #222); color: #fff; font-size: 24px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.rc-agent-panel {
    position: fixed; right: 20px; bottom: 84px; z-index: 9998;
    width: min(360px, calc(100vw - 40px)); height: 440px; max-height: 70vh;
    display: flex; flex-direction: column;
    background: #fff; border: 1px solid rgba(0,0,0,.12); border-radius: 14px;
    box-shadow: 0 8px 30px rgba(0,0,0,.22); overflow: hidden;
    font-size: 14px;
}
.rc-agent-head { padding: 12px 16px; font-weight: 600; background: var(--rc-accent, #222); color: #fff; }
.rc-agent-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.rc-agent-msg { max-width: 85%; padding: 8px 12px; border-radius: 12px; white-space: pre-wrap; line-height: 1.45; }
.rc-agent-msg-bot { background: #f1f2f4; color: #222; align-self: flex-start; border-bottom-left-radius: 4px; }
.rc-agent-msg-me { background: var(--rc-accent, #222); color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
.rc-agent-typing { color: #888; }
.rc-agent-inputrow { display: flex; gap: 8px; padding: 10px; border-top: 1px solid rgba(0,0,0,.08); }
.rc-agent-input { flex: 1; padding: 9px 12px; border: 1.5px solid rgba(0,0,0,.15); border-radius: 10px; font: inherit; }
.rc-agent-send { border: 0; border-radius: 10px; padding: 9px 14px; background: var(--rc-accent, #222); color: #fff; font: inherit; font-weight: 500; cursor: pointer; }

/* ── Liitteet (alpha.975): kuvat/PDF tilaukseen ───────────────────────── */
.rc-attach { margin: 4px 0 6px; }
.rc-attach-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 14px; border: 1px dashed var(--rc-border); border-radius: 10px;
    background: var(--rc-bg-soft); color: var(--rc-text);
    font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
}
.rc-attach-btn:hover { border-color: var(--rc-text-muted); }
.rc-attach-list { display: flex; flex-direction: column; gap: 6px; }
.rc-attach-list:not(:empty) { margin-bottom: 8px; }
.rc-attach-row {
    display: flex; align-items: center; gap: 10px;
    padding: 6px 8px; border: 1px solid var(--rc-border); border-radius: 10px;
    background: var(--rc-bg, #fff);
}
.rc-attach-thumb {
    width: 40px; height: 40px; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--rc-border); flex: none;
}
.rc-attach-doc {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--rc-bg-soft); color: var(--rc-text-muted);
    font-size: 11px; font-weight: 600;
}
.rc-attach-name { flex: 1; min-width: 0; font-size: 13px; color: var(--rc-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rc-attach-del {
    flex: none; width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: transparent; color: var(--rc-text-muted);
    font-size: 17px; line-height: 1; cursor: pointer;
}
.rc-attach-del:hover { background: var(--rc-bg-soft); color: var(--rc-text); }
.rc-attach-busy { color: var(--rc-text-muted); font-size: 13px; border-style: dashed; }
.rc-attach-err { color: #a33; font-size: 12.5px; margin: 4px 0 6px; }

/* Inline-lokero (alpha.1055): liite ei ole oma rivinsä vaan isäntäkentän
 * (Avainboksi, Rappu) OIKEA reuna — input kaventuu, lokero saa loput.
 * Kohdistus YLÄREUNASTA: lokeron alla oleva ohjeteksti kasvattaa sen
 * korkeutta, ja alareunakohdistus painoi isäntäkentän silloin alemmas kuin
 * rivin muut kentät (nähty livenä 1.9.2026). */
.rc-field-pair { display: flex; align-items: flex-start; gap: 12px; }
.rc-field-pair > .rc-field-block { flex: 2 1 0; min-width: 100px; margin-top: 0; }   /* 2/3 (Petri 16.9.2026) */
/* Lokero on KIINTEÄN levyinen: rivi näyttää samalta oli liitteitä tai ei
 * (Petri 1.9.2026 — osoite ja Rappu eivät saa luhistua kuvia lisättäessä). */
.rc-field-pair > .rc-field-attach-inline { flex: 1 1 0; min-width: 0; max-width: 100%; }   /* 1/3 (Petri 16.9.2026) */
/* Petri 16.9.2026: "layout räjähtää auki" — yllä oleva 280 px on pystyparissa
 * (puhelin, flex-direction: column) KORKEUS. Tämä ylikirjoitus on tässä eikä
 * aiemmassa 640px-lohkossa, koska sama tarkkuus + myöhempi sääntö voittaa. */
@media (max-width: 640px) {
    .rc-field-pair > .rc-field-attach-inline { flex: 0 0 auto; width: auto; }
}
.rc-field-attach-inline .rc-field-legend { margin: 0 0 4px; }
.rc-field-attach-inline .rc-attach {
    margin: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 5px;
}
/* display:contents → liitekortit ovat suoraan saman flex-rivin jäseniä
 * napin kanssa, joten ne asettuvat peräkkäin yhdelle riville. */
.rc-field-attach-inline .rc-attach-list { display: contents; }
/* Inline-lokerossa liite on pelkkä KUVARUUTU poistoruksilla — tiedostonimi
 * jää pois (Petri 1.9.2026: nimestä saa kutistaa, kunhan kuva ja ruksi
 * säilyvät). Näin kaikki viisi liitettä ja nappi mahtuvat samalle riville
 * ilman että rivin mitat muuttuvat. Nimi on tallella title-vihjeessä. */
.rc-field-attach-inline .rc-attach-row {
    position: relative; flex: 0 0 auto; width: 40px; height: 40px;
    padding: 0; gap: 0; max-width: none; border-radius: 9px;
    box-sizing: border-box; overflow: visible;
}
.rc-field-attach-inline .rc-attach-name { display: none; }
.rc-field-attach-inline .rc-attach-thumb {
    width: 100%; height: 100%; border-radius: 8px; font-size: 10px;
}
.rc-field-attach-inline .rc-attach-del {
    position: absolute; top: -6px; right: -6px; width: 18px; height: 18px;
    padding: 0; border: 1px solid var(--rc-border); background: var(--rc-bg, #fff);
    font-size: 12px; line-height: 1; border-radius: 50%;
}
/* Nappi täyttää rivin lopun, jotta liiterivi päättyy samaan reunaan kuin
 * lomakkeen muut rivit. */
.rc-field-attach-inline .rc-attach-btn {
    flex: 1 1 auto; min-width: 44px; min-height: 44px; width: auto;
    justify-content: center; box-sizing: border-box; padding: 9px 8px;
    border-radius: var(--rc-radius-sm); white-space: nowrap;
}
.rc-field-attach-inline .rc-attach-err { flex-basis: 100%; margin: 0; }
.rc-field-attach-inline .rc-attach-busy { flex: 0 0 auto; }
.rc-field-attach-inline .rc-field-help { margin: 4px 0 0; }

/* ── Osioitu rakenne (alpha.977): vaihepalkin pykälät, nuppi ja nimet —
   renderöidään VAIN form_layout=sections -tilassa (alpha.952:n malli). */
.rc-prog-notch {
    position: absolute;
    top: -1px; bottom: -1px;
    width: 3px;
    background: var(--rc-bg);
    transform: translateX(-50%);
}
.rc-prog-knob {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--rc-accent);
    border: 2.5px solid var(--rc-bg);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    transform: translate(-50%, -50%);
    transition: left 0.24s ease;
}
.rc-prog-names { position: relative; height: 22px; margin-top: 10px; }
.rc-progress-step {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 13px;
    font-weight: 400;
    color: var(--rc-text-muted);
    white-space: nowrap;
    transition: color 0.2s ease;
}
.rc-prog-names .rc-progress-step:first-child { transform: none; }
.rc-prog-names .rc-progress-step:last-child { transform: translateX(-100%); }
.rc-progress-step.rc-step-done { color: var(--rc-text); opacity: 0.55; }
.rc-progress-step.rc-step-active { color: var(--rc-text); opacity: 1; }
.rc-prog-cap { display: none; margin-top: 9px; align-items: baseline; justify-content: space-between; }
.rc-prog-cap b { font-size: 14px; font-weight: 600; color: var(--rc-text); }
.rc-prog-cap span { font-size: 12.5px; color: var(--rc-text-muted); font-variant-numeric: tabular-nums; }
@media (max-width: 640px) {
    .rc-prog-names { display: none; }
    .rc-prog-cap { display: flex; }
}

/* ── Pinoutuva vaakaan (alpha.977): vastaukset chipeinä vaakarivillä,
   tulevat kysymykset ohuina pystyviivoina rivin lopussa. */
.rc-strip {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
    margin: 2px 0 14px;
}
.rc-strip-chip {
    display: inline-flex; align-items: center;
    padding: 6px 11px; border: 1px solid var(--rc-border); border-radius: 999px;
    background: var(--rc-bg-soft); color: var(--rc-text);
    font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer;
    max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rc-strip-chip:hover { border-color: var(--rc-text-muted); }
.rc-strip-in { animation: rcStripIn 0.28s ease; }
@keyframes rcStripIn {
    from { opacity: 0; transform: translateX(26px); }
    to   { opacity: 1; transform: none; }
}
.rc-strip-ticks { display: inline-flex; align-items: center; gap: 7px; margin-left: 6px; }
.rc-strip-tick {
    width: 2px; height: 16px; border-radius: 1px;
    background: var(--rc-border);
}

/* ── Sisältöelementit (alpha.978): otsikko, väliotsikko, ohjeteksti ─────── */
.rc-form-heading {
    font-size: 20px; font-weight: 600; color: var(--rc-text);
    margin: 6px 0 4px; letter-spacing: -0.01em;
}
.rc-form-subheading {
    font-size: 15px; font-weight: 600; color: var(--rc-text);
    margin: 4px 0 2px;
}
.rc-form-note { margin: 2px 0 6px; }

/* ── PUHELIMESSA KOKO RUUDUN LEVEYS (Petri 16.9.2026: "voisiko ajanvaraus
   layouttua hieman leventää, että sivuilla on vähemmän tilaa … kalenterin
   osat ja nuolet on niin pienet, että niitä saa siritellä"). Sivupohjan
   (Divi-rivin) reunat veivät 390 px:n puhelimessa 45 px per puoli → viikko
   oli 300 px ja lokero 55 px. Lomake murtautuu rivin reunoista ulos samalla
   calc(50% − 50vw) -kuviolla kuin seurantasivu, 8 px marginaalilla, ja
   kortin sisätäyte kapenee. Viikko ≈ 350 px, lokero ≈ 66 px. Säännöt ovat
   tiedoston LOPUSSA, jotta ne voittavat samantarkkuiset perussäännöt. */
/* Petri 16.9.2026 (tarkennus): "kivempi, että koko layout ja kaikki tekstit
   ei ole aivan laidasta laitaan, mutta ainakin kalenteri näyttää liian
   pieneltä" → VAIN VIIKKORIVI murtautuu reunoista ulos, muu lomake pysyy
   palstassa. 8 px ruudun reunasta. */
/* Petri 16.9.2026 (2. tarkennus): "kalenteri tulee nyt liian reunoille.
   palaa takaisin edellisiin marginaaleihin" → viikkorivi pysyy palstassa. */
@media (max-width: 640px) {
    /* Nuolen näkyvä koko pysyy, kosketusalue kasvaa ~42 px:iin. */
    .rc-daycol-head .rc-weeknav-btn { position: absolute; }
    /* Ylöspäin vain 6 px: .rc-daycol { overflow: hidden } leikkaa loput (katselmointi 16.9.2026). */
.rc-daycol-head .rc-weeknav-btn::after { content: ''; position: absolute; inset: -6px -10px -10px; }
}
@media (max-width: 560px) {
    .rc-daycol-slot { padding: 10px 2px; }
    .rc-daycol-slot .rc-slot-time { font-size: 14px; }
}

/* ── 3 PÄIVÄN IKKUNA PYSTYPUHELIMESSA (Petri 16.9.2026) ──
   Kolme leveää lokeroa: otsikot ja ajat normaalikokoisina, vaikka kapean
   näytön media query pienentää viiden sarakkeen mitat. Tiedoston lopussa,
   jotta voittaa edellä olevat samantarkkuiset säännöt. */
.rc-daycols { will-change: transform; }
/* Petri 16.9.2026: "voin scrollata aikoja sivuttain eli seuraavat ovat jo
   valmiina heti ruudun oikealla puolella. snap kuitenkin päiviin." →
   natiivi vaakavieritys (Applen fysiikka ilmaiseksi), 3 lokeroa näkyvissä,
   pysähdys päivän alkuun. Ei näkyvää vierityspalkkia. */
.rc-daycols-3 {
    display: flex; overflow-x: auto; overflow-y: hidden; gap: 8px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 2px;
}
.rc-daycols-3::-webkit-scrollbar { display: none; }
/* Leveys varaa raon: kolme lokeroa mahtuu ruudulle myös silloin, kun väliin
   osuu rako (Petri 16.9.2026). Laskenta (katselmointi 16.9.2026): kolme
   lokeroa = 100% − 30 px; rako-elementti tuo mukanaan yhden 8 px gapin lisää,
   joten sen oma leveys on 6 px → rako yhteensä 14 px ja rivi täsmää 100 %:iin.
   Aiempi 14 px leikkasi kolmannen lokeron 8 px. */
.rc-daycols-3 > .rc-daycol { flex: 0 0 calc((100% - 30px) / 3); scroll-snap-align: start; }
/* Ei-peräkkäiset arkipäivät (ke → ma) erotetaan pelkällä leveämmällä raolla
   (Petri 16.9.2026; siksak-katkomerkki kokeiltiin ja poistettiin). */
.rc-daycols-3 > .rc-daycol-break { flex: 0 0 6px; }
.rc-daycols-3 > .rc-daycols-empty { flex: 1 1 100%; }
/* Petri 16.9.2026: "voit suurentaa myös ruutuja ja tekstejä sen mukaan". */
/* Petri 16.9.2026 (tarkennus): "kalenteria voi vieläkin hieman pienentää". */
.rc-daycols-3 .rc-daycol { min-height: 120px; }
.rc-daycols-3 .rc-daycol-head { padding: 8px 4px; }
.rc-daycols-3 .rc-daycol-wd { font-size: 11.5px; }
.rc-daycols-3 .rc-daycol-dm { font-size: 14px; }
.rc-daycols-3 .rc-daycol-times { gap: 5px; padding: 5px; }
.rc-daycols-3 .rc-daycol-slot { padding: 9px 4px; }
.rc-daycols-3 .rc-daycol-slot .rc-slot-time { font-size: 15px; }
.rc-daycols-3 .rc-slot-saa svg { width: 16px; height: 16px; }
@media (prefers-reduced-motion: reduce) { .rc-daycols { will-change: auto; } }
.rc-daycols-empty { grid-column: 1 / -1; padding: 22px 8px; text-align: center; color: var(--rc-text-muted); font-size: 14px; }