/*
 * CineDuce: tema „noapte albastră”. Fundal bleumarin cu lumină albastru–violet în hero, carduri albe moi,
 * butoane cu gradient. Fișierul se încarcă după CSS-ul compilat și îl suprascrie (regulile din afara
 * straturilor Tailwind au prioritate), deci tema se poate scoate ștergând un singur <link> din layout.
 */
:root {
    --color-ink: #0b2545;
    --color-asphalt: #0b1030;
    --color-ink-soft: #3e5778;
    --color-mute: #6b7394;
    --color-line: #dfe4f0;
    --color-sheet: #f4f6fb;
    --color-paper: #ffffff;
    --color-road: #e3e9ff;
    --color-road-deep: #cfd9ff;
    --color-road-soft: #eef2ff;
    --color-sign: #1e73e8;
    --color-sign-deep: #155bbd;
    --color-ok: #12a26b;
    --color-bad: #e5484d;

    --brand-1: #1e73e8;
    --brand-2: #00c2d6;
    --brand-grad: linear-gradient(90deg, var(--brand-1), var(--brand-2));
    --night: #0b2545;
    --night-2: #13315c;
    --radius: 16px;
    --shadow: 0 10px 30px rgba(15, 21, 53, .08), 0 2px 6px rgba(15, 21, 53, .05);
    --shadow-lg: 0 24px 60px rgba(10, 15, 46, .35);
    --font-sans: 'Montserrat', 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
    --font-sign: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
}

/* pe telefon pagina nu are voie să se tragă lateral (benzile late și harta rămân în ecran) */
html, body { overflow-x: clip; max-width: 100%; }
input, select, textarea { font-size: 16px; } /* sub 16px, iPhone mărește pagina când apeși pe câmp */
.field input, .field select, .field textarea { min-width: 0; text-overflow: ellipsis; }
body { font-family: var(--font-sans); background: var(--color-sheet); color: var(--color-ink); font-size: 1rem; }
h1, h2, h3 { letter-spacing: -0.025em; }
:focus-visible { outline-color: var(--brand-1); }

/* ---------- Margini mai fine pe tot site-ul (în loc de contururi negre groase) ---------- */
.border-ink { border-color: var(--color-line); }
.divide-ink > :not(:last-child) { border-color: var(--color-line); }

/* ---------- Câmpuri ---------- */
.field { border: 1px solid var(--color-line); border-radius: 12px; background: #fff; padding: .45rem .85rem .55rem; transition: border-color .15s, box-shadow .15s; }
.field:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 4px rgba(30, 115, 232, .15); }
.field > span { color: var(--color-ink-soft); font-weight: 600; }
.field.invalid { border-color: var(--color-bad); box-shadow: 0 0 0 4px rgba(229, 72, 77, .1); }

