/* webike — "dark glass" design language (decided 31.8.2026, refined 1.9.2026).
   Spec: docs/site-screens-characterization.md §1.7 + the approved canvas.
   Brand: green #8CC63E is the single action color (dark text on it),
   light blue #4fc3f0 for links/info, dark blue→green ombre background,
   frosted-glass surfaces, photography-first with scrims.
   No hard pixel values — rem / fr / min() / clamp(). Touch targets >= 2.75rem. */

:root {
    --webike-blue: #1B9AD6;
    --webike-green: #8CC63E;

    --bg-deep: #04141d;
    /* Exactly the approved canvas background (Hen, 3.9.2026) — the two
       darkening rounds were reverted in its favour. */
    --bg-grad: radial-gradient(ellipse 90% 45% at 80% -5%, rgb(79 195 240 / 0.16), transparent 60%),
               linear-gradient(165deg, #082433 0%, #0b3629 70%, #061c26 100%);

    --text: #ffffff;
    --text-body: #e2ecf1;
    --text-dim: #d3dee4;
    --text-soft: #9fb3bd;

    --accent: #8CC63E;
    --accent-ink: #04141d;
    --accent-soft: #a5e04f;
    --link: #4fc3f0;

    --glass: rgb(255 255 255 / 0.06);
    --glass-strong: rgb(255 255 255 / 0.1);
    --glass-border: rgb(255 255 255 / 0.12);
    --glass-border-strong: rgb(255 255 255 / 0.2);
    --scrim: rgb(4 20 29 / 0.9);

    --radius: 1rem;
    --touch: 2.75rem;
}

* { box-sizing: border-box; }

/* An author display (flex/grid) on a class outranks the UA's [hidden] rule —
   which silently broke every hidden panel (the share sheet stayed open).
   Make hidden always win. */
[hidden] { display: none !important; }

/* Form controls do not inherit the page font by default — buttons were
   falling back to the system font (noticed 3.9.2026 on המשך / לתשלום). */
button, input, select, textarea { font: inherit; }

html { font-size: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

body {
    margin: 0;
    min-height: 100svh;
    font-family: "Assistant", "Rubik", system-ui, sans-serif;
    color: var(--text-body);
    background-color: var(--bg-deep);
    background-image: var(--bg-grad);
    background-attachment: fixed;
    line-height: 1.6;
}

a { color: var(--link); }
a:hover { color: #7fd6f7; }

h1, h2, h3 { color: var(--text); }

/* Short pages keep the footer below the fold — one scrolls to reach it. */
#main { min-height: 100svh; }

/* Content column — mobile-first, capped on wide screens. */
.wrap {
    /* Side breathing room bumped 1rem → 1.375rem per side (Hen, 7.9.2026). */
    width: min(45rem, 100% - 2.75rem);
    margin-inline: auto;
}

/* ---- glass primitives ---- */
.glass {
    background: rgb(4 20 29 / 0.45);
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border: 1px solid rgb(255 255 255 / 0.15);
}

.panel {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}
/* A panel that holds free content (no .portal-row / .doc-body inside) —
   .panel itself has no padding, so text sat on the edge (Tal, 10.9.2026). */
.panel-pad { padding: 1rem 1.125rem; }

/* Cross-document view transitions (9.9.2026): supporting browsers fade
   between pages instead of flashing — no-op elsewhere. */
@view-transition { navigation: auto; }

/* Navigation progress bar (perceived speed, 9.9.2026): lights up the
   instant a link/form is activated, resets on pageshow. */
.nav-progress {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 0.1875rem;
    inline-size: 0;
    background: var(--accent);
    z-index: 99;
    opacity: 0;
    pointer-events: none;
}
.nav-progress.on { opacity: 1; animation: nav-progress 3.5s cubic-bezier(0.2, 0.6, 0.3, 1) forwards; }
@keyframes nav-progress {
    0%   { inline-size: 0; }
    60%  { inline-size: 70%; }
    100% { inline-size: 92%; }
}
@media (prefers-reduced-motion: reduce) {
    .nav-progress.on { animation: none; inline-size: 60%; }
}

/* ---- floating header (over hero imagery) ---- */
/* Fixed (3.9.2026): the logo, "פעילויות" and "אזור אישי" stay reachable
   from anywhere on the page. The pills carry their own glass. */
.site-header {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    /* 2rem inside the 60rem hero media span (Hen 7.9.2026). */
    width: min(58rem, 100% - 1.5rem);
    margin-inline: auto;
    padding-block: 0.75rem;
}

.brand {
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding-inline: 1rem;
    border-radius: 999rem;
    font-weight: 800;
    font-size: 1.2rem;
    color: var(--text);
    text-decoration: none;
}
.brand-dot { color: var(--accent); }

.site-nav { display: flex; gap: 0.5rem; }
.site-nav a {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--touch);
    padding-inline: 0.9rem;
    border-radius: 999rem;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}
.site-nav svg { color: var(--accent); }

/* ---- buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    padding-inline: 1.75rem;
    border-radius: 999rem;
    background: var(--accent);
    color: var(--accent-ink);
    text-decoration: none;
    font-weight: 800;
    font-size: 1rem;
    border: 0;
    cursor: pointer;
}
.btn:hover { filter: brightness(1.06); color: var(--accent-ink); }

.btn-outline {
    background: transparent;
    color: var(--text);
    border: 0.09375rem solid rgb(255 255 255 / 0.3);
    font-weight: 700;
}
.btn-outline:hover { background: var(--glass); color: var(--text); filter: none; }

.btn-block { width: 100%; }

/* ---- category chips (jump links) — not sticky (decided 3.9.2026) ---- */
.chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
    padding-block: 0.25rem;
}
.chips::-webkit-scrollbar { display: none; }
.chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    min-height: var(--touch);
    padding-inline: 1rem;
    border-radius: 999rem;
    border: 1px solid rgb(255 255 255 / 0.14);
    background: rgb(0 0 0 / 0.28);   /* a shade darker than the page behind it */
    color: var(--text-soft);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.chip:hover { color: var(--text); border-color: rgb(255 255 255 / 0.3); }
.chip-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip-on:hover { color: var(--accent-ink); }
/* Toggleable filter chips (slot picker, 9.9.2026) share the look. */
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Typed birth-date entry (9.9.2026): day/month/year boxes, auto-advance. */
.dob-grid { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0.5rem; }
.dob-part { display: grid; gap: 0.25rem; }
.dob-lbl { font-size: 0.75rem; color: var(--text-soft); }
.dob-in { text-align: center; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; }

/* Fixed paying-contact card in the wizard (logged-in flow, 9.9.2026) */
.payer-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 0.875rem;
    padding: 0.75rem 1rem;
    margin-block-end: 1rem;
}
.payer-name { font-weight: 800; color: var(--text); }
.payer-sub { font-size: 0.85rem; color: var(--text-soft); }

/* Staff attendance block (instructor session, 9.9.2026) */
.ins-staff { display: grid; gap: 0.625rem; margin-block-end: 1.25rem; }

