/* BolBol School — design system ("Golestan × Bento": brand cream/gold/charcoal,
   Fraunces display serif, Karla body, arch-shaped cards, bento fact tiles). */

:root {
    --cream: #f0ece1;
    --cream-deep: #eae4d3;
    --paper: #fbf8f0;
    --ink: #3a3733;
    --ink-soft: #5c564c;
    --ink-faint: #8a8171;
    --gold: #e9ab20;
    --gold-deep: #b0801c;
    --line: #ddd5c2;

    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Karla', system-ui, sans-serif;
    --font-fa: 'Vazirmatn', system-ui, sans-serif;
    --font-fa-display: 'Noto Nastaliq Urdu', serif;

    --radius: 18px;
    --radius-arch: 18px 18px 120px 120px;
    --container: 1080px;
}

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

/* The hidden attribute must win over any display set by a class (e.g. .btn). */
[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.1;
    text-wrap: balance;
    margin: 0 0 0.5em;
}

[lang="fa"] { font-family: var(--font-fa); }

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }

/* ---------- Buttons ---------- */

.btn {
    display: inline-block;
    padding: 13px 26px;
    border: none;
    border-radius: 999px;
    background: var(--ink);
    color: var(--cream);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.btn:hover { transform: translateY(-1px); }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-support { background: var(--gold); color: var(--ink); padding: 10px 20px; }
.btn-small { padding: 9px 18px; font-size: 14px; }
.btn-plain { background: transparent; color: var(--ink); border: 1px solid var(--line); }

/* ---------- Header & navigation ---------- */

.site-header {
    background: var(--cream);
    border-bottom: 1px solid var(--line);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 24px;
    padding-top: 16px;
    padding-bottom: 16px;
}

.site-logo img { height: 52px; }

.site-nav {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-left: auto;
    flex-wrap: wrap;
}

.site-nav > a:not(.btn) {
    color: var(--ink-soft);
    font-size: 14.5px;
    font-weight: 500;
    text-decoration: none;
    padding: 4px 0;
    border-bottom: 2px solid transparent;
}

.site-nav > a:not(.btn):hover { color: var(--ink); }
.site-nav > a.is-active { color: var(--ink); border-bottom-color: var(--gold); }

.lang-switch {
    display: flex;
    gap: 2px;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px;
    font-size: 12px;
    font-weight: 700;
}

.lang-switch span, .lang-switch a { padding: 3px 9px; border-radius: 999px; color: var(--ink-faint); text-decoration: none; }
.lang-switch a:hover { color: var(--ink); background: var(--cream-deep); }
.lang-switch .is-current { background: var(--ink); color: var(--cream); }

/* Back-to-top button, shown by site.js once the visitor has scrolled down. */
.to-top {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 50;
    width: 44px;
    height: 44px;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(30, 28, 24, 0.18);
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--gold); border-color: var(--gold); }

.nav-toggle {
    display: none;
    margin-left: auto;
    background: none;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
}

.nav-toggle-bar {
    display: block;
    width: 20px; height: 2px;
    background: var(--ink);
    margin: 4px 0;
}

/* Between the phone menu and a wide desktop the header is tight, especially
   in German and French: closer links and a smaller support button keep
   everything on one row instead of wrapping the button under the links. */
@media (min-width: 1001px) and (max-width: 1120px) {
    .header-inner { gap: 16px; }
    .site-nav { gap: 14px; }
    .site-nav > a:not(.btn) { font-size: 14px; }
    .btn-support { padding: 9px 15px; font-size: 14px; }
    .lang-switch span, .lang-switch a { padding: 3px 7px; }
}

@media (max-width: 1000px) {
    /* Below this the links no longer fit on one row in German or French, so
       the menu folds behind the toggle. Logo and toggle share the first row;
       the opened menu wraps onto its own full-width row underneath instead
       of squeezing next to the logo. */
    .header-inner { flex-wrap: wrap; row-gap: 0; }
    .nav-toggle { display: block; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 0 8px;
    }
    .site-nav.is-open { display: flex; }
}

/* ---------- Hero ---------- */

.hero {
    text-align: center;
    padding: 56px 24px 48px;
    overflow: hidden;
}

