:root{
  --ink:#0b0c0c; --muted:#505a5f; --bg:#f3f2f1; --panel:#ffffff; --border:#b1b4b6;
  --accent:#1d70b8; --success:#00703c; --warning:#d4351c; --focus:#fd0;
  --safe-bottom: env(safe-area-inset-bottom, 0);
}

/* reset mic & box sizing consecvent */
*, *::before, *::after { box-sizing:border-box; }

html,body{ background:var(--bg); color:var(--ink); }
.container-narrow{ max-width:780px }

/* Masthead */
.masthead{ background:#0b0c0c; color:#fff }
.masthead a{ color:#fff; text-decoration:none }
.masthead .brand{ display:flex; align-items:center; gap:.5rem; font-weight:700; letter-spacing:.2px }
.brand .lock{ display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.12) }

/* ribbon */
.secure-ribbon{ background:linear-gradient(90deg, rgba(0,112,60,.08), rgba(29,112,184,.08)); border-bottom:1px solid rgba(0,0,0,.06) }
.secure-ribbon .item{ display:flex; align-items:center; gap:.5rem; color:var(--muted) }

/* panels */
.panel{ background:var(--panel); border:1px solid var(--border); border-radius:.5rem; padding:1.25rem }
.panel h1,.panel h2{ font-weight:700 }
.muted{ color:var(--muted) }

/* buttons */
.btn-primary{ background-color:var(--success); border-color:var(--success) }
.btn-primary:focus,.btn-outline-dark:focus{ box-shadow:0 0 0 3px var(--focus), 0 0 0 6px rgba(0,0,0,.2) }
.btn-outline-dark{ border-color:#cdd0d3; color:#0b0c0c }
.btn-outline-dark:hover{ background:#f3f5f7 }
.btn-wide{ min-width:260px }

/* progress */
.top-progress{ height:6px; background:#e5e7eb }
.top-progress-bar{ height:6px; width:0%; background:linear-gradient(90deg, var(--success), #1a936f); transition:width .35s ease }

/* pills */
.pill{ width:36px; height:36px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center }
.pill-secure{ background:rgba(0,112,60,.12); color:var(--success) }
.pill-time{ background:rgba(29,112,184,.12); color:var(--accent) }
.pill-mand{ background:rgba(253,224,71,.4); color:#8a6d00 }
.pill-doc{ background:rgba(29,112,184,.12); color:var(--accent) }
.pill-camera{ background:rgba(0,112,60,.12); color:var(--success) }

/* badge/tag */
.tag{ font-size:.8rem; border:1px solid #dde1e4; border-radius:999px; padding:.15rem .5rem; color:#3a4248; background:#fafbfc }

/* form: controllere compacte cu lățime fixă */
.control-shell{
  display:inline-flex; align-items:center; gap:.5rem;
  background:#fff; border:1px solid var(--border); border-radius:.5rem;
  padding:.25rem .5rem;
}
.control-shell:focus-within{ box-shadow:0 0 0 3px var(--focus); outline:0 }

.flag-uk{
  width:22px; height:16px; display:block; border-radius:2px; overflow:hidden; flex:0 0 auto;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 42'><rect width='60' height='42' fill='%2301247A'/><g stroke='%23fff' stroke-width='6'><path d='M0,0 L60,42 M60,0 L0,42'/><path d='M30,0 v42 M0,21 h60'/></g><g stroke='%23C8102E' stroke-width='4'><path d='M0,0 L60,42 M60,0 L0,42'/><path d='M30,0 v42 M0,21 h60'/></g></svg>") center/cover no-repeat;
}

/* INPUT-urile (telefon + referință) — slim */
.form-control.fit{
  width:auto !important; display:inline-block !important; border:0 !important; box-shadow:none !important;
  padding:.1rem 0 !important; background:transparent !important;
  font-variant-numeric:tabular-nums;
  font-family:ui-monospace, Menlo, Consolas, monospace;
  font-size:16px; /* evită zoom pe iOS */
  text-align:center; line-height:1.1; height:1.8rem; min-height:0;
}
.fit-11ch{ width:11ch !important; }
.fit-5ch { width:5ch  !important; }

/* centrare */
.center-line{ display:flex; justify-content:center; }
.center-text{ text-align:center !important; }

/* spațiere extra pt nota cookies */
.cookie-note{ margin-top:1rem !important; }

.form-label{ font-weight:600 }
.otp-input{ letter-spacing:.35em }
.invalid-feedback{ display:block }
footer{ color:#6b7280 }

@media (max-width:576px){ .panel{ padding:1rem } }

/* --- Vehicle number plate style --- */
.plate{
  display:inline-flex; align-items:center; padding:2px 10px;
  background:#FFD300; border:2px solid #222; border-radius:6px;
  font-weight:800; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  letter-spacing:1px; color:#111; text-transform:uppercase; line-height:1.2;
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.08);
  user-select:text;
}

/* doc cards (passport/proof etc.) */
.btn-icon{ width:40px; height:40px; border-radius:999px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.badge-soft{ background:rgba(0,0,0,.06); color:#333; border:1px solid rgba(0,0,0,.08); }
.doc-card{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.doc-left{ display:flex; align-items:flex-start; gap:12px; min-width:0; }
.doc-text{ min-width:0; }
.doc-title-row{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; }
.doc-title-row .badge{ transform:translateY(-1px); } /* aliniază optic cu titlul */

/* anti-zoom iOS pe câmpurile tale – cu prioritate */
#nin,
#share_code {
  font-size: 16px !important;
  line-height: 1.2 !important; /* mic ajutor contra reflow */
}


/* îmbunătățește “alunecarea” pe mobil */
html, body{ overscroll-behavior: contain; }

/* imagini în loc de icon (fără cerc albastru) */
.pill-img-wrap{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
  width:auto !important; height:auto !important;
  display:inline-flex; align-items:center; justify-content:center;
}
.pill-img{
  width:28px; height:28px; border-radius:6px; object-fit:cover; display:block;
}

/* respectă safe area jos (iPhone) când ai bară fixă */
.footer-safe{ padding-bottom:calc(12px + var(--safe-bottom)); }

/* nu lăsa grupul să facă wrap */
.input-group.dbs-nationality-group { flex-wrap: nowrap; }

/* lasă inputul să se micșoreze lângă badge (iOS/Safari fix) */
.input-group.dbs-nationality-group .form-control {
  flex: 1 1 auto;
  min-width: 0;       /* important! */
}

/* badge fix: nu se lărgește, rămâne pe același rând */
.input-group.dbs-nationality-group .input-group-text {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding-left: .5rem;
  padding-right: .5rem;
}

/* dimensiune steag + aliniere frumoasă */
#nationalityFlagBadge {
  font-size: 1.25rem;   /* puțin mai mare */
  line-height: 1;       /* îl centrează vertical */
}