/* Slot-picker filters (private lessons) */
.slot-filters { display: grid; gap: 0.5rem; margin-block-end: 1rem; }
.slot-filter-row { display: flex; flex-wrap: wrap; gap: 0.375rem; align-items: end; }
.slot-filter-date { display: grid; gap: 0.25rem; flex: 1 1 8rem; font-size: 0.8rem; color: var(--text-soft); }
.slot-filter-date .input { min-width: 0; }

/* ---- featured hero ---- */
.featured {
    position: relative;
    min-height: clamp(26rem, 62svh, 36rem);
    display: flex;
    overflow: hidden;
}
.featured-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.featured-blur { display: none; }
/* Desktop (7.9.2026): the media keeps its phone-like natural aspect,
   centered and sharp, while the SAME media — heavily blurred — fills
   the full width behind it as an ambient backdrop. */
@media (min-width: 64rem) {
    .featured-blur {
        display: block;
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(2.5rem) brightness(0.55) saturate(1.1);
        transform: scale(1.2);   /* hides the blur's soft edges */
    }
    .featured-media {
        inset: 0;
        margin-inline: auto;
        /* The header sits 2rem inside this span on each edge. */
        width: min(60rem, 100% - 1.5rem);
        height: 100%;
    }
    .featured { min-height: clamp(30rem, 74svh, 44rem); }
    .featured-slide { overflow: hidden; }   /* keep the scaled blur inside its slide */
    /* The tagline sits under the logo pill, aligned to the header edge.
       Extra specificity: the base .featured-tagline rule appears later
       in this file and would otherwise win. */
    .featured .featured-tagline { inset-inline-start: calc((100% - min(58rem, 100% - 1.5rem)) / 2 + 1rem); }
}
.featured-media-fallback {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 65% 25%, #1B9AD6 0%, #0d4763 40%, #062736 70%, #04141d 100%);
}
.featured::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    height: 7.5rem;
    background: linear-gradient(to bottom, rgb(4 20 29 / 0.65), transparent);
    z-index: 1;
    pointer-events: none;
}
.featured::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--bg-deep) 4%, rgb(4 20 29 / 0.78) 32%, rgb(4 20 29 / 0.2) 58%, transparent 78%);
    z-index: 1;
    pointer-events: none;
}

/* Carousel track — native scroll-snap does the swiping; JS only syncs dots. */
.featured-track {
    display: flex;
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.featured-track::-webkit-scrollbar { display: none; }
.featured-slide {
    position: relative;
    flex: 0 0 100%;
    display: flex;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
.featured-slide .featured-body { padding-block-end: 2.5rem; }
.featured-tagline {
    position: absolute;
    inset-block-start: 4.25rem;
    inset-inline-start: 1.25rem;
    z-index: 2;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    text-shadow: 0 0.125rem 0.75rem rgb(0 0 0 / 0.55);
}
.featured-body {
    position: relative;
    z-index: 2;
    margin-block-start: auto;
    width: min(45rem, 100% - 2.5rem);
    margin-inline: auto;
    padding-block-end: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.featured-kicker {
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--accent-soft);
}
.featured-title {
    margin: 0;
    font-size: clamp(1.75rem, 7vw, 2.25rem);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text);
    text-shadow: 0 0.125rem 0.875rem rgb(0 0 0 / 0.5);
}
.featured-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-body);
    text-shadow: 0 0.0625rem 0.5rem rgb(0 0 0 / 0.55);
}
.featured-meta svg { color: var(--accent); flex-shrink: 0; }
.featured .btn { align-self: center; min-width: 9.5rem; margin-block-start: 0.375rem; }
.featured-dots {
    position: absolute;
    inset-block-end: 0.25rem;
    inset-inline: 0;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
}
.featured-dots button {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    min-width: 1.875rem;
    min-height: var(--touch);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.featured-dots span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.4);
    transition: width 0.2s, background 0.2s;
}
.featured-dots .on { width: 1.125rem; background: var(--accent); }

/* ---- category sections + horizontal rails ---- */
.cat-title {
    margin: 0 0 0.6rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
}
/* A tapped category lands at the top of the page, below the fixed header. */
.cat-section { margin-block-start: 1.25rem; scroll-margin-block-start: 4.75rem; }

.rail {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    padding-block-end: 0.25rem;
}
.rail::-webkit-scrollbar { display: none; }

.rail-card {
    position: relative;
    flex-shrink: 0;
    width: 13.75rem;
    height: 11.25rem;
    border-radius: var(--radius);
    overflow: hidden;
    scroll-snap-align: start;
    text-decoration: none;
    background: var(--glass);
    border: 1px solid var(--glass-border);
}
.rail-card img,
.card-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, var(--scrim) 8%, rgb(4 20 29 / 0.3) 50%, transparent 75%);
}
.rail-card .card-caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.75rem 0.875rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
}
.card-name { font-size: 0.95rem; font-weight: 800; color: var(--text); }
.card-meta { font-size: 0.75rem; color: var(--text-dim); }
.price-tag {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--text);
    background: rgb(255 255 255 / 0.16);
    border-radius: 999rem;
    padding: 0.3rem 0.625rem;
    white-space: nowrap;
}

/* ---- stacked cards (all-activities page) ---- */
.stack-card {
    position: relative;
    display: block;
    height: 10.625rem;
    border-radius: var(--radius);
    overflow: hidden;
    text-decoration: none;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    margin-block-start: 0.875rem;
}
.stack-card .card-caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.875rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
}
.stack-card .card-kicker {
    font-size: 0.7rem;
    font-weight: 800;
    color: var(--accent-soft);
}
.stack-card .card-name { font-size: 1.125rem; }
.stack-card .card-meta { font-size: 0.8rem; }

/* ---- page headers (inner pages) ---- */
.page-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.875rem;
}
.page-head h1 { margin: 0; font-size: 1.375rem; font-weight: 800; flex-grow: 1; }
.back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--touch);
    height: var(--touch);
    border-radius: 999rem;
    background: var(--glass-strong);
    border: 1px solid rgb(255 255 255 / 0.16);
    color: var(--text);
    text-decoration: none;
}

/* ---- activity page (full-bleed) ---- */
/* Glass-scroll (7.9.2026): the cover photo is FIXED behind the page; one
   continuous translucent panel rides up over it until it is fully hidden. */
.cover-fixed {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    height: 100svh;
    z-index: 0;
}
.cover-fixed .cover-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.cover-fixed .cover-fallback {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 55% 22%, #1B9AD6 0%, #0e5273 30%, #073246 55%, #04141d 90%);
}
.activity-flow { position: relative; z-index: 1; }
.cover-spacer { height: 44svh; }
/* The glass runs at least to the bottom of the first viewport, and the
   footer gets a solid ground so the fixed photo never peeks through it.
   The extra end padding keeps the footer out of the default scroll — it
   stays reachable (accessibility statement lives there), just one more
   deliberate swipe away. */
.activity-flow .activity-panel { min-height: 56svh; padding-block-end: 4rem; }

