/* Eezy Afspraak - v0.2.0 styling matching legacy sc-agenda v7 design */

.eezy-afspraak {
    /* Aligned to the Eezy site brand (indigo primary, teal accent) so the
       booking widget matches every other button on the site + passes WCAG AA.
       Old self-palette (#1E2A5E / #14B8A6) had white-on-light-teal buttons. */
    --eezy-navy: #1B2039;
    --eezy-navy-light: #2D3D7C;
    --eezy-indigo: #44528F;
    --eezy-indigo-dark: #36426F;
    --eezy-teal: #04B1A9;
    --eezy-teal-dark: #057C77;
    --eezy-text: #1F2937;
    --eezy-muted: #6B7280;
    --eezy-border: #E5E7EB;
    --eezy-bg: #F9FAFB;
    --eezy-card: #FFFFFF;
    --eezy-avail-bg: #D1FAE5;
    --eezy-avail-text: #065F46;
    --eezy-avail-border: #6EE7B7;
    --eezy-vol-bg: #FEE2E2;
    --eezy-vol-text: #991B1B;
    --eezy-vol-border: #FCA5A5;
    --eezy-required: #DC2626;

    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--eezy-text);
    max-width: 960px;
    margin: 1rem auto;
    background: var(--eezy-card);
    border-radius: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    overflow: hidden;
}
.eezy-afspraak * { box-sizing: border-box; }

/* ── Stepper header ─────────────────────────── */
.eezy-stepper {
    background: var(--eezy-navy);
    padding: 0.9rem 1.5rem;
    color: #fff;
}
.eezy-stepper ol {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    margin: 0;
    font-size: 0.95rem;
}
.eezy-stepper li {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.eezy-stepper li::before {
    content: attr(data-step);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}
.eezy-stepper li.is-active {
    color: #fff;
}
.eezy-stepper li.is-active::before {
    background: #fff;
    color: var(--eezy-navy);
    border-color: #fff;
}
.eezy-stepper li.is-done {
    color: #fff;
}
.eezy-stepper li.is-done::before {
    background: var(--eezy-teal-dark);
    color: #fff;
    border-color: var(--eezy-teal-dark);
    content: "\2713";
}
/* Geen connector-streepjes: het 1rem-lijntje plakte visueel tegen de cirkel
   van de volgende stap en las als een zwevend half pijltje ("-2", "-3").
   De genummerde cirkels dragen de voortgang prima zelf; ruime gap ipv lijn. */
.eezy-stepper li + li {
    padding-left: 1.25rem;
}
.eezy-stepper li.is-clickable {
    cursor: pointer;
    transition: opacity 150ms ease;
}
.eezy-stepper li.is-clickable:hover { opacity: 0.8; }

/* ── Body ─────────────────────────── */
.eezy-step {
    padding: 1.25rem 1.75rem;
    min-height: 240px;
}
.eezy-step h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--eezy-navy);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}
.eezy-step .eezy-subtitle {
    color: var(--eezy-muted);
    margin: 0 0 1.5rem;
    font-size: 0.95rem;
}

