/*
Theme Name: Merg Bine
Theme URI: https://mergbine.ro
Author: Uzina din Nori
Author URI: https://uzinadinnori.ro
Description: Spune-mi unde mergi și te duc acolo. Trasee cu STB și metrou calculate pe telefonul tău, vehiculele reale pe hartă, ora reală de sosire. Parte din rețeaua de media intelligence lixra.ro.
Version: 1.5.5
Requires at least: 6.2
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mergbine
*/

/* ————————————————————————————————— fonturi ————————————————————————————————— */

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	src: url(https://mergbine.ro/wp-content/themes/mergbine/assets/fonts/instrument-sans-latin-ext-standard-normal.woff2) format("woff2-variations"), url(https://mergbine.ro/wp-content/themes/mergbine/assets/fonts/instrument-sans-latin-ext-standard-normal.woff2) format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-display: swap;
	font-weight: 400 700;
	font-stretch: 75% 100%;
	src: url(https://mergbine.ro/wp-content/themes/mergbine/assets/fonts/instrument-sans-latin-standard-normal.woff2) format("woff2-variations"), url(https://mergbine.ro/wp-content/themes/mergbine/assets/fonts/instrument-sans-latin-standard-normal.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ————————————————————————————————— variabile ————————————————————————————————— */

:root {
	/* Identitatea mergbine.ro: verdele pinului și bleumarinul trenului din logo. */
	--verde: #00C04E;          /* verdele de marcă: butoane, pinuri, traseu */
	--bleumarin: #062C40;      /* trenul din logo: textul pe verde, vehiculele */
	--accent: #0A7A35;         /* verde pentru text și linkuri pe alb (5,5:1) */
	--accent-inchis: #075C27;
	--accent-pal: #E4F6EB;
	--buton-fond: var(--verde);
	--buton-text: var(--bleumarin); /* 6:1 pe verde; albul pe verde n-ar trece de 2,3:1 */
	--fond: #ffffff;
	--fond-2: #f3f6f7;
	--fond-3: #e6ecef;
	--text: #10222e;
	--text-2: #4a5b66;
	--text-3: #74848e;
	--linie: #d5dee3;
	--umbra: 0 6px 24px rgba(6, 30, 44, 0.14), 0 1px 3px rgba(6, 30, 44, 0.08);
	--raza: 18px;
	--raza-mica: 12px;
	--scala: 1;
	--serif: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* titlurile: aceeași familie, mai groasă, ca wordmark-ul */
	--sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--tinta: 48px;
	--tranzitie: 180ms ease;
	--semnal-fond: #062C40;   /* blocul instrucțiunii pe drum: bleumarinul trenului */
	--semnal-text: #ffffff;
	--semnal-text-2: rgba(255, 255, 255, 0.82);
	--voal: rgba(6, 30, 44, 0.42);
	color-scheme: light;
}
html[data-tema="intunecat"] {
	--accent: #43D67F;
	--accent-inchis: #7BE6A6;
	--accent-pal: #0E2A1B;
	--fond: #0d1419;
	--fond-2: #152029;
	--fond-3: #1f2c36;
	--text: #eef3f5;
	--text-2: #aebbc3;
	--text-3: #7d8c95;
	--linie: #2b3a45;
	--umbra: 0 6px 24px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.5);
	--semnal-fond: #0b3a52;
	--voal: rgba(0, 0, 0, 0.6);
	color-scheme: dark;
}
html[data-contrast="1"] {
	--accent: #05592A;
	--accent-inchis: #033F1D;
	--accent-pal: #fff;
	--buton-fond: var(--bleumarin);
	--buton-text: #fff;
	--text: #000;
	--text-2: #1a1a1a;
	--text-3: #333;
	--linie: #000;
	--fond-2: #fff;
	--fond-3: #fff;
	--semnal-fond: #000;
	--semnal-text-2: #fff;
}
html[data-tema="intunecat"][data-contrast="1"] {
	--accent: #8DF2B4;
	--accent-inchis: #B9F7D1;
	--accent-pal: #000;
	--buton-fond: #8DF2B4;
	--buton-text: #000;
	--text: #fff;
	--text-2: #f3f1ee;
	--text-3: #ddd;
	--linie: #fff;
	--fond-2: #000;
	--fond-3: #000;
	--fond: #000;
}

/* ————————————————————————————————— bază ————————————————————————————————— */

*, *::before, *::after { box-sizing: border-box; }
html {
	font-size: calc(100% * var(--scala));
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
html[data-miscare="redusa"] *, html[data-miscare="redusa"] *::before, html[data-miscare="redusa"] *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
body {
	margin: 0;
	background: var(--fond);
	color: var(--text);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
body.mb-pagina-app { overflow: hidden; height: 100dvh; }
html.no-js body.mb-pagina-app { overflow: auto; height: auto; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent-inchis); }
html[data-linkuri="1"] a { text-decoration: underline; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 0.5em; color: var(--text); }
h1 { font-size: 2rem; }
h2 { font-size: 1.4rem; margin-top: 1.6em; }
h3 { font-size: 1.1rem; margin-top: 1.2em; }
p, ul, ol, dl { margin: 0 0 1em; }
code, pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 0.92em; }
pre { background: var(--fond-2); padding: 12px 14px; border-radius: var(--raza-mica); overflow: auto; }
button { font: inherit; color: inherit; }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.mb-vizual-ascuns {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.mb-sari { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--bleumarin); color: #fff; padding: 10px 14px; border-radius: 8px; }
.mb-sari:focus { left: 8px; }
.mb-lat { max-width: 720px; margin: 0 auto; padding: 0 20px; }
html.no-js [data-js-only] { display: none; }

/* ————————————————————————————————— marca ————————————————————————————————— */

.mb-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.mb-semn { flex: none; display: block; height: 30px; width: auto; }
.mb-logo { display: block; height: 48px; width: auto; max-width: 100%; }
.mb-marca--subsol .mb-logo { height: 40px; }
.mb-incarcare__logo { margin: 0 0 6px; }
.mb-logo--mare { height: auto; width: min(320px, 78vw); }
/* Logo-ul e pe fond alb: în tema întunecată stă pe o plăcuță albă, nu pe un dreptunghi tăiat. */
html[data-tema="intunecat"] .mb-logo { background: #fff; border-radius: 14px; padding: 6px 10px; box-sizing: content-box; }
html[data-tema="intunecat"] .mb-bara .mb-marca { background: #fff; border-radius: 999px; padding: 0 10px; min-height: 44px; }

/* ————————————————————————————————— antet, subsol, pagini ————————————————————————————————— */

.mb-antet { border-bottom: 1px solid var(--linie); background: var(--fond); }
.mb-antet__rand { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.mb-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.mb-nav a { color: var(--text-2); text-decoration: none; padding: 10px 12px; border-radius: 10px; min-height: 44px; display: inline-flex; align-items: center; }
.mb-nav a:hover, .mb-nav a[aria-current] { color: var(--text); background: var(--fond-2); }

.mb-text { padding: 32px 20px 48px; }
.mb-text__titlu { font-size: 2.2rem; margin-bottom: 0.8em; }
.mb-text__corp .mb-lead { font-size: 1.2rem; color: var(--text-2); font-family: var(--serif); font-weight: 450; }
.mb-text__corp dt { font-weight: 600; margin-top: 0.8em; }
.mb-text__corp dd { margin: 0.2em 0 0 0; color: var(--text-2); }
.mb-text__corp li { margin-bottom: 0.4em; }
.mb-text__corp small { color: var(--text-3); }

.mb-subsol { border-top: 1px solid var(--linie); background: var(--fond-2); padding: 18px 0 28px; margin-top: 24px; font-size: 0.78rem; line-height: 1.45; color: var(--text-2); }
body.mb-pagina-app .mb-subsol { display: none; }
html.no-js body.mb-pagina-app .mb-subsol { display: block; }
/* în aplicație: subsolul stă la capătul ecranului de acum, sub conținut */
body.mb-pagina-app .mb-subsol--app { display: block; margin-top: 0; padding: 14px 0 calc(20px + env(safe-area-inset-bottom)); }
.mb-ecrane { display: flex; flex-direction: column; }
.mb-ecrane > .mb-ecran { flex: 1 0 auto; }
.mb-ecrane > .mb-subsol--app { flex: none; }
.mb-subsol--app .mb-lat { max-width: 560px; padding: 0 20px; }
.mb-subsol__dezvoltat { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--linie); color: var(--text-2); font-size: 0.72rem; }
.mb-subsol__jos a, .mb-subsol__dezvoltat a { color: inherit; }
.mb-subsol__linkuri .mb-link-buton { font: inherit; }
.mb-subsol__sus { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.mb-subsol__fraza { margin: 0; }
.mb-subsol__linkuri { display: flex; flex-wrap: wrap; gap: 0 14px; margin-bottom: 8px; }
.mb-subsol__linkuri a, .mb-subsol__linkuri .mb-link-buton { color: var(--text-2); background: none; border: 0; padding: 4px 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--linie); min-height: 32px; display: inline-flex; align-items: center; }
.mb-subsol__linkuri a:hover, .mb-subsol__linkuri .mb-link-buton:hover { color: var(--accent); }
.mb-subsol__jos { margin: 0; color: var(--text-3); font-size: 0.72rem; }

.mb-fara-js { padding: 32px 20px; }
.mb-fara-js .mb-linii { columns: 2; column-gap: 24px; padding-left: 18px; font-size: 0.95rem; }
.mb-fara-js .mb-statii { font-size: 0.9rem; color: var(--text-2); line-height: 1.7; }
html.js .mb-fara-js { display: none; }

/* ————————————————————————————————— aplicația: scheletul ————————————————————————————————— */

.mb-app { position: fixed; inset: 0; background: var(--fond); display: flex; flex-direction: column; overflow: hidden; }
html.no-js .mb-app { display: none; }
/* autentificat: bara de administrare WordPress (32 px; 46 px pe ecrane înguste) stă deasupra aplicației */
body.admin-bar .mb-app { top: 32px; }
@media (max-width: 782px) { body.admin-bar .mb-app { top: 46px; } }

.mb-incarcare {
	position: absolute; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center;
	background: var(--fond); padding: 24px; text-align: center;
}
.mb-incarcare[hidden] { display: none; }
.mb-incarcare__inauntru { width: min(360px, 100%); display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mb-incarcare__text { font-family: var(--serif); font-size: 1.35rem; margin: 8px 0 0; }
.mb-incarcare__hook { margin: 10px auto 0; max-width: 30ch; font-size: 1rem; line-height: 1.4; color: var(--text-2, inherit); opacity: .85; }
.mb-incarcare__bara { width: 100%; height: 8px; accent-color: var(--accent); border-radius: 999px; overflow: hidden; }
.mb-incarcare__pas { margin: 0; color: var(--text-3); font-size: 0.9rem; min-height: 1.4em; }

.mb-bara { flex: none; display: flex; align-items: center; gap: 8px; padding: max(8px, env(safe-area-inset-top)) 12px 6px; background: var(--fond); }
.mb-bara .mb-marca { min-width: var(--tinta); min-height: var(--tinta); justify-content: center; }
.mb-bara__spatiu { flex: 1; }
.mb-buton-rotund { flex: none; width: var(--tinta); height: var(--tinta); border-radius: 50%; border: 0; background: var(--fond-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); }
.mb-buton-rotund:hover { background: var(--fond-3); }
.mb-buton-rotund[hidden] { display: none; }
.mb-buton-rotund--mic { width: 44px; height: 44px; }

.mb-ecrane { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.mb-ecran[hidden] { display: none; }
.mb-ecran__corp { max-width: 560px; margin: 0 auto; padding: 4px 20px calc(40px + env(safe-area-inset-bottom)); }

/* ————————————————————————————————— texte și butoane comune ————————————————————————————————— */

.mb-titlu { font-size: clamp(1.8rem, 7.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin: 18px 0 18px; }
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; } /* titlurile primesc focusul doar pentru cititorul de ecran */
.mb-titlu--loc { margin: 4px 0 10px; overflow-wrap: anywhere; }
.mb-titlu--cai { font-size: clamp(1.5rem, 6vw, 2rem); margin: 14px 0 4px; overflow-wrap: anywhere; }
.mb-supratitlu { margin: 22px 0 0; color: var(--text-2); font-weight: 600; font-size: 1.05rem; }
.mb-sub { margin: 0 0 6px; color: var(--text-2); }
.mb-text-mare { font-size: 1.12rem; color: var(--text-2); margin: 0 0 24px; }
.mb-eticheta { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 28px 0 10px; font-weight: 700; }
.mb-subtitlu { font-family: var(--sans); font-size: 1.15rem; letter-spacing: -0.01em; margin: 26px 0 12px; }
.mb-sfat { margin: 22px 0 0; color: var(--text-2); font-size: 0.98rem; }
.mb-nota-mica { margin: 14px 2px 0; color: var(--text-3); font-size: 0.85rem; }
.mb-asteapta { margin: 28px 0; font-size: 1.15rem; color: var(--text-2); }
.mb-mesaj { margin: 22px 0; font-size: 1.1rem; }

.mb-buton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; background: var(--buton-fond); color: var(--buton-text); font-weight: 700; border-radius: 999px; padding: 0 20px; min-height: var(--tinta); cursor: pointer; font-size: 1rem; text-decoration: none; }
.mb-buton:hover { filter: brightness(0.96); }
.mb-buton--secundar { background: var(--fond-2); color: var(--text); box-shadow: inset 0 0 0 2px var(--linie); }
.mb-buton--tert { background: none; color: var(--accent); box-shadow: none; }
.mb-buton--tert[aria-pressed="true"] { color: var(--accent-inchis); }
.mb-buton--mare { min-height: 58px; font-size: 1.1rem; width: 100%; border-radius: 18px; }
.mb-buton--mic { min-height: 44px; padding: 0 14px; font-size: 0.92rem; }
.mb-buton[hidden] { display: none; }
.mb-butoane { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; }
.mb-butoane--sus { margin: 0 0 4px; }
.mb-link-buton { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0; border: 0; background: none; color: var(--accent); font-weight: 600; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent) 35%, transparent); text-underline-offset: 3px; cursor: pointer; font-size: 1rem; }
.mb-link-buton:hover { color: var(--accent-inchis); }
.mb-pe-harta { margin: 16px 0 0; }

/* ————————————————————————————————— pasul 1: unde ești ————————————————————————————————— */

.mb-locatie { padding-top: 6vh; }
.mb-locatie__semn { width: 84px; height: 84px; border-radius: 50%; background: var(--accent-pal); color: var(--accent); display: flex; align-items: center; justify-content: center; }

/* ————————————————————————————————— pasul 2: căutarea ————————————————————————————————— */

.mb-origine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 14px; background: var(--fond-2); border-radius: 16px; padding: 6px 8px 6px 14px; margin: 4px 0 0; }
.mb-origine[hidden] { display: none; }
.mb-origine__text { display: flex; align-items: center; gap: 8px; margin: 0; min-height: 44px; font-size: 0.98rem; }
.mb-origine__text svg { flex: none; color: var(--accent); }
.mb-origine__actiuni { display: flex; flex-wrap: wrap; gap: 0 14px; margin: 0; }
.mb-origine__actiuni .mb-link-buton { font-size: 0.95rem; }

.mb-cautare { display: flex; align-items: center; gap: 8px; background: var(--fond); border: 2px solid var(--linie); border-radius: 18px; padding: 5px 5px 5px 18px; min-height: 64px; transition: border-color var(--tranzitie), box-shadow var(--tranzitie); }
.mb-cautare:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-pal); }
.mb-cautare__camp { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 1.2rem; min-height: 48px; outline: none; color: var(--text); }
.mb-cautare__camp::placeholder { color: var(--text-3); }
.mb-cautare__camp::-webkit-search-cancel-button { cursor: pointer; }
.mb-cautare__trimite { flex: none; width: 52px; height: 52px; border: 0; border-radius: 14px; background: var(--buton-fond); color: var(--buton-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mb-cautare__voce { flex: none; width: 44px; height: 48px; margin-right: -4px; border: 0; border-radius: 14px; background: none; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.mb-cautare__voce[hidden] { display: none; }
.mb-cautare__voce--activ { background: var(--accent-pal); color: var(--accent); animation: mb-asculta 1.2s ease-in-out infinite; }
@keyframes mb-asculta { 50% { box-shadow: 0 0 0 6px var(--accent-pal); } }
@media (prefers-reduced-motion: reduce) { .mb-cautare__voce--activ { animation: none; } }

.mb-nota { margin: 12px 0 0; background: var(--fond-2); border-radius: var(--raza-mica); padding: 10px 14px; font-size: 0.98rem; color: var(--text); }
.mb-nota[hidden] { display: none; }
.mb-nota .mb-link-buton { min-height: 36px; }

.mb-lista { list-style: none; margin: 0; padding: 0; }
.mb-lista[hidden] { display: none; }
.mb-lista li { display: flex; align-items: center; border-bottom: 1px solid var(--linie); }
.mb-lista li:last-child { border-bottom: 0; }
.mb-rezultate { margin-top: 10px; }
.mb-rand { flex: 1; min-width: 0; display: flex; align-items: center; gap: 14px; text-align: left; background: none; border: 0; padding: 10px 6px; min-height: 60px; cursor: pointer; color: var(--text); border-radius: 12px; }
.mb-rand:hover { background: var(--fond-2); }
.mb-rand > svg { flex: none; color: var(--text-3); }
.mb-rand--static { cursor: default; }
.mb-rand--static:hover { background: none; }
.mb-rand__text { display: flex; flex-direction: column; min-width: 0; }
.mb-rand__nume { font-weight: 650; font-size: 1.05rem; overflow-wrap: anywhere; }
.mb-rand__detaliu { font-size: 0.86rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-rand__detaliu:empty { display: none; }
.mb-rand__sterge { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--text-3); border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mb-rand__sterge:hover { background: var(--fond-2); color: var(--text); }
.mb-lista--mica .mb-rand { min-height: 48px; padding: 6px 2px; }

.mb-gol[hidden] { display: none; }
.mb-locuri { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-loc { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; max-width: 100%; padding: 0 16px 0 13px; border-radius: 999px; border: 2px solid var(--linie); background: var(--fond); color: var(--text); font-weight: 650; cursor: pointer; font-size: 0.98rem; }
.mb-loc span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-loc svg { flex: none; color: var(--accent); }
.mb-loc:hover { border-color: var(--accent); }
.mb-loc--gol { border-style: dashed; color: var(--text-2); font-weight: 600; }
.mb-loc--gol svg { color: var(--text-3); }

.mb-retea { margin: 14px 0 0; display: inline-block; background: var(--text); color: var(--fond); border-radius: 999px; padding: 6px 12px; font-size: 0.85rem; font-weight: 600; }
.mb-retea[hidden] { display: none; }

/* ————————————————————————————————— pasul 3: confirmarea ————————————————————————————————— */

.mb-confirmare__detaliu { margin: 0 0 14px; color: var(--text-2); font-size: 1.05rem; }
.mb-confirmare__statie, .mb-confirmare__aproape { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; background: var(--accent-pal); color: var(--text); border-radius: 14px; padding: 12px 14px; font-size: 1rem; }
.mb-confirmare__statie svg { flex: none; color: var(--accent); margin-top: 1px; }
.mb-confirmare__aproape { background: var(--fond-2); }
.mb-confirmare__de { margin: 0 0 10px; color: var(--text-2); }
.mb-confirmare__aproape[hidden] { display: none; }

/* ————————————————————————————————— pasul 4: căile ————————————————————————————————— */

.mb-cai { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.mb-cale { border: 2px solid var(--linie); border-radius: 20px; background: var(--fond); overflow: hidden; transition: border-color var(--tranzitie); }
.mb-cale:hover, .mb-cale:focus-within { border-color: var(--accent); }
.mb-cale--prima { border-color: color-mix(in srgb, var(--verde) 70%, var(--linie)); }
.mb-cale__alege { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; text-align: left; border: 0; background: none; padding: 16px 52px 14px 16px; cursor: pointer; color: var(--text); }
.mb-cale__alege:focus-visible { outline-offset: -4px; border-radius: 18px; }
.mb-cale__eticheta { font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 800; color: var(--accent); background: var(--accent-pal); padding: 4px 9px; border-radius: 7px; }
.mb-cale__sosire { font-size: 1.15rem; color: var(--text-2); }
.mb-cale__sosire strong { font-size: 1.75rem; color: var(--text); letter-spacing: -0.02em; font-weight: 750; }
.mb-cale__durata { color: var(--text-2); }
.mb-cale__vine { font-size: 0.98rem; line-height: 1.4; color: var(--text); }
.mb-cale__vine .mb-badge { vertical-align: 2px; margin-left: 2px; }
/* sub „vine în …”: cât de plin e și cât schimbă traficul ora (1.3.7) */
.mb-cale__stare { display: flex; flex-wrap: wrap; gap: 2px 14px; margin-top: -2px; font-size: 0.88rem; color: var(--text-2); }
.mb-cale__stare[hidden] { display: none; }
.mb-ocupare { display: inline-flex; align-items: center; gap: 6px; }
.mb-ocupare i { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--text-3); }
.mb-ocupare[data-treapta="1"] i { background: #0A7A35; }
.mb-ocupare[data-treapta="2"] i { background: #C98A00; }
.mb-ocupare[data-treapta="3"] i { background: #C0392B; }
.mb-trafic--lent { color: #A33A12; font-weight: 600; }
html[data-tema="intunecat"] .mb-trafic--lent { color: #FFA07A; }
/* limba (1.4.0): butonul din bară și panoul cu saluturi */
.mb-bara__limba { position: relative; }
.mb-bara__cod { position: absolute; right: -4px; bottom: -3px; min-width: 20px; padding: 1px 5px; border-radius: 999px; background: var(--bleumarin, #062C40); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 1.35; text-align: center; white-space: nowrap; }
.mb-bara__cod:empty { display: none; }
.mb-saluturi { list-style: none; margin: 4px 0 12px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mb-saluturi li { animation: mb-salut-intra 420ms ease-out both; animation-delay: calc(var(--i) * 90ms); }
@keyframes mb-salut-intra { from { opacity: 0; transform: translateY(8px) scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .mb-saluturi li { animation: none; } }
:root[data-miscare="redusa"] .mb-saluturi li { animation: none; }
.mb-salut { width: 100%; min-height: 72px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 10px 14px; border-radius: 16px; border: 2px solid var(--linie); background: var(--fond); color: var(--text); cursor: pointer; text-align: left; }
.mb-salut:hover, .mb-salut:focus-visible { border-color: var(--accent); }
.mb-salut--activ { border-color: color-mix(in srgb, var(--verde) 70%, var(--linie)); background: var(--fond-2); }
.mb-salut__salut { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.01em; }
.mb-salut__nume { font-size: 0.85rem; color: var(--text-2); }
.mb-tarif { margin: 2px 0 0; font-size: 0.88rem; color: var(--text-2); }
.mb-tarif strong { color: var(--text); }
.mb-cale__sageata { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--text-3); }
.mb-cale__alerta { font-size: 0.85rem; color: #8a5a00; background: #fff4d6; padding: 3px 8px; border-radius: 6px; }
.mb-cale__alerta[hidden] { display: none; }
.mb-cale__pasi-buton { display: block; width: 100%; border: 0; border-top: 1px solid var(--linie); background: var(--fond-2); min-height: 46px; font-weight: 650; color: var(--text-2); cursor: pointer; font-size: 0.95rem; }
.mb-cale__pasi-buton:hover { color: var(--text); }
.mb-cale__pasi { padding: 4px 16px 14px; background: var(--fond-2); }
.mb-cale__pasi[hidden] { display: none; }

.mb-lant { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-weight: 650; }
.mb-lant__linie { display: inline-block; background: var(--c, var(--accent)); color: #fff; padding: 3px 9px; border-radius: 7px; font-size: 0.98rem; min-width: 36px; text-align: center; text-shadow: 0 0 2px rgba(0,0,0,0.35); }
.mb-lant__mers { color: var(--text-2); font-weight: 500; }
.mb-lant__sageata { color: var(--text-3); }
.mb-badge { display: inline-block; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--fond-3); color: var(--text-2); white-space: nowrap; }
.mb-badge--live { background: #0A7A35; color: #fff; }
.mb-pasi { margin: 10px 0 0; padding-left: 20px; font-size: 0.95rem; color: var(--text-2); }
.mb-pasi li { margin-bottom: 8px; }

/* ————————————————————————————————— pasul 5: pe drum ————————————————————————————————— */

.mb-semnal { background: var(--semnal-fond); color: var(--semnal-text); }
.mb-semnal__inauntru { max-width: 560px; margin: 0 auto; padding: 18px 20px 20px; }
.mb-calatorie__cap { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 8px; min-height: 22px; }
.mb-semnal .mb-badge { background: rgba(255, 255, 255, 0.16); color: var(--semnal-text); }
.mb-semnal .mb-badge--live { background: var(--verde); color: var(--bleumarin); }
.mb-calatorie__instructiune { font-family: var(--serif); font-size: clamp(1.6rem, 6.8vw, 2.1rem); line-height: 1.15; margin: 0 0 6px; color: var(--semnal-text); letter-spacing: -0.02em; }
.mb-calatorie__instructiune:focus { outline: none; }
.mb-calatorie__detaliu { color: var(--semnal-text-2); margin: 0; font-size: 1.02rem; }
.mb-calatorie[data-stare="ASTEPT"] .mb-calatorie__instructiune, .mb-calatorie[data-stare="COBOR_LA_SCHIMBARE"] .mb-calatorie__instructiune, .mb-calatorie[data-stare="AM_AJUNS"] .mb-calatorie__instructiune { color: var(--verde); }
html[data-contrast="1"] .mb-calatorie .mb-calatorie__instructiune { color: #fff; }
.mb-calatorie__butoane { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; }
.mb-calatorie__alerta { font-size: 0.85rem; color: #4a3200; background: #ffd86b; padding: 3px 8px; border-radius: 6px; }
.mb-calatorie__alerta[hidden] { display: none; }

.mb-intreb { margin-top: 22px; background: var(--accent-pal); border-radius: 20px; padding: 16px 18px 18px; }
.mb-intreb[hidden], .mb-intreb-link[hidden] { display: none; }
.mb-intreb__titlu { margin: 0; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; }
.mb-intreb__sub { margin: 2px 0 14px; color: var(--text-2); font-size: 1.02rem; }
.mb-intreb__butoane { display: flex; flex-wrap: wrap; gap: 10px; }
.mb-intreb__butoane .mb-buton { flex: 1 1 140px; min-height: 52px; }
.mb-intreb-link { margin: 18px 0 0; }
.mb-acum { margin: 4px 0 22px; background: var(--accent-pal); border-radius: 20px; padding: 16px 18px 18px; }
.mb-acum__salut { margin: 0; color: var(--text-2); font-size: .95rem; }
.mb-acum__titlu { margin: 2px 0 6px; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; }
.mb-acum__vine { margin: 0 0 14px; font-size: 1.05rem; line-height: 1.4; }
.mb-acum .mb-buton { width: 100%; }
.mb-reclama[hidden] { display: none; }
.mb-reclama__eticheta { margin: 0 0 6px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.mb-reclama__link { display: flex; gap: 12px; align-items: center; color: var(--text); text-decoration: none; padding: 12px; border: 1px solid var(--linie); border-radius: 16px; }
.mb-reclama__img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.mb-reclama__text { font-weight: 650; line-height: 1.35; }
.mb-unelte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.mb-unelte .mb-buton { flex: 1 1 auto; }
.mb-pasi-drum { margin-top: 10px; }
.mb-pasi-drum[hidden] { display: none; }

/* ————————————————————————————————— straturile: harta, panourile ————————————————————————————————— */

.mb-strat-harta { position: absolute; inset: 0; z-index: 40; background: var(--fond-2); }
.mb-strat-harta[hidden] { display: none; }
#mb-harta, #mb-harta.maplibregl-map { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--fond-2); } /* id: peste .maplibregl-map{position:relative} */
.mb-strat-harta__bara { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) 12px 10px; pointer-events: none; }
.mb-strat-harta__bara > * { pointer-events: auto; }
.mb-strat-harta__bara .mb-buton-rotund { background: var(--fond); box-shadow: var(--umbra); }
.mb-strat-harta__titlu { margin: 0; background: var(--fond); box-shadow: var(--umbra); border-radius: 999px; padding: 0 16px; line-height: 44px; font-weight: 700; max-width: calc(100% - 70px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-strat-harta__stare { position: absolute; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2; margin: 0; background: var(--text); color: var(--fond); border-radius: 999px; padding: 10px 18px; font-weight: 600; width: max-content; max-width: calc(100% - 32px); text-align: center; box-shadow: var(--umbra); }
.mb-strat-harta__stare[hidden] { display: none; }

.mb-voal { position: absolute; inset: 0; z-index: 45; background: var(--voal); }
.mb-voal[hidden] { display: none; }
.mb-panou { position: absolute; left: 0; right: 0; bottom: 0; z-index: 50; background: var(--fond); border-radius: 22px 22px 0 0; box-shadow: var(--umbra); padding: 16px 18px calc(18px + env(safe-area-inset-bottom)); max-height: 86dvh; overflow: auto; }
.mb-panou[hidden] { display: none; }
.mb-panou:focus { outline: none; }

.mb-banner { position: absolute; left: 12px; right: 12px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; background: var(--text); color: var(--fond); border-radius: var(--raza-mica); padding: 12px 16px; box-shadow: var(--umbra); }
.mb-banner[hidden] { display: none; }
.mb-banner p { margin: 0 0 8px; }
.mb-banner p:last-child { margin: 0; }
.mb-banner .mb-buton { margin: 4px 8px 0 0; }
.mb-banner .mb-buton--secundar { background: transparent; color: var(--fond); box-shadow: inset 0 0 0 2px currentColor; }
.mb-acord { position: absolute; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 35; background: var(--fond); border-radius: var(--raza-mica); padding: 12px 14px; box-shadow: var(--umbra), 0 0 0 1px var(--linie); font-size: 0.95rem; }
.mb-acord p { margin: 0 0 10px; }
.mb-acord__butoane { display: flex; gap: 8px; }
.mb-acord[hidden], .mb-app:not([data-pas="cautare"]) .mb-acord, .mb-app[data-strat] .mb-acord { display: none; }
/* cât e afișată bara de acord, conținutul căutării are loc să urce deasupra ei */
.mb-app[data-acord][data-pas="cautare"] .mb-ecran[data-ecran="cautare"] .mb-ecran__corp { padding-bottom: calc(240px + env(safe-area-inset-bottom)); }
@media (min-width: 720px) { .mb-app[data-acord][data-pas="cautare"] .mb-ecran[data-ecran="cautare"] .mb-ecran__corp { padding-bottom: 40px; } }

@media (min-width: 720px) {
	.mb-panou { left: 50%; right: auto; width: 480px; transform: translateX(-50%); bottom: 16px; border-radius: 22px; max-height: calc(100dvh - 120px); }
	.mb-banner { left: 50%; right: auto; width: 480px; transform: translateX(-50%); }
	.mb-acord { left: auto; right: 16px; width: 360px; bottom: 16px; }
	.mb-ecran__corp { padding-top: 12px; }
}

/* ————————————————————————————————— hartă: markere ————————————————————————————————— */

.maplibregl-ctrl-attrib { font-family: var(--sans); font-size: 11px; }
.maplibregl-ctrl-bottom-right { bottom: 0; }
.mb-marker { width: 22px; height: 22px; border-radius: 50%; }
/* „Ești deja aici”: harta cu tine și destinația, gluma, ajutorul pentru GPS */
.mb-deja__harta { position: relative; height: 220px; border-radius: 14px; overflow: hidden; background: var(--fond-2); border: 1px solid var(--linie); margin: 4px 0 16px; }
.mb-deja__harta[hidden] { display: none; }
.mb-deja__harta > .mb-deja__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mb-deja__mare { font-family: var(--serif); font-size: 1.3rem; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--text); }
.mb-deja__text { margin: 0 0 10px; color: var(--text-2); }
.mb-deja__ajutor { margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; background: var(--fond-2); color: var(--text-2); font-size: 0.95rem; line-height: 1.5; }
/* „Vine spre tine”: vehiculul alunecă pe bandă spre „Tu”, cu stațiile pe care le mai are */
.mb-vine { --vine-culoare: #062C40; margin: 0 0 16px; padding: 14px 16px 12px; border-radius: 14px; background: var(--fond-2); border: 1px solid var(--linie); }
.mb-vine__titlu { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.mb-vine__pista { position: relative; height: 46px; margin: 10px 30px 4px 14px; }
.mb-vine__drum, .mb-vine__parcurs { position: absolute; left: 0; top: 30px; height: 4px; border-radius: 4px; }
.mb-vine__drum { right: 0; background: var(--linie); }
.mb-vine__parcurs { width: 0; background: var(--vine-culoare); opacity: 0.55; transition: width 1s linear; }
.mb-vine__statii i { position: absolute; top: 27px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--fond); border: 2px solid var(--vine-culoare); box-sizing: border-box; }
.mb-vine__tu { position: absolute; right: -26px; top: 22px; min-width: 40px; padding: 2px 6px; border-radius: 999px; background: var(--verde); color: #062C40; font-size: 0.78rem; font-weight: 700; text-align: center; }
.mb-vine__vehicul { position: absolute; left: 0; top: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 3px; color: var(--vine-culoare); transition: left 1s linear; white-space: nowrap; }
.mb-vine__vehicul b { font-size: 0.8rem; color: var(--text); }
.mb-vine[data-live="nu"] .mb-vine__vehicul { opacity: 0.6; }
.mb-vine__sub { margin: 4px 0 0; color: var(--text-2); font-size: 0.92rem; }
.mb-vine__detalii { margin: 6px 0 0; color: var(--text-2); font-size: 0.88rem; }
.mb-vine__urmator { margin: 8px 0 0; padding-top: 8px; border-top: 1px dashed var(--linie); color: var(--text); font-size: 0.92rem; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .mb-vine__vehicul, .mb-vine__parcurs { transition: none; } }
:root[data-miscare="redusa"] .mb-vine__vehicul, :root[data-miscare="redusa"] .mb-vine__parcurs { transition: none; }
/* Harta mică de pe drum: tu, ținta și mersul; atinsă, deschide harta mare */
.mb-mini { margin: 0 0 16px; }
.mb-mini__harta { position: relative; height: 210px; border-radius: 14px; overflow: hidden; background: var(--fond-2); border: 1px solid var(--linie); cursor: pointer; }
.mb-mini__harta[hidden] { display: none; }
.mb-mini__nord { position: absolute; z-index: 2; top: 8px; left: 8px; padding: 2px 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #062C40; font-size: 0.78rem; font-weight: 700; pointer-events: none; }
.mb-mini__text { margin: 8px 2px 0; color: var(--text-2); font-size: 0.95rem; }
.mb-mini__text strong { color: var(--text); }
.mb-marker--tu { background: #1d6fe0; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(29, 111, 224, 0.25), 0 1px 4px rgba(0,0,0,0.3); }
.mb-marker--imprecis { box-shadow: 0 0 0 14px rgba(29, 111, 224, 0.15), 0 1px 4px rgba(0,0,0,0.3); }
.mb-marker--plecare, .mb-marker--destinatie { width: 26px; height: 36px; border-radius: 0; background: none; position: relative; cursor: grab; }
.mb-marker--plecare::before, .mb-marker--destinatie::before {
	content: ""; position: absolute; left: 3px; top: 0; width: 20px; height: 20px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
	background: var(--verde); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.mb-marker--plecare::before { background: var(--bleumarin); }
.mb-marker--plecare::after, .mb-marker--destinatie::after { content: ""; position: absolute; left: 9px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #fff; }

/* ————————————————————————————————— cât aștepți ————————————————————————————————— */

.mb-asteptare { padding-top: 16px; }
.mb-asteptare__inchide { position: absolute; top: 12px; right: 12px; }
.mb-asteptare__banda { margin: 0 56px 14px 0; padding: 10px 14px; background: var(--accent-pal); border-radius: 14px; font-weight: 700; font-size: 1.02rem; line-height: 1.35; }
.mb-asteptare__banda:empty { display: none; }
.mb-file { display: flex; gap: 6px; flex-wrap: nowrap; overflow-x: auto; margin: 0 52px 16px 0; scrollbar-width: none; }
.mb-file::-webkit-scrollbar { display: none; }
.mb-file[hidden] { display: none; }
.mb-fila { flex: none; border: 2px solid var(--linie); background: var(--fond); color: var(--text-2); border-radius: 999px; padding: 0 12px; min-height: 44px; font-weight: 650; cursor: pointer; font-size: 0.92rem; white-space: nowrap; }
.mb-fila[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-pal); }
.mb-bloc { margin-bottom: 18px; clear: both; }
.mb-bloc[hidden] { display: none; }
.mb-bloc__titlu { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 0 0 8px; }
.mb-bloc__nota { color: var(--text-3); font-size: 0.92rem; margin: 0; }
.mb-bloc__prin { font-size: 0.78rem; color: var(--text-3); margin: 6px 0 0; }
.mb-bloc__prin a, .mb-fapt__sursa a, .mb-setari__linkuri a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.mb-stiri { list-style: none; margin: 0; padding: 0; }
.mb-stire { padding: 4px 0 8px; border-bottom: 1px solid var(--linie); }
.mb-stire:last-child { border-bottom: 0; }
.mb-stire__titlu { display: flex; align-items: center; min-height: 44px; font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--text); text-decoration: none; line-height: 1.25; }
.mb-stire__titlu:hover { color: var(--accent); }
.mb-stire__meta { display: block; font-size: 0.82rem; color: var(--text-3); margin-top: 3px; }
.mb-joc__cap { display: flex; align-items: baseline; justify-content: space-between; }
.mb-joc__titlu { font-family: var(--serif); font-size: 1.2rem; margin: 0; }
.mb-joc__nota { color: var(--text-2); margin: 6px 0; }
/* „Știi România?”: întrebarea, patru variante, explicația; salvatele */
.mb-quiz__cat { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); }
.mb-quiz__intrebare { font-size: 1.08rem; font-weight: 600; line-height: 1.4; margin: 10px 0 12px; color: var(--text); }
.mb-quiz__variante { display: grid; gap: 8px; margin-bottom: 12px; }
.mb-quiz__varianta { text-align: left; min-height: 48px; padding: 10px 14px; border-radius: 12px; border: 2px solid var(--linie); background: var(--fond); color: var(--text); font: inherit; font-weight: 600; cursor: pointer; }
.mb-quiz__varianta:hover:not(:disabled) { border-color: var(--accent); }
.mb-quiz__varianta:disabled { cursor: default; opacity: 0.6; }
.mb-quiz__varianta--corect, .mb-quiz__varianta--corect:disabled { opacity: 1; border-color: var(--verde); background: rgba(0, 192, 78, 0.12); }
.mb-quiz__varianta--corect::after { content: " ✓"; color: var(--accent); }
.mb-quiz__varianta--gresit, .mb-quiz__varianta--gresit:disabled { opacity: 1; border-color: #b3261e; background: rgba(179, 38, 30, 0.08); }
.mb-quiz__varianta--gresit::after { content: " ✗"; color: #b3261e; }
.mb-quiz__rezultat:empty { display: none; }
.mb-quiz__rezultat { margin: 0 0 12px; }
.mb-quiz__verdict { margin: 0 0 4px; font-weight: 700; }
.mb-quiz__verdict--da { color: var(--accent); }
.mb-quiz__verdict--nu { color: #b3261e; }
:root[data-tema="intunecat"] .mb-quiz__verdict--nu, :root[data-tema="intunecat"] .mb-quiz__varianta--gresit::after { color: #ff8a80; }
.mb-quiz__fapt { margin: 0; color: var(--text-2); line-height: 1.5; }
.mb-quiz__gluma { margin: 10px 0 0; padding: 10px 12px; border-radius: 12px; background: #FFD24A; color: #062C40; font-weight: 700; }
.mb-quiz__gluma small { display: block; font-weight: 500; opacity: 0.8; margin-top: 2px; }
.mb-quiz__salvate { list-style: none; margin: 8px 0 14px; padding: 0; }
.mb-quiz__salvate li { padding: 12px 0; border-bottom: 1px solid var(--linie); }
.mb-quiz__salvate .mb-quiz__intrebare { margin: 0 0 4px; font-size: 1rem; }
.mb-quiz__raspuns { margin: 0 0 4px; font-weight: 700; color: var(--accent); }
.mb-quiz__salvate .mb-link-buton { margin-top: 6px; }
/* confetti: doar decor, peste tot ecranul, cât durează căderea */
.mb-confetti { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; }
.mb-confetti i { position: absolute; top: -16px; width: 9px; height: 14px; border-radius: 2px; animation-name: mb-confetti; animation-timing-function: cubic-bezier(0.25, 0.6, 0.45, 1); animation-fill-mode: forwards; }
@keyframes mb-confetti { to { transform: translate(var(--deriva, 0), 105vh) rotate(var(--rotire, 720deg)); } }
.mb-joc__butoane { display: flex; flex-wrap: wrap; gap: 6px; }
.mb-joc__scor { font-size: 0.82rem; color: var(--text-3); margin: 10px 0 0; }
.mb-fapt__titlu { font-family: var(--serif); font-weight: 650; font-size: 1.15rem; margin: 0 0 4px; }
.mb-fapt__text { margin: 0 0 4px; }
.mb-fapt__sursa { font-size: 0.8rem; margin: 0; }

/* ————————————————————————————————— setări ————————————————————————————————— */

.mb-setari__cap { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.mb-setari h2 { margin: 0; font-size: 1.4rem; }
.mb-setari h3 { font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); margin: 20px 0 8px; }
.mb-optiuni { display: flex; flex-wrap: wrap; gap: 8px; }
.mb-optiuni--coloana { flex-direction: column; gap: 4px; }
.mb-optiune { border: 2px solid var(--linie); background: var(--fond); color: var(--text); border-radius: 999px; padding: 0 16px; min-height: 44px; cursor: pointer; font-weight: 600; }
.mb-optiune--activa { border-color: var(--accent); color: var(--accent); background: var(--accent-pal); }
.mb-comutator { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.mb-comutator input { width: 22px; height: 22px; accent-color: var(--accent); }
.mb-setari__text { color: var(--text-2); font-size: 0.92rem; margin: 0 0 8px; }
.mb-setari__linkuri a { margin-right: 4px; }
.mb-setari .mb-lista { margin: 0 0 10px; }

/* ————————————————————————————————— salvează ruta ————————————————————————————————— */

.mb-formular { margin-top: 18px; display: flex; flex-direction: column; gap: 18px; }
.mb-camp { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; min-width: 0; }
.mb-camp__eticheta { font-weight: 650; font-size: 0.98rem; color: var(--text); padding: 0; }
.mb-camp__intrare { font: inherit; font-size: 1.15rem; min-height: 54px; border: 2px solid var(--linie); border-radius: 14px; padding: 0 14px; background: var(--fond); color: var(--text); width: 100%; }
.mb-camp__intrare:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-pal); }
.mb-camp__intrare--ora { max-width: 180px; font-variant-numeric: tabular-nums; }
.mb-camp__intrare--mic { min-height: 48px; font-size: 1rem; width: auto; }
.mb-camp--rand { flex-direction: row; align-items: center; gap: 10px; }
.mb-camp--rand[hidden] { display: none; }
.mb-zile { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.mb-zi { min-height: 48px; border-radius: 12px; border: 2px solid var(--linie); background: var(--fond); color: var(--text-2); font-weight: 700; cursor: pointer; font-size: 0.98rem; padding: 0; }
.mb-zi[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-pal); color: var(--accent); }
.mb-anunt-ruta { background: var(--fond-2); border-radius: 18px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.mb-comutator--mare { font-weight: 650; font-size: 1.05rem; }
.mb-comutator--mare svg { color: var(--accent); flex: none; }
.mb-anunt-ruta .mb-nota-mica { margin: 0; }
.mb-nota-mica[hidden] { display: none; }

/* ———————————————————————— temă întunecată ———————————————————————— */

html[data-tema="intunecat"] .mb-cale__alerta { background: #3a2d00; color: #ffd86b; }
html[data-tema="intunecat"] .mb-cale--prima { border-color: #2f6e48; }

/* ———————————————————————— contrast ridicat ———————————————————————— */

html[data-contrast="1"] .mb-cale__eticheta, html[data-contrast="1"] .mb-badge { box-shadow: inset 0 0 0 1.5px currentColor; }
html[data-contrast="1"] .mb-calatorie__alerta, html[data-contrast="1"] .mb-cale__alerta { color: #000; background: #fff; box-shadow: inset 0 0 0 1.5px #000; }
html[data-tema="intunecat"][data-contrast="1"] .mb-cale__alerta { color: #fff; background: #000; box-shadow: inset 0 0 0 1.5px #fff; }
html[data-contrast="1"] .mb-cale, html[data-contrast="1"] .mb-loc, html[data-contrast="1"] .mb-cautare, html[data-contrast="1"] .mb-zi, html[data-contrast="1"] .mb-camp__intrare { border-color: var(--text); }
html[data-contrast="1"] .mb-intreb, html[data-contrast="1"] .mb-acum { box-shadow: inset 0 0 0 2px var(--text); }
html[data-contrast="1"] .mb-semnal { border-bottom: 3px solid #fff; }
html[data-contrast="1"] :focus-visible { outline-width: 4px; }

[data-ecran="confirmare"] .mb-pe-harta { text-align: center; }
.mb-pliat { margin: 6px 0; border: 1px solid var(--linie); border-radius: 12px; padding: 10px 14px; }
.mb-pliat > summary { cursor: pointer; font-weight: 650; }
.mb-fara-js .mb-linii { columns: 1; }
.mb-origine__ajutor { display: block; color: var(--text-2); font-size: .9rem; margin-top: 2px; }

/* 1.4.0 — „pune Merg Bine pe telefon”, din prima zi */
.mb-instaleaza { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--raza-mica); background: var(--accent-pal); box-shadow: 0 0 0 1px var(--linie); font-size: 0.95rem; line-height: 1.4; }
.mb-instaleaza[hidden] { display: none; }
.mb-instaleaza__semn { color: var(--accent); padding-top: 2px; }
.mb-instaleaza__text { margin: 0; }
.mb-instaleaza__butoane { grid-column: 2; display: flex; flex-wrap: wrap; gap: 8px; }

/* 1.5.0 — paginile liniilor și ale Ilfovului (/linii/, /ilfov/) */
.mb-fir ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0 0 18px; font-size: 0.9rem; color: var(--text-2); }
.mb-fir li + li::before { content: "›"; margin: 0 8px; color: var(--text-3, var(--text-2)); }
.mb-sp .mb-text__titlu { font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 1.15; }
.mb-sp h2 { margin-top: 1.6em; }
.mb-sp h2 small { font-weight: 500; color: var(--text-2); font-size: 0.75em; }
.mb-sp-cta { margin: 20px 0 8px; }
.mb-sp-cta .mb-buton { display: flex; text-decoration: none; text-align: center; padding: 12px 22px; line-height: 1.3; }
.mb-sp-cuprins ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.mb-sp-cuprins a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--accent-pal); text-decoration: none; font-size: 0.92rem; }
.mb-sp-linii, .mb-sp-loc { list-style: none; padding: 0; margin: 0; }
.mb-sp-linii li, .mb-sp-loc li { margin: 0; border-bottom: 1px solid var(--linie); padding: 0; }
.mb-sp-linie, .mb-sp-loc a { display: flex; gap: 12px; align-items: baseline; padding: 10px 2px; text-decoration: none; color: inherit; }
.mb-sp-linie strong, .mb-sp-loc strong { min-width: 3.2em; color: var(--accent); }
.mb-sp-linie span, .mb-sp-loc span { color: var(--text-2); }
.mb-sp-linii small { display: block; margin: -6px 0 8px calc(3.2em + 14px); color: var(--text-2); }
.mb-sp-program { padding-left: 1.1em; }
.mb-sp-statii { columns: 2 220px; column-gap: 28px; padding-left: 1.6em; }
.mb-sp-statii li { break-inside: avoid; }
.mb-sp-sens { margin-top: 8px; }
.mb-bara__cod:lang(ne), .mb-bara__cod:lang(hi), .mb-bara__cod:lang(si) { font-size: 0.74rem; font-weight: 600; line-height: 1.2; padding: 1px 5px 2px; }

/* 1.5.3 — butonul „Instalează” din bară și pașii de instalare */
.mb-bara__instaleaza { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 14px 0 10px; border: 0; border-radius: 999px; background: var(--buton-fond); color: var(--buton-text); font: inherit; font-weight: 700; font-size: 0.92rem; cursor: pointer; white-space: nowrap; }
.mb-bara__instaleaza[hidden] { display: none; }
.mb-bara__instaleaza svg { flex: none; }
.mb-pasi-instalare { counter-reset: pas; list-style: none; padding: 0; margin: 8px 0 16px; }
.mb-pasi-instalare li { counter-increment: pas; position: relative; padding: 10px 0 12px 46px; border-bottom: 1px solid var(--linie); font-size: 1.05rem; line-height: 1.45; }
.mb-pasi-instalare li::before { content: counter(pas); position: absolute; left: 0; top: 8px; width: 32px; height: 32px; border-radius: 50%; background: var(--accent-pal); color: var(--accent); font-weight: 800; display: grid; place-items: center; }
.mb-semn-inline { display: inline-flex; vertical-align: -4px; padding: 2px; margin: 0 2px; border-radius: 6px; background: var(--accent-pal); color: var(--accent); }
.mb-instalare .mb-buton--mare { text-decoration: none; }
@media (max-width: 360px) { .mb-bara__instaleaza span { display: none; } .mb-bara__instaleaza { padding: 0 10px; } }