/* L.A. Travel customer site — the ONE sheet of LaTravelOnline.Site (CUSTOMER_SPEC §5).
   Tokens --cu-* only; never read or redefine the staff --lt-* (CU-21). MOBILE-FIRST: rules outside @media ARE the
   phone (no sideways scroll at 320 px); wider screens only ADD at 40rem / 64rem, never max-width (CU-23). Classes cu-
   (CU-24). ≤ 30 KB (§5.4 r7). Yellow is a BACKGROUND under navy text (≈ 7:1), never text; sky carries navy; --cu-muted
   on white only (≈ 4.1:1 on --cu-surface-2, under AA). */

/* latravel.gr's own face «Travel» (owner 23/09: «η γραμματοσειρά είναι δική μας»), self-hosted, woff2 only.
   Bold (700) is the 700 cut; the 900 cut only for 800+ (titles, prices) — owner 23/10: bold text looked «θολά». */
@font-face{font-family:Travel;src:url(fonts/travel-400.woff2) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:Travel;src:url(fonts/travel-700.woff2) format("woff2");font-weight:500 700;font-display:swap}
@font-face{font-family:Travel;src:url(fonts/travel-900.woff2) format("woff2");font-weight:800 900;font-display:swap}

:root {
    color-scheme: light;

    /* brand (latravel.gr theme CSS, CUSTOMER_ANALYSIS §4.1) */
    --cu-navy: #1C3068;
    --cu-heading: #1B3068;
    --cu-ink: #0E1836;
    --cu-yellow: #FBBA23;
    --cu-yellow-hover: #E7A304;
    --cu-sky: #59B3E9;
    --cu-muted: #757575;

    /* surfaces and lines */
    --cu-surface: #FFFFFF;
    --cu-surface-2: #F3F3F3;
    --cu-line: #E5E5E5;

    /* on navy (header, footer): author picks, white ≈ 12:1, muted ≈ 8.6:1 */
    --cu-on-navy: #FFFFFF;
    --cu-on-navy-muted: rgba(255, 255, 255, 0.8);
    --cu-on-navy-line: rgba(255, 255, 255, 0.28);

    /* states: always with the word, never colour alone (§5.2; author picks, AA on white) */
    --cu-ok: #1E7A4C;
    --cu-warn: #9A5B00;
    --cu-bad: #B42318;

    /* shape and space */
    /* square, as latravel.gr (owner 23/09) */
    --cu-radius: 0;
    --cu-radius-pill: 0;
    --cu-space-1: 4px;
    --cu-space-2: 8px;
    --cu-space-3: 12px;
    --cu-space-4: 16px;
    --cu-space-5: 24px;
    --cu-space-6: 32px;
    --cu-space-7: 48px;
    --cu-tap: 44px;                 /* §5.4 rule 4: every tap target ≥ 44 × 44 */

    /* layout (§5.1: content 72rem with a 16 px gutter, prose 40rem) */
    --cu-content-max: 72rem;
    --cu-prose-max: 40rem;
    --cu-gutter: 16px;
    --cu-header-h: 64px;

    /* type (CU-22): self-hosted (never a font CDN - no visitor IP to a third party); the system face only as fallback. */
    --cu-font: Travel, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", Arial, sans-serif;
    --cu-font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

/* == Base — the phone == */

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

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

/* A column, so a short page (404, error) still puts the footer at the bottom of the screen. Body 16 px / 1.5 at
   weight 400 — NOT latravel.gr's 15 px / 300, which is hard to read on a phone in sunlight (§5.3). */
body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--cu-surface);
    color: var(--cu-ink);
    font-family: var(--cu-font);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    overflow-wrap: break-word;
}

h1,
h2,
h3 {
    margin: 0 0 var(--cu-space-3);
    color: var(--cu-heading);
    line-height: 1.2;
}

/* h1 28 px / 800 (32 px from 40rem), h2 22 px / 700 (§5.3) — in rem, so a phone set to large text scales them. */
h1 {
    font-size: 1.75rem;
    font-weight: 800;
}

h2 {
    font-size: 1.375rem;
    font-weight: 700;
}

h3 {
    font-size: 1.125rem;
    font-weight: 700;
}

p {
    margin: 0 0 var(--cu-space-4);
}

a {
    color: var(--cu-navy);
    text-underline-offset: 0.15em;
}

img {
    max-width: 100%;
    height: auto;
}

/* §5.4 rule 8: visible focus — a 2 px navy ring plus a yellow halo. On the navy header and footer the ring
   vanishes into the ground and the halo is what shows; on white both do. */
:focus-visible {
    outline: 2px solid var(--cu-navy);
    outline-offset: 0;
    box-shadow: 0 0 0 5px var(--cu-yellow);
}

/* == Skip link, main, page frame == */

.cu-skip {
    position: absolute;
    left: var(--cu-space-2);
    top: calc(-1 * var(--cu-space-7) - var(--cu-space-7));
    z-index: 100;
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-tap);
    padding: 0 var(--cu-space-4);
    border-radius: var(--cu-radius);
    background: var(--cu-yellow);
    color: var(--cu-navy);
    font-weight: 700;
    text-decoration: none;
}

.cu-skip:focus {
    top: var(--cu-space-2);
}

.cu-main {
    flex: 1 0 auto;
}

/* The jump targets (<main>, the contact block) take focus so the keyboard follows the view; a ring around a whole
   region would only look like a bug. */
.cu-main:focus,
.cu-contact:focus {
    outline: none;
    box-shadow: none;
}

.cu-page {
    width: 100%;
    max-width: var(--cu-content-max);
    margin: 0 auto;
    padding: var(--cu-space-5) var(--cu-gutter) var(--cu-space-7);
}

.cu-page__head {
    margin-bottom: var(--cu-space-5);
}

.cu-page__title {
    margin-bottom: var(--cu-space-2);
    text-transform: uppercase;
}

.cu-page__lead {
    margin: 0;
    font-size: 1.125rem;
}

.cu-prose p {
    max-width: var(--cu-prose-max);
}

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

.cu-code {
    font-family: var(--cu-font-mono);
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

/* == Buttons == */

.cu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--cu-tap);
    padding: 0 var(--cu-space-5);
    border: 0;
    border-radius: var(--cu-radius-pill);
    font: inherit;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Yellow is a background with navy text, never the reverse (§5.2). */
.cu-btn--primary {
    background: var(--cu-yellow);
    color: var(--cu-navy);
}

.cu-btn--primary:hover {
    background: var(--cu-yellow-hover);
}

/* == Header (CU-20): navy, 64 px; sticky from 64rem only == */

.cu-header {
    background: var(--cu-navy);
    color: var(--cu-on-navy);
}

.cu-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--cu-space-3);
    max-width: var(--cu-content-max);
    height: var(--cu-header-h);
    margin: 0 auto;
    padding: 0 var(--cu-gutter);
}

.cu-brand {
    display: inline-flex;
    align-items: center;
    min-width: var(--cu-tap);
    min-height: var(--cu-tap);
    border-radius: var(--cu-radius);
}

/* The mark is 80 × 122: at 52 px tall it is 34 px wide and keeps the L.A.TRAVEL wordmark legible. */
.cu-brand__mark {
    display: block;
    width: auto;
    height: 52px;
}

.cu-nav {
    display: flex;
    align-items: center;
    gap: var(--cu-space-2);
}

.cu-nav__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-tap);
    padding: 0 var(--cu-space-3);
    border-radius: var(--cu-radius);
    color: var(--cu-on-navy);
    font-weight: 600;
    text-decoration: none;
}

.cu-nav__link:hover {
    color: var(--cu-yellow);
}

/* Phone: «Κλήση» (yellow) instead of «Επικοινωνία» — same target, the one a thumb wants. */
.cu-nav__link--wide {
    display: none;
}

.cu-nav__call {
    padding: 0 var(--cu-space-4);
}

/* TEMPORARY (owner, 23/09/2026): the way into the staff app while the site is being built, removed before it goes
   public — CUSTOMER_SPEC §11 item 11. Quieter than the customer's own links and off the phone header, which already
   carries the brand, «Εκδρομές» and «Κλήση». */
.cu-nav__staff {
    display: none;
    color: var(--cu-on-navy-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

/* == Notice card — the call-us card (CallUsCard), the catalogue's empty / no-match states == */

.cu-notice {
    max-width: var(--cu-prose-max);
    padding: var(--cu-space-5) var(--cu-space-4);
    border: 1px solid var(--cu-line);
    border-left: 4px solid var(--cu-yellow);
    border-radius: var(--cu-radius);
    background: var(--cu-surface-2);
}

.cu-notice__title {
    font-size: 1.25rem;
}

/* == Footer (CU-20): offices, then the legal furniture == */

.cu-footer {
    background: var(--cu-navy);
    color: var(--cu-on-navy);
}

.cu-footer__inner {
    display: grid;
    gap: var(--cu-space-6);
    max-width: var(--cu-content-max);
    margin: 0 auto;
    padding: var(--cu-space-6) var(--cu-gutter) calc(var(--cu-space-6) + env(safe-area-inset-bottom));
}

.cu-contact__title {
    color: var(--cu-on-navy);
    margin-bottom: var(--cu-space-4);
}

.cu-contact__offices {
    display: grid;
    gap: var(--cu-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cu-office__city {
    margin-bottom: var(--cu-space-1);
    color: var(--cu-yellow);
}

.cu-office__address {
    margin: 0 0 var(--cu-space-2);
    color: var(--cu-on-navy-muted);
}

.cu-office__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cu-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Every number is its own 44 px pill: a thumb on a phone hits one number, not the one next to it. */
.cu-office__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-tap);
    padding: 0 var(--cu-space-3);
    border: 1px solid var(--cu-on-navy-line);
    border-radius: var(--cu-radius-pill);
    color: var(--cu-on-navy);
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.cu-office__link:hover {
    border-color: var(--cu-yellow);
    color: var(--cu-yellow);
}

.cu-office__link--app {
    font-weight: 600;
}

.cu-contact__hours {
    margin: var(--cu-space-4) 0 0;
    color: var(--cu-on-navy-muted);
}

.cu-footer__legal {
    display: grid;
    gap: var(--cu-space-3);
    padding-top: var(--cu-space-5);
    border-top: 1px solid var(--cu-on-navy-line);
    color: var(--cu-on-navy-muted);
    font-size: 0.875rem;
}

.cu-footer__legal p {
    margin: 0;
}

/* Interamerican on the sky strip, as latravel.gr carries it (analysis §4.1): navy on sky ≈ 5:1. */
.cu-footer__insurance {
    justify-self: start;
    padding: var(--cu-space-2) var(--cu-space-3);
    border-radius: var(--cu-radius);
    background: var(--cu-sky);
    color: var(--cu-navy);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* The ΕΣΠΑ notice on white, as the co-funding banners are printed; replaced by the official graphic when it comes. */
.cu-espa {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--cu-space-1) var(--cu-space-3);
    justify-self: start;
    padding: var(--cu-space-3);
    border-radius: var(--cu-radius);
    background: var(--cu-surface);
    color: var(--cu-navy);
}

.cu-espa__fund {
    font-weight: 800;
}

.cu-espa__programme {
    font-weight: 700;
}

/* == The framework's error bar (blazor.web.js shows it by setting display itself) == */

.cu-error-ui {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding: var(--cu-space-3) var(--cu-space-7) calc(var(--cu-space-3) + env(safe-area-inset-bottom)) var(--cu-gutter);
    background: var(--cu-yellow);
    color: var(--cu-navy);
    font-weight: 600;
}

.cu-error-ui .dismiss {
    position: absolute;
    top: 0;
    right: 0;
    min-width: var(--cu-tap);
    min-height: var(--cu-tap);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1.5rem;
    cursor: pointer;
}

/* == From 40rem — large phones in landscape, tablets == */

@media (min-width: 40rem) {
    h1 {
        font-size: 2rem;
    }

    .cu-page {
        padding-top: var(--cu-space-6);
    }

    .cu-nav__link--wide {
        display: inline-flex;
    }

    .cu-nav__call {
        display: none;
    }

    .cu-nav__staff {
        display: inline-flex;
    }

    .cu-notice {
        padding: var(--cu-space-6);
    }

    .cu-contact__offices {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* == From 64rem — desktop == */

@media (min-width: 64rem) {
    .cu-header {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .cu-contact__offices {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* == Catalogue (CU-10) and trip page (CU-11). Phone first; the two @media blocks at the end of this section only ADD. Caps (skill «Design for the big case»): every name wraps inside its box (overflow-wrap: anywhere) or is clamped with the full text in title; lists longer than a screen sit behind a native <details> in the markup. == */

/* Visually hidden, still read: the card CTA's trip name, the icon words on the card. */
.cu-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* call-us card: the phones where the visitor is looking */

.cu-call__lead {
    font-weight: 700;
}

.cu-call__offices {
    display: grid;
    gap: var(--cu-space-2);
    margin: 0 0 var(--cu-space-4);
    padding: 0;
    list-style: none;
}

/* One row per office: «Λάρισα  [2410 555689]» fits a 320 px phone; a long city name wraps the pill under it. */
.cu-call__office {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cu-space-1) var(--cu-space-3);
}

.cu-call__city {
    min-width: 7.5rem;
    color: var(--cu-heading);
    font-weight: 700;
}

/* Navy on white inside the grey card; a 44 px pill per number, as in the footer. */
.cu-call__phone {
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-tap);
    padding: 0 var(--cu-space-4);
    border: 1px solid var(--cu-navy);
    border-radius: var(--cu-radius-pill);
    background: var(--cu-surface);
    color: var(--cu-navy);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    white-space: nowrap;
}

.cu-call__phone:hover {
    background: var(--cu-yellow);
}

.cu-call__more {
    margin: 0;
}

.cu-call__more a,
.cu-back a,
.cu-filter__clear,
.cu-hotel__link,
.cu-hcard__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--cu-tap);
    font-weight: 600;
}

/* filter row (a GET form) */

.cu-filter {
    display: grid;
    gap: var(--cu-space-3);
    margin-bottom: var(--cu-space-5);
    padding: var(--cu-space-4);
    border-radius: var(--cu-radius);
    background: var(--cu-surface-2);
}

.cu-field {
    display: grid;
    gap: var(--cu-space-1);
    min-width: 0;
}

.cu-field__label {
    font-weight: 600;
}

/* The edge is --cu-muted, not --cu-line: a control's border needs 3:1 (WCAG 1.4.11); #E5E5E5 on white is ~1.2:1. */
.cu-select,
.cu-input {
    width: 100%;
    min-height: var(--cu-tap);
    padding: 0 var(--cu-space-3);
    border: 1px solid var(--cu-muted);
    border-radius: var(--cu-radius);
    background: var(--cu-surface);
    color: var(--cu-ink);
    font: inherit;
}

.cu-filter__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cu-space-3);
}

.cu-results {
    margin: 0 0 var(--cu-space-3);
    color: var(--cu-muted);
}

/* cards */

.cu-cards {
    display: grid;
    gap: var(--cu-space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cu-cards__item {
    min-width: 0;
}

/* position: relative is the frame the CTA's ::after stretches over: the whole card is one tap target. */
.cu-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--cu-line);
    border-radius: var(--cu-radius);
    background: var(--cu-surface);
    overflow: hidden;
}

.cu-card:hover {
    border-color: var(--cu-navy);
}

/* The navy block that stands in for a photo (CU-10); no watermark (owner 23/09: «θαμπος»). */
.cu-card__top {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 7.5rem;
    padding: var(--cu-space-4);
    background: var(--cu-navy);
    color: var(--cu-on-navy);
    overflow: hidden;
}

.cu-card__category {
    position: relative;
    margin: 0 0 var(--cu-space-1);
    color: var(--cu-on-navy-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Three lines at most; the full name is the CTA's title and its hidden text. */
.cu-card__title {
    position: relative;
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: var(--cu-on-navy);
    font-size: 1.25rem;
    font-weight: 800;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
}

.cu-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--cu-space-3);
    padding: var(--cu-space-4);
}

.cu-card__from {
    margin: 0;
    font-size: 0.9375rem;
    overflow-wrap: anywhere;
}

.cu-card__cta {
    margin-top: auto;
}

.cu-card__cta::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* chips, badges, transport tiles */

.cu-chips,
.cu-transport {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cu-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Ink, never --cu-muted, on the grey chip (muted falls under AA on --cu-surface-2). */
.cu-chip {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cu-space-1) var(--cu-space-2);
    padding: var(--cu-space-1) var(--cu-space-3);
    border-radius: var(--cu-radius-pill);
    background: var(--cu-surface-2);
    color: var(--cu-ink);
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
}

.cu-chip--more {
    font-weight: 600;
}

.cu-badge {
    display: inline-block;
    padding: 0 var(--cu-space-2);
    border-radius: var(--cu-radius-pill);
    background: var(--cu-navy);
    color: var(--cu-on-navy);
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}

.cu-transport {
    column-gap: var(--cu-space-4);
}

.cu-transport__item {
    display: inline-flex;
    align-items: center;
    gap: var(--cu-space-2);
}

/* Navy icon on sky, never white on sky (§5.2). */
.cu-transport__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--cu-sky);
    color: var(--cu-navy);
}

.cu-transport__icon svg {
    width: 20px;
    height: 20px;
}

.cu-transport__label {
    font-weight: 600;
}

/* trip page */

.cu-back {
    margin: 0 0 var(--cu-space-2);
}

.cu-trip__head {
    margin-bottom: var(--cu-space-5);
}

.cu-trip__category {
    margin: 0 0 var(--cu-space-1);
    color: var(--cu-muted);
    font-weight: 600;
}

.cu-trip__title {
    margin-bottom: var(--cu-space-3);
    overflow-wrap: anywhere;
}

.cu-trip__layout {
    display: grid;
    gap: var(--cu-space-6);
}

.cu-trip__main,
.cu-trip__aside {
    min-width: 0;
}

.cu-section + .cu-section {
    margin-top: var(--cu-space-6);
}

.cu-dates {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--cu-line);
}

.cu-date {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cu-space-1) var(--cu-space-2);
    padding: var(--cu-space-3) 0;
    border-bottom: 1px solid var(--cu-line);
    font-variant-numeric: tabular-nums;
}

.cu-date__range {
    font-weight: 600;
}

/* Three columns fit a 320 px phone: the name column wraps, time and surcharge never do. */
.cu-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.cu-table th,
.cu-table td {
    padding: var(--cu-space-3) var(--cu-space-2);
    border-bottom: 1px solid var(--cu-line);
    text-align: left;
    vertical-align: top;
}

.cu-table th:first-child {
    padding-left: 0;
}

.cu-table td:last-child,
.cu-table th:last-child {
    padding-right: 0;
}

.cu-table thead th {
    color: var(--cu-muted);
    font-size: 0.875rem;
    font-weight: 600;
}

.cu-table tbody th {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.cu-table .cu-num {
    text-align: right;
    white-space: nowrap;
}

.cu-point__details {
    display: -webkit-box;
    overflow: hidden;
    color: var(--cu-muted);
    font-size: 0.875rem;
    font-weight: 400;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cu-note {
    margin: var(--cu-space-3) 0 0;
    color: var(--cu-muted);
    font-size: 0.875rem;
}

.cu-hotels {
    display: grid;
    gap: var(--cu-space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cu-hotel {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cu-space-1) var(--cu-space-3);
    padding: var(--cu-space-2) var(--cu-space-3);
    border: 1px solid var(--cu-line);
    border-radius: var(--cu-radius);
}

.cu-hotel__name {
    display: -webkit-box;
    flex: 1 1 10rem;
    min-width: 0;
    overflow: hidden;
    font-weight: 600;
    overflow-wrap: anywhere;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.cu-useful {
    margin: 0;
    padding-left: var(--cu-space-5);
}

.cu-more {
    margin-top: var(--cu-space-2);
}

.cu-more > summary {
    display: flex;
    align-items: center;
    min-height: var(--cu-tap);
    color: var(--cu-navy);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.cu-more > summary::-webkit-details-marker {
    display: none;
}

.cu-more > summary::before {
    content: "+";
    width: 1.25em;
}

.cu-more[open] > summary::before {
    content: "\2212";
}

@media (min-width: 40rem) {
    .cu-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
        align-items: end;
    }

    .cu-cards,
    .cu-hotels {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Desktop: the sections on the left, the booking slot beside them and in view while the visitor reads. */
@media (min-width: 64rem) {
    .cu-cards {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .cu-trip__layout {
        grid-template-columns: minmax(0, 1fr) 22rem;
        grid-template-areas: "main aside";
        align-items: start;
    }

    .cu-trip__main {
        grid-area: main;
    }

    .cu-trip__aside {
        grid-area: aside;
        position: sticky;
        top: calc(var(--cu-header-h) + var(--cu-space-4));
    }
}

/* == Booking steps (CU-12…CU-18, F2 F4 F6 F11 F14 F18) — one line per rule, to stay within §5.4's 30 KB. == */
:root { --cu-tint: #EAF0FA; }
textarea.cu-input { min-height: 6rem; padding: var(--cu-space-2) var(--cu-space-3); resize: vertical; }
[aria-invalid="true"] { border-color: var(--cu-bad); }
.cu-form, .cu-trav, .cu-q { display: grid; gap: var(--cu-space-4); min-width: 0; margin: 0; }
.cu-fs, .cu-dob { min-width: 0; margin: 0; padding: 0; border: 0; }
.cu-opts, .cu-sugg, .cu-hlist, .cu-facts { display: grid; gap: var(--cu-space-2); margin: 0 0 var(--cu-space-3); padding: 0; list-style: none; }
/* Radio/tick as a 44 px card (§5.4 rule 4). */
.cu-opt { display: flex; gap: var(--cu-space-2); align-items: flex-start; min-height: var(--cu-tap); padding: 10px var(--cu-space-3); border: 1px solid var(--cu-muted); border-radius: var(--cu-radius); background: var(--cu-surface); cursor: pointer; }
.cu-opt input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--cu-navy); }
.cu-opt:has(input:checked) { border-color: var(--cu-navy); background: var(--cu-tint); }
.cu-opt__main, .cu-opt__sub { display: block; }
.cu-opt__sub, .cu-err, .cu-bar__sub { font-size: 0.875rem; }
.cu-row { display: grid; gap: var(--cu-space-3); }
.cu-row.cu-row--dob { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cu-space-2); }
.cu-actions { display: flex; flex-wrap: wrap; gap: var(--cu-space-3); }
.cu-btn--ghost { border: 1px solid var(--cu-navy); background: var(--cu-surface); color: var(--cu-navy); }
.cu-js [data-cu-refresh] { display: none; } /* site.js presses it itself */
.cu-errs { padding: var(--cu-space-3) var(--cu-space-4); border: 1px solid var(--cu-bad); border-left-width: 4px; border-radius: var(--cu-radius); color: var(--cu-bad); font-weight: 600; }
.cu-errs ul { margin: 0; padding-left: var(--cu-space-5); }
.cu-errs p { margin: 0 0 var(--cu-space-2); }
.cu-notice--above { margin-bottom: var(--cu-space-4); } /* F19 (b) */

.cu-err { margin: var(--cu-space-1) 0 0; color: var(--cu-bad); font-weight: 600; }
.cu-ok { color: var(--cu-ok); font-weight: 600; }
.cu-warn { color: var(--cu-warn); font-weight: 600; }
/* --cu-muted is under AA on --cu-surface-2. */
.cu-notice .cu-note { color: var(--cu-ink); }
/* F18 + S4: a collapsed hotel is ONE row, its <summary>, ≤ 72 px at 375 px: tinted, navy name on one line, yellow stars on
   navy (≈ 7:1), «από» as the price tag, chevron; S5: the thumbnail in a fixed 64×48 box that never stretches the row. */
.cu-hcard { border: 1px solid var(--cu-line); border-radius: var(--cu-radius); overflow: hidden; }
.cu-hcard__row { display: flex; align-items: center; gap: var(--cu-space-3); min-height: var(--cu-tap); padding: var(--cu-space-2) var(--cu-space-3); background: var(--cu-tint); cursor: pointer; list-style: none; }
.cu-hcard[open] > .cu-hcard__row { border-bottom: 3px solid var(--cu-yellow); }
.cu-hcard__img { flex: none; width: 64px; height: 48px; border-radius: 6px; object-fit: cover; background: var(--cu-line); color: transparent; }
.cu-hcard__id { display: grid; flex: 1; gap: 2px; min-width: 0; }
.cu-hcard__name, .cu-hcard__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cu-hcard__name { color: var(--cu-navy); font-size: 1.0625rem; font-weight: 800; line-height: 1.3; }
.cu-hcard__meta { display: flex; align-items: center; gap: var(--cu-space-2); font-size: 0.875rem; }
.cu-hcard__meta .cu-price { font-size: 1rem; line-height: 1.4; }
.cu-hcard__meta > :last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.cu-hcard__body { display: grid; gap: var(--cu-space-3); padding: var(--cu-space-3) var(--cu-space-4) var(--cu-space-4); }
/* S1: whole room names (HotelCard.razor) */
.cu-hcard__table tbody th { overflow-wrap: normal; }
.cu-hcard__avail { display: block; font-size: 0.875rem; }
.cu-chev { flex: none; width: 10px; height: 10px; margin: 0 4px 4px; border: solid var(--cu-navy); border-width: 0 2px 2px 0; transform: rotate(45deg); }
[open] > summary .cu-chev { margin: 4px 4px 0; transform: rotate(-135deg); }
.cu-hcard__row::-webkit-details-marker, .cu-bar__more > summary::-webkit-details-marker { display: none; }
.cu-stars { padding: 0 var(--cu-space-2); border-radius: var(--cu-radius-pill); background: var(--cu-navy); color: var(--cu-yellow); letter-spacing: 0.1em; }
.cu-hcard p, .cu-q p { margin: 0; }
.cu-price, .cu-ref { display: inline-block; padding: 0 var(--cu-space-2); border-radius: var(--cu-radius); background: var(--cu-yellow); color: var(--cu-navy); font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.cu-ref { font-size: 1.5rem; }
.cu-sugg__item { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cu-space-2) var(--cu-space-3); padding-top: var(--cu-space-2); border-top: 1px solid var(--cu-line); }
.cu-sugg__label { flex: 1 1 12rem; min-width: 0; }
/* F11 summary; bottom bar = price + one button (§5.4 rule 3). */
.cu-sum__total > * { font-size: 1.125rem; font-weight: 800; }
.cu-sum__estimate, .cu-sum__msg { font-weight: 600; }
.cu-has-bar { padding-bottom: 6rem; }
.cu-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cu-space-3); padding: var(--cu-space-2) var(--cu-gutter) calc(var(--cu-space-2) + env(safe-area-inset-bottom)); border-top: 1px solid var(--cu-line); background: var(--cu-surface); box-shadow: 0 -2px 8px rgba(14, 24, 54, 0.12); }
.cu-bar__price { display: grid; margin: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* S3: the summary never scrolls sideways at 320 px (texts wrap anywhere, the due date is its own line); the phone bar's
   total expands (details, no JS) to the itemised lines, and the button drops under them while open. */
.cu-sum__table th { overflow-wrap: anywhere; }
.cu-sum__due { display: block; font-size: 0.875rem; font-weight: 400; }
.cu-bar__more, .cu-bar__more + .cu-btn { flex: 1 1 0; }
.cu-bar__more { min-width: max-content; }
.cu-bar__more + .cu-btn { padding: 0 var(--cu-space-4); }
.cu-bar__more[open], .cu-bar__more[open] + .cu-btn { flex-basis: 100%; min-width: 0; }
.cu-bar__more > summary { display: flex; align-items: center; gap: var(--cu-space-2); min-height: var(--cu-tap); cursor: pointer; list-style: none; }
.cu-bar__lines { max-height: 55vh; overflow: auto; padding-right: var(--cu-space-2); }
/* F14 variant Γ; a floated legend sits inside the padding. */
.cu-q, .cu-trav { padding: var(--cu-space-4); border: 1px solid var(--cu-line); border-radius: var(--cu-radius); }
.cu-q { background: var(--cu-surface-2); }
.cu-q__title, .cu-trav__title { float: left; width: 100%; padding: 0; color: var(--cu-heading); font-size: 1.125rem; font-weight: 700; }
.cu-hint { margin: 0; padding: var(--cu-space-3) var(--cu-space-4); border-radius: var(--cu-radius); background: var(--cu-tint); font-weight: 600; }
.cu-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cu-space-1) var(--cu-space-3); }
/* Reveals without script; no :has = every field shows. */
@supports selector(:has(*)) {
    form:has(#cu-q1-yes:checked) .cu-legs, form:has(#cu-q1-yes:checked) .cu-if-q1no, form:has(#cu-q2-no:checked) .cu-disc, form:has(#cu-q2-no:checked) .cu-dob--opt, form:not(:has(#cu-q3-now:checked)) .cu-docs, .cu-legs:not(:has(.cu-legs__tick:checked)) .cu-legs__fields, .cu-trav:not(:has([data-dob]:checked)) .cu-dob--opt { display: none; }
}
@media (min-width: 40rem) {
    .cu-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
    .cu-bar { display: none; }
    .cu-has-bar { padding-bottom: 0; }
    .cu-trip__aside:has(.cu-bcard) { position: static; }
}