/* The "there's more" cue: a glass circle bobbing at the bottom of the
   first viewport; tap scrolls to the description, any scroll fades it. */
.scroll-cue {
    position: fixed;
    inset-block-end: calc(0.875rem + env(safe-area-inset-bottom));
    inset-inline: 0;
    margin-inline: auto;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.25);
    border-radius: 999rem;
    background: rgb(4 20 29 / 0.55);
    backdrop-filter: blur(0.25rem);
    -webkit-backdrop-filter: blur(0.25rem);
    color: var(--text);
    cursor: pointer;
    animation: cue-bob 1.8s ease-in-out infinite;
    transition: opacity 0.25s ease;
}
.scroll-cue.gone { opacity: 0; pointer-events: none; }
@keyframes cue-bob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(0.375rem); }
}
@media (prefers-reduced-motion: reduce) {
    .scroll-cue { animation: none; }
}
body:has(.cover-fixed) .site-footer {
    position: relative;
    z-index: 1;
    background: var(--bg-deep);
}
/* Marketing-picture carousel behind the panel (3.9.2026) */
.cover-track {
    position: absolute;
    inset: 0;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
}
.cover-track::-webkit-scrollbar { display: none; }
.cover-slide {
    position: relative;
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}
/* Dots sit at the bottom of the photo, just above the content panel
   (moved from the top, 3.9.2026). */
.cover-dots {
    position: relative;
    margin-block-start: auto;
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    padding-block: 0.375rem;
    z-index: 2;
    pointer-events: none;
}
.cover-dots ~ .cover-fade { margin-block-start: 0; }   /* a script tag sits between them */
/* Inside the bottom panel, under the CTA buttons (moved there 6.9.2026). */
.cover-dots-panel { margin-block-start: 1rem; padding-block: 0; }

/* "על הפעילות" + the marketing-pictures strip (layout rework, 7.9.2026):
   description under the CTA buttons, pictures side-scrolling under it. */
.activity-below {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    padding-block: 1.5rem 2rem;
}
.activity-about-title {
    margin: 0 0 0.375rem;
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--text);
}
.activity-strip {
    display: flex;
    gap: 0.625rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    border-radius: var(--radius);
}
.activity-strip::-webkit-scrollbar { display: none; }
.activity-strip .strip-ph {
    flex-shrink: 0;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
    scroll-snap-align: start;
}
.activity-strip img {
    display: block;
    height: clamp(8rem, 30vw, 11rem);
    width: auto;
    max-width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
}
.cover-dots span {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.45);
    transition: width 0.2s, background 0.2s;
}
.cover-dots .on { width: 1.125rem; background: var(--accent); }

.cover-fade {
    position: relative;
    margin-block-start: auto;
    height: 6.875rem;
    background: linear-gradient(to top, rgb(4 20 29 / 0.75), transparent);
    pointer-events: none;
}
.activity-panel {
    position: relative;
    background: rgb(4 20 29 / 0.52);
    backdrop-filter: blur(0.4375rem);
    -webkit-backdrop-filter: blur(0.4375rem);
    border-top: 1px solid rgb(255 255 255 / 0.08);
    padding-block: 1.125rem 1.5rem;
}
.activity-panel .wrap { display: flex; flex-direction: column; gap: 0.875rem; }
.activity-kicker {
    align-self: flex-start;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--accent-soft);
}
.activity-title {
    margin: 0;
    font-size: clamp(1.625rem, 6.5vw, 2rem);
    font-weight: 800;
    line-height: 1.15;
}
.activity-desc { margin: 0; font-size: 0.95rem; color: var(--text-dim); line-height: 1.55; }

/* Two facts per row (decided 3.9.2026) — airier than one crowded line. */
.activity-facts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.25rem;
    border-block: 1px solid rgb(255 255 255 / 0.1);
    padding-block: 1rem;
    margin: 0;
}
.activity-facts .fact { display: grid; gap: 0.25rem; }
.activity-facts dt { font-size: 0.8rem; color: var(--text-soft); }
.activity-facts dd { margin: 0; font-size: 1.125rem; font-weight: 800; color: var(--text); line-height: 1.35; }

.activity-actions { display: flex; flex-direction: column; gap: 0.5rem; }
/* Room for the floating scroll cue between the CTAs and "על הפעילות". */
.activity-actions:not(:last-child) { margin-block-end: 3.75rem; }

.activity-terms { border: 0; padding: 0; margin: 0; text-align: center; }
.activity-terms summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    color: var(--text-soft);
    font-size: 0.8rem;
    list-style: none;
}
.activity-terms summary::-webkit-details-marker { display: none; }
.activity-terms > div {
    text-align: start;
    font-size: 0.875rem;
    color: var(--text-dim);
    line-height: 1.7;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-block-start: 0.5rem;
}

/* ---- parents portal (משטח ב') ---- */
.portal-page { padding-block-end: 6.5rem; }
.portal-group {
    margin: 1.25rem 0 0.5rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--text-soft);   /* the canvas keeps section headers soft grey */
}

/* ParentsHub top strip: greeting on the start side, the logo opposite. */
.portal-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--glass);
    border-block-end: 1px solid var(--glass-border);
}
.portal-topbar-logo { font-size: 1.125rem; font-weight: 800; color: var(--text); }
/* "פעילויות" pill in the portal top bar (replaces the logo, Tal 10.9.2026) */
.portal-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--touch);
    padding: 0.5rem 0.875rem;
    border-radius: 999rem;
    border: 1px solid rgb(255 255 255 / 0.18);
    background: rgb(255 255 255 / 0.06);
    color: var(--link);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.portal-topbar-link:hover { border-color: var(--link); }

/* The real logo (7.9.2026) — the text-with-dot was a placeholder. */
.brand-img { display: block; height: 1.375rem; width: auto; }
.portal-topbar-logo .brand-img { height: 1.25rem; }
.footer-mark { height: 4.75rem; width: auto; }
.footer-wordmark { height: 1.625rem; width: auto; }
.footer-tagline { height: 0.8rem; width: auto; opacity: 0.85; }

.btn-slim { min-height: var(--touch); font-size: 0.875rem; }