/* Scales down with the viewport on phones, never wider than its design size. */
.hero-ornament { width: 100%; max-width: 620px; margin: 0 auto 8px; }

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.hero h1 { font-size: clamp(42px, 7vw, 78px); margin: 12px 0 4px; }

.hero-fa {
    font-family: var(--font-fa-display);
    font-size: clamp(20px, 3vw, 30px);
    color: var(--gold-deep);
    margin: 0 0 16px;
}

.hero-lede {
    max-width: 560px;
    margin: 0 auto;
    font-size: 18px;
    color: var(--ink-soft);
}

.hero-ctas {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 28px;
}

/* ---------- Bento fact tiles ---------- */

.bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding: 8px 0 48px;
}

.tile {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
}

.tile-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 8px;
}

.tile-value { font-family: var(--font-display); font-size: 21px; font-weight: 600; }
.tile p { margin: 6px 0 0; font-size: 14.5px; color: var(--ink-soft); }
.tile-dark { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.tile-dark .tile-label { color: var(--gold); }
.tile-dark p { color: #cfc8b8; }

@media (max-width: 800px) { .bento { grid-template-columns: 1fr; } }

/* ---------- Sections ---------- */

.section { padding: 48px 0; }
.section-alt { background: var(--cream-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-title { font-size: clamp(28px, 4vw, 38px); text-align: center; margin-bottom: 32px; }

/* Quiet centred link to the fees page, under a section title or an intro paragraph. */
.section-link { text-align: center; margin: 14px 0 28px; font-size: 14.5px; font-weight: 700; }
.section-title + .section-link { margin-top: -18px; }
.section-link a { color: var(--gold-deep); text-decoration: none; }
.section-link a:hover { text-decoration: underline; }

/* Imprint and privacy links at the end of the contact page. */
.legal-links { margin-top: 28px; font-size: 14.5px; }
.legal-links a { color: var(--gold-deep); }

/* ---------- Programme cards (arch-shaped, from the Golestan direction) ---------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 20px;
}

.arch-card {
    display: block;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-arch);
    padding: 26px 22px 40px;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease;
}

.arch-card:hover { transform: translateY(-3px); }

.arch-card .fa-name {
    font-family: var(--font-fa-display);
    font-size: 19px;
    color: var(--gold-deep);
}

.arch-card h3 { font-size: 22px; margin: 2px 0 4px; }
.arch-card .ages { font-size: 13px; font-weight: 700; color: var(--ink-faint); }
.arch-card p { font-size: 14.5px; color: var(--ink-soft); margin: 10px 0 0; }

/* ---------- Link cards (below a card grid, pointing at another page) ----------
   Unlike the arch cards above them on purpose: a wide, deeper-cream bar with
   a gold edge and an arrow. As centred gold text links they read as headings
   and were overlooked (feedback 2026-09-11). */

.link-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 18px;
    margin-top: 32px;
}

.link-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 16px;
    background: var(--cream-deep);
    border: 1px solid var(--line);
    border-left: 4px solid var(--gold);
    border-radius: var(--radius);
    padding: 18px 22px;
    text-decoration: none;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.link-card:hover { border-color: var(--gold-deep); transform: translateY(-2px); }
.link-card:hover .link-card-arrow { transform: translateX(4px); }

.link-card-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.link-card-text { display: block; font-size: 15px; color: var(--ink-soft); margin-top: 3px; }

.link-card-arrow {
    font-size: 22px;
    color: var(--gold-deep);
    transition: transform 0.15s ease;
}

/* ---------- Donation amount buttons (booking form) ---------- */

.donation-amounts { display: flex; flex-wrap: wrap; gap: 8px; }

/* The buttons sit beside the amount field, which is only a few characters
   wide, and wrap under it when the form gets narrow. The label is long, so it
   keeps a line of its own above both. */
.donation-field .field { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.donation-field .field > label { flex-basis: 100%; margin-bottom: 0; }
.donation-field .field > .error { flex-basis: 100%; }

.donation-amount {
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    padding: 9px 20px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink-soft);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.donation-amount:hover { border-color: var(--gold-deep); color: var(--ink); }

/* The amount currently in the field, so the choice stays visible. */
.donation-amount[aria-pressed="true"] {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--ink);
}

/* ---------- Gallery ---------- */

.gallery-columns { columns: 4 240px; column-gap: 16px; }

.gallery-columns a { display: block; margin-bottom: 16px; break-inside: avoid; }

/* Phones: two narrow columns rather than one endless full-width strip. */
@media (max-width: 600px) {
    .gallery-columns { columns: 2; column-gap: 10px; }
    .gallery-columns a { margin-bottom: 10px; }
}

.gallery-columns img {
    width: 100%;
    height: auto;
    border-radius: 14px;
    border: 1px solid var(--line);
    transition: transform 0.15s ease;
}

.gallery-columns a:hover img { transform: scale(1.015); }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(30, 28, 24, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Swipes flip images (site.js); no scrolling, pinch-zoom or text selection meanwhile. */
    touch-action: none;
    user-select: none;
}

.lightbox[hidden] { display: none; }

.lightbox-image {
    max-width: min(92vw, 1200px);
    max-height: 86vh;
    border-radius: 10px;
}

.lightbox button {
    position: absolute;
    background: none;
    border: none;
    color: var(--cream);
    font-family: var(--font-body);
    cursor: pointer;
    padding: 12px 18px;
    font-size: 40px;
    line-height: 1;
    opacity: 0.8;
}

.lightbox button:hover { opacity: 1; }
.lightbox-close { top: 12px; right: 16px; font-size: 34px; }
.lightbox-prev { left: 8px; top: 50%; transform: translateY(-50%); }
.lightbox-next { right: 8px; top: 50%; transform: translateY(-50%); }

.lightbox-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--cream);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

/* ---------- Locations & venues ---------- */

.location-block {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: start;
}

.venue-list { display: grid; gap: 20px; }

.loc-courses-title { font-size: 19px; margin: 26px 0 4px; }
.loc-no-courses { font-size: 14.5px; color: var(--ink-faint); }

.loc-holidays { list-style: none; margin: 0 0 8px; padding: 0; font-size: 14.5px; color: var(--ink-soft); }
.loc-holidays li { display: flex; gap: 12px; padding: 4px 0; }
.loc-holidays .num { font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 190px; }

.loc-course { padding: 16px 0; border-top: 1px solid var(--line); }
.loc-course:first-of-type { border-top: none; }
.loc-course-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.loc-course-link { margin-left: auto; font-size: 13.5px; font-weight: 700; color: var(--gold-deep); text-decoration: none; }
.loc-course-link:hover { text-decoration: underline; }

.venue-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    display: grid;
    gap: 10px;
}

.venue-address { font-size: 15px; }
.venue-schedule { font-size: 14px; color: var(--ink-soft); }
.venue-note { font-size: 14px; color: var(--ink-soft); font-style: italic; }

.venue-map {
    width: 100%;
    height: 240px;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.venue-link { font-size: 14px; font-weight: 700; color: var(--gold-deep); text-decoration: none; }
.venue-link:hover { text-decoration: underline; }

/* Compact variant on the booking status page. */
.venue-card-small { padding: 14px; max-width: 420px; margin-top: 6px; }
.venue-card-small .venue-map { height: 140px; }

@media (max-width: 800px) { .location-block { grid-template-columns: 1fr; gap: 24px; } }

/* ---------- Team cards (About page) ---------- */

.team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Two per row on small screens — never one huge full-width portrait. */
@media (max-width: 800px) {
    .team-grid { grid-template-columns: repeat(2, 1fr); }
}

.team-card h3 { font-size: 18px; margin: 12px 0 2px; }

.team-photo {
    width: 100%;
    /* The portraits are pre-cropped to 4:5 (360x450) with the face centred and
       headroom above the hair. Showing them at that same ratio means the browser
       never crops them again, whatever the column width. height: auto overrides
       the img height attribute so the ratio wins. */
    height: auto;
    aspect-ratio: 4 / 5;
    /* Should a photo with another ratio slip in: trim its bottom, never the head. */
    object-fit: cover;
    object-position: 50% 0;
    /* Arch-topped portraits, echoing the programme cards. */
    border-radius: 120px 120px 14px 14px;
    border: 1px solid var(--line);
}

.team-role {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-deep);
}

.team-bio { font-size: 14.5px; color: var(--ink-soft); }
.team-bio p { margin: 8px 0 0; }

/* ---------- Prose (markdown content) ---------- */

.prose { max-width: 68ch; }
.prose p { color: var(--ink-soft); }
.prose h2 { font-size: 28px; margin-top: 1.4em; }
.prose h3 { font-size: 21px; margin-top: 1.2em; }
.prose ul { padding-left: 1.2em; color: var(--ink-soft); }
/* The contact block placed via {{contact}} reads like the surrounding prose:
   no bullets, prose font size, links styled like prose links. */
.prose .contact-list { padding-left: 0; font-size: inherit; gap: 2px; }
.prose .contact-list a { font-weight: 400; text-decoration: underline; }
.prose a { color: var(--gold-deep); }

/* ---------- Content photos & HSK note (programme + content pages) ---------- */

.content-images {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    max-width: 720px;
    margin: 24px 0;
}

.content-images img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--line);
}

