/* Tupurin maja standalone booking form — salonvilpas.fi visual tokens (no WP/Elementor) */

:root {
    /* Brand — custom-css.css :root + live salonvilpas.fi */
    --vilpas-red: #990132;
    --vilpas-blue: #005177;
    --vilpas-blue-dark: #003955;
    --vilpas-dark-bg: #1f1f1f;
    --vilpas-body-bg: #2c2c2c;
    --vilpas-breadcrumb-bg: #333333;
    --vilpas-link: #90c9ef;
    /* Light-on-dark chrome (footer band stays dark in light theme) */
    --vilpas-link-on-dark: #90c9ef;
    --vilpas-focus: #6eb7e8;
    --vilpas-notice-border: #6eb7e8;

    /* Typography */
    --font-body: Montserrat, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: Teko, Montserrat, system-ui, sans-serif;

    /* Page chrome */
    --bg: var(--vilpas-body-bg);
    --text: #ffffff;
    --muted: #c0c0c0;
    --surface: var(--vilpas-dark-bg);
    --border: #454545;

    /* Form panel (mm-gb-varaus-form) */
    --form-bg: #ebe9e9;
    --form-text: #2c2c2c;
    --form-muted: #4a4a4a;
    --form-border: #8d8d8d;
    --form-border-light: #c0c0c0;
    --form-input-bg: #ffffff;
    --form-radius: 7px;
    --form-card-radius: var(--form-radius);

    /* Reservation status palette (SSOT — edit only here; do not hardcode elsewhere)
       free / partial / pending / booked / cleaning: stripe (--free … --cleaning)
       Light surfaces (calendar, legends): --status-*-bg + --*-text on labels
       Dark admin badges: --status-*-fg on tinted --surface */
    --free: #2f7a4a;
    --free-text: #1a4d2e;
    --partial: #7a6200;
    --partial-text: #4a3b00;
    --pending: #8a6b00;
    --pending-text: #4a3b00;
    --booked: #990132;
    --booked-text: #5c001b;
    --cleaning: #434a4f;
    --cleaning-text: #2b3034;
    --status-pending-fg: #f5e6a8;
    --status-accepted-fg: #c8ebd4;
    --status-denied-fg: #f5c4c4;
    --status-free-bg: color-mix(in srgb, var(--free) 26%, #fff);
    --status-partial-bg: color-mix(in srgb, var(--partial) 32%, #fff);
    --status-booked-bg: color-mix(in srgb, var(--booked) 24%, #fff);
    --status-pending-bg: color-mix(in srgb, var(--pending) 26%, #fff);
    --status-cleaning-bg: color-mix(in srgb, var(--cleaning) 26%, #fff);
    --status-pending-border: color-mix(in srgb, var(--pending) 62%, var(--form-border-light));
    --selected: var(--vilpas-blue);

    --radius: var(--form-radius);
    --focus: var(--vilpas-focus);
    --error: var(--vilpas-red);
    --transition: 0.3s ease;

    font-family: var(--font-body);
}

/* Resolved theme — :root defaults match dark; boot script sets data-theme before paint */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="light"] {
    color-scheme: light;
    --bg: #ececec;
    --text: #2c2c2c;
    --muted: #4a4a4a;
    --surface: #ffffff;
    --border: #b8b8b8;
    --vilpas-link: #004a6b;
    --vilpas-focus: #005177;
    --vilpas-breadcrumb-bg: #e2e2e2;
}

[data-theme="light"] a:hover,
[data-theme="light"] a:focus-visible {
    color: var(--vilpas-blue-dark);
}

[data-theme="light"] .card {
    border-color: var(--border);
}

[data-theme="light"] .ohjeet-title {
    color: var(--text);
}

[data-theme="light"] .ohjeet-subheading {
    color: var(--form-muted);
}

[data-theme="light"] .ohjeet-note dt {
    color: var(--form-muted);
}

[data-theme="light"] .ohjeet-note dd {
    color: var(--muted);
}

[data-theme="light"] .ohjeet-aside {
    color: var(--muted);
}

[data-theme="light"] .admin-front-toolbar {
    background: color-mix(in srgb, var(--surface) 94%, var(--vilpas-blue) 6%);
    border-bottom-color: var(--border);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--vilpas-red) 12%, transparent);
}

[data-theme="light"] .admin-front-toolbar-user {
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    border-color: var(--border);
}

[data-theme="light"] .admin-front-toolbar-user-label {
    color: var(--muted);
}

[data-theme="light"] .admin-front-toolbar-email {
    color: var(--text);
}

[data-theme="light"] .admin-front-toolbar-link,
[data-theme="light"] .admin-front-toolbar-current {
    color: color-mix(in srgb, var(--text) 82%, var(--muted));
    border-color: var(--border);
}

[data-theme="light"] .admin-front-toolbar-link:hover,
[data-theme="light"] .admin-front-toolbar-link:focus-visible {
    color: var(--vilpas-blue-dark);
    background: color-mix(in srgb, var(--vilpas-blue) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-blue) 40%, var(--border));
}

[data-theme="light"] .admin-front-toolbar-link--primary {
    color: #fff;
    background: var(--vilpas-blue);
    border-color: var(--vilpas-blue);
}

[data-theme="light"] .admin-front-toolbar-link--primary:hover,
[data-theme="light"] .admin-front-toolbar-link--primary:focus-visible {
    color: #fff;
    background: var(--vilpas-blue-dark);
    border-color: var(--vilpas-blue-dark);
}

[data-theme="light"] .admin-front-toolbar-current {
    color: var(--muted);
}

[data-theme="light"] .admin-front-toolbar .btn-ghost {
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .admin-front-toolbar .btn-ghost:hover:not(:disabled),
[data-theme="light"] .admin-front-toolbar .btn-ghost:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--vilpas-blue) 10%, var(--surface));
    border-color: var(--vilpas-blue);
    color: var(--vilpas-blue-dark);
}

/* Admin page — dark-first inline styles in admin.html; override for light */
[data-theme="light"] .admin-page .site-header.admin-site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

[data-theme="light"] .admin-page .admin-header-org {
    color: var(--muted);
}

[data-theme="light"] .admin-page .admin-header-title {
    color: var(--text);
}

[data-theme="light"] .admin-page .admin-header-email {
    color: var(--text);
}

[data-theme="light"] .admin-page .admin-toolbar-label,
[data-theme="light"] .admin-page .admin-export-hint,
[data-theme="light"] .admin-page .admin-filter-field > span,
[data-theme="light"] .admin-page .admin-section-intro,
[data-theme="light"] .admin-page .admin-settings-intro,
[data-theme="light"] .admin-page .forms-intro {
    color: var(--muted);
}

[data-theme="light"] .admin-page .admin-header-user-label {
    color: var(--muted);
}

[data-theme="light"] .admin-page .admin-header-user {
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
    border-color: var(--border);
}

[data-theme="light"] .admin-page .admin-header-hub-link {
    color: color-mix(in srgb, var(--text) 72%, var(--muted));
    border-color: var(--border);
}

[data-theme="light"] .admin-page .admin-header-hub-link > .icon {
    color: color-mix(in srgb, var(--muted) 80%, var(--vilpas-blue));
}

[data-theme="light"] .admin-page .admin-header-hub-link:hover,
[data-theme="light"] .admin-page .admin-header-hub-link:focus-visible {
    color: var(--vilpas-blue-dark);
    background: color-mix(in srgb, var(--vilpas-blue) 8%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-blue) 40%, var(--border));
}

[data-theme="light"] .admin-page .admin-header-actions .theme-toggle-btn {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

[data-theme="light"] .admin-page .admin-header-actions .theme-toggle-btn:hover,
[data-theme="light"] .admin-page .admin-header-actions .theme-toggle-btn:focus-visible {
    color: var(--vilpas-blue-dark);
    background: color-mix(in srgb, var(--vilpas-blue) 8%, var(--surface));
    border-color: var(--vilpas-blue);
}

[data-theme="light"] .admin-page .admin-header-actions .theme-toggle-btn.is-active {
    color: #fff;
    background: var(--vilpas-blue);
    border-color: var(--vilpas-blue);
}

[data-theme="light"] .admin-page .admin-header-session .btn-ghost,
[data-theme="light"] .admin-page #admin-notices-toggle.btn-ghost,
[data-theme="light"] .admin-page #admin-flash-history-toggle.btn-ghost {
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .admin-page .admin-header-session .btn-ghost:hover:not(:disabled),
[data-theme="light"] .admin-page .admin-header-session .btn-ghost:focus-visible:not(:disabled),
[data-theme="light"] .admin-page #admin-notices-toggle.btn-ghost:hover:not(:disabled),
[data-theme="light"] .admin-page #admin-notices-toggle.btn-ghost:focus-visible:not(:disabled),
[data-theme="light"] .admin-page #admin-flash-history-toggle.btn-ghost:hover:not(:disabled),
[data-theme="light"] .admin-page #admin-flash-history-toggle.btn-ghost:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--vilpas-blue) 10%, var(--surface));
    border-color: var(--vilpas-blue);
    color: var(--vilpas-blue-dark);
}

[data-theme="light"] .admin-page .admin-section-nav-wrap,
[data-theme="light"] .admin-page .admin-filter-tabs {
    background: color-mix(in srgb, var(--surface) 90%, var(--bg));
}

[data-theme="light"] .admin-page .admin-section-nav button {
    color: color-mix(in srgb, var(--text) 82%, var(--muted));
}

/* Light theme: admin.html hover colors are pale-on-dark; override so text/icons stay readable. */
[data-theme="light"] .admin-page .admin-section-nav button[data-section="reservations"]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-section-nav button[data-section="reservations"]:focus-visible:not([aria-selected="true"]) {
    color: var(--vilpas-blue);
}

[data-theme="light"] .admin-page .admin-section-nav button[data-section="myclub"]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-section-nav button[data-section="myclub"]:focus-visible:not([aria-selected="true"]) {
    color: #4a3578;
}

[data-theme="light"] .admin-page .admin-section-nav button[data-section="forms"]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-section-nav button[data-section="forms"]:focus-visible:not([aria-selected="true"]) {
    color: var(--free-text);
}

[data-theme="light"] .admin-page .admin-section-nav button[data-section="pages"]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-section-nav button[data-section="pages"]:focus-visible:not([aria-selected="true"]) {
    color: #5c4a1e;
}

[data-theme="light"] .admin-page .admin-section-nav button[data-section="settings"]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-section-nav button[data-section="settings"]:focus-visible:not([aria-selected="true"]) {
    color: color-mix(in srgb, var(--text) 88%, #000);
}

[data-theme="light"] .admin-page .admin-section-nav button[data-section="notices"]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-section-nav button[data-section="notices"]:focus-visible:not([aria-selected="true"]) {
    color: var(--booked-text);
}

[data-theme="light"] .admin-page .admin-filter-tabs button {
    color: var(--text);
}

/* Generic non-status filter tabs (myClub / notices / etc.): do not keep #fff / pale hover. */
[data-theme="light"] .admin-page .admin-filter-tabs button:not([data-status]):hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-filter-tabs button:not([data-status]):focus-visible:not([aria-selected="true"]) {
    color: var(--vilpas-blue-dark);
    background: color-mix(in srgb, var(--vilpas-blue) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-blue) 40%, var(--border));
}

