/* Djermane Cars & Motos: a dark showroom with a red racing livery. Unbounded for display, Manrope for text, Cairo for Arabic.
   Flat colour fields and tone steps instead of glows and gradients. Nothing moves except while something loads (transform and opacity only). */

:root {
    --bg: #050706;
    --bg-2: #0a0e0c;
    --panel: #0f1513;
    --panel-2: #141c19;
    --ph: #1d2824;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.16);
    --text: #ecf2ee;
    --muted: #93a09a;
    --accent: #ff2b2b;
    /* The same red as a surface under white text: #ff2b2b reads at only 3.7:1, this one at 4.9:1. */
    --accent-fill: #dc1f1f;
    --accent-2: #e01e1e;
    --accent-ink: #ffffff;
    --accent-soft: rgba(255, 43, 43, 0.12);
    --glow: rgba(255, 43, 43, 0.45);
    --red: #ff2e4d;

    --display: 'Unbounded', 'Cairo', system-ui, sans-serif;
    --body: 'Manrope', 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --pad: clamp(16px, 3vw, 48px);
    --nav-h: 68px;
    --r-panel: 20px;
    --r-inner: 14px;
    --radius: var(--r-panel);
    --section: clamp(96px, 11vw, 168px);
    --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html[lang='ar'] {
    --display: 'Cairo', 'Unbounded', system-ui, sans-serif;
    --body: 'Cairo', 'Manrope', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; color-scheme: dark; }
html.has-dialog { overflow: hidden; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--body);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}
html[lang='ar'] body { line-height: 1.8; }
html[lang='ar'] *:not(.latin):not(.latin *) { letter-spacing: 0 !important; }

img { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, address, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
address { font-style: normal; }
bdi { unicode-bidi: isolate; }
/* The Latin wordmarks keep their left-to-right order in Arabic. */
.latin { direction: ltr; unicode-bidi: isolate; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent-fill); color: var(--accent-ink); }
html[dir='rtl'] .flip { transform: scaleX(-1); }

/* ---------- Shared ---------- */
.h2 {
    font: 800 clamp(28px, 3.4vw, 52px)/1.04 var(--display);
    letter-spacing: -0.035em;
    text-wrap: balance;
}
html[lang='ar'] .h2 { line-height: 1.25; font-weight: 900; }
.lead { margin-top: 18px; max-width: 52ch; color: var(--muted); font-size: clamp(16px, 1.2vw, 19px); }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(36px, 4vw, 56px); }
.sec-head--center { flex-direction: column; align-items: center; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
    height: 48px; padding: 0 22px; border-radius: 999px; border: 1px solid transparent;
    font: 700 15px/1 var(--body); white-space: nowrap; cursor: pointer;
    transition: transform 0.25s var(--ease), background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.3s ease, color 0.2s ease;
}
.btn:active { transform: scale(0.96); }
.btn--accent { background: var(--accent-fill); color: var(--accent-ink); }
.btn--ghost { background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); color: var(--text); }
.btn--icon { width: 44px; height: 44px; padding: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.04); border-color: var(--line-2); }
.btn--lg { height: 58px; padding: 0 28px; font-size: 16px; }
.btn--sm { height: 42px; padding: 0 18px; font-size: 14px; }
@media (hover: hover) and (pointer: fine) {
    .btn--accent:hover { background: #c41818; }
    .btn--ghost:hover, .btn--icon:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.3); }
}

.chip {
    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 999px;
    background: rgba(5, 7, 6, 0.88); border: 1px solid var(--line);
    font: 700 12px/1 var(--body); color: #fff; white-space: nowrap;
}
.chip i { color: var(--accent); }

