/* ==========================================================================
   BookingMoko — AUTH PAGES (login / register / forgot password)  v3.1
   Layout only. Colours, buttons, inputs come from shared/css.
   Load order: design-tokens.css, global.css, components.css, then this file.
   Desktop: navy showcase on the left, form card on the right.
   Phone / tablet: compact navy header (logo + language), then the form.
   v3.1: logo + language switch + self-hosted fonts live here, 44px touch targets,
   14px minimum text, readable gold label, field error states, header / footer
   landmarks, short-window layout, disabled "Coming soon" Google button.
   ========================================================================== */

/* ---------- Self-hosted fonts (no request to Google) ----------
   Variable fonts, Latin subset: English, German (ä ö ü ß) and Tagalog (ñ).
   If a file is missing, the fallback stack from design-tokens.css is used. */
@font-face {
    font-family: "Inter";
    src: url("../share/assets/fonts/inter-latin-variable.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Bricolage Grotesque";
    src: url("../share/assets/fonts/bricolage-grotesque-latin-variable.woff2") format("woff2");
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

.login-body, .register-body, .auth-body { background: var(--bm-paper); }

/* ---------- Logo (same look as the homepage) ---------- */
.brand { display: inline-flex; align-items: center; gap: .6rem; min-height: 44px; font-family: var(--bm-font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; text-decoration: none; color: var(--bm-ink); }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 11px 11px 11px 4px; background: var(--bm-accent); color: var(--bm-on-accent); font-size: 1.05rem; }
.brand-accent { color: var(--bm-accent); }

/* ---------- Language switch (EN | DE | TL). The choice is shared with the homepage. ---------- */
.lang-switch { display: inline-flex; padding: 2px; gap: 2px; border: 1px solid var(--bm-line-strong); border-radius: var(--bm-r-pill); background: var(--bm-surface); }
.lang-switch button { min-width: 44px; min-height: 44px; padding: 0 .55rem; border: 0; border-radius: var(--bm-r-pill); background: transparent; color: var(--bm-ink-2); font-size: var(--bm-text-sm); font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background var(--bm-fast), color var(--bm-fast); }
.lang-switch button:hover { background: var(--bm-surface-2); color: var(--bm-ink); }
.lang-switch button.is-active { background: var(--bm-accent); color: var(--bm-on-accent); }
/* Compact version for phones. Safari ignores min-height on native dropdowns, so it draws its own box and arrow. */
.lang-select { display: none; height: 44px; min-height: 44px; padding: 0 1.3rem 0 .55rem; border: 1px solid var(--bm-line-strong); border-radius: var(--bm-r-pill); background-color: var(--bm-surface); color: var(--bm-ink); font-family: inherit; font-size: 1rem; /* 16px: iPhone Safari zooms the page into smaller fields */ font-weight: 700; cursor: pointer;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; background-position: calc(100% - 13px) 52%, calc(100% - 8px) 52%; }

/* ---------- Header and footer (landmarks) ---------- */
.auth-header { position: relative; z-index: 2; border-bottom: 1px solid var(--bm-line); }
.auth-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--bm-space-4); min-height: var(--bm-header-h); padding-inline: var(--bm-gutter); }
.auth-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem var(--bm-space-6); padding: var(--bm-space-3) var(--bm-gutter); border-top: 1px solid var(--bm-line); background: var(--bm-paper); }

/* Pages with a header: header on top, main fills the window, footer at the bottom */
.auth-has-header { display: flex; flex-direction: column; min-height: 100dvh; }
.auth-has-header .auth-page { display: flex; flex: 1 0 auto; min-height: 0; }
.auth-has-header .auth-container { flex: 1; min-height: 0; }

.auth-page { min-height: 100dvh; }
.auth-container { display: grid; width: 100%; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); min-height: 100dvh; }