/* ── Banner ─────────────────────────── */
.eezy-banner {
    margin: 1rem 2.5rem 0;
    padding: 0.875rem 1.125rem;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid;
}
.eezy-banner--info { background: #DBEAFE; color: #1E40AF; border-color: #93C5FD; }
.eezy-banner--error { background: var(--eezy-vol-bg); color: var(--eezy-vol-text); border-color: var(--eezy-vol-border); }
.eezy-banner--success { background: var(--eezy-avail-bg); color: var(--eezy-avail-text); border-color: var(--eezy-avail-border); }

/* ── Step 1: Locatie dropdown ─────────────────────────── */
.eezy-select {
    width: 100%;
    padding: 0.875rem 1rem;
    border: 1px solid var(--eezy-border);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231E2A5E' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat right 1rem center;
    font-size: 1rem;
    appearance: none;
    cursor: pointer;
    color: var(--eezy-text);
}
.eezy-select:focus {
    outline: none;
    border-color: var(--eezy-teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}

/* Searchable branch combobox */
.eezy-branch-search {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 2.75rem;
    border: 1px solid var(--eezy-border);
    border-radius: 12px;
    font-size: 1rem;
    color: var(--eezy-text);
    background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>") no-repeat 0.875rem center;
    margin-bottom: 1rem;
}
.eezy-branch-search:focus {
    outline: none;
    border-color: var(--eezy-teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.15);
}
.eezy-branch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.5rem;
    max-height: 300px;
    overflow-y: auto;
    padding: 0.25rem;
    margin: -0.25rem;
}
.eezy-branch-card {
    appearance: none;
    background: #fff;
    border: 1px solid var(--eezy-border);
    border-radius: 10px;
    padding: 0.875rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    font-size: 0.95rem;
    color: var(--eezy-text);
    text-align: left;
    transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.eezy-branch-card:hover {
    border-color: var(--eezy-teal);
    background: var(--eezy-bg);
    transform: translateX(2px);
}
.eezy-branch-name { font-weight: 600; }
.eezy-branch-arrow {
    color: var(--eezy-muted);
    transition: transform 120ms ease, color 120ms ease;
}
.eezy-branch-card:hover .eezy-branch-arrow {
    color: var(--eezy-teal);
    transform: translateX(2px);
}
/* Kit-proof: the Elementor kit forces white button text on hover/focus, which turned
   the branch name white on the light hover/focus background (unreadable). Force the
   readable dark text on every interactive state; keep the teal border/arrow accent. */
.eezy-branch-card:hover,
.eezy-branch-card:focus,
.eezy-branch-card:focus-visible,
.eezy-branch-card:active {
    color: var(--eezy-text) !important;
}
.eezy-branch-card:hover .eezy-branch-name,
.eezy-branch-card:focus .eezy-branch-name,
.eezy-branch-card:focus-visible .eezy-branch-name,
.eezy-branch-card:active .eezy-branch-name {
    color: var(--eezy-text) !important;
}

/* Province-grouped view (no search query) */
/* CSS-columns ipv een grid met een cel per provincie: provincies vloeien nu
   automatisch en balanceren (het grid liet Zuid-Holland de rijhoogte bepalen
   met witruimte onder de korte provincies), en de min-kolombreedte maakt de
   media queries overbodig (1 kolom smal, 2 tablet, 3 desktop). Geen interne
   max-height/scrollbar meer: dubbelscroll in een picker is onhandig, zeker
   voor 50-80; de zoekbalk bovenaan blijft de snelle route. */
.eezy-branch-provinces {
    columns: 3 240px;
    column-gap: 2rem;
    padding: 0.25rem;
    margin: -0.25rem;
}
.eezy-province {
    display: block;
    break-inside: avoid;
    margin-bottom: 1.75rem;
}
.eezy-province-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--eezy-navy);
    margin: 0 0 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--eezy-teal);
}
.eezy-province-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.eezy-province-list .eezy-branch-card {
    padding: 0.625rem 0.875rem;
    font-size: 0.9rem;
}
.eezy-province-list .eezy-branch-name { font-weight: 500; }

@media (max-width: 600px) {
    .eezy-branch-provinces { column-gap: 1.25rem; }
    .eezy-province { margin-bottom: 1.25rem; }
}

/* ── Step 2: Calendar + slots ─────────────────────────── */
.eezy-calendar-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 2rem;
    margin-top: 0.5rem;
}
.eezy-legend {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: var(--eezy-muted);
}
.eezy-legend-dot {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 0.4rem;
    border: 1px solid;
}
.eezy-legend-dot--avail { background: var(--eezy-avail-bg); border-color: var(--eezy-avail-border); }
.eezy-legend-dot--vol { background: #F3F4F6; border-color: #D1D5DB; } /* matches the calm grey day cells */

.eezy-calendar {
    display: flex;
    flex-direction: column;
}
.eezy-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
}
.eezy-cal-nav h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    color: var(--eezy-navy);
}
.eezy-cal-nav button {
    appearance: none;
    background: #fff;
    border: 1px solid var(--eezy-border);
    width: 36px;
    height: 36px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--eezy-text);
    display: flex;
    align-items: center;
    justify-content: center;
}
.eezy-cal-nav button:disabled { opacity: 0.4; cursor: not-allowed; }
.eezy-cal-nav button:not(:disabled):hover { background: var(--eezy-bg); }

.eezy-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    /* Compact: cap width so day cells stay ~46px squares instead of ~130px,
       keeping the whole calendar step inside the viewport without scrolling. */
    max-width: 380px;
    margin-left: auto;
    margin-right: auto;
}
.eezy-cal-head-row { max-width: 380px; margin-left: auto; margin-right: auto; }
.eezy-cal-head {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--eezy-muted);
    padding: 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.eezy-cal-day {
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--eezy-text);
    background: transparent;
    border: 1px solid transparent;
    cursor: default;
}
/* 4.6:1 op wit (was #D1D5DB = 1.47:1, ruim onder de WCAG-norm; de doelgroep
   is 50-80). Verleden dagen blijven visueel duidelijk "uit" doordat actieve
   dagen bold + groen omrand zijn. */
