/*
 * Dink A Lot — Brand v2 (2026) web layer.
 *
 * Source of truth: Dink A Lot Brand Guidelines v2 (PDF, 16 pages) and
 * docs/brand-v2-web.md. Loaded by every PUBLIC page through
 * src/components/BrandHead.astro, AFTER assets/css/dal.css, so these tokens
 * win over the old dark "Netflix" ones. Admin pages do not load this file and
 * keep their look.
 *
 *   Blue is the brand. Black is the voice. Cyan is the spark.
 *
 * Two themes:
 *   light (default) — white pages, tint panels, black text, blue fills.
 *   night           — add class "dal-night" to <body>. Black ground, white
 *                     text, cyan headlines. For event-night screens only
 *                     (joinevent, leaderboard, eventreport).
 *
 * Components read ROLE tokens (--dal-bg, --dal-fg, --dal-card …) so the same
 * markup works in both themes.
 */

/* ---------------------------------------------------------------------------
 * Type: Poppins for English, Prompt for Thai — one family, "DAL Sans".
 * unicode-range sends Latin to Poppins and Thai to Prompt per character.
 * Weight ranges pin every legacy weight to the brand set:
 *   Poppins 400 · 600 · 800 (body · buttons/labels · headlines)
 *   Prompt  400 · 700 · 900 (body · headline beside English · Thai-only big)
 * So an 800 headline renders Poppins 800 + Prompt 700 — the guideline pairing.
 * ------------------------------------------------------------------------- */
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/poppins-latin-400-normal.woff2") format("woff2"); font-weight: 100 499; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/poppins-latin-600-normal.woff2") format("woff2"); font-weight: 500 699; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/poppins-latin-800-normal.woff2") format("woff2"); font-weight: 700 1000; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/poppins-latin-ext-400-normal.woff2") format("woff2"); font-weight: 100 499; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/poppins-latin-ext-600-normal.woff2") format("woff2"); font-weight: 500 699; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/poppins-latin-ext-800-normal.woff2") format("woff2"); font-weight: 700 1000; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/prompt-thai-400-normal.woff2") format("woff2"); font-weight: 100 499; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/prompt-thai-700-normal.woff2") format("woff2"); font-weight: 500 850; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "DAL Sans"; src: url("/assets/font/brand/prompt-thai-900-normal.woff2") format("woff2"); font-weight: 851 1000; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }

/* ---------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------- */
:root {
    /* Palette — guideline p.10. Do not add brand colours. */
    --dal-blue: #2BA3F8;          /* big fills, the mark, court graphics. Black text on it. */
    --dal-cyan: #30D1FF;          /* accent only: the lit hole, highlights. */
    --dal-blue-ink: #0A6BB0;      /* blue TEXT and links on white / tint. */
    --dal-ink: #000000;           /* wordmark, headlines, body, dark grounds. */
    --dal-surface: #FFFFFF;       /* pages, cards. */
    --dal-surface-tint: #EAF6FE;  /* panels, soft areas. */

    /* Interaction shades of the brand blue (UI states, not new colours). */
    --dal-blue-hover: #1F98EE;
    --dal-blue-press: #148AE0;
    --dal-blue-deep: #1E8FE0;     /* "deeper blue" for the block pattern on blue (p.12). */

    /* Neutrals for UI chrome (greys from the guideline's own body copy). */
    --dal-grey-700: #374151;
    --dal-grey-600: #4B5563;
    --dal-grey-500: #6B7280;
    --dal-grey-300: #C9D7E3;
    --dal-line-blue: #D3E6F5;     /* card border used across the guideline. */
    --dal-panel-dark: #0D0D0D;    /* black panels ("Our goal", "Never"). */
    --dal-panel-slate: #1F2633;   /* slate cards on black (voice page). */

    /* State colours (light ground). Text colours pass 4.5:1 on their bg. */
    --dal-success: #067647;  --dal-success-bg: #E6F6EC;  --dal-success-line: #A8DFBF;
    --dal-danger:  #B42318;  --dal-danger-bg:  #FDECEA;  --dal-danger-line:  #F5B5AE;
    --dal-warning: #8A5300;  --dal-warning-bg: #FFF4D6;  --dal-warning-line: #F3D68A;
    --dal-info:    var(--dal-blue-ink); --dal-info-bg: var(--dal-surface-tint); --dal-info-line: var(--dal-line-blue);

    /* ROLE tokens — light theme. Components use these. */
    --dal-bg: var(--dal-surface);
    --dal-bg-soft: var(--dal-surface-tint);
    --dal-card: var(--dal-surface);
    --dal-card-2: var(--dal-surface-tint);
    --dal-fg: var(--dal-ink);
    --dal-fg-2: var(--dal-grey-600);
    --dal-fg-3: var(--dal-grey-500);
    --dal-border: var(--dal-line-blue);
    --dal-border-strong: var(--dal-grey-300);
    --dal-link: var(--dal-blue-ink);
    --dal-accent-text: var(--dal-blue-ink);   /* eyebrows, small blue text */
    --dal-headline-accent: var(--dal-ink);    /* cyan on night */
    --dal-focus: rgba(43, 163, 248, 0.45);
    --dal-scrim: rgba(0, 0, 0, 0.45);
    --dal-shadow-1: 0 1px 2px rgba(10, 60, 100, 0.06), 0 2px 10px rgba(10, 60, 100, 0.06);
    --dal-shadow-2: 0 8px 28px rgba(10, 60, 100, 0.14);
    --dal-glass: rgba(255, 255, 255, 0.86);

    /* Type */
    --dal-font: "DAL Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --dal-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
    --dal-w-body: 400;
    --dal-w-label: 600;
    --dal-w-head: 800;
    --dal-track-head: -0.03em;
    --dal-track-wordmark: -0.045em;

    /* Shape — the mark's corner is 22% of its side; square tiles echo it. */
    --dal-r-xs: 8px;
    --dal-r-sm: 12px;
    --dal-r-md: 16px;
    --dal-r-lg: 24px;
    --dal-r-block: 22%;
    --dal-r-pill: 999px;

    /* Motion (same curve as booking-v2) */
    --dal-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dal-dur-fast: 150ms;
    --dal-dur-base: 240ms;
    --dal-dur-slow: 400ms;

    /* Legacy aliases — every page that already reads these picks up v2. */
    --dal-primary: var(--dal-blue);
    --dal-primary-hover: var(--dal-blue-hover);
    --dal-primary-active: var(--dal-blue-press);
    --dal-app-bg: var(--dal-surface);
}

/* Night theme — event-night screens. Put "dal-night" on <body>. */
.dal-night {
    --dal-bg: var(--dal-ink);
    --dal-bg-soft: var(--dal-panel-dark);
    --dal-card: #111317;
    --dal-card-2: var(--dal-panel-slate);
    --dal-fg: #FFFFFF;
    --dal-fg-2: rgba(255, 255, 255, 0.74);
    --dal-fg-3: rgba(255, 255, 255, 0.56);
    --dal-border: rgba(255, 255, 255, 0.12);
    --dal-border-strong: rgba(255, 255, 255, 0.24);
    --dal-link: var(--dal-cyan);
    --dal-accent-text: var(--dal-cyan);
    --dal-headline-accent: var(--dal-cyan);
    --dal-focus: rgba(48, 209, 255, 0.5);
    --dal-scrim: rgba(0, 0, 0, 0.6);
    --dal-shadow-1: none;
    --dal-shadow-2: 0 10px 30px rgba(0, 0, 0, 0.6);
    --dal-glass: rgba(0, 0, 0, 0.78);
    --dal-success: #5BD38B;  --dal-success-bg: rgba(91, 211, 139, 0.14);  --dal-success-line: rgba(91, 211, 139, 0.4);
    --dal-danger:  #FF8A80;  --dal-danger-bg:  rgba(255, 138, 128, 0.14); --dal-danger-line:  rgba(255, 138, 128, 0.4);
    --dal-warning: #FFD166;  --dal-warning-bg: rgba(255, 209, 102, 0.14); --dal-warning-line: rgba(255, 209, 102, 0.4);
    --dal-info: var(--dal-cyan); --dal-info-bg: rgba(48, 209, 255, 0.12); --dal-info-line: rgba(48, 209, 255, 0.4);
    --dal-app-bg: var(--dal-ink);
}