[data-theme="light"] .admin-page .admin-toolbar--myclub .admin-filter-tabs button[data-myclub-filter]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-toolbar--myclub .admin-filter-tabs button[data-myclub-filter]:focus-visible:not([aria-selected="true"]) {
    color: #4a3578;
    background: color-mix(in srgb, var(--admin-nav-myclub, #4a3578) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--admin-nav-myclub, #4a3578) 38%, var(--border));
}

[data-theme="light"] .admin-page .admin-toolbar--notices .admin-filter-tabs button[data-notices-filter]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-toolbar--notices .admin-filter-tabs button[data-notices-filter]:focus-visible:not([aria-selected="true"]) {
    color: var(--booked-text);
    background: color-mix(in srgb, var(--admin-nav-notices, #a91c1c) 10%, var(--surface));
    border-color: color-mix(in srgb, var(--admin-nav-notices, #a91c1c) 36%, var(--border));
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="pending"]:not([aria-selected="true"]) {
    color: var(--pending-text);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="accepted"]:not([aria-selected="true"]) {
    color: var(--free-text);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="denied"]:not([aria-selected="true"]) {
    color: var(--booked-text);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="all"]:not([aria-selected="true"]) {
    color: var(--vilpas-blue-dark);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="trash"]:not([aria-selected="true"]) {
    color: var(--cleaning-text);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status][aria-selected="true"] {
    color: #fff;
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="pending"][aria-selected="true"] {
    background: color-mix(in srgb, var(--partial) 82%, #000);
    border-color: color-mix(in srgb, var(--partial) 70%, #000);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="accepted"][aria-selected="true"] {
    /* Match dark-theme fill: white on plain --free fails AAA 7:1 (~5.2:1) */
    background: color-mix(in srgb, var(--free) 82%, #000);
    border-color: color-mix(in srgb, var(--free) 70%, #000);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="denied"][aria-selected="true"] {
    background: var(--booked);
    border-color: color-mix(in srgb, var(--booked) 80%, #000);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="all"][aria-selected="true"] {
    background: var(--vilpas-blue);
    border-color: color-mix(in srgb, var(--vilpas-blue) 80%, #000);
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status="trash"][aria-selected="true"] {
    background: color-mix(in srgb, var(--cleaning) 78%, #000);
    border-color: color-mix(in srgb, var(--cleaning) 70%, #000);
}

[data-theme="light"] .admin-stats-heading {
    color: var(--text);
}

[data-theme="light"] .admin-page .admin-stats {
    background: color-mix(in srgb, var(--surface) 92%, var(--bg));
}

[data-theme="light"] .admin-page .admin-list-meta {
    color: #3d3d3d;
}

[data-theme="light"] .admin-page .admin-filter-tabs button[data-status]:hover:not([aria-selected="true"]),
[data-theme="light"] .admin-page .admin-filter-tabs button[data-status]:focus-visible:not([aria-selected="true"]) {
    background: color-mix(in srgb, var(--vilpas-blue) 8%, var(--surface));
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .admin-page .admin-toolbar-actions .btn-ghost,
[data-theme="light"] .admin-page .admin-toolbar-actions a.btn {
    background: var(--surface);
    border-color: var(--border);
    color: var(--text);
}

[data-theme="light"] .admin-page .admin-toolbar-actions .btn-ghost:hover:not(:disabled),
[data-theme="light"] .admin-page .admin-toolbar-actions .btn-ghost:focus-visible:not(:disabled),
[data-theme="light"] .admin-page .admin-toolbar-actions a.btn:hover,
[data-theme="light"] .admin-page .admin-toolbar-actions a.btn:focus-visible {
    background: color-mix(in srgb, var(--vilpas-blue) 10%, var(--surface));
    border-color: var(--vilpas-blue);
    color: var(--vilpas-blue-dark);
}

[data-theme="light"] .admin-page .admin-list-panel {
    border-color: var(--border);
}

[data-theme="light"] .admin-page .admin-list-title {
    color: var(--text);
}

[data-theme="light"] .ohjeet-legend,
[data-theme="light"] .cal-legend {
    color: var(--form-muted);
}

/* Admin dark theme — WCAG AA/AAA contrast on filter tabs, settings nav, and form panels */
[data-theme="dark"] .admin-page {
    /* White label on this fill needs >= 7:1 (AAA); #556068 was 6.44:1 */
    --admin-nav-settings: #454e56;
}

[data-theme="dark"] .admin-page .admin-filter-tabs button[data-status="trash"]:not([aria-selected="true"]) {
    color: color-mix(in srgb, var(--muted) 92%, #fff);
}

[data-theme="dark"] .admin-page .admin-section-nav button[data-section="settings"][aria-selected="true"] {
    background: var(--admin-nav-settings);
    border-color: color-mix(in srgb, var(--admin-nav-settings) 82%, #fff);
    color: #fff;
}

[data-theme="dark"] .admin-page .admin-settings-fieldset,
[data-theme="dark"] .admin-page .admin-settings-fieldset .admin-check-row,
[data-theme="dark"] .admin-page .admin-settings-fieldset .admin-field,
[data-theme="dark"] .admin-page .admin-email-setting-row .admin-check-row,
[data-theme="dark"] .admin-page .admin-email-setting-row .admin-check-row span,
[data-theme="dark"] .admin-page .admin-settings-check-grid .admin-check-row {
    color: var(--form-text);
}

[data-theme="dark"] .admin-page .admin-settings-fieldset legend {
    color: var(--form-muted);
}

[data-theme="dark"] .admin-page .admin-email-settings-header {
    color: var(--form-text);
}

[data-theme="dark"] .admin-page .admin-settings-fieldset .admin-field input,
[data-theme="dark"] .admin-page .admin-settings-fieldset .admin-field textarea,
[data-theme="dark"] .admin-page .admin-settings-fieldset .admin-field select,
[data-theme="dark"] .admin-page .admin-events-filter select {
    color: var(--form-text);
    background: var(--form-input-bg);
}

/* Settings cards use light form surfaces — headings/meta must not inherit page --text (white). */
.admin-settings-card .admin-toolbar--panel-head h2,
.admin-settings-card .admin-toolbar--panel-head h3,
#admin-events-heading {
    color: var(--form-text);
}

[data-theme="dark"] .admin-page .admin-settings-card .admin-events-list > li,
[data-theme="dark"] .admin-page .admin-settings-card .admin-event-item,
[data-theme="dark"] .admin-page .admin-settings-card .admin-event-type {
    color: var(--form-text);
}

[data-theme="dark"] .admin-page .admin-settings-card .admin-event-meta,
[data-theme="dark"] .admin-page .admin-settings-card .admin-settings-help,
[data-theme="dark"] .admin-page .admin-settings-card .admin-settings-save-hint,
[data-theme="dark"] .admin-page .admin-settings-card .admin-events-summary,
[data-theme="dark"] .admin-page .admin-settings-card .admin-events-filter > span,
[data-theme="dark"] .admin-page .admin-settings-card .admin-events-empty {
    color: var(--form-muted);
}

[data-theme="dark"] .admin-page .admin-settings-card .admin-events-empty-title {
    color: var(--form-text);
}

[data-theme="dark"] .admin-page .admin-settings-intro,
[data-theme="dark"] .admin-page .admin-section-intro,
[data-theme="dark"] .admin-page .forms-intro {
    color: var(--muted);
}

/* Intro copy inside light form cards must use form muted, not chrome --muted */
[data-theme="dark"] .admin-page .form-section .admin-section-intro,
[data-theme="dark"] .admin-page .form-section .admin-settings-intro,
[data-theme="dark"] .admin-page .form-section .forms-intro {
    color: var(--form-muted);
}

[data-theme="dark"] .admin-page .admin-settings-notice {
    color: var(--form-text);
    background: color-mix(in srgb, var(--partial) 28%, var(--form-input-bg));
    border-color: color-mix(in srgb, var(--partial-text) 45%, var(--form-border-light));
}

.turnstile-container {
    margin: 0 0 0.75rem;
    min-height: 0;
}

.site-notice-banner,
.form-maintenance-banner {
    margin: 0 0 1.25rem;
    padding: 1rem 1.15rem;
    border: 2px solid var(--form-border, #c9c4b8);
    border-radius: var(--form-radius, 7px);
    background: var(--form-input-bg, #fff);
    color: var(--form-text, #1a1a1a);
    font-size: 1.05rem;
    line-height: 1.45;
    font-weight: 600;
}

.site-notice-banner--maintenance,
.form-maintenance-banner {
    /* Light / default: solid red-tint panel, dark red text (readable on form-bg and page-bg) */
    border-color: var(--vilpas-red);
    background: #f8e6eb;
    color: #5c001b;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vilpas-red) 25%, transparent);
    position: sticky;
    top: 0.5rem;
    z-index: 4;
}

.site-notice-banner--info {
    border-color: var(--vilpas-blue);
    background: #e5f2f8;
    color: #003955;
    font-weight: 600;
}

.site-notice-banner .status-with-icon,
.form-maintenance-banner .status-with-icon {
    margin: 0;
    gap: 0.65rem;
    align-items: flex-start;
}

.site-notice-banner .status-with-icon > .icon,
.form-maintenance-banner .status-with-icon > .icon {
    color: inherit;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

[data-theme="light"] .site-notice-banner--maintenance,
[data-theme="light"] .form-maintenance-banner {
    border-color: var(--vilpas-red);
    background: #f8e6eb;
    color: #5c001b;
}

[data-theme="light"] .site-notice-banner--info {
    border-color: var(--vilpas-blue);
    background: #e5f2f8;
    color: #003955;
}

[data-theme="dark"] .site-notice-banner--maintenance,
[data-theme="dark"] .form-maintenance-banner {
    background: color-mix(in srgb, var(--vilpas-red) 28%, #1a1a1a);
    border-color: #e0708a;
    color: #ffe8ee;
}

[data-theme="dark"] .site-notice-banner--info {
    background: color-mix(in srgb, var(--vilpas-notice-border, #6eb7e8) 26%, #1a1a1a);
    border-color: #6eb7e8;
    color: #e8f4fc;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    overflow-x: clip;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    line-height: 1.55;
    font-size: 1rem;
    overflow-x: clip;
}

a {
    color: var(--vilpas-link);
}

a:hover,
a:focus-visible {
    color: #b8daf5;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 1px;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    z-index: 100;
    padding: 0.65rem 1rem;
    background: var(--vilpas-red);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    border-radius: var(--form-radius);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.skip-link:focus {
    position: fixed;
    left: 0;
    top: 0;
    width: auto;
    height: auto;
    overflow: visible;
}

/* Staff session bar on public pages (injected by lib/admin-toolbar.js).
   Document flow only — scrolls away with the page (not sticky/fixed). */
.admin-front-toolbar {
    position: relative;
    z-index: 2;
    background: color-mix(in srgb, var(--vilpas-dark-bg) 92%, #000);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--vilpas-red) 22%, transparent);
}

.admin-front-toolbar[hidden] {
    display: none !important;
}

.admin-front-toolbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    min-height: 3.5rem;
    padding: 0.65rem 0;
}

.admin-front-toolbar-user {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.1rem;
    margin: 0;
    min-width: 0;
    max-width: min(100%, 22rem);
    min-height: 2.75rem;
    padding: 0.35rem 0.85rem;
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.admin-front-toolbar-user-label {
    flex-shrink: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: color-mix(in srgb, #fff 78%, var(--muted));
}

.admin-front-toolbar-email {
    font-size: 0.875rem;
    font-weight: 600;
    color: color-mix(in srgb, #fff 92%, var(--muted));
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-front-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem 0.7rem;
    margin-left: auto;
}

.admin-front-toolbar-link,
.admin-front-toolbar-current {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.5rem 0.9rem;
    border: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    border-radius: var(--form-radius);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.25;
    color: color-mix(in srgb, #fff 90%, var(--muted));
    text-decoration: none;
    white-space: nowrap;
    background: transparent;
}

.admin-front-toolbar-link:hover,
.admin-front-toolbar-link:focus-visible {
    color: var(--vilpas-link);
    background: color-mix(in srgb, var(--vilpas-blue) 16%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-blue) 50%, var(--border));
    text-decoration: none;
}

.admin-front-toolbar-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vilpas-blue) 65%, transparent);
    outline-offset: 2px;
}

.admin-front-toolbar-link--primary {
    color: #fff;
    background: color-mix(in srgb, var(--vilpas-blue) 72%, #000);
    border-color: color-mix(in srgb, var(--vilpas-blue) 85%, var(--border));
}

.admin-front-toolbar-link--primary:hover,
.admin-front-toolbar-link--primary:focus-visible {
    color: #fff;
    background: var(--vilpas-blue);
    border-color: var(--vilpas-blue);
}

.admin-front-toolbar-current {
    color: color-mix(in srgb, #fff 78%, var(--muted));
    border-style: dashed;
    cursor: default;
}

/* Inherit link/button color — beats .status-with-icon > .icon { color: var(--form-muted) }
   so primary Hallinta (white on blue) stays readable in light + dark. */
.admin-front-toolbar-link > .icon,
.admin-front-toolbar-current > .icon,
.admin-front-toolbar .btn-ghost > .icon,
.admin-front-toolbar .status-with-icon > .icon {
    flex-shrink: 0;
    margin-block: 0;
    margin-top: 0;
    line-height: 1;
    color: inherit;
    transform: translateY(var(--icon-optical-nudge));
}

.admin-front-toolbar .btn-ghost {
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    background: transparent;
    border-color: color-mix(in srgb, var(--border) 85%, #fff);
    color: color-mix(in srgb, #fff 88%, var(--muted));
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    padding: 0.5rem 0.9rem;
    font-size: 0.875rem;
    min-height: 2.75rem;
    min-width: 2.75rem;
}

.admin-front-toolbar .btn-ghost:hover:not(:disabled),
.admin-front-toolbar .btn-ghost:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--vilpas-blue) 22%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-blue) 65%, var(--border));
    color: #fff;
}

@media (max-width: 560px) {
    .admin-front-toolbar-inner {
        align-items: stretch;
        gap: 0.65rem;
    }

    .admin-front-toolbar-actions {
        width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        padding-top: 0.55rem;
        border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    }

    .admin-front-toolbar-user {
        max-width: none;
        width: 100%;
    }
}

.wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1rem;
}

.site-header {
    margin-bottom: 1.25rem;
    background: var(--vilpas-dark-bg);
    border-bottom: 3px solid var(--vilpas-red);
}

.site-header-banner {
    background: var(--vilpas-blue);
    border-bottom: 1px solid var(--vilpas-notice-border);
    padding: 0.6rem 0;
}

.site-header-banner .preview-badge {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--form-radius);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.45;
}

.site-header-banner .preview-badge strong {
    font-weight: 700;
}

.site-header-banner .preview-badge .icon {
    flex-shrink: 0;
    margin-top: 0.1em;
    color: #fff;
    opacity: 0.95;
}

.site-header-main {
    padding: 1.35rem 0 1.65rem;
}

.site-header-nav-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 0.75rem;
    margin-bottom: 0.65rem;
}

.site-header-nav-row .site-header-back-link {
    margin-bottom: 0;
}

/* Theme toggle — system / light / dark */
.theme-toggle {
    display: inline-flex;
    align-items: stretch;
    flex-shrink: 0;
    padding: 2px;
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--surface) 88%, var(--bg));
}

.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: calc(var(--form-radius) - 2px);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
    line-height: 1;
}

.theme-toggle-btn:hover,
.theme-toggle-btn:focus-visible {
    color: var(--text);
    background: color-mix(in srgb, var(--vilpas-blue) 10%, var(--surface));
}

.theme-toggle-btn.is-active {
    color: #fff;
    background: var(--vilpas-blue);
}

.theme-toggle-btn.is-active:hover,
.theme-toggle-btn.is-active:focus-visible {
    color: #fff;
    background: var(--vilpas-blue-dark);
}

@media (prefers-reduced-motion: no-preference) {
    .theme-toggle-btn {
        transition: background var(--transition), color var(--transition);
    }
}

.site-header--hero .site-header-nav-row {
    margin-bottom: 0.65rem;
}

.site-header--hero .site-header-nav-row .site-header-back-link {
    margin: 0 0 0 -0.45rem;
}

.site-header--hero .theme-toggle {
    background: rgba(12, 14, 16, 0.42);
    border-color: rgba(255, 255, 255, 0.12);
}

.site-header--hero .theme-toggle-btn {
    color: rgba(232, 244, 252, 0.88);
}

.site-header--hero .theme-toggle-btn:hover,
.site-header--hero .theme-toggle-btn:focus-visible {
    color: #fff;
    background: rgba(12, 14, 16, 0.58);
}

.site-header--hero .theme-toggle-btn.is-active {
    color: #fff;
    background: color-mix(in srgb, var(--vilpas-blue) 82%, #000);
}

.admin-header-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem 0.55rem;
    margin-left: auto;
    min-width: 0;
    max-width: 100%;
    flex: 1 1 auto;
}

.admin-header-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem 0.45rem;
    flex: 0 1 auto;
    min-width: 0;
}

.site-header-eyebrow {
    margin: 0 0 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--vilpas-link);
}

.site-header h1 {
    margin: 0 0 0.55rem;
    font-family: var(--font-display);
    font-size: clamp(2rem, 6vw, 3.125rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.05;
    color: #fff;
}

/* Found while adding 404.html/tietosuoja/: .site-header-org had a color rule
   only under .site-header--hero. The plain (non-hero) header (e/index.html,
   404.html, tietosuoja/) has an always-dark background (--vilpas-dark-bg)
   like the hero variant, but the label fell through to the default text
   color, which is dark in light theme — nearly invisible on that background. */
.site-header:not(.site-header--hero) .site-header-org {
    margin: 0 0 0.2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: rgba(232, 244, 252, 0.94);
}

/* Same dark header plate as org/h1 — subtitle must not inherit body --text. */
.site-header:not(.site-header--hero) .site-header-subtitle {
    margin: 0.35rem 0 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(232, 244, 252, 0.88);
}

.lede {
    margin: 0;
    color: var(--muted);
    max-width: 38rem;
    font-size: 0.9375rem;
    line-height: 1.5;
}

#sisalto {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    padding-bottom: 3rem;
}

@media (min-width: 900px) {
    #sisalto:has(.sidebar) {
        grid-template-columns: minmax(220px, 28%) 1fr;
        align-items: start;
    }
}

.sidebar {
    align-self: start;
}

@media (max-width: 899px) {
    /* Ohjeet above the booking form on narrow viewports (DOM already has aside first). */
    .sidebar {
        order: 1;
    }

    .main-col {
        order: 2;
    }
}

.card {
    background: var(--surface);
    color: var(--text);
    border: 1px solid #000;
    border-radius: var(--form-radius);
    padding: 0.75rem;
}

.card h2 {
    margin: 0 0 0.75rem;
    font-size: 1.125rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.card h2.section-heading {
    display: flex;
}

.hint-list {
    margin: 0 0 1rem;
    padding-left: 1.25rem;
    font-size: 0.9rem;
}

.hint-list li + li {
    margin-top: 0.45rem;
}

#ohjeet {
    padding: 0.85rem 0.9rem 0.9rem;
    border-color: var(--border);
    border-radius: var(--form-radius);
    box-shadow: none;
}

.ohjeet-title {
    margin: 0 0 0.65rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, #fff);
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-transform: none;
    color: #fff;
}

.ohjeet-body {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
}

.ohjeet-block {
    margin: 0;
    padding: 0.65rem 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.ohjeet-block + .ohjeet-block {
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, #fff);
}

.ohjeet-block--notice {
    padding-left: 0.55rem;
    border-left: 2px solid color-mix(in srgb, var(--vilpas-red) 70%, var(--border));
}

.ohjeet-subheading {
    margin: 0 0 0.4rem;
    padding: 0;
    border: 0;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--muted) 75%, var(--vilpas-link));
}

.ohjeet-legend {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    line-height: 1.4;
    color: var(--muted);
}

.ohjeet-legend li {
    display: flex;
    align-items: center;
    gap: 0.45rem;
}

.ohjeet-legend li + li {
    margin-top: 0.3rem;
}

.ohjeet-legend .swatch {
    flex-shrink: 0;
    margin-top: 0;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 2px;
    border: 1px solid color-mix(in srgb, var(--form-text) 18%, var(--form-border-light));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 35%, transparent);
}

.ohjeet-notes {
    margin: 0;
    padding: 0;
}

.ohjeet-note {
    margin: 0;
}

.ohjeet-note + .ohjeet-note {
    margin-top: 0.45rem;
}

.ohjeet-note dt {
    margin: 0;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1.35;
    color: color-mix(in srgb, var(--muted) 70%, #fff);
}

.ohjeet-note dd {
    margin: 0.1rem 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: color-mix(in srgb, var(--muted) 95%, #fff);
}

.ohjeet-aside {
    margin: 0.45rem 0 0;
    font-size: 0.6875rem;
    line-height: 1.4;
    color: color-mix(in srgb, var(--muted) 80%, var(--vilpas-link));
}

.ohjeet-contact {
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid color-mix(in srgb, var(--border) 80%, #fff);
}

.ohjeet-contact .contact {
    margin: 0;
    font-size: 0.75rem;
    line-height: 1.45;
}

.ohjeet-contact-label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: color-mix(in srgb, var(--muted) 75%, var(--vilpas-link));
}

.ohjeet-contact .contact-line + .contact-line {
    margin-top: 0.12rem;
}

.ohjeet-contact .contact-line a,
.thankyou-contact .contact-line a {
    display: inline;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

/* Whole contact row is the 44px target; keep nested links from stretching icon baseline */
.ohjeet-contact .contact-line,
.thankyou-contact .contact-line {
    min-height: 2.75rem;
}

.contact {
    margin: 0;
    font-size: 0.9rem;
}

.contact a {
    color: var(--vilpas-link);
}

.booking-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-step-connector {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0.75rem;
    margin: -0.5rem 0;
    color: var(--muted);
    opacity: 0.85;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.form-step-connector .icon {
    font-size: 1.1rem;
    line-height: 1;
}

.form-step-connector.is-ready {
    color: color-mix(in srgb, var(--vilpas-blue) 55%, var(--form-muted));
    opacity: 1;
}

.form-section {
    background: var(--form-bg);
    color: var(--form-text);
    border: 1px solid #fff;
    border-radius: var(--form-card-radius);
    padding: 1.25rem;
    transition: opacity 0.25s ease;
}

.form-section.is-locked {
    opacity: 0.5;
}

.form-section-lock-hint {
    display: none;
    margin: -0.35rem 0 1rem;
    font-size: 0.85rem;
    color: var(--form-muted);
}

.form-section.is-locked .form-section-lock-hint {
    display: flex;
}

.form-section:not(.is-locked) .form-section-lock-hint {
    display: none;
}

.form-section-intro {
    margin: -0.35rem 0 0.85rem;
    max-width: 42rem;
    line-height: 1.45;
}

#form-section-dates-intro {
    font-size: 0.95rem;
}

.form-section.is-locked .form-section-intro {
    display: none;
}

.form-section h2 {
    margin: 0 0 1rem;
    font-size: 1rem;
    font-weight: 700;
    color: var(--form-text);
}

.form-section h2.section-heading {
    display: flex;
}

.field,
.fieldset {
    margin-bottom: 1rem;
}

.field:last-child {
    margin-bottom: 0;
}

.field label,
.fieldset > legend {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    color: var(--form-text);
}

.fieldset.compact legend {
    margin-bottom: 0.5rem;
}

.fieldset.is-invalid {
    outline: 2px solid var(--vilpas-red);
    outline-offset: 3px;
    border-radius: var(--form-radius);
}

.check-inline {
    font-weight: 400;
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.45rem;
    cursor: pointer;
    color: var(--form-text);
}

.check-inline input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.hint {
    display: block;
    font-size: 0.85rem;
    color: var(--form-muted);
    margin-top: 0.25rem;
}

.hint.hint-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
}

.req {
    color: var(--vilpas-red);
}

.field-error {
    margin: 0.35rem 0 0;
    font-size: 0.85rem;
    color: var(--vilpas-red);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
select,
textarea {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
    color: var(--form-text);
    font: inherit;
}

input.is-invalid,
select.is-invalid,
textarea.is-invalid,
.field input:user-invalid,
.field select:user-invalid,
.field textarea:user-invalid,
.form-section input:user-invalid,
.form-section select:user-invalid,
.form-section textarea:user-invalid {
    border-color: var(--vilpas-red);
}

.booking-form textarea.textarea-long {
    resize: vertical;
    line-height: 1.5;
}

.booking-form textarea.textarea-long[rows="5"] {
    min-height: 8.75rem;
}

.booking-form textarea.textarea-long[rows="4"] {
    min-height: 7.25rem;
}

.field-row {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 600px) {
    .field-row {
        grid-template-columns: 1fr 1fr;
    }
}

.radio-card,
.check-card {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.75rem;
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius);
    margin-bottom: 0.5rem;
    cursor: pointer;
    background: var(--form-input-bg);
    color: var(--form-text);
    font-weight: 400;
}

.radio-card-inline {
    display: inline-flex;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
    width: auto;
    min-width: 5.5rem;
}

.radio-card:has(input:checked) {
    border-color: var(--vilpas-red);
    box-shadow: 0 0 0 1px var(--vilpas-red);
}

.radio-card.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.radio-card.is-disabled input {
    pointer-events: none;
}

.radio-card input {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.radio-card a {
    color: var(--vilpas-blue);
    font-weight: 600;
}

/* Light form panel: global --vilpas-link (#90c9ef) fails contrast on --form-bg */
.form-section a {
    color: var(--vilpas-blue);
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.form-section a:hover,
.form-section a:focus-visible {
    color: var(--vilpas-blue-dark);
}

.price-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--form-muted);
    margin-top: 0.2rem;
    font-weight: 400;
}

.price-hint-stack {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.partial-spaces-intro {
    margin: 0 0 0.75rem;
}

.field-hint {
    font-size: 0.85rem;
    color: var(--form-muted);
    margin: 0.15rem 0 0.35rem;
    line-height: 1.4;
}

#jasen-fieldset #jasen-hint,
#jasen-fieldset #jasen-benefit {
    margin: 0.55rem 0 0;
    max-width: 40rem;
}

#whole-house-hint {
    margin: 0 0 1rem;
    padding: 0.55rem 0.65rem;
    border-radius: var(--form-radius);
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid var(--form-border-light);
}

.partial-fields {
    display: grid;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px dashed var(--form-border);
    border-radius: var(--form-radius);
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.55);
}

.sali-5h-time .time-range {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sali-5h-time .time-select-fi select {
    min-width: 4.5rem;
}

.time-range-sep {
    color: var(--form-muted);
}

.sali-5h-time-panel {
    margin: 0.15rem 0 0;
    padding: 0;
    background: var(--form-input-bg);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 22%, var(--form-border-light));
    border-radius: var(--form-radius);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--form-text) 6%, transparent);
    overflow: hidden;
}

.sali-5h-time-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.85rem;
    background: color-mix(in srgb, var(--vilpas-blue) 6%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--vilpas-blue) 12%, var(--form-border-light));
}

.sali-5h-time-title {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--vilpas-blue-dark);
}

.sali-5h-time-title.status-with-icon {
    align-items: center;
}

.sali-5h-time-title .icon {
    color: var(--vilpas-blue);
}

.sali-5h-time-duration {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vilpas-blue) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 22%, var(--form-border-light));
    color: var(--vilpas-blue-dark);
    white-space: nowrap;
}

.sali-5h-time-body {
    padding: 0.75rem 0.85rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.sali-5h-time-panel .time-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 0.5rem 0.65rem;
}

.sali-5h-time-panel .time-range-part {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
}

.sali-5h-time-panel .time-range-part-label,
.sali-5h-time-panel .time-range-part label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--form-muted);
    margin: 0;
}

.time-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.55rem;
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius);
    background: #fff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.time-input-wrap:focus-within {
    border-color: var(--vilpas-blue);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vilpas-blue) 25%, transparent);
}