/* ShareSheet — per the canvas artboard */
.sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgb(2 10 15 / 0.55);
    backdrop-filter: blur(0.125rem);   /* the artboard blurs the page behind */
    -webkit-backdrop-filter: blur(0.125rem);
}
.share-sheet {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 41;
    background: #0a2432;
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0.625rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-width: 28rem;
    margin-inline: auto;
}
.sheet-handle {
    width: 2.75rem;
    height: 0.3125rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.25);
    align-self: center;
}
.sheet-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.sheet-sub { font-size: 0.8rem; color: var(--text-soft); }
.sheet-actions {
    display: flex;
    justify-content: space-between;
    padding: 0.25rem 0.125rem;
}
.shr {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    width: 4.5rem;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.shrbtn {
    width: 3.375rem;
    height: 3.375rem;
    border-radius: 999rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.shr-wa    { background: #25D366; }
.shr-cal   { background: rgb(79 195 240 / 0.2); border: 1px solid rgb(79 195 240 / 0.4); }
.shr-plain { background: rgb(255 255 255 / 0.12); border: 1px solid rgb(255 255 255 / 0.18); }
.shrlbl { font-size: 0.7rem; font-weight: 700; color: var(--text-dim); text-align: center; }
.sheet-rows {
    border-block-start: 1px solid rgb(255 255 255 / 0.1);
    padding-block-start: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.sheet-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--touch);
    font-size: 0.875rem;
    color: var(--text);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 0;
    text-align: start;
}
.sheet-cancel {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.875rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.16);
    color: var(--text);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
}

.gallery-top {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.875rem 0.25rem;
}
.gallery-title { margin: 0; font-size: 1.125rem; font-weight: 800; }
.gallery-sub { font-size: 0.75rem; color: var(--text-soft); }
.photo-grid-lg img { height: 7.125rem; }

/* Gallery tiles: the photo always fills its square — scaled up and
   cropped (cover), never letterboxed and never stretched. The doubled
   specificity keeps later img rules from overriding it. */
.photo-grid .ph { height: auto; aspect-ratio: 1; }
.photo-grid .ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* ClassGallery selection (per the artboard) */
.gallery-page { padding-block-end: 6.5rem; }
.ph {
    position: relative;
    height: 7.125rem;
    border-radius: 0.75rem;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: var(--glass);
    cursor: pointer;
}
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ph-sel {
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    border: 0.1875rem solid transparent;
}
.ph.on .ph-sel { border-color: var(--accent); background: rgb(140 198 62 / 0.15); }
.ph-mark {
    position: absolute;
    inset-block-start: 0.25rem;
    inset-inline-end: 0.25rem;   /* RTL: top-left, per the artboard */
    width: 2rem;
    height: 2rem;
    border: 0;
    background: none;
    padding: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.ph-mark span {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999rem;
    border: 2px solid rgb(255 255 255 / 0.7);
    background: rgb(4 20 29 / 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-mark svg { display: none; }
.ph.on .ph-mark span { background: var(--accent); border-color: var(--accent); }
.ph.on .ph-mark svg { display: block; }

/* The canvas gallery header: a glass strip with a plain chevron. */
.gallery-head {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    background: var(--glass);
    border-block-end: 1px solid var(--glass-border);
}
.gallery-back { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--text-soft); }

/* Full-size viewer */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    background: rgb(2 10 15 / 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
/* max sizing (not stretch) so the rounded corners hug the photo itself. */
.lightbox img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius);
}
.lightbox-close {
    position: absolute;
    inset-block-start: calc(0.75rem + env(safe-area-inset-top));
    inset-inline-start: 0.75rem;
    z-index: 51;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid rgb(255 255 255 / 0.22);
    border-radius: 999rem;
    background: rgb(4 20 29 / 0.72);
    color: var(--text);
    cursor: pointer;
}
.lightbox-close:hover { background: rgb(4 20 29 / 0.9); }

.gallery-bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    padding-block-end: calc(0.75rem + env(safe-area-inset-bottom));
    background: rgb(8 36 51 / 0.9);   /* the artboard's bar */
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
}
.gallery-count { font-size: 0.85rem; font-weight: 700; color: var(--text); }
.gallery-act {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: var(--touch);
    padding-inline: 1rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.16);
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.gallery-act-main { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* section header with an action link at its far side */
.portal-group-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.group-toggle { background: none; border: 0; padding: 0; cursor: pointer; }

/* The note editor opens inside the same blue frame as the note strip
   (3.9.2026); the send icon sits bottom-left with equal air on both sides. */
.note-form {
    position: relative;
    background: rgb(27 154 214 / 0.12);
    border: 1px solid rgb(27 154 214 / 0.28);
    border-radius: 0.75rem;
}
.note-form textarea.input {
    background: none;
    border: 0;
    padding: 0.625rem 0.75rem 3.5rem;
}
.note-form textarea.input:focus { outline: none; border: 0; }
.note-send {
    position: absolute;
    inset-block-end: 0.625rem;
    inset-inline-end: 0.625rem;   /* RTL: bottom-left, matching the bottom gap */
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999rem;
    background: var(--accent);
    color: var(--accent-ink);
    border: 0;
    cursor: pointer;
}
.note-send svg { transform: scaleX(-1); }   /* the plane points with the RTL flow */
.portal-card {
    display: grid;
    gap: 0.375rem;
    padding: 1rem 1.25rem;
    margin-block-end: 0.75rem;
    text-decoration: none;
    color: var(--text-body);
}
.portal-card:hover { border-color: var(--glass-border-strong); color: var(--text-body); }
.portal-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    color: var(--text);
    font-size: 1.05rem;
}
.portal-card-line { font-size: 0.9rem; color: var(--text-soft); }
.portal-next { color: var(--text-body); font-weight: 600; }

.tag {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.625rem;
    border-radius: 999rem;
    font-size: 0.75rem;
    font-weight: 700;
    white-space: nowrap;
}
.tag-active  { background: rgb(140 198 62 / 0.18);  color: var(--accent-soft); }
.tag-trial   { background: rgb(79 195 240 / 0.16);  color: var(--link); }
.tag-waiting { background: rgb(240 173 78 / 0.16);  color: #f0c674; }
.tag-absent  { background: rgb(224 108 117 / 0.16); color: #e6919a; }
.tag-muted   { background: var(--glass);            color: var(--text-soft); }

.portal-tabs {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 30;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Still glass, but tinted dark underneath (Hen, 3.9.2026) — content
       shows through dimmed, no cast shadow. */
    background: rgb(4 20 29 / 0.65);
    backdrop-filter: blur(1rem);
    -webkit-backdrop-filter: blur(1rem);
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    padding-block: 0.375rem;
    padding-block-end: calc(0.375rem + env(safe-area-inset-bottom));
}
.portal-tabs a {
    display: grid;
    justify-items: center;
    gap: 0.125rem;
    min-height: var(--touch);
    padding-block: 0.25rem;
    color: var(--text-soft);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 700;
}
.portal-tabs a.on { color: var(--link); }   /* the canvas marks the active tab in light blue */

/* B1 login, per the ParentsLogin artboard */
.portal-login-title {
    margin: 1rem 0 0;
    font-size: 1.25rem;
    font-weight: 800;
    text-align: center;
}
.portal-login-sub {
    margin: 0.25rem 0 1.25rem;
    font-size: 0.875rem;
    color: var(--text-soft);
    text-align: center;
}
.portal-login-sent { margin: 0 0 0.75rem; text-align: center; color: var(--text); font-size: 0.9rem; }
.portal-login-coach {
    margin-block-start: 1.5rem;
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 400;
}
.portal-login-coach a { color: var(--link); text-decoration: none; }
.portal-login-coach a:hover { text-decoration: underline; }
.portal-login-foot {
    margin-block-start: 2.5rem;
    font-size: 0.75rem;
    color: var(--text-soft);
    text-align: center;
}
.otp-row { display: flex; gap: 0.5rem; justify-content: center; }
.otp-box {
    width: 2.75rem;
    height: 3.25rem;
    text-align: center;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    background: var(--glass);
    border: 1px solid rgb(255 255 255 / 0.2);
    border-radius: 0.75rem;
}
.otp-box:focus { outline: 2px solid var(--accent); outline-offset: 0.0625rem; border-color: transparent; }

/* B2 greeting, per the ParentsHub artboard */
.portal-hello { margin-block-end: 0.75rem; }
.portal-hello-name { font-size: 1.125rem; font-weight: 800; color: var(--text); }
.portal-hello-sub { font-size: 0.8rem; color: var(--text-soft); }
.portal-card-chev { color: var(--text-soft); flex-shrink: 0; display: block; }
.portal-card-title {
    flex-grow: 1;
    color: var(--text);
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
}
.portal-card-next {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--glass);
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text);
}
.portal-card-next svg { flex-shrink: 0; }
.portal-card-next-text { flex-grow: 1; }
/* Text-action link — also used on <button>, which otherwise renders with
   the browser's black text / white chrome. */
.portal-strip-link {
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}
.portal-card-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgb(27 154 214 / 0.12);
    border: 1px solid rgb(27 154 214 / 0.28);
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.85rem;
    color: var(--text);
}
.portal-card-note svg { flex-shrink: 0; }
.note-kicker { color: var(--link); font-weight: 700; }
.portal-add-note {
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    justify-self: start;
    align-self: flex-start;
    color: var(--link);
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.icon-circle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.16);
    color: var(--text);
    cursor: pointer;
    text-decoration: none;
    padding: 0;
}
.icon-circle-dark {
    width: 2.5rem;
    height: 2.5rem;
    background: rgb(4 20 29 / 0.5);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    border: 0;
}
.share-btn.shared { outline: 2px solid var(--accent); }