.eezy-cal-day--past, .eezy-cal-day--blank { color: #6B7280; }
.eezy-cal-day--avail {
    background: var(--eezy-avail-bg);
    color: var(--eezy-avail-text);
    border-color: var(--eezy-avail-border);
    border-width: 2px;
    font-weight: 700;
    cursor: pointer;
}
.eezy-cal-day--avail:hover {
    background: #A7F3D0;
}
.eezy-cal-day--vol {
    /* Calm neutral instead of alarm-red: a month of red "Vol" days reads as
       "no room for me" to the 50-80 audience. Red stays reserved for errors.
       #4B5563 ipv #9CA3AF: op de grijze celachtergrond is 4.5:1 vereist en
       #6B7280 haalde daar net 4.39. */
    background: #F3F4F6;
    color: #4B5563;
    border-color: #E5E7EB;
}
.eezy-cal-day--selected {
    background: var(--eezy-navy) !important;
    color: #fff !important;
    border-color: var(--eezy-navy) !important;
    font-weight: 700;
}

/* Desktop (>=901px): the compact 380px grid is a mobile choice. In the wide
   desktop column it floated lost: month arrows at the far column edges, 46px
   cells with small dates (audience is 50-80). Give the calendar real desktop
   presence and glue the month nav to the grid. */
@media (min-width: 901px) {
    .eezy-cal-grid,
    .eezy-cal-head-row {
        max-width: 480px;
        /* .eezy-calendar is a flex column: auto side-margins block the default
           stretch, so without an explicit width the grid collapses to
           min-content (~304px with 7 narrow tracks). */
        width: 100%;
    }
    .eezy-cal-grid { gap: 8px; }
    .eezy-cal-day { font-size: 1.125rem; border-radius: 10px; }
    .eezy-cal-head { font-size: 0.8125rem; }
    .eezy-cal-nav {
        max-width: 480px;
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 1.25rem;
    }
    .eezy-cal-nav h4 { font-size: 1.375rem; }
    .eezy-cal-nav button { width: 44px; height: 44px; font-size: 1.125rem; }
    .eezy-slots-panel .eezy-empty { font-size: 1rem; padding: 1rem 0 1.25rem; }
}

.eezy-slots-panel {
    background: var(--eezy-bg);
    border-radius: 12px;
    padding: 1.5rem;
    height: fit-content;
}
.eezy-slots-panel h5 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--eezy-muted);
    margin: 0 0 0.4rem;
    font-weight: 600;
}
.eezy-slots-panel .eezy-selected-date {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--eezy-navy);
    margin: 0 0 1rem;
}
.eezy-slots-panel .eezy-empty {
    color: var(--eezy-muted);
    font-size: 0.9rem;
    text-align: center;
    padding: 2rem 0;
}
.eezy-slot-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.625rem;
}
.eezy-slot {
    appearance: none;
    background: #fff;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    padding: 0.875rem 0.5rem;
    cursor: pointer;
    text-align: center;
    line-height: 1.15;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.1rem;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}
.eezy-slot-time {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--eezy-navy);
}
.eezy-slot-dur {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--eezy-muted);
    letter-spacing: 0.01em;
}
.eezy-slot:hover {
    border-color: var(--eezy-teal);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
.eezy-slot.is-selected {
    background: var(--eezy-navy);
    border-color: var(--eezy-navy);
    box-shadow: 0 4px 14px rgba(30, 42, 94, 0.25);
    transform: translateY(-1px);
}
.eezy-slot.is-selected .eezy-slot-time { color: #fff; }
.eezy-slot.is-selected .eezy-slot-dur { color: rgba(255, 255, 255, 0.7); }

/* ── Footer actions ─────────────────────────── */
.eezy-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--eezy-border);
}
.eezy-btn {
    appearance: none;
    border: 1px solid var(--eezy-border);
    background: #fff;
    color: var(--eezy-text);
    padding: 0.75rem 1.5rem;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
}
.eezy-btn:hover { background: var(--eezy-bg); }
.eezy-btn--primary {
    background: var(--eezy-indigo);
    color: #fff;
    border-color: var(--eezy-indigo);
}
.eezy-btn--primary:hover { background: var(--eezy-indigo-dark); border-color: var(--eezy-indigo-dark); }
.eezy-btn:disabled, .eezy-btn--primary:disabled {
    /* Explicit colors + !important: theme/Elementor button styles were overriding
       this to white-on-near-white (measured 1.05:1). Keep the disabled state
       legible (>=3:1) so the path forward is always visible. */
    opacity: 1;
    cursor: not-allowed;
    background: #F3F4F6 !important;
    color: #6B7280 !important;
    border-color: #D1D5DB !important;
}