/* ---------- Left: showcase ---------- */
.auth-showcase {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: var(--bm-space-6);
    padding: clamp(1.75rem, 1rem + 3vw, 4rem);
    background:
        radial-gradient(60% 50% at 90% 0%, rgba(217, 164, 65, .2), transparent 65%),
        radial-gradient(70% 60% at 0% 100%, rgba(40, 90, 180, .38), transparent 70%),
        linear-gradient(180deg, var(--bm-navy-900), var(--bm-navy-950));
}
.auth-showcase::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 64px); }
.auth-showcase > * { position: relative; }
.auth-brand { align-self: flex-start; }
.brand-tagline { margin: calc(-1 * var(--bm-space-4)) 0 0; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.brand-tagline span { color: var(--bm-accent); }

.showcase-copy h1, .showcase-copy .showcase-title { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.75rem); margin-bottom: var(--bm-space-4); line-height: var(--bm-leading-tight); text-wrap: balance; }
.showcase-copy h1 span:last-of-type, .showcase-copy .showcase-title span:last-of-type { color: var(--bm-ink-3); }
.showcase-eyebrow { margin-bottom: var(--bm-space-3); font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-accent); }
.showcase-description { max-width: 46ch; margin: 0; font-size: var(--bm-text-lg); color: var(--bm-ink-2); }