/* "What's new" event card (ParentsHub artboard) */
.whats-new {
    position: relative;
    height: 8.75rem;
    border-radius: var(--radius);
    overflow: hidden;
}
.whats-new img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.whats-new-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(4 20 29 / 0.9) 10%, rgb(4 20 29 / 0.25) 60%, transparent 80%);
}
.whats-new-badge {
    position: absolute;
    inset-block-start: 0.625rem;
    inset-inline-start: 0.75rem;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0.25rem 0.625rem;
    border-radius: 999rem;
    background: var(--accent);
    color: var(--accent-ink);
}
.whats-new-body {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.75rem 0.875rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}
.whats-new-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.whats-new-sub { font-size: 0.75rem; color: var(--text-dim); }
.whats-new-cta {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 800;
    color: var(--accent-ink);
    background: rgb(255 255 255 / 0.9);
    border-radius: 999rem;
    padding: 0.375rem 0.75rem;
    text-decoration: none;
    white-space: nowrap;
}

/* B3 course screen (ParentsCourse artboard) */
.course-hero {
    position: relative;
    height: 13rem;
    background: radial-gradient(ellipse at 65% 25%, #1B9AD6 0%, #0d4763 40%, #062736 70%, #04141d 100%);
}
.course-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.course-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(6 28 38 / 0.95) 5%, rgb(6 28 38 / 0.35) 55%, rgb(6 28 38 / 0.5) 100%);
}
.course-hero-top {
    position: absolute;
    inset-block-start: 0.75rem;
    inset-inline: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.course-hero-body {
    position: absolute;
    inset-block-end: 0.75rem;
    inset-inline: 1rem;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.5rem;
}
.course-hero-title { font-size: 1.25rem; font-weight: 800; color: var(--text); }
.course-hero-sub { font-size: 0.8rem; color: var(--text-dim); }

.portal-rows { overflow: hidden; }
.portal-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
}
.portal-row + .portal-row { border-block-start: 1px solid rgb(255 255 255 / 0.08); }
.portal-row-col { flex-direction: column; align-items: stretch; gap: 0.375rem; }
.portal-row-head { display: flex; align-items: center; gap: 0.5rem; }
.portal-row-title { display: block; font-size: 0.875rem; font-weight: 800; color: var(--text); }
.portal-row-sub { display: block; font-size: 0.8rem; color: var(--text-soft); }
.portal-row-note { font-size: 0.8rem; color: var(--text-dim); line-height: 1.5; }