.hsk-note {
    max-width: 720px;
    background: var(--ink);
    color: #cfc8b8;
    border-radius: var(--radius);
    padding: 22px 26px;
    margin: 24px 0;
}

.hsk-note-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
}

.hsk-note p { margin: 0; font-size: 15px; line-height: 1.6; }

/* ---------- Course tiles on programme pages ---------- */

.course-list { display: grid; gap: 18px; }

.course-tile {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    align-items: center;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px 26px;
}

.course-tile-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.course-tile h3 { font-size: 21px; margin: 0; }
.course-term { font-size: 13px; font-weight: 700; color: var(--ink-faint); }

.course-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px 22px;
    margin-top: 14px;
}

.meta-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 3px;
}

.meta-value { font-size: 14.5px; color: var(--ink-soft); }
.slot-line { display: block; font-variant-numeric: tabular-nums; }

.dates-toggle {
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    font-weight: 700;
    color: var(--gold-deep);
    cursor: pointer;
}

.dates-toggle:hover { text-decoration: underline; }

/* Styled as a quiet link, not a button, on its own row under the price. */
.price-note-toggle {
    display: block;
    margin-top: 4px;
    background: none;
    border: none;
    padding: 0;
    font-family: var(--font-body);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gold-deep);
    cursor: pointer;
    text-decoration: underline dotted;
    text-underline-offset: 3px;
}