.showcase-features { display: grid; gap: var(--bm-space-4); }
.feature-item { display: flex; align-items: center; gap: var(--bm-space-4); }
.feature-item strong { display: block; font-size: var(--bm-text-base); }
.feature-item small { display: block; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.showcase-features .feature-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px 14px 14px 5px; }
.showcase-features .feature-icon svg { width: 22px; height: 22px; }
/* colour names kept for compatibility: blue = barbershop, teal = vehicle rental, purple = moving / growth (gold) */
.feature-blue   { background: rgba(106, 168, 255, .16); color: #8bbcff; }
.feature-teal   { background: rgba(79, 209, 165, .16);  color: #5fdcb0; }
.feature-purple { background: rgba(232, 185, 88, .18);  color: #f2c978; }

/* ---------- Booking dashboard illustration (pure CSS/HTML, sample data) ---------- */
.dashboard-visual { position: relative; margin-top: auto; padding-top: var(--bm-space-6); }
.visual-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .1); pointer-events: none; }
.orbit-one { width: 420px; height: 420px; right: -150px; bottom: -170px; }
.orbit-two { width: 260px; height: 260px; right: -60px; bottom: -80px; border-color: rgba(217, 164, 65, .4); }
.booking-notification {
    position: absolute; z-index: 2; top: -.25rem; right: 0;
    display: flex; align-items: center; gap: .8rem; padding: .7rem .9rem;
    background: #fff; color: #0a1a33; border-radius: var(--bm-r-md); box-shadow: var(--bm-shadow-lg);
}
.booking-notification strong { display: block; font-size: var(--bm-text-sm); }
.booking-notification small { display: block; font-size: var(--bm-text-sm); color: #5f6c89; line-height: 1.35; }
.notification-icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; background: #d9a441; color: #0a1a33; }
.notification-icon svg { width: 20px; height: 20px; }
.notification-arrow { margin-left: .4rem; font-size: 1.4rem; color: #5f6c89; }

.dashboard-card { position: relative; width: min(100%, 500px); margin-top: var(--bm-space-5); background: rgba(255, 255, 255, .06); border: 1px solid var(--bm-line-strong); border-radius: var(--bm-r-lg); box-shadow: var(--bm-shadow-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); overflow: hidden; }
.dashboard-topbar { display: flex; align-items: center; gap: .6rem; padding: .7rem 1rem; border-bottom: 1px solid var(--bm-line); font-size: var(--bm-text-sm); }
.dashboard-topbar strong { font-family: var(--bm-font-display); }
.mini-brand-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px 7px 7px 3px; background: var(--bm-accent); color: var(--bm-on-accent); font-size: var(--bm-text-sm); font-weight: 700; }
.dashboard-status { margin-left: auto; font-size: .7rem; color: #5fdcb0; }
.dashboard-content { display: grid; grid-template-columns: 140px 1fr; }
.dashboard-sidebar { display: flex; flex-direction: column; gap: .2rem; padding: .75rem; border-right: 1px solid var(--bm-line); }
.dashboard-sidebar span { display: flex; align-items: center; gap: .5rem; padding: .4rem .55rem; border-radius: var(--bm-r-xs); font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.dashboard-sidebar span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .7; }
.dashboard-sidebar span.active { background: var(--bm-accent-soft); color: var(--bm-accent); font-weight: 600; }
.dashboard-main { display: grid; gap: .6rem; padding: .9rem; align-content: start; min-width: 0; }
.dashboard-title-row { display: flex; justify-content: space-between; gap: .5rem; font-size: var(--bm-text-sm); }
.dashboard-title-row span { font-size: var(--bm-text-sm); color: var(--bm-accent); }
.appointment-row { display: grid; grid-template-columns: 5rem 30px minmax(0, 1fr); align-items: center; gap: .6rem; padding: .5rem .6rem; border-radius: var(--bm-r-sm); background: var(--bm-surface); }
.appointment-row.recovery-row { grid-template-columns: 36px 1fr; }
.appointment-time { font-size: var(--bm-text-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
.appointment-info strong { display: block; font-size: var(--bm-text-sm); line-height: 1.3; }
.appointment-info small { font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.dashboard-card .avatar { width: 30px; height: 30px; font-size: var(--bm-text-sm); color: #0a1a33; }
.avatar-blue   { background: #8bbcff; }
.avatar-pink   { background: #5fdcb0; }   /* vehicle rental */
.avatar-purple { background: #f2c978; }   /* house moving  */
.dashboard-stat { display: flex; justify-content: space-between; align-items: center; margin-top: .2rem; padding: .6rem .7rem; border-radius: var(--bm-r-sm); background: var(--bm-accent-soft); }
.dashboard-stat small { display: block; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.dashboard-stat strong { font-size: var(--bm-text-sm); }
.stat-trend { font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-accent); }

/* ---------- Right: form panel ---------- */
.auth-panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--bm-space-5); padding: clamp(1.5rem, 1rem + 3vw, 4rem) var(--bm-gutter); }
.auth-card { width: min(100%, 460px); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); background: var(--bm-surface); border: 1px solid var(--bm-line); border-radius: var(--bm-r-xl); box-shadow: var(--bm-shadow-md); }
.auth-heading { margin-bottom: var(--bm-space-5); }
/* Gold label: the gold token is too light on white (2.8:1), so it is mixed with the text colour (about 6:1) */
.auth-heading .eyebrow { margin-bottom: var(--bm-space-2); font-size: var(--bm-text-sm); font-weight: 700; color: color-mix(in srgb, var(--bm-accent-hover) 60%, var(--bm-ink)); }
.auth-heading h1, .auth-heading h2 { font-size: var(--bm-text-2xl); }
.auth-heading p:last-child { margin: 0; color: var(--bm-ink-2); font-size: var(--bm-text-sm); }

/* Register: the form is grouped in sections with a heading each */
.form-section { min-width: 0; margin: 0 0 var(--bm-space-5); padding: 0; border: 0; }
.form-section__title { display: flex; align-items: center; gap: .75rem; width: 100%; padding: 0; margin-bottom: var(--bm-space-3); font-family: var(--bm-font-display); font-size: var(--bm-text-lg); font-weight: 700; color: var(--bm-ink); }
.form-section__title::after { content: ""; flex: 1; border-top: 1px solid var(--bm-line); }
.form-section .form-group:last-child { margin-bottom: 0; }

/* Register: fields that appear after an answer (typed business type, website address, social links) */
.form-conditional { margin-bottom: var(--bm-space-4); }
.form-conditional[hidden] { display: none; }
.form-conditional:last-child { margin-bottom: 0; }

.input-with-icon { position: relative; }
.input-with-icon > svg { position: absolute; left: .9rem; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--bm-ink-3); pointer-events: none; }
.form-group .input-with-icon input { padding-left: 2.75rem; }
.form-group .password-wrapper input { padding-right: 5.25rem; }
.password-toggle { position: absolute; right: .15rem; top: 50%; transform: translateY(-50%); min-width: 44px; min-height: 44px; padding: 0 .75rem; border: 0; border-radius: var(--bm-r-xs); background: transparent; color: var(--bm-primary); font-size: var(--bm-text-sm); font-weight: 700; cursor: pointer; }
.password-toggle:hover { background: var(--bm-surface-2); }

/* A field with a problem: red border + thicker line (not colour only), tied to the message by aria-describedby */
.form-group :is(input, select)[aria-invalid="true"] { border-color: var(--bm-danger); box-shadow: 0 0 0 1px var(--bm-danger); }
.form-group :is(input, select)[aria-invalid="true"]:focus-visible { box-shadow: 0 0 0 1px var(--bm-danger), var(--bm-focus); }

/* Hint under a field. Turns red when the field has a problem; the mismatch hint is always red. */
.field-hint { display: block; margin-top: .1rem; font-size: var(--bm-text-sm); line-height: 1.45; color: var(--bm-ink-3); }
.field-hint--error { color: var(--bm-danger); font-weight: 600; }
.field-hint[hidden] { display: none; }
.form-group:has(input[aria-invalid="true"]) .field-hint:not(.field-hint--error) { color: var(--bm-danger); }

/* Dropdowns in forms: Safari ignores min-height on native dropdowns, so they draw their own box and arrow (same as the homepage) */
.auth-form select { -webkit-appearance: none; appearance: none; min-height: 46px; padding-right: 2.5rem; font-size: 1rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-repeat: no-repeat; background-size: 5px 5px, 5px 5px; background-position: calc(100% - 19px) 52%, calc(100% - 14px) 52%; }

.auth-options { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 1rem; margin: 0 0 var(--bm-space-3); font-size: var(--bm-text-sm); }
.remember-option { display: inline-flex; align-items: center; gap: .55rem; min-height: 44px; color: var(--bm-ink-2); cursor: pointer; }
.remember-option input { flex: none; width: 20px; height: 20px; accent-color: var(--bm-primary); }
/* checkbox row directly inside a form (register: terms) */
.auth-form > .remember-option { align-items: flex-start; gap: .75rem; margin: var(--bm-space-2) 0 var(--bm-space-4); padding-block: .6rem; font-size: var(--bm-text-sm); line-height: 1.6; }
.auth-form > .remember-option input { width: 24px; height: 24px; margin-top: .05rem; }
.auth-form > .remember-option input[aria-invalid="true"] { outline: 2px solid var(--bm-danger); outline-offset: 2px; }
.auth-form > .remember-option .auth-link { display: inline; min-height: 0; padding-block: .85rem; text-decoration: underline; text-underline-offset: .15em; }
.auth-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--bm-primary); font-weight: 600; text-decoration: none; }
.auth-link:hover { text-decoration: underline; }
.auth-submit { width: 100%; min-height: 52px; font-size: var(--bm-text-base); }

/* Message line: sits ABOVE the submit button, so an error is seen without scrolling.
   Plain text = hint; data-type="error" | "info" | "success" = message written by auth.js. */
.auth-notice { margin: 0 0 var(--bm-space-4); text-align: left; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.auth-notice[data-type] { margin: 0 0 var(--bm-space-4); padding: .8rem 1rem; border: 1px solid transparent; border-radius: var(--bm-r-sm); text-align: left; font-size: var(--bm-text-sm); line-height: 1.5; }
.auth-notice[data-type="error"]   { background: var(--bm-danger-soft);  color: var(--bm-danger);  border-color: color-mix(in srgb, var(--bm-danger) 30%, transparent); font-weight: 600; }
.auth-notice[data-type="info"]    { background: var(--bm-info-soft);    color: var(--bm-info);    border-color: color-mix(in srgb, var(--bm-info) 30%, transparent); }
.auth-notice[data-type="success"] { background: var(--bm-success-soft); color: var(--bm-success); border-color: color-mix(in srgb, var(--bm-success) 30%, transparent); }
.auth-notice[hidden] { display: none; }
.auth-notice.is-error   { color: var(--bm-danger); }
.auth-notice.is-success { color: var(--bm-success); }
/* Forgot password: the message box keeps a fixed minimum height, so a message replacing the hint does not move the page.
   (3 lines on wide screens; 4 lines on phones, where the German and Tagalog texts are longer) */
.auth-notice--slot { box-sizing: border-box; min-height: 5.75rem; }
@media (max-width: 560px) { .auth-notice--slot { min-height: 7rem; } }
.auth-notice:focus { outline: none; }
.auth-notice:focus-visible { box-shadow: var(--bm-focus); }

.auth-divider { display: flex; align-items: center; gap: 1rem; margin: var(--bm-space-5) 0; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; border-top: 1px solid var(--bm-line); }
.google-button { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .4rem .7rem; width: 100%; min-height: 48px; padding: .5rem 1rem; border: 1px solid var(--bm-line-strong); border-radius: var(--bm-r-sm); background: var(--bm-surface); color: var(--bm-ink); font-weight: 600; font-size: var(--bm-text-sm); cursor: pointer; transition: background var(--bm-fast); }
.google-button:hover { background: var(--bm-surface-2); }
/* Not available yet: clearly switched off, with a "Coming soon" label */
.google-button:disabled { cursor: not-allowed; background: var(--bm-surface-2); color: var(--bm-ink-3); }
.google-button:disabled:hover { background: var(--bm-surface-2); }
.google-button:disabled .google-mark { opacity: .6; }
.google-soon { font-size: var(--bm-text-sm); font-weight: 600; }
.google-mark { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #fff; color: #4285f4; font-weight: 800; font-size: var(--bm-text-sm); box-shadow: inset 0 0 0 1px #dadce0; }
.auth-switch { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .4rem; margin: var(--bm-space-4) 0 0; text-align: center; font-size: var(--bm-text-sm); color: var(--bm-ink-2); }
/* "Terms" and "Privacy Policy": each link gets a 44px tap area */
.auth-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: .3em; margin: var(--bm-space-2) 0 0; text-align: center; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }
.auth-legal a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: .2em; color: var(--bm-ink-2); }
.auth-legal--note { display: block; }
.auth-notice.auth-dev-note { margin: var(--bm-space-4) 0 0; }

/* Forgot password: the two ways out of the page, grouped under the card, each 44px high */
.auth-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem var(--bm-space-3); width: min(100%, 460px); }
.auth-nav__link { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 44px; padding: 0 1.1rem; border: 1px solid transparent; border-radius: var(--bm-r-pill); font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-ink-2); text-decoration: none; transition: background var(--bm-fast), color var(--bm-fast); }
.auth-nav__link:hover { background: var(--bm-surface-2); color: var(--bm-ink); }
.auth-nav__link--main { border-color: var(--bm-line-strong); background: var(--bm-surface); color: var(--bm-primary); }
.auth-back-link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-ink-2); text-decoration: none; }
.auth-back-link:hover { color: var(--bm-ink); }
.auth-footer-note { margin: 0; font-size: var(--bm-text-sm); color: var(--bm-ink-3); }