/* ---- Family tab (B6–B7, per the Family + MemberEdit artboards) ---- */
.fam-row { color: inherit; text-decoration: none; }
.fam-row-btn { width: 100%; border: 0; background: none; font: inherit; text-align: start; cursor: pointer; }
a.fam-row:hover .portal-row-title { color: var(--link); }
.fam-row-body { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.fam-av {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.625rem;
    height: 2.625rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.18);
    font-size: 1rem;
    font-weight: 800;
    color: var(--text);
}
.fam-av-primary   { background: rgb(140 198 62 / 0.2);  border-color: rgb(140 198 62 / 0.4);  color: var(--accent-soft); }
.fam-av-secondary { background: rgb(79 195 240 / 0.15); border-color: rgb(79 195 240 / 0.35); color: var(--link); }
.fam-tag {
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.125rem 0.5rem;
    border-radius: 999rem;
}
.fam-tag-primary   { background: rgb(140 198 62 / 0.2);  color: var(--accent-soft); }
.fam-tag-secondary { background: rgb(79 195 240 / 0.15); color: var(--link); }
.fam-note {
    display: flex;
    gap: 0.375rem;
    align-items: flex-start;
    margin-block: 0.625rem 0;
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.fam-note svg { flex-shrink: 0; margin-block-start: 0.125rem; }
.fam-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 3rem;
    margin-block-start: 0.75rem;
    border: 0.09375rem dashed rgb(255 255 255 / 0.3);
    border-radius: 1rem;
    color: var(--text);
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
}
.fam-add:hover { border-color: var(--accent); color: var(--text); }
.switch-form { flex-shrink: 0; display: flex; }
.switch {
    width: 2.75rem;
    height: 1.625rem;
    padding: 0.1875rem;
    border: 0;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.18);
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.15s ease;
}
.switch-knob {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 999rem;
    background: var(--bg-deep);
    transition: transform 0.15s ease;
}
.switch.on { background: var(--accent); }
.switch.on .switch-knob { transform: translateX(-1.125rem); }   /* RTL: knob travels left */
.member-head { align-items: center; gap: 0.625rem; justify-content: flex-start; }
.member-back {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    margin-inline-start: -0.75rem;
    color: var(--text-soft);
}
.member-back:hover { color: var(--text); }
.input-locked { justify-content: space-between; color: var(--text-soft); background: rgb(255 255 255 / 0.04); }
.fam-info-card {
    display: flex;
    gap: 0.625rem;
    align-items: flex-start;
    margin-block-end: 0.75rem;
    padding: 0.75rem 0.875rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 0.875rem;
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.fam-info-card svg { flex-shrink: 0; margin-block-start: 0.125rem; }
.fam-info-card strong { color: var(--text); }
.fam-foot {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 2.5rem;
}
.btn-danger-outline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 2.875rem;
    padding-inline: 1rem;
    border: 1px solid rgb(231 76 60 / 0.4);
    border-radius: 999rem;
    background: transparent;
    color: #ff9d92;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none;
    cursor: pointer;
}
.btn-danger-outline:hover { border-color: rgb(231 76 60 / 0.7); color: #ffb3aa; }
.btn-danger-slim { min-height: 2.25rem; font-size: 0.8rem; }
.fam-confirm {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 0.875rem 1rem;
    border: 1px solid rgb(231 76 60 / 0.4);
    border-radius: 1rem;
    font-size: 0.875rem;
    color: var(--text);
    text-align: center;
}
.fam-confirm-actions { display: flex; align-items: center; justify-content: center; gap: 1rem; }
.fam-microcopy { margin: 0; font-size: 0.7rem; color: var(--text-soft); text-align: center; }

/* ---- PWA install nudge (7.9.2026) ---- */
.pwa-strip {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    width: min(45rem, 100% - 2.75rem);
    margin: 0 auto 5.5rem;   /* clears the fixed bottom tabs */
    padding: 0.625rem 0.75rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
}
.pwa-strip img { border-radius: 0.5rem; flex-shrink: 0; }
.pwa-strip-text { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.125rem; }
.pwa-dismiss {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border: 0;
    border-radius: 999rem;
    background: transparent;
    color: var(--text-soft);
    font-size: 0.875rem;
    cursor: pointer;
}
.pwa-dismiss:hover { color: var(--text); }

/* ---- Instructors app (C1–C4, per the Instructor* artboards) ---- */
.ins-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    margin-block-end: 0.75rem;
    cursor: pointer;
}
.ins-card:hover { border-color: var(--glass-border-strong); }
.ins-card-head { display: flex; align-items: center; gap: 0.5rem; }
.ins-time { flex-grow: 1; font-size: 1.375rem; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.ins-card-title { font-size: 1rem; font-weight: 700; color: var(--text); }
.ins-line { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-soft); }
.ins-line svg { flex-shrink: 0; }
.ins-line-grow { flex-grow: 1; min-width: 0; }
.ins-strip {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
}
.ins-strip-title { font-size: 0.75rem; font-weight: 800; color: var(--accent-soft); }
/* One shop item riding to the session: icon, item, trainee at the end. */
.ins-dlv-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-body);
}
.ins-dlv-line svg { flex-shrink: 0; }
.ins-dlv-name { color: var(--text-soft); flex-shrink: 0; }
.ins-daycol { flex-shrink: 0; width: 3.25rem; font-size: 0.9375rem; font-weight: 800; color: var(--text); }
.ins-acc summary { list-style: none; cursor: pointer; }
.ins-acc summary::-webkit-details-marker { display: none; }
.ins-acc[open] .ins-acc-chev { transform: rotate(180deg); }
.ins-acc-chev { transition: transform 0.15s ease; }
.ins-acc-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0 1rem 0.75rem calc(1rem);
    padding-inline-start: calc(1rem + 3.25rem + 0.625rem);
}
.ins-acc + .ins-acc { border-block-start: 1px solid rgb(255 255 255 / 0.08); }
.ins-hist-link { color: inherit; text-decoration: none; width: 100%; }
.ins-hist-link:hover .portal-row-title { color: var(--link); }

.seg {
    display: flex;
    background: rgb(255 255 255 / 0.08);
    border: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 999rem;
    padding: 0.25rem;
    margin-block-end: 0.875rem;
}
.seg-btn {
    flex-grow: 1;
    flex-basis: 0;
    min-height: 2.5rem;
    border: 0;
    border-radius: 999rem;
    background: transparent;
    color: var(--text-soft);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}
.seg-btn.on { background: var(--accent); color: var(--accent-ink); font-weight: 800; }

.ins-att-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; margin-block-end: 0.625rem; }
.ins-att-count { font-size: 0.875rem; font-weight: 800; color: var(--text-soft); font-variant-numeric: tabular-nums; }
.ins-att-row {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 1rem;
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-block-end: 0.625rem;
}
.ins-att-top { display: flex; align-items: center; gap: 0.5rem; }
.ins-att-name { flex-grow: 1; min-width: 0; font-size: 1rem; font-weight: 800; color: var(--text); }
.ins-markbtns { display: flex; gap: 0.375rem; flex-shrink: 0; }
.st {
    width: 3.5rem;
    min-height: 2.875rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    background: var(--glass);
    color: var(--text-soft);
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}
.st:hover { border-color: var(--accent); color: var(--text); }
.att-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.375rem 0.75rem;
    border: 0;
    border-radius: 999rem;
    font-size: 0.75rem;
    font-weight: 800;
    cursor: pointer;
}
.chip-present { background: rgb(140 198 62 / 0.25);  color: #c9f08a; }
.chip-late    { background: rgb(217 165 33 / 0.25);  color: #f0d488; }
.chip-absent  { background: rgb(224 108 117 / 0.2);  color: #e6919a; }
.ins-actions { display: flex; gap: 0.375rem; border-block-start: 1px solid rgb(255 255 255 / 0.08); padding-block-start: 0.625rem; }
.act {
    flex-grow: 1;
    flex-basis: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    border: 0;
    background: transparent;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    padding: 0;
}
.actbtn {
    width: 2.875rem;
    height: 2.875rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.16);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
}
.actlbl { font-size: 0.65rem; font-weight: 700; color: var(--text-soft); }
.ins-actions form { display: contents; }   /* the deliver action sits flush with its siblings */
.actbtn-ok { background: rgb(140 198 62 / 0.25); border-color: rgb(140 198 62 / 0.5); color: #c9f08a; }
.actlbl-ok { color: #c9f08a; }
.ins-family-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    background: rgb(27 154 214 / 0.14);
    border: 1px solid rgb(27 154 214 / 0.3);
    border-radius: 0.75rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8rem;
    color: var(--text);
    line-height: 1.5;
}
.ins-family-note svg { flex-shrink: 0; margin-block-start: 0.125rem; }
.ins-family-note strong { color: var(--link); }

.ins-sheet {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: 41;
    background: #0a2432;
    border-block-start: 1px solid rgb(255 255 255 / 0.14);
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 0.625rem 1rem calc(1.5rem + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    max-width: 28rem;
    margin-inline: auto;
}
.ins-sheet-head { display: flex; align-items: center; gap: 0.625rem; }
.ins-sheet-title { font-size: 1rem; font-weight: 800; color: var(--text); }
.ins-sheet-actions { display: flex; gap: 0.5rem; margin-block-start: 0.75rem; }
.ins-qchips { display: flex; gap: 0.5rem; overflow-x: auto; }
.qchip {
    flex-shrink: 0;
    padding: 0.5rem 0.875rem;
    border-radius: 999rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-dim);
    white-space: nowrap;
    cursor: pointer;
}
.qchip:hover { border-color: var(--accent); color: var(--text); }
.btn-ghost {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    padding-inline: 1.25rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.16);
    color: var(--text);
    font-weight: 700;
    font-size: 0.875rem;
    cursor: pointer;
}
.ins-info-card {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 0.875rem;
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}
.irow { display: flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; color: var(--text); }
.ilbl { flex-shrink: 0; width: 5.25rem; font-size: 0.75rem; color: var(--text-soft); }
.call-circle {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.1);
    border: 1px solid rgb(255 255 255 / 0.16);
    color: var(--text);
}
.call-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.ins-health {
    background: rgb(231 76 60 / 0.14);
    border: 1px solid rgb(231 76 60 / 0.35);
    border-radius: 0.875rem;
    padding: 0.75rem 0.875rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: var(--text);
    line-height: 1.5;
}
.ins-health-head { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 800; color: #ff9d92; }
.ins-photos { margin-block-start: 0; }
.ins-delivery {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0.5rem 0.75rem;
    background: rgb(140 198 62 / 0.1);
    border: 1px solid rgb(140 198 62 / 0.25);
    border-radius: 0.75rem;
    font-size: 0.85rem;
    color: var(--text);
}
.ins-delivery svg { flex-shrink: 0; }

/* ---- Shop (B11–B13, 7.9.2026) ---- */
.shop-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}
/* One tile = one photo with the caption on the scrim — the home-page
   activity-card language (.card-scrim / .card-caption / .price-tag). */
.shop-tile {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--glass);
    border: 1px solid var(--glass-border);
    text-decoration: none;
}
.shop-tile img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.shop-tile .card-caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: 0.625rem 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 0.5rem;
}
.shop-item-media {
    display: block;
    width: 100%;
    padding: 0;
    border: 1px solid var(--glass-border, rgb(255 255 255 / 0.12));
    border-radius: var(--radius);
    overflow: hidden;
    background: rgb(255 255 255 / 0.04);
    cursor: zoom-in;
}
/* The product photo is shown whole (Hen, 22.9.2026) — no crop; tap opens the lightbox. */
.shop-item-media img { width: 100%; height: auto; max-height: 22rem; object-fit: contain; display: block; }
.size-row { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.size-chip input { position: absolute; opacity: 0; pointer-events: none; }
.size-chip span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    min-height: 2.75rem;
    padding-inline: 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    background: var(--glass);
    color: var(--text-soft);
    font-weight: 700;
    cursor: pointer;
}
.size-chip input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.size-chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 0.125rem; }
/* A select in our design language — no default chrome. The wrapper draws
   the chevron so the arrow matches on every browser. */