.time-input-wrap .icon {
    color: var(--vilpas-blue);
    opacity: 0.75;
    flex-shrink: 0;
}

.time-input-wrap--readonly {
    background: color-mix(in srgb, var(--form-muted) 6%, #fff);
}

.sali-5h-time-panel .time-select-fi {
    flex: 1;
    min-width: 0;
}

.sali-5h-time-panel .time-select-fi select {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    font: inherit;
    font-weight: 600;
    color: var(--form-text);
    box-shadow: none;
}

.sali-5h-time-panel .time-select-fi select:focus {
    outline: none;
    box-shadow: none;
}

.sali-5h-time-panel .time-select-fi--readonly select {
    color: var(--form-muted);
    cursor: default;
}

.sali-5h-time-panel .time-range-sep {
    align-self: center;
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--vilpas-blue);
    padding-bottom: 0.35rem;
    line-height: 1;
}

.sali-5h-time-hint {
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--vilpas-blue) 4%, #fff);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 14%, var(--form-border-light));
    font-size: 0.82rem;
    line-height: 1.45;
}

.sali-5h-time-hint > .icon {
    color: var(--vilpas-blue);
}

.sali-5h-range-summary {
    margin: 0;
    padding: 0.45rem 0.6rem;
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--vilpas-blue) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 18%, var(--form-border-light));
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--vilpas-blue-dark);
}