/* ---------- Tablet / mobile ---------- */
@media (max-width: 960px) {
    .auth-container { grid-template-columns: minmax(0, 1fr); min-height: 0; }
    .auth-has-header .auth-page { display: block; }
    /* Tablet: the showcase becomes a navy band ABOVE the form: heading and description on the left,
       the dashboard illustration on the right. (The feature list is left out to keep the form close.) */
    .auth-showcase { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: var(--bm-space-5) var(--bm-space-6); padding: var(--bm-space-6) var(--bm-gutter); }
    .showcase-features { display: none; }
    .showcase-copy h1, .showcase-copy .showcase-title { font-size: var(--bm-text-2xl); margin-bottom: var(--bm-space-3); }
    .showcase-description { font-size: var(--bm-text-base); }
    .dashboard-visual { margin-top: 0; padding-top: var(--bm-space-5); }
    /* the illustration is shown without its side menu, so it stays compact next to the text */
    .dashboard-content { grid-template-columns: minmax(0, 1fr); }
    .dashboard-sidebar { display: none; }
    .auth-panel { padding-top: var(--bm-space-6); }
    .auth-has-header .auth-panel { padding-top: var(--bm-space-5); padding-bottom: var(--bm-space-5); }
}
@media (max-width: 640px) {
    /* Phone: nothing from the navy panel, only the header above the form */
    .auth-showcase { display: none; }
    .lang-switch { display: none; }
    .lang-select { display: inline-block; }
    .brand { font-size: 1.1rem; gap: .5rem; }
    .brand-mark { width: 32px; height: 32px; }
}
@media (max-width: 560px) {
    .showcase-copy, .brand-tagline { display: none; }
    .auth-card { border-radius: var(--bm-r-lg); }
}
@media (max-width: 400px) {
    .auth-header__inner { gap: var(--bm-space-2); }
    .brand { font-size: 1rem; }
    .lang-select { padding: 0 1.15rem 0 .4rem; background-position: calc(100% - 11px) 52%, calc(100% - 6px) 52%; }
}