.price-note-toggle:hover { text-decoration: underline solid; color: var(--ink); }

.dialog-text { font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); margin: 0; }

/* A <dialog> still inherits from its DOM parent while in the top layer, so the
   explicit left alignment stops it picking up e.g. the right-aligned price column. */
.dialog-box {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--paper);
    color: var(--ink);
    text-align: left;
    padding: 26px 30px 30px;
    width: min(92vw, 400px);
    max-height: 80vh;
    box-shadow: 0 24px 60px rgba(30, 28, 24, 0.28);
}

.dialog-box[open] { animation: dialog-in 0.22s ease-out; }

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(10px); }
}

.dialog-box::backdrop { background: rgba(30, 28, 24, 0.5); backdrop-filter: blur(2px); }
.dialog-actions { display: flex; gap: 10px; margin-top: 16px; }

.dialog-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.dialog-head h3 { margin: 0; font-size: 21px; }

.dialog-close {
    flex-shrink: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: -5px -8px 0 0;
    border: none;
    border-radius: 50%;
    background: none;
    font-size: 22px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
}

.dialog-close:hover { color: var(--ink); background: var(--cream-deep); }

@media (prefers-reduced-motion: reduce) {
    .dialog-box[open] { animation: none; }
}

.dates-list { list-style: none; margin: 0; padding: 0; }

.dates-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 14px;
    padding: 7px 0;
    border-top: 1px solid var(--line);
    font-size: 14.5px;
}

/* The dialog head already draws the line above the first row. */
.dates-list li:first-child { border-top: none; }