/* ── Step 3: Form ─────────────────────────── */
.eezy-summary-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: var(--eezy-bg);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}
.eezy-summary-card .eezy-cal-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid var(--eezy-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--eezy-navy);
    flex-shrink: 0;
}
.eezy-summary-card .eezy-summary-date {
    font-weight: 700;
    color: var(--eezy-navy);
    font-size: 1rem;
}
.eezy-summary-card .eezy-summary-time {
    color: var(--eezy-muted);
    font-size: 0.9rem;
}

.eezy-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem 1.5rem;
}
.eezy-field { display: flex; flex-direction: column; }
.eezy-field--full { grid-column: 1 / -1; }
.eezy-field--postcode { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 1rem; }
.eezy-field label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--eezy-text);
    margin-bottom: 0.4rem;
}
.eezy-field label .req { color: var(--eezy-required); margin-left: 0.2rem; }
.eezy-field input,
.eezy-field textarea {
    appearance: none;
    border: 1.5px solid #CBD5E1;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    color: var(--eezy-text);
    font-family: inherit;
    background: #F8FAFC;
    width: 100%;
    transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.eezy-field input::placeholder,
.eezy-field textarea::placeholder { color: #94A3B8; }
.eezy-field input:hover,
.eezy-field textarea:hover { border-color: #94A3B8; }
.eezy-field input:focus,
.eezy-field textarea:focus {
    outline: none;
    background: #fff;
    border-color: var(--eezy-teal);
    box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.18);
}
.eezy-field input:not(:placeholder-shown) { background: #fff; border-color: #94A3B8; }
.eezy-field textarea { resize: vertical; min-height: 96px; }

.eezy-dob {
    display: grid;
    grid-template-columns: 1fr 1fr 1.6fr;
    gap: 0.4rem;
    align-items: center;
}
.eezy-dob span { text-align: center; color: var(--eezy-muted); }

.eezy-address-result {
    grid-column: 1 / -1;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
}
.eezy-address-result--ok {
    background: var(--eezy-avail-bg);
    color: var(--eezy-avail-text);
    border: 1px solid var(--eezy-avail-border);
}
.eezy-address-result--loading {
    background: var(--eezy-bg);
    color: var(--eezy-muted);
}
.eezy-address-result--err {
    background: var(--eezy-vol-bg);
    color: var(--eezy-vol-text);
    border: 1px solid var(--eezy-vol-border);
}

.eezy-error { color: var(--eezy-required); font-size: 0.875rem; margin-top: 0.5rem; grid-column: 1 / -1; }

/* ── Reasons (when more than one) ─────────────────────────── */
.eezy-reasons {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.75rem;
}
.eezy-reason {
    appearance: none;
    background: #fff;
    border: 1px solid var(--eezy-border);
    padding: 1rem 1.25rem;
    border-radius: 10px;
    text-align: left;
    cursor: pointer;
    font-size: 1rem;
    color: var(--eezy-text);
}
.eezy-reason:hover {
    border-color: var(--eezy-teal);
}
.eezy-reason small {
    display: block;
    color: var(--eezy-muted);
    font-size: 0.8rem;
    margin-top: 0.25rem;
}

/* ── Success state ─────────────────────────── */
.eezy-success {
    text-align: center;
    padding: 2rem 0;
}
.eezy-success-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--eezy-teal-dark);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}
.eezy-success h3 { color: var(--eezy-navy); margin-bottom: 0.5rem; }
.eezy-success p { color: var(--eezy-muted); }
.eezy-success .eezy-ref {
    display: inline-block;
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--eezy-bg);
    border-radius: 8px;
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    color: var(--eezy-navy);
}

/* ── Loading state ─────────────────────────── */
.eezy-loading {
    text-align: center;
    padding: 3rem 0;
    color: var(--eezy-muted);
}
.eezy-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 3px solid var(--eezy-border);
    border-top-color: var(--eezy-teal);
    border-radius: 50%;
    animation: eezy-spin 0.7s linear infinite;
    margin-bottom: 0.5rem;
}
@keyframes eezy-spin {
    to { transform: rotate(360deg); }
}

