/*
 * return-portal - Bagalio brand styles.
 * Local only, no CDN and no third-party webfonts. Mobile-first, high contrast.
 *
 * Font: Bagalio uses a system Arial/Helvetica stack for all body and heading
 * text (no webfont for text - the theme only ships an icon font). We reuse the
 * same native stack, so there is nothing to license or download.
 *
 * Colour tokens are derived from the Bagalio Magento theme (teal brand from the
 * logo, red CTA, cyan-blue secondary). The primary action button is intentionally
 * darkened to #c32000 so its white label clears the legal 4.5:1 contrast floor
 * required for the withdrawal button (art. 11a); the vivid brand #ea2c00 sits at
 * only 4.32:1 and is therefore not used behind text.
 */

:root {
    /* Brand (teal, from the logo) */
    --brand-primary: #0d9b8c;       /* logo teal - accents, header bar, headings */
    --brand-primary-dark: #008473;  /* darker teal - decor, badge bg (4.62:1 on white) */
    --brand-primary-darker: #006b5d; /* hover of the filled teal button (6.5:1 on white) */
    --topbar-bg: #209c8c;           /* Bagalio top strip */

    /* Primary CTA - initiating + confirming button (white label >= 4.5:1) */
    --cta-bg: #c32000;              /* 5.95:1 on white */
    --cta-hover: #a01a00;           /* 7.94:1 on white */
    --cta-fg: #ffffff;

    /* Secondary action (outline). Teal, not the old cyan-blue: two accent hues
       four degrees apart read as an accident, and the page already carries the
       teal in the logo, the top strip and every panel line. Red stays reserved
       for the two statutory buttons (initiate + confirm). */
    --secondary: #008473;           /* 4.62:1 on white - text, border, filled hover */
    --secondary-dark: #006b5d;

    /* Accent - badge / decoration only, never behind small text */
    --accent: #f4952d;

    /* Links */
    --link: #006d8c;                /* 5.89:1 on white */
    --link-hover: #004e66;

    /* Text */
    --text: #161616;
    --text-muted: #6b6b6b;          /* 5.32:1 on white, 4.99:1 on the tinted page bg (AA) */
    --text-on-dark: #e8e8e8;

    /* Surfaces / borders.
       The page itself is very lightly tinted and every block that carries
       content (card, panel, address, code, declaration) is white on top of it.
       White cards on a white page were held together by a 1px line only, which
       read as an unfinished frame. */
    --bg: #f5f6f6;
    --surface: #ffffff;
    --surface-alt: #ffffff;
    --border: #e1e4e5;
    --border-strong: #8a8a8a;
    --footer-bg: #444444;

    /* State */
    --error: #c32000;
    --error-bg: #fdecee;
    --warning: #d99100;
    --warning-bg: #fff7e6;

    /* Metrics - Bagalio is a square-cornered brand (radius 0) */
    --max-width: 900px;              /* fits the content + side guide column */
    --space: 1rem;
    --radius: 0;
    --radius-chip: 2px;
    --shadow-header: 0 .7px 5px 0 rgba(0, 0, 0, .2);
    --shadow-card: 0 2px 12px 0 rgba(0, 132, 115, .14);

    --font: Arial, "Helvetica Neue", Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

/* Sticky footer: short pages (the landing chooser above all) must not leave a
   band of empty white below the footer. Flex column + main:auto keeps the footer
   on the bottom edge of the viewport without any fixed positioning, so nothing
   overlaps the content on long pages either. */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

body > main {
    flex: 1 0 auto;
}

body > .site-header,
body > .site-footer {
    flex: 0 0 auto;
}

.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--space);
}

/* ---------- Header ---------- */
.site-header {
    background: var(--surface);
    border-top: 4px solid var(--topbar-bg);   /* echoes the Bagalio teal top strip */
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-header);
    padding-block: 0.75rem;
}

.site-header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