/* ---------- Register: "how would you like to get started" choice cards ---------- */
.choice-fieldset { min-width: 0; margin: 0 0 var(--bm-space-4); padding: 0; border: 0; display: grid; gap: .6rem; }
.choice-fieldset legend { padding: 0; margin-bottom: .5rem; font-size: var(--bm-text-sm); font-weight: 600; color: var(--bm-ink); }
.choice-card { position: relative; display: block; cursor: pointer; }
.choice-card input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice-body { display: grid; gap: .15rem; min-height: 44px; padding: .85rem 2.5rem .85rem 2.75rem; position: relative; border: 1px solid var(--bm-line-strong); border-radius: var(--bm-r-sm); background: var(--bm-surface); transition: border-color var(--bm-fast), background var(--bm-fast), box-shadow var(--bm-fast); }
.choice-body::before { content: ""; position: absolute; left: 1rem; top: 1.05rem; width: 18px; height: 18px; border: 2px solid var(--bm-line-strong); border-radius: 50%; background: var(--bm-surface); transition: border-color var(--bm-fast), box-shadow var(--bm-fast); }
.choice-body strong { font-size: var(--bm-text-sm); }
.choice-body small { font-size: var(--bm-text-sm); line-height: 1.5; color: var(--bm-ink-3); }
.choice-card:hover .choice-body { border-color: var(--bm-ink-3); }
/* Selected card: thick gold border, tinted background, filled dot and a check mark (not colour alone) */
.choice-card input:checked + .choice-body { border-color: var(--bm-accent-hover); background: var(--bm-accent-soft); box-shadow: 0 0 0 1px var(--bm-accent-hover); }
.choice-card input:checked + .choice-body strong { color: var(--bm-ink); }
.choice-card input:checked + .choice-body::before { border-color: var(--bm-accent-hover); box-shadow: inset 0 0 0 4px var(--bm-surface), inset 0 0 0 10px var(--bm-accent-hover); }
.choice-card input:checked + .choice-body::after { content: ""; position: absolute; right: 1rem; top: 1rem; width: 7px; height: 12px; border: solid var(--bm-accent-hover); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.choice-card input:not(:checked) + .choice-body strong { color: var(--bm-ink-2); }
.choice-card input:focus-visible + .choice-body { box-shadow: var(--bm-focus); }

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion: reduce) {
    * { transition-duration: .01ms !important; }
}