/* ── Skeleton loader ─────────────────────────── */
.eezy-skeleton-wrap { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.5rem 0; }
.eezy-skeleton {
    height: 44px;
    border-radius: 10px;
    background: linear-gradient(90deg, #E5E7EB 0%, #F1F5F9 50%, #E5E7EB 100%);
    background-size: 200% 100%;
    animation: eezy-shimmer 1.6s ease-in-out infinite;
}
.eezy-skeleton--tall { height: 64px; }
@keyframes eezy-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Trust pills (step 1) ─────────────────────────── */
.eezy-trust-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 0 1.5rem;
}
.eezy-trust-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: var(--eezy-bg);
    border: 1px solid var(--eezy-border);
    border-radius: 999px;
    padding: 0.3rem 0.75rem;
    font-size: 0.8rem;
    color: var(--eezy-text);
}
.eezy-trust-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: var(--eezy-teal-dark);
    color: #fff;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 700;
}

/* Slot panel branch name */
.eezy-slot-branch {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--eezy-teal-dark);
    margin: 0 0 0.15rem;
    text-transform: none;
    letter-spacing: 0;
}

/* ── Keyboard focus rings ─────────────────────────── */
.eezy-cal-day:focus-visible,
.eezy-slot:focus-visible,
.eezy-branch-card:focus-visible,
.eezy-chip:focus-visible {
    outline: 2px solid var(--eezy-teal);
    outline-offset: 2px;
}

/* ── Reduced motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .eezy-afspraak *,
    .eezy-afspraak *::before,
    .eezy-afspraak *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .eezy-skeleton { background: #E5E7EB; }
    .eezy-spinner { animation: none; border-top-color: var(--eezy-border); }
}

/* ── Mobile ─────────────────────────── */
@media (max-width: 768px) {
    .eezy-afspraak { margin: 0; border-radius: 0; box-shadow: none; }
    .eezy-stepper { padding: 1rem 1.25rem; }
    .eezy-stepper li { font-size: 0.85rem; gap: 0.4rem; }
    .eezy-stepper li + li { padding-left: 0.75rem; }
    .eezy-stepper li + li::after { width: 0.5rem; }
    .eezy-step { padding: 1.5rem 1.25rem 6rem; min-height: 240px; }
    .eezy-banner { margin-left: 1.25rem; margin-right: 1.25rem; }
    .eezy-calendar-wrap { grid-template-columns: 1fr; gap: 1.5rem; }
    .eezy-form { grid-template-columns: 1fr; gap: 1rem 1.25rem; }
    .eezy-field--postcode { grid-template-columns: 1.1fr 1fr 0.8fr; gap: 0.5rem; }
    .eezy-cal-grid { gap: 4px; }
    .eezy-cal-day { font-size: 0.85rem; min-height: 44px; }
    .eezy-slots-panel { padding: 1rem; }
    .eezy-slot-grid { grid-template-columns: 1fr 1fr; }
    .eezy-slot { padding: 0.875rem; min-height: 48px; }
    .eezy-branch-card { min-height: 48px; padding: 0.75rem 1rem; }
    .eezy-summary-card { padding: 0.875rem 1rem; }
    .eezy-summary-card .eezy-summary-date { font-size: 0.95rem; }

    /* Sticky bottom actions on mobile */
    .eezy-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin: 1.5rem -1.25rem -1.5rem;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--eezy-border);
        z-index: 5;
    }
    .eezy-actions .eezy-btn { padding: 0.875rem 1.25rem; min-height: 48px; }
    .eezy-actions .eezy-btn--primary { font-size: 1rem; }
}

@media (max-width: 480px) {
    /* On narrow phones: hide step labels, keep only numbered circles */
    .eezy-stepper li { font-size: 0; gap: 0; }
    .eezy-stepper li::before { font-size: 0.875rem; }
    .eezy-stepper li + li { padding-left: 0.5rem; }
    .eezy-stepper li + li::after { width: 0.4rem; left: 0; }
    .eezy-step h3 { font-size: 1.25rem; }
    .eezy-step .eezy-subtitle { font-size: 0.875rem; }
    .eezy-cal-grid .eezy-cal-head { font-size: 0.7rem; padding: 0.25rem 0; }
    .eezy-form .eezy-actions .eezy-btn { padding: 0.875rem 1rem; font-size: 0.95rem; }
    .eezy-branch-provinces { grid-template-columns: 1fr; gap: 1rem; }
    .eezy-province-title { font-size: 0.95rem; }
}