.sali-5h-range-summary.status-with-icon {
    align-items: center;
}

.sali-5h-range-summary > .icon {
    color: var(--vilpas-blue);
}

@media (max-width: 479px) {
    .sali-5h-time-panel .time-range {
        grid-template-columns: 1fr;
    }

    .sali-5h-time-panel .time-range-sep {
        display: none;
    }
}

.birth-date-field {
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

.birth-date-field legend {
    font-weight: 600;
    margin-bottom: 0.35rem;
    padding: 0;
}

.birth-date-select {
    display: grid;
    gap: 0.75rem;
}

@media (min-width: 600px) {
    .birth-date-select {
        grid-template-columns: minmax(4.5rem, 0.7fr) minmax(8rem, 1.4fr) minmax(5.5rem, 0.9fr);
        align-items: end;
    }
}

.birth-date-part {
    display: grid;
    gap: 0.35rem;
}

.birth-date-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--form-muted);
}

.time-select-fi {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
}

.time-select-fi select {
    min-width: 4rem;
    font-variant-numeric: tabular-nums;
}

.time-select-sep {
    font-weight: 700;
    color: var(--form-muted);
    line-height: 1;
}

.time-select-fi--readonly select:disabled {
    opacity: 1;
    color: var(--form-muted);
}

.details-block {
    margin-bottom: 1rem;
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
}

.details-block summary {
    padding: 0.65rem 0.75rem;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    list-style-position: inside;
    color: var(--form-text);
}

.details-block[open] summary {
    border-bottom: 1px solid var(--form-border-light);
}

.details-block > .field-hint {
    padding: 0.65rem 0.75rem 0;
    margin: 0;
}

.jaosto-grid {
    padding: 0.65rem 0.75rem 0.75rem;
    margin: 0;
}

.price-estimate {
    font-size: 1rem;
    margin: 0;
    padding: 0.65rem 0.75rem;
    background: var(--form-input-bg);
    border-radius: var(--form-radius);
    border: 1px solid var(--form-border-light);
    color: var(--form-text);
}

.price-estimate-row {
    margin: 0;
}

.price-breakdown {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--form-muted);
}

.btn {
    font: inherit;
    cursor: pointer;
    border-radius: var(--form-radius);
    border: 2px solid transparent;
    padding: 0.85rem 1.5rem;
    min-height: 2.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition), opacity var(--transition);
}

.btn:focus-visible {
    outline: 2px solid var(--vilpas-blue);
    outline-offset: 2px;
}

.btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.85rem;
    min-height: 2.75rem;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 1;
    color: color-mix(in srgb, #fff 88%, #000);
    background: color-mix(in srgb, var(--form-muted) 55%, #333);
    border-color: color-mix(in srgb, var(--form-muted) 55%, #333);
}

.btn-primary {
    background: var(--vilpas-red);
    color: #fff;
    width: 100%;
}

.btn-primary:hover:not(:disabled),
.btn-primary:focus-visible:not(:disabled) {
    background: var(--vilpas-blue);
}

.btn-primary:active:not(:disabled) {
    background: var(--vilpas-blue-dark);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    background: color-mix(in srgb, var(--vilpas-red) 45%, #555);
    border-color: transparent;
    color: #fff;
}

.btn-ghost {
    background: #454545;
    color: #fff;
    border-color: #454545;
    min-width: 2.5rem;
    text-transform: none;
    font-weight: 600;
    letter-spacing: normal;
}

.btn-ghost:hover:not(:disabled),
.btn-ghost:focus-visible:not(:disabled) {
    background: var(--vilpas-blue);
    border-color: var(--vilpas-blue);
}

.btn-ghost:active:not(:disabled) {
    background: var(--vilpas-blue-dark);
    border-color: var(--vilpas-blue-dark);
}

.btn-ghost:disabled,
.btn-ghost[aria-disabled="true"] {
    background: #5a5a5a;
    border-color: #5a5a5a;
    color: #f0f0f0;
}

.form-actions {
    margin-top: 0.5rem;
}

#form-actions-submit {
    margin-top: 1rem;
}

.contact-summary {
    margin: 0 0 1rem;
    padding: 0.7rem 0.8rem;
    background: var(--form-input-bg);
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius);
    color: var(--form-text);
}

.contact-summary-empty {
    margin: 0;
    font-size: 0.875rem;
    color: var(--form-muted);
}

.contact-summary-body {
    display: grid;
    gap: 0.3rem;
    padding: 0.15rem 0;
    background: color-mix(in srgb, var(--vilpas-blue) 5%, transparent);
    border-radius: calc(var(--form-radius) - 2px);
}

.contact-summary-dates {
    margin: 0;
    font-weight: 700;
    font-size: 0.95rem;
    line-height: 1.35;
}

.contact-summary-dates .icon {
    color: var(--vilpas-blue);
}

.contact-summary-spaces {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: var(--form-muted);
}

.contact-summary-price {
    margin: 0.1rem 0 0;
    font-size: 1rem;
    line-height: 1.35;
}

.contact-summary-price .icon {
    color: var(--vilpas-blue);
}

.contact-summary-discount {
    margin: 0;
    padding-left: 1.35rem;
    font-size: 0.8rem;
    color: var(--form-muted);
}

.preview-output {
    display: block;
    margin-top: 1rem;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid var(--free);
    border-radius: var(--form-radius);
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    color: var(--form-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.preview-output:empty {
    display: none;
}

.preview-output.hold-success {
    font-family: inherit;
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--free) 35%, #fff);
    border-color: var(--free);
}

.preview-output.is-error {
    font-family: inherit;
    font-size: 0.95rem;
    background: color-mix(in srgb, var(--booked) 12%, #fff);
    border-color: color-mix(in srgb, var(--booked) 45%, var(--form-border-light));
}

/* Review step */
.review-step[hidden] {
    display: none;
}

.review-lede {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--form-muted);
}

.review-blocks {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-bottom: 1rem;
}

.review-block {
    margin: 0;
    padding: 0.75rem;
    background: var(--form-input-bg);
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius);
}

.review-block-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.65rem;
}

.review-block-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--form-text);
}

.review-block-title .icon {
    color: var(--vilpas-red);
}

.review-edit-btn {
    flex-shrink: 0;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
}

.review-dl {
    margin: 0;
}

.review-row {
    display: grid;
    gap: 0.15rem 1rem;
    padding: 0.45rem 0;
    border-top: 1px solid var(--form-border-light);
}

.review-row:first-child {
    border-top: 0;
    padding-top: 0;
}

@media (min-width: 520px) {
    .review-row {
        grid-template-columns: minmax(8rem, 34%) 1fr;
        align-items: baseline;
    }
}

.review-dt {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--form-muted);
}

.review-dd {
    margin: 0;
    font-size: 0.9rem;
    color: var(--form-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.review-price {
    margin-bottom: 1rem;
    padding: 0.65rem 0.75rem;
    background: var(--form-input-bg);
    border-radius: var(--form-radius);
    border: 1px solid var(--form-border-light);
    color: var(--form-text);
}

.review-price-row {
    margin: 0;
}

.review-price-row .icon {
    color: var(--vilpas-blue);
}

.review-price-breakdown {
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--form-muted);
}

.review-actions .review-back-btn {
    margin-top: 0.5rem;
    width: 100%;
    text-transform: none;
    letter-spacing: normal;
}

.review-actions .hint {
    margin-top: 0.65rem;
}

.form-section[hidden] {
    display: none;
}

/* Phosphor Icons (@phosphor-icons/web fill weight) */

.ph-fill,
.ph {
    line-height: 1;
    flex-shrink: 0;
    speak: never;
}

.icon {
    display: inline-block;
    vertical-align: -0.125em;
    font-size: 1em;
    line-height: 1;
}

.icon-xs {
    font-size: 0.75em;
}

.icon-sm {
    font-size: 0.9em;
}

.icon-lg {
    font-size: 1.15em;
}

.icon-spin {
    animation: icon-spin 0.85s linear infinite;
}

/*
 * Shared icon + text alignment
 * Prefer these over one-off margin-top hacks on .icon.
 * .icon-text          — single-line / optical center
 * .icon-text--start   — multi-line: icon aligns to first line
 *
 * --icon-optical-nudge: Phosphor fill glyphs sit slightly low in the em-box
 * relative to Latin x-height; nudge keeps flex center looking centered.
 */
:root {
    --icon-optical-nudge: -0.06em;
}

.icon-text,
.with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.icon-text > .icon,
.with-icon > .icon,
.icon-text > .ph-fill,
.with-icon > .ph-fill {
    flex-shrink: 0;
    margin-block: 0;
    line-height: 1;
    transform: translateY(var(--icon-optical-nudge));
}

.icon-text--start,
.with-icon--start {
    align-items: flex-start;
}

.icon-text--start > .icon,
.with-icon--start > .icon,
.icon-text--start > .ph-fill,
.with-icon--start > .ph-fill {
    /* Optical align with first text line (~1.5 lh body) */
    margin-top: 0.2em;
}

@keyframes icon-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Skeleton loaders (shared) */
:root {
    --skeleton-base: color-mix(in srgb, var(--form-muted) 14%, var(--form-input-bg));
    --skeleton-highlight: color-mix(in srgb, var(--form-muted) 8%, #fff);
}

.skeleton {
    display: block;
    border-radius: var(--form-radius);
    background: linear-gradient(
        90deg,
        var(--skeleton-base) 0%,
        var(--skeleton-highlight) 50%,
        var(--skeleton-base) 100%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.35s ease-in-out infinite;
}

@keyframes skeleton-shimmer {
    0% {
        background-position: 100% 0;
    }

    100% {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton {
        animation: none;
        background: var(--skeleton-base);
    }
}

.cal-day.cal-day-skeleton {
    aspect-ratio: 1;
    min-height: 3.1rem;
    border: 1px solid color-mix(in srgb, var(--form-border-light) 65%, transparent);
    pointer-events: none;
}

.calendar-block.is-initial-load .cal-mode-bar,
.calendar-block.is-initial-load .cal-clear {
    opacity: 0.55;
    pointer-events: none;
}

.cal-grid-panel.is-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--form-input-bg) 72%, transparent);
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;
}

.cal-grid-panel.is-loading::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1.65rem;
    height: 1.65rem;
    margin: -0.825rem 0 0 -0.825rem;
    border: 2px solid color-mix(in srgb, var(--vilpas-blue) 22%, var(--form-border-light));
    border-top-color: var(--vilpas-blue);
    border-radius: 50%;
    animation: icon-spin 0.85s linear infinite;
    z-index: 3;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .cal-grid-panel.is-loading::before {
        animation: none;
        opacity: 0.75;
    }
}