/* ---------------------------------------------------------------------------
 * Base — scoped to html.dal-brand (set by BrandHead) so nothing leaks into
 * admin pages that happen to share a component.
 * ------------------------------------------------------------------------- */
html.dal-brand { -webkit-text-size-adjust: 100%; }
html.dal-brand body {
    font-family: var(--dal-font);
    font-weight: var(--dal-w-body);
    color: var(--dal-fg);
    background: var(--dal-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
}
html.dal-brand :where(button, input, select, textarea) { font-family: inherit; }
html.dal-brand ::selection { background: var(--dal-cyan); color: var(--dal-ink); }
/* Zero-specificity link colour so any component class (.dal-lockup, .dal-tile,
 * page classes) wins over it. */
:where(html.dal-brand) a { color: var(--dal-link); }
html.dal-brand :focus-visible { outline: 3px solid var(--dal-focus); outline-offset: 2px; }

/* Brand components size with border-box (pages without Bootstrap/dal.css
 * resets would otherwise overflow by their padding). */
:where(.dal-shell, .dal-card, .dal-panel, .dal-btn, .dal-input, .dal-select, .dal-textarea,
       .dal-sheet, .dal-ctabar, .dal-topbar, .dal-siteheader, .dal-tile, .dal-chip,
       .dal-lang, .dal-lang .lang-btn, .dal-iconbtn, .dal-badge, .dal-field) { box-sizing: border-box; }

@media (prefers-reduced-motion: reduce) {
    html.dal-brand *, html.dal-brand *::before, html.dal-brand *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
 * Logo — mark + wordmark lockups (guideline p.4–6, 13).
 *   One line: mark height = 1.1 × name size; gap ≈ 0.28 × mark.
 *   Stacked:  mark height = height of the two lines; gap = 0.35 × mark.
 *   Always "Dink A Lot" — three words, capital A, never uppercased.
 * Set --lockup-mark to size it (website header = 32px).
 * ------------------------------------------------------------------------- */
.dal-mark { display: inline-block; flex: 0 0 auto; width: var(--mark, 32px); height: var(--mark, 32px); }
.dal-mark > svg, .dal-mark > img { display: block; width: 100%; height: 100%; }

.dal-lockup {
    --lockup-mark: 32px;
    display: inline-flex;
    align-items: center;
    gap: calc(var(--lockup-mark) * 0.28);
    color: var(--dal-fg);
    text-decoration: none;
    line-height: 1;
    white-space: nowrap;
}
.dal-lockup .dal-mark { width: var(--lockup-mark); height: var(--lockup-mark); }
.dal-wordmark {
    font-family: var(--dal-font);
    font-weight: 800;
    font-size: calc(var(--lockup-mark, 32px) / 1.1);
    letter-spacing: var(--dal-track-wordmark);
    text-transform: none !important;
    color: inherit;
    line-height: 1;
    /* Poppins sits slightly high in its em box; nudge to optical centre. */
    padding-top: 0.06em;
}
.dal-lockup--stacked { gap: calc(var(--lockup-mark) * 0.35); align-items: center; }
.dal-lockup--stacked .dal-wordmark {
    display: flex;
    flex-direction: column;
    font-size: calc(var(--lockup-mark) / 1.9);
    line-height: 0.95;
    padding-top: 0;
}
.dal-lockup:hover { color: var(--dal-fg); }

/* Thai line under the name (guideline p.6: Prompt Bold, under, never replacing). */
.dal-lockup-sub { display: block; font-weight: 700; font-size: 0.42em; letter-spacing: 0; color: var(--dal-fg-2); margin-top: 0.2em; }

/* ---------------------------------------------------------------------------
 * Type helpers
 * ------------------------------------------------------------------------- */
.dal-eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--dal-accent-text);
}
html[lang="th"] .dal-eyebrow { letter-spacing: 0.04em; }
.dal-headline {
    font-family: var(--dal-font);
    font-weight: 800;
    letter-spacing: var(--dal-track-head);
    line-height: 1.04;
    color: var(--dal-fg);
    margin: 0;
    text-wrap: balance;
}
html[lang="th"] .dal-headline { letter-spacing: -0.01em; line-height: 1.18; }
.dal-headline--xl { font-size: clamp(34px, 9vw, 64px); }
.dal-headline--lg { font-size: clamp(28px, 7vw, 44px); }
.dal-headline--md { font-size: clamp(22px, 5.4vw, 30px); }
.dal-headline--sm { font-size: 20px; }
.dal-night .dal-headline--accent, .dal-headline--accent { color: var(--dal-headline-accent); }
.dal-lede { font-size: 16px; line-height: 1.55; color: var(--dal-fg-2); margin: 0; }
.dal-muted { color: var(--dal-fg-3); }