.select-wrap { position: relative; display: block; }
.select-wrap::after {
    content: '';
    position: absolute;
    inset-block-start: 50%;
    inset-inline-end: 0.875rem;
    width: 0.55rem;
    height: 0.55rem;
    border-inline-start: 2px solid var(--text-soft);
    border-block-end: 2px solid var(--text-soft);
    transform: translateY(-70%) rotate(-45deg);
    pointer-events: none;
}
select.select {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    padding-inline-end: 2.25rem;
    cursor: pointer;
    color: var(--text);
}
select.select:invalid { color: var(--text-soft); }   /* the placeholder option */
select.select option { background: #0a2432; color: var(--text); }
.ins-photo-add {
    aspect-ratio: 1;
    border-radius: 0.75rem;
    border: 0.09375rem dashed rgb(255 255 255 / 0.3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-soft);
}

.avatar-circle {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 999rem;
    background: rgb(140 198 62 / 0.2);
    border: 1px solid rgb(140 198 62 / 0.4);
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent-soft);
}
.photo-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}
.photo-grid img {
    width: 100%;
    height: 5.125rem;
    object-fit: cover;
    border-radius: 0.75rem;
}

/* ---- misc ---- */
.notice {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--text-soft);
}
.notice-info {
    background: rgb(27 154 214 / 0.15);
    border-color: rgb(27 154 214 / 0.3);
    color: var(--text-body);
}

.view-all { margin-block: 1.25rem 0.5rem; }

/* ---- footer (refined 3.9.2026): flush against the page content (no
   spacer strip). Phone: no brand — just the links in two aligned
   columns; from 40rem the brand joins beside a single-column nav. ---- */
.site-footer {
    border-block-start: 1px solid rgb(255 255 255 / 0.08);
    background: linear-gradient(to bottom, rgb(255 255 255 / 0.03), transparent);
    color: var(--text-soft);
    font-size: 0.85rem;
}
/* Phone (3.9.2026): no brand — just the links, two content-width columns
   centered on the page with the text kept right-aligned. Wide: back to
   the stacked look — logo + tagline centered above the links row. */
.footer-inner {
    display: grid;
    justify-items: center;
    gap: 1rem;
    padding-block: 1.5rem 0.75rem;
}
.footer-brand { display: none; }
.footer-logo { font-size: 1.35rem; font-weight: 800; color: var(--text); }
.footer-tag { margin: 0; font-size: 0.8rem; color: var(--accent-soft); font-weight: 700; }
.footer-nav {
    display: grid;
    grid-template-columns: auto auto;
    column-gap: 3rem;
    justify-items: start;
    text-align: start;
}
@media (min-width: 40rem) {
    .footer-brand { display: grid; gap: 0.125rem; justify-items: center; text-align: center; }
    .footer-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        column-gap: 1.75rem;
    }
}
.footer-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    color: var(--text-soft);
    text-decoration: none;
    font-weight: 600;
}
.footer-nav a:hover { color: var(--text); }
.footer-copy {
    margin: 0;
    padding-block: 1rem 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: rgb(159 179 189 / 0.7);
}

/* Pages without hero imagery need room under the floating header. */
.page-offset { padding-block-start: 4.25rem; }

/* ---- static document pages (accessibility / terms / privacy) ---- */
.doc-page { padding-block-end: 2rem; }
.doc-title {
    margin: 0;
    font-size: clamp(1.5rem, 6vw, 2rem);
    font-weight: 800;
}
.doc-updated {
    margin-block: 0.25rem 1rem;
    font-size: 0.85rem;
    color: var(--text-soft);
}
.doc-body {
    padding: clamp(1rem, 4vw, 1.75rem);
    font-size: 0.95rem;
}
.doc-body h2 {
    margin-block: 1.25rem 0.375rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--accent-soft);
}
.doc-body h2:first-child { margin-block-start: 0; }
.doc-body p { margin-block: 0.375rem; }
.doc-body ul {
    margin-block: 0.375rem;
    padding-inline-start: 1.25rem;
}
.doc-body li { margin-block-end: 0.375rem; }

/* ---- registration wizard ---- */
.wizard { padding-block-end: 2rem; }

.wizard-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.875rem 0.5rem;
}
.wizard-title { font-size: 0.95rem; color: var(--text-body); }
.wizard-title strong { color: var(--text); font-weight: 800; }