.forms-list[aria-busy="true"] .form-card-skeleton {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    pointer-events: none;
}

.form-card-skeleton .skeleton-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
}

.form-card-skeleton .skeleton-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding-top: 0.15rem;
}

.form-card-skeleton .skeleton-line-sm {
    width: 28%;
    height: 0.65rem;
}

.form-card-skeleton .skeleton-line-lg {
    width: 72%;
    height: 0.95rem;
}

.form-card-skeleton .skeleton-line-md {
    width: 55%;
    height: 0.75rem;
}

.admin-list-skeleton {
    padding: 0.85rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    background: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    pointer-events: none;
}

.admin-list-skeleton .skeleton-line-title {
    width: 58%;
    height: 0.95rem;
}

.admin-list-skeleton .skeleton-line-dates {
    width: 42%;
    height: 0.75rem;
}

.admin-list-skeleton .skeleton-line-contact {
    width: 78%;
    height: 0.7rem;
}

.admin-list-skeleton .skeleton-line-meta {
    width: 36%;
    height: 0.65rem;
}

.admin-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.9rem;
    margin-bottom: 1rem;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--surface) 82%, #000);
    border: 1px solid var(--border);
    border-radius: calc(var(--form-radius) + 2px);
}

.admin-stats-heading {
    margin: 0;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: normal;
    color: color-mix(in srgb, #fff 88%, var(--muted));
}

.admin-stats-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    flex: 1 1 12rem;
    min-width: 0;
}

.admin-stat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 5rem;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--surface) 70%, #2a2a2a);
}