/* ---------- Butoane ---------- */
.btn { border: 1px solid var(--color-line); border-radius: 12px; font-weight: 700; background: #fff; color: var(--color-ink); box-shadow: 0 1px 2px rgba(15,21,53,.06); }
.btn:hover { background: var(--color-sheet); }
.btn-primary { background: var(--brand-grad); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(30, 115, 232, .35); }
.btn-primary:hover { background: var(--brand-grad); filter: brightness(1.08); }
.btn-primary:active { box-shadow: 0 4px 10px rgba(30, 115, 232, .35); transform: translateY(1px); }
/* butonul mare din formular, ca în machetă: lat, gradient, colțuri rotunjite */
.btn-cta { width: 100%; padding: 1rem 1.25rem; font-size: 1.0625rem; border-radius: 14px; }
.btn-dark { background: var(--color-ink); color: #fff; border-color: var(--color-ink); }
.btn-dark:hover { background: #1c2450; }
.btn-ghost { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { background: rgba(255,255,255,.16); }

/* ---------- Suprafețe ---------- */
.card { overflow: clip; border: 1px solid var(--color-line); border-radius: var(--radius); box-shadow: var(--shadow); }
.sticker { box-shadow: var(--shadow-lg); }
.tag { border-width: 1px; font-weight: 700; padding: .1rem .65rem; }
.tag-open { background: var(--color-road); color: var(--color-sign-deep); border-color: transparent; }
.tag-ok { background: #e3f7ee; border-color: transparent; }
.tag-bad { background: #fde8e8; border-color: transparent; }
.tag-mute { background: var(--color-sheet); border-color: transparent; }
.roadline { height: 3px; background: var(--brand-grad); border-radius: 3px; }
.hazard { background: var(--brand-grad); }
.bg-sign { background: linear-gradient(135deg, var(--night-2), #0e4a8a); }
.text-sign { color: var(--brand-1); }

/* ---------- Antet ---------- */
.site-header { background: var(--night); color: #fff; position: relative; z-index: 20; }
.site-header.on-hero { background: transparent; position: absolute; left: 0; right: 0; top: 0; }
.nav-link { color: rgba(255,255,255,.86); padding: .45rem .7rem; border-radius: 10px; font-weight: 600; background: none; border: 0; cursor: pointer; }
.nav-link:hover { color: #fff; background: rgba(255,255,255,.08); }
.logo { color: #fff; }
.logo-mark { display: inline-flex; gap: 3px; transform: skewX(-18deg); }
.logo-mark i { display: block; width: 7px; height: 22px; border-radius: 3px; background: var(--brand-grad); }
.logo-mark i:last-child { background: linear-gradient(180deg, var(--brand-1), #00c2d6); }
/* clopoțelul pe fundal închis */
.site-header button[aria-label^="Notificări"] { color: rgba(255,255,255,.9); }
.site-header button[aria-label^="Notificări"]:hover { background: rgba(255,255,255,.08); }
.site-header button[aria-label^="Notificări"] .bg-ink { background: var(--brand-grad); }
.mobile-menu { background: var(--night-2); border-top: 1px solid rgba(255,255,255,.1); }

/* ---------- Hero ---------- */
.hero {
    /* clip, nu hidden: cu hidden, telefonul derula conținutul în interiorul hero-ului când aducea un câmp în vizor */
    position: relative; overflow: clip; color: #fff; background: var(--night);
    background-image:
        radial-gradient(60rem 30rem at 85% 10%, rgba(0, 194, 214, .45), transparent 60%),
        radial-gradient(50rem 28rem at 10% 90%, rgba(30, 115, 232, .35), transparent 60%),
        linear-gradient(180deg, #0b2545, #0e2d55);
}
.hero::after { /* firele de lumină din fundal */
    content: ''; position: absolute; inset: auto -10% -30% -10%; height: 60%;
    background: radial-gradient(ellipse at center, rgba(111, 211, 255, .18), transparent 65%);
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.pill { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .85rem; border-radius: 999px; font-size: .875rem; font-weight: 600; background: rgba(255,255,255,.06); border: 1px solid rgba(111, 211, 255, .35); color: #d9e6ff; }
.grad-text { background: linear-gradient(90deg, #4da3ff, #00d4e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { color: rgba(255,255,255,.78); font-size: 1.125rem; }
.trust-row { display: none; gap: 1rem 1.5rem; }
@media (min-width: 640px) { .trust-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 639px) { .hero-lead { font-size: 1rem; } .pill-long { display: none; } }
.trust-row li { display: flex; gap: .6rem; align-items: center; font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.85); line-height: 1.25; }
.trust-row svg { color: #5fd6e6; flex: none; }
.glass { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); backdrop-filter: blur(10px); }
.form-card { background: #fff; color: var(--color-ink); border-radius: 20px; box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.6); }
.form-card .field { background: #fbfcff; }

/* pașii formularului */
.steps { display: flex; gap: .5rem; align-items: center; }
.steps .dot { flex: 1; height: 4px; border-radius: 4px; background: var(--color-line); }
.steps .dot.on { background: var(--brand-grad); }
.step-label { font-size: .8125rem; font-weight: 700; color: var(--color-mute); text-transform: uppercase; letter-spacing: .04em; }

/* harta din hero */
.map-frame { border-radius: var(--radius); overflow: hidden; border: 1px solid rgba(255,255,255,.18); box-shadow: var(--shadow-lg); background: #1a2160; }
.map-frame .leaflet-container { background: #dfe6f5; }

/* ---------- Secțiuni ---------- */
.section-title { font-size: clamp(1.6rem, 3.2vw, 2.2rem); font-weight: 800; }
.section-title::after { content: ''; display: block; width: 3.2rem; height: 4px; border-radius: 4px; margin-top: .5rem; background: var(--brand-grad); }
.benefits { display: grid; gap: 1px; background: var(--color-line); border-radius: var(--radius); overflow: clip; box-shadow: var(--shadow); }
@media (min-width: 768px) { .benefits { grid-template-columns: repeat(3, 1fr); } }
.benefits > div { background: #fff; display: flex; gap: 1rem; padding: 1.4rem 1.5rem; align-items: flex-start; }
.icon-soft { flex: none; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 14px; background: var(--color-road-soft); color: var(--color-sign); }
.cat { display: flex; gap: .9rem; align-items: center; text-align: left; width: 100%; background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1rem 1.1rem; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.cat:hover { transform: translateY(-3px); border-color: #c5d0f5; box-shadow: 0 16px 34px rgba(15,21,53,.12); }
.cat .icon-soft { width: 3.4rem; height: 3.4rem; }
/* banda de categorii: fundal închis, carduri pătrate cu imagine (ca în machetă) */
.cat-band { background: var(--night); background-image: radial-gradient(40rem 18rem at 80% 0%, rgba(0,194,214,.35), transparent 60%), radial-gradient(36rem 16rem at 0% 100%, rgba(30,115,232,.28), transparent 60%); }
/* pe telefon: 4 carduri pe ecran, restul se derulează lateral */
.cat-row { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * .55rem) / 4); gap: .55rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; scrollbar-width: none; }
.cat-row::-webkit-scrollbar { display: none; }
/* carduri albe „de catalog”: imaginea pe alb, numele dedesubt; cel ales are contur în gradient și lumină */
.cat-row { padding: 6px 4px 12px; margin-inline: -4px; }
.cat-tile { scroll-snap-align: start; display: flex; flex-direction: column; align-items: stretch; gap: .3rem; padding: .3rem .3rem .55rem; border-radius: 16px; cursor: pointer; color: var(--color-ink); background: #fff; border: 0; box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 10px 24px rgba(3, 6, 30, .35); transition: transform .2s ease, box-shadow .2s ease; }
.cat-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 36px rgba(3, 6, 30, .45); }
.cat-tile img { display: block; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; border-radius: 12px; background: #fff; transition: transform .35s ease; }
.cat-tile:hover img { transform: scale(1.04); }
.cat-tile .cat-ico { aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 12px; background: var(--color-road-soft); color: var(--color-sign); }
.cat-tile .cat-name { font-weight: 800; font-size: .8125rem; line-height: 1.15; text-align: center; }
/* contur în gradient doar pe margine: fundal alb în interior, gradientul doar sub bordură */
.cat-tile.is-on { border: 3px solid transparent; padding: calc(.3rem - 3px) calc(.3rem - 3px) calc(.55rem - 3px); background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box; box-shadow: 0 14px 34px rgba(30, 115, 232, .55); }
.cat-tile.is-on .cat-name { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (min-width: 40rem) { .cat-row { grid-auto-columns: calc((100% - 5 * .9rem) / 6); gap: .9rem; } .cat-tile { padding: .4rem .4rem .7rem; } .cat-tile.is-on { padding: calc(.4rem - 3px) calc(.4rem - 3px) calc(.7rem - 3px); } .cat-tile .cat-name { font-size: .975rem; } }
.cat-tile.is-on .cat-ico { color: var(--color-sign); }
@media (min-width: 64rem) { .cat-row { grid-auto-flow: row; grid-template-columns: repeat(8, minmax(0, 1fr)); overflow: visible; } }

.check-list li { display: flex; gap: .65rem; align-items: center; font-weight: 600; }
.check-list li::before { content: '✓'; flex: none; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 999px; background: #e3f7ee; color: var(--color-ok); font-size: .8rem; font-weight: 800; }
.mock { border-radius: 18px; background: var(--night-2); padding: .6rem; box-shadow: var(--shadow-lg); }
.mock-inner { background: #fff; border-radius: 12px; padding: 1.1rem; }
.timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: .25rem; position: relative; margin-top: 1.1rem; }
.timeline::before { content: ''; position: absolute; left: 12%; right: 12%; top: .55rem; height: 2px; background: linear-gradient(90deg, var(--color-ok) 66%, var(--color-line) 66%); }
.timeline span { position: relative; text-align: center; font-size: .72rem; font-weight: 600; color: var(--color-mute); padding-top: 1.5rem; }
.timeline span::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 1.15rem; height: 1.15rem; border-radius: 999px; background: var(--color-ok); box-shadow: 0 0 0 3px #fff; }
.timeline span.todo::before { background: var(--color-line); }
.stat b { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -.03em; }
.stat span { color: var(--color-mute); font-size: .875rem; font-weight: 600; }
.review { background: #fff; border: 1px solid var(--color-line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow); }
.stars { color: #12b886; letter-spacing: .08em; }
.avatar { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 999px; background: var(--brand-grad); color: #fff; font-weight: 800; }
.carrier-band { position: relative; overflow: clip; color: #fff; border-radius: 22px; background: var(--night); background-image: radial-gradient(40rem 20rem at 20% 100%, rgba(0,194,214,.45), transparent 60%), radial-gradient(30rem 20rem at 100% 0%, rgba(30,115,232,.35), transparent 60%); box-shadow: var(--shadow-lg); }
.carrier-band li { display: flex; gap: .8rem; }
.carrier-band li svg { color: #5fd6e6; flex: none; margin-top: .15rem; }

/* ---------- Subsol ---------- */
.site-footer { background: var(--night); color: #fff; }
.site-footer .roadline { height: 3px; }

@media (prefers-reduced-motion: reduce) { .cat { transition: none; } }

/* ---------- Telefon: pasul 1 al formularului direct pe fundalul hero-ului (ca la Shiply) ---------- */
.only-phone { display: none; }
@media (max-width: 639px) {
    .hide-phone { display: none; }
    .only-phone { display: inline; }
    .hero > .wrap { padding-top: 1.25rem; padding-bottom: 3.75rem; gap: 1.25rem; }
    .hero h1 { font-size: clamp(1.9rem, 8.6vw, 2.4rem); margin-top: .9rem; }
    .hero .pill { font-size: .8125rem; padding: .3rem .75rem; }
    .hero-lead { margin-top: .6rem; font-size: 1rem; }

    .form-card.form-step-1 { background: transparent; border: 0; box-shadow: none; }
    .form-step-1 .form-body { padding: 0; gap: .65rem; }
    .form-step-1 .form-head, .form-step-1 .form-steps { display: none; }
    .form-step-1 .field { background: #fff; border-color: transparent; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
    .form-step-1 .form-restored { background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); }
    .form-step-1 .form-restored button { color: #fff; }
    .form-step-1 .form-note { color: rgba(255,255,255,.72); }
    .form-step-1 .err { color: #ffb3b3; }
    .form-step-1 .btn-cta { margin-top: .15rem; }

    /* pașii 2–3 rămân în card alb, dar fără titlu și cu margini mai mici */
    .form-card .form-head { display: none; }
    .form-card .form-body { padding: 1rem; }
    .form-date { grid-template-columns: 1fr; gap: .5rem; }
    .form-date > label:last-child { padding-bottom: 0; }
    .form-card { scroll-margin-top: .75rem; }
    .form-step-1 .form-body { padding: 0; }
}

/* ---------- Utilitare care nu sunt în CSS-ul compilat (fără Node pe server nu îl recompilăm) ---------- */
.pt-8 { padding-top: 2rem; } .mt-16 { margin-top: 4rem; } .pt-14 { padding-top: 3.5rem; } .pb-12 { padding-bottom: 3rem; }
.text-\[2\.1rem\] { font-size: 2.1rem; } .gap-x-4 { column-gap: 1rem; } .inline-block { display: inline-block; } .inline-flex { display: inline-flex; }
.hover\:shadow-lg:hover { box-shadow: 0 18px 40px rgba(15, 21, 53, .14); transform: translateY(-2px); } .pt-16 { padding-top: 4rem; } .mt-7 { margin-top: 1.75rem; } .mt-0\.5 { margin-top: .125rem; }
.my-2 { margin-block: .5rem; } .p-7 { padding: 1.75rem; } .py-3\.5 { padding-block: .875rem; }
.gap-1\.5 { gap: .375rem; } .gap-3\.5 { gap: .875rem; } .gap-x-3 { column-gap: .75rem; } .gap-y-1 { row-gap: .25rem; }
.text-\[2\.3rem\] { font-size: 2.3rem; } .text-\[0\.75rem\] { font-size: .75rem; } .leading-\[1\.06\] { line-height: 1.06; }
.text-center { text-align: center; } .text-left { text-align: left; } .rounded-xl { border-radius: .75rem; }
.grid-cols-\[auto_1fr\] { grid-template-columns: auto 1fr; } .justify-items-start { justify-items: start; }
@media (min-width: 40rem) {
    .sm\:p-6 { padding: 1.5rem; } .sm\:p-8 { padding: 2rem; } .sm\:p-10 { padding: 2.5rem; }
    .sm\:text-2xl { font-size: 1.5rem; line-height: 1.3; } .sm\:text-\[1\.4rem\] { font-size: 1.4rem; }
    .sm\:text-left { text-align: left; } .sm\:block { display: block; } .sm\:inline-flex { display: inline-flex; }
}
@media (min-width: 48rem) { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40rem) { .sm\:text-3xl { font-size: 1.875rem; line-height: 1.2; } }
@media (min-width: 64rem) {
    .lg\:pt-12 { padding-top: 3rem; } .lg\:pb-20 { padding-bottom: 5rem; } .lg\:text-\[3\.4rem\] { font-size: 3.4rem; }
    .lg\:block { display: block; } .lg\:flex { display: flex; } .lg\:hidden { display: none; }
    .lg\:grid-cols-\[1\.05fr_minmax\(0\,30rem\)\] { grid-template-columns: 1.05fr minmax(0, 30rem); }
    .lg\:grid-cols-\[1fr_1\.1fr\] { grid-template-columns: 1fr 1.1fr; }
    .lg\:grid-cols-\[1\.1fr_1fr_auto\] { grid-template-columns: 1.1fr 1fr auto; }
    .lg\:justify-items-center { justify-items: center; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .lg\:grid-cols-\[1fr_minmax\(0\,22rem\)\] { grid-template-columns: 1fr minmax(0, 22rem); }
    .lg\:grid-cols-\[1\.2fr_1fr\] { grid-template-columns: 1.2fr 1fr; }
}

/* ---------- Pasul 2: variante cu bifă ca „pastile” (servicii, obiecte speciale) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .9rem; border-radius: 999px; background: #fff; border: 1.5px solid var(--color-line, #dfe3ee); font-weight: 600; font-size: .9375rem; line-height: 1.2; transition: border-color .15s, background .15s; }
.chip span::before { content: '+'; font-weight: 800; color: var(--brand-1); }
.chip input:checked + span { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, var(--brand-grad) border-box; border: 2px solid transparent; padding: calc(.55rem - .5px) calc(.9rem - .5px); box-shadow: 0 6px 16px rgba(30, 115, 232, .18); }
.chip input:checked + span::before { content: '✓'; }
.chip input:focus-visible + span { outline: 3px solid var(--brand-1); outline-offset: 2px; }
.col-span-2 { grid-column: span 2 / span 2; }
/* ---------- Pașii 2–3: formular pe toată lățimea, traseul mic în stânga ---------- */
.hero.is-wide .hero-intro, .hero.is-wide .form-head { display: none; }
.hero.is-wide .hero-map { margin-top: .9rem; }
.hero.is-wide .hero-map .map-frame > div:first-child { height: 210px !important; }
@media (min-width: 1024px) {
    .hero.is-wide > .wrap { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: 1.75rem; padding-top: 1.75rem; padding-bottom: 3rem; }
    .hero.is-wide .hero-side { position: sticky; top: 1rem; }
    .hero.is-wide .form-card .form-body { padding: 1.75rem 2rem; }
}
.route-card { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; padding: .9rem 1rem; display: grid; gap: .45rem; color: #fff; backdrop-filter: blur(6px); }
.route-line { display: flex; align-items: center; gap: .6rem; font-size: 1.0625rem; }
.route-dot { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 999px; font-size: .75rem; font-weight: 800; flex: none; }
.route-dot.a { background: var(--brand-1); }
.route-dot.b { background: var(--brand-2); }
.route-meta { display: flex; justify-content: space-between; align-items: center; gap: .5rem; font-size: .9375rem; color: rgba(255, 255, 255, .8); border-top: 1px solid rgba(255, 255, 255, .14); padding-top: .5rem; }
.route-edit { color: #fff; font-weight: 700; background: rgba(255, 255, 255, .12); border-radius: 10px; padding: .3rem .65rem; white-space: nowrap; }
.route-edit:hover { background: rgba(255, 255, 255, .2); }

/* ---------- Inventar pe camere (mutări / mobilă) ---------- */
.inv { border: 1.5px solid var(--color-line, #dfe3ee); border-radius: 16px; overflow: clip; background: #fff; }
.inv-top { display: flex; justify-content: space-between; align-items: center; gap: .75rem; padding: .9rem 1rem .6rem; }
.inv-total { font-size: .875rem; font-weight: 700; color: #fff; background: var(--brand-grad); border-radius: 999px; padding: .2rem .7rem; }
.inv-tabs { display: flex; overflow-x: auto; scrollbar-width: none; border-bottom: 1.5px solid var(--color-line, #dfe3ee); background: #f6f7fb; }
.inv-tabs::-webkit-scrollbar { display: none; }
.inv-tab { position: relative; flex: 1 0 auto; min-width: 5.2rem; display: grid; justify-items: center; gap: .15rem; padding: .7rem .6rem .6rem; font-size: .8125rem; font-weight: 600; color: #6b7390; border-right: 1px solid var(--color-line, #e6e9f2); line-height: 1.2; text-align: center; }
.inv-tab:last-child { border-right: 0; }
.inv-tab .inv-ico { font-size: 1.35rem; line-height: 1; filter: grayscale(1); opacity: .7; }
.inv-tab.on { background: #fff; color: var(--brand-1); box-shadow: inset 0 -3px 0 var(--brand-1); }
.inv-tab.on .inv-ico { filter: none; opacity: 1; }
.inv-badge { position: absolute; top: .35rem; right: .4rem; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--brand-grad); color: #fff; font-size: .6875rem; display: grid; place-items: center; }
.inv-list { list-style: none; margin: 0; padding: 0; }
.inv-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 1rem; min-height: 3.1rem; border-bottom: 1px solid #eef0f6; }
.inv-row.has { background: #f3f6ff; }
.inv-row.has .inv-name { font-weight: 700; color: var(--color-ink, #0f1535); }
.inv-name { font-size: 1rem; color: #3b4260; }
.inv-ctr { display: inline-flex; align-items: center; gap: .45rem; flex: none; }
.inv-btn { width: 2.25rem; height: 2.25rem; border-radius: 999px; display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; line-height: 1; color: var(--brand-1); border: 2px solid var(--brand-1); background: #fff; }
.inv-btn.plus { background: transparent; border-color: #c9d2ea; color: #3b4260; }
.inv-row.has .inv-btn.plus { border-color: var(--brand-1); color: var(--brand-1); }
.inv-btn:active { transform: scale(.94); }
.inv-qty { min-width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border: 1.5px solid #c9d2ea; border-radius: 8px; font-weight: 800; font-size: 1.0625rem; }
.inv-nav { display: flex; gap: .5rem; padding: .75rem 1rem; }
.ml-auto { margin-left: auto; }
@media (min-width: 1024px) { .inv-tab { flex: 1 1 0; min-width: 0; padding-left: .3rem; padding-right: .3rem; font-size: .78rem; } }

/* ---------- Brand MUV: logo în antet și subsol ---------- */
.brand-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.brand-logo img { width: 2.35rem; height: 2.35rem; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .18), 0 6px 16px rgba(0, 0, 0, .25); }
.brand-name { display: grid; line-height: 1; }
.brand-name b { font-family: 'Montserrat', var(--font-sans); font-weight: 800; font-size: 1.45rem; letter-spacing: .01em; }
.brand-name small { font-size: .6rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-top: .22rem; }
@media (max-width: 639px) { .brand-name small { display: none; } .brand-logo img { width: 2.1rem; height: 2.1rem; } }
h1, h2, h3, .font-extrabold { font-family: 'Montserrat', var(--font-sans); }.nav-link, .btn-sm, .brand-name small { white-space: nowrap; }
.site-header nav .nav-link { padding-left: .55rem; padding-right: .55rem; }
@media (min-width: 1024px) and (max-width: 1279px) { .site-header nav { font-size: .84rem; } .site-header nav .nav-link { padding-left: .4rem; padding-right: .4rem; } }
/* ---------- Antet alb cu logo-ul MUV (logo navy pe fundal alb, ca în fișa brandului) ---------- */
.site-header { background: #fff; color: var(--color-ink); border-bottom: 1px solid #e3ecf7; box-shadow: 0 2px 14px rgba(11, 37, 69, .06); }
.site-header .wrap { padding-top: .55rem; padding-bottom: .55rem; }
.header-logo { display: inline-flex; align-items: center; flex: none; }
.header-logo img { height: 3.1rem; width: auto; display: block; }
@media (min-width: 1280px) { .header-logo img { height: 3.6rem; } }
@media (max-width: 639px) { .header-logo img { height: 2.6rem; } }
.site-header .nav-link { color: var(--color-ink); }
.site-header .nav-link:hover { color: var(--brand-1); background: #e8f5ff; }
.site-header button[aria-label^="Notificări"] { color: var(--color-ink); }
.site-header button[aria-label^="Notificări"]:hover { background: #e8f5ff; }
.mobile-menu { background: #fff; border-top: 1px solid #e3ecf7; }
/* ---------- Pagina Servicii: imaginea întreagă în card, fără tăieturi ---------- */
.service-img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; padding: .9rem .9rem 0; background: #fff; box-sizing: border-box; }
/* ---------- Înscriere transportatori: avantaje pe fundal închis ---------- */
.carrier-perks { display: grid; gap: 1rem; list-style: none; padding: 0; margin-left: 0; margin-right: 0; max-width: 32rem; }
.carrier-perks li { display: flex; gap: .85rem; align-items: flex-start; }
.carrier-perks svg { flex: none; color: #5fd6e6; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); border-radius: 12px; padding: .45rem; width: 2.6rem; height: 2.6rem; }
.carrier-perks span { display: grid; gap: .1rem; color: rgba(255, 255, 255, .75); font-size: .9375rem; }
.carrier-perks b { color: #fff; font-size: 1.0625rem; }
.field input[type=file] { font-size: .9375rem; padding-top: .35rem; }
.field input[type=file]::file-selector-button { margin-right: .75rem; border: 0; border-radius: 10px; padding: .45rem .9rem; font-weight: 700; color: #fff; background: var(--brand-grad); cursor: pointer; }

/* ---------- Rămășițe din designul vechi: margini negre groase → linii fine, rotunjite ---------- */
.border-ink { border-color: #d6e2f2 !important; }
.border-\[1\.5px\].border-ink { border-width: 1px !important; border-radius: 12px; }
.border-b-\[1\.5px\].border-ink { border-width: 0 0 1px !important; border-radius: 0; }
/* ---------- Prima pagină pe laptop: formularul de la pasul 1 încape întreg pe ecran ---------- */
@media (min-width: 1024px) {
    .hero:not(.is-wide) > .wrap { padding-top: 1.5rem; }
    .form-card.form-step-1 .form-body { gap: .75rem; padding: 1.25rem 1.5rem; }
    .form-card.form-step-1 .form-head h2 { font-size: 1.375rem; }
}
/* laptopuri cu ecran mic (1366x768, 1280x720) sau cu multe bare în browser */
@media (min-width: 1024px) and (max-height: 760px) {
    .site-header > .wrap { padding-top: .5rem; padding-bottom: .5rem; }
    .header-logo img { height: 2.8rem; }
    .hero:not(.is-wide) > .wrap { padding-top: 1rem; }
    .hero:not(.is-wide) h1 { font-size: 3rem; margin-top: 1rem; }
    .form-card.form-step-1 .form-head p { display: none; }
    .form-card.form-step-1 .form-body { gap: .6rem; padding: 1rem 1.375rem; }
    .form-card.form-step-1 .form-steps .step-label { margin-top: .35rem; }
}