.progress { display: flex; gap: 0.375rem; margin-block-end: 1rem; }
.progress span {
    flex-grow: 1;
    height: 0.3125rem;
    border-radius: 999rem;
    background: rgb(255 255 255 / 0.12);
}
.progress span.on { background: var(--accent); }

.step-title {
    margin: 0 0 0.75rem;
    font-size: 1.375rem;
    font-weight: 800;
}
.section-title {
    margin: 1rem 0 0.25rem;
    font-size: 1rem;
    font-weight: 800;
    color: var(--link);
}

.trial-badge {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.375rem 0.75rem;
    border-radius: 999rem;
    background: rgb(27 154 214 / 0.15);
    color: var(--link);
    font-size: 0.8rem;
    font-weight: 700;
}

/* forms */
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.625rem;
}
.field { display: flex; flex-direction: column; gap: 0.25rem; margin-block-end: 0.75rem; }
.form-grid .field { margin-block-end: 0; }
.form-grid { margin-block-end: 0.75rem; }
.label { font-size: 0.8rem; font-weight: 600; color: var(--text-soft); }
.label .opt { font-weight: 400; opacity: 0.7; }

.input {
    width: 100%;
    min-height: var(--touch);
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    background: var(--glass);
    color: var(--text);
    font: inherit;
    font-size: 0.95rem;
    color-scheme: dark;
}
.input:focus { outline: 2px solid var(--accent); outline-offset: 0.0625rem; border-color: transparent; }
.textarea { min-height: 5.5rem; resize: vertical; }
.input::placeholder { color: var(--text-soft); }

/* Compact lead form on closed/full registration gates */
.lead-inline {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 0.75rem;
}
@media (min-width: 34rem) {
    .lead-inline { flex-direction: row; }
    .lead-inline .input { flex: 1 1 auto; }
    .lead-inline .btn-block { width: auto; flex-shrink: 0; padding-inline: 1.25rem; }
}

.hint { font-size: 0.8rem; color: var(--text-soft); }
.hint-accent { color: var(--accent-soft); font-weight: 600; }
.hint-box {
    background: rgb(27 154 214 / 0.15);
    border-radius: 0.75rem;
    padding: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-body);
    line-height: 1.5;
}
.error-text { font-size: 0.8rem; color: #ff9d92; }
.error-notice {
    background: rgb(231 76 60 / 0.15);
    border-color: rgb(231 76 60 / 0.4);
    color: var(--text);
    margin-block-end: 1rem;
}

/* option cards (product / slot pickers) */
.option-list { display: flex; flex-direction: column; gap: 0.625rem; margin-block-end: 0.75rem; }
.option-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border: 1px solid rgb(255 255 255 / 0.2);
    background: var(--glass);
    cursor: pointer;
}
.option-card input {
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    border-radius: 999rem;
    border: 0.125rem solid rgb(255 255 255 / 0.35);
    margin: 0;
}
.option-card input:checked { border-width: 0.375rem; border-color: var(--accent); }
/* camp-day picker (10.9.2026): a square tick instead of the radio dot */
.option-card input[type="checkbox"] { border-radius: 0.3rem; }
.option-card input[type="checkbox"]:checked {
    border-width: 0.125rem;
    background: var(--accent) center / 0.8rem no-repeat
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304141d' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 13l4 4 10-10'/></svg>");
}
.option-card:has(input:checked) {
    border: 0.125rem solid var(--accent);
    background: rgb(140 198 62 / 0.12);
}
.option-body { flex-grow: 1; display: flex; flex-direction: column; gap: 0.125rem; }
.option-name { font-weight: 700; color: var(--text); }
.option-meta { font-size: 0.8rem; color: var(--text-soft); }
.option-price { font-weight: 800; color: var(--text); white-space: nowrap; }

/* declaration */
.question { display: flex; flex-direction: column; gap: 0.5rem; margin-block-end: 1rem; }
.q-text { font-size: 0.95rem; font-weight: 700; color: var(--text); }
.pill-group { display: flex; gap: 0.5rem; }
.pill {
    flex-grow: 1;
    display: flex;
    cursor: pointer;
}
.pill input { position: absolute; opacity: 0; }
.pill span {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--touch);
    border-radius: 999rem;
    border: 1px solid rgb(255 255 255 / 0.2);
    color: var(--text-soft);
    font-weight: 700;
}
.pill:has(input:checked) span {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}
.pill:has(input:focus-visible) span { outline: 2px solid var(--link); }

.terms-box {
    background: var(--glass);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 0.875rem;
    margin-block-end: 0.5rem;
}
.terms-title { font-size: 0.85rem; font-weight: 800; color: var(--text); margin-block-end: 0.375rem; }
.terms-body {
    max-height: 8.5rem;
    overflow-y: auto;
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.5;
}
.check-row {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    min-height: var(--touch);
    cursor: pointer;
    color: var(--text);
    font-weight: 600;
    font-size: 0.95rem;
}
.check-row input {
    appearance: none;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    border-radius: 0.375rem;
    border: 0.125rem solid rgb(255 255 255 / 0.35);
    margin: 0;
    display: grid;
    place-content: center;
}
.check-row input:checked { background: var(--accent); border-color: var(--accent); }
.check-row input:checked::before {
    content: "";
    width: 0.75rem;
    height: 0.4rem;
    border-inline-start: 0.1875rem solid var(--accent-ink);
    border-block-end: 0.1875rem solid var(--accent-ink);
    transform: translateY(-15%) rotate(-45deg);
}

/* summary */
.sum-card { padding: 0.875rem 1rem; margin-block-end: 0.75rem; }
.sum-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    padding-block: 0.375rem;
    font-size: 0.95rem;
    color: var(--text-body);
}
.sum-row strong { color: var(--text); font-weight: 700; text-align: end; }
.sum-row.total-row {
    border-block-start: 1px solid rgb(255 255 255 / 0.12);
    margin-block-start: 0.25rem;
    padding-block-start: 0.625rem;
    font-size: 1.05rem;
}
.sum-row.total-row strong { font-weight: 800; }
.hint-row .hint { text-align: end; }
/* Discount amounts (22.9.2026): LTR so the minus sits before the number under RTL, and green. */
.sum-row .sum-discount { color: var(--green-soft, #a5e04f); unicode-bidi: isolate; }

.wizard-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-block-start: 1rem;
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* A submitting button locks and spins until the next page arrives. */
.btn-loading { pointer-events: none; }
.btn-loading::after {
    content: '';
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-inline-start: 0.5em;
    vertical-align: -0.125em;
    border: 0.125em solid currentColor;
    border-inline-start-color: transparent;
    border-radius: 999rem;
    animation: btn-spin 0.7s linear infinite;
}
@keyframes btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .btn-loading::after { animation: none; opacity: 0.5; }
}

/* Staging banner (15.9.2026): red strip on the test environment only. */
.env-banner {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
    padding: 0.2rem 0.75rem;
    background: #c0392b;
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
    letter-spacing: 0.02em;
    box-shadow: 0 0.125rem 0.5rem rgb(0 0 0 / 0.35);
    pointer-events: none;
}