.admin-stat-value {
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.admin-stat-label {
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.25;
    color: color-mix(in srgb, #fff 78%, var(--muted));
}

.admin-stat--pending {
    border-color: color-mix(in srgb, var(--partial) 45%, var(--border));
}

.admin-stat--pending .admin-stat-value {
    color: color-mix(in srgb, var(--status-pending-fg) 92%, #fff);
}

.admin-stat--accepted {
    border-color: color-mix(in srgb, var(--free) 45%, var(--border));
}

.admin-stat--accepted .admin-stat-value {
    color: color-mix(in srgb, var(--status-accepted-fg) 92%, #fff);
}

.admin-stat--denied {
    border-color: color-mix(in srgb, var(--booked) 40%, var(--border));
}

.admin-stat--denied .admin-stat-value {
    color: color-mix(in srgb, var(--status-denied-fg) 92%, #fff);
}

.admin-stat--all {
    border-color: color-mix(in srgb, var(--vilpas-blue) 45%, var(--border));
}

.admin-stat--all .admin-stat-value {
    color: color-mix(in srgb, var(--vilpas-link) 92%, #fff);
}

.admin-stat--recent {
    border-color: color-mix(in srgb, var(--border) 85%, #fff);
}

.admin-stat--warning {
    border-color: color-mix(in srgb, var(--booked) 60%, var(--border));
    background: color-mix(in srgb, var(--booked) 14%, var(--surface));
}

.admin-stat--warning .admin-stat-value {
    color: color-mix(in srgb, var(--status-denied-fg) 92%, #fff);
}

.admin-stat--skeleton {
    gap: 0.35rem;
    pointer-events: none;
}

.admin-stat-skeleton-value {
    width: 2rem;
    height: 1.05rem;
}

.admin-stat-skeleton-label {
    width: 3.5rem;
    height: 0.65rem;
}

[data-theme="light"] .admin-stat {
    background: color-mix(in srgb, var(--form-input-bg) 88%, #fff);
}

[data-theme="light"] .admin-stat-value {
    color: var(--form-text);
}

[data-theme="light"] .admin-stat--pending .admin-stat-value {
    color: color-mix(in srgb, var(--partial) 78%, #000);
}

[data-theme="light"] .admin-stat--accepted .admin-stat-value {
    color: color-mix(in srgb, var(--free-text) 82%, #000);
}

[data-theme="light"] .admin-stat--denied .admin-stat-value {
    color: color-mix(in srgb, var(--booked) 72%, #000);
}

[data-theme="light"] .admin-stat--all .admin-stat-value {
    color: var(--vilpas-blue-dark);
}

[data-theme="light"] .admin-stat-label {
    color: var(--form-muted);
}

.admin-list-panel.is-refreshing {
    position: relative;
}

.admin-list-panel.is-refreshing::after {
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--surface) 55%, transparent);
    border-radius: var(--form-radius);
    pointer-events: none;
    z-index: 1;
}

.admin-list-panel.is-refreshing::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    right: 1.25rem;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid color-mix(in srgb, var(--vilpas-blue) 25%, var(--border));
    border-top-color: var(--vilpas-link);
    border-radius: 50%;
    animation: icon-spin 0.85s linear infinite;
    z-index: 2;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .admin-list-panel.is-refreshing::before {
        animation: none;
        opacity: 0.8;
    }
}

.btn.is-busy {
    opacity: 0.92;
    cursor: wait;
}

.btn.is-busy .icon:not(.icon-spin) {
    opacity: 0.85;
}

.dynamic-form-skeleton {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    max-width: 36rem;
}

.dynamic-form-skeleton .skeleton-line-heading {
    width: 52%;
    height: 1.1rem;
}

.dynamic-form-skeleton .skeleton-line-field {
    width: 100%;
    height: 2.65rem;
}

.section-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
}

.section-heading .icon {
    color: var(--vilpas-red);
    opacity: 0.9;
    margin-block: 0;
}

/* Multi-line hints/status: first-line icon align via shared --start */
.hint-with-icon,
.status-with-icon {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.4em;
}

.hint-with-icon > .icon,
.status-with-icon > .icon {
    flex-shrink: 0;
    margin-top: 0.2em;
    margin-bottom: 0;
    line-height: 1;
    transform: translateY(var(--icon-optical-nudge));
    color: var(--form-muted);
}

/* Single-line status rows: optical center (links, labels, chips) */
a.status-with-icon,
button.status-with-icon,
.site-header-back-link.status-with-icon,
.site-footer-link.status-with-icon,
.admin-header-hub-link.status-with-icon,
.thankyou-back-link.status-with-icon,
.thankyou-meta-label.status-with-icon,
.date-summary-label.status-with-icon,
.date-summary-block-title.status-with-icon,
.price-estimate-row.status-with-icon,
.sali-5h-time-title.status-with-icon,
.sali-5h-range-summary.status-with-icon,
.contact-summary-dates.status-with-icon,
.contact-summary-price.status-with-icon,
.review-block-title.status-with-icon,
.review-price-row.status-with-icon {
    align-items: center;
}

a.status-with-icon > .icon,
button.status-with-icon > .icon,
.site-header-back-link.status-with-icon > .icon,
.site-footer-link.status-with-icon > .icon,
.admin-header-hub-link.status-with-icon > .icon,
.thankyou-back-link.status-with-icon > .icon,
.thankyou-meta-label.status-with-icon > .icon,
.date-summary-label.status-with-icon > .icon,
.date-summary-block-title.status-with-icon > .icon,
.price-estimate-row.status-with-icon > .icon,
.sali-5h-time-title.status-with-icon > .icon,
.sali-5h-range-summary.status-with-icon > .icon,
.contact-summary-dates.status-with-icon > .icon,
.contact-summary-price.status-with-icon > .icon,
.review-block-title.status-with-icon > .icon,
.review-price-row.status-with-icon > .icon {
    margin-top: 0;
}

.cal-status.is-error > .icon {
    color: var(--vilpas-red);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
}

.btn-icon > .icon,
.btn-icon > .ph-fill,
.with-icon.btn > .icon,
.with-icon.btn > .ph-fill {
    margin-block: 0;
    line-height: 1;
    flex-shrink: 0;
    color: inherit;
    transform: translateY(var(--icon-optical-nudge));
}

.btn-icon-only {
    padding: 0.45rem 0.55rem;
    min-width: 2.75rem;
    min-height: 2.75rem;
}

.btn-primary.btn-icon {
    width: 100%;
}

[data-theme="light"] .btn:disabled,
[data-theme="light"] .btn[aria-disabled="true"] {
    color: #1a1a1a;
    background: color-mix(in srgb, var(--form-muted) 28%, #fff);
    border-color: color-mix(in srgb, var(--form-muted) 40%, #ccc);
}

[data-theme="light"] .btn-primary:disabled,
[data-theme="light"] .btn-primary[aria-disabled="true"] {
    color: #fff;
    background: color-mix(in srgb, var(--vilpas-red) 55%, #888);
    border-color: transparent;
}

[data-theme="light"] .btn-ghost:disabled,
[data-theme="light"] .btn-ghost[aria-disabled="true"] {
    color: #1a1a1a;
    background: color-mix(in srgb, var(--form-muted) 22%, #fff);
    border-color: color-mix(in srgb, var(--form-muted) 45%, #bbb);
}

.link-ext {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;
    white-space: nowrap;
}

.link-ext > .icon {
    margin-block: 0;
    transform: translateY(var(--icon-optical-nudge));
}

.contact-line {
    display: flex;
    align-items: center;
    gap: 0.4em;
    margin-top: 0.35rem;
    min-height: 2.75rem;
}

.contact-line > .icon {
    flex-shrink: 0;
    margin-block: 0;
    line-height: 1;
    transform: translateY(var(--icon-optical-nudge));
    color: var(--vilpas-link);
}

.contact-line > span {
    min-width: 0;
}

.legend-icon {
    color: var(--form-muted);
    opacity: 0.85;
}

.date-summary-label.status-with-icon {
    align-items: center;
}

.date-summary-label .icon {
    color: var(--vilpas-blue);
}

/* Step 1: dates and event flow */
.form-dates-flow {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.form-dates-block {
    min-width: 0;
}

.form-dates-flow .calendar-block {
    margin-bottom: 0;
}

.form-dates-event {
    padding-top: 0.35rem;
    border-top: 1px solid var(--form-border-light);
}

.form-dates-subheading {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.9rem;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vilpas-blue-dark);
}

.form-dates-subheading .icon {
    color: var(--vilpas-red);
    opacity: 0.9;
}

.form-dates-event .field:last-of-type,
.form-dates-ehdot {
    margin-bottom: 0;
}

.price-estimate-row.status-with-icon {
    align-items: center;
}

.price-estimate-row .icon {
    color: var(--vilpas-blue);
}

.field-error.hint-with-icon > .icon {
    color: var(--vilpas-red);
    margin-top: 0.1em;
}

/* Calendar */
.calendar-block {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 1rem;
    padding: 0;
    background: var(--form-input-bg);
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-card-radius);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--form-text) 7%, transparent);
    overflow: hidden;
}

.cal-header {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem 0.95rem;
    background: color-mix(in srgb, var(--vilpas-blue) 4%, var(--form-input-bg));
}

.cal-header + .cal-grid-panel {
    border-top: 1px solid var(--form-border-light);
}

.calendar-toolbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.cal-month-label {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    text-align: center;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 600;
    line-height: 1.1;
    text-transform: capitalize;
    color: var(--vilpas-blue-dark);
    letter-spacing: 0.02em;
}

.cal-month-week {
    font-family: var(--font-body, inherit);
    font-size: 0.72em;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    color: var(--form-muted);
    white-space: nowrap;
}

/* Mode toggle removed from UI — day click only; keep rules inert if markup reappears. */
.cal-mode-bar,
.cal-mode-options {
    display: none !important;
}

.date-summary-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

.date-summary-kind {
    margin: 0.15rem 0 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--form-text);
}

.cal-mode-bar--legacy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.cal-mode-label {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--form-muted);
}

.cal-mode-options {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
    flex: 1 1 auto;
}

.cal-grid-panel {
    padding: 0.75rem 0.85rem 0.85rem;
    background: color-mix(in srgb, var(--vilpas-blue) 6%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--vilpas-blue) 12%, var(--form-border-light));
    position: relative;
}

.cal-footer {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.85rem 1rem 1rem;
    border-top: 1px solid var(--form-border-light);
    background: color-mix(in srgb, var(--form-muted) 4%, var(--form-input-bg));
}

.cal-meta {
    display: grid;
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .cal-meta {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }

    .cal-header {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 1rem 1.25rem;
    }

    .calendar-toolbar {
        flex: 0 1 auto;
        justify-content: flex-start;
    }

    .cal-month-label {
        flex: 0 1 auto;
        min-width: 9rem;
    }

    .cal-mode-bar {
        flex: 1 1 16rem;
        justify-content: flex-end;
    }

    .cal-mode-label {
        margin-right: 0.15rem;
    }
}

.mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0.42rem 0.75rem;
    border: 1px solid var(--form-border-light);
    border-radius: 999px;
    font-size: 0.84rem;
    cursor: pointer;
    background: var(--form-input-bg);
    color: var(--form-text);
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}

.mode-toggle:has(input:checked) {
    border-color: var(--vilpas-red);
    background: color-mix(in srgb, var(--vilpas-red) 6%, #fff);
    box-shadow: 0 0 0 1px var(--vilpas-red);
}

.mode-toggle input {
    margin: 0;
}

.cal-hint,
.cal-status {
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--form-muted);
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
    border: 1px solid var(--form-border-light);
}

.cal-status {
    align-self: start;
}

.cal-hint.hint-with-icon,
.cal-status.status-with-icon {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
}

.cal-hint.hint-with-icon > .icon,
.cal-status.status-with-icon > .icon {
    flex-shrink: 0;
    margin-top: 0.2em;
    margin-bottom: 0;
    line-height: 1;
    color: var(--vilpas-blue);
}

.cal-status.status-with-icon > .icon {
    color: var(--form-muted);
}

.calendar-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-weekdays,
.cal-week {
    display: grid;
    grid-template-columns: minmax(1.65rem, 2rem) repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.cal-weekday-num {
    font-size: 0.62rem;
    letter-spacing: 0.03em;
    padding-inline: 0;
}

.cal-week-num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3.1rem;
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1.15;
    text-align: center;
    color: var(--form-muted);
    padding: 0.1rem 0.05rem;
}

.cal-week-num.empty {
    visibility: hidden;
}

.cal-days {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cal-weekdays {
    padding-bottom: 0.35rem;
    margin-bottom: 2px;
    border-bottom: 1px solid color-mix(in srgb, var(--vilpas-blue) 14%, var(--form-border-light));
}

.cal-weekday {
    text-align: center;
    font-size: 0.7rem;
    color: var(--form-muted);
    padding: 0.15rem 0 0.25rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cal-weekday-weekend {
    color: var(--vilpas-blue-dark);
}

.cal-day {
    aspect-ratio: 1;
    min-height: 3.1rem;
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
    color: var(--form-text);
    font: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.22rem 0.28rem 0.28rem;
    position: relative;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.1rem;
    min-width: 0;
    overflow: hidden;
    transition: border-color var(--transition), box-shadow var(--transition), transform 0.15s ease;
}

.cal-day::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    border-radius: var(--form-radius) var(--form-radius) 0 0;
    opacity: 0.9;
    pointer-events: none;
}

.cal-day.status-free::before {
    background: var(--free);
}

.cal-day.status-partial::before {
    background: var(--partial);
}

.cal-day.status-booked::before {
    background: var(--booked);
}

.cal-day.status-pending::before {
    background: var(--pending);
    opacity: 1;
}

.cal-day.has-cleaning::before,
.cal-day.status-cleaning::before {
    background: var(--cleaning);
}

.cal-day.selected::before,
.cal-day.range-start::before,
.cal-day.range-end::before,
.cal-day.in-range::before {
    background: var(--vilpas-blue);
}

.cal-day:not(.empty):not([aria-disabled="true"]):hover {
    border-color: color-mix(in srgb, var(--vilpas-blue) 55%, var(--form-border-light));
    box-shadow: 0 2px 6px color-mix(in srgb, var(--form-text) 12%, transparent);
    transform: translateY(-1px);
}

.cal-day:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    z-index: 2;
}

.cal-day-num {
    display: block;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.1;
    flex-shrink: 0;
}

.cal-day.is-today .cal-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    min-width: 1.45rem;
    min-height: 1.45rem;
    padding: 0 0.2rem;
    border-radius: 999px;
    background: var(--vilpas-blue-dark);
    color: #fff;
    font-size: 0.82rem;
}

.cal-day-label {
    font-size: 0.63rem;
    line-height: 1.25;
    font-weight: 600;
    color: var(--form-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    word-break: break-word;
    hyphens: auto;
}

.cal-day.has-label .cal-day-num {
    font-size: 0.8rem;
}

.cal-day.status-free .cal-day-label {
    color: var(--free-text);
}

.cal-day.status-partial .cal-day-label {
    color: var(--partial-text);
}

.cal-day.status-booked .cal-day-label {
    color: var(--booked-text);
}

.cal-day.status-pending .cal-day-label {
    color: var(--pending-text);
}

.cal-day.status-cleaning .cal-day-label,
.cal-day.has-cleaning .cal-day-label {
    color: var(--cleaning-text);
}

.cal-day.selected .cal-day-label,
.cal-day.range-start .cal-day-label,
.cal-day.range-end .cal-day-label,
.cal-day.in-range .cal-day-label {
    color: var(--vilpas-blue-dark);
}

.cal-day.empty {
    visibility: hidden;
    pointer-events: none;
}

.cal-day.other-month {
    opacity: 0.55;
}

.cal-day.other-month .cal-day-num {
    font-weight: 600;
    color: var(--form-muted);
}

.cal-day.other-month.selected,
.cal-day.other-month.range-start,
.cal-day.other-month.range-end,
.cal-day.other-month.in-range {
    opacity: 1;
}

.cal-day.past {
    opacity: 0.4;
    cursor: not-allowed;
}

.cal-day.status-free {
    background: var(--status-free-bg);
}

.cal-day.status-partial {
    background: var(--status-partial-bg);
}

.cal-day.status-booked {
    background: var(--status-booked-bg);
    cursor: not-allowed;
}

.cal-day.status-pending {
    background: var(--status-pending-bg);
    border-style: dashed;
    border-color: var(--status-pending-border);
    cursor: not-allowed;
}

.cal-day.status-cleaning,
.cal-day.has-cleaning {
    background: var(--status-cleaning-bg);
}

.cal-day.selected,
.cal-day.range-start,
.cal-day.range-end {
    background: color-mix(in srgb, var(--selected) 20%, #fff);
    border-color: var(--vilpas-blue);
    border-width: 2px;
    padding: calc(0.22rem - 1px) calc(0.28rem - 1px) calc(0.28rem - 1px);
    font-weight: 700;
    color: var(--vilpas-blue-dark);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--vilpas-blue) 25%, transparent);
}

.cal-day.in-range {
    background: color-mix(in srgb, var(--selected) 14%, #fff);
    border-color: color-mix(in srgb, var(--vilpas-blue) 50%, var(--form-border-light));
}

.cal-day[aria-disabled="true"] {
    cursor: not-allowed;
}

.cal-day:disabled {
    cursor: not-allowed;
}

.cal-day-tooltip {
    position: fixed;
    z-index: 40;
    max-width: min(19rem, calc(100vw - 1.25rem));
    padding: 0.6rem 0.7rem;
    border-radius: var(--form-radius);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 22%, var(--form-border-light));
    background: var(--form-input-bg);
    color: var(--form-text);
    box-shadow:
        0 6px 18px color-mix(in srgb, var(--form-text) 16%, transparent),
        0 0 0 1px color-mix(in srgb, var(--form-text) 4%, transparent);
    pointer-events: none;
    font-size: 0.8rem;
    line-height: 1.4;
}

.cal-day-tooltip.is-pinned {
    border-color: var(--vilpas-blue);
    box-shadow:
        0 8px 22px color-mix(in srgb, var(--form-text) 18%, transparent),
        0 0 0 2px color-mix(in srgb, var(--vilpas-blue) 35%, transparent);
}

.cal-day-tooltip-line {
    margin: 0;
}

.cal-day-tooltip-line + .cal-day-tooltip-line {
    margin-top: 0.28rem;
    padding-top: 0.28rem;
    border-top: 1px solid color-mix(in srgb, var(--form-border-light) 80%, transparent);
}

.cal-day-tooltip-line:first-child {
    font-weight: 600;
    color: var(--vilpas-blue-dark);
}

.cal-day-tooltip-status {
    font-weight: 700;
    color: var(--vilpas-blue-dark);
}

.cal-day-tooltip-bundle {
    font-weight: 600;
    color: color-mix(in srgb, var(--vilpas-red) 75%, var(--form-text));
}

.cal-day.has-booker-bundle {
    --bundle-color: hsl(210 58% 32%);
    box-shadow: inset 0 0 0 2px var(--bundle-color);
}

.cal-day.has-booker-bundle[data-booker-bundle="0"] {
    --bundle-color: hsl(210 58% 32%);
}

.cal-day.has-booker-bundle[data-booker-bundle="1"] {
    --bundle-color: hsl(28 65% 35%);
}

.cal-day.has-booker-bundle[data-booker-bundle="2"] {
    --bundle-color: hsl(145 48% 28%);
}

.cal-day.has-booker-bundle[data-booker-bundle="3"] {
    --bundle-color: hsl(280 48% 36%);
}

.cal-day.has-booker-bundle[data-booker-bundle="4"] {
    --bundle-color: hsl(350 55% 36%);
}

.cal-day.has-booker-bundle[data-booker-bundle="5"] {
    --bundle-color: hsl(185 52% 30%);
}

.cal-day.has-booker-bundle[data-booker-bundle="6"] {
    --bundle-color: hsl(55 65% 26%);
}

.cal-day.has-booker-bundle[data-booker-bundle="7"] {
    --bundle-color: hsl(320 52% 36%);
}

.cal-day.has-booker-bundle.bundle-edge-start,
.cal-day.has-booker-bundle.bundle-edge-middle,
.cal-day.has-booker-bundle.bundle-edge-end,
.cal-day.has-booker-bundle.bundle-edge-single {
    outline: 2px solid var(--bundle-color);
    outline-offset: -3px;
}

.cal-day.has-booker-bundle.selected,
.cal-day.has-booker-bundle.range-start,
.cal-day.has-booker-bundle.range-end,
.cal-day.has-booker-bundle.in-range {
    outline-color: var(--vilpas-blue);
}

.date-summary {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    padding: 0;
    background: var(--form-input-bg);
    border: 1px solid var(--form-border-light);
    border-radius: var(--form-card-radius);
    box-shadow: 0 1px 3px color-mix(in srgb, var(--form-text) 7%, transparent);
    color: var(--form-text);
    overflow: hidden;
}

.date-summary-primary {
    padding: 0.9rem 1rem;
    background: color-mix(in srgb, var(--vilpas-blue) 6%, #fff);
    border-bottom: 1px solid color-mix(in srgb, var(--vilpas-blue) 12%, var(--form-border-light));
}

.date-summary-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
}

.date-summary-label {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--vilpas-blue-dark);
}

.date-summary-count {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--vilpas-blue) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 22%, var(--form-border-light));
    color: var(--vilpas-blue-dark);
    white-space: nowrap;
}

.date-summary-text {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--form-text);
}

.date-summary-text.is-multiple {
    font-size: 1rem;
    font-weight: 600;
}

.date-summary-date-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.date-summary-date-list li {
    padding: 0.28rem 0.6rem;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: var(--form-radius);
    background: var(--form-input-bg);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 28%, var(--form-border-light));
    box-shadow: 0 1px 0 color-mix(in srgb, var(--form-text) 4%, transparent);
}

.date-summary-secondary {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 0.75rem 1rem 0.9rem;
}