/* The header carries the logo only (owner decision). The permanent entry point
   to the withdrawal function lives in the footer of every page and in the first
   landing card. */
.brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.brand__logo {
    display: block;
    height: 32px;
    width: auto;
    max-width: 100%;
}

/* ---------- Layout ---------- */
main.container {
    padding-block: calc(var(--space) * 2);
}

h1 {
    font-size: 1.75rem;
    line-height: 1.2;
    font-weight: 700;
    margin-block: 0 var(--space);
    color: var(--text);
}

h2 {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
}

.lead {
    font-size: 1.125rem;
}

.muted {
    color: var(--text-muted);
}

a {
    color: var(--link);
}

a:hover,
a:focus {
    color: var(--link-hover);
    text-decoration: underline;
}

code {
    background: #f2f2f2;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-chip);
    font-size: 0.9em;
}

/* ---------- Buttons ----------
   .btn            = primary CTA (initiating + confirming). Solid brand red,
                     white uppercase label, contrast 5.95:1 (>= legal 4.5:1).
   .btn--confirm   = the single art. 11a(3) confirmation button (larger).
   .btn--brand     = the step-1 "Pokracovat" of both forms. Solid teal, white
                     label at 4.62:1. It has to dominate its screen (it is the
                     only action there) without borrowing the red, which stays
                     reserved for initiating and confirming the withdrawal.
   .btn--secondary = neutral / secondary action (voluntary return and complaint
                     card, back links). Ghost/outline in the same teal, text and
                     border 4.62:1, fills on hover.
*/
.btn {
    display: inline-block;
    font: inherit;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.2;
    padding: 0.75rem 1.5rem;
    min-height: 44px;                 /* comfortable touch target */
    border: 2px solid var(--cta-bg);
    border-radius: var(--radius);
    background: var(--cta-bg);
    color: var(--cta-fg);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

.btn:hover,
.btn:focus {
    background: var(--cta-hover);
    border-color: var(--cta-hover);
    color: var(--cta-fg);
    text-decoration: none;
}

.btn:focus-visible {
    outline: 3px solid var(--brand-primary-dark);
    outline-offset: 2px;
}

.btn--confirm {
    font-size: 1.125rem;
    padding: 0.9rem 1.75rem;
}

.btn--brand {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #ffffff;
}

.btn--brand:hover,
.btn--brand:focus {
    background: var(--brand-primary-darker);
    border-color: var(--brand-primary-darker);
    color: #ffffff;
}

.btn--secondary {
    background: transparent;
    color: var(--secondary);
    border-color: var(--secondary);
}

.btn--secondary:hover,
.btn--secondary:focus {
    background: var(--secondary);
    border-color: var(--secondary);
    color: #ffffff;
}

/* ---------- Page layout: content + side guide ----------
   Mobile-first single column. The DOM keeps the form first (it is the reason
   the page exists and the first thing a screen reader should reach), but on a
   phone the "how it works" panel is pulled ABOVE the form visually: read after
   the submit button it would be read never. From 780px the panel returns to the
   right column and sticks, so a 2 700px complaint form does not scroll away
   from its own instructions. */
.split {
    display: grid;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.split__main {
    order: 2;
}

.split__side {
    order: 1;
    display: grid;
    gap: 1.25rem;
    align-content: start;
}

/* Only the "how it works" panel goes above the form on a phone. The support
   box and the panels of the done pages follow the main column: above it they
   pushed the identification and the code form a whole screen down (F2 QA
   19. 10. 2026). */
@media (max-width: 779px) {
    .split__side {
        display: contents;
    }

    .split__side > * {
        order: 3;
    }

    .split__side > .guide {
        order: 1;
    }
}

@media (min-width: 780px) {
    .split {
        grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }

    .split__main {
        order: 1;
    }

    .split__side {
        order: 2;
        position: sticky;
        top: 1rem;
    }
}

/* ---------- Progress indicator (withdrawal path) ---------- */
.progress {
    margin-bottom: 1.5rem;
}

.progress__label {
    margin: 0 0 0.5rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

.progress__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 0;
    padding: 0;
}

.progress__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.progress__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 2px solid var(--border-strong);
    border-radius: var(--radius-chip);
    font-weight: 700;
    font-size: 0.9rem;
}

.progress__item--current {
    color: var(--text);
    font-weight: 700;
}

.progress__item--current .progress__num {
    background: var(--brand-primary-dark);
    border-color: var(--brand-primary-dark);
    color: #ffffff;
}

.progress__item--done .progress__num {
    border-color: var(--brand-primary-dark);
    color: var(--brand-primary-dark);
}

/* ---------- Promises ---------- */
.promises {
    list-style: none;
    display: grid;
    gap: 0.75rem;
    margin: 1.5rem 0;
    padding: 0;
}

.promise {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-primary-dark);
    padding: 0.75rem 0.9rem;
}