.dates-list .num { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.course-side { text-align: right; display: grid; gap: 10px; justify-items: end; }

.pill {
    display: inline-block;
    font-size: 12.5px;
    font-weight: 700;
    padding: 5px 13px;
    border-radius: 999px;
    background: var(--cream-deep);
    color: var(--ink-soft);
}

.pill-open { background: #dbe8d8; color: #3d5c34; }
.pill-low { background: #f6e3bb; color: #8a6210; }
.pill-full { background: #ecd9d2; color: #8c4a33; }

.course-price { font-family: var(--font-display); font-size: 20px; font-weight: 600; }
/* Per-session price under the amount, in the tile and in the locations meta grid. */
.course-price small, .meta-value small { display: block; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

@media (max-width: 700px) {
    .course-tile { grid-template-columns: 1fr; }
    .course-side { text-align: left; justify-items: start; }
}

/* ---------- Booking page: summary above form on mobile, beside it on desktop ---------- */

.book-layout { display: grid; gap: 24px; align-items: start; }

.book-summary {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 26px;
}

@media (min-width: 900px) {
    .book-layout { grid-template-columns: 1fr 360px; }
    /* DOM order puts the summary first (mobile priority); on wide screens it moves right. */
    .book-summary { order: 2; position: sticky; top: 24px; }
    .book-layout .form-card { order: 1; }
}

.summary-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-deep);
    margin-bottom: 8px;
}

.summary-title { font-size: 24px; margin: 0; }
/* Left-aligned for the same reason as .footer-fa: it should sit with the LTR card content. */
.summary-fa { font-family: var(--font-fa-display); color: var(--gold-deep); font-size: 17px; text-align: left; }
.summary-term { font-size: 13.5px; font-weight: 700; color: var(--ink-faint); margin-top: 4px; }

.summary-price {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
}

.summary-price small { display: block; font-family: var(--font-body); font-size: 12.5px; font-weight: 400; color: var(--ink-faint); }

/* A class that already started: which lessons are over, which one is next. */
.summary-notice { margin-top: 18px; padding: 12px 14px; border-radius: 10px; background: #f6e3bb; color: #6b4c0c; font-size: 14px; line-height: 1.5; }
.summary-notice strong, .summary-notice span { display: block; }
.summary-notice span { margin-top: 6px; font-weight: 700; }

/* ---------- Forms ---------- */

.form-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 640px;
}

.form-section-title { font-size: 20px; margin: 26px 0 14px; }
.form-section-title:first-child { margin-top: 0; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

.field label { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 5px; }

.field input, .field select, .field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #fff;
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 15px;
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: 2px solid var(--gold);
    outline-offset: 0;
    border-color: var(--gold);
}

.field .error { display: block; font-size: 13px; color: #a03a1d; margin-top: 4px; }
.field.has-error input, .field.has-error textarea, .field.has-error .input-affix { border-color: #a03a1d; }

/* A unit inside the field, before (CHF) or after (%) the value. The wrapper carries the border and focus ring. */
.input-affix { display: inline-flex; align-items: stretch; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden; }
.input-affix span { display: flex; align-items: center; padding: 0 13px; background: var(--cream); color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.field .input-affix input { width: 12ch; border: none; border-radius: 0; }
.field .input-affix input:focus { outline: none; }
.input-affix:focus-within { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }

/* Checkbox rows (consent, reduced contribution): box and text centred on one
   line, normal weight, an optional hint under the text inside the same label
   so it is clickable too. "label." outranks the generic .field label rule. */
label.checkbox-field {
    display: grid;
    grid-template-columns: 20px 1fr;
    column-gap: 12px;
    align-items: center;
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.45;
    cursor: pointer;
}

.checkbox-field input { width: 20px; height: 20px; margin: 0; accent-color: var(--gold-deep); cursor: pointer; }
.checkbox-field .hint { grid-column: 2; margin-top: 4px; font-size: 13.5px; font-weight: 400; color: var(--ink-faint); }
.field:has(> label.checkbox-field) { margin: 8px 0 20px; }

.form-alert {
    background: #ecd9d2;
    color: #6e3018;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14.5px;
    margin-bottom: 18px;
}

.form-notice {
    background: #f6e3bb;
    color: #6b4c0c;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14.5px;
    margin-bottom: 18px;
}

.participants-hint { font-size: 14px; color: var(--ink-faint); margin: -6px 0 12px; }

.participant-row {
    position: relative;
    display: grid;
    grid-template-columns: 1.4fr 1fr auto;
    gap: 12px 16px;
    align-items: end;
    padding: 12px 0;
    border-top: 1px dashed var(--line);
}

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

/* Second line of a row: Farsi level under the name, allergies under birthdate and button. */
.participant-row .field-allergies { grid-column: 2 / -1; }
.participant-row .field-allergies textarea { resize: vertical; }
.participant-row .error { grid-column: 1 / -1; font-size: 13px; color: #a03a1d; }

.btn-remove {
    background: none;
    border: 1px solid var(--line);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    margin-bottom: 4px;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-faint);
    cursor: pointer;
}

.btn-remove:hover { color: #a03a1d; border-color: #a03a1d; }

/* Phones: name, Farsi level and allergies get full-width rows, birthdate and remove button share one. */
@media (max-width: 560px) {
    .participant-row { grid-template-columns: 1fr auto; }
    .participant-row > .field:first-child,
    .participant-row .field-farsi,
    .participant-row .field-allergies { grid-column: 1 / -1; }
}

.book-total { font-size: 17px; }
.book-total strong { font-family: var(--font-display); font-size: 21px; }

/* Honeypot field — hidden from humans, tempting for bots. */
.hp-field { position: absolute; left: -9999px; }

/* ---------- Status page ---------- */

.status-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 32px;
    max-width: 640px;
}

.status-rows { display: grid; gap: 0; margin: 20px 0; }

.status-row {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--line);
    font-size: 15px;
}

.status-row dt { color: var(--ink-faint); font-weight: 700; margin: 0; }
.status-row dd { margin: 0; }

/* Phones: label above value, so the venue card gets the full width. */
@media (max-width: 560px) {
    .status-card { padding: 22px 18px; }
    .status-row { grid-template-columns: 1fr; gap: 4px; }
}

.status-hint { font-size: 13.5px; color: var(--ink-faint); }

/* ---------- CTA banner (dark, gold glow — from the Bento direction) ---------- */

.cta-banner {
    position: relative;
    overflow: hidden;
    background: var(--ink);
    color: var(--cream);
    border-radius: 24px;
    padding: 44px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
    margin: 24px 0 56px;
}

.cta-banner::before {
    content: "";
    position: absolute;
    right: -60px; top: -60px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 171, 32, 0.35), transparent 70%);
}

.cta-banner h2 { font-size: clamp(24px, 3.5vw, 34px); margin: 0; position: relative; }
.cta-banner p { color: #cfc8b8; margin: 6px 0 0; position: relative; }

/* ---------- Contact details reveal & reCAPTCHA ---------- */

.contact-details { margin-bottom: 24px; }
.contact-person { margin: 0 0 10px; font-size: 17px; line-height: 1.5; }
.contact-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 6px; font-size: 17px; }
.contact-list a { color: var(--gold-deep); font-weight: 700; text-decoration: none; }
.contact-list a:hover { text-decoration: underline; }
.reveal-error { color: #a03a1d; font-size: 14.5px; }
.contact-loading { color: var(--ink-faint); font-size: 15px; margin: 0 0 8px; }

.recaptcha-notice { font-size: 12.5px; color: var(--ink-faint); margin: 10px 0 0; }
.recaptcha-notice a { color: var(--ink-faint); }

/* Badge hidden; attribution is rendered next to the protected forms instead. */
.grecaptcha-badge { visibility: hidden; }

/* ---------- Footer ---------- */

.site-footer {
    background: var(--ink);
    color: #cfc8b8;
    margin-top: 40px;
    font-size: 14.5px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 32px;
    padding-top: 44px;
    padding-bottom: 32px;
}

.footer-brand { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--cream); }
/* dir="rtl" keeps the Farsi glyph order correct; the explicit left alignment
   makes the line sit with the LTR layout instead of jumping to the right edge. */
.footer-fa { font-family: var(--font-fa-display); color: var(--gold); margin: 2px 0 10px; text-align: left; }

.footer-heading {
    font-family: var(--font-body);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin: 0 0 10px;
}

.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.footer-list a { color: inherit; text-decoration: none; }
.footer-list a:hover { color: var(--cream); }
.footer-note { margin: 0; }

.footer-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px 24px;
    flex-wrap: wrap;
    border-top: 1px solid #4d4a43;
    padding-top: 18px;
    padding-bottom: 22px;
    font-size: 13px;
    color: var(--ink-faint);
}

.footer-legal a { color: inherit; text-decoration: none; }
.footer-legal a:hover { color: var(--cream); }

@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr; gap: 24px; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; }
}