.date-summary-block {
    padding: 0.6rem 0.7rem;
    border-radius: var(--form-radius);
    font-size: 0.85rem;
}

.date-summary-block-title {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--form-muted);
}

.date-summary-block-body {
    margin: 0;
    line-height: 1.45;
}

.date-summary-availability.is-partial {
    background: color-mix(in srgb, var(--partial) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--partial) 35%, var(--form-border-light));
}

.date-summary-availability.is-partial .date-summary-block-title .icon {
    color: var(--partial-text);
}

.date-summary-availability.is-blocked {
    background: color-mix(in srgb, var(--booked) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--booked) 30%, var(--form-border-light));
}

.date-summary-availability.is-blocked .date-summary-block-title .icon {
    color: var(--booked-text);
}

.date-summary-cleaning {
    background: color-mix(in srgb, var(--cleaning) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--cleaning) 30%, var(--form-border-light));
}

.date-summary-cleaning .date-summary-block-title .icon {
    color: var(--cleaning-text);
}

.date-summary-cleaning-lead {
    margin: 0 0 0.25rem;
    font-weight: 600;
    color: var(--form-text);
}

.date-summary-cleaning-list {
    margin: 0;
    padding-left: 1.1rem;
    list-style: disc;
}

.date-summary-cleaning-list li {
    margin: 0.15rem 0;
    line-height: 1.4;
}

.date-summary-cleaning-list li::marker {
    color: var(--cleaning-text);
}

.date-summary-pricing {
    background: color-mix(in srgb, var(--vilpas-blue) 7%, #fff);
    border: 1px solid color-mix(in srgb, var(--vilpas-blue) 22%, var(--form-border-light));
}

.date-summary-pricing .date-summary-block-title .icon {
    color: var(--vilpas-blue);
}

.date-summary-pricing-amount {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--form-text);
}

.date-summary-pricing-hint {
    margin: 0.3rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--form-muted);
}

.date-summary-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.65rem;
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--vilpas-red) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--vilpas-red) 28%, var(--form-border-light));
}

/* [hidden] must beat display utilities (.hint-with-icon, .btn-icon, etc.) */
[hidden] {
    display: none !important;
}

.cal-legend-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.cal-legend-title {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--form-muted);
}

.cal-legend {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.25rem, 1fr));
    gap: 0.4rem 0.9rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.3;
    color: var(--form-text);
}

.cal-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 0;
}

.swatch {
    width: 1rem;
    height: 1rem;
    border-radius: calc(var(--form-radius) - 1px);
    border: 1px solid color-mix(in srgb, var(--form-text) 12%, var(--form-border-light));
    flex-shrink: 0;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 40%, transparent);
}

.swatch-free { background: var(--status-free-bg); }
.swatch-partial { background: var(--status-partial-bg); }
.swatch-booked { background: var(--status-booked-bg); }
.swatch-pending {
    background: var(--status-pending-bg);
    border-style: dashed;
    border-color: var(--status-pending-border);
}
.swatch-cleaning { background: var(--status-cleaning-bg); }
.swatch-selected {
    background: color-mix(in srgb, var(--selected) 20%, #fff);
    border-color: var(--vilpas-blue);
    border-width: 2px;
    width: calc(1rem - 1px);
    height: calc(1rem - 1px);
}
.swatch-bundle {
    background: transparent;
    box-shadow: inset 0 0 0 2px hsl(210 58% 32%);
}

.cal-status.is-error {
    color: var(--vilpas-red);
}

@media (max-width: 599px) {
    .form-section {
        padding: 1rem;
    }

    .btn-primary {
        width: 100%;
    }

    .cal-grid-panel {
        padding: 0.6rem 0.55rem 0.65rem;
    }

    .cal-header,
    .cal-footer {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .cal-month-label {
        font-size: 1.2rem;
    }

    .cal-mode-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .cal-mode-options {
        width: 100%;
    }

    .mode-toggle {
        flex: 1 1 calc(50% - 0.25rem);
        justify-content: center;
    }

    #cal-clear {
        width: 100%;
        justify-content: center;
    }

    .cal-meta {
        grid-template-columns: 1fr;
    }

    .cal-week-num {
        display: none;
    }

    .cal-weekdays,
    .cal-week {
        grid-template-columns: repeat(7, minmax(0, 1fr));
    }

    .cal-weekday-num {
        display: none;
    }

    .cal-day {
        min-height: 2.75rem;
        padding: 0.14rem 0.16rem 0.18rem;
    }

    .cal-day.selected,
    .cal-day.range-start,
    .cal-day.range-end {
        padding: calc(0.14rem - 1px) calc(0.16rem - 1px) calc(0.18rem - 1px);
    }

    .cal-day-num {
        font-size: 0.82rem;
    }

    .cal-day.is-today .cal-day-num {
        min-width: 1.35rem;
        min-height: 1.35rem;
        font-size: 0.76rem;
    }

    .cal-day-label {
        font-size: 0.56rem;
        -webkit-line-clamp: 2;
    }

    .cal-legend {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.45rem 0.65rem;
        font-size: 0.74rem;
    }

    .cal-day-tooltip {
        max-width: calc(100vw - 1rem);
        font-size: 0.78rem;
    }

    .cal-day:not(.empty):not([aria-disabled="true"]):hover {
        transform: none;
    }

    .date-summary-primary,
    .date-summary-secondary {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .date-summary-text {
        font-size: 1.05rem;
    }

    .date-summary-date-list {
        gap: 0.3rem;
    }

    .date-summary-date-list li {
        flex: 1 1 calc(50% - 0.3rem);
        text-align: center;
    }

    .form-dates-event {
        padding-top: 0.15rem;
    }
}

@media (min-width: 640px) {
    .date-summary-secondary {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
    }

    .date-summary-pricing,
    .date-summary-warning {
        grid-column: 1 / -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cal-day,
    .mode-toggle {
        transition: none;
    }

    .cal-day:not(.empty):not([aria-disabled="true"]):hover {
        transform: none;
    }
}

/* Forms hub (/) */

.site-header-brand {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
}

.site-header-titleblock {
    flex: 1;
    min-width: 0;
}

.site-logo {
    display: block;
    flex-shrink: 0;
    line-height: 0;
    text-decoration: none;
}

.site-logo img {
    display: block;
    height: 2.75rem;
    width: auto;
}

.site-logo:hover img,
.site-logo:focus-visible img {
    opacity: 0.92;
}

.site-logo:focus-visible {
    outline: 2px solid var(--vilpas-link);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-header-back {
    margin: 0 0 0.65rem;
}

.site-header-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--vilpas-link);
}

.site-header-back-link:hover,
.site-header-back-link:focus-visible {
    color: #b8daf5;
}

/* Non-hero headers keep dark brand chrome in both themes — force light-on-dark links
   (light-theme --vilpas-link is #004a6b and fails AAA/AA on --vilpas-dark-bg). */
.site-header:not(.site-header--hero) .site-header-back-link {
    color: #90c9ef;
}

.site-header:not(.site-header--hero) .site-header-back-link:hover,
.site-header:not(.site-header--hero) .site-header-back-link:focus-visible,
[data-theme="light"] .site-header:not(.site-header--hero) .site-header-back-link:hover,
[data-theme="light"] .site-header:not(.site-header--hero) .site-header-back-link:focus-visible {
    color: #e8f4fc;
}

.site-header:not(.site-header--hero) h1 {
    color: #fff;
}

.site-header:not(.site-header--hero) .theme-toggle {
    background: rgba(12, 14, 16, 0.42);
    border-color: rgba(255, 255, 255, 0.12);
}

.site-header:not(.site-header--hero) .theme-toggle-btn {
    color: rgba(232, 244, 252, 0.88);
}

.site-header:not(.site-header--hero) .theme-toggle-btn:hover,
.site-header:not(.site-header--hero) .theme-toggle-btn:focus-visible {
    color: #fff;
    background: rgba(12, 14, 16, 0.58);
}

.site-header:not(.site-header--hero) .theme-toggle-btn.is-active {
    color: #fff;
    background: var(--vilpas-blue);
}

/* Public hero header — LCP photo via .site-header-hero-img + ::after scrim overlay */
.site-header--hero {
    position: relative;
    overflow: hidden;
    border-bottom-width: 1px;
    border-bottom-color: color-mix(in srgb, var(--vilpas-red) 55%, var(--border));
    margin-bottom: 1rem;
    background-color: var(--vilpas-dark-bg);
    min-height: 9.5rem;
    isolation: isolate;
}

.site-header-hero-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    pointer-events: none;
}

.site-header--hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            to bottom,
            rgba(18, 20, 22, 0.4) 0%,
            rgba(18, 20, 22, 0.52) 42%,
            rgba(18, 20, 22, 0.7) 100%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--vilpas-blue-dark) 72%, transparent) 0%,
            color-mix(in srgb, var(--vilpas-dark-bg) 68%, transparent) 55%,
            color-mix(in srgb, var(--vilpas-red) 24%, transparent) 100%
        );
}

.site-header--hero-tupurin::after {
    background:
        linear-gradient(
            to bottom,
            rgba(18, 20, 22, 0.44) 0%,
            rgba(18, 20, 22, 0.56) 38%,
            rgba(18, 20, 22, 0.78) 100%
        ),
        linear-gradient(
            135deg,
            color-mix(in srgb, var(--vilpas-blue-dark) 78%, transparent) 0%,
            color-mix(in srgb, var(--vilpas-dark-bg) 74%, transparent) 50%,
            color-mix(in srgb, var(--vilpas-red) 28%, transparent) 100%
        );
}

.site-header--hero .site-header-banner {
    position: relative;
    z-index: 2;
}

.site-header--hero .site-header-main {
    position: relative;
    z-index: 2;
    padding: 1.1rem 0 1.25rem;
}

.site-header--hero .site-header-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    color: #e8f4fc;
    background: rgba(12, 14, 16, 0.42);
    border-radius: var(--form-radius);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 8px rgba(0, 0, 0, 0.45);
}

.site-header--hero .site-header-back-link:hover,
.site-header--hero .site-header-back-link:focus-visible {
    color: #fff;
    background: rgba(12, 14, 16, 0.58);
}

.site-header--hero .site-header-brand {
    padding: 0.7rem 0.8rem;
    /* Keep brand plate inside the wrap on narrow phones (no negative bleed). */
    margin: 0;
    border-radius: var(--form-radius);
    background: rgba(12, 14, 16, 0.46);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.site-header--hero .site-logo img {
    height: 3rem;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.7)) drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

.site-header--hero .site-header-titleblock {
    border-left: 2px solid var(--vilpas-red);
    padding-left: 0.75rem;
}

.site-header--hero .site-header-org {
    margin: 0 0 0.2rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: none;
    color: rgba(232, 244, 252, 0.94);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.site-header--hero h1 {
    margin: 0;
    font-family: var(--font-body);
    font-size: clamp(1.25rem, 3.5vw, 1.625rem);
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.01em;
    line-height: 1.25;
    color: #fff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.85),
        0 2px 10px rgba(0, 0, 0, 0.55);
}

.site-header--hero .site-header-subtitle {
    margin: 0.35rem 0 0;
    max-width: 34rem;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.72);
}

@media (min-width: 600px) {
    .site-header-brand {
        gap: 0.85rem;
    }

    .site-logo img {
        height: 3.25rem;
    }

    .site-header--hero {
        min-height: 12.5rem;
    }

    .site-header--hero .site-logo img {
        height: 3.5rem;
    }

    .site-header--hero .site-header-main {
        padding: 1.35rem 0 1.55rem;
    }

    .site-header--hero .site-header-brand {
        padding: 0.85rem 0.95rem;
        /* Soft side bleed only when wrap padding can absorb it (≥600px). */
        margin: 0 -0.95rem;
    }

    .site-header--hero .site-header-titleblock {
        padding-left: 0.85rem;
    }
}

@media (min-width: 900px) {
    .site-logo img {
        height: 3.5rem;
    }

    .site-header--hero .site-logo img {
        height: 4rem;
    }
}

/* Status + empty states (public dynamic forms; mirrored in admin.html for admin-only pages) */
.admin-flash,
.form-flash {
    margin: 1rem 0 0;
    padding: 0.75rem 1rem;
    border-radius: var(--form-radius);
    font-size: 0.9rem;
    line-height: 1.45;
}

.admin-flash.ok,
.form-flash.ok {
    background: color-mix(in srgb, var(--free) 28%, var(--form-bg));
    border: 1px solid color-mix(in srgb, var(--free) 50%, var(--form-border-light));
    color: var(--form-text);
}

.admin-flash.err,
.form-flash.err {
    background: color-mix(in srgb, var(--booked) 12%, var(--form-bg));
    border: 1px solid color-mix(in srgb, var(--booked) 40%, var(--form-border-light));
    color: var(--form-text);
}

.admin-list-empty,
.form-status-empty {
    margin: 0;
    padding: 1.25rem 0.75rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    border: 1px dashed var(--border);
    border-radius: var(--form-radius);
}

.forms-hub {
    padding-bottom: 2.5rem;
}

/* Shared public footer — club nav + toimisto aukiolo (dark band, not sticky) */
.site-footer {
    margin-top: 2rem;
    padding: 2rem 0 2.5rem;
    border-top: 1px solid #454545;
    background: var(--vilpas-dark-bg);
    color: #fff;
}

.site-footer-inner {
    display: block;
}

.site-footer-grid {
    display: grid;
    gap: 1.75rem 2rem;
    grid-template-columns: 1fr;
}

/* Stack identity / nav / hours through tablet portrait; 3-col from ~900px. */
@media (min-width: 900px) {
    .site-footer-grid {
        grid-template-columns: minmax(12rem, 1.1fr) minmax(14rem, 1.2fr) minmax(14rem, 1.2fr);
        align-items: start;
    }
}

.site-footer-col {
    min-width: 0;
}

.site-footer-brand {
    margin: 0 0 0.35rem;
    font-family: var(--font-display);
    font-size: 1.65rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1.1;
    color: #fff;
}

.site-footer-tagline {
    margin: 0 0 0.85rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #c0c0c0;
}

.site-footer-address {
    margin: 0 0 0.85rem;
    font-style: normal;
    font-size: 0.875rem;
    line-height: 1.55;
    color: #c0c0c0;
}

.site-footer-copy {
    margin: 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #c0c0c0;
}

.site-footer-version {
    margin: 0.35rem 0 0;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #8a8a8a;
}

.site-footer-heading {
    margin: 0 0 0.35rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #c0c0c0;
}

.site-footer-nav + .site-footer-nav {
    margin-top: 1.25rem;
}

.site-footer-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.site-footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.75rem;
    padding: 0.35rem 0.1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    /* Always on-dark: light theme remaps --vilpas-link for page body */
    color: var(--vilpas-link-on-dark);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.site-footer-address .site-footer-link {
    font-size: 0.875rem;
    font-weight: 600;
}

.site-footer-link > .icon {
    flex-shrink: 0;
    margin-block: 0;
    line-height: 1;
    transform: translateY(var(--icon-optical-nudge));
}

.site-footer-link:hover,
.site-footer-link:focus-visible {
    color: #fff;
}

.site-footer-link:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--vilpas-blue) 65%, transparent);
    outline-offset: 3px;
    border-radius: 2px;
}

.site-footer-embed {
    margin-top: 0.25rem;
    padding: 0.65rem 0.75rem;
    background: color-mix(in srgb, #000 28%, var(--vilpas-body-bg));
    border: 1px solid #454545;
    border-radius: var(--form-radius);
    overflow: hidden;
}

.site-footer-embed .myclub-embed {
    min-height: 6.5rem;
    max-width: 100%;
}

.site-footer-embed .myclub-embed iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 14rem;
    border: 0;
}

.site-footer-embed-fallback {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
}

.site-footer-embed:has(iframe) .site-footer-embed-fallback {
    display: none;
}

.site-footer-embed-more {
    margin: 0.65rem 0 0;
    font-size: 0.875rem;
}

/* Footer stays dark band in light theme (club-site cue); links keep AAA-friendly blue */
[data-theme="light"] .site-footer {
    background: var(--vilpas-dark-bg);
    border-top-color: #454545;
    color: #fff;
}

[data-theme="light"] .site-footer-brand {
    color: #fff;
}

[data-theme="light"] .site-footer-tagline,
[data-theme="light"] .site-footer-copy,
[data-theme="light"] .site-footer-heading,
[data-theme="light"] .site-footer-address {
    color: #c0c0c0;
}

[data-theme="light"] .site-footer-version {
    color: #8a8a8a;
}

[data-theme="light"] .site-footer-link {
    color: var(--vilpas-link-on-dark);
}

[data-theme="light"] .site-footer-link:hover,
[data-theme="light"] .site-footer-link:focus-visible {
    color: #fff;
}

/* LEG-1: privacy notice and any other prose page — capped line length for readability. */
.legal-page {
    max-width: 42rem;
    padding-bottom: 3rem;
}
.legal-page section {
    margin-top: 1.75rem;
}
.legal-page h2 {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}
.legal-page p,
.legal-page li {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text);
}
.legal-page ul {
    padding-left: 1.25rem;
}

.hub-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.1rem;
}

.hub-search-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.hub-forms-search {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
}

.hub-forms-search:focus-visible {
    outline: 2px solid var(--vilpas-link);
    outline-offset: 2px;
}

.hub-category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

@media (max-width: 479px) {
    .hub-category-chips {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .hub-category-chip {
        width: 100%;
        justify-content: center;
    }
}

.hub-category-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.75rem;
    min-width: 2.75rem;
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.hub-category-chip > .icon {
    flex-shrink: 0;
    margin-block: 0;
    line-height: 1;
    transform: translateY(var(--icon-optical-nudge));
    opacity: 0.9;
}

.hub-category-chip:hover,
.hub-category-chip:focus-visible {
    border-color: color-mix(in srgb, var(--vilpas-link) 45%, var(--border));
    background: color-mix(in srgb, var(--vilpas-blue) 12%, var(--surface));
}

.hub-category-chip:focus-visible {
    outline: 2px solid var(--vilpas-link);
    outline-offset: 2px;
}

.hub-category-chip.is-active,
.hub-category-chip[aria-pressed="true"] {
    background: color-mix(in srgb, var(--vilpas-blue) 28%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-link) 55%, var(--border));
    color: #fff;
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #fff 12%, transparent);
}

.hub-category-chip.is-active > .icon,
.hub-category-chip[aria-pressed="true"] > .icon {
    opacity: 1;
}

[data-theme="light"] .hub-category-chip.is-active,
[data-theme="light"] .hub-category-chip[aria-pressed="true"] {
    color: var(--vilpas-blue-dark);
    background: color-mix(in srgb, var(--vilpas-blue) 12%, var(--surface));
    border-color: color-mix(in srgb, var(--vilpas-blue) 45%, var(--border));
    box-shadow: none;
}

.form-card-category {
    margin-top: 0.15rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--muted);
}

.form-card-status {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--error);
}

.form-card--maintenance {
    opacity: 0.88;
}

.form-card--maintenance:hover,
.form-card--maintenance:focus-visible {
    opacity: 1;
}

.admin-list-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.forms-list-empty {
    margin: 0;
    padding: 1.25rem 1rem;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    line-height: 1.5;
    border: 1px dashed var(--border);
    border-radius: var(--form-radius);
    background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.forms-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.form-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--form-radius);
    color: var(--text);
    text-decoration: none;
    transition: border-color var(--transition), background var(--transition);
    min-width: 0;
}

.form-card:hover,
.form-card:focus-visible {
    border-color: color-mix(in srgb, var(--vilpas-link) 45%, var(--border));
    background: color-mix(in srgb, var(--vilpas-blue) 12%, var(--surface));
    color: var(--text);
}

.form-card-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: color-mix(in srgb, var(--vilpas-blue) 22%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--vilpas-link) 25%, var(--border));
    border-radius: var(--form-radius);
}

.form-card-icon .icon {
    color: var(--vilpas-link);
}

.form-card-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.form-card-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vilpas-link);
}

.form-card-title {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.form-card-desc {
    font-size: 0.875rem;
    color: var(--muted);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.form-card-arrow {
    flex-shrink: 0;
    align-self: center;
    color: var(--muted);
}

.form-card:hover .form-card-arrow,
.form-card:focus-visible .form-card-arrow {
    color: var(--vilpas-link);
}

/* Thank-you confirmation (post-submit) */
.thankyou-main {
    max-width: 42rem;
    padding-top: 0.35rem;
    padding-bottom: 1.5rem;
}

.thankyou-panel {
    margin: 0;
    padding: 1.35rem 0 0.25rem;
    color: var(--text);
    background: transparent;
    border: 0;
}

.thankyou-success {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;
    margin: 0 0 1.15rem;
}

.thankyou-success-icon {
    flex-shrink: 0;
    margin-block: 0.05em 0;
    font-size: 2rem;
    line-height: 1;
    color: var(--free);
}

.thankyou-success-copy {
    min-width: 0;
    flex: 1;
}

.thankyou-success-title {
    margin: 0 0 0.4rem;
    font-family: var(--font-display);
    font-size: clamp(1.35rem, 3.2vw, 1.65rem);
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    line-height: 1.15;
    color: var(--text);
}

.thankyou-lede {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--text);
    max-width: 36rem;
}

.thankyou-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.85rem 1.25rem;
    margin: 0 0 1.15rem;
    padding: 0.85rem 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.thankyou-meta-item {
    margin: 0;
    min-width: 0;
}

.thankyou-meta-label {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.thankyou-meta-value {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    color: var(--text);
    overflow-wrap: anywhere;
}

.thankyou-notice {
    margin: 0 0 1.35rem;
    padding: 0.75rem 0.85rem;
    background: color-mix(in srgb, var(--partial) 14%, var(--surface));
    border: 1px solid color-mix(in srgb, var(--partial) 42%, var(--border));
    border-radius: var(--form-radius);
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text);
}

.thankyou-section {
    margin: 0 0 1.25rem;
}

.thankyou-section-title {
    margin: 0 0 0.65rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
}

.thankyou-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
}

.thankyou-steps li + li {
    margin-top: 0.5rem;
}

.thankyou-divider {
    margin: 1.25rem 0;
    border: 0;
    border-top: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}

.thankyou-contact-intro {
    margin: 0 0 0.35rem;
    font-size: 0.95rem;
    color: var(--text);
}

.thankyou-contact {
    margin: 0.15rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.95rem;
}

.thankyou-contact .contact-line {
    margin: 0;
}

.thankyou-contact .contact-line > .icon {
    color: var(--vilpas-red);
}

.thankyou-contact .contact-line + .contact-line {
    margin-top: 0.15rem;
}

.thankyou-back {
    margin: 1.35rem 0 0;
}

.thankyou-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 2.75rem;
    font-weight: 600;
    color: var(--vilpas-link);
    text-decoration: none;
}

.thankyou-back-link > .icon {
    margin-block: 0;
}

.thankyou-back-link:hover {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.thankyou-back-link:focus-visible {
    outline: 2px solid var(--vilpas-focus);
    outline-offset: 3px;
    border-radius: 2px;
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.thankyou-panel a:not(.thankyou-back-link) {
    color: var(--vilpas-link);
}

.thankyou-panel a:not(.thankyou-back-link):hover {
    text-decoration: underline;
    text-underline-offset: 0.12em;
}

.thankyou-panel a:not(.thankyou-back-link):focus-visible {
    outline: 2px solid var(--vilpas-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (min-width: 560px) {
    .thankyou-meta:not([hidden]) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .thankyou-success-icon {
        animation: thankyou-success-pop 0.45s ease-out both;
    }
}

@keyframes thankyou-success-pop {
    from {
        opacity: 0;
        transform: scale(0.82);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .thankyou-success-icon {
        animation: none;
    }
}

/* Legacy class aliases (keep selectors from older markup / tests) */
.thankyou-card {
    margin: 0;
    padding: 1.35rem 0 0.25rem;
    background: transparent;
    color: var(--text);
    border-radius: 0;
}

.thankyou-dates {
    margin: 0;
}

.thankyou-dates-label {
    margin: 0 0 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--muted);
}

.thankyou-dates-text {
    margin: 0;
    font-weight: 700;
}

/* Staff-defined lisäkysymykset on the Tupurin booking form (admin form builder) */
#custom-fields {
    margin: 1.25rem 0;
    padding-top: 1rem;
    border-top: 1px solid var(--form-border-light);
}

#custom-fields .section-heading {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--form-text);
}

#custom-fields .section-heading .icon {
    color: var(--vilpas-red);
}

#custom-fields .admin-check-row {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
}

#custom-fields .admin-check-row input {
    margin-top: 0.15rem;
    flex-shrink: 0;
}
<!-- deploy 2026-08-10T12:13:08+03:00 -->
/* 2026-08-10T12:15:08+03:00 */
/* bump 2026-08-10T12:16:04+03:00 */
/* 2026-08-10T12:16:45+03:00 */