.promise__mark {
    color: var(--brand-primary-dark);
    font-weight: 700;
}

.promise__title {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
}

.promise__desc {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.9rem;
    color: var(--text-muted);
}

@media (min-width: 760px) {
    .promises {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ---------- Side panels (guide, support, done-page panels) ---------- */
.guide,
.panel,
.support {
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-top: 4px solid var(--brand-primary-dark);
    padding: 1.25rem;
}

.guide__heading,
.panel__heading,
.support__heading {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
}

.guide__list {
    margin: 0;
    padding-left: 1.3rem;
    display: grid;
    gap: 0.6rem;
    font-size: 0.95rem;
}

.panel__list {
    margin: 0;
    padding-left: 1.3rem;
    display: grid;
    gap: 0.5rem;
    font-size: 0.95rem;
}

.support__intro {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
}

.support__list {
    display: grid;
    gap: 0.15rem 0.75rem;
    margin: 0;
}

.support__list dt {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.support__list dd {
    margin: 0 0 0.5rem;
    font-weight: 700;
}

/* ---------- Content helpers ---------- */
.steps {
    margin: 0.75rem 0 0;
    padding-left: 1.3rem;
    display: grid;
    gap: 0.5rem;
}

.list-plain {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.list-plain > li {
    padding-left: 0.9rem;
    border-left: 3px solid var(--border);
}

.list-plain .hint {
    display: block;
}

.highlight {
    font-weight: 700;
    background: var(--surface-alt);
    border-left: 4px solid var(--brand-primary-dark);
    padding: 0.6rem 0.9rem;
    margin: 1.5rem 0;
}

.address {
    font-style: normal;
    margin: 0.5rem 0;
    background: var(--surface-alt);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-primary-dark);
    padding: 0.6rem 0.9rem;
    line-height: 1.5;
}

/* Sub-heading inside an answer. The postal address MUST carry one: without it
   the box reads as the address of whatever stands above it, and on the markets
   with a collection point (AT, GR, SI, HR, BG) that would tell a customer in
   Vienna to post the parcel to Brno. */
.info-sub {
    margin: 1.5rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

/* ---------- Landing: three equal choice cards ----------
   One card style for all three situations: same border, same padding, same
   height, CTA pinned to the bottom edge so the buttons line up. The withdrawal
   card differs in exactly two ways - an accent line on top and the solid red
   CTA - which keeps the statutory function the most prominent thing on the page
   (art. 11a(1)) without turning the page into three competing designs. */
.choices {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.choice-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid var(--border);
    /* Only the statutory card wears a coloured top line. The other two keep the
       same 4px band in their own surface colour, so the three boxes stay exactly
       the same size and the grey stripe that used to look like a missing accent
       is gone. */
    border-top: 4px solid var(--surface);
    border-radius: var(--radius);
    padding: 1.5rem;
    text-decoration: none;
    color: inherit;
    background: var(--surface);
}

.choice-card:hover,
.choice-card:focus {
    border-color: var(--brand-primary-dark);
    text-decoration: none;
}

.choice-card:focus-visible {
    outline: 3px solid var(--brand-primary-dark);
    outline-offset: 2px;
}

.choice-card.card--primary {
    border-top-color: var(--cta-bg);
}

.choice-card.card--primary:hover,
.choice-card.card--primary:focus {
    border-color: var(--cta-bg);
}

.choice-card__badge {
    display: inline-block;
    margin-bottom: 0.6rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cta-bg);           /* 5.95:1 on white */
}

.choice-card__title {
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    line-height: 1.3;
    color: var(--text);
}

.choice-card__desc {
    margin: 0 0 1.5rem;
    font-size: 1rem;
    color: var(--text);
}

/* The whole card is the link; the button is only its visual affordance. */
.choice-card__cta {
    margin-top: auto;
    pointer-events: none;
    font-size: 0.85rem;
    padding: 0.65rem 1.1rem;
    min-height: 40px;
}

@media (min-width: 720px) {
    .choices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1.25rem;
    }

    /* Side by side the three cards have to read as one system, so the text
       baselines have to agree. Only the withdrawal card carries the badge, so
       the other two reserve the same amount of space above their title, and
       every title reserves two lines: titles and descriptions then start on the
       same line in all three cards, in every market, whatever the translation
       length. Stacked on mobile this would only add empty space, hence desktop
       only. */
    .choice-card:not(.card--primary) .choice-card__title {
        margin-top: calc(0.75rem * 1.6 + 0.6rem);
    }

    .choice-card__title {
        min-height: 2.6em;   /* two lines at line-height 1.3 */
    }
}

/* ---------- Landing: one thin trust row ----------
   Three short facts, no descriptions and no box: the page must not repeat in a
   second shape what the cards already say. */
.trust {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    color: var(--text-muted);
}

.trust__item {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.trust__mark {
    color: var(--brand-primary-dark);
    font-weight: 700;
}

/* ---------- Forms ---------- */
.field {
    margin-bottom: 1.25rem;
}

.field label {
    display: block;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.field input[type="text"],
.field input[type="email"] {
    width: 100%;
    font: inherit;
    padding: 0.65rem 0.75rem;
    min-height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text);
}

.field input:focus {
    outline: 2px solid var(--brand-primary-dark);
    outline-offset: 1px;
    border-color: var(--brand-primary-dark);
}

.field--error input {
    border-color: var(--error);
}

.hint {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.actions {
    margin-top: 1.5rem;
}

.actions--confirm {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.link-muted {
    color: var(--text-muted);
}

/* Autofill-safe honeypot: off-screen, NOT display:none (so autofill still sees
   it and Playwright can force-fill it). Hidden from assistive tech via
   aria-hidden in the markup. Do not change this technique - tests depend on it. */
.hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ---------- Alerts ---------- */
.alert {
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    margin: 1rem 0;
}

.alert p {
    margin: 0;
}

.alert--error {
    background: var(--error-bg);
    border: 1px solid var(--error);
    border-left: 4px solid var(--error);
}

.alert--warning {
    background: var(--warning-bg);
    border: 1px solid var(--warning);
    border-left: 4px solid var(--warning);
}

/* ---------- Recap / declaration ---------- */
.recap__list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem 1rem;
    margin: 0.5rem 0 1.5rem;
}

.recap__list dt {
    color: var(--text-muted);
}

.recap__list dd {
    margin: 0;
    font-weight: 700;
}

.declaration__text {
    border-left: 4px solid var(--brand-primary-dark);
    margin: 0;
    /* Right padding too: on a phone the text otherwise runs into the edge of the box. */
    padding: 0.75rem 1rem;
    background: var(--surface-alt);
}

.info-block {
    margin: 1.5rem 0;
}

/* Small label above the return code, so the bare number is never orphaned. */
.code-label {
    margin: 1rem 0 0.35rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}

/* Per-market facts under "how to send it": plain lines, no frames. The page
   already has enough borders. */
.facts {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
    font-size: 0.95rem;
}

/* The explanation of the three numbers belongs on the same line as the numbers,
   not as a fourth grey fragment under them. */
.facts .hint {
    display: inline;
}

.code-highlight code {
    display: inline-block;
    font-size: 1.3rem;
    font-weight: 700;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--brand-primary-dark);
    padding: 0.35rem 0.75rem;
}

.callout {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* Permanent pointer back to the statutory right from inside the return lane. */
.callout--withdrawal {
    border: 1px solid var(--brand-primary-dark);
    background: #f1faf8;
    padding: 0.9rem 1rem;
}

.callout--legal {
    border: 0;
    border-left: 4px solid var(--border-strong);
    background: var(--surface-alt);
    padding: 0.75rem 1rem;
    margin-top: 1.5rem;
}

/* ---------- Admin ---------- */
.table-scroll {
    overflow-x: auto;
}

.admin-table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    border: 1px solid var(--border);
    padding: 0.45rem 0.6rem;
    text-align: left;
    white-space: nowrap;
}

.admin-table thead th {
    background: var(--brand-primary-dark);
    color: #ffffff;
    font-weight: 700;
}

.admin-filters {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 1rem 0;
    align-items: center;
}

.chip {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-chip);
    text-decoration: none;
    color: var(--text);
    font-size: 0.9rem;
}

.chip:hover,
.chip:focus {
    border-color: var(--brand-primary-dark);
    text-decoration: none;
}

.chip--active {
    background: var(--brand-primary-dark);
    color: #ffffff;
    border-color: var(--brand-primary-dark);
}

.chip--active:hover,
.chip--active:focus {
    color: #ffffff;
}

.chip--export {
    margin-left: auto;
}

.status {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: var(--radius-chip);
    background: #eee;
    color: var(--text);
}

.status--matched,
.status--sent { background: #d7f0dd; }

.status--unmatched,
.status--failed { background: #fbdcdc; }

.status--manual_review,
.status--queued { background: #ffe9bf; }

/* ---------- Footer ---------- */
.site-footer {
    margin-top: 2.5rem;
    background: var(--footer-bg);
    color: var(--text-on-dark);
    padding-block: 1.25rem;
    font-size: 0.9375rem;
}

.site-footer a {
    color: #ffffff;
}

.site-footer__bar {
    display: grid;
    gap: 0.35rem;
}

.site-footer__brand {
    margin: 0 0 0.25rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    color: #ffffff;
}

.site-footer__note {
    margin: 0;
    color: var(--text-on-dark);
}

/*
  The one legitimate address of the portal, printed so a consumer can compare it
  with whatever link brought them here. It must therefore stay readable AS A
  DOMAIN: break-all used to split it mid-label on a phone ("return.b / agalio.cz"),
  which is precisely the shape a phishing address is mistaken for. It now breaks
  only where a whole word will not fit, so the wrap lands between the label and
  the address instead of inside it.
*/
.site-footer__note--domain {
    display: inline-block;
    word-break: normal;
    overflow-wrap: break-word;
}

/* Second permanent entry point to the withdrawal function (art. 11a(1)). */
.site-footer__cta {
    font-weight: 700;
    text-decoration: underline;
}

/* The support block inherits the dark footer surface. */
.site-footer .support {
    background: transparent;
    border: 1px solid #6d6d6d;
    border-top: 4px solid var(--topbar-bg);
    color: var(--text-on-dark);
    margin-bottom: 1.25rem;
}

.site-footer .support__list dt {
    color: #cfcfcf;
}

/* ---------- Accessibility ---------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--cta-bg);
    color: #ffffff;
    padding: 0.5rem 1rem;
    z-index: 10;
}

.skip-link:focus {
    left: 0;
}

/* ---------- Responsive ---------- */
@media (min-width: 600px) {
    body {
        font-size: 1.125rem;
    }

    .brand__logo {
        height: 38px;
    }
}

/* ---------- Complaint path (/reklamace) ----------
   Additions only: no brand token is changed here, so the withdrawal screens keep
   the exact contrast they were verified with. */

.subheading {
    margin: -0.5rem 0 0.75rem;
    color: var(--text-muted);
    font-weight: 700;
}

/* Textarea shares the text-input styling so the defect description does not read
   as a second-class field. */
.field textarea,
.field input[type="date"],
.field input[type="file"] {
    width: 100%;
    font: inherit;
    padding: 0.65rem 0.75rem;
    min-height: 44px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text);
}

.field textarea {
    resize: vertical;
    line-height: 1.5;
}

.field--error textarea {
    border-color: var(--error);
}

/* Radio groups. A fieldset needs its own spacing because legend + label rows do
   not inherit the .field label block styling. */
.field--choice {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    padding: 0.9rem 1rem 1rem;
    margin-bottom: 1.25rem;
}

.field--choice legend {
    font-weight: 700;
    padding: 0 0.35rem;
}

/* The options are answers, not labels of their own: bold (inherited from
   .field label) made every radio row shout as loudly as the question. */
.field--choice .choice {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    font-weight: 400;
    margin-bottom: 0.4rem;
    min-height: 32px;
}

.choice input[type="radio"] {
    margin-top: 0.35rem;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

.field__sub {
    display: block;
    font-weight: 700;
    margin-top: 1rem;
    margin-bottom: 0.35rem;
}

.recap {
    margin-bottom: 1.5rem;
}

/* ---------- Admin: two queues ---------- */
.admin-tabs {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0 0 1.25rem;
    border-bottom: 1px solid var(--border);
}

.tab {
    display: inline-block;
    padding: 0.5rem 0.9rem;
    text-decoration: none;
    color: var(--link);
    border-bottom: 3px solid transparent;
    font-weight: 700;
}

.tab--active {
    color: var(--text);
    border-bottom-color: var(--brand-primary-dark);
}

.tab__count {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0 0.4rem;
    border-radius: var(--radius-chip);
    background: var(--brand-primary-dark);
    color: #ffffff;
    font-size: 0.8rem;
}

.status--new { background: #ffe9bf; }
.status--acknowledged,
.status--in_progress { background: #dbeefa; }
.status--resolved { background: #d7f0dd; }
.status--rejected,
.status--cancelled { background: #fbdcdc; }

/* A missed statutory deadline has to be visible at a glance, but only where a
   deadline exists at all (AT and GR have none). */
.overdue {
    color: var(--error);
    font-weight: 700;
}

/* ---------- F2: verification, overview, details (docs/F2-SPEC.md 1.2) ----------
   Additions only; no brand token changes. Everything works without JavaScript. */

/* Visually hidden, still read by screen readers (the label of every quantity
   select in the overview table). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn--small {
    padding: 0.4rem 0.9rem;
    min-height: 36px;
    font-size: 0.9rem;
}

.actions .btn + .btn {
    margin-left: 0.5rem;
}

.code-input {
    max-width: 12rem;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
}

/* Stacked blocks of the main column (code form, "code did not arrive", other
   channels) keep a gap instead of their borders touching. */
.split__main > * + .panel,
.split__main > * + form {
    margin-top: 1.5rem;
}

.panel form {
    margin: 0.75rem 0;
}

.ident-notes {
    margin: 1.25rem 0;
    color: var(--text-muted);
}

.ident-notes li + li {
    margin-top: 0.35rem;
}

.session-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin: 0 0 1rem;
    color: var(--text-muted);
}

.session-bar__who {
    margin: 0;
}

/* The bar sits on the grey page background, where the transparent secondary
   button would fall below 4.5:1 (a11y.spec.ts); white like the cards. */
.session-bar__form .btn--secondary:not(:hover):not(:focus) {
    background: #ffffff;
}

.field select,
.qty-select {
    font: inherit;
    min-height: 44px;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    background: #ffffff;
    color: var(--text);
}

/* One order = one form. */
.order {
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 1rem;
    margin: 0 0 1.5rem;
}

.order--error {
    border-color: var(--error);
}

.order__title {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
}

.order__meta {
    margin: 0 0 0.75rem;
    color: var(--text-muted);
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.order__status {
    font-weight: 700;
}

.order-items {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 0.75rem;
}

.order-items th,
.order-items td {
    text-align: left;
    vertical-align: top;
    padding: 0.5rem 0.5rem 0.5rem 0;
    border-bottom: 1px solid var(--border);
}

.order-items thead th {
    font-size: 0.9rem;
    color: var(--text-muted);
}

.order-items__row--off {
    color: var(--text-muted);
}

/* Codes and prices stay on one line in the table; the item name column takes
   the notes. Only the card layout of a phone may break a long code. */
.order-items__sku {
    font-family: "Courier New", Courier, monospace;
    white-space: nowrap;
}

.order-items__price {
    white-space: nowrap;
}

/* From 600 px the columns have fixed widths, so every order card lines its
   columns up the same way: an item with a long note no longer squeezes the
   code against the quantity or wraps the header of the quantity column. The
   item name takes the rest; a code longer than its column wraps after a
   hyphen first and inside a word only when a part alone does not fit. */
@media (min-width: 600px) {
    .order-items {
        table-layout: fixed;
    }

    .order-items thead th:nth-child(2) {
        width: 12rem;
    }

    .order-items thead th:nth-child(3) {
        width: 6.5rem;
    }

    .order-items thead th:nth-child(4) {
        width: 9rem;
    }

    .order-items thead th:nth-child(n+5) {
        width: 8.5rem;
    }

    .order-items__sku {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* The two submit buttons of an order side by side, wrapping without an offset. */
.order .actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.order .actions .btn + .btn {
    margin: 0;
}

.order-items__note {
    margin: 0.35rem 0 0;
    font-size: 0.9rem;
    color: var(--text);
    border-left: 3px solid var(--warning);
    padding-left: 0.5rem;
}

.order-items__reason {
    font-size: 0.95rem;
}

/* Under about 600 px a row becomes a card: same HTML, CSS only, no horizontal
   scrolling at 390 px. */
@media (max-width: 599px) {
    .order-items thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .order-items,
    .order-items tbody,
    .order-items tr,
    .order-items td {
        display: block;
        width: 100%;
    }

    .order-items tr {
        border-bottom: 1px solid var(--border);
        padding: 0.5rem 0;
    }

    .order-items td {
        border: 0;
        padding: 0.2rem 0;
    }

    .order-items td[data-label]:not(.order-items__name)::before {
        content: attr(data-label) ": ";
        color: var(--text-muted);
    }

    .order-items__name {
        font-weight: 700;
    }

    .order-items__name .order-items__note {
        font-weight: 400;
    }

    .order-items__sku {
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .actions .btn + .btn {
        margin: 0.5rem 0 0;
    }

    .actions .btn {
        width: 100%;
    }
}

.items-summary {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.items-summary li {
    padding: 0.35rem 0;
    border-bottom: 1px solid var(--border);
}

.items-summary__qty {
    font-weight: 700;
    margin-right: 0.35rem;
}

.items-summary__sku {
    color: var(--text-muted);
}

.item-block {
    border: 1px solid var(--border);
    background: var(--surface);
    padding: 1rem;
    margin: 0 0 1.25rem;
}

.item-block__title {
    font-weight: 700;
    padding: 0 0.35rem;
}

.admin-filters label {
    margin-right: 0.75rem;
}