/* ---------------------------------------------------------------------------
 * Buttons — SemiBold 600. Black text on blue (never small white on blue).
 * ------------------------------------------------------------------------- */
.dal-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 0 22px;
    border: 1.5px solid transparent;
    border-radius: var(--dal-r-pill);
    font-family: var(--dal-font);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.1;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    transition: background-color var(--dal-dur-fast) var(--dal-ease), border-color var(--dal-dur-fast) var(--dal-ease), transform var(--dal-dur-fast) var(--dal-ease), color var(--dal-dur-fast) var(--dal-ease);
    background: var(--dal-blue);
    color: var(--dal-ink);
}
.dal-btn:hover { background: var(--dal-blue-hover); color: var(--dal-ink); }
.dal-btn:active { transform: scale(0.98); background: var(--dal-blue-press); }
.dal-btn[disabled], .dal-btn.is-disabled, .dal-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.dal-btn--block { display: flex; width: 100%; }
.dal-btn--sm { min-height: 36px; padding: 0 14px; font-size: 14px; }
.dal-btn--lg { min-height: 56px; padding: 0 28px; font-size: 17px; }
.dal-btn--ink { background: var(--dal-ink); color: #fff; }
.dal-btn--ink:hover, .dal-btn--ink:active { background: #1a1a1a; color: #fff; }
.dal-btn--tint { background: var(--dal-surface-tint); color: var(--dal-blue-ink); }
.dal-btn--tint:hover, .dal-btn--tint:active { background: #DCEFFD; color: var(--dal-blue-ink); }
.dal-btn--ghost { background: transparent; color: var(--dal-fg); border-color: var(--dal-border-strong); }
.dal-btn--ghost:hover, .dal-btn--ghost:active { background: var(--dal-bg-soft); color: var(--dal-fg); }
.dal-btn--cyan { background: var(--dal-cyan); color: var(--dal-ink); }
.dal-btn--cyan:hover, .dal-btn--cyan:active { background: #5ADBFF; color: var(--dal-ink); }
.dal-btn--danger { background: var(--dal-danger-bg); color: var(--dal-danger); border-color: var(--dal-danger-line); }
.dal-btn--danger:hover, .dal-btn--danger:active { background: var(--dal-danger-bg); color: var(--dal-danger); }
.dal-night .dal-btn--ghost { color: #fff; }
.dal-night .dal-btn--tint { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dal-night .dal-btn--ink { background: #fff; color: var(--dal-ink); }

/* Text link with arrow, e.g. "Book now" in the header (dal-blue-ink on white). */
.dal-link {
    color: var(--dal-link);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}
.dal-link:hover { text-decoration: underline; text-underline-offset: 3px; color: var(--dal-link); }

/* ---------------------------------------------------------------------------
 * Surfaces
 * ------------------------------------------------------------------------- */
.dal-card {
    background: var(--dal-card);
    border: 1px solid var(--dal-border);
    border-radius: var(--dal-r-lg);
    padding: 18px;
    color: var(--dal-fg);
}
.dal-card--tint { background: var(--dal-card-2); border-color: transparent; }
.dal-card--ink { background: var(--dal-panel-dark); border-color: transparent; color: #fff; }
.dal-card--ink .dal-muted, .dal-card--ink .dal-lede { color: rgba(255, 255, 255, 0.72); }
.dal-card--blue { background: var(--dal-blue); border-color: transparent; color: var(--dal-ink); }
.dal-card--raised { box-shadow: var(--dal-shadow-1); }
.dal-panel { background: var(--dal-bg-soft); border-radius: var(--dal-r-lg); padding: 18px; }

/* Brand pattern: the block repeated in a deeper blue on brand blue (p.12). */
.dal-pattern {
    background-color: var(--dal-blue);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Crect x='8' y='8' width='44' height='44' rx='10' fill='%231E8FE0'/%3E%3Crect x='68' y='68' width='44' height='44' rx='10' fill='%231E8FE0'/%3E%3C/svg%3E");
    background-size: 120px 120px;
    color: var(--dal-ink);
}

/* ---------------------------------------------------------------------------
 * Chips / pills / badges
 * ------------------------------------------------------------------------- */
.dal-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--dal-r-pill);
    border: 1px solid var(--dal-border);
    background: var(--dal-card);
    color: var(--dal-fg);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.dal-chip.is-active, .dal-chip[aria-pressed="true"], .dal-chip[aria-selected="true"] {
    background: var(--dal-ink); border-color: var(--dal-ink); color: #fff;
}
.dal-night .dal-chip.is-active, .dal-night .dal-chip[aria-pressed="true"], .dal-night .dal-chip[aria-selected="true"] {
    background: #fff; border-color: #fff; color: var(--dal-ink);
}
.dal-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 9px; border-radius: var(--dal-r-pill);
    font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
    background: var(--dal-info-bg); color: var(--dal-info);
}
.dal-badge--success { background: var(--dal-success-bg); color: var(--dal-success); }
.dal-badge--danger { background: var(--dal-danger-bg); color: var(--dal-danger); }
.dal-badge--warning { background: var(--dal-warning-bg); color: var(--dal-warning); }
.dal-badge--ink { background: var(--dal-ink); color: #fff; }
.dal-badge--cyan { background: var(--dal-cyan); color: var(--dal-ink); }

/* ---------------------------------------------------------------------------
 * Language switch — EN | TH. English is the site default.
 * Buttons keep the engine's hooks: class "lang-btn" + data-lang.
 * ------------------------------------------------------------------------- */
.dal-lang {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    border-radius: var(--dal-r-pill);
    background: var(--dal-bg-soft);
    border: 1px solid var(--dal-border);
}
.dal-lang .lang-btn {
    -webkit-appearance: none; appearance: none;
    border: 0; background: transparent;
    min-width: 38px; height: 28px; padding: 0 10px;
    border-radius: var(--dal-r-pill);
    font-family: var(--dal-font); font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
    color: var(--dal-fg-2);
    cursor: pointer;
}
.dal-lang .lang-btn.is-active, .dal-lang .lang-btn[aria-pressed="true"] { background: var(--dal-ink); color: #fff; }
.dal-night .dal-lang .lang-btn.is-active, .dal-night .dal-lang .lang-btn[aria-pressed="true"] { background: #fff; color: var(--dal-ink); }

/* ---------------------------------------------------------------------------
 * Topbar — app pages (56px, glass, back · lockup · lang).
 * ------------------------------------------------------------------------- */
.dal-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
    min-height: 56px;
    padding: env(safe-area-inset-top, 0px) 12px 0;
    background: var(--dal-glass);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--dal-border);
}
.dal-topbar > :first-child { justify-self: start; }
.dal-topbar > :last-child { justify-self: end; }
.dal-topbar .dal-lockup { --lockup-mark: 26px; }
.dal-iconbtn {
    -webkit-appearance: none; appearance: none;
    display: inline-grid; place-items: center;
    width: 40px; height: 40px;
    border: 0; border-radius: var(--dal-r-pill);
    background: var(--dal-bg-soft); color: var(--dal-fg);
    cursor: pointer; text-decoration: none;
}
.dal-iconbtn:hover { color: var(--dal-fg); filter: brightness(0.97); }
.dal-iconbtn svg { width: 20px; height: 20px; }

/* Site header — marketing pages (lockup left, Book now + lang right). */
.dal-siteheader {
    position: sticky; top: 0; z-index: 50;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    min-height: 60px;
    padding: env(safe-area-inset-top, 0px) 16px 0;
    background: var(--dal-glass);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    backdrop-filter: blur(14px) saturate(160%);
    border-bottom: 1px solid var(--dal-border);
}
.dal-siteheader-actions { display: flex; align-items: center; gap: 12px; }

/* ---------------------------------------------------------------------------
 * Form fields
 * ------------------------------------------------------------------------- */
.dal-field { display: grid; gap: 6px; }
.dal-label { font-size: 13px; font-weight: 600; color: var(--dal-fg); }
.dal-input, .dal-select, .dal-textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1.5px solid var(--dal-border-strong);
    border-radius: var(--dal-r-sm);
    background: var(--dal-card);
    color: var(--dal-fg);
    font-family: var(--dal-font);
    font-size: 16px;
    transition: border-color var(--dal-dur-fast) var(--dal-ease), box-shadow var(--dal-dur-fast) var(--dal-ease);
}
.dal-input::placeholder, .dal-textarea::placeholder { color: var(--dal-fg-3); }
.dal-input:focus, .dal-select:focus, .dal-textarea:focus {
    outline: none; border-color: var(--dal-blue); box-shadow: 0 0 0 3px var(--dal-focus);
}
.dal-hint { font-size: 12px; color: var(--dal-fg-3); }
.dal-error { font-size: 13px; color: var(--dal-danger); }

/* ---------------------------------------------------------------------------
 * Sticky bottom CTA bar + bottom sheet (booking-v2 patterns, light skin).
 * ------------------------------------------------------------------------- */
.dal-ctabar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--dal-glass);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
    backdrop-filter: blur(16px) saturate(160%);
    border-top: 1px solid var(--dal-border);
}
.dal-ctabar-label { font-size: 12px; color: var(--dal-fg-3); }
.dal-ctabar-value { font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--dal-fg); }

.dal-scrim { position: fixed; inset: 0; background: var(--dal-scrim); z-index: 80; }
.dal-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 81;
    max-height: 92dvh; overflow: auto;
    background: var(--dal-card);
    color: var(--dal-fg);
    border-radius: 24px 24px 0 0;
    box-shadow: var(--dal-shadow-2);
    padding: 8px 18px calc(18px + env(safe-area-inset-bottom, 0px));
}
.dal-sheet-handle { width: 40px; height: 4px; border-radius: 4px; background: var(--dal-border-strong); margin: 4px auto 12px; }

/* ---------------------------------------------------------------------------
 * Sub-brand tile — mark with one lit hole + name (colour alone is never
 * enough, so the name always sits with it).
 * ------------------------------------------------------------------------- */
.dal-tile {
    display: flex; flex-direction: column; gap: 10px;
    padding: 16px;
    border-radius: var(--dal-r-lg);
    background: var(--dal-card-2);
    color: var(--dal-fg);
    text-decoration: none;
    transition: transform var(--dal-dur-fast) var(--dal-ease), background-color var(--dal-dur-fast) var(--dal-ease);
}
/* Hover tints only where a real pointer hovers — on touch screens :hover
 * sticks after a tap and the tile would stay tinted. */
@media (hover: hover) {
    .dal-tile:hover { color: var(--dal-fg); background: #DFF1FD; }
}
.dal-tile:active { transform: scale(0.98); }
.dal-tile .dal-mark { --mark: 44px; }
.dal-tile-name { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.dal-tile-line { font-size: 13px; line-height: 1.4; color: var(--dal-fg-2); }

/* Empty / success states can borrow the mascot (guideline p.8: the bucket
 * is our friend, never our logo — keep it small and away from the mark). */
.dal-mascot { display: block; width: 96px; height: auto; border-radius: var(--dal-r-block); }

/* Utility */
.dal-shell { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px; }
.dal-stack { display: grid; gap: 12px; }
.dal-row { display: flex; align-items: center; gap: 12px; }
.dal-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }