/* =============================================================================
   e-Tir — professional theme (design system)
   Loaded after the legacy CDN stylesheets so it elevates the whole app.
   New chrome (header, footer, hero, cards, sections) uses the `et-` prefix so
   it never collides with the legacy Bootstrap-4 markup the CDN JS depends on.
   ========================================================================== */

:root {
    /* Palette aligned to the legacy e-Tir brand: deep petrol-blue #134a6d
       (legacy .blue-text) + signature golden yellow #ffcc00. */
    --et-navy: #134a6d;
    --et-navy-700: #0f3c58;
    --et-navy-600: #196290;
    --et-blue: #196290;
    --et-blue-600: #1d76ac;
    --et-azure: #2b8fc7;
    --et-amber: #ffcc00;
    --et-amber-600: #fdc200;
    --et-ink: #23282d;
    --et-body: #45525c;
    --et-muted: #7c8a95;
    --et-line: #e2e9ef;
    --et-bg: #ffffff;
    --et-bg-soft: #f5f8fa;
    --et-bg-softer: #eaf1f6;
    --et-white: #ffffff;
    --et-success: #2fa36b;
    --et-danger: #e5484d;

    --et-radius: 14px;
    --et-radius-sm: 10px;
    --et-radius-pill: 999px;
    --et-shadow-sm: 0 2px 8px rgba(19, 74, 109, .06);
    --et-shadow: 0 10px 30px rgba(19, 74, 109, .10);
    --et-shadow-lg: 0 24px 60px rgba(19, 74, 109, .16);
    /* Widened from 1200px. On the account pages the content track is the container
       minus its padding, the 260px sidebar and the gap, so 1400 gives 1074px —
       enough for the bookings table (1043px) to stop scrolling sideways. Below
       this width the 20px padding is the gutter, exactly as before. */
    --et-container: 1400px;
    --et-font: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --et-display: 'Poppins', var(--et-font);
    --et-trans: .22s cubic-bezier(.4, 0, .2, 1);
}

/* ---- base refinements (light touch on the whole app) --------------------- */
body {
    font-family: var(--et-font);
    color: var(--et-body);
    background: var(--et-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.et-scope h1, .et-scope h2, .et-scope h3, .et-scope h4, .et-scope h5 {
    font-family: var(--et-display);
    color: var(--et-ink);
    font-weight: 700;
    letter-spacing: -.01em;
}
.et-scope a { color: var(--et-blue); text-decoration: none; transition: color var(--et-trans); }
.et-scope a:hover { color: var(--et-navy); }

.et-container { max-width: var(--et-container); margin: 0 auto; padding: 0 20px; }
.et-section { padding: 84px 0; }
.et-section--soft { background: var(--et-bg-soft); }
.et-section--navy { background: var(--et-navy); color: #cdd8ea; }
.et-eyebrow {
    display: inline-block; font-family: var(--et-display); font-weight: 700;
    font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--et-blue); margin-bottom: 12px;
}
.et-section--navy .et-eyebrow { color: var(--et-amber); }
.et-title { font-family: var(--et-display); font-weight: 800; color: var(--et-ink); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.15; margin: 0 0 14px; }
.et-section--navy .et-title { color: #fff; }
.et-lead { font-size: 1.08rem; color: var(--et-muted); max-width: 640px; margin: 0 auto; }
.et-text-center { text-align: center; }

/* ---- buttons ------------------------------------------------------------- */
.et-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    font-family: var(--et-display); font-weight: 600; font-size: .96rem;
    padding: 12px 26px; border-radius: var(--et-radius-pill); border: 2px solid transparent;
    cursor: pointer; transition: all var(--et-trans); text-decoration: none; line-height: 1;
}
.et-btn:focus-visible { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 2px; }
.et-btn--primary { background: var(--et-blue); color: #fff; box-shadow: 0 8px 20px rgba(25, 98, 144, .30); }
.et-btn--primary:hover { background: var(--et-navy-700); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(19, 74, 109, .3); }
.et-btn--accent { background: var(--et-amber); color: var(--et-navy); box-shadow: 0 8px 20px rgba(253, 194, 0, .40); }
.et-btn--accent:hover { background: var(--et-amber-600); color: var(--et-navy); transform: translateY(-2px); }
.et-btn--ghost { background: transparent; color: var(--et-navy); border-color: var(--et-line); }
.et-btn--ghost:hover { border-color: var(--et-blue); color: var(--et-blue); }
.et-btn--light { background: #fff; color: var(--et-navy); }
.et-btn--light:hover { background: var(--et-bg-softer); color: var(--et-navy); transform: translateY(-2px); }
/* The button that carries out a deletion. Only ever the confirm in a warning
   dialog — the control that opens that dialog stays quiet, because a red button
   in a table row invites a click it should not. */
.et-btn--danger { background: var(--et-danger, #c0393d); color: #fff; box-shadow: 0 8px 20px rgba(192, 57, 61, .30); }
.et-btn--danger:hover { background: #a52f33; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(192, 57, 61, .3); }
.et-btn--danger:focus-visible { outline-color: rgba(192, 57, 61, .45); }
.et-scope a.et-btn--danger, .et-scope a.et-btn--danger:hover { color: #fff; }
/* Anchor buttons: <a class="et-btn"> inside .et-scope must keep the variant's
   text colour — otherwise the generic `.et-scope a { color: blue }` (higher
   specificity) wins and e.g. et-btn--primary renders blue-on-blue (invisible). */
.et-scope a.et-btn--primary, .et-scope a.et-btn--primary:hover { color: #fff; }
.et-scope a.et-btn--accent, .et-scope a.et-btn--accent:hover,
.et-scope a.et-btn--light, .et-scope a.et-btn--ghost { color: var(--et-navy); }
.et-scope a.et-btn--ghost:hover { color: var(--et-blue); }
.et-btn--lg { padding: 15px 34px; font-size: 1.02rem; }
.et-btn--sm { padding: 9px 18px; font-size: .88rem; }
.et-btn--block { display: flex; width: 100%; }

/* ---- header / navbar ----------------------------------------------------- */
.et-header { position: sticky; top: 0; z-index: 1030; background: rgba(255, 255, 255, .92); backdrop-filter: saturate(150%) blur(10px); border-bottom: 1px solid var(--et-line); }
/* While a dialog is open the header stayed put in the document and went off
   screen: Bootstrap locks the page with `overflow: hidden` on the body, and a
   `position: sticky` element with no scroll container left to stick to simply
   sits wherever it falls — which, on a list scrolled halfway down, is above the
   viewport. Pinned for the duration, it stays where it was.

   Over the backdrop (1050) and under the dialog (1055): the bar remains readable
   and usable — following a link from it leaves the page anyway, which closes the
   dialog — while the dialog keeps its place on top and its own focus. */
body.modal-open .et-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1052; }
/* The announcement bar scrolls away with the page; keeping it under a pinned
   header would leave a strip of it showing through. */
body.modal-open .et-announce { visibility: hidden; }
.et-topbar { background: var(--et-navy); color: #b9c6dc; font-size: .82rem; }
.et-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 38px; }
.et-topbar a { color: #cdd8ea; }
.et-topbar a:hover { color: #fff; }
.et-topbar__contact { display: flex; gap: 22px; align-items: center; }
.et-topbar__contact span { display: inline-flex; align-items: center; gap: 7px; }
.et-nav { display: flex; align-items: center; justify-content: space-between; height: 74px; gap: 20px; }
.et-brand { display: flex; align-items: center; gap: 10px; }
.et-brand img { height: 38px; width: auto; display: block; }
.et-nav__links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.et-nav__links > li > a {
    font-family: var(--et-display); font-weight: 600; font-size: .95rem; color: var(--et-navy);
    padding: 10px 15px; border-radius: var(--et-radius-sm); display: inline-block; transition: all var(--et-trans);
}
.et-nav__links > li > a:hover, .et-nav__links > li > a.is-active { background: var(--et-bg-softer); color: var(--et-blue); }
.et-nav__actions { display: flex; align-items: center; gap: 10px; }

/* language switcher */
.et-lang { position: relative; }
.et-lang__toggle { display: inline-flex; align-items: center; gap: 8px; background: var(--et-bg-soft); border: 1px solid var(--et-line); border-radius: var(--et-radius-pill); padding: 7px 12px; cursor: pointer; font-family: var(--et-display); font-weight: 600; font-size: .85rem; color: var(--et-navy); transition: all var(--et-trans); }
.et-lang__toggle:hover { border-color: var(--et-blue); }
.et-lang__toggle img { width: 22px; height: 15px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }
.et-lang__menu { position: absolute; right: 0; top: calc(100% + 8px); background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius-sm); box-shadow: var(--et-shadow); min-width: 172px; padding: 6px; opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all var(--et-trans); z-index: 20; }
.et-lang.is-open .et-lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.et-lang__menu a { display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 8px; color: var(--et-navy); font-weight: 600; font-size: .9rem; }
.et-lang__menu a:hover { background: var(--et-bg-soft); }
.et-lang__menu a.is-active { background: var(--et-bg-softer); }
.et-lang__menu img { width: 24px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05); }

.et-iconbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--et-bg-soft); color: var(--et-navy); border: 1px solid var(--et-line); transition: all var(--et-trans); }
.et-iconbtn:hover { background: var(--et-blue); color: #fff; border-color: var(--et-blue); }
.et-iconbtn .et-badge { position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--et-amber); color: var(--et-navy); font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }

.et-burger { display: none; width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--et-line); background: #fff; cursor: pointer; align-items: center; justify-content: center; }
.et-burger span, .et-burger span::before, .et-burger span::after { content: ''; display: block; width: 20px; height: 2px; background: var(--et-navy); border-radius: 2px; position: relative; transition: all var(--et-trans); }
.et-burger span::before { position: absolute; top: -6px; }
.et-burger span::after { position: absolute; top: 6px; }

.et-user { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 6px; border-radius: var(--et-radius-pill); background: var(--et-bg-soft); border: 1px solid var(--et-line); cursor: pointer; }
.et-user__avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--et-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--et-display); font-weight: 700; font-size: .82rem; }
.et-user__name { font-family: var(--et-display); font-weight: 600; font-size: .88rem; color: var(--et-navy); max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- hero ---------------------------------------------------------------- */
.et-hero { position: relative; background: radial-gradient(1200px 500px at 80% -10%, rgba(43, 143, 199, .22), transparent 60%), linear-gradient(160deg, #0f3c58 0%, #134a6d 55%, #196290 100%); color: #dbe6f5; overflow: hidden; }
.et-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath fill='%23ffffff' d='M0 60 C 240 90 480 20 720 40 C 960 60 1200 95 1440 55 L1440 90 L0 90 Z'/%3E%3C/svg%3E") no-repeat center / cover; }
.et-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; padding: 70px 0 130px; }
.et-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #cfe0f5; padding: 7px 15px; border-radius: 999px; font-size: .82rem; font-weight: 600; margin-bottom: 22px; }
.et-hero h1 { font-family: var(--et-display); font-weight: 800; color: #fff; font-size: clamp(2.1rem, 4.4vw, 3.5rem); line-height: 1.08; margin: 0 0 18px; letter-spacing: -.02em; }
.et-hero h1 em { color: var(--et-amber); font-style: normal; }
.et-hero p { font-size: 1.14rem; color: #b8c8e0; max-width: 520px; margin: 0 0 30px; }
.et-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.et-hero__stats { display: flex; gap: 34px; flex-wrap: wrap; }
.et-stat__num { font-family: var(--et-display); font-weight: 800; font-size: 1.8rem; color: #fff; }
.et-stat__label { font-size: .84rem; color: #9db2d2; }
.et-hero__art { position: relative; }
.et-hero__art img { width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35)); }

/* ---- feature / step / route cards --------------------------------------- */
.et-grid { display: grid; gap: 24px; }
.et-grid--3 { grid-template-columns: repeat(3, 1fr); }
.et-grid--4 { grid-template-columns: repeat(4, 1fr); }
.et-card { background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); padding: 30px 26px; box-shadow: var(--et-shadow-sm); transition: all var(--et-trans); height: 100%; }
.et-card:hover { transform: translateY(-6px); box-shadow: var(--et-shadow); border-color: transparent; }
.et-card__icon { width: 58px; height: 58px; border-radius: 16px; background: linear-gradient(140deg, var(--et-blue), var(--et-azure)); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.et-card__icon img { width: 30px; height: 30px; }
.et-card h3 { font-size: 1.16rem; margin: 0 0 9px; }
.et-card p { color: var(--et-muted); font-size: .96rem; margin: 0; line-height: 1.6; }

.et-step { text-align: center; position: relative; }
.et-step__num { width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%; background: #fff; border: 2px solid var(--et-line); color: var(--et-blue); font-family: var(--et-display); font-weight: 800; font-size: 1.4rem; display: flex; align-items: center; justify-content: center; box-shadow: var(--et-shadow-sm); }
.et-step h4 { font-size: 1.08rem; margin: 0 0 7px; }
.et-step p { color: var(--et-muted); font-size: .92rem; margin: 0; }

.et-trust { display: flex; align-items: center; gap: 12px; }
.et-trust img { width: 44px; height: 44px; }
.et-trust__t { font-family: var(--et-display); font-weight: 700; color: #fff; }
.et-trust__s { font-size: .86rem; color: #9db2d2; }

/* ---- CTA band ------------------------------------------------------------ */
.et-cta { background: linear-gradient(120deg, var(--et-blue), var(--et-navy-700)); border-radius: 22px; padding: 52px; color: #fff; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: var(--et-shadow-lg); }
.et-cta h2 { color: #fff; font-family: var(--et-display); font-weight: 800; font-size: 1.9rem; margin: 0 0 8px; }
.et-cta p { color: #d4e2f7; margin: 0; }

/* ---- footer -------------------------------------------------------------- */
/* ---------- account area: one step down in type size -------------------------
   The account pages are dense — tables, KPI rows, forms, history — and were set
   at the same size as the marketing pages, where big type is the point. Scoped
   to `.et-compact` (the eight account pages) plus the modal, since the fleet and
   driver forms open outside that wrapper and would otherwise stay a size larger
   than the list that opened them.

   /contact reuses `.et-account` for its grid and is deliberately not marked, so
   it keeps the public sizing.

   Everything is ~8% down. Values, not a transform: the theme sizes in rem, which
   ignores a container font-size, so each one that matters is restated here. */
.et-title--sec { font-size: 1.2rem; }

.et-compact { font-size: .9rem; }
.et-compact .et-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.et-compact .et-title--sec { font-size: 1.1rem; }
.et-compact .et-panel__lead { font-size: .83rem; }
.et-compact .et-label,
.et-compact form label { font-size: .8rem; }
.et-compact .et-input,
.et-compact select.et-input,
.et-compact textarea.et-input { font-size: .88rem; }
.et-compact .et-btn { font-size: .88rem; }
.et-compact .et-btn--lg { font-size: .95rem; }
.et-compact .et-btn--sm { font-size: .82rem; }
.et-compact .et-table thead th { font-size: .69rem; }
.et-compact .et-table tbody td { font-size: .86rem; }
.et-compact .et-table__sub { font-size: .75rem; }
.et-compact .et-kpi__n { font-size: .98rem; }
.et-compact .et-kpi__l { font-size: .69rem; }
.et-compact .et-kpicard__n { font-size: 1.35rem; }
.et-compact .et-kpicard__l { font-size: .76rem; }
.et-compact .et-kpicard__ic { font-size: 16px; }
.et-compact .et-profcard__name { font-size: 1.28rem; }
.et-compact .et-profcard__meta { font-size: .84rem; }
.et-compact .et-profcard__av { font-size: 1.65rem; }
.et-compact .et-chip { font-size: .73rem; }
.et-compact .et-badge-ok,
.et-compact .et-badge-rank { font-size: .76rem; }
.et-compact .et-tabs__t { font-size: .85rem; }
.et-compact .et-audit__lead { font-size: .82rem; }
.et-compact .et-audit__none { font-size: .84rem; }
.et-compact .et-audit__what { font-size: .86rem; }
.et-compact .et-audit__when { font-size: .75rem; }
.et-compact .et-audit__event { font-size: .81rem; }
.et-compact .et-audit__diff { font-size: .79rem; }
.et-compact .et-audit__meta { font-size: .71rem; }
.et-compact .et-newsstate__label { font-size: .93rem; }
.et-compact .et-newsstate__meta { font-size: .79rem; }
.et-compact .et-crumbs { font-size: .82rem; }
/* The dialogs belong to the same screens, so they follow the same scale. */
#etModal  { font-size: .9rem; }
#etModal .modal-title  { font-size: 1.05rem; }
#etModal .et-title--sec  { font-size: 1.1rem; }
#etModal .et-label,
#etModal form label  { font-size: .8rem; }
#etModal .et-input  { font-size: .88rem; }
#etModal .et-btn  { font-size: .88rem; }
#etModal .et-btn--lg  { font-size: .95rem; }
#etModal .et-table thead th  { font-size: .69rem; }
#etModal .et-table tbody td  { font-size: .86rem; }

/* A cart line the pricing engine cannot settle: dimmed, with its own border, so
   it reads as "not part of this order" before the message under it is read. */
.et-cartitem.is-unavailable { border-color: #f0c9cb; background: #fffafa; }
.et-cartitem.is-unavailable .et-cartitem__logo,
.et-cartitem.is-unavailable .et-route,
.et-cartitem.is-unavailable .et-meta { opacity: .55; }
.et-cartitem.is-unavailable .et-cartitem__price { color: #b6c3cc; }

/* Orders: the summary strip and the rows that need paying. */
.et-ord-summary { display: grid; gap: 12px; }
.et-table tr.is-awaiting { background: #fffaf4; }
.et-table tr.is-awaiting .et-table__nr { color: #c9721f; }
/* ---------- order detail modal ----------------------------------------------
   Two subjects,
two columns: the crossings on the left (what was bought),
the
   order itself on the right (status,
money,
the action,
who it is invoiced to).
   Before this it was one column on a 1080px dialog,
with the crossings pushed
   below a price block and the right half of the window empty. */
/* The wide dialogs carry two columns of content (the order detail) or a form
   with a description rail beside every section, so they are given most of the
   screen: on a desktop the dialog is the screen for as long as it is open, and
   the room goes to the crossings and the field grid rather than to backdrop.
   Capped against the viewport so it keeps a margin on a laptop, and against
   1560px so it does not turn into a full-width page on an ultrawide, where
   reading a row end to end costs a head movement. */
#etModal .modal-dialog.modal-xl { max-width: min(1560px, calc(100vw - 40px)); }
/* Taller too: `modal-dialog-scrollable` sizes to the viewport minus the dialog
   margin, so trimming that margin is what gives the body its extra rows. */
#etModal .modal-dialog.modal-xl.modal-dialog-scrollable { --bs-modal-margin: .75rem; }

/* `data-modal-size="full"`: 85% of the viewport, both directions.
   For the order detail, which is not a dialog over a page so much as a screen of
   its own. The height falls out of the margin: `modal-dialog-scrollable` is
   `100% - margin * 2`, so 7.5vh each side leaves exactly 85vh. */
#etModal .modal-dialog.modal-et-full { max-width: 85vw; }
#etModal .modal-dialog.modal-et-full.modal-dialog-scrollable { --bs-modal-margin: 7.5vh; }
@media (max-width: 820px) {
    /* 85% of a phone is a dialog with nothing in it. Below the two-column
       breakpoint it takes the screen, less a hairline that keeps it reading as a
       dialog rather than a page. */
    #etModal .modal-dialog.modal-et-full { max-width: calc(100vw - 20px); }
    #etModal .modal-dialog.modal-et-full.modal-dialog-scrollable { --bs-modal-margin: 10px; }
}

/* The dialog's own body has no padding (`#etModalBody`), so the partial supplies
   it. It used to be zeroed here too — for the order detail, which does not even
   use this class — and every other dialog rendered flush against the edges:
   fleet, driver, posting, upload, the company detail. A dialog is tighter than
   the same partial in a page, hence the smaller figure rather than none. */
#etModal .et-dt__body { --et-dt-px: 22px; --et-dt-pb: 22px; padding: 18px var(--et-dt-px) var(--et-dt-pb); }
/* …except when the partial is a form: its own footer has to reach the edges. */
#etModal .et-dt__body--form { padding: 0; }

.et-odt { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0; align-items: stretch; }
.et-odt__main { padding: 26px 30px 30px; min-width: 0; }
/* The gap does the separating now that the blocks have no borders of their own. */
.et-odt__side { padding: 26px 26px 30px; border-left: 1px solid #e6edf2; background: #f7f9fb; display: grid; gap: 26px; align-content: start; }

/* ---------- the order/booking panel, right column ----------
   One rule of composition: the money is the anchor, everything else is uniform.
   The amount owed sits in the only framed element on the column — white on the
   column's grey ground, so the eye lands there first — and every other block is
   a small heading over its content, divided by a hairline. Nested cards on a
   tinted column gave four competing frames and no order at all. */
.et-odt-card {
    display: grid; gap: 4px; font-size: .86rem; color: #56666f;
    padding-top: 18px; border-top: 1px solid #e3eaef;
}
.et-odt-card:first-child { padding-top: 0; border-top: 0; }
.et-odt-card__h {
    display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
    font-family: var(--et-display); font-weight: 700; font-size: .7rem;
    letter-spacing: .09em; text-transform: uppercase; color: #6d8697;
}
.et-odt-card__h i { color: #9db6c7; font-size: .78rem; }
.et-odt-card__name { color: var(--et-ink, #23282d); font-size: .95rem; font-weight: 600; }

/* The anchor: what is owed. White, framed, and the only thing on the column set
   at display size. */
.et-odt-total {
    background: #fff; border: 1px solid #dde7ee; border-radius: 12px;
    padding: 16px 18px; box-shadow: 0 1px 2px rgba(16, 44, 66, .04);
}
.et-odt-total__lines { margin: 0 0 12px; display: grid; gap: 6px; }
.et-odt-total__lines > div { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; }
.et-odt-total__lines dt { color: #7c8a95; margin: 0; }
.et-odt-total__lines dd { margin: 0; color: #45525c; font-variant-numeric: tabular-nums; }
.et-odt-total__off dd { color: #1e7a4e; }
.et-odt-total__sum { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid #eef2f5; }
.et-odt-total__sum span { color: #6d8697; font-size: .7rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.et-odt-total__sum strong {
    font-family: var(--et-display); font-weight: 800; font-size: 1.45rem;
    color: var(--et-navy, #134a6d); white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* The lei figure belongs to the total, so it sits inside its frame — quieter,
   and with the rate it came from under it. */
.et-odt-total__ron { margin-top: 6px; text-align: right; font-size: .88rem; font-weight: 700; color: #56666f; }
.et-odt-total__ron small { display: block; margin-top: 3px; font-size: .68rem; font-weight: 500; color: #9aa7b1; line-height: 1.45; }

/* A crossing is a line to read, not a form to parse: route and price on top,
   then one row of facts in the order they are asked — when, with what, whose. */
/* One crossing per line, stacked. They were briefly laid out two across on a
   wide dialog; a list read down a single column is the one order that survives
   any width, and the crossings of an order are read in sequence — the second
   leg follows the first, it does not sit beside it. */
.et-odt-trips { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
.et-odt-trip {
    display: flex; gap: 14px; border: 1px solid #edf1f5; border-radius: 12px;
    padding: 16px 18px; background: #fff;
}
.et-odt-trip__body { flex: 1; min-width: 0; }
/* The leg number, for an order with several crossings: a quiet counter, not a
   badge competing with the route it labels. */
.et-odt-trip__n {
    flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
    display: grid; place-items: center; background: #eef4f8; color: #5c7c93;
    font-family: var(--et-display); font-weight: 700; font-size: .72rem;
}
.et-odt-trip__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.et-odt-trip__price { font-family: var(--et-display); font-weight: 800; font-size: 1.02rem; color: var(--et-navy, #134a6d); white-space: nowrap; }
.et-odt-trip__facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 7px; color: #6a7c88; font-size: .82rem; }
.et-odt-trip__facts i { margin-right: 5px; opacity: .75; }
.et-odt-trip__facts--sub { color: #8b98a3; }

.et-odt-route { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.et-odt-route__end { display: flex; align-items: center; gap: 6px; }
.et-odt-route__end strong { font-size: 1rem; color: var(--et-ink, #23282d); }
.et-odt-route > i { color: var(--et-amber); font-size: .72rem; }

.et-odt-services { list-style: none; margin: 7px 0 0; padding: 7px 0 0; border-top: 1px dashed #e2e9ef; display: grid; gap: 3px; }
.et-odt-services li { display: flex; justify-content: space-between; gap: 14px; font-size: .8rem; color: #6a7c88; }

/* Printed once for the whole order — it is the same person on every crossing. */
.et-odt-contact { display: flex; align-items: baseline; gap: 14px; margin-top: 16px; padding-top: 13px; border-top: 1px solid #eef2f5; flex-wrap: wrap; }
.et-odt-contact__l { color: #7c8a95; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; }
.et-odt-contact__v { display: flex; gap: 16px; flex-wrap: wrap; font-size: .86rem; color: #45525c; }
.et-odt-contact__v i { color: #9fb4c4; margin-right: 5px; }
.et-odt-contact__v strong { color: var(--et-ink, #23282d); }

.et-odt-meta { margin: 0; display: grid; gap: 6px; }
.et-odt-meta > div { display: flex; justify-content: space-between; gap: 12px; font-size: .78rem; }
.et-odt-meta dt { color: #7c8a95; margin: 0; }
.et-odt-meta dd { margin: 0; color: var(--et-ink, #23282d); text-align: right; }


.et-odt-doc { display: flex; align-items: center; gap: 7px; color: #45525c; margin-top: 3px; }
.et-odt-doc i { color: #6f86a3; }
.et-odt-doc small { margin-left: auto; color: #9aa7b1; font-size: .7rem; }
#etModal .et-dt__sec-h { font-size: .72rem; margin: 0 0 12px; }
#etModal .et-dt__empty { padding: 20px 10px; }

@media (max-width: 820px) {
    .et-odt { grid-template-columns: 1fr; }
    /* The order card first on a phone: on a small screen the question is usually
       "is this paid", and the crossings are a scroll away either way. */
    .et-odt__side { order: -1; border-left: 0; border-bottom: 1px solid #e6edf2; }
    .et-odt__main { padding: 16px 18px 20px; }
    .et-odt__side { padding: 16px 18px 20px; }
}
@media (max-width: 520px) {
    /* The number keeps its column; the row stays one line rather than wrapping
       under the badge. */
    .et-odt-trip { padding: 12px 13px; }
}

/* Booking detail: same two-column split as the order dialog. */
/* The crossing itself opens the body — the when/who line that used to follow it
   is in the dialog header now, with the reference. */
.et-bdt-route { font-size: 1.05rem; margin-bottom: 20px; }

/* Only the answers that are "yes". Four boxes reading "Nu" told nobody anything,
   while ADR — the one that changes how the truck is handled — sat among them at
   the same weight. */
.et-bdt-flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.et-bdt-flag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #eef3f7; color: #33505f; font-size: .74rem; font-weight: 600; }
.et-bdt-flag i { font-size: .72rem; opacity: .8; }
.et-bdt-flag:has(.fa-exclamation-triangle) { background: #fdf0e6; color: #b4573a; }

.et-bdt-cargo { margin-top: 14px; padding-top: 10px; border-top: 1px solid #eef2f5; }
.et-bdt-cargo p { margin: 3px 0 0; color: #45525c; font-size: .84rem; line-height: 1.6; }

/* ---------- bookings list ---------------------------------------------------- */
.et-bk-page { display: grid; gap: 18px; }

/* Page head with the primary action, so "book a crossing" is reachable without
   going back to the menu. */
.et-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.et-section-head h1 { margin: 0; }
.et-section-head p { margin: 3px 0 0; color: #7c8a95; font-size: .85rem; }

.et-bk-summary { display: grid; gap: 12px; }
/* The next departure, spelled out beside the counts — "3 upcoming" never answers
   the question the customer has, which is "when". */
.et-bk-next { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border: 1px solid #e6edf2; border-left: 3px solid var(--et-amber); border-radius: 12px; background: #fffdf9; }
.et-bk-next__when { flex: 0 0 54px; text-align: center; line-height: 1.05; }
.et-bk-next__when strong { display: block; font-family: var(--et-display); font-weight: 800; font-size: 1.2rem; color: #c9721f; }
.et-bk-next__when small { color: #a8896a; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.et-bk-next__label { color: #7c8a95; font-size: .7rem; letter-spacing: .07em; text-transform: uppercase; }
.et-bk-next__route { display: flex; align-items: center; gap: 8px; color: var(--et-ink, #23282d); font-family: var(--et-display); font-weight: 700; font-size: .95rem; }
.et-bk-next__route i { color: var(--et-amber); font-size: .75rem; }
.et-bk-next__meta { color: #7c8a95; font-size: .8rem; margin-top: 2px; }
.et-bk-next .et-btn { margin-left: auto; }

/* Rows: what has sailed steps back, what is imminent steps forward. */
.et-table--bookings tr.is-past td { opacity: .62; }
.et-table--bookings tr.is-soon { background: #fffdf9; }
.et-when__soon { color: #c9721f; font-weight: 700; }

@media (max-width: 640px) {
    .et-bk-next { flex-wrap: wrap; }
    .et-bk-next .et-btn { margin-left: 0; width: 100%; }
}

/* ---------- customer dashboard ----------------------------------------------
   Six zones, each fetched on its own. The ordering is by urgency: what needs
   doing, where the account stands, what sails next, then history and setup. */
/* Not `.et-dash`: that name was already taken by the account header's navy band
   further down this file, which — being later in the cascade — painted the whole
   dashboard column navy and gave it 38px of padding. */
.et-dashgrid { display: grid; gap: 20px; }

/* Things to act on. Not a panel: an alert that renders as a card would look like
   another section of content rather than something waiting on the customer. */
.et-dash-alerts { display: grid; gap: 10px; }
.et-dash-alert { display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border-radius: 12px; border: 1px solid; }
.et-dash-alert__ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .85rem; }
.et-dash-alert__body { flex: 1 1 auto; min-width: 0; }
.et-dash-alert__body strong { display: block; color: var(--et-ink, #23282d); font-size: .93rem; }
.et-dash-alert__body p { margin: 2px 0 0; color: #6a7c88; font-size: .83rem; }
.et-dash-alert .et-btn { flex: 0 0 auto; align-self: center; }
.et-dash-alert--pay { background: #fff8f1; border-color: #f2d3ae; }
.et-dash-alert--pay .et-dash-alert__ic { background: #e08733; }
.et-dash-alert--cart { background: #f2f8fc; border-color: #c5dced; }
.et-dash-alert--cart .et-dash-alert__ic { background: #196290; }
.et-dash-alert--setup { background: #f7f9fb; border-color: #dde6ec; }
.et-dash-alert--setup .et-dash-alert__ic { background: #6f86a3; }
.et-dash-alert__items { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 7px; }
.et-dash-alert__item { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; }
.et-dash-alert__item > a:first-child { font-weight: 700; color: var(--et-navy, #134a6d); }
.et-dash-alert__up { color: #196290; font-weight: 600; }
.et-dash-alert__done { color: #1e7a4e; }

/* Panel head shared by the dashboard cards: title left, "see all" right. */
.et-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.et-panel__head .et-title { margin: 0; }
.et-panel__head .et-title i { color: var(--et-blue, #134a6d); margin-right: 7px; }
.et-panel__more { font-size: .82rem; font-weight: 600; color: #196290; white-space: nowrap; }
.et-panel__more i { font-size: .62rem; margin-left: 3px; }

/* What sails next. The days-to-go column is the reading a date cannot give. */
.et-upnext { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.et-upnext__item { display: flex; align-items: center; gap: 14px; padding: 11px 13px; border: 1px solid #e6edf2; border-radius: 11px; background: #fff; }
.et-upnext__item.is-soon { border-color: #f2d3ae; background: #fffdf9; }
.et-upnext__when { flex: 0 0 52px; text-align: center; line-height: 1.05; }
.et-upnext__when strong { display: block; font-family: var(--et-display); font-weight: 800; font-size: 1.15rem; color: var(--et-navy, #134a6d); }
.et-upnext__when small { color: #7c8a95; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.et-upnext__item.is-soon .et-upnext__when strong { color: #c9721f; }
.et-upnext__body { flex: 1 1 auto; min-width: 0; }
.et-upnext__route { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--et-ink, #23282d); font-size: .9rem; }
.et-upnext__route i { color: var(--et-amber); font-size: .72rem; }
.et-upnext__route img { border-radius: 2px; }
.et-upnext__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 3px; color: #7c8a95; font-size: .78rem; }
.et-upnext__meta i { margin-right: 4px; opacity: .8; }
.et-chip--warn { background: #e08733 !important; }

.et-dash-period { display: flex; gap: 18px; color: #7c8a95; font-size: .78rem; }
.et-dash-period strong { color: var(--et-ink, #23282d); font-family: var(--et-display); }

/* Trend next to the month count: direction first, magnitude second. */
.et-kpicard__trend { display: inline-flex; align-items: center; gap: 3px; margin-left: 6px; font-weight: 700; font-size: .72rem; }
.et-kpicard__trend--up { color: #1e7a4e; }
.et-kpicard__trend--down { color: #b4573a; }

.et-dash-empty { text-align: center; padding: 22px 12px; color: #9aa7b1; }
.et-dash-empty i { font-size: 1.7rem; opacity: .45; display: block; margin-bottom: 8px; }
.et-dash-empty p { margin: 0 0 12px; font-size: .86rem; }

@media (max-width: 640px) {
    .et-dash-alert { flex-wrap: wrap; }
    .et-dash-alert .et-btn { width: 100%; }
    .et-upnext__item { flex-wrap: wrap; }
}

/* ---------- order confirmation ----------------------------------------------
   Two columns: what happens next on the left, how to pay on the right. The order
   number and the amount ride in the header band — they are what a customer reads
   out on the phone. */
.et-ty__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 28px; flex-wrap: wrap; }
.et-ty__badge { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px; background: rgba(47,163,107,.18); color: #7ee2a8; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 8px; }
.et-ty__facts { display: flex; gap: 26px; margin: 0; }
.et-ty__facts dt { color: #a9bcda; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; margin: 0 0 2px; }
.et-ty__facts dd { margin: 0; color: #fff; font-family: var(--et-display); font-weight: 800; font-size: 1.15rem; white-space: nowrap; }
/* The lei equivalent under the total, on the navy header: lighter than the
   amount it restates, but not as faint as the label above it. */
.et-ty__ron { display: block; margin-top: 3px; color: #bcd2e8; font-weight: 600; font-size: .82rem; }

.et-ty { display: grid; grid-template-columns: 1.25fr 1fr; gap: 20px; align-items: start; }
.et-ty__steps { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 16px; }
.et-ty__steps li { display: flex; gap: 13px; align-items: flex-start; }
.et-ty__num { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: var(--et-amber); color: var(--et-navy, #134a6d); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: .82rem; }
.et-ty__steps strong { display: block; color: var(--et-ink, #23282d); font-size: .95rem; }
.et-ty__steps p { margin: 3px 0 0; color: #6a7c88; font-size: .87rem; line-height: 1.6; }
.et-ty__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }

.et-ty__pay { background: #f7f9fb; }
.et-ty__bank { margin: 16px 0 0; display: grid; gap: 11px; }
.et-ty__bank > div { display: grid; gap: 3px; padding-bottom: 10px; border-bottom: 1px dashed #dde6ec; }
.et-ty__bank > div:last-child { border-bottom: 0; padding-bottom: 0; }
.et-ty__bank dt { color: #7c8a95; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; }
.et-ty__bank dd { margin: 0; color: var(--et-navy, #134a6d); font-weight: 700; font-size: .92rem; word-break: break-word; }
/* The amount to transfer is the number acted on in this block, so it is the one
   thing here set larger than the account details around it. */
.et-ty__amount dd b { display: block; font-size: 1.12rem; font-family: var(--et-display); }
.et-ty__amount dd small { display: block; margin-top: 3px; color: #9aa7b1; font-weight: 500; font-size: .72rem; line-height: 1.45; }
.et-ty__ref dd { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.et-ty__ref code { background: #fff; border: 1px solid #dde6ec; border-radius: 6px; padding: 4px 10px; font-size: .95rem; color: var(--et-ink, #23282d); }
.et-ty__note { margin: 16px 0 0; color: #7c8a95; font-size: .82rem; line-height: 1.6; }

/* Return legs for what was just ordered — the one upsell that needs no pitch. */
.et-ty__returns { background: #fff; border: 1px solid #e2e9ef; border-radius: 16px; padding: 22px 24px; }
.et-ty__returns-head h2 { margin: 0; font-family: var(--et-display); font-weight: 800; font-size: 1.15rem; color: var(--et-ink, #23282d); }
.et-ty__returns-head p { margin: 4px 0 0; color: #7c8a95; font-size: .88rem; }
.et-ty__returns-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.et-ty__leg { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #e2e9ef; border-radius: 12px; background: #f7f9fb; transition: all var(--et-trans); }
.et-ty__leg:hover { border-color: var(--et-navy, #134a6d); background: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(9,30,45,.08); }
.et-ty__leg-route { display: flex; align-items: center; gap: 9px; color: var(--et-ink, #23282d); font-family: var(--et-display); font-weight: 700; }
.et-ty__leg-route i { color: var(--et-amber); font-size: .78rem; }
.et-ty__leg-meta { color: #7c8a95; font-size: .8rem; }
.et-ty__leg-cta { color: #196290; font-weight: 700; font-size: .84rem; margin-top: 4px; }
.et-ty__leg-cta i { font-size: .7rem; margin-left: 3px; }

@media (max-width: 860px) {
    .et-ty { grid-template-columns: 1fr; }
    .et-ty__facts { gap: 18px; }
}

/* ---------- legal documents (terms, cookies) ----------
   Long-form text: a narrower measure and looser leading than the app's panels,
   because these are read in paragraphs rather than scanned. */
.et-upsell__price { display: block; margin-top: 4px; font-size: .8rem; font-weight: 700; color: var(--et-blue, #134a6d); }

.et-legal { max-width: 860px; margin: 0 auto; }
.et-legal__h { font-family: var(--et-display); font-weight: 800; font-size: 1.35rem; color: var(--et-navy, #134a6d); margin: 0 0 18px; padding-bottom: 10px; border-bottom: 3px solid var(--et-amber); display: inline-block; }
.et-legal p { color: #45525c; font-size: .95rem; line-height: 1.8; margin: 0 0 14px; }
.et-legal p strong { color: var(--et-ink, #23282d); }
.et-legal p:empty { display: none; }
.et-legal__updated { margin-top: 26px; padding-top: 16px; border-top: 1px solid #eef2f5; font-size: .82rem; color: #9aa7b1; }
@media (max-width: 560px) { .et-legal__h { font-size: 1.15rem; } .et-legal p { font-size: .92rem; } }

/* ---------- footer -----------------------------------------------------------
   Two rows, ~120px. Three zones on the first — identity, navigation, support —
   separated by hairlines rather than by whitespace: at this height there is no
   whitespace to spend, and a 1px rule reads as structure where a gap would read
   as an accident. A darker band under the body colour closes the page. */
.et-footer { background: linear-gradient(180deg, #0f3a56 0%, #0c2f47 100%); color: #93a9c6; padding: 0; font-size: .82rem; border-top: 3px solid var(--et-amber); }

/* row 1: identity | links | support */
.et-footer__main { display: flex; align-items: stretch; flex-wrap: wrap; }
.et-footer__id,
.et-footer__links,
.et-footer__support { display: flex; align-items: center; padding: 16px 0; }

.et-footer__id { gap: 12px; padding-right: 26px; }
.et-footer__id img { height: 26px; width: auto; display: block; }
.et-footer__entity { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #6f86a3; white-space: nowrap; }

.et-footer__links { flex: 1 1 auto; flex-wrap: wrap; gap: 4px 22px; padding-left: 26px; padding-right: 26px; border-left: 1px solid rgba(255,255,255,.09); border-right: 1px solid rgba(255,255,255,.09); }
.et-footer__links a { color: #a7bad2; white-space: nowrap; font-weight: 500; }
.et-footer__links a:hover { color: var(--et-amber); }

.et-footer__support { flex-direction: column; align-items: flex-end; gap: 3px; padding-left: 26px; }
.et-footer__phone { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-family: var(--et-display); font-weight: 700; font-size: 1.02rem; letter-spacing: .01em; }
.et-footer__phone i { color: var(--et-amber); font-size: .8rem; }
.et-footer__phone:hover { color: var(--et-amber); }
.et-footer__meta { color: #7d92ad; font-size: .76rem; }
.et-footer__meta a { color: #93a9c6; }
.et-footer__meta a:hover { color: var(--et-amber); }
.et-footer__sep { margin: 0 6px; color: #4d6883; }

/* row 2: legal line */
.et-footer__bottom { border-top: 1px solid rgba(255,255,255,.09); padding: 10px 0; display: flex; align-items: center; justify-content: space-between; gap: 8px 20px; font-size: .74rem; flex-wrap: wrap; }
.et-footer__copy { color: #6f86a3; }
.et-footer__legal { display: flex; gap: 16px; }
.et-footer__legal a { color: #93a9c6; }
.et-footer__legal a:hover { color: var(--et-amber); }
.et-footer__trust { display: flex; align-items: center; gap: 16px; }
.et-footer__pay { display: inline-flex; align-items: center; gap: 7px; color: #7d92ad; font-size: 1.15rem; line-height: 1; }
.et-footer__pay .fa-lock { font-size: .74rem; }
.et-social { display: flex; gap: 6px; }
.et-social a { width: 24px; height: 24px; border-radius: 6px; background: rgba(255,255,255,.07); display: inline-flex; align-items: center; justify-content: center; color: #b9c8dc; font-size: .72rem; transition: all var(--et-trans); }
.et-social a:hover { background: var(--et-amber); color: var(--et-navy); }

/* ---- generic surface used to wrap ported inner pages --------------------- */
/* ---------- sticky, actually ----------
   The legacy CDN stylesheet (css/style.css, still loaded for the parts of the app
   that have not been ported) sets `html { overflow-x: hidden !important }` and
   wraps every page in `.body-inner { position: relative; overflow: hidden }`.

   Either one is enough to kill `position: sticky` everywhere below it: an element
   with `overflow` other than `visible` becomes the scroll container that sticky
   anchors to, and since neither of those two ever scrolls (the page scrolls on the
   viewport), every sticky element on the site silently stayed where it was — the
   booking summary rail, the cart summary, the header.

   `clip` keeps the same intent — no horizontal scrollbar — without creating a
   scroll container, so sticky anchors to the viewport again. It is the only
   property that fixes this without touching the legacy stylesheet, which is shared
   with the production app and must not be edited. */
@supports (overflow: clip) {
    html { overflow-x: clip !important; }
    .body-inner { overflow: visible; overflow-x: clip; }
}

/* ---------- the page under an open dialog ----------
   The same legacy stylesheet also sets `html { height: 100% }`. That pins the
   root element to the viewport and leaves `body` as the taller box the page
   actually scrolls in — which is fine until a dialog opens: Bootstrap locks the
   page by setting `overflow: hidden` on `body`, the box carrying the scroll
   position, and everything below the fold is clipped away. The page behind the
   backdrop jumps back to the top, and returns when the dialog closes.

   `height: auto` hands the scrolling back to the viewport, so the lock clips
   nothing and the position survives. `min-height` keeps what the legacy rule was
   for — a short page whose background still fills the window. */
html { height: auto; min-height: 100%; }

.et-page { background: var(--et-bg-soft); min-height: 60vh; }
/* ---------- page header ------------------------------------------------------
   The navy band is back — the gradient, the two soft glows over it and the amber
   rule at its foot. What is gone is its height: it ran 46px of padding around a
   large title, which pushed the actual page below the fold on a laptop. Same
   surface, roughly half the band.

   The trail also moved above the title: it is where the visitor came from, so it
   is read before the name of where they are. */
.et-page__head {
    position: relative; overflow: hidden;
    background: linear-gradient(135deg, #0f3c58 0%, #134a6d 60%, #196290 100%);
    color: #fff; padding: 16px 0 18px;
}
.et-page__head::before {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(620px 260px at 86% -30%, rgba(255, 204, 0, .12), transparent 60%),
                radial-gradient(500px 240px at 0% 130%, rgba(43, 143, 199, .20), transparent 60%);
}
.et-page__head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: linear-gradient(90deg, #ffcc00, rgba(255, 204, 0, 0));
}
.et-page__head > .et-container { position: relative; z-index: 1; }
.et-page__head h1 {
    margin: 0; color: #fff; font-family: var(--et-display); font-weight: 800;
    font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.25;
}
.et-page__head .et-crumbs { color: #a9bcda; font-size: .8rem; margin: 0 0 6px; }
.et-page__head .et-crumbs a { color: #cfe0f5; }
.et-page__head .et-crumbs a:hover { color: var(--et-amber); }
.et-page__head__sub { margin: 7px 0 0; color: #a9bcda; font-size: .93rem; max-width: 720px; }
.et-page__head .et-eyebrow { color: var(--et-amber); }
.et-page__head--center { text-align: center; }
.et-page__head--center .et-page__head__sub { margin-left: auto; margin-right: auto; }
.et-page__head--slim { padding: 12px 0 14px; }
.et-page__head--slim h1 { font-size: clamp(1.12rem, 1.9vw, 1.4rem); }
.et-panel { background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow-sm); padding: 30px; }

/* ---- responsive ---------------------------------------------------------- */
@media (max-width: 991px) {
    .et-hero__grid { grid-template-columns: 1fr; padding: 40px 0 120px; }
    .et-hero__art { display: none; }
    .et-grid--3, .et-grid--4 { grid-template-columns: repeat(2, 1fr); }
    /* The hairlines only make sense while the three zones sit side by side. */
    .et-footer__links { border: 0; padding-left: 0; padding-right: 0; flex-basis: 100%; order: 3; border-top: 1px solid rgba(255,255,255,.09); }
    .et-footer__id { flex: 1 1 auto; padding-right: 0; }
    .et-footer__support { padding-left: 0; }
}
@media (max-width: 768px) {
    .et-nav__links, .et-topbar { display: none; }
    .et-burger { display: inline-flex; }
    .et-nav__mobile-open .et-nav__links { display: flex; position: fixed; inset: 0 0 0 auto; width: min(82vw, 340px); background: #fff; flex-direction: column; align-items: stretch; padding: 90px 22px 30px; box-shadow: var(--et-shadow-lg); z-index: 1040; gap: 6px; }
    .et-nav__mobile-open .et-nav__links > li > a { display: block; }
    .et-section { padding: 60px 0; }
    .et-cta { padding: 36px 26px; text-align: center; justify-content: center; }
}
@media (max-width: 560px) {
    .et-grid--3, .et-grid--4 { grid-template-columns: 1fr; }
    /* On a phone the row wraps into a small stack; centring keeps it tidy
       instead of leaving ragged ends against both edges. */
    .et-footer__main, .et-footer__links, .et-footer__bottom { justify-content: center; text-align: center; }
    .et-footer__id, .et-footer__support { flex-basis: 100%; justify-content: center; align-items: center; }
    .et-footer__id { flex-direction: column; gap: 6px; }
    .et-user__name { display: none; }
}

/* =============================================================================
   Auth pages — premium split-screen (brand panel + form panel)
   ========================================================================== */
.et-auth { display: grid; grid-template-columns: 1.02fr 1fr; min-height: calc(100vh - 112px); }
.et-auth__brand { position: relative; background: linear-gradient(160deg, #0f3c58 0%, #134a6d 55%, #196290 100%); color: #dbe8f0; padding: 56px 60px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; }
.et-auth__brand::before { content: ''; position: absolute; inset: 0; background: radial-gradient(600px 300px at 90% 0%, rgba(255,204,0,.14), transparent 60%), radial-gradient(500px 260px at 0% 100%, rgba(43,143,199,.22), transparent 60%); }
.et-auth__brand > * { position: relative; z-index: 1; }
.et-auth__logo img { height: 42px; }
.et-auth__pitch h2 { font-family: var(--et-display); font-weight: 800; color: #fff; font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1.15; margin: 0 0 16px; }
.et-auth__pitch h2 em { color: var(--et-amber); font-style: normal; }
.et-auth__pitch p { color: #a9c2d4; font-size: 1.05rem; max-width: 420px; margin: 0 0 30px; }
.et-auth__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.et-auth__list li { display: flex; gap: 13px; align-items: flex-start; }
.et-auth__list .ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: rgba(255,255,255,.09); display: inline-flex; align-items: center; justify-content: center; }
.et-auth__list .ic img { width: 21px; height: 21px; }
.et-auth__list strong { display: block; color: #fff; font-family: var(--et-display); font-weight: 600; font-size: .98rem; }
.et-auth__list span { color: #9db6c7; font-size: .88rem; }
.et-auth__quote { border-left: 3px solid var(--et-amber); padding-left: 16px; color: #cfe0ea; font-size: .95rem; }
.et-auth__quote cite { display: block; margin-top: 6px; color: #8fabbd; font-style: normal; font-size: .84rem; }

.et-auth__form { display: flex; align-items: center; justify-content: center; padding: 48px 24px; background: var(--et-bg); }
.et-auth__card { width: 100%; max-width: 452px; }
.et-auth__card--wide { max-width: 620px; }
.et-auth__head { margin-bottom: 26px; }
.et-auth__head h1 { font-family: var(--et-display); font-weight: 800; color: var(--et-ink); font-size: 1.7rem; margin: 0 0 6px; }
.et-auth__head p { color: var(--et-muted); margin: 0; font-size: .96rem; }
.et-auth__foot { margin-top: 22px; text-align: center; color: var(--et-muted); font-size: .93rem; }
.et-auth__foot a { font-weight: 600; }

/* forms (et- form system + light touch on legacy .form-control) */
.et-field { margin-bottom: 17px; }
.et-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.et-label, .et-scope form label { display: block; font-family: var(--et-display); font-weight: 600; font-size: .86rem; color: var(--et-navy); margin-bottom: 7px; }
.et-input, .et-select,
.et-scope .form-control, .et-scope select.form-control {
    width: 100%; padding: 12px 15px; font-size: .96rem; color: var(--et-ink);
    background: #fff; border: 1.5px solid var(--et-line); border-radius: var(--et-radius-sm);
    transition: border-color var(--et-trans), box-shadow var(--et-trans); font-family: var(--et-font); line-height: 1.3;
}
.et-input:focus, .et-select:focus,
.et-scope .form-control:focus {
    outline: none; border-color: var(--et-blue); box-shadow: 0 0 0 4px rgba(25,98,144,.12);
}
.et-input.is-invalid, .et-scope .form-control.is-invalid { border-color: var(--et-danger); }
.et-invalid, .et-scope .invalid-feedback { display: block; color: var(--et-danger); font-size: .82rem; margin-top: 6px; }
.et-check { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.et-check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--et-blue); flex: 0 0 auto; }
.et-check label { margin: 0; font-weight: 400; color: var(--et-body); font-size: .92rem; font-family: var(--et-font); }
.et-checks { border: 1px solid var(--et-line); border-radius: var(--et-radius-sm); padding: 15px 16px; max-height: 190px; overflow-y: auto; background: var(--et-bg-soft); }

.et-alert { padding: 13px 16px; border-radius: var(--et-radius-sm); font-size: .92rem; margin-bottom: 18px; border: 1px solid transparent; }
.et-alert--danger { background: #fdecec; color: #a3282c; border-color: #f6cdcf; }
.et-alert--success { background: #e8f6ef; color: #1d6f49; border-color: #bfe6d3; }
/* `--info` was used by the cart and the legal page but never defined, so both
   rendered as an unstyled box: padding, a transparent border and nothing that
   read as a notice. */
.et-alert--info { background: #eaf3f9; color: #1a5a80; border-color: #c6dced; }

/* Register split: compact form (left) + light promo panel (right).
   Both columns hold a block of the SAME max-width and hug the centre gutter, so
   the two halves read as one balanced spread instead of drifting apart on wide
   screens. */
.et-authsplit { min-height: calc(100vh - 112px); display: grid; grid-template-columns: 1fr 1fr; background: var(--et-bg); }
.et-authsplit__form { display: flex; align-items: center; justify-content: flex-end; padding: 44px 40px 44px 24px; }
/* Flush split (register + login): the panels fill the viewport height on their
   own, so the vertical padding only pushed them away from the header and footer.
   Applies at every width — the modifier outranks the stacked-layout padding
   shorthands in the media queries below.
   The element itself needs the reset too: legacy style.css (CDN) sets a blanket
   `section { padding: 70px 0 }`, which this class (0-1-0 vs 0-0-1) overrides. */
.et-authsplit--flush { padding-top: 0; padding-bottom: 0; }
.et-authsplit--flush .et-authsplit__promo { padding-top: 0; padding-bottom: 0; }
/* The form column keeps the vertical breathing room instead — the promo panel
   is centred in the split and reads fine flush, the fields do not. Desktop only:
   the stacked media queries below already set a tighter padding for narrow
   screens, where 70px would be far too much. */
@media (min-width: 901px) {
    .et-authsplit--flush .et-authsplit__form { padding-top: 70px; padding-bottom: 70px; }
}
.et-authform { width: 100%; max-width: 468px; }
.et-authform .et-auth__head { margin-bottom: 20px; }
/* login still opts into a centred heading; register is left-aligned like its fields. */
.et-authform .et-auth__head--center { text-align: center; margin-bottom: 16px; }
.et-authform .et-auth__head h1 { font-size: 1.5rem; margin-bottom: 5px; }
.et-authform .et-auth__head p { font-size: .92rem; }

/* Form density — scoped to .et-authform so other forms (login) are untouched. */
.et-authform .et-field { margin-bottom: 11px; }
.et-authform .et-label { font-size: .82rem; margin-bottom: 4px; }
.et-authform .et-input, .et-authform .et-select { padding: 9px 13px; font-size: .92rem; }
.et-authform .et-grid-2 { gap: 0 14px; }
.et-authform .et-auth__foot { margin-top: 14px; }

/* Section captions — split the 9 fields into three scannable groups. The rule
   runs to the right of the label, so the eye gets a clear band per group. */
.et-formsec {
    display: flex; align-items: center; gap: 11px;
    font-family: var(--et-display); font-weight: 700; font-size: .74rem;
    letter-spacing: .07em; text-transform: uppercase; color: var(--et-navy);
    margin: 20px 0 10px;
}
.et-formsec::after { content: ''; flex: 1; height: 1px; background: var(--et-line); }
.et-formsec:first-of-type { margin-top: 0; }
.et-formsec .et-tag { margin-left: 0; }
.et-hint { color: var(--et-muted); font-size: .8rem; line-height: 1.45; margin: 2px 0 0; }
/* Terms + submit sit below a divider so the primary action is clearly the
   closing step, not another field. */
.et-form__submit { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--et-line); }

/* Interests as toggle pills: the labels are one or two words, so a fixed grid
   left ragged gaps and a repeated checkbox square made an optional field look
   heavier than the required ones. Pills size to their text and wrap naturally. */
.et-authform .et-checks { border: 0; background: transparent; padding: 0; max-height: none; overflow: visible; display: flex; flex-wrap: wrap; gap: 8px; }
.et-authform .et-checks .et-check {
    position: relative; margin: 0; width: auto; align-items: center; gap: 7px;
    padding: 7px 15px; border: 1px solid var(--et-line); border-radius: var(--et-radius-pill);
    background: var(--et-bg-soft); cursor: pointer; -webkit-user-select: none; user-select: none;
    transition: border-color var(--et-trans), background var(--et-trans), color var(--et-trans), box-shadow var(--et-trans);
}
.et-authform .et-checks .et-check span { font-size: .86rem; line-height: 1.25; transition: color var(--et-trans); }
.et-authform .et-checks .et-check:hover { border-color: var(--et-blue); background: #fff; }
.et-authform .et-checks .et-check:has(input:checked) { border-color: var(--et-blue); background: var(--et-blue); }
.et-authform .et-checks .et-check:has(input:checked) span { color: #fff; }
.et-authform .et-checks .et-check:has(input:checked)::before { content: '✓'; font-size: .78rem; font-weight: 700; line-height: 1; color: #fff; }
.et-authform .et-checks .et-check:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(25,98,144,.22); }
.et-authform .et-checks .et-check input { margin-top: 0; }
/* The native box is only hidden where :has() can render the selected state —
   without it the checkbox stays visible and the field still works. */
@supports selector(:has(*)) {
    .et-authform .et-checks .et-check input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
}

.et-check--terms { margin: 0 0 14px; }
.et-tag { font-size: .66rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--et-muted); background: var(--et-bg-soft); border: 1px solid var(--et-line); padding: 2px 8px; border-radius: 999px; vertical-align: middle; margin-left: 4px; }
.et-req { color: var(--et-danger); font-weight: 700; }

/* Light promo panel (right) — enterprise, airy. */
.et-authsplit__promo { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 44px 24px 44px 40px; background: linear-gradient(160deg, #f7fafc 0%, #eaf1f6 100%); border-left: 1px solid var(--et-line); overflow: hidden; }
.et-authsplit__promo::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(520px 260px at 100% 0%, rgba(255,204,0,.12), transparent 60%), radial-gradient(460px 240px at 0% 100%, rgba(25,98,144,.09), transparent 60%); }
.et-promo { position: relative; width: 100%; max-width: 468px; }
.et-promo__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--et-display); font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--et-blue); background: #fff; border: 1px solid var(--et-line); padding: 5px 13px; border-radius: 999px; margin-bottom: 22px; box-shadow: 0 2px 8px rgba(15,60,88,.05); }
.et-promo__eyebrow::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--et-amber); }
.et-promo__h { font-family: var(--et-display); font-weight: 800; color: var(--et-ink); font-size: clamp(1.6rem, 2.3vw, 2.1rem); line-height: 1.16; margin: 0 0 14px; letter-spacing: -.02em; }
.et-promo__h em { font-style: normal; color: var(--et-blue); }
.et-promo__p { color: var(--et-body); font-size: 1rem; line-height: 1.6; margin: 0 0 26px; }
.et-promo__list { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 14px; }
.et-promo__list li { display: flex; gap: 13px; align-items: flex-start; }
.et-promo__list .ck { flex: 0 0 auto; width: 27px; height: 27px; border-radius: 8px; background: #fff; border: 1px solid var(--et-line); color: #2fa36b; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; box-shadow: 0 2px 6px rgba(15,60,88,.05); }
.et-promo__list strong { display: block; font-family: var(--et-display); font-weight: 600; color: var(--et-ink); font-size: .96rem; }
.et-promo__list span { color: var(--et-muted); font-size: .86rem; }
/* Testimonial as a raised card: an amber rule on a tinted panel read as an
   afterthought, so it now lifts off the background with its own surface, a
   decorative quote mark and an attributed author. */
.et-promo__quote { position: relative; margin: 0; padding: 24px 26px 20px; background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: 0 10px 28px rgba(19,74,109,.08); }
/* Sized in em against a fixed block so the glyph's own leading can't shift the
   text below it — a line-height hack drifted between fonts and zoom levels. */
.et-promo__quote::before { content: '”'; display: block; height: 22px; font-family: var(--et-display); font-weight: 800; font-size: 2.1rem; line-height: 1; color: var(--et-amber); margin-bottom: 6px; }
/* The legacy CDN style.css paints every <blockquote> with a grey panel and
   drops a Font Awesome quote glyph at top-left via ::before — on this card it
   sat straight on top of the text. Both are neutralised here. */
.et-promo__quote blockquote { position: relative; margin: 0 0 17px; padding: 0; border: 0; background: none; color: var(--et-ink); font-size: .97rem; line-height: 1.62; }
.et-promo__quote blockquote::before { content: none; }
.et-promo__cite { display: flex; align-items: center; gap: 12px; padding-top: 15px; border-top: 1px solid var(--et-line); }
.et-promo__avatar { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(150deg, var(--et-blue), var(--et-navy)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--et-display); font-weight: 700; font-size: .79rem; letter-spacing: .02em; }
.et-promo__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.et-promo__who strong { font-family: var(--et-display); font-weight: 600; color: var(--et-ink); font-size: .88rem; }
.et-promo__who span { color: var(--et-muted); font-size: .8rem; }

/* account / dashboard pages */
/* `minmax(0, 1fr)`, not `1fr`: a grid track sizes to `min-width: auto` by default,
   so a wide child — the bookings table, which is deliberately wider than the
   column and scrolls inside its own wrapper — stretched the track instead, pushed
   the content past the container and left the page looking off-centre with its
   right edge cut off. Pinning the minimum to 0 lets the wrapper scroll, which is
   what it was there for. */
.et-account { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 26px; align-items: start; }
.et-side { background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow-sm); padding: 12px; position: sticky; top: calc(var(--et-header-h, 113px) + 14px); }
.et-side a { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-radius: var(--et-radius-sm); color: var(--et-navy); font-family: var(--et-display); font-weight: 600; font-size: .93rem; }
.et-side a:hover { background: var(--et-bg-soft); }
.et-side a.is-active { background: var(--et-navy); color: #fff; }
.et-side a i { width: 18px; text-align: center; }

/* Section counts. Pushed to the right edge of the row so the numbers line up in
   a column of their own and the labels stay readable as a list. */
.et-side__n {
    margin-left: auto; min-width: 22px; padding: 1px 7px; border-radius: 999px;
    background: #eef3f7; color: #4e6577; font-family: var(--et-font); font-weight: 700;
    font-size: .72rem; text-align: center; line-height: 1.5;
}
.et-side a.is-active .et-side__n { background: rgba(255, 255, 255, .18); color: #fff; }
/* Something owed, not a size: unpaid orders and a waiting cart read as marks. */
.et-side__n--warn { background: #e08733; color: #fff; }
.et-side__n--accent { background: var(--et-amber); color: var(--et-navy, #134a6d); }
/* A section with nothing in it says so quietly — it is a prompt, not an alert. */
.et-side__n--zero { background: transparent; color: #b6c3cc; border: 1px dashed #dde6ec; }
.et-side a.is-active .et-side__n--zero { border-color: rgba(255, 255, 255, .25); color: #cfe0f5; }

@media (max-width: 900px) {
    .et-auth { grid-template-columns: 1fr; }
    .et-auth__brand { display: none; }
    /* Stacked register page: the promo panel keeps its pitch instead of being
       dropped, moving below the form (its DOM order) as a closing block. */
    .et-authsplit { grid-template-columns: 1fr; min-height: 0; }
    .et-authsplit__form { justify-content: center; padding: 36px 24px 28px; }
    .et-authsplit__promo { justify-content: flex-start; align-items: center; padding: 32px 24px 40px; border-left: 0; border-top: 1px solid var(--et-line); }
    .et-account { grid-template-columns: minmax(0, 1fr); }
    .et-side { position: static; display: flex; overflow-x: auto; }
}
@media (max-width: 520px) {
    .et-grid-2 { grid-template-columns: 1fr; }
    .et-auth__form { padding: 30px 18px; }
    .et-authsplit__form { padding: 26px 16px 22px; }
    .et-authsplit__promo { padding: 26px 16px 32px; }
}

/* ---- cart / checkout ----------------------------------------------------- */
.et-cart { display: grid; grid-template-columns: 1fr 384px; gap: 26px; align-items: start; }
.et-cart__summary { position: sticky; top: calc(var(--et-header-h, 113px) + 14px); }
.et-cartitem { background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow-sm); padding: 22px; margin-bottom: 18px; transition: box-shadow var(--et-trans); }
.et-cartitem:hover { box-shadow: var(--et-shadow); }
.et-cartitem__head { display: flex; gap: 14px; align-items: center; padding-bottom: 15px; border-bottom: 1px solid var(--et-line); margin-bottom: 15px; }
.et-cartitem__logo { width: 92px; height: 46px; object-fit: contain; }
.et-cartitem__provider { font-family: var(--et-display); font-weight: 700; color: var(--et-navy); }
.et-cartitem__price { font-family: var(--et-display); font-weight: 800; color: var(--et-navy); font-size: 1.22rem; white-space: nowrap; }
.et-cartitem__old { color: var(--et-muted); text-decoration: line-through; font-size: .9rem; margin-right: 6px; font-weight: 600; }
.et-route { display: flex; align-items: center; gap: 10px; font-family: var(--et-display); font-weight: 600; color: var(--et-ink); flex-wrap: wrap; }
.et-route img.flag { width: 22px; height: 15px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.et-route .sep { color: var(--et-amber); }
.et-meta { color: var(--et-muted); font-size: .9rem; display: flex; gap: 16px; flex-wrap: wrap; margin-top: 8px; }
.et-meta b { color: var(--et-navy); font-weight: 600; }
.et-summary__total { display: flex; justify-content: space-between; align-items: baseline; padding: 16px 0; border-top: 2px solid var(--et-line); margin-top: 8px; }
.et-summary__total .lbl { font-family: var(--et-display); font-weight: 600; color: var(--et-body); }
.et-summary__total .val { font-family: var(--et-display); font-weight: 800; color: var(--et-navy); font-size: 1.5rem; }

/* Empty-cart "order again" — full-body-width carousel with arrow navigation. */
.et-reorder { margin: 34px 0 0; width: 100vw; margin-left: calc(50% - 50vw); }
.et-reorder__head { text-align: center; margin-bottom: 18px; }
.et-reorder__head h2 { font-family: var(--et-display); font-weight: 800; color: var(--et-ink); font-size: 1.3rem; margin: 0 0 4px; }
.et-reorder__head p { color: var(--et-muted); margin: 0; font-size: .93rem; }
.et-carousel { position: relative; padding: 4px 62px; }
.et-carousel__track { display: flex; gap: 16px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; padding: 4px; scrollbar-width: none; -ms-overflow-style: none; }
.et-carousel__track::-webkit-scrollbar { display: none; }
.et-carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%; background: #fff; border: 1px solid var(--et-line); color: var(--et-navy); box-shadow: var(--et-shadow-sm); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; z-index: 3; transition: color var(--et-trans), border-color var(--et-trans), box-shadow var(--et-trans); }
.et-carousel__nav:hover { border-color: var(--et-blue); color: var(--et-blue); box-shadow: var(--et-shadow); }
.et-carousel__nav--prev { left: 12px; }
.et-carousel__nav--next { right: 12px; }
.et-reorder__card { flex: 0 0 280px; scroll-snap-align: start; background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow-sm); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 12px; transition: box-shadow var(--et-trans), border-color var(--et-trans); }
.et-reorder__card:hover { box-shadow: var(--et-shadow); border-color: #d5e0e8; }
.et-reorder__route { display: flex; align-items: center; gap: 10px; }
.et-reorder__leg { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.et-reorder__leg .flag { width: 22px; height: auto; border-radius: 3px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.05); }
.et-reorder__leg strong { display: block; font-family: var(--et-display); font-weight: 600; color: var(--et-ink); font-size: .92rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-reorder__leg small { color: var(--et-muted); font-size: .78rem; }
.et-reorder__arrow { color: var(--et-blue); font-size: .82rem; flex: 0 0 auto; }
.et-reorder__meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .82rem; color: var(--et-muted); border-top: 1px solid var(--et-line); padding-top: 10px; }
.et-reorder__date { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.et-reorder__date i { font-size: .78rem; }
.et-reorder__card .et-btn { margin-top: auto; }

/* Recommended-services upsell block (reusable across cart / thankyou / etc.). */
.et-upsell { margin: 36px 0 0; }
.et-upsell__head { text-align: center; margin-bottom: 18px; }
.et-upsell__head h2 { font-family: var(--et-display); font-weight: 800; color: var(--et-ink); font-size: 1.3rem; margin: 0 0 4px; }
.et-upsell__head p { color: var(--et-muted); margin: 0; font-size: .93rem; }
.et-upsell__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.et-upsell__card { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); box-shadow: var(--et-shadow-sm); padding: 20px; transition: box-shadow var(--et-trans), border-color var(--et-trans), transform var(--et-trans); }
.et-upsell__card:hover { box-shadow: var(--et-shadow); border-color: #d5e0e8; transform: translateY(-2px); }
.et-upsell__ic { width: 44px; height: 44px; border-radius: 12px; background: var(--et-bg-soft); color: var(--et-blue); display: inline-flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 auto; }
.et-upsell__body { display: flex; flex-direction: column; gap: 3px; flex: 1; }
.et-upsell__card strong { font-family: var(--et-display); font-weight: 700; color: var(--et-ink); font-size: 1rem; }
.et-upsell__card small { color: var(--et-muted); font-size: .85rem; line-height: 1.45; }
.et-upsell__cta { display: inline-flex; align-items: center; gap: 6px; color: var(--et-blue); font-family: var(--et-display); font-weight: 600; font-size: .88rem; }
.et-upsell__cta i { font-size: .78rem; transition: transform var(--et-trans); }
.et-upsell__card:hover .et-upsell__cta i { transform: translateX(3px); }
.et-pay { border: 1.5px solid var(--et-line); border-radius: var(--et-radius-sm); padding: 12px 14px; margin-bottom: 10px; cursor: pointer; display: flex; align-items: center; gap: 10px; transition: border-color var(--et-trans); }
.et-pay:hover { border-color: var(--et-blue); }
.et-pay input { accent-color: var(--et-blue); width: 17px; height: 17px; }
.et-empty { text-align: center; padding: 60px 20px; }
.et-empty img { max-width: 220px; opacity: .9; margin-bottom: 18px; }
@media (max-width: 900px) { .et-cart { grid-template-columns: 1fr; } .et-cart__summary { position: static; } }

/* ---- widgets (routes / partners / newsletter / my-routes) ---------------- */
.et-routes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.et-rcard { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); padding: 18px 20px; box-shadow: var(--et-shadow-sm); transition: all var(--et-trans); }
.et-rcard:hover { transform: translateY(-4px); box-shadow: var(--et-shadow); border-color: transparent; }
.et-rcard__route { font-family: var(--et-display); font-weight: 700; color: var(--et-navy); font-size: 1.02rem; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.et-rcard__route img { width: 22px; height: 15px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.06); }
.et-rcard__route .arw { color: var(--et-amber); }
.et-rcard__meta { font-size: .82rem; color: var(--et-muted); margin-top: 4px; }
.et-rcard__meta b { color: var(--et-blue); }
.et-rcard__cta { flex: 0 0 auto; }
.et-badge-rank { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; background: var(--et-amber); color: var(--et-navy); font-family: var(--et-display); font-weight: 800; font-size: .82rem; margin-right: 4px; }

.et-partners { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px 40px; }
.et-partners img { height: 42px; max-width: 130px; object-fit: contain; filter: grayscale(100%); opacity: .62; transition: all var(--et-trans); }
.et-partners img:hover { filter: grayscale(0); opacity: 1; }

.et-news { background: linear-gradient(120deg, var(--et-navy) 0%, var(--et-navy-600) 100%); border-radius: 22px; padding: 44px 48px; color: #fff; display: grid; grid-template-columns: 1fr auto; gap: 26px; align-items: center; box-shadow: var(--et-shadow-lg); }
.et-news h3 { font-family: var(--et-display); font-weight: 800; color: #fff; font-size: 1.6rem; margin: 0 0 6px; }
.et-news p { color: #b8cede; margin: 0; }
.et-news__form { display: flex; gap: 10px; min-width: 340px; }
.et-news__form input { flex: 1; padding: 13px 16px; border-radius: var(--et-radius-pill); border: 1.5px solid rgba(255,255,255,.2); background: rgba(255,255,255,.1); color: #fff; font-size: .95rem; }
.et-news__form input::placeholder { color: #a9c2d4; }
.et-news__form input:focus { outline: none; border-color: var(--et-amber); background: rgba(255,255,255,.15); }
.et-news__msg { margin-top: 10px; font-size: .9rem; font-weight: 600; color: var(--et-amber); min-height: 20px; }
/* subscribe outcome: success / already-subscribed / failure, on the navy panel */
.et-news__msg.is-success { color: #7ee2a8; }
.et-news__msg.is-info { color: var(--et-amber); }
.et-news__msg.is-danger { color: #ff9a9a; }
/* newsletter preference panel in the account: state line + its own message box */
.et-newsstate { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 1px solid var(--et-line, #e2e9ef); border-radius: 12px; background: #f8fafc; margin: 4px 0 6px; }
.et-newsstate__dot { width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
.et-newsstate__dot--on { background: #1e9e5a; box-shadow: 0 0 0 4px rgba(30,158,90,.15); }
.et-newsstate__dot--off { background: #b6c2cc; box-shadow: 0 0 0 4px rgba(182,194,204,.18); }
.et-newsstate__label { font-weight: 700; color: #23282d; }
.et-newsstate__meta { font-size: .85rem; color: #7c8a95; margin-top: 2px; word-break: break-all; }
#zone_newsletter .et-news__msg { color: #23282d; margin-top: 12px; }
#zone_newsletter .et-news__msg.is-success { color: #1e7a4e; }
#zone_newsletter .et-news__msg.is-info { color: #8a6d1f; }
#zone_newsletter .et-news__msg.is-danger { color: var(--et-danger, #c0392b); }
.et-news__form input.is-invalid { border-color: #ff9a9a; background: rgba(255,120,120,.12); }

.et-myroutes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.et-mrcard { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff; border: 1px solid var(--et-line); border-left: 4px solid var(--et-amber); border-radius: var(--et-radius-sm); padding: 16px 18px; box-shadow: var(--et-shadow-sm); }

@media (max-width: 900px) { .et-routes { grid-template-columns: 1fr 1fr; } .et-news { grid-template-columns: 1fr; } .et-news__form { min-width: 0; } .et-myroutes { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .et-routes { grid-template-columns: 1fr; } .et-news__form { flex-direction: column; } }

/* ---- enterprise dark header (uses the real white e-Tir logo) ------------- */
.et-header { background: #0f3c58; background-image: linear-gradient(180deg,#0f3c58,#123f5e); border-bottom: 1px solid rgba(255,255,255,.08); }
.et-topbar { background: #0a2c42; color: #a9c2d4; }
.et-brand img { height: 40px; }
.et-nav__links > li > a { color: #dbe8f0; }
.et-nav__links > li > a:hover, .et-nav__links > li > a.is-active { background: rgba(255,255,255,.09); color: #ffcc00; }
.et-lang__toggle { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }
.et-lang__toggle:hover { border-color: #ffcc00; }
/* On the navy header a low-opacity white wash disappeared into the background —
   the circle has to be legible as a control, so it gets a solid light fill with a
   navy glyph rather than another translucent tint. Amber on hover keeps it in the
   same interaction language as the rest of the header. */
.et-iconbtn { background: #eaf1f6; border-color: #eaf1f6; color: #134a6d; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.et-iconbtn:hover { background: #ffcc00; color: #134a6d; border-color: #ffcc00; }
.et-iconbtn i { font-size: 1.02rem; }
/* Matched to .et-iconbtn above — the two sit side by side in the header bar and
   would look mismatched if one were solid and the other a translucent wash. */
.et-user { background: #eaf1f6; border-color: #eaf1f6; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.et-user__name { color: #134a6d; }
/* The header is itself an .et-scope, so the anchor-colour guards above
   (.et-scope a.et-btn--ghost, specificity 0-2-1) outrank a plain
   `.et-header .et-btn--ghost` (0-2-0) and would repaint the login button navy
   on the navy header — invisible. Match on the anchor here too so the dark-header
   colours win. */
.et-header .et-btn--ghost,
.et-header.et-scope a.et-btn--ghost { color: #fff; border-color: rgba(255,255,255,.28); }
.et-header .et-btn--ghost:hover,
.et-header.et-scope a.et-btn--ghost:hover { border-color: #ffcc00; color: #ffcc00; }
/* Register CTA on the dark navy header: the default blue (--et-blue) has too
   little contrast against #0f3c58, so use the amber accent — high contrast and
   a clear primary-action hierarchy next to the ghost "login" button. */
.et-header .et-btn--primary,
.et-header.et-scope a.et-btn--primary { background: var(--et-amber); color: var(--et-navy); box-shadow: 0 8px 20px rgba(253,194,0,.28); }
.et-header .et-btn--primary:hover,
.et-header.et-scope a.et-btn--primary:hover { background: var(--et-amber-600); color: var(--et-navy); }
.et-burger { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); }
.et-burger span, .et-burger span::before, .et-burger span::after { background: #fff; }
@media (max-width: 768px){ .et-nav__mobile-open .et-nav__links { background: #0f3c58; } .et-nav__mobile-open .et-nav__links > li > a { color: #dbe8f0; } }

/* =============================================================================
   Enterprise elevation — announce bar, KPIs, stats, showcase, testimonials,
   scroll-reveal. Layered on top of the base theme.
   ========================================================================== */

/* scroll-reveal — gated behind .js-reveal so content stays fully visible if JS
   is off or fails (progressive enhancement; JS adds .js-reveal to <html> at once). */
.js-reveal .et-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.4,0,.2,1), transform .7s cubic-bezier(.4,0,.2,1); will-change: opacity, transform; }
.js-reveal .et-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){ .js-reveal .et-reveal { opacity:1; transform:none; transition:none; } }

/* announcement bar */
.et-announce { background: #ffcc00; color: #134a6d; font-family: var(--et-display); font-weight: 600; font-size: .86rem; }
.et-announce__in { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 9px 44px 9px 16px; position: relative; text-align: center; }
.et-announce a { color: #134a6d; text-decoration: underline; font-weight: 700; }
.et-announce__x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); cursor: pointer; border: 0; background: transparent; color: #134a6d; font-size: 16px; line-height: 1; opacity: .7; }
.et-announce__x:hover { opacity: 1; }

/* hero KPI glass cards */
.et-hero__kpis { position: absolute; left: -18px; bottom: 24px; display: grid; gap: 12px; }
.et-kpi { display: flex; align-items: center; gap: 12px; background: rgba(255,255,255,.10); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.18); border-radius: 14px; padding: 12px 16px; box-shadow: 0 12px 30px rgba(0,0,0,.25); }
.et-kpi__ic { width: 38px; height: 38px; border-radius: 10px; background: rgba(255,204,0,.18); display: inline-flex; align-items: center; justify-content: center; color: #ffcc00; }
/* Both are <span>s in the markup, so without this they render on one line and
   the figure runs straight into its label: "166,97 €Puttgarden → Rødby". */
.et-kpi__n { display: block; font-family: var(--et-display); font-weight: 800; color: #fff; font-size: 1.05rem; line-height: 1; }
.et-kpi__l { display: block; margin-top: 4px; font-size: .74rem; color: #b8c8e0; }
.et-hero__trust { display: flex; align-items: center; gap: 14px; margin-top: 26px; color: #9db2d2; font-size: .84rem; }
.et-hero__trust .stars { color: #ffcc00; letter-spacing: 1px; }

/* stats / metrics band */
.et-stats { background: #ffffff; border: 1px solid var(--et-line); border-radius: 18px; box-shadow: var(--et-shadow); display: grid; grid-template-columns: repeat(4, 1fr); overflow: hidden; margin-top: -46px; position: relative; z-index: 3; }
.et-stat-cell { padding: 30px 26px; text-align: center; border-right: 1px solid var(--et-line); }
.et-stat-cell:last-child { border-right: 0; }
.et-stat-cell .n { font-family: var(--et-display); font-weight: 800; font-size: 2.3rem; color: var(--et-navy); line-height: 1; }
.et-stat-cell .n span { color: var(--et-amber); }
.et-stat-cell .l { color: var(--et-muted); font-size: .9rem; margin-top: 8px; }

/* product showcase (text + UI mockup) */
.et-showcase { display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: center; }
.et-showcase--rev { grid-template-columns: 1.1fr 1fr; }
.et-showcase__art img { width: 100%; height: auto; border-radius: 16px; box-shadow: var(--et-shadow-lg); border: 1px solid var(--et-line); }
.et-checklist { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 14px; }
.et-checklist li { display: flex; gap: 12px; align-items: flex-start; color: var(--et-body); }
.et-checklist .ck { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(47,163,107,.12); color: #2fa36b; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; }
.et-checklist strong { color: var(--et-ink); font-family: var(--et-display); }

/* testimonials */
.et-quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.et-qcard { background: #fff; border: 1px solid var(--et-line); border-radius: var(--et-radius); padding: 28px; box-shadow: var(--et-shadow-sm); display: flex; flex-direction: column; }
.et-qcard .stars { color: #ffcc00; letter-spacing: 1px; margin-bottom: 12px; }
.et-qcard p { color: var(--et-body); font-size: .98rem; line-height: 1.65; margin: 0 0 20px; }
.et-qcard__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.et-qcard__av { width: 44px; height: 44px; border-radius: 50%; background: var(--et-navy); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--et-display); font-weight: 700; }
.et-qcard__n { font-family: var(--et-display); font-weight: 700; color: var(--et-navy); font-size: .95rem; }
.et-qcard__c { color: var(--et-muted); font-size: .84rem; }

@media (max-width: 991px){ .et-stats { grid-template-columns: repeat(2,1fr); } .et-stat-cell:nth-child(2){border-right:0;} .et-showcase, .et-showcase--rev { grid-template-columns: 1fr; } .et-quotes { grid-template-columns: 1fr; } .et-hero__kpis { display:none; } }

/* ---- premium page header (all inner pages) ------------------------------- */


/* ---- account dashboard header (KPI cards) -------------------------------- */
.et-dash { position: relative; overflow: hidden; background: linear-gradient(135deg,#0f3c58 0%,#134a6d 60%,#196290 100%); color: #fff; padding: 38px 0 34px; }
.et-dash::before { content:''; position:absolute; inset:0; background: radial-gradient(620px 260px at 88% -30%, rgba(255,204,0,.12), transparent 60%); pointer-events:none; }
.et-dash::after { content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background: linear-gradient(90deg,#ffcc00,rgba(255,204,0,0)); }
.et-dash > .et-container { position: relative; z-index: 1; }
.et-dash__top { display: flex; align-items: center; gap: 15px; margin-bottom: 22px; }
.et-dash__av { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; background: #ffcc00; color: #134a6d; font-family: var(--et-display); font-weight: 800; font-size: 1.25rem; display: flex; align-items: center; justify-content: center; }
.et-dash__hi { font-family: var(--et-display); font-weight: 800; font-size: 1.5rem; color: #fff; line-height: 1.1; }
.et-dash__sub { color: #a9c2d4; font-size: .9rem; margin-top: 2px; }
.et-dash__kpis { display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: 14px; }
.et-dashkpi { display: flex; align-items: center; gap: 13px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; padding: 15px 18px; text-decoration: none; transition: all var(--et-trans); }
a.et-dashkpi:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.et-dashkpi__ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; background: rgba(255,204,0,.16); color: #ffcc00; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; }
.et-dashkpi__n { font-family: var(--et-display); font-weight: 800; font-size: 1.55rem; color: #fff; line-height: 1; }
.et-dashkpi__l { font-size: .8rem; color: #a9c2d4; margin-top: 3px; }
.et-dashkpi--cta { background: #ffcc00; border-color: #ffcc00; color: #134a6d; font-family: var(--et-display); font-weight: 700; justify-content: center; }
.et-dashkpi--cta:hover { background: #fdc200; }
@media (max-width: 900px){ .et-dash__kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px){ .et-dash__kpis { grid-template-columns: 1fr; } }

/* ---- dashboard chart + payment alert ------------------------------------ */
.et-alert-pay { display: flex; align-items: center; gap: 15px; background: #fff9e0; border: 1px solid #ffe08a; border-radius: 14px; padding: 16px 20px; margin-bottom: 24px; }
.et-alert-pay__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; background: #ffcc00; color: #134a6d; display: inline-flex; align-items: center; justify-content: center; font-size: 20px; }
.et-alert-pay__t { color: #7a5c00; font-weight: 600; flex: 1; }
.et-alert-pay__t b { color: #134a6d; }
.et-chart { display: flex; align-items: flex-end; gap: 14px; height: 160px; padding-top: 10px; }
.et-chart__col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.et-chart__bar { width: 100%; max-width: 48px; background: linear-gradient(180deg,#2b8fc7,#196290); border-radius: 8px 8px 0 0; min-height: 4px; }
.et-chart__bar.is-top { background: linear-gradient(180deg,#ffcc00,#fdc200); }
.et-chart__v { font-family: var(--et-display); font-weight: 700; font-size: .82rem; color: var(--et-navy); }
.et-chart__l { font-size: .74rem; color: var(--et-muted); }

/* ---- notifications dropdown (header bell) -------------------------------- */
.et-notif__menu { width: 344px; max-height: 430px; overflow-y: auto; }
.et-notif__head { padding: 8px 11px 8px; font-family: var(--et-display); font-weight: 700; color: var(--et-navy); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--et-line); margin-bottom: 4px; }
.et-notif__menu a.et-notif__item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 11px; }
.et-notif__ic { width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 14px; }
.et-notif__ic--proof { background: #fdecec; color: #c0393d; }
.et-notif__ic--await { background: #eef3fa; color: #196290; }
.et-notif__ic--cart { background: #fff9e0; color: #9a7b1c; }
.et-notif__t { font-size: .88rem; color: var(--et-body); font-weight: 500; line-height: 1.4; }
.et-notif__empty { padding: 22px; text-align: center; color: var(--et-muted); font-size: .9rem; }
.et-notif__ic--profile { background: #eef3fa; color: #196290; }
.et-notif__ic--route { background: #e8f6ef; color: #2fa36b; }
.et-notif__ic--company { background: #fdecec; color: #c0393d; }

/* =============================================================================
   Enterprise data table + KPI row + toolbar + pagination (orders page)
   ========================================================================== */
.et-kpirow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 24px; }
.et-kpicard { background: #fff; border: 1px solid var(--et-line); border-radius: 14px; padding: 19px 20px; box-shadow: var(--et-shadow-sm); display: flex; gap: 14px; align-items: center; }
.et-kpicard__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; }
.et-kpicard__ic--blue { background: #eef3fa; color: var(--et-blue); }
.et-kpicard__ic--amber { background: #fff9e0; color: #9a7b1c; }
.et-kpicard__ic--green { background: #e8f6ef; color: #2fa36b; }
.et-kpicard__ic--red { background: #fdecec; color: #c0393d; }
.et-kpicard__n { font-family: var(--et-display); font-weight: 800; font-size: 1.5rem; color: var(--et-navy); line-height: 1; }
.et-kpicard__l { font-size: .82rem; color: var(--et-muted); margin-top: 3px; }

.et-toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; background: #fff; border: 1px solid var(--et-line); border-radius: 14px; padding: 13px 15px; box-shadow: var(--et-shadow-sm); margin-bottom: 20px; }
.et-toolbar__search { position: relative; flex: 1; min-width: 220px; }
.et-toolbar__search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--et-muted); }
.et-toolbar__search .et-input { padding-left: 38px; }
.et-toolbar .et-select { width: auto; min-width: 190px; }

/* The horizontal scroll has to be visible or the table just looks cut off. The
   two gradient pairs are the classic pure-CSS scroll shadow: the white halves are
   attached to the scroll container (so they sit at the ends and hide the shadow
   there), the dark halves to the content (so they appear only once there is
   something scrolled past). No JS, no scroll listener. */
.et-table-wrap {
    background:
        linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center,
        linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center,
        linear-gradient(to right, rgba(19, 74, 109, .13), rgba(19, 74, 109, 0)) left center,
        linear-gradient(to left, rgba(19, 74, 109, .13), rgba(19, 74, 109, 0)) right center;
    background-color: #fff;
    background-repeat: no-repeat;
    background-size: 42px 100%, 42px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
    border: 1px solid var(--et-line); border-radius: 14px; box-shadow: var(--et-shadow-sm); overflow-x: auto;
}
.et-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.et-table thead th { text-align: left; font-family: var(--et-display); font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--et-muted); padding: 14px 18px; border-bottom: 1px solid var(--et-line); background: var(--et-bg-soft); white-space: nowrap; }
.et-table tbody td { padding: 15px 18px; border-bottom: 1px solid var(--et-line); font-size: .92rem; color: var(--et-body); vertical-align: middle; }
.et-table tbody tr:last-child td { border-bottom: 0; }
.et-table tbody tr:hover { background: var(--et-bg-soft); }
.et-table__nr { font-family: var(--et-display); font-weight: 700; color: var(--et-navy); }
.et-table__total { font-family: var(--et-display); font-weight: 700; color: var(--et-navy); white-space: nowrap; }
.et-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; white-space: nowrap; }
.et-tbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--et-line); background: #fff; color: var(--et-navy); transition: all var(--et-trans); text-decoration: none; }
.et-tbtn:hover { background: var(--et-blue); color: #fff; border-color: var(--et-blue); }
.et-tbtn--amber:hover { background: var(--et-amber); color: var(--et-navy); border-color: var(--et-amber); }

.et-pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.et-pagination__info { color: var(--et-muted); font-size: .88rem; }
.et-pagination__links { display: flex; gap: 6px; flex-wrap: wrap; }
/* Buttons, not links: paging changes how the same page is shown, so it puts
   nothing in the address bar. The appearance is the one the links had. */
.et-pagination a, .et-pagination button, .et-pagination .pg { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border-radius: 9px; border: 1px solid var(--et-line); background: #fff; color: var(--et-navy); font-family: inherit; font-weight: 600; font-size: .9rem; text-decoration: none; cursor: pointer; }
.et-pagination a:hover, .et-pagination button:not(:disabled):hover { border-color: var(--et-blue); color: var(--et-blue); }
.et-pagination .is-active { background: var(--et-navy); color: #fff; border-color: var(--et-navy); }
.et-pagination .is-disabled, .et-pagination button:disabled { opacity: .45; pointer-events: none; }
.et-orders-empty { text-align: center; padding: 56px 20px; color: var(--et-muted); }
.et-orders-empty i { font-size: 40px; color: var(--et-line); margin-bottom: 14px; }
@media (max-width: 900px){ .et-kpirow { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px){ .et-kpirow { grid-template-columns: 1fr; } }

/* ---- profile / account settings ----------------------------------------- */
.et-profcard { position: relative; overflow: hidden; background: linear-gradient(135deg,#0f3c58,#134a6d 60%,#196290); color: #fff; border-radius: 16px; padding: 26px 30px; display: flex; gap: 20px; align-items: center; margin-bottom: 24px; box-shadow: var(--et-shadow); }
.et-profcard::before { content:''; position:absolute; inset:0; background: radial-gradient(500px 220px at 92% -30%, rgba(255,204,0,.14), transparent 60%); pointer-events:none; }
.et-profcard > * { position: relative; z-index: 1; }
.et-profcard__av { flex: 0 0 auto; width: 76px; height: 76px; border-radius: 50%; background: #ffcc00; color: #134a6d; font-family: var(--et-display); font-weight: 800; font-size: 1.8rem; display: flex; align-items: center; justify-content: center; }
.et-profcard__name { font-family: var(--et-display); font-weight: 800; font-size: 1.4rem; color: #fff; line-height: 1.1; }
.et-profcard__meta { color: #a9c2d4; font-size: .9rem; margin-top: 7px; display: flex; gap: 18px; flex-wrap: wrap; }
.et-profcard__meta span { display: inline-flex; align-items: center; gap: 7px; }
.et-badge-ok { display: inline-flex; align-items: center; gap: 6px; background: rgba(47,163,107,.22); color: #86e3b1; padding: 5px 13px; border-radius: 999px; font-size: .82rem; font-weight: 600; margin-left: auto; }
.et-complist { display: grid; gap: 10px; }
.et-compitem { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--et-line); border-radius: 10px; background: var(--et-bg-soft); }
.et-compitem__ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; background: #fff; border: 1px solid var(--et-line); display: inline-flex; align-items: center; justify-content: center; color: var(--et-blue); }
.et-compitem__name { font-family: var(--et-display); font-weight: 600; color: var(--et-navy); }
@media (max-width: 560px){ .et-profcard { flex-direction: column; text-align: center; } .et-badge-ok { margin: 0; } }

/* ==================================================================
   Async UI: zone loaders, spinner, generic modal, detail partials
   ================================================================== */
@keyframes et-spin { to { transform: rotate(360deg); } }
@keyframes et-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }

.et-spin { display: inline-block; width: 34px; height: 34px; border: 3px solid #d9e2e9; border-top-color: var(--et-blue, #134a6d); border-radius: 50%; animation: et-spin .7s linear infinite; }
.et-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; padding: 30px; }
.et-zone { position: relative; }
.et-zone--loading { min-height: 120px; }
.et-zone-err { display: flex; align-items: center; justify-content: center; min-height: 90px; color: #a3282c; font-size: 22px; }
.et-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.et-btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; animation: et-spin .7s linear infinite; }
/* The amber button is light: a white spinner on it is invisible. */
.et-btn--accent.is-loading::after, .et-btn--ghost.is-loading::after { border-color: rgba(19,74,109,.25); border-top-color: var(--et-navy); }

/* skeleton placeholder */
.et-skel { background: linear-gradient(90deg,#eef2f5 25%,#f6f9fb 50%,#eef2f5 75%); background-size: 800px 100%; animation: et-shimmer 1.2s infinite linear; border-radius: 8px; }
.et-skel-line { height: 14px; margin: 9px 0; border-radius: 6px; }

/* Dialogs are Bootstrap 5 modals (see /assets/vendor/bootstrap5/modal.css); the
   shell, backdrop and animation come from there. What is left here is only the
   e-Tir skin over it: rounded corners, our shadow, and a body that keeps its
   height while the partial is still loading. */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 24px 70px rgba(9,30,45,.35); }
/* Modal header in the theme's navy, like every other panel head in the app.
   White was Bootstrap's default and it read as a strip of nothing above content
   that starts with a coloured band of its own. */
.modal-header {
    padding: 16px 22px; border-bottom: 0;
    background: linear-gradient(120deg, var(--et-blue, #134a6d), #0d3550);
    color: #fff;
}
.modal-title { font-family: var(--et-display); font-weight: 700; color: #fff; }
.modal-header .btn-close {
    /* The glyph is a black SVG; on navy it has to be the white one. */
    filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
    opacity: .8;
}
.modal-header .btn-close:hover { opacity: 1; }

/* Most modal contents (upload, fleet, driver, company, order detail…) ship their
   own `.et-dt__head`. app.js moves that node up into this header, so the dialog
   has one head carrying everything — eyebrow, title, badges — over the gradient
   that already lives here. The moved node drops its own background and padding:
   it is no longer a band, it is the contents of one. */
.modal-header--dt { align-items: flex-start; padding: 0; }
.modal-header--dt .et-dt__head { background: none; padding: 11px 8px 11px 20px; flex: 1 1 auto; min-width: 0; }
.modal-header--dt .modal-title { display: none; }
.modal-header--dt .btn-close { margin: 12px 16px 0 0; flex: 0 0 auto; }
/* A dialog head is a label, not a page title: the same markup reads at 1.5rem
   inside a panel, where it opens a whole screen, but a modal is already framed
   and narrow, so it is set two steps down here. */
.modal-header--dt .et-dt__title { font-size: .95rem; gap: 8px; }
.modal-header--dt .et-dt__eyebrow { font-size: .6rem; letter-spacing: .1em; }
@media (max-width: 560px) {
    .modal-header--dt .et-dt__title { font-size: .9rem; }
    .modal-header--dt .et-dt__head { padding: 10px 6px 10px 16px; }
}
.modal-body { padding: 22px 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid #eef2f5; gap: 10px; }
#etModalBody { min-height: 120px; padding: 0; }
#etModal .modal-body { padding: 0; }
#etModal .modal-header { padding: 14px 18px; }
@keyframes et-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes et-pop { from { transform: translateY(18px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }

/* detail partial (order + booking share these) */
.et-dt__head { background: linear-gradient(120deg,var(--et-blue,#134a6d),#0d3550); color: #fff; padding: 22px 26px; }
.et-dt__eyebrow { font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; opacity: .8; font-weight: 600; }
.et-dt__title { font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.5rem; margin: 3px 0 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.et-dt__badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: #fff; }
.et-dt__sub { margin-top: 10px; display: flex; gap: 22px; flex-wrap: wrap; font-size: .9rem; opacity: .95; }
.et-dt__sub b { font-weight: 700; }
/* The horizontal padding is a variable so a full-bleed child (the pinned action
   bar) can cancel it without hard-coding a figure that differs in the dialog. */
.et-dt__body { --et-dt-px: 26px; --et-dt-pb: 28px; padding: 24px var(--et-dt-px) var(--et-dt-pb); }
.et-dt__sec { margin-top: 22px; }
.et-dt__sec:first-child { margin-top: 0; }
.et-dt__sec-h { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--et-blue,#134a6d); font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.et-dt__sec-h::after { content: ""; flex: 1; height: 1px; background: #e6ecf1; }
.et-dt__grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(180px,1fr)); gap: 14px 20px; }
.et-dt__f { display: flex; flex-direction: column; gap: 3px; }
.et-dt__f-l { font-size: .74rem; text-transform: uppercase; letter-spacing: .05em; color: var(--et-muted,#7c8a95); font-weight: 600; }
.et-dt__f-v { font-size: .98rem; color: #223; font-weight: 600; word-break: break-word; }
.et-dt__route { border: 1px solid #e6ecf1; border-radius: 14px; padding: 16px 18px; margin-bottom: 14px; }
.et-dt__route-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.et-dt__route-name { font-family: Poppins, sans-serif; font-weight: 600; font-size: 1.05rem; color: var(--et-blue,#134a6d); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.et-dt__route-name img { width: 22px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.et-dt__route-price { font-family: Poppins, sans-serif; font-weight: 700; font-size: 1.15rem; color: #1d6f49; white-space: nowrap; }
.et-dt__empty { color: var(--et-muted,#7c8a95); text-align: center; padding: 30px; }

/* ==================================================================
   Mobile nav fix: the header's backdrop-filter turns it into a
   containing block for position:fixed, which broke the slide-in menu
   panel. Drop it on mobile so the panel is viewport-anchored again.
   ================================================================== */
@media (max-width: 768px) {
    .et-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: #0f3c58; }
    .et-nav__mobile-open .et-nav__links { height: 100dvh; }
}
.et-navbackdrop { position: fixed; inset: 0; background: rgba(9, 30, 45, .5); opacity: 0; visibility: hidden; transition: opacity .25s ease; z-index: 1035; }
.et-navbackdrop.is-open { opacity: 1; visibility: visible; }
body.et-mnav-lock { overflow: hidden; }
.et-burger.is-open span { background: transparent; }
.et-burger.is-open span::before { top: 0; transform: rotate(45deg); }
.et-burger.is-open span::after { top: 0; transform: rotate(-45deg); }

/* ==================================================================
   User dropdown: keep every label on a single line (wider + nowrap).
   Mobile drawer: show login / register for guests as buttons.
   ================================================================== */
#etUser .et-lang__menu { min-width: 226px; }
#etUser .et-lang__menu a { white-space: nowrap; }

@media (max-width: 768px) {
    .et-nav__mauth:first-of-type { margin-top: 14px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
    .et-nav__mobile-open .et-nav__mauth > a { text-align: center; border: 1px solid rgba(255, 255, 255, .28); border-radius: 10px; font-weight: 700; margin-top: 8px; }
    .et-nav__mobile-open .et-nav__mauth > a.is-primary { background: #ffcc00; color: #0f3c58; border-color: #ffcc00; }
    .et-nav__mobile-open .et-nav__mauth > a.is-primary:hover { background: #ffd633; color: #0f3c58; }
}

/* account sidebar section separator (posting-declaration group) */
.et-side__sep { margin: 10px 8px 4px; padding-top: 12px; border-top: 1px solid var(--et-line); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--et-muted); }

/* toast notifications (CRUD feedback) */
.et-toasts { position: fixed; top: 18px; right: 18px; z-index: 5000; display: flex; flex-direction: column; gap: 10px; max-width: 360px; }
.et-toast { display: flex; align-items: center; gap: 11px; background: #fff; border: 1px solid var(--et-line); border-left: 4px solid #2fa36b; border-radius: 12px; padding: 13px 16px; box-shadow: 0 14px 40px rgba(9,30,45,.18); font-size: .92rem; font-weight: 600; color: #223; opacity: 0; transform: translateX(20px); transition: all .3s cubic-bezier(.2,.8,.3,1); }
.et-toast.is-in { opacity: 1; transform: none; }
.et-toast i { font-size: 18px; }
.et-toast--success { border-left-color: #2fa36b; } .et-toast--success i { color: #2fa36b; }
.et-toast--danger { border-left-color: #e5484d; } .et-toast--danger i { color: #e5484d; }
.et-toast--info { border-left-color: #ffcc00; } .et-toast--info i { color: #d9a900; }

/* posting-declaration management shared bits */
.et-pdbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.et-pdbar h1 { font-family: var(--et-display); font-weight: 800; font-size: 1.5rem; margin: 0; color: var(--et-navy); }
.et-pdbar p { margin: 4px 0 0; color: var(--et-muted); font-size: .95rem; }
.et-form-note { background: #fff9e0; border: 1px solid #ffe08a; color: #7a5c00; border-radius: 10px; padding: 10px 14px; font-size: .86rem; font-weight: 600; margin-bottom: 18px; }
.et-fgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
@media (max-width: 640px) { .et-fgrid { grid-template-columns: 1fr; } }
.et-fgrid .et-col-2 { grid-column: 1 / -1; }

/* checkbox list inside forms (operation/transport types) */
.et-check { display: flex; align-items: center; gap: 8px; font-size: .92rem; font-weight: 500; color: #223; margin: 4px 0; cursor: pointer; }
.et-check input { width: 16px; height: 16px; accent-color: var(--et-blue, #134a6d); }
select.et-select[multiple] { padding: 6px; height: auto; }

/* ---------- accessibility ----------
   Keyboard affordances the theme was missing: a skip link, and a visible focus
   ring on the chrome (nav, dropdowns, footer, icon buttons). Buttons and inputs
   already had one; links did not. :focus-visible keeps the ring off mouse clicks. */
.et-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 2000;
    padding: 12px 20px; background: var(--et-blue, #134a6d); color: #fff;
    font-weight: 600; text-decoration: none; border-radius: 0 0 6px 0;
}
.et-skip-link:focus { left: 0; }

.et-scope a:focus-visible,
.et-iconbtn:focus-visible,
.et-footer a:focus-visible,
[role="menuitem"]:focus-visible {
    outline: 3px solid rgba(25, 98, 144, .55);
    outline-offset: 2px;
    border-radius: 3px;
}
/* On dark surfaces (navy footer, header topbar) the blue ring disappears. */
.et-footer a:focus-visible,
.et-topbar a:focus-visible {
    outline-color: rgba(255, 255, 255, .85);
}

/* ---------- shared form controls ----------
   Used by every form in the app (booking, cart, profile, fleet, driver,
   posting, contact), so these names stay generic and unscoped. */
.et-field { display: flex; flex-direction: column; min-width: 0; }
.et-field > label, .et-field > legend { font-size: .84rem; font-weight: 600; color: #33505f; margin-bottom: 6px; padding: 0; }
.et-field abbr { text-decoration: none; color: #c0393d; }
.et-field select, .et-field input { width: 100%; }
.et-field:has(select:disabled) > label { color: #9bacb7; }
fieldset.et-field { border: 0; margin: 0; padding: 0; }

/* Native controls, sized for a thumb. 16px prevents iOS zoom-on-focus. */
.et-select, .et-input {
    font: inherit; font-size: 16px; min-height: 44px;
    padding: 10px 12px; border: 1px solid #cfdae2; border-radius: 8px;
    background: #fff; color: #1d2b33; width: 100%;
    transition: border-color var(--et-trans), box-shadow var(--et-trans);
}
.et-select:hover:not(:disabled), .et-input:hover:not(:disabled) { border-color: #a9bece; }
.et-select:disabled { background: #f4f7f9; color: #9bacb7; }
.et-select:focus-visible, .et-input:focus-visible {
    outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 1px; border-color: var(--et-blue, #134a6d);
}

.et-radios { display: flex; gap: 10px; flex-wrap: wrap; }
.et-radio { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1px solid #cfdae2; border-radius: 8px; cursor: pointer; font-weight: 500; background: #fff; }
.et-radio:has(input:checked) { border-color: var(--et-blue, #134a6d); background: #f2f7fa; }
.et-radio input { accent-color: var(--et-blue, #134a6d); }

/* ---------- `hidden` has to win ----------
   `[hidden]` lives in the user-agent stylesheet, so any author rule with a
   `display` of its own beats it — and several here have one (`.et-error`,
   `.et-invalid`). The result was an empty error caption reserving a blank line
   under every field that has one: the booking form, the fleet and driver
   dialogs, the upload picker. Everything that toggles `el.hidden` from JS was
   toggling an attribute nothing acted on. */
[hidden] { display: none !important; }

.et-error { display: block; margin-top: 6px; color: #c0393d; font-size: .84rem; }
.et-input.has-error, .et-select.has-error { border-color: #c0393d; background: #fff8f8; }
.et-input.has-error:focus-visible, .et-select.has-error:focus-visible { outline-color: rgba(192, 57, 61, .45); }
.et-field__note { margin-top: 6px; font-size: .82rem; color: #8a5e12; background: #fff8e8; border: 1px solid #f2e2bd; border-radius: 6px; padding: 6px 9px; }

.et-disclose { border: 1px solid #e3eaef; border-radius: 10px; padding: 12px 14px; margin-top: 16px; background: #fafcfd; }
.et-disclose > summary { cursor: pointer; font-weight: 600; font-size: .9rem; color: #33505f; list-style: none; display: flex; align-items: center; gap: 8px; }
.et-disclose > summary::-webkit-details-marker { display: none; }
.et-disclose > summary::before { content: '+'; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; background: #eaf1f6; color: #33505f; display: grid; place-items: center; font-weight: 700; line-height: 1; }
.et-disclose[open] > summary::before { content: '–'; }

/* The cargo block keeps the disclosure's frame but none of its behaviour: it is
   always open, so it carries a heading instead of a summary. */
.et-cargo-box { margin-top: 14px; }
.et-cargo__title { margin: 0; font-family: var(--et-display); font-weight: 700; font-size: .85rem; color: #33505f; letter-spacing: .01em; }

/* Cargo details: three rows instead of seven stacked fields. Everything inside
   is one notch smaller and tighter than the required part of the form above —
   this is the optional section, and it should not out-weigh what is mandatory. */
.et-disclose--tight { padding: 10px 12px; margin-top: 12px; }
.et-disclose--tight > summary { font-size: .85rem; }
.et-cargo { display: grid; gap: 10px; margin-top: 12px; }
.et-cargo__state { border: 0; margin: 0 0 2px; padding: 0; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.et-cargo__state legend { float: none; width: auto; margin: 0; padding: 0; font-size: .78rem; font-weight: 600; color: #6a7c88; text-transform: uppercase; letter-spacing: .05em; }
/* Five controls on one row: the three yes/no answers, then the two numbers,
   which need less width than a label-bearing select. */
.et-cargo__row { display: grid; grid-template-columns: 1fr 1fr 1fr .8fr .8fr; gap: 10px; }
.et-cargo__desc { margin-top: 2px; }
.et-field--tight { margin-bottom: 0; }
.et-field--tight > label { font-size: .76rem; margin-bottom: 4px; color: #6a7c88; display: block; }
.et-field--tight .et-input,
.et-field--tight .et-select { padding: 8px 11px; font-size: .86rem; height: auto; min-height: 0; }
.et-unit { color: #9aa7b1; font-weight: 500; }
/* The dot and its word were nearly touching; a wider gap makes each option read
   as one thing you can point at, rather than a control with text stuck to it. */
.et-disclose--tight .et-radio { font-size: .85rem; gap: 12px; padding: 8px 16px; }
.et-disclose--tight .et-radio input { margin: 0; }
@media (max-width: 900px) { .et-cargo__row { grid-template-columns: 1fr 1fr 1fr; } }
@media (max-width: 620px) { .et-cargo__row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .et-cargo__row { grid-template-columns: 1fr; } }
.et-disclose > summary:focus-visible { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 2px; border-radius: 4px; }

/* Busy state: usable without a spinner library. */
.is-busy { opacity: .55; pointer-events: none; }

/* ---------- booking flow (/booking/ferry) ----------
   Two columns on desktop: the funnel and a sticky summary rail. Every class is
   prefixed `et-bk-` — the earlier markup borrowed `.et-step` and `.et-chip`,
   which this stylesheet already uses for the homepage tiles and the status
   pills, and their declarations leaked into the form (centred labels, pill
   padding on the departure buttons). Nothing here collides any more. */
.et-bk-section { padding: 28px 0 64px; background: var(--et-bg-soft); }
/* Legacy `body, p { font-family: 'Open Sans'; line-height: 26px; font-size: 15px }`
   leaks into every paragraph. Inside the flow, paragraphs follow the theme. */
.et-bk p { font-family: inherit; font-size: inherit; line-height: 1.55; }

.et-bk { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; }
.et-bk__main { min-width: 0; }
.et-bk__aside { min-width: 0; display: flex; flex-direction: column; gap: 16px; }

/* --- quote requested (step 3) ---------------------------------------------
   The end state for a crossing that has no live price: the request is logged,
   the form below is empty again, and this is the only thing on the page that
   still says what was asked for. Green, but a card in the flow rather than a
   toast — a toast disappears while the customer is still reading it. */
.et-bk-done {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px 18px; margin-bottom: 16px;
    background: #f4fbf7; border: 1px solid #bfe3d0; border-left: 4px solid #1e7a4e;
    border-radius: 12px;
}
.et-bk-done[hidden] { display: none; }
.et-bk-done:focus-visible { outline: 3px solid rgba(30, 122, 78, .35); outline-offset: 2px; }
.et-bk-done__icon {
    flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center;
    border-radius: 50%; background: #e8f6ee; color: #1e7a4e;
}
.et-bk-done__body { min-width: 0; flex: 1 1 auto; }
.et-bk-done__title { margin: 0 0 4px; font-size: 1rem; line-height: 1.3; text-transform: none; letter-spacing: -.01em; color: #12603c; }
.et-bk-done__text { margin: 0; color: #2f5b47; font-size: .89rem; line-height: 1.5; }
/* What was requested, kept next to the confirmation: the form no longer holds it. */
.et-bk-done__facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 11px 0 0; }
.et-bk-done__facts > div { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.et-bk-done__facts dt { margin: 0; font-size: .78rem; color: #6d8d7f; }
.et-bk-done__facts dd { margin: 0; font-size: .86rem; font-weight: 600; color: #23404f; overflow-wrap: anywhere; }
.et-bk-done__actions { margin-top: 14px; }

/* --- progress rail --- */
.et-bk-rail { display: flex; flex-wrap: wrap; gap: 6px 4px; list-style: none; margin: 0 0 18px; padding: 0; }
.et-bk-rail__i { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; color: #7d8f9c; font-size: .84rem; }
.et-bk-rail__n {
    flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
    background: #e4ebf0; color: #6f8493; display: grid; place-items: center;
    font-size: .76rem; font-weight: 700; line-height: 1;
}
.et-bk-rail__i.is-current { background: #fff; color: var(--et-navy, #134a6d); font-weight: 600; box-shadow: inset 0 0 0 1px #d5e2ea; }
.et-bk-rail__i.is-current .et-bk-rail__n { background: var(--et-blue, #196290); color: #fff; }
.et-bk-rail__i.is-done { color: #46727f; }
/* The number is replaced by a tick rather than hidden, so the rail keeps its width. */
.et-bk-rail__i.is-done .et-bk-rail__n { background: #d7f0e2; color: #24794f; font-size: 0; }
.et-bk-rail__i.is-done .et-bk-rail__n::after { content: '✓'; font-size: .74rem; }

/* --- step cards --- */
/* `padding: 0` is load-bearing: the legacy CDN stylesheet carries a bare
   `section { padding: 70px 0 }`, and every step here is a <section>. That rule
   added ~140px of dead space inside each card — the single biggest reason the
   page felt heavy. Same story for the uppercase: legacy `h2` is
   `text-transform: uppercase; letter-spacing: -1px`, which the theme's
   `.et-scope h2` never reset. */
.et-bk-step {
    padding: 0;
    background: #fff; border: 1px solid #e3eaef; border-radius: 12px;
    margin-bottom: 14px; overflow: hidden;
}
.et-bk-step[hidden] { display: none; }
.et-bk-step__head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid #eef3f6; background: #fcfdfe; }
.et-bk-step__num {
    flex: 0 0 26px; height: 26px; border-radius: 7px;
    background: var(--et-blue, #196290); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: .82rem; line-height: 1;
}
.et-bk-step__title { margin: 0; font-size: 1rem; line-height: 1.25; text-transform: none; letter-spacing: -.01em; }
.et-bk-step__body { padding: 18px; }
.et-bk-step__hint { color: #6a7c88; font-size: .88rem; margin: 0 0 12px; }
.et-bk-step__actions { margin-top: 18px; display: flex; justify-content: flex-end; }
.et-bk-step__actions .et-btn { width: 100%; }

/* A group of fields inside a booking step: what the group is about, one line on
   why it is asked, then the fields. A `fieldset`, because that is what a set of
   controls under a shared heading is — and its `legend` needs the float/width
   reset before it will sit like a normal heading. */
.et-bk-group { border: 0; margin: 0 0 20px; padding: 0; min-width: 0; }
.et-bk-group:last-of-type { margin-bottom: 0; }
.et-bk-group__h {
    float: none; width: auto; padding: 0; margin: 0 0 3px;
    display: flex; align-items: center; gap: 8px;
    font-family: var(--et-display); font-weight: 700; font-size: .92rem; color: var(--et-navy, #134a6d);
}
.et-bk-group__h i { color: #7fa3bb; font-size: .86rem; }
.et-bk-group__hint { margin: 0 0 13px; font-size: .82rem; line-height: 1.5; color: var(--et-muted, #7c8a95); }
/* The groups are separated by their own heading, not by a rule: two rules inside
   one step (the step already has a frame) reads as three panels, not one. */
.et-bk-group + .et-bk-group { border-top: 1px solid #eef2f5; padding-top: 18px; }

.et-bk-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
/* `.et-field { margin-bottom: 17px }` is the app-wide default; inside a grid it
   doubles the gap. */
.et-bk-grid > .et-field { margin-bottom: 0; }
.et-bk-grid--inset { margin-top: 14px; }

/* Read by assistive tech, drawn for nobody — the app had no such helper yet. */
.et-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- route picker (step 1) ------------------------------------------------
   The one control the rest of the funnel depends on. A native <select> gave
   sixty look-alike lines of "Port → Port (Country)"; this is a corridor picker:
   both ends side by side with their flags, the customer's own crossings first,
   and search over ports and countries. The <select> stays in the markup as the
   model and as the no-JS fallback — it only stops rendering once the script has
   built the button that replaces it. */
.et-rp { position: relative; }
.et-rp.is-ready .et-rp__native { display: none; }
.et-rp__row { display: flex; align-items: stretch; gap: 8px; }

.et-rp__btn {
    position: relative; flex: 1 1 auto; min-width: 0; font: inherit; text-align: left; cursor: pointer;
    display: flex; align-items: center; gap: 12px;
    min-height: 62px; padding: 9px 40px 9px 13px;
    background: #fff; border: 1px solid #cfdae2; border-radius: 8px; color: #1d2b33;
    transition: border-color var(--et-trans), box-shadow var(--et-trans);
}
.et-rp__btn:hover { border-color: #a9bece; }
.et-rp__btn:focus-visible { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 1px; border-color: var(--et-blue, #134a6d); }
.et-rp.is-open .et-rp__btn { border-color: var(--et-blue, #196290); box-shadow: 0 0 0 1px var(--et-blue, #196290) inset; }
.et-rp__btn.has-error { border-color: #c0393d; background: #fff8f8; }
.et-rp__btn.has-error:focus-visible { outline-color: rgba(192, 57, 61, .45); }
/* Empty, the control should read like the other fields on the row, not like a
   62px hole waiting to be filled. */
.et-rp__btn.is-empty { min-height: 44px; color: #8a9aa5; }
.et-rp__ph { font-size: .95rem; }

.et-rp__chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #7a8b96; display: flex; pointer-events: none; }
.et-rp.is-open .et-rp__chev { color: var(--et-blue, #196290); transform: translateY(-50%) rotate(180deg); }

/* The two ends, and the leg between them. On a narrow screen the corridor turns
   into two stacked lines — a truncated "Constanț… → Derinc…" helps nobody. */
.et-rp__corridor { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; flex-wrap: wrap; }
.et-rp__end { display: flex; align-items: center; gap: 8px; min-width: 0; }
.et-rp__endtext { display: flex; flex-direction: column; min-width: 0; }
.et-rp__flag { flex: 0 0 20px; width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(19, 74, 109, .12); }
.et-rp__port { font-weight: 600; font-size: .95rem; line-height: 1.25; color: #1d2b33; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-rp__country { font-size: .76rem; line-height: 1.3; color: #7a8b96; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-rp__arrow { flex: 0 0 auto; display: flex; color: #a9bece; }

.et-rp__meta { display: flex; flex-wrap: wrap; gap: 5px; flex: 0 0 auto; }
.et-rp__tag {
    font-size: .68rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    padding: 3px 8px; border-radius: 999px; white-space: nowrap;
    background: #eef3f6; color: #55707f; border: 1px solid #e0e9ef;
}
.et-rp__tag--pop { background: #eaf1f6; color: var(--et-navy, #134a6d); border-color: #d3e0e9; }
.et-rp__tag--warn { background: #fff8e8; color: #8a5e12; border-color: #f2e2bd; }

/* Swap and clear. Icon-only by design: they sit next to a control that already
   says what it holds, and both carry a label for assistive tech. */
.et-rp__side {
    flex: 0 0 44px; width: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid #cfdae2; border-radius: 8px; color: #55707f;
    transition: border-color var(--et-trans), color var(--et-trans), background var(--et-trans);
}
.et-rp__side:hover { border-color: var(--et-blue, #196290); color: var(--et-navy, #134a6d); background: #f7fafc; }
.et-rp__side:focus-visible { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 1px; }
.et-rp__side[hidden] { display: none; }

/* In <body> and fixed, like the calendar: `.et-bk-step` clips its own overflow,
   so an anchored popover would lose its bottom half to it. */
.et-rp__panel {
    position: fixed; z-index: 1100; top: 0; left: 0;
    display: flex; flex-direction: column; max-height: min(460px, 70vh);
    background: #fff; border: 1px solid #dbe4ea; border-radius: 12px;
    box-shadow: var(--et-shadow, 0 10px 30px rgba(19, 74, 109, .10)), 0 0 0 1px rgba(19, 74, 109, .02);
    overflow: hidden; text-align: left;
}
.et-rp__panel[hidden] { display: none; }

.et-rp__search { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid #eef3f6; color: #8a9aa5; }
.et-rp__q {
    flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; line-height: 1.4;
    border: 0; background: transparent; color: #1d2b33; padding: 0;
}
.et-rp__q:focus { outline: none; }
.et-rp__q::placeholder { color: #9bacb7; }

.et-rp__list { flex: 1 1 auto; overflow-y: auto; margin: 0; padding: 6px; list-style: none; overscroll-behavior: contain; }
.et-rp__grp {
    padding: 10px 10px 5px; font-size: .7rem; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #9bacb7;
}
/* Sticky headers: the atlas is sixty crossings long, and the country a row
   belongs to must stay readable while scrolling through it. */
.et-rp__grp { position: sticky; top: -6px; background: #fff; z-index: 1; }

.et-rp__opt {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 9px 10px; border-radius: 8px; cursor: pointer;
    border: 1px solid transparent;
}
.et-rp__opt.is-active { background: #f2f7fa; border-color: #d9e6ee; }
.et-rp__opt.is-chosen { background: #eaf1f6; border-color: #cddfea; }
.et-rp__opt.is-chosen .et-rp__port { color: var(--et-navy, #134a6d); }
.et-rp__opt mark { background: #fdf0c4; color: inherit; padding: 0 1px; border-radius: 2px; }
.et-rp__none { padding: 26px 14px; text-align: center; color: #7a8b96; font-size: .9rem; }

.et-rp__foot {
    margin: 0; padding: 9px 14px; border-top: 1px solid #eef3f6; background: #fbfdfe;
    font-size: .76rem; color: #7a8b96;
}

/* Under 640px an anchored popover would hang off the viewport, so it becomes a
   sheet near the top — the on-screen keyboard is up as soon as it opens. */
.et-rp__panel--sheet {
    top: 10px; left: 50%; transform: translateX(-50%);
    width: calc(100vw - 24px); max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px);
    box-shadow: var(--et-shadow-lg, 0 24px 60px rgba(19, 74, 109, .16));
}
.et-rp__panel--sheet .et-rp__opt { padding: 11px 10px; }

/* --- date picker (step 1) -------------------------------------------------
   Replaces <input type="date">, whose rendering (and date order) is the
   browser's to decide. Enterprise proportions: a fixed six-row grid so the
   panel never resizes between months, month/year as selects so a date a year
   out is one gesture, and ISO week numbers down the left edge — freight
   planning is scheduled in weeks. */
.et-dp { position: relative; }
.et-dp__input { padding-right: 42px; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.et-dp.is-open .et-dp__input { border-color: var(--et-blue, #196290); }
.et-dp__toggle {
    position: absolute; top: 1px; right: 1px; bottom: 1px; width: 40px;
    display: grid; place-items: center; padding: 0;
    background: transparent; border: 0; border-radius: 0 var(--et-radius-sm, 10px) var(--et-radius-sm, 10px) 0;
    color: #7a8b96; cursor: pointer; transition: color var(--et-trans), background var(--et-trans);
}
.et-dp__toggle:hover { color: var(--et-navy, #134a6d); background: #f2f7fa; }
.et-dp.is-open .et-dp__toggle { color: var(--et-blue, #196290); }

.et-dp__backdrop { position: fixed; inset: 0; background: rgba(19, 74, 109, .35); z-index: 1090; }

/* In <body> and fixed, not absolute inside the field: `.et-bk-step` clips its
   own overflow, and an anchored popover would lose its bottom half to it. */
.et-dp__panel {
    position: fixed; z-index: 1100; top: 0; left: 0;
    width: 340px; max-width: calc(100vw - 32px); padding: 12px;
    background: #fff; border: 1px solid #dbe4ea; border-radius: 12px;
    box-shadow: var(--et-shadow, 0 10px 30px rgba(19, 74, 109, .10)), 0 0 0 1px rgba(19, 74, 109, .02);
    text-align: left;
}
/* `.et-field select { width: 100% }` is the page-wide rule; the two selects in
   the header size to their own text. */
.et-dp__panel select { width: auto; }

.et-dp__head {
    display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; gap: 6px;
    padding-bottom: 9px; margin-bottom: 7px; border-bottom: 1px solid #eef3f6;
}
.et-dp__nav {
    display: grid; place-items: center; width: 32px; height: 32px; padding: 0;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    color: var(--et-navy, #134a6d); cursor: pointer; transition: background var(--et-trans), border-color var(--et-trans);
}
.et-dp__nav:hover { background: #eef3f6; border-color: #dde7ee; }
.et-dp__nav:focus-visible, .et-dp__act:focus-visible, .et-dp__panel select:focus-visible {
    outline: 3px solid rgba(25, 98, 144, .45); outline-offset: 1px;
}
.et-dp__pick { display: flex; justify-content: center; align-items: center; gap: 4px; min-width: 0; }
.et-dp__panel select {
    appearance: none; -webkit-appearance: none;
    font-family: var(--et-display, inherit); font-size: .92rem; font-weight: 700; color: var(--et-ink, #23282d);
    background: transparent no-repeat right 6px center/9px 6px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 6'%3E%3Cpath fill='%237a8b96' d='M0 0h9L4.5 6z'/%3E%3C/svg%3E");
    border: 1px solid transparent; border-radius: 8px; padding: 5px 20px 5px 8px; cursor: pointer;
    transition: background-color var(--et-trans), border-color var(--et-trans);
}
.et-dp__panel select:hover { background-color: #eef3f6; border-color: #dde7ee; }

.et-dp__grid { display: flex; flex-direction: column; gap: 2px; }
.et-dp__row { display: grid; grid-template-columns: 28px repeat(7, 1fr); gap: 2px; align-items: center; }
.et-dp__row--head { margin-bottom: 3px; }
.et-dp__dow {
    text-align: center; font-size: .68rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: #8a9aa5; padding: 5px 0;
}
.et-dp__dow.is-we { color: #b0a06a; }
/* The week column reads as a ledger gutter, not as another day. */
.et-dp__wk {
    text-align: center; font-size: .66rem; color: #a9b7c0; font-variant-numeric: tabular-nums;
    border-right: 1px solid #eef3f6; padding-right: 2px; align-self: stretch;
    display: flex; align-items: center; justify-content: center;
}
.et-dp__wk--head { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #b9c6ce; border-right-color: transparent; }

.et-dp__day {
    font: inherit; font-size: .87rem; font-variant-numeric: tabular-nums;
    height: 34px; padding: 0; color: #23404f; cursor: pointer;
    background: transparent; border: 1px solid transparent; border-radius: 8px;
    transition: background var(--et-trans), border-color var(--et-trans), color var(--et-trans);
}
.et-dp__day.is-we { background: #f7fafc; }
.et-dp__day.is-out { color: #b9c6ce; }
.et-dp__day:hover:not(:disabled) { background: #eaf1f6; border-color: #d3e0e9; }
.et-dp__day:focus-visible { outline: 3px solid rgba(25, 98, 144, .45); outline-offset: -1px; }
.et-dp__day.is-today { border-color: var(--et-amber-600, #fdc200); font-weight: 700; }
.et-dp__day.is-sel, .et-dp__day.is-sel:hover {
    background: var(--et-navy, #134a6d); border-color: var(--et-navy, #134a6d); color: #fff; font-weight: 700;
}
.et-dp__day:disabled { color: #cdd8de; background: transparent; border-color: transparent; cursor: not-allowed; }

.et-dp__foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    margin-top: 9px; padding-top: 9px; border-top: 1px solid #eef3f6;
}
.et-dp__readout {
    font-size: .76rem; color: #55707f; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-dp__acts { display: flex; gap: 6px; flex: 0 0 auto; }
.et-dp__act {
    font: inherit; font-size: .78rem; line-height: 1; padding: 7px 13px; cursor: pointer;
    background: #fff; border: 1px solid #d7e2ea; border-radius: 999px; color: #44606f;
    transition: all var(--et-trans);
}
.et-dp__act:hover { border-color: var(--et-navy, #134a6d); color: var(--et-navy, #134a6d); }
.et-dp__act--strong { background: var(--et-navy, #134a6d); border-color: var(--et-navy, #134a6d); color: #fff; }
.et-dp__act--strong:hover { background: var(--et-navy-700, #0f3c58); border-color: var(--et-navy-700, #0f3c58); color: #fff; }

/* Under 560px an anchored popover would hang off the viewport, so it becomes a
   sheet with room for a thumb. Near the top, not centred: focusing the field is
   what opens it, so on a phone the on-screen keyboard is up at the same time and
   would swallow a vertically centred panel. */
.et-dp__panel--sheet {
    top: 12px; left: 50%; right: auto; bottom: auto;
    transform: translateX(-50%); width: min(360px, calc(100vw - 28px)); padding: 14px;
    box-shadow: var(--et-shadow-lg, 0 24px 60px rgba(19, 74, 109, .16));
}
.et-dp__panel--sheet .et-dp__day { height: 40px; font-size: .92rem; }

/* --- departure buttons (step 2) --- */
.et-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px; }
.et-time {
    font: inherit; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 10px 14px; cursor: pointer; text-align: left;
    background: #fff; border: 1px solid #cfdae2; border-radius: 10px; color: #1d2b33;
    transition: border-color var(--et-trans), background var(--et-trans);
}
.et-time__h { font-family: var(--et-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; }
.et-time__ops { font-size: .76rem; color: #7a8b96; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.et-time:hover { border-color: var(--et-blue, #196290); }
.et-time:focus-visible { outline: 3px solid rgba(25, 98, 144, .45); outline-offset: 2px; }
.et-time.is-selected { background: var(--et-blue, #196290); border-color: var(--et-blue, #196290); color: #fff; }
.et-time.is-selected .et-time__ops { color: rgba(255, 255, 255, .8); }

#modal_ferry_offer_container.is-busy { min-height: 110px; }

/* --- guest nudge (aside) --- */
.et-bk-nudge { background: #fff; border: 1px solid #e3eaef; border-radius: 12px; padding: 18px; }
.et-bk-nudge__h { margin: 0 0 10px; font-family: var(--et-display); font-weight: 700; color: var(--et-ink); font-size: .98rem; line-height: 1.35; }
.et-bk-nudge__list { margin: 0 0 16px; padding-left: 18px; color: #44606f; font-size: .88rem; }
.et-bk-nudge__list li { margin-bottom: 5px; }
.et-bk-nudge__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.et-bk-nudge__actions .et-btn { flex: 1 1 auto; }

/* --- summary rail ---------------------------------------------------------
   The card that travels with the customer. It is a status panel, not a list of
   fields: each step of the funnel carries its own state (settled or still open)
   next to what was chosen for it, so the rail answers "where am I, what did I
   choose, what is left" without scrolling back up. The route gets the corridor
   treatment the picker uses; the amount is itemised rather than summed in
   silence. */
.et-bk-sum { background: #fff; border: 1px solid #e3eaef; border-radius: 12px; overflow: hidden; }
.et-bk-sum__head { padding: 14px 18px 12px; border-bottom: 1px solid #eef3f6; background: linear-gradient(180deg, #fcfdfe, #f7fafc); }
.et-bk-sum__h { margin: 0; font-size: .95rem; line-height: 1.3; text-transform: none; letter-spacing: -.01em; }

/* Step meter: the progress rail at the top of the form scrolls away, this one
   does not. A caption and a bar, nothing that competes with the numbers below. */
.et-bk-sum__meter { margin-top: 9px; }
.et-bk-sum__step { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #7a8b96; margin-bottom: 5px; }
.et-bk-sum__track { display: block; height: 4px; border-radius: 999px; background: #e4ebf0; overflow: hidden; }
.et-bk-sum__fill {
    display: block; height: 100%; width: 25%; border-radius: 999px;
    background: linear-gradient(90deg, var(--et-blue, #196290), var(--et-navy, #134a6d));
    transition: width .35s cubic-bezier(.4, 0, .2, 1);
}
@media (prefers-reduced-motion: reduce) { .et-bk-sum__fill { transition: none; } }

/* --- the checklist --- */
.et-bk-sum__steps { list-style: none; margin: 0; padding: 4px 18px 8px; }
.et-bk-sum__row { position: relative; display: flex; gap: 12px; padding: 12px 0 12px 0; }
/* The rail between the ticks: drawn from the tick down to the next row, so the
   four steps read as one sequence instead of four unrelated blocks. */
.et-bk-sum__row::before {
    content: ''; position: absolute; left: 9px; top: 30px; bottom: -2px; width: 2px;
    background: #e9eff3; border-radius: 2px;
}
.et-bk-sum__row:last-child::before { display: none; }
.et-bk-sum__tick {
    position: relative; z-index: 1; flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px;
    border-radius: 50%; background: var(--et-blue, #196290); box-shadow: 0 0 0 3px #fff;
    display: grid; place-items: center;
}
/* Settled steps carry a tick; open ones stay a hollow ring — the difference has
   to survive a glance, so it is shape as well as colour. */
.et-bk-sum__tick::after {
    content: ''; width: 9px; height: 5px; margin-top: -2px;
    border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg);
}
.et-bk-sum__row.is-empty .et-bk-sum__tick { background: #fff; box-shadow: 0 0 0 3px #fff, inset 0 0 0 2px #dbe4ea; }
.et-bk-sum__row.is-empty .et-bk-sum__tick::after { display: none; }
.et-bk-sum__body { min-width: 0; flex: 1 1 auto; }
.et-bk-sum__label { display: block; font-size: .71rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #9bacb7; margin-bottom: 4px; }
.et-bk-sum__value { color: #1d2b33; font-size: .92rem; font-weight: 600; overflow-wrap: anywhere; }
.et-bk-sum__row.is-empty .et-bk-sum__value,
.et-bk-sum__row.is-empty .et-bk-sum__corridor { color: #b6c3cc; font-weight: 400; }

/* The picker's corridor markup, sized for a 320px rail: departure and arrival on
   one line with the arrow between them, each end taking half the width. A port
   name too long for its half is clipped rather than wrapped — the two ends must
   stay side by side — and carries its full text as a tooltip. */
.et-bk-sum__corridor { color: #1d2b33; font-size: .92rem; }
/* Operator row: the mark first, then the name on the same baseline. The logo is
   boxed on white because provider logos are supplied on transparent or white
   backgrounds and would otherwise sit oddly on the rail's tint. */
.et-bk-sum__provider { display: flex; align-items: center; gap: 9px; }
.et-bk-sum__logo { width: auto; height: 22px; max-width: 54px; object-fit: contain; background: #fff; border: 1px solid #e6edf2; border-radius: 5px; padding: 2px 4px; flex: 0 0 auto; }
.et-bk-sum__corridor .et-rp__corridor { display: flex; flex-direction: row; align-items: center; flex-wrap: nowrap; gap: 8px; }
.et-bk-sum__corridor .et-rp__end { flex: 1 1 0; min-width: 0; gap: 6px; }
.et-bk-sum__corridor .et-rp__arrow { flex: 0 0 auto; transform: none; margin: 0; color: #a9bece; }
.et-bk-sum__corridor .et-rp__port { font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-bk-sum__corridor .et-rp__country { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.et-bk-sum__corridor .et-rp__flag { width: 18px; height: 13px; flex-basis: 18px; }

/* Cargo answers, dense: they are price inputs, and this is the only place they
   are visible once the disclosure that collected them is closed. */
.et-bk-sum__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.et-bk-sum__chips:empty { display: none; }
.et-bk-sum__chip {
    font-size: .7rem; font-weight: 600; padding: 3px 8px; border-radius: 999px;
    background: #f2f6f8; color: #55707f; border: 1px solid #e6edf1; white-space: nowrap;
}

/* --- the money --- */
.et-bk-sum__lines { margin: 0; padding: 12px 18px; border-top: 1px solid #eef3f6; background: #fcfdfe; }
.et-bk-sum__lines[hidden] { display: none; }
.et-bk-sum__line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 3px 0; }
.et-bk-sum__line dt { margin: 0; color: #7a8b96; font-size: .82rem; min-width: 0; overflow-wrap: anywhere; }
.et-bk-sum__line dd { margin: 0; color: #44606f; font-size: .84rem; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-bk-sum__line.is-credit dd { color: #1e7a4e; }

.et-bk-sum__money[hidden] { display: none; }
.et-bk-sum__total {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 13px 18px; background: #f4f8fa; border-top: 1px solid #e6eef2;
}
.et-bk-sum__totlabel { color: #55707f; font-size: .84rem; }
.et-bk-sum__total strong { font-family: var(--et-display); font-size: 1.35rem; font-weight: 800; color: var(--et-navy, #134a6d); white-space: nowrap; font-variant-numeric: tabular-nums; }
/* The page's only commit action, at the foot of the card that carries the amount
   it commits to. Full width: nothing else competes with it here. */
.et-bk-sum__cta { display: block; width: 100%; margin: 0; border-radius: 0 0 11px 11px; }

/* ---------- ancillary services + offers (inline, not a modal) ---------- */
.et-extras { border: 1px solid #e3eaef; border-radius: 10px; padding: 14px 16px; margin-bottom: 16px; background: #fafcfd; }
.et-extras__title { margin: 0; font-weight: 700; font-size: .92rem; color: #23404f; }
.et-extras__hint { margin: 2px 0 10px; font-size: .83rem; color: #6a7c88; }
.et-extra { display: flex; align-items: flex-start; gap: 11px; padding: 10px 0; border-top: 1px solid #eaf0f4; }
.et-extra:first-of-type { border-top: 0; }
.et-extra__check { width: 19px; height: 19px; margin-top: 2px; flex: 0 0 19px; accent-color: var(--et-blue, #134a6d); }
.et-extra__label { flex: 1 1 auto; margin: 0; cursor: pointer; min-width: 0; font-size: .9rem; }
.et-extra__name { font-weight: 600; color: #23404f; }
.et-extra__desc { display: block; color: #7a8b96; font-size: .8rem; line-height: 1.45; }
.et-extra__price { flex: 0 0 auto; font-weight: 700; color: #23404f; white-space: nowrap; font-size: .9rem; }

/* --- offer comparison (step 3) -------------------------------------------
   Same crossing, same day, same vehicle on every row: the only variables are the
   operator and the amount. Everything shared is stated once in the header above
   the list, so a row carries only what differs — which is what makes four
   operators comparable at a glance instead of four near-identical cards. */
.et-offers__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 0 0 14px; margin-bottom: 14px; border-bottom: 1px solid #eef3f6;
}
.et-offers__headline { min-width: 0; }
.et-offers__title { margin: 0; font-family: var(--et-display); font-size: 1rem; line-height: 1.3; font-weight: 700; color: var(--et-ink, #23282d); text-transform: none; letter-spacing: -.01em; }
.et-offers__trip { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: #55707f; font-size: .86rem; }
.et-offers__leg { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: #23404f; }
.et-offers__leg img { border-radius: 2px; }
.et-offers__sep { color: #c3d4de; }
.et-offers__count {
    flex: 0 0 auto; padding: 5px 11px; border-radius: 999px; white-space: nowrap;
    background: #eef3f6; color: #44606f; font-size: .76rem; font-weight: 700;
    letter-spacing: .03em; text-transform: uppercase;
}

.et-offers { display: flex; flex-direction: column; gap: 10px; }
.et-offer {
    position: relative; border: 1px solid #e3eaef; border-radius: 12px; padding: 14px;
    background: #fff; transition: border-color var(--et-trans), box-shadow var(--et-trans);
}
.et-offer:hover { border-color: #c3d4de; box-shadow: 0 2px 10px rgba(19, 74, 109, .05); }
.et-offer--best { border-color: #b6e0c9; background: #fbfefc; }
.et-offer--quote { background: #fdfdfc; }
/* The badge used to sit inline after the operator name, where it pushed the name
   around and competed with it. On the edge of the card it labels the row without
   being read as part of the operator. */
.et-offer__ribbon {
    position: absolute; top: -9px; left: 14px;
    background: #e8f6ee; color: #1e7a4e; border: 1px solid #bfe3d0;
    font-size: .66rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 999px;
}
.et-offer__main { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; }
.et-offer__logo { object-fit: contain; max-width: 88px; height: auto; }
.et-offer__logo--text { display: inline-grid; place-items: center; width: 88px; height: 44px; border-radius: 8px;
    background: #eef3f6; color: #55707f; font-family: var(--et-display); font-weight: 700; font-size: .82rem; letter-spacing: .04em; }
.et-offer__who { min-width: 0; }
.et-offer__name { font-family: var(--et-display); font-weight: 700; color: #1d2b33; font-size: 1.02rem; line-height: 1.25; }
.et-offer__tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.et-offer__tags:empty { display: none; }
.et-offer__tag {
    font-size: .72rem; font-weight: 600; padding: 3px 9px; border-radius: 999px;
    background: #f2f6f8; color: #6a7c88; border: 1px solid #e6edf1; white-space: nowrap;
}
.et-offer__tag--save { background: #e8f6ee; color: #1e7a4e; border-color: #cbe8d8; }
.et-offer__tag--quote { background: #fff8e8; color: #8a5e12; border-color: #f2e2bd; }
.et-offer__money { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.et-offer__was { text-decoration: line-through; color: #9bacb7; font-size: .84rem; }
.et-offer__total { font-family: var(--et-display); font-size: 1.35rem; font-weight: 800; color: var(--et-navy, #134a6d); line-height: 1.1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-offer__quote { font-family: var(--et-display); font-size: 1.05rem; font-weight: 700; color: #8a5e12; }
.et-offer__breakdown { color: #7a8b96; font-size: .78rem; font-variant-numeric: tabular-nums; }
/* The lei equivalent sits under the amount, deliberately quieter than it: the
   price being compared is the one above, and this is the same money restated.
   The rate below it is quieter still — it explains the lei figure rather than
   competing with it, and negative margin keeps the pair reading as one block. */
.et-offer__ron { color: #45525c; font-size: .84rem; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-offer__rate { margin-top: -2px; color: #9aa7b1; font-size: .72rem; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-offer__money .et-btn { width: 100%; margin-top: 6px; }
.et-offer__more { margin-top: 10px; border-top: 1px solid #f2f6f8; padding-top: 8px; }
.et-offer__more > summary { cursor: pointer; color: #7a8b96; font-size: .8rem; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.et-offer__more > summary::-webkit-details-marker { display: none; }
.et-offer__more > summary::before { content: '+'; width: 15px; height: 15px; border-radius: 4px; background: #eef3f6; color: #55707f; display: inline-grid; place-items: center; font-weight: 700; font-size: .7rem; line-height: 1; }
.et-offer__more[open] > summary::before { content: '–'; }
.et-offer__more > summary:focus-visible { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 2px; border-radius: 4px; }
.et-offer__facts { display: flex; flex-wrap: wrap; gap: 5px 20px; margin-top: 8px; color: #44606f; font-size: .85rem; }
.et-offer__facts small { color: #93a4ae; }
.et-offer__note { flex: 1 1 100%; color: #7a8b96; font-size: .82rem; line-height: 1.5; }
/* The chosen row has to stay obvious after the page scrolls to step 4 — the
   sticky bar names the same operator, and the two must agree at a glance. */
.et-offer.is-chosen { border-color: var(--et-blue, #196290); box-shadow: inset 0 0 0 1px var(--et-blue, #196290); background: #f7fbfd; }
.et-offer.is-chosen .btn_customer_choose_offer { background: #eaf1f6; color: var(--et-navy, #134a6d); border-color: transparent; box-shadow: none; pointer-events: none; }

/* The fleet select and the free-text plate under it are one control in two
   parts; without this they touch. */
#booking_ferry_truck_pick + .et-input { margin-top: 10px; }

/* Two fields per row as soon as there is room for them, with the wide ones
   (route, plate) spanning both. Restored after a botched deletion took the whole
   responsive tail of the booking flow with it — without these the form ran as a
   single column at every width and the offer rows stacked logo over price. */
@media (min-width: 640px) {
    .et-bk-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .et-field--span2 { grid-column: 1 / -1; }
    .et-bk-step__actions .et-btn { width: auto; }
    .et-bk-step__body { padding: 20px; }
    .et-bk-rail__i { font-size: .86rem; }
}

@media (min-width: 760px) {
    .et-offer__main { grid-template-columns: 88px 1fr auto; gap: 16px; }
    .et-offer__money { align-items: flex-end; }
    .et-offer__money .et-btn { width: auto; min-width: 130px; }
}

@media (min-width: 1024px) {
    .et-bk { grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; }
    /* Sticky, parked under the real header (app.js measures it into
       `--et-header-h`; the fallback is the 38px topbar + 74px nav row), and never
       taller than what is left of the viewport: on a laptop the summary plus the
       offer card can outgrow it, and a sticky element taller than the screen hides
       exactly the part that matters — the button at its foot. */
    .et-bk__aside {
        position: sticky; top: calc(var(--et-header-h, 113px) + 14px);
        max-height: calc(100vh - var(--et-header-h, 113px) - 28px);
        overflow-y: auto; overscroll-behavior: contain;
        padding-right: 2px;
    }
    /* The rail scrolls internally once the card grows (steps, cargo chips, the
       itemised price). The money block is the action, so it stays parked at the
       foot of the rail while the rest scrolls under it, instead of being the first
       thing pushed out of sight. */
    .et-bk-sum__money {
        position: sticky; bottom: 0; z-index: 2; background: #fff;
        box-shadow: 0 -6px 18px rgba(19, 74, 109, .07);
    }
}

/* ---------- payment-proof upload (our own picker) ---------- */
.et-upload__drop {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    padding: 34px 20px; text-align: center; cursor: pointer;
    border: 2px dashed var(--et-line, #e2e9ef); border-radius: 12px;
    background: var(--et-bg-soft, #f5f8fa);
    transition: border-color var(--et-trans), background var(--et-trans);
}
.et-upload__drop:hover { border-color: var(--et-blue, #196290); background: #eef4f8; }
.et-upload__drop:focus-within { outline: 3px solid rgba(25, 98, 144, .45); outline-offset: 2px; }
.et-upload__drop > i { font-size: 1.9rem; color: var(--et-blue, #196290); }
.et-upload__pick { font-family: var(--et-display); font-weight: 700; color: var(--et-navy, #134a6d); }
.et-upload__hint { font-size: .82rem; color: var(--et-muted, #7c8a95); }
.et-upload__chosen {
    margin-top: 12px; padding: 10px 14px; font-size: .87rem; color: #23404f;
    background: #fff; border: 1px solid var(--et-line, #e2e9ef); border-radius: 10px;
    overflow-wrap: anywhere;
}
.et-upload__error { margin-top: 10px; }

/* ---------- companies list ---------- */
.et-table--companies { min-width: 780px; }
/* The name is the row's own link to its dialog, so it has to look like one on
   hover without being blue at rest: in a table of names, an underline on every
   row is noise. */
.et-cmp__name {
    display: inline-block; font-family: var(--et-display); font-weight: 700;
    color: var(--et-navy, #134a6d); text-decoration: none;
}
.et-cmp__name:hover, .et-cmp__name:focus-visible { color: var(--et-blue, #196290); text-decoration: underline; }
/* Row actions sit together and do not wrap under each other. */
.et-rowacts { display: inline-flex; gap: 6px; justify-content: flex-end; }
.et-note-inline {
    display: flex; align-items: flex-start; gap: 9px; margin: 0 0 18px;
    font-size: .84rem; line-height: 1.5; color: #55707f;
    background: var(--et-bg-soft, #f5f8fa); border: 1px solid var(--et-line, #e2e9ef);
    border-radius: 10px; padding: 11px 14px;
}
.et-note-inline i { color: var(--et-blue, #196290); margin-top: 2px; flex: 0 0 auto; }

/* ---------- bookings list ---------------------------------------------------
   The table is the page, so its header carries the sort control and the money
   column is right-aligned and tabular — figures you compare down a column have
   to line up. */
/* Eight columns have to fit the content track on a normal desktop, or the status
   — one of the two things people open this page for — sits off-screen behind an
   inner scrollbar. Tighter gutters than the default table buy that; below the
   width where it stops fitting, the wrapper scrolls, which is the honest answer
   for a data table and better than squeezing "Calais → Dover" onto two lines. */
.et-table--bookings { min-width: 880px; }
.et-table--bookings thead th,
.et-table--bookings tbody td { padding-left: 13px; padding-right: 13px; }
.et-table--bookings .et-rcard__route { flex-wrap: nowrap; white-space: nowrap; }
.et-table--bookings .et-driver { white-space: nowrap; }
.et-table__num { text-align: right; }
.et-table__sub { color: var(--et-muted, #7c8a95); font-size: .8rem; margin-top: 2px; }
.et-table--bookings .et-table__total { font-variant-numeric: tabular-nums; }
.et-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.et-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
    color: var(--et-navy, #134a6d); background: var(--et-bg-soft, #f5f8fa);
    border: 1px solid var(--et-line, #e2e9ef); border-radius: 6px; padding: 3px 7px; white-space: nowrap;
}

/* sortable column header */
.et-sort {
    display: inline-flex; align-items: center; gap: 6px; color: inherit; white-space: nowrap;
    text-decoration: none; border-radius: 5px; padding: 2px 4px; margin: -2px -4px;
    transition: color var(--et-trans), background var(--et-trans);
    /* Rendered as a <button> now — reset the browser's own chrome so the header
       still reads as a header, not as a control dropped into the table. */
    font: inherit; background: none; border: 0; cursor: pointer; text-align: inherit;
}
.et-sort i { font-size: .78em; opacity: .35; }
.et-sort:hover { color: var(--et-navy, #134a6d); background: rgba(19, 74, 109, .06); }
.et-sort:hover i { opacity: .7; }
.et-sort:focus-visible { outline: 3px solid rgba(25, 98, 144, .45); outline-offset: 1px; }
.et-sort.is-active { color: var(--et-navy, #134a6d); }
.et-sort.is-active i { opacity: 1; color: var(--et-blue, #196290); }

/* Status chip. The colour comes from the database and can be anything, so it is
   never asked to carry text contrast: the label is a fixed dark ink, while the
   status colour tints the chip and fills the dot. White text on the raw colour
   was unreadable on every light status; colouring the text instead just moved
   the problem — amber on its own tint measures 2.4:1. */
.et-status {
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
    font-size: .8rem; font-weight: 600; line-height: 1;
    padding: 5px 11px 5px 9px; border-radius: 999px;
    color: #33505f;
    background: color-mix(in srgb, var(--et-status, #7c8a95) 14%, #fff);
    border: 1px solid color-mix(in srgb, var(--et-status, #7c8a95) 34%, #fff);
}
.et-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--et-status, #7c8a95); flex: 0 0 auto; }
/* color-mix is widely supported, but a browser without it would render the chip
   text on its own colour; these fall back to a plain neutral chip. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .et-status { background: var(--et-bg-soft, #f5f8fa); border-color: var(--et-line, #e2e9ef); }
}



/* ---------- tabs (profile) --------------------------------------------------
   A scrollable row rather than a wrapping one: four labels in German or Bulgarian
   are wider than a phone, and a tab bar that reflows into two rows stops reading
   as a bar. */
.et-tabs {
    display: flex; gap: 4px; margin: 24px 0 18px; padding: 4px;
    background: var(--et-bg-soft, #f5f8fa); border: 1px solid var(--et-line, #e2e9ef);
    border-radius: 12px; overflow-x: auto; scrollbar-width: none;
}
.et-tabs::-webkit-scrollbar { display: none; }
.et-tabs__t {
    display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
    font: inherit; font-family: var(--et-display, inherit); font-size: .9rem; font-weight: 600;
    padding: 10px 16px; border: 1px solid transparent; border-radius: 9px;
    background: transparent; color: #55707f; cursor: pointer;
    transition: background var(--et-trans), color var(--et-trans), box-shadow var(--et-trans);
}
.et-tabs__t i { font-size: .88em; opacity: .8; }
.et-tabs__t:hover { background: rgba(255, 255, 255, .7); color: var(--et-navy, #134a6d); }
.et-tabs__t:focus-visible { outline: 3px solid rgba(25, 98, 144, .45); outline-offset: -1px; }
.et-tabs__t.is-active {
    background: #fff; color: var(--et-navy, #134a6d);
    border-color: var(--et-line, #e2e9ef); box-shadow: var(--et-shadow-sm, 0 2px 8px rgba(19, 74, 109, .06));
}
.et-tabs__t.is-active i { opacity: 1; color: var(--et-blue, #196290); }

/* --- panel furniture shared by the profile panels --- */
.et-panel__lead { margin: 0 0 22px; color: #7a8b96; font-size: .89rem; line-height: 1.5; }
.et-panel__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.et-empty--inline { padding: 34px 20px; }
.et-empty--inline > i { font-size: 2rem; color: #c2ced6; display: block; margin-bottom: 12px; }
.et-empty--inline p { color: #7a8b96; margin: 0 0 16px; }

@media (max-width: 560px) {
    .et-tabs__t { padding: 9px 12px; font-size: .85rem; }
    .et-tabs__t i { display: none; }
    .et-panel__actions .et-btn { width: 100%; }
}

/* ---------- save confirmation dialog ----------------------------------------
   A Bootstrap 5 modal like the others, opened on top of the CRUD one when the
   form being saved lives inside it. Only the diff table below is ours. */
#etConfirm .modal-dialog { max-width: 560px; }
.et-confirm__intro { margin: 0 0 16px; color: #6a7c88; font-size: .9rem; }
.et-confirm__intro:empty { display: none; }
.et-confirm__note { margin: 0; color: #44606f; font-size: .93rem; line-height: 1.55; }
/* A deletion dialog carries one sentence and two buttons; the sentence gets the
   room to be read, since it is the only thing standing in for an undo. */
.et-confirm--danger .et-confirm__note { padding: 12px 14px; border-radius: 10px; background: #fff5f5; border: 1px solid #f3c9cb; color: #7a2c2f; }

.et-confirm__table { width: 100%; border-collapse: collapse; font-size: .89rem; }
.et-confirm__table thead th {
    text-align: left; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
    color: #8a9aa5; padding: 0 10px 7px; border-bottom: 1px solid #eef3f6; white-space: nowrap;
}
.et-confirm__table tbody th {
    text-align: left; font-weight: 600; color: #33505f; padding: 10px; vertical-align: top;
    border-bottom: 1px solid #f2f6f8; width: 34%;
}
.et-confirm__table td {
    padding: 10px; vertical-align: top; border-bottom: 1px solid #f2f6f8; overflow-wrap: anywhere;
}
.et-confirm__table tr:last-child th, .et-confirm__table tr:last-child td { border-bottom: 0; }
/* The old value is context, the new one is the decision being confirmed. */
.et-confirm__old { color: #8a9aa5; text-decoration: line-through; text-decoration-color: #cfd8de; }
.et-confirm__new { color: #1d2b33; font-weight: 600; }
.et-confirm__empty { color: #b6c3cc; font-style: italic; text-decoration: none; }

.modal-footer .et-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 520px) {
    .et-confirm__table, .et-confirm__table tbody, .et-confirm__table tr { display: block; }
    .et-confirm__table thead { display: none; }
    .et-confirm__table tbody th, .et-confirm__table td { display: block; width: auto; border-bottom: 0; padding: 2px 0; }
    .et-confirm__table tr { padding: 10px 0; border-bottom: 1px solid #f2f6f8; }
    .modal-footer .et-btn { flex: 1 1 auto; }
}

/* ---------- change history (profile → activity zone) ---------- */
.et-audit__lead { margin: 0 0 18px; color: #7a8b96; font-size: .88rem; }
.et-audit__none { margin: 0; color: #8a9aa5; font-size: .9rem; }
.et-audit { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.et-audit__item {
    border: 1px solid #e3eaef; border-left: 3px solid #cfdae2; border-radius: 10px;
    padding: 13px 16px; background: #fff;
}
.et-audit__item.is-create { border-left-color: var(--et-success, #2fa36b); }
.et-audit__item.is-update { border-left-color: var(--et-blue, #196290); }
.et-audit__item.is-delete { border-left-color: var(--et-danger, #e5484d); }

.et-audit__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 12px; }
.et-audit__what { color: #33505f; font-size: .92rem; min-width: 0; overflow-wrap: anywhere; }
.et-audit__what strong { color: var(--et-ink, #23282d); }
.et-audit__action {
    font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.et-audit__action--create { background: #e8f6ee; color: #1e7a4e; }
.et-audit__action--update { background: #eaf1f6; color: #1d5c85; }
.et-audit__action--delete { background: #fdecec; color: #b3363a; }
.et-audit__when { margin-left: auto; color: #93a4ae; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.et-audit__event { margin: 9px 0 0; color: #44606f; font-size: .87rem; }
.et-audit__diff { width: 100%; border-collapse: collapse; margin-top: 9px; font-size: .85rem; }
.et-audit__diff th[scope="row"] { text-align: left; font-weight: 600; color: #55707f; padding: 4px 12px 4px 0; vertical-align: top; width: 32%; }
.et-audit__diff td { padding: 4px 0; vertical-align: top; overflow-wrap: anywhere; }
.et-audit__old { color: #93a4ae; text-decoration: line-through; text-decoration-color: #d5dee4; }
.et-audit__arrow { width: 26px; text-align: center; color: #b6c3cc; }
.et-audit__new { color: #1d2b33; font-weight: 600; }
.et-audit__empty { color: #c2ced6; font-style: italic; text-decoration: none; }
.et-audit__meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 9px; color: #a3b1bb; font-size: .76rem; }

@media (max-width: 560px) {
    .et-audit__when { margin-left: 0; width: 100%; }
    .et-audit__diff th[scope="row"], .et-audit__diff td { display: block; width: auto; padding: 1px 0; }
    .et-audit__arrow { display: none; }
    .et-audit__new::before { content: '→ '; color: #b6c3cc; }
}

/* A removed cart line dims while the recalculated cart is fetched, so the click
   has a visible effect before the totals come back. */
.et-cartitem.is-removing { opacity: .45; pointer-events: none; transition: opacity .18s ease; }

/* ---------- cart: return leg ---------- */
.et-return { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #d9e2e8; }
.et-return__toggle { padding: 8px 16px; }
.et-return__panel { margin-top: 12px; background: #f7fafb; border: 1px solid #e3eaef; border-radius: 10px; padding: 14px; }
.et-return__pick { display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }
/* The return field is the theme's date picker now, not <input type=date>: it
   needs the relative box its panel anchors to, and the label above it belongs to
   the input inside. */
.et-return__dp { width: 100%; }
.et-return__dp .et-dp__input { width: 100%; }
/* The label spans the row, so the two controls under it fall into the two
   columns in the order they are read: the date, then the button that acts on it.
   Left in the flow it took a column of its own and pushed the button onto the
   next line, under the label. */
.et-return__label { display: block; grid-column: 1 / -1; font-size: .84rem; font-weight: 600; color: #33505f; margin-bottom: -4px; }
.et-return__route { margin: 0 0 10px; font-weight: 600; color: #23404f; }
.et-return__results { margin-top: 12px; }
.et-return__results:empty { margin-top: 0; }

.et-return__options { display: grid; gap: 8px; }
/* One departure: logo, time, operator, price, and the button that puts it in the
   cart. The row itself is still clickable — that is what it did as a <button> —
   but the action now has a control that says so. */
.et-return__option {
    position: relative; font: inherit; text-align: left; cursor: pointer;
    display: grid; grid-template-columns: 64px auto 1fr auto auto; align-items: center; gap: 12px;
    background: #fff; border: 1px solid #cfdae2; border-radius: 10px; padding: 10px 14px; min-height: 56px;
}
.et-return__add { white-space: nowrap; padding: 7px 14px; }
.et-return__add i { margin-right: 5px; }
.et-return__option:hover .et-return__add { background: var(--et-navy, #134a6d); border-color: var(--et-navy, #134a6d); }
.et-return__add:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) {
    /* Stacked: the price and the button share the last row so the button keeps a
       tappable width instead of being squeezed next to a logo. */
    .et-return__option { grid-template-columns: 64px 1fr; }
    .et-return__provider { grid-column: 1 / -1; }
    .et-return__price { grid-column: 1; }
    .et-return__add { grid-column: 2; justify-self: end; }
}
.et-return__option:hover { border-color: #134a6d; }
.et-return__option:focus-visible { outline: 3px solid rgba(25, 98, 144, .45); outline-offset: 2px; }
/* The badge hangs above the top edge, and the row's 10px of padding left it
   nothing to hang into — it sat on the operator logo. The row that carries one
   gets the headroom instead of the badge being moved: it is meant to straddle
   the border, and only one row per list has it. The clearance is deliberately
   more than the overhang, because the badge's own height is what actually has
   to clear the content, not just the part of it above the border. */
.et-return__option--best { border-color: #2fa36b; padding-top: 28px; }
.et-return__option img { object-fit: contain; max-width: 64px; height: auto; }
/* Stand-in for a provider with no uploaded logo, sized like the image it
   replaces so the grid column does not shift between rows. */
.et-return__logo--text { display: inline-grid; place-items: center; width: 64px; height: 32px; border-radius: 6px;
    background: #eef3f6; color: #55707f; font-family: var(--et-display); font-weight: 700; font-size: .72rem; letter-spacing: .04em; }
.et-return__when { font-weight: 700; color: #1d2b33; white-space: nowrap; }
.et-return__provider { color: #44606f; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-return__price { font-weight: 800; color: #134a6d; white-space: nowrap; }
/* `nowrap` is load-bearing, not cosmetic: the badge is absolutely positioned with
   no width, so on a narrow card "CEL MAI IEFTIN" wrapped to two or three lines
   and grew downwards into the row — no amount of headroom above fixes that. */
.et-return__badge {
    position: absolute; top: -9px; left: 12px; background: #2fa36b; color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.35;
}

@media (min-width: 640px) {
    .et-return__pick { grid-template-columns: minmax(160px, 260px) auto; justify-content: start; }
    .et-return__pick .et-btn { white-space: nowrap; }
}

/* ==================================================================
   Modal design system (`et-form2`, `et-fsec`, `et-dt__foot`)
   ------------------------------------------------------------------
   Every dialog in the app is built from these: a navy head hoisted into
   the dialog header by app.js, a scrolling body of sections, and a bar
   of actions pinned to the bottom.

   Why the bar is pinned: `.modal-dialog-scrollable` scrolls the body,
   so on a form of any length the save button used to sit below the
   fold, with nothing on screen suggesting it existed. `position:
   sticky` inside that scroller keeps it in view without taking the
   content out of the normal flow.
   ================================================================== */

/* The form owns its padding, because its footer has to reach the edges. */
.et-dt__body--form { padding: 0; }

.et-form2 { display: flex; flex-direction: column; }
.et-form2__body { padding: 20px 26px 8px; }
.et-form2__intro {
    display: flex; gap: 10px; align-items: flex-start;
    background: #f2f7fa; border: 1px solid #dde9f1; border-radius: 10px;
    padding: 11px 14px; margin: 0 0 6px; font-size: .87rem; color: #33505f; line-height: 1.5;
}
.et-form2__intro i { color: var(--et-blue, #134a6d); margin-top: 2px; }

/* A section is a subject: what it is on the left, the controls on the right.
   The rail carries the explanation that would otherwise become a tooltip, or
   nothing at all. */
.et-fsec {
    display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 10px 32px;
    padding: 22px 0; border-top: 1px solid #eef2f5;
}
.et-fsec:first-of-type { border-top: 0; }
.et-fsec__aside { min-width: 0; }
.et-fsec__h {
    display: flex; align-items: center; gap: 8px; margin: 0;
    font-family: var(--et-display); font-weight: 700; font-size: .92rem; color: var(--et-navy, #134a6d);
}
.et-fsec__h i { color: #7fa3bb; width: 16px; text-align: center; }
.et-fsec__hint { margin: 6px 0 0; font-size: .81rem; line-height: 1.5; color: var(--et-muted, #7c8a95); }
/* The dialog gets wider; a text input does not get more readable past a point.
   The field grid stops at a comfortable measure and the extra width stays as
   margin, rather than producing a 600px box for a VAT number. */
.et-fsec__fields { min-width: 0; max-width: 940px; }

/* Twelve columns, so a row can be 6+6, 4+4+4 or 8+4 without a new class each
   time. `.et-field`'s page-wide bottom margin is dropped here: inside a grid the
   gap already does that job, and the two together made the rows drift apart. */
.et-fgrid12 { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; }
.et-fgrid12 > .et-field { margin-bottom: 0; }
/* The full scale, 1 to 12. It used to be a handful of the widths that happened
   to be needed, and the first template to reach for a missing one (`et-c7`, the
   plate field on the booking form) got no rule at all — so the field fell back to
   a single track and rendered one twelfth of the row wide. A partial scale is a
   trap: nothing warns, it just looks broken. */
.et-c1 { grid-column: span 1; } .et-c2 { grid-column: span 2; } .et-c3 { grid-column: span 3; }
.et-c4 { grid-column: span 4; } .et-c5 { grid-column: span 5; } .et-c6 { grid-column: span 6; }
.et-c7 { grid-column: span 7; } .et-c8 { grid-column: span 8; } .et-c9 { grid-column: span 9; }
.et-c10 { grid-column: span 10; } .et-c11 { grid-column: span 11; } .et-c12 { grid-column: 1 / -1; }

/* "optional" as a quiet word next to the label, not a badge competing with it:
   the eye should still land on the required fields first. */
.et-opt {
    font-weight: 500; font-size: .74rem; color: #9aa7b1; text-transform: lowercase;
    letter-spacing: .01em; margin-left: 4px;
}

.et-form2__foot {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
    padding: 14px 26px; margin-top: 14px;
    background: #fff; border-top: 1px solid #e6ecf1;
    box-shadow: 0 -6px 14px rgba(16, 44, 66, .05);
}
.et-form2__req { font-size: .8rem; color: var(--et-muted, #7c8a95); }
.et-form2__acts { display: flex; gap: 10px; margin-left: auto; }
/* The primary action is last in the DOM (so the keyboard reaches Cancel first on
   the way back) and last on screen, which is where a dialog's confirm belongs. */
.et-form2__acts .et-btn { padding: 10px 20px; }

/* Read-only dialogs get the same pinned bar. */
.et-dt__foot {
    position: sticky; bottom: 0; z-index: 3;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px var(--et-dt-px, 26px); margin: 18px calc(-1 * var(--et-dt-px, 26px)) calc(-1 * var(--et-dt-pb, 28px));
    background: #fff; border-top: 1px solid #e6ecf1;
    box-shadow: 0 -6px 14px rgba(16, 44, 66, .05);
}
.et-dt__foot--end { justify-content: flex-end; }

@media (max-width: 920px) {
    /* The rail becomes a heading again: at this width 224px of prose beside the
       fields costs more than it explains. */
    .et-fsec { grid-template-columns: 1fr; gap: 12px; padding: 16px 0; }
    .et-fsec__hint { margin-top: 4px; }
}
@media (max-width: 640px) {
    .et-fgrid12 > * { grid-column: 1 / -1; }
    .et-form2__body { padding: 16px 18px 6px; }
    .et-form2__foot { padding: 12px 18px; }
    .et-form2__acts { width: 100%; }
    .et-form2__acts .et-btn { flex: 1; justify-content: center; }
    .et-dt__foot { padding-top: 12px; padding-bottom: 12px; }
}

/* A pinned bar in a partial that lays out its own padding (the order and booking
   details, which are a two-column grid rather than a padded body). */
.et-dt__foot--flush { margin: 0; padding: 12px 18px; }

/* The head partials carry a `.et-dt__sub` line (a reference number, a note); in
   the dialog header it sits under a title two steps smaller, so it follows. */
.modal-header--dt .et-dt__sub { margin-top: 4px; gap: 14px; font-size: .78rem; }

/* A value standing in for the control it replaces: the read-only company dialog
   reuses the form's sections, so the text has to sit on the input's baseline
   rather than tight under its label, or the two dialogs — opened from adjacent
   buttons on the same row — read as different pages. */
.et-fsec__fields .et-dt__f-v { min-height: 24px; display: flex; align-items: center; }

/* A document row in the order dialog: name, date, and the control that takes it
   back. The name is a link now (it opens the file), the button is sized down to
   the row rather than to a table cell. */
.et-odt-doc a { color: inherit; text-decoration: none; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-odt-doc a:hover { color: var(--et-blue, #196290); text-decoration: underline; }
.et-odt-doc .et-tbtn { width: 26px; height: 26px; border-radius: 7px; font-size: .72rem; flex: 0 0 auto; margin-left: 6px; }

/* The card body's own icons (a phone, an e-mail beside their value) follow the
   heading's: quiet, and never competing with the value they label. */
.et-odt-card > span i { color: #9fb4c4; margin-right: 6px; width: 12px; text-align: center; }

/* The operator's reference on a crossing. Not one more grey fact: it is what the
   driver is boarded against, so it is set as a code — monospace, on its own
   ground, ahead of the date and the truck. */
.et-odt-trip__code {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px;
    border-radius: 6px; background: #eef4f8; color: #1d4f6f;
    font-size: .76rem; font-weight: 600; letter-spacing: .02em;
}
.et-odt-trip__code i { color: #5c8fb0; opacity: 1; }
.et-odt-trip__code strong { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .04em; }

/* Pushed to the far end of a pinned bar that also carries content — the close
   button when the customer's contact sits beside it. */
.et-dt__foot-push { margin-left: auto; }
/* The contact line inside that bar: no rule of its own, since the bar already
   has one, and it must not wrap the button onto a second row on a narrow
   dialog. */
.et-odt-contact--foot { margin: 0; padding: 0; border-top: 0; min-width: 0; }
@media (max-width: 620px) {
    /* Below this the two do stack — a phone number cut in half is worse than a
       taller bar. */
    .et-dt__foot-push { margin-left: 0; width: 100%; justify-content: center; }
}

/* The outcome of a page form (contact today), printed where the form is rather
   than in a floating toast: the sentence belongs next to the fields it is about,
   and a toast on a long page can appear off-screen from them. Empty until there
   is something to say. */
.et-formmsg { margin: 0 0 14px; font-size: .9rem; font-weight: 600; line-height: 1.5; }
.et-formmsg:empty { display: none; }
.et-formmsg.is-success { color: #1e7a4e; }
.et-formmsg.is-info { color: #8a5e12; }
.et-formmsg.is-danger { color: var(--et-danger, #c0393d); }

/* ---------- documents in the order dialog ----------
   A list of files, each a row that opens the viewer. The name takes the room it
   needs and truncates; the date and the delete control keep their place at the
   end, so a long file name never pushes them off. */
.et-odt-docs { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.et-odt-doc { display: flex; align-items: center; gap: 8px; color: #45525c; min-width: 0; }
.et-odt-doc__open { display: flex; align-items: center; gap: 7px; min-width: 0; color: inherit; text-decoration: none; }
.et-odt-doc__open i { color: #6f86a3; flex: 0 0 auto; }
.et-odt-doc__open:hover { color: var(--et-blue, #196290); }
.et-odt-doc__open:hover .et-odt-doc__name { text-decoration: underline; }
.et-odt-doc__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.et-odt-doc__meta { margin-left: auto; color: #9aa7b1; font-size: .72rem; white-space: nowrap; }

/* ---------- the document viewer ----------
   The file fills the dialog: a payment proof is read, not glanced at, so it gets
   the height rather than sharing it with chrome. The frame is bordered because a
   white PDF on a white dialog has no edge of its own. */
.et-docview { padding: 16px 18px; background: #f3f6f8; }
.et-docview__frame {
    display: block; width: 100%; height: min(72vh, 900px);
    border: 1px solid #e2e9ef; border-radius: 10px; background: #fff;
}
.et-docview__img {
    display: block; max-width: 100%; max-height: min(72vh, 900px); margin: 0 auto;
    border: 1px solid #e2e9ef; border-radius: 10px; background: #fff;
}
@media (max-width: 620px) {
    .et-docview { padding: 12px; }
    .et-docview__frame, .et-docview__img { height: 70vh; max-height: 70vh; }
}

/* The lei equivalent under a price. Deliberately quieter than the figure it
   follows: the order is owed in its own currency, and this is an indication of
   what the bank will move — never a second price competing with the first. */
.et-price__ron { display: block; font-size: .76rem; font-weight: 600; color: #9aa7b1; margin-top: 2px; }
.et-summary__ron { margin-top: 6px; text-align: right; font-size: .86rem; font-weight: 700; color: #45525c; }
.et-summary__ron small { display: block; margin-top: 3px; font-size: .7rem; font-weight: 500; color: #9aa7b1; line-height: 1.4; }

/* The context line under a dialog's header: where an order was placed, how it is
   paid, how many crossings — or, on a booking, when it sails and with whom.
   Values separated by dots on one line, on the dialog's own ground: a band of
   bordered cells made three short facts look like a dashboard, and the navy
   header is too narrow to hold them without wrapping. */
.et-odt-facts {
    display: flex; flex-wrap: wrap; gap: 4px 22px; margin: 0;
    padding: 13px 30px; border-bottom: 1px solid #eef2f5;
    background: #fff; color: #7c8a95; font-size: .84rem;
}
.et-odt-facts b { color: var(--et-ink, #23282d); font-weight: 600; }
.et-odt-facts > span + span::before { content: "·"; margin-right: 22px; margin-left: -14px; color: #cfdae2; }
@media (max-width: 820px) { .et-odt-facts { padding: 11px 18px; gap: 3px 16px; } }

/* ---------- the stacked dialog (`#etModalL2`) ----------
   A dialog opened from inside another one: a document from an order's detail.
   It is the same dialog one level up, so it takes the same scale and the same
   chrome — listed here once rather than doubled onto every `#etModal` rule
   through the file. app.js raises its z-index and its backdrop's on the way in.

   Its own shadow is heavier: it sits over a white dialog rather than over the
   page, and the default would leave the two sheets indistinguishable. */
#etModalL2 { font-size: .9rem; }
#etModalL2 .modal-title { font-size: 1.05rem; }
#etModalL2 .et-label,
#etModalL2 form label { font-size: .8rem; }
#etModalL2 .et-input { font-size: .88rem; }
#etModalL2 .et-btn { font-size: .88rem; }
#etModalL2 .modal-body { padding: 0; min-height: 120px; }
#etModalL2 .modal-header { padding: 14px 18px; }
#etModalL2 .modal-content { box-shadow: 0 28px 64px rgba(9, 30, 45, .45); }
#etModalL2 .et-dt__body { --et-dt-px: 22px; --et-dt-pb: 22px; padding: 18px var(--et-dt-px) var(--et-dt-pb); }
#etModalL2 .et-dt__body--form { padding: 0; }
#etModalL2 .et-dt__sec-h { font-size: .72rem; margin: 0 0 12px; }
#etModalL2 .et-dt__empty { padding: 20px 10px; }
#etModalL2 .modal-dialog.modal-xl { max-width: min(1560px, calc(100vw - 40px)); }
#etModalL2 .modal-dialog.modal-xl.modal-dialog-scrollable { --bs-modal-margin: .75rem; }
#etModalL2 .modal-dialog.modal-et-full { max-width: 85vw; }
#etModalL2 .modal-dialog.modal-et-full.modal-dialog-scrollable { --bs-modal-margin: 7.5vh; }
@media (max-width: 820px) {
    #etModalL2 .modal-dialog.modal-et-full { max-width: calc(100vw - 20px); }
    #etModalL2 .modal-dialog.modal-et-full.modal-dialog-scrollable { --bs-modal-margin: 10px; }
}

/* "Clear the form", under the step rail. Quiet on purpose: it undoes work, so it
   sits away from the actions that advance the funnel and never competes with
   them for a glance. */
.et-bk-reset { display: flex; justify-content: flex-end; margin: -6px 0 14px; }
.et-bk-reset .et-btn { padding: 6px 14px; font-size: .82rem; color: var(--et-muted, #7c8a95); border-color: transparent; }
.et-bk-reset .et-btn:hover { color: var(--et-danger, #c0393d); border-color: #f0c9cb; background: #fffafa; }
.et-bk-reset i { margin-right: 6px; font-size: .78rem; }

/* The lei figure under the running total in the booking rail. */
.et-bk-sum__ron { margin-top: 4px; text-align: right; font-size: .82rem; font-weight: 700; color: #8fa2ad; }

/* ==================================================================
   Posting-declaration dialog (`et-pdform`)
   ------------------------------------------------------------------
   The longest form in the account area — company, period, driver,
   vehicles, contact — and the only one whose sections have to be done
   in order, because choosing the company fills three of them in. So it
   is numbered: a rail on the left carries the step, the way the rest of
   the app's dialogs carry an icon.
   ================================================================== */

/* The number sits where `.et-fsec__h`'s icon used to, and the heading
   loses its own icon: two markers on one line compete, and the number
   is the one that carries information. */
.et-fsec--step .et-fsec__aside {
    display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 12px; align-items: start;
}
.et-fsec--step .et-fsec__h,
.et-fsec--step .et-fsec__hint { grid-column: 2; }
.et-fstep {
    grid-row: 1 / span 2;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    background: #eef4f8; border: 1px solid #d8e6ef;
    font-family: var(--et-display); font-weight: 700; font-size: .85rem;
    color: var(--et-navy, #134a6d);
}

/* The allowance, in the dialog header next to the "one per country"
   note — the two numbers only mean anything together. */
.et-pdquota { display: inline-flex; align-items: center; gap: 7px; }
.et-pdquota strong { font-weight: 700; }

/* Notes at the top of the form. The default `.et-form-note` is amber,
   which is right for "writes are off" and wrong for the two cases that
   actually stop the form: those are red, and the one that only means
   "wait" is blue. Colour is the fastest way to tell "you cannot submit"
   from "this will take a moment". */
.et-form-note--stop {
    display: flex; gap: 10px; align-items: flex-start;
    background: #fdf1f1; border-color: #f3c6c6; color: #8c2f2f;
}
.et-form-note--stop a { color: #8c2f2f; text-decoration: underline; }
.et-form-note--wait {
    display: flex; gap: 10px; align-items: flex-start;
    background: #eff6fb; border-color: #cfe2ef; color: #235a7d;
    font-weight: 500; margin: 0;
}

/* How many countries are selected, under the list. Turns red when it
   exceeds the subscription — the same rule the server enforces, said
   before the customer presses anything. */
.et-fcount { margin: 8px 0 0; font-size: .82rem; color: var(--et-muted, #7c8a95); }
.et-fcount.is-over { color: #8c2f2f; font-weight: 600; }

/* What the button is about to do, immediately left of it. */
.et-form2__summary {
    align-self: center; margin-left: auto; padding-right: 4px;
    font-size: .84rem; font-weight: 600; color: var(--et-navy, #134a6d);
}
.et-form2__summary + .et-btn { margin-left: 0; }

/* Checkbox groups as selectable cards.
   ------------------------------------------------------------------
   `.et-checks` on its own is a bordered, scrolling box (max-height
   190px, its own background) — right for the register page, where it
   holds a long list of interests. Inside a `<fieldset>` that already
   carries a legend it produced a box within a box, with a scrollbar
   over four options and 16px native checkboxes floating in it, next to
   44px fields and select2 chips.

   This variant drops that frame and makes each option a control in its
   own right, mirroring `.et-radio` — the same border, radius and
   checked state, so a checkbox and a radio in this application look
   like relatives. `:has()` does the checked state, as it already does
   for the radios. */
.et-checks--cards {
    border: 0; padding: 0; background: none; max-height: none; overflow: visible;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px;
}
.et-checks--cards .et-check {
    margin: 0; padding: 10px 13px; min-height: 44px;
    display: flex; align-items: center; gap: 10px;
    border: 1px solid #cfdae2; border-radius: 8px; background: #fff;
    font-size: .92rem; font-weight: 500; color: #223; cursor: pointer;
    transition: border-color var(--et-trans), background var(--et-trans), box-shadow var(--et-trans);
}
.et-checks--cards .et-check:hover { border-color: #a9bece; background: #fbfdfe; }
/* The inset ring rather than a thicker border: a 2px border would move
   the text by a pixel on every tick, and a grid of options that jitters
   as you click through it reads as broken. */
.et-checks--cards .et-check:has(input:checked) {
    border-color: var(--et-blue, #134a6d); background: #f2f7fa;
    box-shadow: inset 0 0 0 1px var(--et-blue, #134a6d);
}
.et-checks--cards .et-check:focus-within {
    outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 1px; border-color: var(--et-blue, #134a6d);
}
.et-checks--cards .et-check input {
    width: 18px; height: 18px; flex: 0 0 auto; margin: 0;
    accent-color: var(--et-blue, #134a6d);
}
.et-checks--cards .et-check > span { line-height: 1.35; }

/* The single yes/no that opens a section — "the contact person is the
   company representative". Same card as the groups above, but sized to
   its sentence: in a `et-c12` cell of a dialog opened at 85vw it would
   otherwise be a 1240px box holding eight words, which reads as a
   layout accident rather than a control. */
.et-check--card {
    display: inline-flex; width: fit-content; max-width: 100%;
    align-items: center; gap: 10px; margin: 0;
    padding: 11px 13px; min-height: 44px;
    border: 1px solid #cfdae2; border-radius: 8px; background: #fff;
    font-size: .92rem; font-weight: 500; color: #223; cursor: pointer;
    transition: border-color var(--et-trans), background var(--et-trans), box-shadow var(--et-trans);
}
.et-check--card:hover { border-color: #a9bece; background: #fbfdfe; }
.et-check--card:has(input:checked) {
    border-color: var(--et-blue, #134a6d); background: #f2f7fa;
    box-shadow: inset 0 0 0 1px var(--et-blue, #134a6d);
}
.et-check--card:focus-within { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 1px; }
.et-check--card input { width: 18px; height: 18px; flex: 0 0 auto; margin: 0; accent-color: var(--et-blue, #134a6d); }

/* A fieldset is a grid item here; without this its legend and box get
   the browser's own margins and the two columns stop lining up. */
.et-pdform fieldset.et-field { border: 0; margin: 0; padding: 0; min-width: 0; }
.et-pdform fieldset.et-field > .et-label { padding: 0; margin-bottom: 8px; display: block; }

@media (max-width: 720px) {
    .et-fsec--step .et-fsec__aside { grid-template-columns: 26px minmax(0, 1fr); }
    .et-fstep { width: 26px; height: 26px; font-size: .78rem; }
    .et-form2__summary { margin-left: 0; width: 100%; }
}

/* ==================================================================
   Select2, wearing the application's field design
   ------------------------------------------------------------------
   select2.min.css gives structure and a look from 2014: 28px tall,
   grey gradients, 4px radius. Every field next to it is 44px with an
   8px radius and a blue focus ring, so left alone it reads as a
   control from another program. This is the skin, loaded after it.

   Selectors are as specific as they have to be — select2's own rules
   are `.select2-container--default .select2-selection--single`, and a
   single class here would lose to them.
   ================================================================== */

/* The closed control: the same box as `.et-input`. */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    min-height: 44px; padding: 5px 8px;
    border: 1px solid #cfdae2; border-radius: 8px; background: #fff;
    transition: border-color var(--et-trans), box-shadow var(--et-trans);
}
.select2-container--default .select2-selection--single { padding: 0 8px; display: flex; align-items: center; }
.select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 26px 0 4px; color: #1d2b33; font-size: 16px; line-height: 1.4;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder { color: #9bacb7; }
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 42px; right: 8px;
}
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--et-blue, #134a6d);
    box-shadow: 0 0 0 3px rgba(25, 98, 144, .18);
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover { border-color: #a9bece; }

/* Multiple: chips, not a list box. This is the control the posting
   declaration needed — picking three countries without knowing that a
   native multi-select wants ctrl+click. */
.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex; flex-wrap: wrap; gap: 5px; padding: 0; margin: 0;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-flex; align-items: center; gap: 6px; margin: 0;
    padding: 4px 9px; border-radius: 999px;
    background: #eef4f8; border: 1px solid #d3e3ee; color: var(--et-navy, #134a6d);
    font-size: .86rem; font-weight: 600;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    order: 2; margin: 0; border: 0; background: none; color: #6f8a9c;
    font-size: 1.05rem; line-height: 1; padding: 0 0 0 2px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: none; color: #8c2f2f;
}
/* 4.1 wraps the chip's text in its own element, with padding sized for
   a remove button that sits on the left. Ours sits on the right (the
   `order` above), so that padding is asymmetric for nothing. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding: 0; cursor: default;
}
.select2-container--default .select2-search--inline .select2-search__field {
    margin: 3px 0; font-size: 15px; min-height: 26px;
}

/* The dropdown. */
.select2-container--default .select2-dropdown {
    border: 1px solid #cfdae2; border-radius: 10px; overflow: hidden;
    box-shadow: 0 12px 28px rgba(16, 44, 66, .14);
}
.select2-container--default .select2-search--dropdown { padding: 8px; border-bottom: 1px solid #eef2f5; }
.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 38px; padding: 8px 10px; font-size: 15px;
    border: 1px solid #cfdae2; border-radius: 7px;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: 0; border-color: var(--et-blue, #134a6d); box-shadow: 0 0 0 3px rgba(25, 98, 144, .16);
}
.select2-container--default .select2-results__option {
    padding: 9px 12px; font-size: .93rem; color: #223;
}
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background: var(--et-blue, #134a6d); color: #fff;
}
.select2-container--default .select2-results__option[aria-selected=true],
.select2-container--default .select2-results__option[data-selected=true] {
    background: #eef4f8; color: var(--et-navy, #134a6d); font-weight: 600;
}
.select2-container--default .select2-results__message { color: var(--et-muted, #7c8a95); font-size: .88rem; }

/* Above the dialog's own layers — but on the DROPDOWN only.
   `.select2-container` is `position: relative` in select2's stylesheet
   and is also the class on every closed field, so a z-index there
   raised each select above the pinned action bar (`z-index: 3`): scroll
   the form and the fields painted over the Save button. The dropdown is
   the only thing that has to stack, and it carries its own class. */
.select2-container--open .select2-dropdown { z-index: 1061; }

/* A select2 inside a grid cell must not push the row wider than its
   track — `width: 100%` from the initialiser plus this keeps a long
   company name from stretching the column. */
.et-fgrid12 .select2-container { max-width: 100%; }
.et-field .select2-container--default .select2-selection--single { width: 100%; }

/* The invalid state the forms already use, carried onto the widget. */
.et-select.is-invalid + .select2-container--default .select2-selection--single,
.et-select.is-invalid + .select2-container--default .select2-selection--multiple {
    border-color: #d06060; box-shadow: 0 0 0 3px rgba(208, 96, 96, .15);
}

/* The declaration dialog opens at `full` (85vw): the form has four sections and
   two multi-selects, and at `wide` the customer scrolled through all of it in a
   column. `.et-fsec__fields` caps at 940px app-wide — a sensible measure for a
   dialog of ordinary width, and here it would leave a third of the dialog empty.
   Raised for this form only; the twelve-column grid spreads into it, so a
   `et-c4` field lands around 400px rather than a 940px row holding one CUI. */
.et-pdform .et-fsec__fields { max-width: 1240px; }

/* ==================================================================
   Subscription bands (`et-bands`)
   ------------------------------------------------------------------
   A price list as radio cards. Each one is a package — how many
   declarations it covers and what it costs — with the arithmetic under
   the total, because a customer looking at "175,00 EUR" is entitled to
   see that it is a 100 base fee plus a 75 band plus VAT.
   ================================================================== */
.et-bands { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.et-band {
    display: block; position: relative; margin: 0; cursor: pointer;
    border: 1px solid #cfdae2; border-radius: 10px; background: #fff;
    padding: 14px 16px;
    transition: border-color var(--et-trans), background var(--et-trans), box-shadow var(--et-trans);
}
.et-band:hover { border-color: #a9bece; background: #fbfdfe; }
.et-band:has(input:checked) {
    border-color: var(--et-blue, #134a6d); background: #f2f7fa;
    box-shadow: inset 0 0 0 1px var(--et-blue, #134a6d);
}
.et-band:focus-within { outline: 3px solid rgba(25, 98, 144, .35); outline-offset: 1px; }
/* The radio itself is the affordance, not the decoration: kept visible
   and out of the way rather than hidden, so the control is still a
   radio group to a screen reader and to a keyboard. */
.et-band input { position: absolute; top: 14px; right: 14px; width: 18px; height: 18px; accent-color: var(--et-blue, #134a6d); }
.et-band__body { display: flex; flex-direction: column; gap: 8px; padding-right: 26px; }
.et-band__range {
    font-family: var(--et-display); font-weight: 700; font-size: 1.02rem;
    color: var(--et-navy, #134a6d);
}
.et-band__range em { font-style: normal; font-weight: 500; font-size: .84rem; color: var(--et-muted, #7c8a95); display: block; }
.et-band__price { display: flex; flex-direction: column; gap: 2px; }
.et-band__price strong { font-size: 1.15rem; color: #1d2b33; }
.et-band__parts { font-size: .78rem; color: var(--et-muted, #7c8a95); }

/* ==================================================================
   Subscriptions, as table rows
   ------------------------------------------------------------------
   The same `et-table` as the declarations tab next door, so the two
   tabs read as one screen. What this adds is the quota inside a cell:
   a bar plus the ratio, because "21 left" on its own does not say
   whether that is most of the package or the last of it.
   ================================================================== */

/* State chips. `.et-chip` is white-on-colour by default (it carries a
   status colour from the database on the declarations table); these
   three are named states, so they are given the quieter tinted
   treatment used elsewhere for the same job. */
.et-chip--ok { background: #e8f6ef; color: #1d6f49; border: 1px solid #bfe6d3; }
.et-chip--off { background: #f4f7f9; color: #7c8a95; border: 1px solid #e3eaef; }
.et-chip--unpaid { background: #fdf1f1; color: #8c2f2f; border: 1px solid #f3c6c6; margin-left: 6px; }
/* `.et-chip--warn` already exists as a solid amber with `!important`,
   for the booking tables. Overridden here — and only here — because a
   row of solid amber next to two tinted chips reads as an error. */
.et-table--subs .et-chip--warn { background: #fff6e4 !important; color: #8a5e12; border: 1px solid #f2e2bd; }
.et-table--subs .et-chip { font-size: .72rem; padding: 3px 9px; margin-left: 8px; vertical-align: middle; }

/* An ended subscription states that instead of showing a quota figure
   that is not a fact about it — see the comment in the template. */
.et-table--subs tr.is-expired td { color: var(--et-muted, #7c8a95); }
.et-table--subs tr.is-expired .et-table__nr { color: #55707f; }
.et-table--subs tr.is-expiring { background: #fffdf7; }

/* The quota, in its cell: bar over ratio, both narrow enough to sit in
   a table row without stretching it. */
.et-qbar { width: 130px; height: 6px; border-radius: 999px; background: #eef2f5; overflow: hidden; margin-bottom: 4px; }
.et-qbar > span { display: block; height: 100%; border-radius: 999px; background: var(--et-blue, #134a6d); }
.et-table--subs tr.is-expiring .et-qbar > span { background: #d29a2a; }
.et-qbar__n { font-size: .84rem; color: #33505f; white-space: nowrap; }
.et-qbar__n strong { font-size: 1rem; color: var(--et-navy, #134a6d); }
.et-qbar__n span { color: var(--et-muted, #7c8a95); }

/* Extra declarations bought on top of the band. */
.et-sub__extra { color: var(--et-blue, #134a6d); font-weight: 600; }

/* The subscription line in the cart. It used to be a title and a bin
   icon — no company, no package, no price — while the totals ignored it
   and the order would have been written for 0.00. */
.et-subline { margin-top: 4px; font-size: .93rem; color: #1d2b33; }
.et-subline strong { color: var(--et-navy, #134a6d); }
.et-subline__parts { margin-top: 2px; font-size: .8rem; color: var(--et-muted, #7c8a95); }

/* Days of cover left, under the period on the declarations table. Amber
   inside the warning window — the point is that the next declaration has
   to be filed before this one runs out, not after. */
.et-daysleft { margin-top: 3px; font-size: .78rem; color: var(--et-muted, #7c8a95); white-space: nowrap; }
.et-daysleft.is-soon { color: #8a5e12; font-weight: 600; }
.et-daysleft i { margin-right: 4px; opacity: .8; }

/* ==================================================================
   Section header with attached tabs (`et-sechead`)
   ------------------------------------------------------------------
   The heading and the tab strip used to be two loose blocks with a gap
   between them, so the tabs read as something floating under the page
   rather than as the two views of what the heading names. One surface:
   title on top, tabs along the bottom edge, sharing a border.
   ================================================================== */
.et-sechead {
    background: #fff; border: 1px solid var(--et-line, #e2e9ef);
    border-radius: var(--et-radius, 14px); box-shadow: var(--et-shadow-sm);
    padding: 18px 20px 0; margin-bottom: 22px;
}
.et-sechead__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.et-sechead__top h1 { font-family: var(--et-display); font-weight: 800; font-size: 1.5rem; margin: 0; color: var(--et-navy); }
.et-sechead__top p { margin: 4px 0 0; color: var(--et-muted); font-size: .95rem; }

/* Attached: no card of its own, no top margin, and it sits on the
   header's bottom edge rather than floating below it. */
.et-tabs--attached {
    margin: 16px -20px 0; padding: 0 20px;
    background: none; border: 0; border-top: 1px solid var(--et-line, #e2e9ef);
    border-radius: 0; gap: 2px;
}
.et-tabs--attached .et-tabs__t {
    border-radius: 0; background: none; border: 0;
    border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 12px 4px;
    margin-right: 20px; color: var(--et-muted, #7c8a95);
}
.et-tabs--attached .et-tabs__t:hover { color: var(--et-navy, #134a6d); }
.et-tabs--attached .et-tabs__t[aria-selected="true"] {
    background: none; color: var(--et-navy, #134a6d); border-bottom-color: var(--et-blue, #134a6d);
}

/* The account sidebar's own header. The dark band greets the customer
   too, but it scrolls away — this card is sticky, so on a long list it
   is the only thing left saying whose account is open. */
.et-side__head {
    display: flex; align-items: center; gap: 11px;
    padding: 4px 14px 14px; margin-bottom: 8px;
    border-bottom: 1px solid var(--et-line, #e2e9ef);
}
.et-side__av {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--et-navy, #134a6d); color: #fff;
    font-family: var(--et-display); font-weight: 700; font-size: .84rem; letter-spacing: .02em;
}
.et-side__who { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.et-side__who strong {
    font-family: var(--et-display); font-weight: 700; font-size: .93rem; color: var(--et-navy, #134a6d);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.et-side__who small { font-size: .76rem; color: var(--et-muted, #7c8a95); }

/* Group heading inside the user dropdown, matching the account
   sidebar's `.et-side__sep`. With a label it names the group; empty it
   is just the rule that sets the sign-out apart from the sections. */
.et-lang__sep {
    margin: 6px 4px 4px; padding-top: 8px; border-top: 1px solid var(--et-line, #e2e9ef);
    font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
    color: var(--et-muted, #7c8a95);
}
.et-lang__sep:empty { margin: 6px 4px; padding-top: 0; }
/* The menu grew from six rows to ten; it needs room for the longest
   label rather than the narrowest. */
.et-lang__menu { min-width: 208px; }

/* Filter toolbars: give the select2 container the width the native
   select had.
   ------------------------------------------------------------------
   `.et-toolbar .et-select { width: auto; min-width: 190px }` sized the
   native control, but select2 replaces it with a container carrying an
   inline `width: 100%` (the initialiser's `width` option, right for a
   field in a form grid). In a flex toolbar that made every filter
   full-width and wrapped the bar into a broken column — on bookings,
   orders and companies alike.

   `!important` because the width select2 sets is an inline style, and
   nothing but `!important` outranks one. */
.et-toolbar .select2-container { width: auto !important; min-width: 190px; }
.et-toolbar .select2-container .select2-selection--single { min-height: 44px; }

/* The auth forms size their fields down (`.et-authform .et-select`), and
   that rule now lands on an element select2 has hidden — so the widget
   kept the default 44px while the inputs beside it were 9px/13px. Same
   sizing, applied to the container. */
.et-authform .select2-container--default .select2-selection--single { min-height: 40px; }
.et-authform .select2-container--default .select2-selection--single .select2-selection__rendered { font-size: .92rem; }

/* ==================================================================
   `slim` — 1000px, for the driver form
   ------------------------------------------------------------------
   This one dialog has been tuned three times: 1560 → 2340 → 1638 →
   1000. It is the only consumer of this size, so the value here is
   that form's width; change it here rather than adding another step.

   Renamed from `xwide` when it came down to 1000px. At that width the
   old name was a trap: something called "xwide" would have been the
   narrowest step in the set apart from the default, and the next
   person reaching for the widest dialog would have got the opposite.

   The ladder, in order: 800 (default `modal-lg`) → 1000 (`slim`) →
   1200 (`mid`) → 1560 (`wide`) → 85vw (`full`).

   No field-cap rule any more. `.et-fsec__fields` caps the field area
   at 940px app-wide; at 1000px the dialog offers about 650, so the cap
   cannot bind and raising it would say nothing.
   ================================================================== */
#etModal .modal-dialog.modal-et-slim,
#etModalL2 .modal-dialog.modal-et-slim { max-width: min(1000px, calc(100vw - 40px)); }
#etModal .modal-dialog.modal-et-slim.modal-dialog-scrollable,
#etModalL2 .modal-dialog.modal-et-slim.modal-dialog-scrollable { --bs-modal-margin: .75rem; }

/* `mid` — half again as wide as the default dialog.
   ------------------------------------------------------------------
   For the vehicle form, which opened at Bootstrap's 800px. With a
   260px description rail on the left, that left under 500px for the
   fields — a two-column grid squeezed into one column's worth of room.

   Not the driver dialog's size: that form asks for twenty fields, this
   one for three. The ladder is 800 → 1000 → 1200 → 1560 → 85vw, and
   this is the step the form actually needed.

   No field-cap rule: at 1200px the fields get about 890px, just under
   the 940px cap, so nothing is being held back. */
#etModal .modal-dialog.modal-et-mid,
#etModalL2 .modal-dialog.modal-et-mid { max-width: min(1200px, calc(100vw - 40px)); }
#etModal .modal-dialog.modal-et-mid.modal-dialog-scrollable,
#etModalL2 .modal-dialog.modal-et-mid.modal-dialog-scrollable { --bs-modal-margin: .75rem; }