.brand { display: inline-flex; align-items: center; flex: none; }
.mark { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; line-height: 1; white-space: nowrap; }
.mark__name {
    font: italic 900 23px/1 'Exo 2', sans-serif; letter-spacing: 0.02em; color: #f4f5f7;
}
.mark__sub { display: inline-flex; align-items: center; gap: 6px; font: 600 8.5px/1 'Exo 2', sans-serif; letter-spacing: 0.3em; color: #e9ebee; }
.mark__sub b { color: var(--accent); font-weight: 700; }
.mark__sub i { width: 14px; height: 1.5px; border-radius: 2px; background: #fff; }
.mark__sub i:last-child { background: var(--accent-fill); }

/* ---------- Loading ---------- */
/* The screen shown while the app downloads (index.html carries the same rules inline, so it is up before this file is). */
.boot { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: 22px; background: var(--bg); }
.boot .mark__name { font-size: 46px; }
.boot .mark__sub { font-size: 14px; }
.boot__bar { width: min(240px, 60vw); height: 4px; border-radius: 4px; background: var(--panel-2); overflow: hidden; }
.boot__bar span { display: block; height: 100%; width: var(--blazor-load-percentage, 12%); min-width: 12%; background: var(--accent-fill); transition: width 0.3s ease; }
/* A thin bar under the header while the site waits for the server (see ActivityBar): it shows after a short moment, so a quick answer never blinks it. */
.activity { position: fixed; inset: calc(var(--nav-h) - 3px) 0 auto 0; height: 3px; z-index: 61; overflow: hidden; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.activity.is-on { opacity: 1; transition-delay: 0.18s; }
.activity span { position: absolute; inset-block: 0; inset-inline-start: 0; width: 38%; background: var(--accent-fill); animation: activity 1.1s ease-in-out infinite; }
@keyframes activity { from { transform: translateX(-100%); } to { transform: translateX(270%); } }
html[dir='rtl'] .activity span { animation-name: activity-rtl; }
@keyframes activity-rtl { from { transform: translateX(100%); } to { transform: translateX(-270%); } }
/* Placeholders for what is on its way: flat blocks the size of the real thing. Only their opacity breathes, so nothing else repaints. */
.ph { display: block; border-radius: 10px; background: var(--ph); color: transparent; user-select: none; }
.card--ghost, .logo--ghost, .ship__card--ghost, .check--ghost, .is-waiting, .sheet__ghost { animation: breathe 1.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: 0.5; } }
#blazor-error-ui { display: none; position: fixed; inset: auto 0 0 0; z-index: 200; padding: 14px var(--pad); background: var(--red); color: #fff; }
#blazor-error-ui a { color: #fff; margin-inline: 12px; }
#blazor-error-ui .dismiss { cursor: pointer; }

/* ---------- Navigation ---------- */
/* Solid, still, cheap to paint: no blur behind the bar, no animation anywhere in the header. */
.nav {
    position: fixed; inset: 0 0 auto 0; z-index: 60; height: var(--nav-h);
    display: flex; align-items: center; gap: 24px; padding: 0 var(--pad);
    background: var(--bg); border-bottom: 1px solid var(--line);
}
.nav::after { content: ''; position: absolute; inset: auto 0 -1px; height: 2px; background: linear-gradient(90deg, var(--accent) 0 120px, transparent 120px); }
html[dir='rtl'] .nav::after { background: linear-gradient(270deg, var(--accent) 0 120px, transparent 120px); }
.nav__links { display: flex; gap: 6px; margin-inline: auto; }
.nav__links a {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px;
    font-weight: 600; font-size: 14px; color: #c9d3ce;
}
.nav__links a i { color: var(--accent); font-size: 13px; }
@media (hover: hover) { .nav__links a:hover { background: rgba(255, 255, 255, 0.06); color: #fff; } }
.nav__end { display: flex; align-items: center; gap: 10px; margin-inline-start: auto; }
.nav__links + .nav__end { margin-inline-start: 0; }
.nav__lang {
    display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 999px;
    background: none; border: 1px solid var(--line-2); cursor: pointer; font-weight: 700; font-size: 14px;
}
.nav__lang i { color: var(--accent); }

/* ---------- Hero: who we are, the stock, and the brands as the way in ----------
   A still composition: a racing-livery band, a giant outlined wordmark, solid panels. Nothing moves, nothing is blurred, no filter is
   used, so it costs a weak phone one paint and nothing after. */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    padding: calc(var(--nav-h) + clamp(28px, 5vw, 72px)) var(--pad) 0;
    background: var(--bg);
}
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* The livery: two bold bands and a thin white line, cut at the same angle as the cuts of the page. */
.hero__stripes {
    position: absolute; inset-block: -10% -10%; inset-inline-end: -4%; width: min(46vw, 640px);
    background: linear-gradient(112deg,
        transparent 0 40%, var(--accent) 40% 58%, transparent 58% 61%, #fff 61% 63%, transparent 63% 68%,
        rgba(255, 43, 43, 0.55) 68% 76%, transparent 76% 79%, rgba(255, 255, 255, 0.25) 79% 80%, transparent 80%);
    opacity: 0.9;
}
html[dir='rtl'] .hero__stripes { transform: scaleX(-1); }
.hero__word {
    position: absolute; inset-inline: 0; bottom: 0.02em; text-align: center; white-space: nowrap;
    font: italic 900 clamp(90px, 21vw, 360px)/0.85 'Exo 2', sans-serif; letter-spacing: -0.02em;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.07);
}

.hero__wrap {
    position: relative; max-width: 1360px; margin: 0 auto;
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 22px; }
.hero__tag {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 34px; padding-inline: 12px 16px; border-radius: 999px; border-start-start-radius: 4px; border-end-start-radius: 4px;
    border-inline-start: 3px solid var(--accent); background: rgba(255, 255, 255, 0.05); font-size: 13px; font-weight: 800; color: #e2e6e9;
}
.hero__tag i { color: var(--accent); }
.hero__title { font: 900 clamp(40px, 5.3vw, 100px)/0.92 var(--display); letter-spacing: -0.045em; text-transform: uppercase; }
.hero__title .line > span { white-space: nowrap; }
html[lang='ar'] .hero__title { text-transform: none; line-height: 1.2; font-size: clamp(48px, 6.4vw, 108px); }
.hero__title .line { display: block; overflow: clip; padding-bottom: 0.06em; }
.hero__title .line > span { display: inline-block; }
.line--accent > span { color: var(--accent); }
.line--accent { position: relative; }
.line--accent::after { content: ''; display: block; width: min(60%, 360px); height: 6px; margin-top: 10px; background: linear-gradient(90deg, var(--accent) 0 70%, #fff 70% 76%, var(--accent) 76%); transform: skewX(-28deg); }
/* Right to left: the livery cut and its white notch start on the right and lean the other way. */
html[dir='rtl'] .line--accent::after { background: linear-gradient(270deg, var(--accent) 0 70%, #fff 70% 76%, var(--accent) 76%); transform: skewX(28deg); }
.hero__lead { max-width: 42ch; font-size: clamp(16px, 1.25vw, 19px); color: #c1c6cb; }

/* Under the first screen: four ticks, what a client can count on. */
.hero__checks {
    position: relative; max-width: 1360px; margin: clamp(28px, 4vw, 56px) auto 0; padding-block: clamp(18px, 2vw, 28px);
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px clamp(16px, 2.4vw, 40px);
}
/* A solid band across the whole width, so the livery stripes end above it and never run under the words. */
.hero__checks { isolation: isolate; }
.hero__checks::before { content: ''; position: absolute; inset: 0 -100vw; z-index: -1; background: var(--bg); }
.hero__checks li { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: clamp(14px, 1.15vw, 16px); line-height: 1.3; }
.hero__checks i { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-fill); color: #fff; font-size: 12px; }

.badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent-fill); color: var(--accent-ink); font-size: 11px; }

/* The logo in the header and the footer. */
.brand {
    position: relative; display: grid; justify-items: center; gap: 6px; padding: 12px 8px 10px; border-radius: var(--r-inner); cursor: pointer;
    background: var(--bg-2); border: 1px solid var(--line); transition: transform 0.25s var(--ease), border-color 0.2s ease, box-shadow 0.2s ease;
}
@media (hover: hover) { .brand:hover { border-color: var(--line-2); background: var(--panel-2); } }
/* ---------- Showroom ---------- */
.showroom { padding: 0 var(--pad) clamp(40px, 6vw, 80px); scroll-margin-top: var(--nav-h); }
.showroom__head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 20px; padding-bottom: 14px; }
.showroom__title { display: flex; align-items: center; gap: 12px; font: 800 clamp(24px, 2.6vw, 34px)/1.1 var(--display); letter-spacing: -0.02em; }
.showroom__title > i { color: var(--accent); font-size: 0.8em; }
.showroom__logo { width: 48px; height: 48px; display: grid; place-items: center; padding: 7px; border-radius: var(--r-inner); background: #fff; }
.showroom__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.showroom__count { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; font-weight: 800; color: var(--text); }
.showroom__count > i { color: var(--accent); }
.showroom__wait { display: inline-flex; align-items: center; gap: 10px; }
.showroom__wait i { color: var(--accent); }
.showroom__slow { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; padding: 12px 16px; border-radius: var(--r-inner); background: var(--accent-soft); font-weight: 700; font-size: 14px; }
.showroom__slow i { color: var(--accent); }
/* Columns the page size the site asks for divides evenly (site.js pageSize): 3 or 2 beside the filters, 2 on a tablet, 1 on a phone. */
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); }
@media (min-width: 1420px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 699px) { .grid { grid-template-columns: minmax(0, 1fr); } }
.showroom__more { display: flex; justify-content: center; margin-top: 44px; }
.empty { display: grid; justify-items: center; gap: 18px; padding: 80px 20px; background: var(--panel); border-radius: var(--radius); text-align: center; color: var(--muted); }
.empty > i { font-size: 44px; color: var(--accent); }

.card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--panel); border-radius: var(--radius);
    transition: background-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
    .card:hover { background: var(--panel-2); }
}
.card__media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; overflow: hidden; background: var(--bg-2); cursor: pointer; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__alt { position: absolute; inset: 0; opacity: 0; }
.card__chips { position: absolute; top: 12px; inset-inline-start: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.chip--grade { background: var(--accent-fill); color: var(--accent-ink); border-color: transparent; }
.chip--grade i { color: var(--accent-ink); }
.card__photos { position: absolute; bottom: 12px; inset-inline-end: 12px; }
.card__body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.card__make { font-size: 12px; font-weight: 800; letter-spacing: 0; color: var(--accent); }
.card__name { font: 700 20px/1.2 var(--display); letter-spacing: -0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__name span { font: 500 14px/1.3 var(--body); color: var(--muted); letter-spacing: 0; }
.card__specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; font-size: 13.5px; color: #c4cec9; }
.card__specs li { display: flex; align-items: center; gap: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__specs i { width: 16px; color: var(--accent); font-size: 13px; text-align: center; }
.card__price { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 16px; }
.card__actions { display: flex; gap: 8px; }
.card__actions .btn--accent { flex: 1; }

/* ---------- Car detail ---------- */
.detail {
    width: min(1200px, 94vw); max-height: 92svh; padding: 0; margin: auto; overflow: auto;
    color: var(--text); background: var(--panel); border: 0; border-radius: var(--r-panel);
    box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8);
}
.detail[open] { animation: dialog-in 0.5s var(--ease); }
.detail::backdrop { background: rgba(2, 4, 3, 0.88); }
@keyframes dialog-in { from { opacity: 0; transform: translateY(30px) scale(0.97); } }
@keyframes fade { from { opacity: 0.2; } }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: var(--r-inner); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.specs > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; background: var(--panel); }
.specs dt { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--muted); }
.specs dt i { width: 14px; color: var(--accent); text-align: center; }
.specs dd { font-weight: 700; font-size: 14.5px; }


/* Car sheet: gallery on one side, the essentials and the price on the other */
.sheet { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sheet__close { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 4; background: rgba(5, 7, 6, 0.88); }
.sheet__media { display: grid; gap: 10px; align-content: start; padding: 18px; background: var(--bg-2); border-inline-end: 1px solid var(--line); }
.sheet__photo {
    position: relative; aspect-ratio: 4 / 3; border-radius: var(--r-panel); overflow: hidden;
    /* A flat block shows through until the photo has loaded. */
    background: var(--panel-2);
}
.sheet__preload { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.sheet__photo img { width: 100%; height: 100%; object-fit: cover; animation: fade 0.45s ease; }
@keyframes fade { from { opacity: 0.2; } }
.sheet__grade { position: absolute; top: 14px; inset-inline-start: 14px; }
.sheet__counter { position: absolute; bottom: 14px; inset-inline-start: 14px; background: rgba(5, 7, 6, 0.88); }
.sheet__arrow {
    position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 46px; border-radius: 50%;
    display: grid; place-items: center; background: rgba(5, 7, 6, 0.88); border: 0; cursor: pointer; transition: background-color 0.2s ease;
}
.sheet__arrow:hover { background: var(--accent-fill); color: var(--accent-ink); }
.sheet__arrow--prev { inset-inline-start: 14px; }
.sheet__arrow--next { inset-inline-end: 14px; }
.sheet__thumbs { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.sheet__thumbs button { padding: 0; border: 2px solid transparent; border-radius: var(--r-inner); overflow: hidden; cursor: pointer; aspect-ratio: 4 / 3; background: var(--panel-2); opacity: 0.55; transition: opacity 0.2s ease, border-color 0.2s ease; }
.sheet__thumbs button.is-on, .sheet__thumbs button:hover { opacity: 1; border-color: var(--accent); }
.sheet__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.sheet__ghost {
    aspect-ratio: 4 / 3; border-radius: var(--r-inner); background: var(--panel-2);
    animation-delay: calc(var(--i) * 0.12s);
}
.sheet__wait { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.sheet__wait i { color: var(--accent); }
.sheet__ask { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--r-inner); border: 1px dashed var(--line-2); }
.sheet__ask > i { font-size: 22px; color: var(--accent); }
.sheet__ask p { flex: 1 1 200px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.sheet__ask .btn { height: 42px; }

.sheet__info { display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 0; min-width: 0; }
.sheet__head { display: flex; gap: 14px; align-items: center; padding-inline-end: 52px; }
.sheet__logo { flex: none; width: 58px; height: 58px; display: grid; place-items: center; padding: 9px; border-radius: var(--r-inner); background: #fff; }
.sheet__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sheet__make { font-size: 12px; font-weight: 800; letter-spacing: 0; color: var(--accent); }
.sheet__make span { margin-inline-start: 8px; color: var(--muted); letter-spacing: 0.02em; text-transform: none; font-weight: 600; }
.sheet__title { font: 800 clamp(24px, 2.4vw, 34px)/1.08 var(--display); letter-spacing: -0.03em; }
.sheet__trim { margin-top: 4px; font-size: 14px; color: var(--muted); line-height: 1.4; }

.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.facts li { display: grid; justify-items: center; gap: 2px; padding: 12px 6px; border-radius: var(--r-inner); background: var(--bg-2); text-align: center; }
.facts i { font-size: 17px; color: var(--accent); margin-bottom: 4px; }
.facts b { font-size: 14px; line-height: 1.2; }
.facts span { font-size: 11px; font-weight: 700; color: var(--muted); }

.sheet__price {
    position: relative; overflow: hidden; padding: 18px 20px; border-radius: var(--r-panel);
    background: color-mix(in srgb, var(--accent) 16%, var(--panel));
}
.sheet__price-label { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0; }
.sheet__price strong { display: block; margin-top: 6px; font: 800 clamp(28px, 2.8vw, 40px)/1.05 'Unbounded', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.sheet__price details { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 10px; }
.sheet__price summary { display: flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 13px; font-weight: 700; color: #c4cec9; }
.sheet__price summary::-webkit-details-marker { display: none; }
.sheet__price summary .fa-chevron-down { margin-inline-start: auto; font-size: 11px; transition: transform 0.3s var(--ease); }
.sheet__price details[open] summary .fa-chevron-down { transform: rotate(180deg); }
.sheet__price ul { margin-top: 10px; display: grid; gap: 6px; font-size: 13.5px; color: #c4cec9; }
.sheet__price li { display: flex; justify-content: space-between; gap: 12px; }
.sheet__price li bdi { font-weight: 700; color: var(--text); }

.sheet__labels { display: flex; flex-wrap: wrap; gap: 6px; }
.sheet__labels li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); }
.sheet__labels i { color: #3ddc84; }
.sheet__h3 { display: flex; align-items: center; gap: 10px; font: 700 15px var(--display); }
.sheet__h3 i { color: var(--accent); }
.swatch { display: inline-block; width: 12px; height: 12px; margin-inline-end: 8px; border-radius: 50%; background: var(--c); border: 1px solid rgba(255, 255, 255, 0.4); vertical-align: -1px; }

.sheet__actions {
    position: sticky; bottom: 0; z-index: 2; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 -26px; padding: 14px 26px 18px;
    background: linear-gradient(transparent, var(--panel) 30%);
}
.sheet__actions .btn { flex: 1 1 200px; }
.sheet__actions .short { display: none; }

/* The price and the buttons: under the photos on a computer (the photo side is never left empty), in the details on a phone. */
.sheet__buy--flow { display: contents; }
.sheet__buy--side { display: grid; gap: 12px; margin-top: 4px; }
.sheet__buy--side .sheet__actions { position: static; margin: 0; padding: 0; background: none; }
@media (min-width: 1025px) {
    .sheet__buy--flow { display: none; }
    .sheet__info { padding-bottom: 26px; }
}
@media (max-width: 1024px) { .sheet__buy--side { display: none; } }

/* ---------- Pagination ---------- */
.pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 48px; flex-wrap: wrap; }
.pager__list { display: flex; align-items: center; gap: 6px; }
.pager__num, .pager__step {
    min-width: 48px; height: 48px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    border-radius: var(--r-inner); border: 1px solid var(--line-2); background: var(--panel); font-weight: 800; font-size: 15px; cursor: pointer;
    font-variant-numeric: tabular-nums; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s var(--ease);
}
@media (hover: hover) { .pager__num:hover:not(:disabled), .pager__step:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); } }
.pager__num.is-on { background: var(--accent-fill); border-color: var(--accent); color: var(--accent-ink); }
.pager__num:disabled:not(.is-on), .pager__step:disabled { opacity: 0.4; cursor: not-allowed; }
.pager__step i { color: var(--accent); }
.pager__gap { color: var(--muted); padding: 0 4px; font-weight: 800; }
.pager__info { margin-top: 14px; text-align: center; color: var(--muted); font-size: 13.5px; font-weight: 600; }

/* ---------- FAQ ---------- */
.faq { padding: var(--section) var(--pad) 0; display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__side { position: sticky; top: calc(var(--nav-h) + var(--dock-h) + 32px); display: grid; gap: 28px; }
.faq__fb {
    display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: var(--r-inner);
    background: var(--panel); font-weight: 700; transition: background-color 0.2s ease;
}
.faq__fb > i:first-child { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--r-inner); background: #1877f2; color: #fff; font-size: 20px; }
.faq__fb > i:last-child { margin-inline-start: auto; color: var(--muted); }
@media (hover: hover) { .faq__fb:hover { background: var(--panel-2); } }
.faq__list { display: grid; gap: 12px; }
.faq__item { border-radius: var(--r-inner); background: var(--panel); transition: background-color 0.25s ease; }
.faq__item[open] { background: var(--panel-2); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 24px; cursor: pointer; list-style: none; font: 700 clamp(16px, 1.3vw, 19px)/1.35 var(--body); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); transition: transform 0.35s var(--ease), background-color 0.2s ease; }
.faq__item[open] .faq__icon { transform: rotate(45deg); background: var(--accent-fill); color: var(--accent-ink); }
.faq__item p { padding: 0 24px 24px; color: #b9c4bf; max-width: 62ch; animation: fade-up 0.45s var(--ease); }
@keyframes fade-up { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Footer ---------- */
.foot { position: relative; overflow: hidden; margin-top: var(--section); padding: 72px var(--pad) 32px; background: var(--bg-2); }
.foot__cols { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; }
.foot__brand p { margin-top: 16px; color: var(--muted); max-width: 34ch; }
.foot__col { display: grid; gap: 12px; align-content: start; }
.foot__h { font: 700 13px var(--display); color: #fff; margin-bottom: 4px; }
.foot__col a, .foot__col span { display: inline-flex; align-items: center; gap: 10px; color: #b9c4bf; font-weight: 600; transition: color 0.2s ease; }
.foot__col i { width: 16px; color: var(--accent); text-align: center; }
@media (hover: hover) { .foot__col a:hover { color: #fff; } }
.foot__word {
    margin: 48px 0 24px; text-align: center; white-space: nowrap;
    font: italic 900 15vw/0.85 'Exo 2', sans-serif; letter-spacing: 0;
    color: transparent; -webkit-text-stroke: 1.5px rgba(255, 43, 43, 0.35);
}
.foot__legal { display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.foot__credits { max-width: 120ch; opacity: 0.8; }

.notfound { min-height: 100svh; display: grid; place-content: center; justify-items: center; gap: 24px; padding: var(--pad); text-align: center; }
.notfound h1 { font: 900 clamp(80px, 20vw, 240px)/0.8 'Unbounded', sans-serif; color: var(--accent); }

/* ---------- Trust: a statement on one side, three ticks on the other ---------- */
.trust {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 72px); align-items: center;
    margin-top: var(--section); padding: clamp(40px, 5vw, 72px) var(--pad); background: var(--bg-2);
}
.trust__lead { display: flex; align-items: center; gap: 20px; }
.trust__seal { flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 50%; background: var(--accent-fill); color: #fff; font-size: 30px; }
.trust__title { font: 900 clamp(26px, 3vw, 44px)/1.05 var(--display); letter-spacing: -0.03em; text-wrap: balance; }
.trust__sub { margin-top: 8px; color: var(--muted); font-weight: 600; }
.trust__list { display: grid; gap: 12px; }
.trust__list li { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: var(--r-inner); background: var(--panel); font-weight: 800; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.35; }
.trust__tick { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 13px; }

/* ---------- Contact and map ---------- */
.contact { padding: var(--section) var(--pad) 0; display: grid; grid-template-columns: 1fr 1.35fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; }
.contact__cards { display: grid; gap: 12px; margin-top: 32px; }
.contact__card { display: grid; gap: 8px; padding: 20px 22px; border-radius: var(--r-inner); background: var(--panel); }
.contact__label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--muted); }
.contact__label i { color: var(--accent); }
.contact__phone { justify-self: start; font: 800 clamp(18px, 1.6vw, 22px)/1.3 'Unbounded', sans-serif; letter-spacing: -0.02em; transition: color 0.2s ease; }
html[dir='rtl'] .contact__phone { justify-self: end; }
@media (hover: hover) { .contact__phone:hover { color: var(--accent); } }
.contact__addr { font-weight: 700; font-size: 16px; }
.contact__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.contact__map { position: relative; min-height: 480px; border-radius: var(--r-panel); overflow: hidden; background: var(--panel); }
.contact__map iframe {
    position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.contact__pin { position: absolute; top: 16px; inset-inline-start: 16px; display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; border-radius: 999px; background: rgba(5, 5, 6, 0.85); border: 1px solid var(--line-2); font-weight: 800; font-size: 13px; transition: border-color 0.2s ease; }
.contact__pin i { color: var(--accent); }
.contact__pin i:last-child { color: var(--muted); font-size: 11px; }
@media (hover: hover) { .contact__pin:hover { border-color: var(--accent); } }

/* ---------- Live loading states ---------- */
.card__media { background: var(--bg-2); }
.card--ghost { display: grid; gap: 12px; padding-bottom: 20px; }
.card--ghost .ph { margin-inline: 20px; height: 14px; }
.card--ghost .ph:first-child { margin: 0; height: auto; aspect-ratio: 4 / 3; border-radius: 0; }
.card--ghost .ph:nth-child(3) { width: 60%; height: 22px; }
.card--ghost .ph:last-child { width: 45%; height: 30px; }
@media (max-width: 1419px) { .grid .card--ghost:nth-child(n + 5) { display: none; } }
@media (max-width: 699px) { .grid .card--ghost:nth-child(n + 3) { display: none; } }
.showroom__capped { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 600; }
.showroom__capped i { color: var(--accent); }
.specs.is-loading dd { color: var(--muted); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Large tablets ---------- */
@media (max-width: 1240px) {
    .nav__links a i { display: none; }
}

/* ---------- Tablets and phones: filters move to a sheet ---------- */
@media (max-width: 1024px) {
    .nav__links { display: none; }
    .hero__wrap { grid-template-columns: minmax(0, 1fr); }
    .hero__stripes { width: 42vw; opacity: 0.4; }
    .hero__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .trust { grid-template-columns: 1fr; }
    .contact { grid-template-columns: 1fr; }
    .contact__map { min-height: 380px; }
    .sheet { grid-template-columns: 1fr; }
    .sheet__media { border-inline-end: 0; border-bottom: 1px solid var(--line); }
    .faq { grid-template-columns: 1fr; }
    .faq__side { position: static; }
    .foot__cols { grid-template-columns: 1fr 1fr; }
    .foot__brand { grid-column: 1 / -1; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    :root { --nav-h: 60px; }
    .nav { gap: 10px; }
    .nav__end { gap: 6px; }
    .nav__lang { padding: 0 12px; height: 38px; }
    .nav__lang span { font-size: 13px; }
    .nav .btn--icon { width: 38px; height: 38px; }
    .nav__order span { display: none; }
    .nav__order { width: 38px; height: 38px; padding: 0; }
    /* A short hero on phones: the title, the figures and the search. */
    .hero { padding: calc(var(--nav-h) + 22px) var(--pad) 0; }
    .hero__copy { gap: 14px; }
    .hero__tag { display: none; }
    .hero__title { font-size: clamp(30px, 9vw, 48px); }
    html[lang='ar'] .hero__title { font-size: clamp(36px, 10.5vw, 52px); }
    .hero__lead { display: none; }
    .hero__word { display: none; }
    .showroom__logo { width: 40px; height: 40px; }
    .trust__seal { width: 56px; height: 56px; font-size: 24px; }
    .hero__checks { grid-template-columns: minmax(0, 1fr); gap: 12px; padding-block: 8px 26px; }
    .contact__map { min-height: 320px; border-radius: var(--r-panel); }

    .sec-head { gap: 20px; }
    .detail { width: 100vw; max-height: 100svh; height: 100svh; border-radius: 0; }
    .specs { grid-template-columns: 1fr 1fr; }
    .sheet__media { padding: 0 0 12px; }
    .sheet__photo { border-radius: 0; }
    .sheet__thumbs { padding: 0 14px; grid-template-columns: repeat(5, 1fr); }
    .sheet__ask { margin: 0 14px; }
    .sheet__close { top: 12px; inset-inline-end: 12px; }
    .sheet__info { padding: 18px 16px 0; gap: 16px; }
    .sheet__actions { margin: 0 -16px; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
    .sheet__actions .long { display: none; }
    .sheet__actions .short { display: inline; }
    .sheet__actions .btn { flex: 1 1 0; min-width: 0; height: 50px; padding: 0 12px; font-size: 14px; }
    .facts { grid-template-columns: repeat(2, 1fr); }
    .pager__step span { display: none; }
    .pager { flex-wrap: nowrap; }
    .pager__step { min-width: 38px; height: 44px; padding: 0; }
    .pager__num { min-width: 34px; height: 44px; padding: 0 6px; font-size: 14px; }
    .pager__list .is-far { display: none; }
    .pager__gap { padding: 0; }
    .pager { gap: 6px; }
    .pager__list { gap: 4px; }
    .foot__cols { grid-template-columns: 1fr; }
}

/* ---------- Car codes: the short reference a customer reads out ---------- */
.code-tag {
    position: absolute; bottom: 12px; inset-inline-end: 12px; display: inline-flex; align-items: baseline; gap: 6px;
    padding: 6px 10px; border-radius: 10px; background: rgba(8, 11, 10, 0.88);
    border: 1px solid rgba(255, 43, 43, 0.55); box-shadow: 0 0 16px rgba(255, 43, 43, 0.35);
}
.code-tag small { font-size: 10px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.code-tag b { font: 800 15px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.14em; color: #fff; }
.sheet__code {
    display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: var(--r-inner);
    background: var(--bg-2); border: 1px dashed rgba(255, 43, 43, 0.55);
}
.sheet__code div { display: grid; }
.sheet__code small { font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.sheet__code b { font: 800 26px/1.1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.16em; color: #fff; text-shadow: 0 0 18px var(--glow); }
.sheet__code p { flex: 1; font-size: 13px; color: var(--muted); font-weight: 600; line-height: 1.4; }
.sheet__code .btn--icon { flex: none; }

/* ---------- Grades: what S to D mean ---------- */
.grade--s { --g: #ffc94a; }
.grade--a { --g: #3ddc84; }
.grade--b { --g: #39c6e6; }
.grade--c { --g: #ff9f43; }
.grade--d { --g: #ff5c5c; }
.chip--grade[class*='grade--'] { background: var(--g, var(--accent)); color: #0b0d0c; }
.chip--grade[class*='grade--'] i { color: #0b0d0c; }
.grade--x.chip--grade { background: var(--accent-fill); color: #fff; }

.grade-tip { position: relative; display: inline-flex; outline: none; }
.grade-tip > button.chip { cursor: pointer; }
.grade-tip__i { opacity: 0.7; font-size: 11px; }
.grade-tip__pop {
    position: absolute; top: calc(100% + 8px); inset-inline-start: 0; z-index: 5; width: max-content; max-width: min(280px, 70vw);
    display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-inner); background: rgba(8, 11, 10, 0.95);
    border: 1px solid var(--line-2); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    font-size: 12.5px; font-weight: 600; line-height: 1.45; color: #d6dcd9; white-space: normal; text-align: start;
    opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease;
}
.grade-tip__pop b { color: #fff; font-size: 13px; }
.grade-tip:hover .grade-tip__pop, .grade-tip:focus-within .grade-tip__pop, .grade-tip.is-open .grade-tip__pop { opacity: 1; transform: none; }

.grades { display: grid; gap: 10px; }
.grades__intro { font-size: 13px; color: var(--muted); }
.grades__list { display: grid; gap: 6px; }
.grades__row {
    display: flex; gap: 12px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-inner);
    background: var(--bg-2); border: 1px solid var(--line); opacity: 0.72;
}
.grades__row.is-on { opacity: 1; border-color: var(--g); box-shadow: 0 0 0 1px var(--g), 0 0 22px color-mix(in srgb, var(--g) 35%, transparent); }
.grades__letter {
    flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
    background: var(--g); color: #0b0d0c; font: 900 17px/1 var(--display);
}
.grades__row div { display: grid; gap: 2px; }
.grades__row strong { font-size: 14px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.grades__row span { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.grades__this { font-size: 10.5px !important; font-weight: 800; letter-spacing: 0; color: #0b0d0c !important; background: var(--g); padding: 2px 7px; border-radius: 999px; }

/* ---------- Order tracking ---------- */
.track { padding: var(--section) var(--pad) 0; max-width: 1360px; margin: 0 auto; }
.track__head { max-width: min(1040px, 100%); margin-bottom: clamp(28px, 4vw, 48px); }
.track__body { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.track__form { display: grid; gap: 14px; padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-panel); background: var(--panel); }
.track__field { display: grid; gap: 8px; }
.track__field span { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; color: var(--muted); }
.track__field span i { color: var(--accent); }
.track__field input {
    height: 56px; padding: 0 16px; border-radius: var(--r-inner); border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text);
    font: 700 17px var(--body); outline: none; letter-spacing: 0.04em;
}
.track__field input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.track__soon { display: flex; gap: 10px; align-items: baseline; padding: 12px 14px; border-radius: var(--r-inner); background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.35); font-weight: 600; font-size: 14px; }
.track__soon i { color: var(--accent); }
.track__soon a { color: #fff; font-weight: 800; }
.track__demo { padding: clamp(20px, 2.4vw, 30px); border-radius: var(--r-panel); background: var(--bg-2); }
.track__example { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 12px; font-weight: 800; letter-spacing: 0; color: var(--muted); }
.steps2 { display: grid; gap: 0; }
.step2 { position: relative; display: flex; gap: 14px; align-items: flex-start; padding-bottom: 18px; opacity: 0.5; }
.step2:not(:last-child)::before { content: ''; position: absolute; top: 40px; bottom: 2px; inset-inline-start: 19px; width: 2px; background: var(--line-2); }
.step2__dot { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: var(--panel); border: 2px solid var(--line-2); color: var(--muted); }
.step2__text { display: grid; gap: 2px; padding-top: 8px; }
.step2__text b { font-size: 15px; }
.step2__text small { font-size: 12px; font-weight: 800; color: var(--accent); letter-spacing: 0; }
.step2.is-done { opacity: 1; }
.step2.is-done .step2__dot { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.step2.is-done::before { background: var(--accent) !important; }
.step2.is-now { opacity: 1; }
.step2.is-now .step2__dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }
@media (max-width: 1024px) { .track__body { grid-template-columns: 1fr; } }

/* ---------- Price in millions, with its detail on hover (or tap) ---------- */
.price { position: relative; width: 100%; }
.price__main { display: grid; gap: 4px; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: start; cursor: help; }
.price__main strong { font: 800 23px/1.1 'Unbounded', sans-serif; letter-spacing: -0.03em; color: var(--accent); font-variant-numeric: tabular-nums; }
.price__main strong small { font: 800 13px/1 var(--body); letter-spacing: 0; color: var(--text); }
.price__main span { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.price__main span i { color: var(--accent); font-size: 12px; }
.price__pop {
    position: absolute; inset-inline: 0; bottom: calc(100% + 10px); z-index: 5; display: none;
    padding: 14px 16px; border-radius: var(--r-inner); background: #0b100e; border: 1px solid var(--line-2);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); animation: fade-up 0.18s ease;
}
.price.is-open .price__pop { display: block; }
@media (hover: hover) and (pointer: fine) { .price:hover .price__pop { display: block; } }
.price__exact { display: flex; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line); font-weight: 800; }
.price__exact bdi { color: var(--accent); font-variant-numeric: tabular-nums; }
.price__pop ul { display: grid; gap: 6px; font-size: 13px; color: #c4cec9; }
.price__pop li { display: flex; justify-content: space-between; gap: 12px; }
.price__pop li bdi { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price__note { display: flex; gap: 6px; align-items: center; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.sheet__price strong small { font: 800 15px/1 var(--body); letter-spacing: 0; }
.sheet__exact { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.sheet__exact bdi { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }

/* ---------- Inspection and seller ---------- */
.card__trust { display: flex; flex-wrap: wrap; gap: 6px; }
.card__trust span {
    display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700; color: #c4cec9; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line);
}
.card__trust i { font-size: 11px; color: var(--muted); }
.card__trust .is-ok { color: #7ee2a8; border-color: rgba(61, 220, 132, 0.35); background: rgba(61, 220, 132, 0.08); }
.card__trust .is-ok i { color: #3ddc84; }
/* ---------- Popular ---------- */
.chip--hot { background: #c8440f; border-color: transparent; }
.chip--hot i { color: #fff3c4; }
.sheet__hot { position: absolute; top: 14px; inset-inline-end: 14px; }
.inspect { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.inspect__row { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-2); }
.inspect__row > i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); color: var(--muted); }
.inspect__row b { display: block; font-size: 14px; }
.inspect__row small { display: block; font-size: 12px; color: var(--muted); }
.inspect__row.is-ok { border-color: rgba(61, 220, 132, 0.35); background: rgba(61, 220, 132, 0.06); }
.inspect__row.is-ok > i { background: rgba(61, 220, 132, 0.15); color: #3ddc84; }

/* ---------- Shipping cost and the dollar over time ---------- */
.ship { padding: var(--section) var(--pad) 0; max-width: 1360px; margin: 0 auto; scroll-margin-top: var(--nav-h); }
.ship__head { max-width: min(1040px, 100%); margin-bottom: clamp(28px, 4vw, 48px); }
.ship__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); align-items: stretch; }
.ship__card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: clamp(20px, 2.4vw, 32px); border-radius: var(--r-panel); background: var(--panel); }
.ship__h3 { font: 800 clamp(17px, 1.5vw, 20px)/1.2 var(--display); letter-spacing: -0.02em; }
.ship__figure strong { display: block; font: 800 clamp(30px, 3vw, 46px)/1.05 'Unbounded', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ship__figure small { font: 800 15px/1 var(--body); letter-spacing: 0; }
.ship__exact { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; color: var(--muted); }
.ship__exact bdi { font-weight: 800; color: var(--text); }
.ship__change { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 800; background: var(--panel-2); }
.ship__change.is-up { color: #ff8a8a; }
.ship__change.is-down { color: #7ee2a8; }
.ship__note { display: flex; gap: 10px; align-items: baseline; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.ship__note i { color: var(--accent); }
.ship__card .shipchart { margin-top: auto; }
.ship__card--ghost { min-height: 460px; }
.ship__card--ghost .ph--text { width: 45%; height: 20px; }
.ship__card--ghost .ph--figure { width: 70%; height: 46px; }
.ship__card--ghost .ph--chart { flex: 1; min-height: 240px; }
@media (max-width: 1024px) { .ship__grid { grid-template-columns: minmax(0, 1fr); } }

/* A chart reads left to right in both languages (time runs that way), so its parts keep one direction and line up with the drawing. */
.shipchart { direction: ltr; margin: 0; padding: clamp(16px, 2vw, 24px); border-radius: var(--r-inner); background: var(--bg-2); }
.shipchart__plot { position: relative; height: 240px; margin-top: 22px; }
.shipchart__plot svg { display: block; width: 100%; height: 100%; overflow: visible; }
.shipchart__grid { stroke: rgba(255, 255, 255, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.shipchart__line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.shipchart__area { fill: rgba(255, 43, 43, 0.08); stroke: none; }
.shipchart__cross { stroke: rgba(255, 255, 255, 0.35); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.shipchart__unit { position: absolute; top: -26px; inset-inline-start: 0; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.shipchart__ylabel { position: absolute; inset-inline-start: 0; transform: translateY(-50%); font-size: 11.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.shipchart__dot {
    position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; padding: 0; border-radius: 50%; cursor: pointer;
    background: var(--accent-fill); border: 2px solid var(--bg-2);
}
.shipchart__dot::before { content: ''; position: absolute; inset: -12px; border-radius: 50%; }
.shipchart__dot.is-on { width: 16px; height: 16px; margin: -8px 0 0 -8px; box-shadow: 0 0 0 4px var(--accent-soft); }
.shipchart__tip {
    position: absolute; z-index: 2; display: grid; gap: 2px; min-width: 130px; padding: 8px 12px; border-radius: var(--r-inner);
    transform: translate(12px, -110%); background: #0b100e; border: 1px solid var(--line-2); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5);
    font-size: 12.5px; pointer-events: none; white-space: nowrap;
}
.shipchart__tip.is-left { transform: translate(calc(-100% - 12px), -110%); }
.shipchart__tip small { color: var(--muted); font-weight: 700; }
.shipchart__tip b { font-size: 14px; font-variant-numeric: tabular-nums; }
.shipchart__tip .is-up { color: #ff8a8a; font-weight: 800; }
.shipchart__tip .is-down { color: #7ee2a8; font-weight: 800; }
.shipchart__x { display: flex; justify-content: space-between; margin-top: 10px; padding-inline-start: 46px; font-size: 12px; font-weight: 700; color: var(--muted); }
.shipchart__empty { display: flex; align-items: center; gap: 10px; padding: 24px; border-radius: var(--r-inner); background: var(--bg-2); color: var(--muted); font-weight: 600; }
.shipchart__empty i { color: var(--accent); }

/* ---------- An order the client tracks ---------- */
.track__result { border-style: solid; display: grid; gap: 20px; }
.order { display: grid; gap: 12px; }
.order__head { display: flex; align-items: baseline; gap: 12px; }
.order__head small { font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.order__head b { font: 800 20px/1 var(--body); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.order__car { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-weight: 800; font-size: 16px; }
.order__car > i { color: var(--accent); }
.order__money { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.order__money div { padding: 10px 12px; border-radius: var(--r-inner); background: var(--panel); border: 1px solid var(--line); }
.order__money dt { font-size: 11.5px; font-weight: 700; color: var(--muted); }
.order__money dd { margin: 4px 0 0; font-weight: 800; font-size: 14px; font-variant-numeric: tabular-nums; }
.order__cancelled { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border-radius: var(--r-inner); background: rgba(255, 255, 255, 0.05); font-weight: 700; }
.order__h3 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; color: var(--muted); letter-spacing: 0; }
.order__h3 i { color: var(--accent); }
.order__events { display: grid; gap: 10px; }
.order__events li { padding: 12px 14px; border-radius: var(--r-inner); background: var(--panel); border: 1px solid var(--line); }
.order__events b { display: block; font-size: 14px; }
.order__events p { margin-top: 6px; color: #c4cec9; font-size: 14px; white-space: pre-line; }
.order__when { display: block; font-size: 12px; font-weight: 700; color: var(--muted); }
@media (max-width: 640px) { .order__money { grid-template-columns: 1fr; } }

/* ---------- WhatsApp and sharing ---------- */
.btn--wa { background: #25d366; color: #06280f; }
@media (hover: hover) and (pointer: fine) { .btn--wa:hover { background: #3be07d; } }
.btn--wa i { font-size: 1.2em; }
.card__actions .btn { flex: 1 1 0; min-width: 0; }
.sheet__share { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.sheet__share span { margin-inline-end: 4px; }
.sheet__report { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--r-inner); background: var(--panel-2); font-weight: 700; font-size: 14px; }
.sheet__report i:first-child { color: #25d366; font-size: 18px; }
.sheet__report i:last-child { margin-inline-start: auto; color: var(--muted); font-size: 12px; }

/* ---------- Staff pages (/admin) ---------- */
.adm { min-height: 100vh; background: var(--bg); }
.adm__wait, .adm__empty { display: flex; align-items: center; gap: 10px; padding: 24px 0; color: var(--muted); font-weight: 600; }
.adm__login { width: min(420px, calc(100% - 32px)); margin: 10vh auto 0; display: grid; gap: 16px; padding: 30px; border-radius: 26px; background: var(--panel); border: 1px solid var(--line-2); }
.adm__login h1 { font: 800 24px/1.1 var(--display); }
.adm__login > p { color: var(--muted); font-size: 14px; }
.adm__brand { justify-self: start; }
.adm__bar {
    position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    padding: 10px var(--pad); background: var(--bg); border-bottom: 1px solid var(--line);
}
/* On the staff pages the waiting bar runs along the very top of the window. */
.adm .activity { inset: 0 0 auto 0; z-index: 70; }
.adm__tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-inline: auto; }
.adm__tab {
    display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; border-radius: 999px; cursor: pointer;
    border: 1px solid transparent; background: none; color: #c9d3ce; font-weight: 700; font-size: 13.5px;
}
.adm__tab i { color: var(--accent); }
.adm__tab.is-on { background: var(--accent-soft); border-color: rgba(255, 43, 43, 0.4); color: #fff; }
.adm__me { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.adm__me > span { display: inline-flex; align-items: center; gap: 8px; }
.adm__me i { color: var(--accent); }
.adm__me small { padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.adm__main { max-width: 1240px; margin: 0 auto; padding: 24px var(--pad) 80px; }
.adm__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.adm__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 20px; }
.adm__head h1 { display: flex; align-items: center; gap: 10px; font: 800 26px/1.1 var(--display); }
.adm__head h1 i { color: var(--accent); font-size: 22px; }
.adm__head p { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.adm__card { display: grid; gap: 14px; padding: 20px; border-radius: 20px; background: var(--panel); border: 1px solid var(--line-2); align-content: start; }
.adm__card > * { min-width: 0; }
.adm__card h2 { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 800; }
.adm__card h2 i { color: var(--accent); }
.adm__card > .btn { justify-self: start; }
.adm__narrow { max-width: 460px; }
/* A long label wraps above its own field; the fields of a row stay on one line, whatever the length of their labels. */
.adm__fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 12px; align-items: end; }
.adm__field { display: grid; gap: 6px; min-width: 0; }
.adm__field > span { font-size: 12.5px; font-weight: 800; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.adm__field > input, .adm__field > select, .adm__field > textarea { width: 100%; min-width: 0; }
.adm__field input, .adm__field select, .adm__field textarea, .adm__filters input[type='search'] {
    width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2);
    background: var(--bg-2); color: var(--text); font: 600 15px/1.3 var(--body); outline: none;
}
.adm__field textarea { resize: vertical; }
.adm__field input:focus, .adm__field select:focus, .adm__field textarea:focus, .adm__filters input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.adm__filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.adm__filters input[type='search'] { flex: 1 1 280px; width: auto; }
.adm__filters label { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px; cursor: pointer; }
.adm__filters input[type='checkbox'] { width: 18px; height: 18px; accent-color: var(--accent); }
.adm__error, .adm__ok, .adm__hint { display: flex; align-items: baseline; gap: 8px; padding: 10px 12px; border-radius: 12px; font-size: 14px; font-weight: 700; }
.adm__error { background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.4); color: #ffb3b3; }
.adm__ok { background: rgba(61, 220, 132, 0.08); border: 1px solid rgba(61, 220, 132, 0.35); color: #9be8bd; }
.adm__hint { padding: 0; color: var(--muted); font-weight: 600; }
.adm__table { overflow-x: auto; border-radius: 18px; border: 1px solid var(--line-2); background: var(--panel); }
.adm__table table { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm__table th { padding: 12px 14px; text-align: start; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.adm__table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm__table tr:last-child td { border-bottom: 0; }
.adm__table td small { display: block; margin-top: 2px; font-size: 12px; color: var(--muted); }
.adm__table tr.is-link { cursor: pointer; }
.adm__table tr.is-link:hover td, .adm__table tr.is-link:focus-visible td { background: rgba(255, 255, 255, 0.03); }
.adm__links { white-space: nowrap; }
.adm__links a, .ord__links a { display: inline-flex; align-items: center; gap: 6px; margin-inline-end: 12px; color: #fff; font-weight: 700; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.adm__links a i, .ord__links a i { color: var(--accent); font-size: 12px; }
.adm__pager { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--muted); font-size: 14px; font-weight: 700; }
.adm__back { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--muted); font-weight: 700; cursor: pointer; }

.ord__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ord__head small { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.ord__head h1 { font: 800 30px/1.1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.04em; }
.ord__head p { color: var(--muted); font-size: 13.5px; }
.ord__status { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; font-size: 12.5px; font-weight: 800; white-space: nowrap; background: var(--accent-soft); color: #ffc2c2; border: 1px solid rgba(255, 43, 43, 0.35); }
.ord__status--Delivered { background: rgba(61, 220, 132, 0.1); color: #9be8bd; border-color: rgba(61, 220, 132, 0.35); }
.ord__status--Cancelled { background: rgba(255, 255, 255, 0.05); color: var(--muted); border-color: var(--line-2); }
.ord__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 16px; background: var(--bg-2); border: 1px dashed var(--line-2); }
.ord__share p { flex: 1 1 260px; display: flex; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.ord__share p i { color: var(--accent); }
.ord__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 18px; }
.ord__car { font-weight: 800; font-size: 17px; }
.ord__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ord__money { display: grid; gap: 8px; font-size: 14px; }
.ord__money div { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.ord__money dt { color: var(--muted); }
.ord__money dd { margin: 0; font-variant-numeric: tabular-nums; }
.ord__timeline { display: grid; gap: 10px; }
.ord__timeline li { display: flex; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.ord__timeline b { display: block; }
.ord__timeline small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.ord__timeline p { margin-top: 6px; color: #c4cec9; font-size: 14px; white-space: pre-line; }
.ord__danger { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
    .ord__grid { grid-template-columns: 1fr; }
    .adm__tabs { margin-inline: 0; order: 3; width: 100%; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
    .adm__tab span { white-space: nowrap; }
    .adm__me { margin-inline-start: auto; }
}
/* On a phone the logo, the language and the way out share one row (the name is on "Mon compte"): the header takes two rows, not three. */
@media (max-width: 520px) {
    .adm__bar { gap: 8px 10px; padding-block: 8px; }
    .adm__me { gap: 8px; min-width: 0; }
    .adm__me > span { display: none; }
    .adm__out { display: none; }
    .adm__me .btn { width: 42px; padding: 0; }
}
.adm .code-tag, .order__car .code-tag { position: static; box-shadow: none; }
.adm__car { min-width: 240px; }
.adm__table .adm__car small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------- Staff pages: order cards, new order, one order, overview ---------- */
.adm__count { color: var(--muted); font-size: 13px; font-weight: 700; }
.adm__empty--big { flex-direction: column; justify-content: center; padding: 48px 16px; border-radius: 20px; border: 1px dashed var(--line-2); font-size: 15px; text-align: center; }
.adm__empty--big i { font-size: 30px; color: var(--accent); }
.adm__link { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.adm__filters select {
    min-height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line-2);
    background: var(--bg-2); color: var(--text); font: 700 14px/1 var(--body);
}
.adm__head .btn--lg { height: 52px; }

.ocards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.ocard {
    display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; text-align: start; cursor: pointer;
    background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font: inherit;
    transition: border-color 0.2s ease, transform 0.15s ease;
}
@media (hover: hover) { .ocard:hover { border-color: rgba(255, 43, 43, 0.6); } }
.ocard:active { transform: scale(0.99); }
.ocard__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ocard__top > b { font: 800 16px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.04em; }
.ocard__client, .ocard__car { display: flex; align-items: baseline; gap: 8px; font-weight: 700; }
.ocard__client i, .ocard__car i { color: var(--accent); width: 16px; flex: none; }
.ocard__text { min-width: 0; overflow-wrap: anywhere; }
.ocard__text small { margin-inline-start: 4px; }
.ocard small { color: var(--muted); font-weight: 600; }
.ocard__foot { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }
.ocard__foot i { margin-inline-end: 6px; }
.ocard__agent { color: var(--text); font-weight: 700; }
.ocard__open { margin-inline-start: auto; color: var(--accent); font-weight: 800; }
.ocard__open i { margin: 0; margin-inline-start: 6px; }
.ocard--ghost { height: 150px; cursor: default; background: linear-gradient(100deg, var(--panel) 30%, var(--panel-2) 50%, var(--panel) 70%) 0 0 / 300% 100%; }
.ord__status i { margin-inline-end: 6px; }

/* New order: three numbered steps */
.nord__form { display: grid; gap: 14px; max-width: 860px; }
.nord__step { margin: 0; min-width: 0; }
.nord__step legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font-weight: 800; font-size: 17px; }
.nord__num { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); border: 2px solid var(--line-2); font-size: 14px; }
.nord__step.is-done { border-color: rgba(61, 220, 132, 0.4); }
.nord__step.is-done .nord__num { background: #3ddc84; border-color: #3ddc84; color: #06210f; }
.nord__code input { max-width: 220px; font: 800 24px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace !important; letter-spacing: 0.2em; text-transform: uppercase; }
.nord__car { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 14px; background: rgba(61, 220, 132, 0.08); border: 1px solid rgba(61, 220, 132, 0.35); }
.nord__car > i { color: #3ddc84; font-size: 22px; }
.nord__car > div { flex: 1 1 240px; display: grid; gap: 2px; }
.nord__car small { color: var(--muted); }
.nord__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); font-weight: 700; }
.nord__chips .chip { cursor: pointer; font-variant-numeric: tabular-nums; }
.nord__chips .chip.is-on { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.nord__rest { font-size: 15px; }
.nord__rest b { color: var(--accent); }
.nord__notes summary { cursor: pointer; color: var(--muted); font-weight: 700; font-size: 14px; }
.nord__notes[open] summary { margin-bottom: 10px; }
.nord__missing { display: flex; gap: 8px; align-items: baseline; margin: 0; color: var(--muted); font-size: 14px; font-weight: 600; }
.nord__missing i { color: var(--accent); }
.nord__go { justify-self: start; min-width: 260px; }
.nord__go:disabled { opacity: 0.45; cursor: not-allowed; }

/* One order */
.ord__created { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 18px; background: rgba(61, 220, 132, 0.1); border: 1px solid rgba(61, 220, 132, 0.45); }
.ord__created > i { font-size: 28px; color: #3ddc84; }
.ord__created > div { flex: 1 1 240px; }
.ord__created p { color: #c4cec9; }
.ord__contact, .ord__owner, .ord__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ord__owner { padding: 12px 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-2); font-size: 14px; }
.ord__owner > span i { color: var(--accent); margin-inline-end: 6px; }
.ord__owner select { min-height: 40px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 700 14px/1 var(--body); }
.ord__steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.ord__steps li { display: grid; justify-items: center; gap: 6px; padding: 10px 4px; border-radius: 14px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--bg-2); border: 1px solid var(--line); }
.ord__steps li i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-2); }
.ord__steps li.is-done { color: var(--text); }
.ord__steps li.is-done i { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.ord__steps li.is-now { color: #fff; border-color: var(--accent); background: var(--accent-soft); }
.ord__steps li.is-now i { border-color: var(--accent); color: var(--accent); }
.ord__next { border-color: rgba(255, 43, 43, 0.45); }
/* A long step name ("Publier : Paiement complet confirmé : commande clôturée") wraps instead of widening the page. */
.ord__actions .btn--lg { height: auto; min-height: 58px; padding-block: 14px; white-space: normal; line-height: 1.25; text-align: center; }
.ord__next textarea { font-size: 15px; }
.ord__money .is-rest dd b { color: var(--accent); }
.ord__edit summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; }
.ord__edit summary i { color: var(--accent); }
.ord__edit form { display: grid; gap: 12px; margin-top: 14px; }
.ord__confirm { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
@media (max-width: 900px) {
    .ord__steps { grid-auto-flow: row; grid-template-columns: 1fr; gap: 4px; }
    .ord__steps li { grid-auto-flow: column; justify-content: start; text-align: start; padding: 6px 10px; }
    .ord__steps li i { width: 28px; height: 28px; font-size: 12px; }
    .ord__actions .btn--lg { width: 100%; }
    .nord__go { width: 100%; }
}

/* Owner's overview */
.dash__tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dash__tile { display: grid; gap: 4px; padding: 18px; border-radius: 18px; text-align: start; cursor: pointer; background: var(--panel); border: 1px solid var(--line-2); color: var(--text); font: inherit; }
.dash__tile b { font: 800 34px/1 'Unbounded', sans-serif; }
.dash__tile span { color: var(--muted); font-weight: 700; }
.dash__tile.is-main { border-color: rgba(255, 43, 43, 0.5); background: linear-gradient(var(--accent-soft), var(--accent-soft)), var(--panel); }
.dash__tile.is-main b { color: var(--accent); }
.dash__list { display: grid; gap: 6px; }
.dash__list button {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px;
    background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font: inherit; text-align: start; cursor: pointer;
}
@media (hover: hover) { .dash__list button:hover { border-color: rgba(255, 43, 43, 0.5); } }
.dash__list span { display: grid; gap: 2px; font-weight: 700; }
.dash__list span > i { color: var(--accent); margin-inline-end: 8px; }
.dash__list small { color: var(--muted); font-weight: 600; font-size: 12px; }
.dash__list b { display: grid; justify-items: end; font-size: 20px; font-variant-numeric: tabular-nums; }
.dash__list b small { font-size: 11px; }
.dash__feed span { display: block; }
.dash__feed small { display: block; margin-top: 2px; }
.dash__warn { display: block; font-style: normal; font-size: 12px; color: #ffb3b3; }
.team__owner { display: inline-flex; align-items: center; gap: 6px; color: #ffd36b; font-weight: 800; }
@media (max-width: 640px) { .dash__tiles { grid-template-columns: 1fr; } .dash__tile b { font-size: 28px; } }

/* ---------- Owner's overview: popularity ---------- */
.pop { gap: 18px; }
.pop__head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pop__periods, .pop__sort { display: flex; flex-wrap: wrap; gap: 6px; }
.pop .chip { cursor: pointer; }
.pop .chip i { margin-inline-end: 6px; }
.pop .chip.is-on { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.pop .chip.is-on i { color: #fff; }
.pop__tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pop__tiles > div { display: grid; gap: 2px; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); }
.pop__tiles b { font: 800 26px/1.1 'Unbounded', sans-serif; font-variant-numeric: tabular-nums; }
.pop__tiles span { font-weight: 700; font-size: 13px; }
.pop__tiles small { color: var(--muted); font-size: 12px; }
.pop__h3 { margin-bottom: 10px; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.pop__days { display: flex; align-items: flex-end; gap: 4px; height: 140px; padding: 0 2px; border-bottom: 1px solid var(--line-2); }
.pop__days li { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.pop__bar { display: block; width: 100%; max-width: 34px; border-radius: 6px 6px 0 0; background: var(--accent-fill); }
.pop__days small { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.pop__brands { display: grid; gap: 8px; }
.pop__brands li { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; align-items: center; gap: 10px; font-size: 14px; font-weight: 700; }
.pop__brands b { font-variant-numeric: tabular-nums; }
.pop__meter { display: block; height: 10px; border-radius: 999px; background: var(--bg-2); overflow: hidden; }
.pop__meter span { display: block; height: 100%; border-radius: 999px; background: var(--accent-fill); }
.pop__rank { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pop__rank .pop__h3 { margin: 0; }
.pop__num { font-variant-numeric: tabular-nums; color: var(--muted); }
.pop__num.is-sorted, .adm__table th.is-sorted { color: #fff; font-weight: 800; }
@media (max-width: 900px) { .pop__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Staff pages: the ten tabs get a row of their own below the logo and the account, unless the screen is very wide ---------- */
.adm__tab { flex: none; white-space: nowrap; }
@media (max-width: 1640px) {
    .adm__tabs { order: 3; width: 100%; margin-inline: 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .adm__me { margin-inline-start: auto; }
}

/* ---------- Staff pages: views (cards, table, columns), money, orders going quiet ---------- */
.vsw { display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); }
.vsw__btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); font-weight: 700; font-size: 13.5px; cursor: pointer; }
.vsw__btn i { color: var(--muted); }
.vsw__btn.is-on { background: var(--accent-fill); color: #fff; }
.vsw__btn.is-on i { color: #fff; }
@media (hover: hover) { .vsw__btn:not(.is-on):hover { color: #fff; background: rgba(255, 255, 255, 0.06); } }
@media (max-width: 420px) { .vsw__btn { padding: 0 12px; } .vsw__btn span { display: none; } }
.adm__bar2 { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.adm__flags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.adm__row-actions { white-space: nowrap; }
.adm__row-actions .btn { margin-inline-end: 6px; vertical-align: middle; }
.adm__row-actions .btn--icon { display: inline-flex; width: 42px; }
.adm__table tr.is-hidden td { opacity: 0.55; }
.btn--icon.is-on { background: var(--accent-soft); border-color: rgba(255, 43, 43, 0.5); color: #fff; }
.btn--icon.is-on .fa-star { color: #ffd36b; }

.otable td.num, .otable th.num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.otable .is-rest { color: var(--accent); font-weight: 800; }
.otable__no { font: 800 14px ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.04em; white-space: nowrap; }
.quiet {
    display: inline-flex; align-items: center; gap: 6px; margin-inline-start: 8px; padding: 2px 9px; border-radius: 999px; white-space: nowrap;
    font-size: 11.5px; font-weight: 800; color: #ffd36b; background: rgba(255, 190, 60, 0.1); border: 1px solid rgba(255, 190, 60, 0.4);
}
.ocard__foot .quiet { margin-inline-start: 0; }
.ocard__money { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 14px; }
.ocard__money i { color: var(--accent); width: 16px; }
.ocard__money b { color: var(--accent); }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 1fr); gap: 12px; align-items: start; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.board__col { display: grid; gap: 8px; align-content: start; min-height: 120px; padding: 12px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); scroll-snap-align: start; }
.board__col h2 { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.board__col h2 i { color: var(--accent); }
.board__col h2 b { margin-inline-start: auto; min-width: 26px; padding: 1px 9px; border-radius: 999px; background: var(--bg-2); border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; text-align: center; }
.board__none { padding: 8px 4px; color: var(--muted); font-size: 13px; }
.bcard {
    display: grid; gap: 3px; padding: 11px 12px; border-radius: 14px; text-align: start; cursor: pointer;
    background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font: inherit;
}
@media (hover: hover) { .bcard:hover { border-color: rgba(255, 43, 43, 0.6); } }
.bcard.is-quiet { border-color: rgba(255, 190, 60, 0.45); }
.bcard > b { font: 800 13px ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.04em; }
.bcard > small { color: var(--muted); font-weight: 600; }
.bcard__foot { display: flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.bcard__foot em { margin-inline-start: auto; font-style: normal; color: var(--text); font-weight: 700; }
.bcard .quiet { margin: 4px 0 0; justify-self: start; }

.dash__tiles { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
@media (max-width: 640px) { .dash__tile { padding: 14px; } }
.dash__tile.is-warn { border-color: rgba(255, 190, 60, 0.55); }
.dash__tile.is-warn b { color: #ffbe3c; }
.dash__tile span i { margin-inline-end: 6px; color: #ffbe3c; }
.dash__money { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.dash__money > div { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.dash__money dt { color: var(--muted); font-size: 12.5px; font-weight: 700; }
.dash__money dd { margin: 2px 0 0; font: 800 19px/1.25 'Unbounded', sans-serif; font-variant-numeric: tabular-nums; }
.dash__money .is-rest dd { color: var(--accent); }

/* ---------- Staff pages: car codes as cards, favourites and hidden cars, photo state ---------- */
.chip--pick { background: linear-gradient(135deg, #ffd36b, #f5a524); border-color: transparent; color: #241800; box-shadow: 0 6px 20px -6px rgba(255, 190, 60, 0.7); }
.chip--pick i { color: #8a5200; }
.chip--state i { color: var(--muted); }
.chip--state.is-ok { color: #9be8bd; border-color: rgba(61, 220, 132, 0.35); background: rgba(61, 220, 132, 0.08); }
.chip--state.is-ok i { color: #3ddc84; }
.chip--state.is-bad { color: #ffb3b3; border-color: rgba(255, 43, 43, 0.45); background: var(--accent-soft); }
.chip--state.is-bad i { color: var(--accent); }
.chip--state.is-none { color: var(--muted); }
.sheet__pick { position: absolute; top: 14px; inset-inline-end: 14px; }
.sheet__hot ~ .sheet__pick { top: 52px; }

.ccards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.ccard { display: grid; gap: 10px; align-content: start; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); }
.ccard.is-hidden { opacity: 0.62; border-style: dashed; }
.ccard__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ccard__car { display: grid; }
.ccard__car b { font-size: 16px; }
.ccard__car small, .ccard__price small { display: block; color: var(--muted); font-weight: 600; font-size: 12.5px; }
.ccard__car small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ccard__price { font-weight: 800; }
.ccard__links { display: flex; flex-wrap: wrap; gap: 4px 0; }
.ccard__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }

/* The short list of car codes: one line a car, wrapping onto a second line on a narrow screen (never sideways). */
.clist { display: grid; gap: 6px; }
.clist__row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 6px 12px; border-radius: var(--r-inner); background: var(--panel); }
.clist__row.is-hidden { opacity: 0.62; }
.clist__car { flex: 1 1 220px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clist__car b { font-size: 15px; }
.clist__car small { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.clist__flags { display: inline-flex; gap: 8px; min-width: 0; color: var(--muted); }
.clist__flags .is-pick { color: #ffc14d; }
.clist__price { min-width: 76px; text-align: end; font-weight: 800; font-variant-numeric: tabular-nums; }
.clist__photo { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); }
.clist__links, .clist__actions { display: inline-flex; align-items: center; gap: 6px; }
.clist__actions { margin-inline-start: auto; }
.clist__links .btn--icon, .clist__actions .btn--icon { width: 32px; height: 32px; }
.clist__actions .btn--sm { height: 32px; padding: 0 14px; font-size: 13px; }
@media (max-width: 700px) {
    .clist__car { flex-basis: calc(100% - 100px); }
    .clist__price { margin-inline-start: auto; }
}

/* ---------- Staff pages: photo updates ---------- */
.phs { gap: 16px; }
.phs__count { margin-inline-start: auto; color: var(--muted); font-weight: 700; font-size: 12.5px; }
.phs__none { display: grid; gap: 12px; justify-items: start; }
.phs__none > p { display: flex; gap: 10px; align-items: baseline; }
.phs__none > p i { color: var(--accent); }
.phs__steps { display: grid; gap: 10px; }
.phs__steps li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; }
.phs__steps li > span { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-fill); color: #fff; font-weight: 800; font-size: 12px; transform: translateY(2px); }
.phs__pcs { display: grid; gap: 8px; }
.phs__pcs li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.phs__pcs li > i { flex: none; color: var(--muted); font-size: 18px; }
.phs__pcs li.is-online { border-color: rgba(61, 220, 132, 0.4); }
.phs__pcs li.is-online > i { color: #3ddc84; }
.phs__pcs li > span { flex: 1; display: grid; min-width: 0; }
.phs__pcs li small { color: var(--muted); font-size: 12px; }
.phs__pcs li em { font-style: normal; font-weight: 700; font-size: 13px; text-align: end; }
.phs__ask { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.phs__code input { width: 150px; font: 800 22px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.2em; text-transform: uppercase; }
.phs__or { align-self: center; color: var(--muted); font-weight: 700; }
.phs__pause { display: block; color: #ffd36b; font-weight: 700; font-size: 12.5px; }
.phs__pause i { margin-inline-end: 6px; }
.phs__check { align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: rgba(255, 190, 60, 0.08); border: 1px solid rgba(255, 190, 60, 0.35); color: #e9dcb9; }
.phs__check i { color: #ffbe3c; margin-top: 3px; }
.job__note { display: block; margin-top: 4px; color: #ffd36b; }
.phs__empty i { color: var(--accent); }

.jobs { display: grid; gap: 12px; }
.job { display: grid; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-2); }
.job__top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.job__top > b { font-size: 16px; }
.job__top .btn--icon { margin-inline-start: auto; width: 36px; height: 36px; }
.job__steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.job__steps li { display: grid; justify-items: center; align-content: start; gap: 6px; padding: 8px 4px; border-radius: 12px; text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); background: var(--panel); border: 1px solid var(--line); }
.job__steps li i { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--line-2); }
.job__steps li.is-done { color: var(--text); }
.job__steps li.is-done i { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.job__steps li.is-now { color: #fff; border-color: var(--accent); background: var(--accent-soft); }
.job__steps li.is-now i { border-color: var(--accent); color: var(--accent); animation: jobpulse 1.5s ease-in-out infinite; }
.job__steps small { display: block; font-weight: 700; color: #ffc2c2; font-variant-numeric: tabular-nums; }
.job__bar { height: 10px; border-radius: 999px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.job__bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width 0.4s ease; }
.job__meta { color: var(--muted); font-size: 13px; }
.job__meta i { margin-inline-end: 6px; }
@keyframes jobpulse { 0%, 100% { box-shadow: 0 0 0 0 var(--glow); } 50% { box-shadow: 0 0 0 7px rgba(255, 43, 43, 0); } }
@media (max-width: 700px) {
    .job__steps { grid-template-columns: 1fr; gap: 4px; }
    .job__steps li { grid-auto-flow: column; justify-content: start; justify-items: start; text-align: start; padding: 6px 10px; }
    .job__steps li i { width: 26px; height: 26px; font-size: 12px; }
}

/* ---------- Staff pages: the showroom rules ---------- */
.cat { display: grid; gap: 18px; }
.cat input[type='checkbox'] { width: 20px; height: 20px; flex: none; accent-color: var(--accent); }
.cat__brands { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.cat__brand { display: grid; gap: 8px; align-content: start; padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.cat__brand.is-on { border-color: rgba(61, 220, 132, 0.35); }
.cat__main { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; }
.cat__main img { border-radius: 8px; background: #fff; padding: 2px; object-fit: contain; }
.cat__brand:not(.is-on) .cat__main img, .cat__brand:not(.is-on) .cat__main b { opacity: 0.5; }
.cat__parts summary { cursor: pointer; color: var(--muted); font-size: 13px; font-weight: 700; }
.cat__parts label { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; font-weight: 600; }
.cat__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cat__chip { position: relative; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); font-weight: 700; font-size: 14px; cursor: pointer; }
.cat__chip input { position: absolute; opacity: 0; pointer-events: none; }
.cat__chip i { color: var(--accent); }
.cat__chip.is-on { background: var(--accent-soft); border-color: rgba(255, 43, 43, 0.5); color: #fff; }
.cat__chip:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.cat__switch { display: flex; align-items: flex-start; gap: 10px; font-weight: 700; cursor: pointer; min-width: 0; }
.cat__switch input { flex: none; margin-block-start: 4px; }
.cat__switch span { min-width: 0; overflow-wrap: anywhere; }
.cat__more summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; font-size: 16px; }
.cat__more summary i { color: var(--accent); }
.cat__more[open] summary { margin-bottom: 14px; }
.cat__year { display: flex; align-items: flex-end; flex-wrap: wrap; gap: 12px 18px; padding: 12px 0; border-top: 1px solid var(--line); }
.cat__year .cat__switch { min-width: 240px; align-self: center; }
.cat__year .adm__field { width: 140px; }
.cat__actions { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; padding: 14px 0 6px; background: linear-gradient(rgba(5, 7, 6, 0), var(--bg) 35%); }
.cat__reset { margin-inline-start: auto; }

/* ---------- Owner's overview: how the server is doing ---------- */
.hlt { gap: 14px; }
.hlt__list { display: grid; gap: 8px; }
.hlt__list li { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.hlt__list li > i { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); color: var(--muted); }
.hlt__list li > span { flex: 1; display: grid; min-width: 0; }
.hlt__list li small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.hlt__list li > em { flex: none; font-style: normal; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hlt__list li.is-ok { border-color: rgba(61, 220, 132, 0.35); }
.hlt__list li.is-ok > i { background: rgba(61, 220, 132, 0.15); color: #3ddc84; }
.hlt__list li.is-ok > em { color: #9be8bd; }
.hlt__list li.is-warn { border-color: rgba(255, 190, 60, 0.45); }
.hlt__list li.is-warn > i { background: rgba(255, 190, 60, 0.14); color: #ffbe3c; }
.hlt__list li.is-warn > em { color: #ffd36b; }
.hlt__list li.is-bad { border-color: rgba(255, 43, 43, 0.5); }
.hlt__list li.is-bad > i { background: var(--accent-soft); color: var(--accent); }
.hlt__list li.is-bad > em { color: #ffb3b3; }
.hlt__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.hlt__facts > div { padding: 10px 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.hlt__facts dt { color: var(--muted); font-size: 12px; font-weight: 700; }
.hlt__facts dd { margin: 2px 0 0; font-weight: 800; font-size: 14px; }

/* ---------- Order sheet: seen on paper only ("Imprimer la fiche") ---------- */
.print-sheet { display: none; }
@media print {
    @page { margin: 14mm; }
    html, body, .adm { background: #fff !important; color: #111 !important; }
    .adm__bar, .adm__panel > :not(.print-sheet) { display: none !important; }
    .adm__main { max-width: none; padding: 0; }
    .print-sheet { display: block; color: #111; font: 14px/1.5 var(--body); }
    .print-sheet * { color: inherit; }
    .print-sheet__brand { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; border-bottom: 3px solid #d71920; }
    .print-sheet__brand b { font: italic 900 24px/1 'Exo 2', sans-serif; }
    .print-sheet h1 { margin: 16px 0 2px; font: 800 22px/1.2 var(--display); }
    .print-sheet h2 { margin: 16px 0 6px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: #555; }
    .print-sheet__date, .print-sheet__track { color: #555; font-size: 12.5px; }
    .print-sheet__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
    .print-sheet__cols section { padding: 10px 12px; border: 1px solid #bbb; border-radius: 8px; break-inside: avoid; }
    .print-sheet__cols h2 { margin-top: 0; }
    .print-sheet table { width: 100%; border-collapse: collapse; font-size: 13px; }
    .print-sheet th, .print-sheet td { padding: 6px 8px; border: 1px solid #ccc; text-align: start; vertical-align: top; }
    .print-sheet th { background: #f0f0f0; }
    .print-sheet tr { break-inside: avoid; }
    .print-sheet__sign { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
    .print-sheet__sign div { height: 90px; padding: 8px 10px; border: 1px solid #999; border-radius: 8px; font-size: 12.5px; color: #555; }
}
.phs__launch { display: flex; flex-wrap: wrap; gap: 10px; }
.phs__steps li > div { flex: 1; min-width: 0; }
.phs__app { gap: 12px; }
.phs__app > p { font-size: 14px; color: var(--muted); }
.phs__how { display: grid; gap: 10px; }
.phs__how > summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--accent); }
.phs__how[open] > summary { margin-block-end: 10px; }
.phs__how > .adm__hint { margin-block-start: 12px; }

/* ---------- Staff pages in Arabic: right to left, Arabic type, no letter spacing (it would unjoin the letters) ---------- */
.adm[dir='rtl'] .flip { transform: scaleX(-1); }
.adm[lang='ar'] { line-height: 1.8; }
.adm[lang='ar'] *:not(.latin):not(.latin *) { letter-spacing: 0 !important; text-transform: none !important; }
.adm[lang='ar'] .latin { direction: ltr; unicode-bidi: isolate; }
.adm__loginbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.adm__lang {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 999px; cursor: pointer;
    border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--text); font: 700 14px/1 var(--body);
}
.adm__lang i { color: var(--accent); }
@media (hover: hover) { .adm__lang:hover { border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.09); } }

/* ---------- Shipping beside the price (not in it), and the owner's pricing form ---------- */
.price__ship { display: flex; justify-content: space-between; gap: 12px; margin-block-start: 10px; padding-block-start: 10px; border-block-start: 1px dashed var(--line-2); font-size: 13.5px; }
.price__ship span { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); }
.price__ship i { color: var(--accent); }
.card__ship { display: flex; gap: 8px; align-items: center; margin-block-start: 6px; font-size: 12.5px; color: var(--muted); }
.card__ship i { color: var(--accent); }
.sheet__ship { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline; margin-block-start: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px dashed var(--line-2); font-size: 14px; }
.sheet__ship i { color: var(--accent); }
.sheet__ship span { color: var(--muted); }
.sheet__ship small { grid-column: 1 / -1; color: var(--muted); font-size: 12px; }
.ship__container { display: flex; gap: 8px; align-items: center; margin-block-start: 8px; font-size: 13px; color: var(--muted); }
.ship__container i { color: var(--accent); }
.adm__hint.pricing__formula { display: block; line-height: 1.8; }
.pricing__h3 { display: flex; gap: 10px; align-items: center; margin-block-start: 8px; font-size: 14.5px; font-weight: 800; }
.pricing__h3 i { color: var(--accent); }
.pricing__extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) auto; gap: 10px; align-items: end; padding: 12px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.pricing__example { padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.pricing__example ul { display: grid; gap: 6px; margin-block-start: 6px; }
.pricing__example li { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.pricing__example li span { color: var(--muted); }
.pricing__example li.is-total { padding-block-start: 8px; border-block-start: 1px solid var(--line-2); font-size: 15px; }
.pricing__example li.is-total span { color: var(--text); font-weight: 800; }
.pricing__example li.is-apart { font-size: 13px; opacity: 0.85; }
.pricing__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; }
.pricing__stats li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.pricing__stats span { font-size: 12px; color: var(--muted); }
.pricing__stats b { font-size: 16px; }
.pricing__stats .is-up { color: #3ddc84; }
.pricing__stats .is-down { color: var(--accent); }
.adm__pair { display: flex; gap: 12px; align-items: center; margin: 12px auto; max-width: 1100px; padding: 12px 16px; border-radius: 14px; background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.4); }
.adm__pair > i { color: var(--accent); font-size: 18px; }
.adm__pair > div { flex: 1; }
.adm__pair p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.adm__pair a { color: var(--accent); font-weight: 700; }

/* ---------- Team page: permissions and what each agent did with the photos ---------- */
.team { gap: 14px; }
.team__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.team__head h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.team__head small { color: var(--muted); }
.team__actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.team__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.team__stats li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.team__stats span { font-size: 12px; color: var(--muted); }
.team__stats b { font-size: 20px; }
.team__stats small { font-size: 12px; color: var(--muted); }
.team__devices h3 { display: flex; gap: 8px; align-items: center; margin-block-end: 8px; font-size: 14px; }
.team__devices h3 i { color: var(--accent); }
.team__devices ul { display: grid; gap: 8px; }
.team__devices li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.team__devices li span { display: grid; }
.team__devices small { color: var(--muted); font-size: 12px; }
.team__perms { display: grid; gap: 14px; padding-block-start: 14px; border-block-start: 1px solid var(--line); }
.team__presets { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.team__presets > span { color: var(--muted); font-size: 13px; }
.team__perms fieldset { display: grid; gap: 4px; min-width: 0; padding: 10px 12px 12px; border: 1px solid var(--line-2); border-radius: 14px; }
.team__perms legend { padding: 0 8px; font-weight: 800; font-size: 13px; color: var(--accent); }
.team__perm { display: flex; gap: 10px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.team__perm:hover { background: var(--bg-2); }
.team__perm input { flex: none; width: 18px; height: 18px; margin-block-start: 3px; accent-color: var(--accent); }
.team__perm span { display: grid; gap: 2px; font-size: 14px; }
.team__perm small { color: var(--muted); font-size: 12px; }
.team__perm.is-sensitive > span { font-weight: 700; }

/* ---------- Orders: tabs (in progress / to validate / archives), client history, who posts each step ---------- */
.otabs { display: flex; gap: 8px; flex-wrap: wrap; }
.otab { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 16px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--text); font: 700 14px/1 var(--body); }
.otab i { color: var(--accent); }
.otab:hover { background: var(--panel-2); }
.otab.is-on { background: var(--accent-soft); border-color: rgba(255, 43, 43, 0.55); }
.otab__n { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--accent-fill); color: #fff; font-size: 12px; font-weight: 800; }
.ord__who { display: block; margin-block-start: 2px; font-size: 11px; font-weight: 600; color: var(--muted); }
.ord__track { display: flex; align-items: center; gap: 8px; margin-block-start: 6px; font-size: 13.5px; color: var(--muted); }
.ord__track i { color: var(--accent); }
.ord__track b { color: var(--text); letter-spacing: 0.06em; }
.ord__wait p { color: var(--muted); font-size: 14px; }
.ord__wait h2 i { color: var(--warn, #ffb020); }
.ord__history ul, .nord__history { display: grid; gap: 8px; }
.ord__history li, .nord__history li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.ord__history li small, .nord__history li small { margin-inline-start: auto; color: var(--muted); font-size: 12px; }
.nord__known { display: grid; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(61, 220, 132, 0.07); border: 1px solid rgba(61, 220, 132, 0.35); }
.nord__known > p { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.nord__known > p i { color: #3ddc84; }
.nord__note { color: var(--muted); font-size: 13px; }
.nord__sync { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.nord__sync i { color: var(--accent); }
.nord__sync.is-synced i { color: #3ddc84; }
.cdet__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cdet__h2 { display: flex; align-items: center; gap: 10px; margin-block-start: 6px; font-size: 16px; font-weight: 800; }
.cdet__h2 i { color: var(--accent); }
.adm__switch { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); cursor: pointer; }
.adm__switch.is-off { cursor: default; opacity: 0.8; }
.adm__switch input { flex: none; width: 20px; height: 20px; margin-block-start: 2px; accent-color: var(--accent); }
.adm__switch span { display: grid; gap: 2px; }
.adm__switch small { color: var(--muted); font-size: 12.5px; }
.team__stats b { letter-spacing: normal; font-size: 18px; }

/* ---------- Order steps (settings), notices, requests, cars on their way ---------- */
.adm__badge { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; margin-inline-start: 4px; border-radius: 999px; background: var(--accent-fill); color: #fff; font-size: 11px; font-weight: 800; font-variant-numeric: tabular-nums; }
.otab__n--calm { background: var(--panel-2); color: var(--text); border: 1px solid var(--line-2); }
.dash__tile.is-transit { border-color: rgba(255, 43, 43, 0.4); }
.dash__tile.is-transit b { color: var(--accent); }
.ord__pending { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #ffd27a; }
.ord__pending i { color: #ffbe3c; }
td .ord__pending { display: flex; margin-top: 4px; }

/* Notices */
.nots h2 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.nots__n { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: 999px; background: var(--accent-fill); color: #fff; font-size: 12px; font-weight: 800; }
.nots__tools { display: inline-flex; gap: 8px; margin-inline-start: auto; }
.nots__list { display: grid; gap: 6px; }
.nots__list button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; text-align: start; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line); color: var(--text); font: inherit; }
.nots__list li.is-new button { border-color: rgba(255, 43, 43, 0.45); background: var(--accent-soft); }
.nots__list li > button > i:first-child { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); color: var(--accent); }
.nots__list span { display: grid; gap: 2px; flex: 1; min-width: 0; }
.nots__list b { font-weight: 700; font-size: 14px; overflow-wrap: anywhere; }
.nots__list li:not(.is-new) b { font-weight: 600; color: #c4cec9; }
.nots__list small { color: var(--muted); font-size: 12px; }
.nots__go { color: var(--muted); }
@media (hover: hover) { .nots__list button:hover { border-color: var(--accent); } }

/* A request waiting for the admin, the cancel form, the offered car */
.ord__ask { border-color: rgba(255, 190, 60, 0.6); background: linear-gradient(rgba(255, 190, 60, 0.07), rgba(255, 190, 60, 0.07)), var(--panel); }
.ord__ask > h2 i { color: #ffbe3c; }
.ord__decide { display: grid; gap: 12px; margin-top: 6px; }
.ord__cancel summary { display: flex; align-items: center; gap: 10px; cursor: pointer; font-weight: 800; }
.ord__cancel summary i { color: var(--accent); }
.ord__cancel form { display: grid; gap: 12px; margin-top: 14px; }
.ord__offered { border-color: rgba(255, 43, 43, 0.4); }
.ord__offered h2 i { color: var(--accent); }
.nord__transit { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.4); font-weight: 700; font-size: 14px; }
.nord__transit i { color: var(--accent); margin-top: 3px; }

/* The steps settings page */
.stps { display: grid; gap: 12px; }
.stp { gap: 12px; }
.stp.is-off { opacity: 0.7; border-style: dashed; }
.stp__head { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.stp__n { align-self: center; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-fill); color: #fff; font: 800 14px/1 var(--body); }
.stp.is-off .stp__n { background: var(--panel-2); color: var(--muted); }
.stp__icon { align-self: center; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px; cursor: pointer; background: var(--bg-2); border: 1px solid var(--line-2); color: var(--accent); font-size: 20px; }
.stp__names { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stp__tools { align-self: center; display: flex; gap: 6px; }
.iconpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 6px; padding: 10px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line); }
.iconpick button { height: 44px; display: grid; place-items: center; border-radius: 10px; cursor: pointer; background: var(--panel); border: 1px solid var(--line); color: #c9d3ce; font-size: 17px; }
.iconpick button.is-on { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
@media (hover: hover) { .iconpick button:hover { border-color: var(--accent); } }
.stp__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.stp__badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.35); font-size: 12px; font-weight: 800; color: #ffc2c2; }
.stp__badge--off { background: var(--panel-2); border-color: var(--line-2); color: var(--muted); }
.stp__badge--n { background: var(--panel-2); border-color: var(--line-2); color: var(--text); }
.stp__badge--new { background: rgba(61, 220, 132, 0.1); border-color: rgba(61, 220, 132, 0.35); color: #9be8bd; }
.stp__opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.stp__msg { display: grid; gap: 10px; }
.stp__msg summary { display: flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 800; font-size: 14px; color: #c9d3ce; }
.stp__msg summary i { color: var(--accent); }
.stp__msg[open] > *:not(summary) { margin-top: 10px; }
.stp__bar { position: sticky; bottom: 0; z-index: 10; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 18px; background: rgba(8, 11, 10, 0.97); border: 1px solid var(--line-2); }
.stp__spacer { flex: 1; }
.stp__notes { display: grid; gap: 8px; padding-inline-start: 18px; list-style: disc; color: #c4cec9; font-size: 14px; }
.stpprev { display: flex; flex-wrap: wrap; gap: 8px; }
.stpprev li { display: grid; gap: 2px; justify-items: start; padding: 8px 12px; border-radius: 12px; background: var(--bg-2); border: 1px solid var(--line); }
.stpprev li.is-bought { border-color: rgba(255, 43, 43, 0.5); background: var(--accent-soft); }
.stpprev li i { color: var(--accent); }
.stpprev small { color: var(--muted); font-size: 11.5px; min-height: 1em; }
@media (max-width: 760px) {
    .stp__head { grid-template-columns: auto minmax(0, 1fr) auto; }
    .stp__icon { grid-column: 1; grid-row: 2; }
    .stp__names { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr); }
    .stp__opts { grid-template-columns: minmax(0, 1fr); }
}

/* Cars on their way (staff) */
.tcar { gap: 10px; }
.tcar.is-off { opacity: 0.7; }
.tcar__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tcar__head h3 { display: flex; align-items: center; gap: 8px; font: 800 16px/1.3 var(--body); }
.tcar__head h3 i { color: var(--accent); }
.tcar__meta { display: grid; gap: 4px; }
.tcar__meta small { color: var(--muted); font-size: 12.5px; }
.tcar__step { display: grid; gap: 8px; }

/* What sets a car apart: on its photo, and as a notice on its sheet. */
.card__transit { display: flex; align-items: center; gap: 8px; margin: -2px 0 2px; padding: 6px 10px; border-radius: 10px; background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.35); font-size: 12.5px; font-weight: 800; color: #ffc2c2; }
.card__transit i { color: var(--accent); }
.sheet__transit { display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; border-radius: 16px; background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.5); }
.sheet__transit > i { font-size: 24px; color: var(--accent); margin-top: 2px; }
.sheet__transit b { display: block; font-size: 16px; }
.sheet__transit p { margin-top: 4px; color: #ffd6d6; font-size: 14px; }

.cat__find { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block: 4px 12px; }
.cat__find input[type='search'] { flex: 1 1 220px; min-width: 0; height: 44px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: inherit; }

/* ---------- Staff pages: one set of controls, tables that never scroll sideways, steady layout while pages change ---------- */
/* The page keeps the room of its scrollbar whether or not it needs one, so it never shifts sideways when a page gets longer or shorter. */
html { overflow-y: scroll; scrollbar-gutter: stable; }
.adm__main { min-height: calc(100vh - 160px); }
.adm__panel > * { min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Every field and select: same height, same corners, the same arrow (the browser's own differ from one select to the next). */
.adm__field input:not([type='checkbox']):not([type='radio']), .adm__field select, .adm__filters input[type='search'], .adm__filters select, .ord__owner select {
    min-height: 46px; height: 46px; border-radius: 12px;
}
.adm__field textarea { min-height: 46px; height: auto; }
.adm select {
    -webkit-appearance: none; appearance: none; max-width: 100%; min-width: 0; padding: 0 38px 0 14px; text-overflow: ellipsis; cursor: pointer;
    border: 1px solid var(--line-2); color: var(--text); font: 600 14.5px/1.2 var(--body);
    background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2393a09a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center / 12px 8px;
}
.adm select:dir(rtl) { padding: 0 14px 0 38px; background-position: left 14px center; }
.adm select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.adm select:disabled { opacity: 0.5; cursor: not-allowed; }
.adm select option { background: var(--panel); color: var(--text); }
.adm__filters { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px 12px; }
.adm__filters > * { min-width: 0; }
.adm__filters input[type='search'] { flex: 1 1 260px; }
.adm__filters select { flex: 0 1 220px; }
.ord__owner { align-items: center; }
.ord__owner select { flex: 0 1 240px; }

/* A table that does not fit its card becomes one block per row (see js/admin-tables.js); the cells carry their column's name. */
.adm__table.is-stacked { overflow: visible; border: 0; background: none; }
.adm__table.is-stacked table, .adm__table.is-stacked tbody, .adm__table.is-stacked tr, .adm__table.is-stacked td { display: block; width: 100%; }
.adm__table.is-stacked thead { display: none; }
.adm__table.is-stacked tr { margin-bottom: 10px; padding: 4px 14px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line-2); }
.adm__table.is-stacked tr:last-child { margin-bottom: 0; }
.adm__table.is-stacked td { display: block; padding: 9px 0; border-bottom: 1px solid var(--line); text-align: start; overflow-wrap: anywhere; }
.adm__table.is-stacked tr td:last-child { border-bottom: 0; }
.adm__table.is-stacked td::before { content: attr(data-label); font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: 3px; }
.adm__table.is-stacked td[data-label='']::before { display: none; }
.adm__table.is-stacked td.num { text-align: start; }
.adm__table.is-stacked .adm__links { white-space: normal; }
.adm__table.is-stacked .adm__car { min-width: 0; }
.adm__table.is-stacked tr.is-link:hover td { background: none; }
.adm__car { min-width: 0; }

/* While a page loads: still blocks the size of what is coming (no spinner, no motion). */
.skel { display: grid; gap: 14px; align-content: start; min-height: 60vh; }
.skel--compact { min-height: 0; }
.skel__bar { display: block; height: 46px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.skel__bar--short { width: 55%; height: 18px; border: 0; }
.skel__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.skel__block { display: block; height: 150px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }

/* The catalogue's brand list: Guazi has many brands with long names; nothing may push the page wider. */
.cat__brand, .cat__main, .cat__parts { min-width: 0; }
.cat__main b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat__main img { flex: none; }
.cat__brands { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }

/* Desktop: the tabs get their own row under the logo and the account, so none is ever cut off. */
@media (min-width: 901px) {
    .adm__bar { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding-block: 8px; }
    .adm__me { grid-column: 2; grid-row: 1; justify-self: end; margin-inline-start: 0; }
    .adm__tabs { grid-column: 1 / -1; grid-row: 2; width: auto; margin-inline: 0; justify-content: flex-start; flex-wrap: wrap; overflow: visible; }
}

/* Links in a table cell wrap under each other instead of stretching the row; header words may wrap too. */
.adm__table .adm__links { white-space: normal; }
.adm__table .adm__links a { white-space: nowrap; display: flex; width: fit-content; margin-inline-end: 0; }
.adm__table th { white-space: normal; }

/* A staff button with a long label wraps instead of pushing its row wider than the screen. */
.adm .btn { max-width: 100%; white-space: normal; height: auto; min-height: 42px; padding-block: 9px; line-height: 1.25; text-align: center; }
.adm .btn--lg { min-height: 52px; }
/* Round whatever the column allows: the height follows the width, and a narrow cell never squeezes it into an egg. */
.adm .btn--icon { flex: none; height: auto; max-width: none; min-height: 0; aspect-ratio: 1; padding: 0; }
.phs__ask > .btn { flex: 1 1 220px; }

.adm__table.is-stacked .adm__row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.adm__table.is-stacked .adm__row-actions .btn { margin: 0; }

/* ---------- The showroom: filters beside the cars, a sheet over them on a phone ---------- */
.showroom { padding-top: clamp(24px, 3vw, 40px); }
.showroom__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); max-width: 1500px; margin-inline: auto; align-items: start; }
/* The page keeps its height while new cars load, so a tick never makes it jump. */
.showroom__main { min-width: 0; min-height: calc(100vh - var(--nav-h)); }
.showroom__tools { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.showroom__open { flex: none; height: 46px; padding-inline: 16px; }
.showroom__open i { color: var(--accent); }

/* What is ticked, above the cars: one tap takes a filter off. */
.active { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.active__chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--text); font: 700 13px/1.2 var(--body); cursor: pointer; text-align: start; }
.active__chip i { flex: none; font-size: 11px; color: var(--accent); }
.active__clear { min-height: 36px; padding: 4px 10px; border: 0; background: none; color: var(--muted); font: 700 13px/1.2 var(--body); text-decoration: underline; cursor: pointer; }
@media (hover: hover) { .active__chip:hover { background: color-mix(in srgb, var(--accent) 22%, transparent); } .active__clear:hover { color: var(--text); } }

.filters { display: none; }
.filters__head { display: flex; align-items: center; gap: 10px; padding: 16px 18px 12px; }
.filters__title { display: inline-flex; align-items: center; gap: 10px; margin-inline-end: auto; font: 800 18px/1.2 var(--display); letter-spacing: -0.02em; }
.filters__title i { color: var(--accent); font-size: 15px; }
.filters__clear { min-height: 34px; padding: 0 4px; border: 0; background: none; color: var(--accent); font: 800 13px/1 var(--body); cursor: pointer; }
.filters__body { display: grid; gap: 4px; padding: 0 18px 18px; }
.filters__scrim { position: fixed; inset: 0; z-index: 70; background: rgba(0, 0, 0, 0.65); }
/* The button to apply: shows as soon as something is ticked and not searched yet. */
.filters__foot { display: none; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); background: var(--panel); }
.filters__foot.is-pending { display: flex; flex: none; }
.filters__foot .btn { height: 46px; padding-inline: 14px; font-size: 14px; }
.filters__apply { flex: 1; min-width: 0; }
.filters__close { display: none; }

.fsearch { position: relative; display: block; margin-bottom: 8px; }
.fsearch > i { position: absolute; inset-block-start: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.fsearch input, .ffind { width: 100%; min-width: 0; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 600 14.5px/1.2 var(--body); }
.fsearch input { height: 46px; padding-inline: 38px 12px; }
.ffind { height: 40px; margin-block: 2px 8px; padding-inline: 12px; }
.fsearch input:focus, .ffind:focus { outline: none; border-color: var(--accent); }

.fgroup { border-top: 1px solid var(--line); }
.fgroup > summary { display: flex; align-items: center; gap: 10px; min-height: 48px; font-weight: 800; font-size: 14.5px; cursor: pointer; list-style: none; }
.fgroup > summary::-webkit-details-marker { display: none; }
.fgroup > summary > i { width: 18px; text-align: center; color: var(--accent); font-size: 14px; }
.fgroup > summary::after { content: '\f078'; margin-inline-start: auto; font: 900 10px/1 'Font Awesome 6 Free'; color: var(--muted); }
.fgroup[open] > summary::after { content: '\f077'; }
.fgroup__list { display: grid; gap: 2px; }
.fgroup[open] { padding-bottom: 12px; }
.fgroup__hint { padding: 2px 2px 6px; color: var(--muted); font-size: 13.5px; }
.fgroup__label { margin-block: 12px 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); }

/* One tick: a real checkbox, drawn large enough for a thumb. */
.check { position: relative; display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 5px 8px; border-radius: 10px; cursor: pointer; }
@media (hover: hover) { .check:hover { background: var(--panel-2); } }
.check input { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; }
.check__box { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 2px solid #5f6d67; color: transparent; font-size: 11px; }
.check input:focus-visible + .check__box { outline: 2px solid var(--accent); outline-offset: 2px; }
.check.is-on { background: var(--accent-soft); }
.check.is-on .check__box { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.check__logo { flex: none; width: 30px; height: 30px; display: grid; place-items: center; padding: 3px; border-radius: 8px; background: #fff; color: #111; }
.check__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.logo-letter { font: 800 15px/1 var(--display); color: #111; }
.check__name { flex: 1; min-width: 0; font-weight: 700; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; }
.check__name small { display: block; font-weight: 600; font-size: 12px; color: var(--muted); }
.check__n { flex: none; font-size: 12.5px; font-weight: 700; color: var(--muted); font-variant-numeric: tabular-nums; }
.check.is-on .check__n { color: var(--text); }
.check__grade { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--g, var(--accent)); color: #0b0d0c; font: 800 13px/1 var(--body); }
.check__icon { flex: none; width: 20px; text-align: center; font-size: 15px; color: var(--muted); }
.check--atsea .check__icon { color: #63a9ff; }
.check--bought .check__icon { color: #3ddc84; }
.check:has(input:disabled) { opacity: 0.45; cursor: default; }
.check--ghost { display: block; background: var(--ph); margin-block: 3px; min-height: 38px; cursor: default; }

.fmore { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 8px; border: 0; background: none; color: var(--accent); font: 800 13.5px/1 var(--body); cursor: pointer; }
.fmore--inline { min-height: 0; padding: 0; }
.fmodels + .fmodels { margin-top: 10px; }
.fmodels__brand { display: flex; align-items: center; gap: 10px; min-height: 38px; padding-inline: 8px; font-weight: 800; font-size: 13.5px; color: var(--muted); }
.fmodels__brand .check__logo { width: 24px; height: 24px; padding: 2px; border-radius: 6px; }

.fselects { display: grid; gap: 10px; }
.fsel { display: grid; gap: 6px; min-width: 0; }
.fsel > span { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 800; color: var(--muted); }
.fsel > span i { color: var(--accent); }
.fsel select {
    -webkit-appearance: none; appearance: none; width: 100%; min-width: 0; height: 44px; padding-block: 0; padding-inline: 12px 36px; border-radius: 12px; border: 1px solid var(--line-2); cursor: pointer; color: var(--text); font: 700 14px/1.2 var(--body); text-overflow: ellipsis;
    background: var(--bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2393a09a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 13px center / 12px 8px;
}
.fsel select:dir(rtl) { background-position: left 13px center; }
.fsel select:focus { outline: none; border-color: var(--accent); }
.fsel select option { background: var(--panel); color: var(--text); }
.fsel--sort { flex: 0 1 280px; }

.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 700 13px/1.2 var(--body); cursor: pointer; }
.fchip i { font-size: 12px; color: var(--accent); }
.fchip.is-on { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.fchip.is-on i { color: #fff; }

/* A computer: the filters stay beside the cars, scrolling on their own when they are longer than the screen. */
@media (min-width: 1100px) {
    .showroom__layout { grid-template-columns: 300px minmax(0, 1fr); }
    /* The head stays, the list scrolls inside; the room of its thin scrollbar is always kept, so nothing shifts when groups open or close. */
    .filters {
        display: flex; flex-direction: column; position: sticky; top: calc(var(--nav-h) + 14px); max-height: calc(100vh - var(--nav-h) - 28px); overflow: hidden;
        border-radius: var(--r-panel); background: var(--panel);
    }
    .filters__head { flex: none; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
    .filters__body { flex: 1; min-height: 0; overflow-y: auto; scrollbar-gutter: stable; padding-block-start: 12px; padding-inline-end: 8px; }
    .filters__body { scrollbar-width: thin; scrollbar-color: #3a4641 transparent; }
    .showroom__open, .filters__scrim { display: none; }
    .showroom__tools { justify-content: flex-end; }
    .fsel--sort { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 10px; flex-basis: 340px; }
}

/* A tablet or a phone: a bar stays above the cars, and the filters open as a sheet over them with the number of cars they give. */
@media (max-width: 1099px) {
    .showroom__tools {
        position: sticky; top: var(--nav-h); z-index: 40; margin-inline: calc(var(--pad) * -1); padding: 8px var(--pad);
        background: var(--bg); border-bottom: 1px solid var(--line);
    }
    .fsel--sort > span { display: none; }
    .filters.is-open {
        display: flex; flex-direction: column; position: fixed; inset-inline: 0; bottom: 0; top: max(env(safe-area-inset-top), 5svh); z-index: 80;
        border-radius: var(--r-panel) var(--r-panel) 0 0; background: var(--panel);
    }
    .filters__head { flex: none; border-bottom: 1px solid var(--line); }
    .filters__close { display: inline-flex; flex: none; width: 40px; height: 40px; }
    .filters__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-top: 12px; }
    .filters__foot { display: flex; flex: none; padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
    .fselects { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* What sets a car apart, along the bottom of its photo: flat colours, each with one meaning. */
.card__status { position: absolute; bottom: 12px; inset-inline-start: 12px; max-width: calc(100% - 118px); display: flex; flex-wrap: wrap; gap: 6px; }
.chip--deal { background: var(--accent-fill); border-color: var(--accent); }
.chip--sea { background: #1a5fd0; border-color: #1a5fd0; }
.chip--ready { background: #0d7a45; border-color: #0d7a45; }
.chip--customs { background: #ffbe3c; border-color: #ffbe3c; color: #231800; }
.chip--deal i, .chip--sea i, .chip--ready i { color: #fff; }
.chip--customs i { color: #231800; }
.sheet__transit--atsea { background: rgba(26, 95, 208, 0.16); border-color: rgba(99, 169, 255, 0.5); }
.sheet__transit--atsea > i { color: #63a9ff; }
.sheet__transit--atsea p { color: #cfe3ff; }
.sheet__transit--bought { background: rgba(13, 122, 69, 0.18); border-color: rgba(61, 220, 132, 0.45); }
.sheet__transit--bought > i { color: #3ddc84; }
.sheet__transit--bought p { color: #c7f3da; }
.sheet__transit--customs { background: rgba(255, 190, 60, 0.1); border-color: rgba(255, 190, 60, 0.5); }
.sheet__transit--customs > i { color: #ffbe3c; }
.sheet__transit--customs p { color: #ffe9bd; }
.sheet__transit--old { background: rgba(255, 46, 77, 0.12); border-color: rgba(255, 46, 77, 0.55); }
.sheet__transit--old > i { color: var(--red); }
.sheet__video { display: grid; gap: 8px; padding-inline: 14px; }
.sheet__video p { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.sheet__video p i { color: var(--accent); }
.sheet__video video { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-inner); background: #000; }
.logo__tile .logo-letter { font-size: 24px; }
.showroom__logo .logo-letter { font-size: 22px; }

/* ---------- Staff pages: where the cars come from ---------- */
.src__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.src__card { display: grid; gap: 12px; padding: 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line-2); min-width: 0; }
.src__card.is-open { border-color: var(--accent); }
.src__card.is-off .src__top, .src__card.is-off .src__counts { opacity: 0.6; }
.src__top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.src__icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); }
.src__name { flex: 1; min-width: 0; display: grid; }
.src__name b { overflow-wrap: anywhere; }
.src__name small { color: var(--muted); font-size: 12.5px; font-weight: 600; }
.src__counts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.src__counts li { display: grid; padding: 8px 6px; border-radius: 10px; background: var(--bg-2); font-size: 11.5px; font-weight: 600; color: var(--muted); text-align: center; }
.src__counts b { font-size: 16px; color: var(--text); font-variant-numeric: tabular-nums; }
.src__counts .is-warn b { color: #ffbe3c; }
.src__actions, .src__buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.src__add h2 { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 800; }
.src__add h2 i { color: var(--accent); }
.src__add .btn { justify-self: start; }
.src__detail { display: grid; gap: 14px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line-2); min-width: 0; }
.src__detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.src__detail-head h2 { display: flex; align-items: center; gap: 10px; margin-inline-end: auto; font-size: 20px; font-weight: 800; overflow-wrap: anywhere; min-width: 0; }
.src__detail-head h2 i { color: var(--accent); }
.src__pick { cursor: pointer; position: relative; }
.src__pick:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.src__pick.is-busy { opacity: 0.7; cursor: progress; }
.src__preview { display: grid; gap: 12px; padding: 14px; border-radius: 14px; background: var(--bg-2); border: 1px solid var(--line-2); min-width: 0; }
.src__preview h3 { font-size: 15px; font-weight: 800; overflow-wrap: anywhere; }
.src__numbers { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
.src__numbers li { display: grid; gap: 2px; padding: 10px; border-radius: 12px; background: var(--panel); font-size: 12px; font-weight: 600; color: var(--muted); }
.src__numbers b { font-size: 20px; color: var(--text); font-variant-numeric: tabular-nums; }
.src__numbers .is-good b { color: #3ddc84; }
.src__numbers .is-warn b { color: #ffbe3c; }
.src__numbers .is-bad b { color: var(--red); }
.src__issues summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--accent); }
.src__issues ul { display: grid; gap: 4px; margin-top: 8px; max-height: 260px; overflow-y: auto; font-size: 13px; color: #c4cec9; overflow-wrap: anywhere; }
.src__bar { height: 8px; border-radius: 8px; background: var(--bg-2); overflow: hidden; }
.src__bar span { display: block; height: 100%; background: var(--accent-fill); }
.src__cars { display: grid; gap: 6px; }
.src__car { display: grid; grid-template-columns: auto minmax(160px, 1fr) auto minmax(180px, 240px); align-items: center; gap: 8px 12px; padding: 8px 10px; border-radius: 12px; background: var(--bg-2); min-width: 0; }
.src__car.is-off .src__car-name { opacity: 0.6; }
.src__car-name { display: grid; min-width: 0; }
.src__car-name b { font-size: 14px; overflow-wrap: anywhere; }
.src__car-name small { color: var(--muted); font-size: 12.5px; overflow-wrap: anywhere; }
.src__flags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.src__stock { display: grid; gap: 4px; min-width: 0; }
.src__stock select, .src__stock input { width: 100%; min-width: 0; height: 38px; border-radius: 10px; font-size: 13px; }
.src__stock input { padding-inline: 10px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font-family: inherit; color-scheme: dark; }
.src__runs { display: grid; gap: 8px; margin-top: 10px; }
.src__runs > li { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 12px; padding: 10px; border-radius: 12px; background: var(--bg-2); }
.src__run { flex: 1 1 240px; display: grid; min-width: 0; }
.src__run b { overflow-wrap: anywhere; font-size: 14px; }
.src__run small { color: var(--muted); font-size: 12.5px; }
.src__runs .src__issues { flex-basis: 100%; }
.clist__flags .is-bad { color: var(--red); }
.clist__flags .is-warn { color: #ffbe3c; }
.clist__flags .is-ready { color: #3ddc84; }
.clist__flags .is-sea { color: #63a9ff; }
.cat__age { display: grid; gap: 6px; font-size: 14px; font-weight: 600; }
.cat__age li { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow-wrap: anywhere; }
.cat__age i { flex: none; width: 16px; text-align: center; color: var(--accent); }
@media (max-width: 860px) {
    .src__car { grid-template-columns: auto minmax(0, 1fr); }
    .src__flags, .src__stock { grid-column: 1 / -1; }
}

/* ---------- The first screen: a real car beside the words, the search under them ---------- */
.hero__nums { display: flex; flex-wrap: wrap; gap: 14px clamp(20px, 3vw, 40px); }
.hero__nums li { display: grid; gap: 2px; padding-inline-start: 12px; border-inline-start: 4px solid var(--accent); min-width: 0; }
.hero__nums b { font: 800 clamp(24px, 2.6vw, 38px)/1.1 'Unbounded', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hero__nums span { font-weight: 700; font-size: 13.5px; color: #c1c6cb; line-height: 1.3; }
.hero__nums b.ph { min-width: 3.4ch; }
.hero__nums .ph--text { width: 12ch; height: 1em; }

.spot { position: relative; min-width: 0; }
.spot__card { position: relative; display: block; width: 100%; padding: 0; border: 0; border-radius: var(--r-panel); border-start-start-radius: 6px; overflow: hidden; background: var(--panel); color: var(--text); text-align: start; cursor: pointer; aspect-ratio: 16 / 10; }
.spot__card img { width: 100%; height: 100%; object-fit: cover; }
.spot__label { position: absolute; top: 14px; inset-inline-start: 14px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; border-radius: 999px; background: var(--accent-fill); color: #fff; font-weight: 800; font-size: 13px; }
.spot__info { position: absolute; inset-inline: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 14px 16px; background: rgba(5, 7, 6, 0.9); border-top: 3px solid var(--accent); }
.spot__name { display: grid; min-width: 0; font: 800 clamp(16px, 1.5vw, 21px)/1.2 var(--display); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.spot__name small { font: 800 12px/1.3 var(--body); letter-spacing: 0; color: var(--accent); }
.spot__price { flex: none; font-weight: 800; font-size: 13px; }
.spot__price b { font: 800 clamp(19px, 1.9vw, 26px)/1 'Unbounded', sans-serif; color: var(--accent); letter-spacing: -0.03em; }
.spot__ghost { width: 100%; aspect-ratio: 16 / 10; border-radius: var(--r-panel); animation: breathe 1.6s ease-in-out infinite; }
.spot__failed { display: grid; justify-items: start; gap: 12px; padding: 22px; border-radius: var(--r-panel); background: var(--panel); color: var(--muted); font-weight: 600; }
@media (hover: hover) { .spot__card:hover .spot__info { background: #000; } }

.finder {
    position: relative; max-width: 1360px; margin: clamp(22px, 3vw, 40px) auto 0; padding: clamp(14px, 1.6vw, 20px);
    display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px; align-items: end;
    border-radius: var(--r-panel); background: var(--panel); border-top: 4px solid var(--accent);
}
.finder__field { display: grid; gap: 6px; min-width: 0; }
.finder__field > span:first-child { font-size: 12.5px; font-weight: 800; color: var(--muted); }
.finder__input { position: relative; display: block; }
.finder__input i { position: absolute; top: 50%; inset-inline-start: 14px; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; }
.finder__input input { width: 100%; height: 44px; padding-inline: 38px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); color: var(--text); font: 600 14.5px/1.2 var(--body); }
.finder__input input:focus { outline: none; border-color: var(--accent); }
.finder__go { height: 44px; }
.finder__quick { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fchip b { font-weight: 800; color: inherit; opacity: 0.85; }
.fchip--hot { background: var(--accent-fill); border-color: var(--accent); color: #fff; }
.fchip--hot i { color: #fff; }
.finder__track { margin-inline-start: auto; }
@media (hover: hover) { .fchip:hover { border-color: rgba(255, 255, 255, 0.35); } }

@media (max-width: 1024px) {
    .spot { max-width: 640px; }
    .finder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .finder__field--text, .finder__go { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    /* A phone keeps the words and the search on the first screen; the same car is the first card just below. */
    .spot { display: none; }
    .hero__nums b { font-size: 24px; }
    .finder__track { margin-inline-start: 0; }
}

/* ---------- Staff pages: notifications as a table ---------- */
.nots__tools { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nots__table tbody tr { cursor: pointer; }
.nots__table tr.is-new td { background: var(--accent-soft); font-weight: 700; }
.nots__what { min-width: 240px; }
.nots__what > i { margin-inline-end: 10px; color: var(--accent); }
.nots__when { white-space: nowrap; color: var(--muted); }
.nots__step { margin-inline-end: 8px; color: var(--accent); }
.adm__card h2 .nots__tools { margin-inline-start: auto; }

/* ---------- Manufacture and first registration on a card: two small tiles under its facts ---------- */
.card__dates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0; }
.card__dates > div { min-width: 0; padding: 7px 10px; border-radius: 10px; background: var(--bg-2); }
.card__dates dt { display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__dates dt i { flex: none; font-size: 11px; color: var(--accent); }
.card__dates dd { margin: 2px 0 0; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* A car a client has ordered: its photo is blurred. The one filter on the public site, asked for by the owner, on these few photos only. */
.card--ordered .card__media img, .sheet--ordered .sheet__photo img:not(.sheet__preload), .sheet--ordered .sheet__thumbs img { filter: blur(7px); transform: scale(1.1); }
.sheet--ordered .sheet__thumbs button { overflow: hidden; }
.ordered-mark {
    position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 999px; background: #0b0d0d; border: 2px solid var(--accent); color: #fff; font: 800 15px/1.1 var(--body); white-space: nowrap;
}
.ordered-mark i { color: var(--accent); }
.card--ordered .card__actions .btn { flex: 1 1 100%; }
.steps2--all .step2 { opacity: 1; }
.steps2--all .step2__dot { color: var(--accent); }
.step2__ghost { width: min(220px, 60vw); height: 16px; }

/* The client's tracking code, for the staff. */
.tbadge {
    display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; max-width: 100%; padding-block: 6px; padding-inline: 12px 6px; border-radius: 999px;
    background: var(--accent-soft); border: 1px solid rgba(255, 43, 43, 0.55); color: var(--text); font-size: 13px;
}
.tbadge > i { color: var(--accent); }
.tbadge__label { font-weight: 800; }
.tbadge b { font: 800 14px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.06em; white-space: nowrap; color: #fff; }
.tbadge__copy { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; min-width: 30px; padding: 0 10px; border-radius: 999px; cursor: pointer; border: 1px solid var(--line-2); background: var(--panel); color: var(--text); font: 700 12.5px/1 var(--body); }
.tbadge__copy:hover { background: var(--panel-2); }
.tbadge__copy.is-failed { color: var(--accent); }
.tbadge--compact { padding-block: 3px; padding-inline: 9px 3px; gap: 6px; font-size: 12px; flex-wrap: nowrap; }
.tbadge--compact b { font-size: 12px; letter-spacing: 0.03em; }
.tbadge--compact .tbadge__copy { min-height: 24px; min-width: 24px; padding: 0; }
.otable__order { white-space: nowrap; }
.otable__order .tbadge { display: flex; width: fit-content; margin-block-start: 6px; }

/* The table of orders: it fits a computer's page. A long step name or car wraps; the amounts share one column. */
.adm__table--orders td { padding: 10px 10px; }
.adm__table--orders th { padding: 12px 10px; }
.adm__table--orders .ord__status { height: auto; min-height: 28px; padding-block: 4px; white-space: normal; line-height: 1.25; }
.adm__table--orders .ord__pending { margin-block-start: 4px; }
.otable__money { white-space: nowrap; font-variant-numeric: tabular-nums; }
.otable__money b { display: block; font-weight: 800; }
.otable__when { white-space: nowrap; }
.otable__when .quiet { display: flex; width: fit-content; margin-inline-start: 0; margin-block-start: 4px; }
/* Too narrow for a table: each order is a block of two columns, not one long column. */
.adm__table--orders.is-stacked tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; }
.adm__table--orders.is-stacked td { width: auto; }
.adm__table--orders.is-stacked td:nth-child(1), .adm__table--orders.is-stacked td:nth-child(4) { grid-column: 1 / -1; }
.adm__filters--orders select { flex: 1 1 170px; width: auto; min-width: 0; }

/* The card before WhatsApp: solid and still, like the rest of the public site. */
.chat { width: min(560px, 94vw); max-height: 92svh; padding: 0; margin: auto; overflow: auto; color: var(--text); background: var(--panel); border: 0; border-radius: var(--r-panel); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8); }
.chat::backdrop { background: rgba(2, 4, 3, 0.88); }
.chat__box { position: relative; display: grid; gap: 16px; padding: 24px; }
.chat__close { position: absolute; top: 14px; inset-inline-end: 14px; width: 44px; height: 44px; }
.chat__title { display: flex; align-items: center; gap: 10px; margin: 0; padding-inline-end: 54px; font: 800 clamp(20px, 3vw, 24px)/1.2 var(--display); }
.chat__title i { color: #25d366; }
.chat__car { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; padding: 12px 14px; border-radius: var(--r-inner); background: var(--panel-2); }
.chat__car b { font-weight: 800; }
.chat__code { font: 800 13px/1 ui-monospace, 'Cascadia Mono', Consolas, monospace; letter-spacing: 0.1em; color: var(--muted); }
.chat__price { margin-inline-start: auto; font-weight: 800; color: var(--accent); white-space: nowrap; }
.chat__main { display: grid; gap: 10px; }
.chat__open { width: 100%; }
.chat__send, .chat__next, .chat__warn { display: flex; gap: 10px; margin: 0; font-size: 14px; line-height: 1.5; }
.chat__send { padding: 12px 14px; border-radius: var(--r-inner); background: var(--bg-2); }
.chat__send i { margin-block-start: 3px; color: #25d366; }
.chat__send b { font-weight: 800; color: #fff; }
.chat__warn { padding: 12px 14px; border-radius: var(--r-inner); background: rgba(255, 190, 60, 0.1); color: #ffd98f; }
.chat__warn i { margin-block-start: 3px; }
.chat__manual { display: grid; gap: 12px; padding-block-start: 16px; border-block-start: 1px solid var(--line-2); }
.chat__manual h3 { margin: 0; font-size: 15px; font-weight: 800; }
.chat__manual ol { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: chat; }
.chat__manual li { position: relative; display: grid; justify-items: start; gap: 8px; padding-inline-start: 38px; counter-increment: chat; font-size: 14.5px; }
.chat__manual li::before { content: counter(chat); position: absolute; inset-inline-start: 0; top: -2px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--panel-2); font-size: 13px; font-weight: 800; }
.chat__manual blockquote { width: 100%; margin: 0; padding: 10px 12px; border-radius: var(--r-inner); background: var(--bg-2); color: var(--muted); font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.chat__number { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; }
.chat__number b { font-size: 19px; font-weight: 800; letter-spacing: 0.02em; }
.chat__others { display: flex; flex-wrap: wrap; gap: 8px; }
.chat__others .btn, .chat__manual .btn { min-height: 44px; }
.chat__next { color: var(--muted); }
@media (max-width: 640px) {
    .chat { width: 100vw; max-width: 100vw; max-height: 94svh; margin: auto 0 0; border-radius: var(--r-panel) var(--r-panel) 0 0; border-end-start-radius: 0; border-end-end-radius: 0; }
    .chat__box { padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); }
    .chat__others .btn { flex: 1 1 140px; }
}
button.sheet__report { width: 100%; border: 0; cursor: pointer; font: inherit; color: inherit; text-align: start; }
@media (hover: none) { .ord__web { display: none; } }

/* Readable on its dark red panel. */
.sheet__price-label { color: #ff8080; }
/* On a phone the close button sits on the photo: the badges stay clear of it. */
@media (max-width: 640px) {
    .sheet__hot, .sheet__pick { inset-inline-end: 68px; }
}
/* A thumb needs 44 px: whatever is smaller on screen gets the room on a touch screen. */
@media (pointer: coarse) {
    .nav__lang, .contact__pin, .fchip { min-height: 44px; }
    .nav .btn--icon, .nav .btn--sm { min-width: 44px; min-height: 44px; }
    .pager__num, .pager__step { min-width: 44px; }
    .contact__phone { display: inline-flex; align-items: center; min-height: 44px; }
    .foot__col a { min-height: 44px; }
    .sheet__price summary { padding-block: 12px; }
    .sheet .chip--grade { position: absolute; }
    .sheet .chip--grade::after { content: ''; position: absolute; inset: -8px; }
}
.contact__wa { justify-self: start; margin-block-start: 6px; }
html[dir='rtl'] .contact__wa { justify-self: end; }