/* ==========================================================================
   DESIGN SYSTEM & VARIABLES — permisul-inapoi.ro
   ========================================================================== */
:root {
    /* Fonts */
    --font-primary: 'Inter', sans-serif;
    --font-headers: 'Outfit', sans-serif;

    /* Light Theme (Trusted, Clean Legal Brand) */
    --hue: 220;
    --bg-primary: hsl(var(--hue), 25%, 97%);
    --bg-surface: hsl(0, 0%, 100%);
    --bg-surface-glass: hsla(var(--hue), 30%, 100%, 0.8);
    --border-color: hsl(var(--hue), 20%, 88%);
    --text-primary: hsl(var(--hue), 40%, 18%);
    --text-muted: hsl(var(--hue), 15%, 45%);
    
    /* Branding Colors */
    --primary: hsl(222, 65%, 43%); /* Navy-Blue */
    --primary-light: hsl(222, 65%, 53%);
    --primary-glow: hsla(222, 65%, 43%, 0.15);
    --accent: hsl(38, 90%, 52%); /* Gold/Amber — pe FUNDAL (dots, inele, badge-uri) */
    --accent-light: hsl(38, 90%, 62%);
    --accent-text: hsl(38, 90%, 33%); /* Auriu pentru TEXT pe alb — trece AA (4.69:1) */
    --success: hsl(142, 65%, 38%); /* Balanced green — pe FUNDAL/borduri */
    --success-light: hsl(142, 65%, 95%);
    --success-text: hsl(142, 65%, 30%); /* Verde pentru TEXT — trece AA pe alb (5.12) și pe success-light (4.77) */
    --warning: hsl(28, 85%, 50%); /* Amber warning */
    --danger: hsl(350, 70%, 48%); /* Coral red */
    --danger-light: hsl(350, 70%, 95%);
    
    /* Effects & Layout */
    --shadow-sm: 0 2px 8px hsla(var(--hue), 30%, 15%, 0.04);
    --shadow-md: 0 8px 24px hsla(var(--hue), 30%, 15%, 0.08);
    --shadow-lg: 0 16px 48px hsla(var(--hue), 35%, 12%, 0.12);
    --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);
    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 24px;
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    
    /* Glow Positions */
    --glow-color-1: hsla(222, 60%, 40%, 0.08);
    --glow-color-2: hsla(38, 90%, 50%, 0.06);
}

/* Dark Theme Variables */
body.dark-theme {
    --bg-primary: hsl(224, 25%, 8%);
    --bg-surface: hsl(224, 22%, 12%);
    --bg-surface-glass: hsla(224, 22%, 12%, 0.8);
    --border-color: hsl(224, 15%, 20%);
    --text-primary: hsl(224, 20%, 94%);
    --text-muted: hsl(224, 12%, 68%);
    
    --primary: hsl(222, 85%, 60%);
    --primary-light: hsl(222, 85%, 70%);
    --primary-glow: hsla(222, 85%, 60%, 0.25);
    --accent: hsl(38, 95%, 55%);
    --accent-text: var(--accent); /* pe dark, auriul aprins trece (8.77:1) */
    --success-text: var(--success); /* pe dark, verdele actual trece — păstrăm */

    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 30px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 16px 60px rgba(0, 0, 0, 0.5);
    
    --glow-color-1: hsla(222, 70%, 50%, 0.15);
    --glow-color-2: hsla(38, 90%, 50%, 0.08);
    --danger-light: hsl(350, 40%, 15%);
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* ambient backgrounds */
.bg-decor-grid {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(var(--border-color) 1px, transparent 1px), 
        radial-gradient(var(--border-color) 1px, transparent 1px);
    background-size: 40px 40px;
    background-position: 0 0, 20px 20px;
    opacity: 0.35;
    z-index: -3;
    pointer-events: none;
}

.bg-decor-glow-1 {
    position: fixed;
    top: -20%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--glow-color-1) 0%, transparent 70%);
    z-index: -2;
    filter: blur(80px);
    pointer-events: none;
    animation: pulse-slow 15s infinite alternate;
}

.bg-decor-glow-2 {
    position: fixed;
    bottom: -20%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: radial-gradient(circle, var(--glow-color-2) 0%, transparent 70%);
    z-index: -2;
    filter: blur(80px);
    pointer-events: none;
    animation: pulse-slow 20s infinite alternate-reverse;
}

@keyframes pulse-slow {
    0% { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.1) translate(3%, 5%); }
}

/* ==========================================================================
   TYPOGRAPHY & UTILITIES
   ========================================================================== */
h1, h2, h3, h4 {
    font-family: var(--font-headers);
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0.5rem;
}

p {
    margin-bottom: 1rem;
    color: var(--text-muted);
}

.accent {
    color: var(--accent);
}

.margin-top-lg { margin-top: 1.5rem; }
.margin-top-xl { margin-top: 2.5rem; }

/* ==========================================================================
   HEADER
   ========================================================================== */
.app-header {
    background-color: var(--bg-surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color var(--transition-fast), border-color var(--transition-fast), transform 0.2s ease;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-title {
    font-family: var(--font-headers);
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

/* === Antet „Contest PV" — emblemă-sigiliu + nume + atribuire === */
.brand-logo { text-decoration: none; min-width: 0; }   /* min-width:0 => permite shrink pe mobil */
.brand-text { min-width: 0; }                            /* astfel atribuirea se trunchiază cu „…" */
.header-meta { flex: 0 0 auto; }                         /* butonul de temă rămâne mereu vizibil */

/* Emblema reală (logo-source.jpg) încadrată ca sigiliu oficial. */
/* JPEG pătrat cu fundal alb → cerc + object-fit:cover taie colțurile albe. */
.brand-seal {
    position: relative;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4px var(--primary-glow), var(--shadow-sm);
    transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}
.brand-seal img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}
.brand-logo:hover .brand-seal {
    transform: scale(1.04);
    box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 5px var(--primary-glow), var(--shadow-md);
}
/* Pe dark: discul alb citește ca o monedă/sigiliu presat (inel AURIU fix, nu --primary). */
body.dark-theme .brand-seal {
    box-shadow: 0 0 0 1.5px var(--accent), 0 0 0 4px var(--primary-glow),
        inset 0 0 0 1px rgba(0, 0, 0, 0.05), 0 2px 10px rgba(0, 0, 0, 0.45);
}

/* „PV" auriu = semnătura de brand. */
.brand-pv { color: var(--accent-text); }

/* Atribuirea asociației, pe un singur rând. */
.brand-attrib {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    letter-spacing: 0.2px;
    margin-top: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 420px;
}
.brand-attrib strong { color: var(--primary); font-weight: 700; }

/* Pe mobil, lasă atribuirea să curgă pe mai multe rânduri în loc să o trunchieze cu „…":
   „un produs al" rămâne pe primul rând, iar numele asociației trece pe rândul de dedesubt,
   afișat complet. `min-width:0` pe brand-logo asigură că textul se înfășoară fără să împingă
   butonul de temă în afara ecranului. */
@media (max-width: 600px) {
    .brand-title { line-height: 1.1; }
    .brand-attrib {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        max-width: none;
        margin-top: 0;
        line-height: 1.25;
    }
    .brand-attrib strong { display: block; }
}
@media (max-width: 430px) {
    .brand-seal { width: 44px; height: 44px; }
    .brand-title { font-size: 1.25rem; }
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.shield-badge {
    background-color: var(--primary-glow);
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    display: none; /* hidden on small screen, flex on desktop */
}

@media(min-width: 768px) {
    .shield-badge {
        display: inline-block;
    }
}

.theme-toggle {
    background: none;
    border: 1px solid var(--border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
    background-color: var(--bg-primary);
}

.theme-toggle:hover {
    transform: scale(1.05);
    border-color: var(--primary);
}

.theme-toggle svg {
    transition: transform var(--transition-smooth), opacity var(--transition-fast);
    color: var(--text-primary);
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

body.dark-theme .theme-toggle .sun-icon {
    display: block;
    animation: rotateIn 0.5s ease;
}

body.dark-theme .theme-toggle .moon-icon {
    display: none;
}

@keyframes rotateIn {
    from { transform: rotate(-45deg); opacity: 0; }
    to { transform: rotate(0); opacity: 1; }
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-primary);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: var(--transition-fast);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
}

.btn-primary:hover {
    background-color: var(--primary-light);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--primary-glow);
}

.btn-secondary {
    background-color: var(--bg-surface);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.btn-secondary:hover {
    border-color: var(--primary);
    background-color: var(--bg-primary);
    transform: translateY(-2px);
}

.btn-large {
    padding: 1rem 2rem;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
}

/* CTA principal din hero — cel mai important buton: mai mare, gradient + inel de
   accent ca să iasă în evidență, cu lift și săgeată care alunecă la hover. */
.btn-hero-cta {
    padding: 1.15rem 2.85rem;
    font-size: 1.2rem;
    font-weight: 700;
    border-radius: var(--radius-md);
    color: #fff;
    background: linear-gradient(135deg, hsl(22, 95%, 46%), hsl(32, 92%, 52%));
    box-shadow: var(--shadow-lg), 0 0 0 5px hsla(28, 90%, 50%, 0.2);
}
.btn-hero-cta:hover {
    background: linear-gradient(135deg, hsl(22, 95%, 48%), hsl(32, 92%, 54%));
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg), 0 0 0 6px hsla(28, 90%, 50%, 0.26);
}
.btn-hero-cta svg { transition: transform var(--transition-fast); }
.btn-hero-cta:hover svg { transform: translateX(4px); }
@media (max-width: 600px) {
    .btn-hero-cta { padding: 1.05rem 2rem; font-size: 1.08rem; width: 100%; max-width: 360px; }
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

.btn-xs {
    padding: 0.25rem 0.6rem;
    font-size: 0.75rem;
    border-radius: 4px;
}

.btn-full {
    width: 100%;
}

.btn:active {
    transform: translateY(0);
}

/* Ripple effect basic structure */
.ripple {
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   MAIN LAYOUT & LANDING VIEW
   ========================================================================== */
.app-main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 5rem 1.5rem;
    flex-grow: 1;
    width: 100%;
}

.step-view {
    display: none;
}

.step-view.active {
    display: block;
    animation: fadeIn var(--transition-smooth);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-section {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 4rem auto;
}

@keyframes bounce-in {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.05); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 4rem;
}

.trust-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
}

@media(min-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.trust-card {
    background-color: var(--bg-surface-glass);
    border: 1px solid var(--border-color);
    padding: 2rem 1.5rem;
    border-radius: var(--radius-md);
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--transition-smooth);
}

.trust-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary);
}

.trust-icon {
    font-size: 2.2rem;
    display: inline-block;
    margin-bottom: 1rem;
}

.trust-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.trust-card p {
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ==========================================================================
   Secțiuni de închidere pe landing: FAQ (eliminarea obiecțiilor) + CTA final dark.
   ========================================================================== */
.lp-faq { max-width: 760px; margin: 40px auto 0; padding: 0 4px; }
.lp-faq-title { text-align: center; font-family: var(--font-headers); font-weight: 800; font-size: clamp(1.4rem, 3.6vw, 1.95rem); color: var(--text-primary); margin: 0 0 20px; }
.lp-faq-list { display: flex; flex-direction: column; gap: 10px; }
.faq-item { border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-surface); overflow: hidden; }
.faq-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; padding: 15px 18px; font-weight: 700; font-size: 1rem; color: var(--text-primary); list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q .faq-chevron { flex: none; width: 20px; height: 20px; color: var(--text-muted); transition: transform var(--transition-fast); }
.faq-item[open] .faq-q .faq-chevron { transform: rotate(180deg); }
.faq-item[open] .faq-q { color: var(--primary); }
.faq-a { padding: 0 18px 16px; }
.faq-a p { margin: 0; font-size: 0.92rem; line-height: 1.55; color: var(--text-muted); }

.final-cta { margin: 48px auto 0; max-width: 1000px; padding: 44px 24px; border-radius: var(--radius-lg); text-align: center; color: #fff; background: linear-gradient(135deg, hsl(222, 55%, 20%) 0%, hsl(222, 62%, 12%) 100%); box-shadow: var(--shadow-lg); }
.final-cta-inner { max-width: 640px; margin: 0 auto; }
.final-cta-title { font-family: var(--font-headers); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.1rem); line-height: 1.18; margin: 0 0 12px; color: #fff; }
.final-cta-sub { font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.82); margin: 0 0 26px; }
.final-cta .btn-hero-cta { margin: 0 auto; }
@media (max-width: 600px) { .final-cta { margin-top: 36px; padding: 36px 18px; border-radius: var(--radius-md); } }

/* ==========================================================================
   STEPPER PROGRESS BAR
   ========================================================================== */
.stepper-container {
    max-width: 900px;
    margin: 0 auto;
    animation: fadeIn var(--transition-smooth);
}

.stepper-bar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 3rem;
    position: relative;
    background-color: var(--bg-surface-glass);
    border: 1px solid var(--border-color);
    padding: 1.25rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.stepper-progress-line {
    position: absolute;
    top: calc(1.25rem + 18px);
    /* Bara pornește și se termină EXACT în centrul primului/ultimului cerc
       (padding bară 1.25rem + raza cercului 18px) → nu depășește pașii, iar fill-ul
       (0% la pasul 1, 100% la ultimul) atinge precis centrele. Spațiu lateral egal. */
    left: calc(1.25rem + 18px);
    right: calc(1.25rem + 18px);
    height: 4px;
    background-color: var(--border-color);
    transform: translateY(-50%);
    z-index: 1;
    pointer-events: none;
}

.stepper-progress-fill {
    height: 100%;
    /* Conectorul pașilor finalizați = VERDE (paleta redusă: verde=finalizat, albastru=
       curent, gri=viitor). Fără galben/amber în stepper — el rămâne doar la atenționări. */
    background: var(--success);
    width: 0%;
    transition: width var(--transition-smooth);
}

.stepper-step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    background: none;
    border: none;
    gap: 0.5rem;
}

.step-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--bg-surface);
    border: 2px solid var(--border-color);
    color: var(--text-muted);
    font-weight: 700;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.step-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    transition: var(--transition-fast);
    display: none; /* hidden on very small devices, block on medium */
}

@media(min-width: 576px) {
    .step-label {
        display: block;
    }
}

/* Stepper state modifiers */
.stepper-step.active .step-circle {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white;
    box-shadow: 0 0 0 4px var(--primary-glow);
}

.stepper-step.active .step-label {
    color: var(--primary);
    font-weight: 700;
}

.stepper-step.completed .step-circle {
    background-color: var(--success);
    border-color: var(--success);
    color: white;
}
/* Pas finalizat: bifă (nu numărul). JS pune SVG-ul; aici doar mărimea. */
.stepper-step.completed .step-circle svg { width: 62%; height: 62%; }

.stepper-step.completed .step-label {
    color: var(--success-text);
}

.stepper-step.disabled {
    cursor: not-allowed;
}

.stepper-step.disabled .step-label {
    opacity: 0.55;
}

/* ==========================================================================
   STEPPER CARD PANES
   ========================================================================== */
.stepper-card-wrapper {
    background-color: var(--bg-surface-glass);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 2rem 1.5rem;
    min-height: 280px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

@media(min-width: 768px) {
    .stepper-card-wrapper {
        padding: 3rem;
    }
}

.pane-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px dashed var(--border-color);
    padding-bottom: 1rem;
}

@media (max-width: 768px) {
    .pane-header {
        margin-bottom: 1.1rem;
        padding-bottom: 0.85rem;
    }
}

.pane-header h2 {
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.pane-header p {
    font-size: 0.95rem;
    margin-bottom: 0;
}

.step-pane {
    animation: fadeIn var(--transition-smooth);
}

.stepper-navigation {
    display: flex;
    /* Butonul principal de avans („Înainte") stă MEREU jos-dreapta, chiar și la Pasul 1
       unde „Înapoi" lipsește. Acțiunea secundară („Înapoi") e împinsă la stânga cu
       margin-auto. Cu space-between, la Pasul 1 (un singur buton) cădea la stânga. */
    justify-content: flex-end;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2rem;
    transition: transform 0.2s ease;
}
.stepper-navigation #btn-prev-step { margin-right: auto; }

/* Ascunde chrome-ul cât tastatura e deschisă pe mobil.
   Clasa .keyboard-open e pusă pe <body> doar pe mobil de keyboard-viewport.js,
   deci regulile globale nu afectează desktop-ul. */
body.keyboard-open .app-header {
    transform: translateY(-100%);
    pointer-events: none;
}
body.keyboard-open .stepper-navigation {
    transform: translateY(100%);
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .app-header {
        transition: background-color var(--transition-fast), border-color var(--transition-fast);
    }
    .stepper-navigation {
        transition: none;
    }
}

/* Responsive Stepper and Navigation adjustments */
@media (max-width: 768px) {
    /* În wizard, primul element de sub header e BARA DE PAȘI — chrome, nu conținut. Aerul de
       2.5rem al landing-ului (unde primul element e hero-ul) devine aici gol mort sub headerul
       sticky. Regula e scoped pe .in-wizard (pusă de goToStep), ca landing-ul să respire mai
       departe. */
    body.in-wizard .app-main {
        padding-top: 1rem;
    }
    .stepper-container {
        /* Degajează nav-ul fix (~64px) + safe-area, ca statusul/ultima întrebare
           să nu rămână sub butoanele Înapoi/Înainte. */
        padding-bottom: calc(88px + env(safe-area-inset-bottom));
    }
    /* Golul de sub bară: 3rem e o măsură de desktop (bară înaltă, cu etichete, într-o pagină
       largă). Pe mobil bara e lipită de conținutul pe care îl indexează — o ținem aproape. */
    .stepper-bar {
        margin-bottom: 1.75rem;
    }
    /* Pe mobil, cardul se mulează pe conținut — fără gol mort pe pașii scurți. */
    .stepper-card-wrapper {
        min-height: auto;
        padding: 1.5rem 1.25rem;
    }

    .stepper-navigation {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        margin-top: 0;
        padding: 1rem 1.5rem;
        background-color: var(--bg-surface-glass);
        border-top: 1px solid var(--border-color);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1000;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.05);
    }
}

/* Sub 576px etichetele pașilor sunt ascunse (vezi @media min-width: 576px), deci bara e un
   simplu șir de cercuri și primește metrici compacte. Pragul e complementul EXACT al celui de
   la etichete. Cât timp a stat la 400px, telefoanele de 401–575px (Pixel 412, iPhone XR 414,
   iPhone Pro Max 430) prindeau bara de DESKTOP fără etichete: padding gros și 3rem de gol
   sub ea — spațiile moarte reclamate. Cele două praguri se mută ÎMPREUNĂ sau deloc. */
@media (max-width: 575.98px) {
    .stepper-bar {
        padding: 0.75rem 0.85rem;
        margin-bottom: 1.25rem;
    }
    .stepper-progress-line {
        /* Centrul primului/ultimului cerc pe mobil: padding orizontal 0.85rem + raza 14px. */
        left: calc(0.85rem + 14px);
        right: calc(0.85rem + 14px);
        top: calc(0.75rem + 14px);
    }
    .step-circle {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* ==========================================================================
   FORMS & INPUTS
   ========================================================================== */
.form-container {
    max-width: 650px;
    margin: 0 auto;
}

.form-group {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.form-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.form-control {
    font-family: var(--font-primary);
    font-size: 0.95rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--border-color);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: var(--transition-fast);
    outline: none;
    width: 100%;
}

.form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
    background-color: var(--bg-surface);
}

.form-helper {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.35rem;
}

/* === Câmp de dată cu calendar custom (stilizat, în linia grafică) ===
   Pop-up-ul nativ al browserului nu poate fi stilizat. Folosim un declanșator
   vizibil (.date-field-trigger) + un calendar propriu (.date-cal); input-ul
   nativ rămâne ascuns ca sursă de adevăr pentru validare. */
.date-field {
    position: relative;
}
.date-field-native {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}
.date-field-trigger {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 3rem;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 0.95rem;
}
.date-field-trigger:hover { border-color: var(--primary-light); }
.date-field-icon { color: var(--primary); flex-shrink: 0; }
.date-field-chevron {
    color: var(--text-muted);
    flex-shrink: 0;
    margin-left: auto;
    transition: transform var(--transition-fast);
}
.date-field-trigger[aria-expanded="true"] .date-field-chevron { transform: rotate(180deg); }
/* Cât timp nu e aleasă o dată, eticheta e „placeholder" (gri); după, devine text normal. */
.date-field-value { color: var(--text-muted); }
.date-field.has-value .date-field-value { color: var(--text-primary); font-weight: 500; }
/* Bordura roșie de eroare pe declanșator. */
.date-field-trigger.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px var(--danger-light);
}

/* --- Calendarul propriu-zis --- */
.date-cal {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    /* Peste bara fixă de navigare de pe mobil (z-index 1000) — altfel rândurile de
       jos + „Azi" rămân acoperite când câmpul de dată e jos în viewport (defect
       găsit la auditul UI penal; valabil și la civil pe ecrane mici). */
    z-index: 1001;
    width: 320px;
    max-width: 100%;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    animation: fadeIn var(--transition-fast);
}
.date-cal[hidden] { display: none; }
.date-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.date-cal-title {
    font-family: var(--font-headers);
    font-weight: 700;
    font-size: 1rem;
    color: var(--text-primary);
}
.date-cal-nav {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}
.date-cal-nav:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-glow); }
.date-cal-weekdays, .date-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.date-cal-weekdays {
    margin-bottom: 0.35rem;
}
.date-cal-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    padding: 0.25rem 0;
}
.date-cal-cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: var(--transition-fast);
}
.date-cal-cell.is-empty { cursor: default; }
.date-cal-cell:not(.is-empty):hover { background: var(--primary-glow); color: var(--primary); }
.date-cal-cell.is-today { font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--border-color); }
.date-cal-cell.is-selected {
    background: var(--primary);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 12px var(--primary-glow);
}
.date-cal-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 0.6rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--border-color);
}
.date-cal-today {
    border: none;
    background: transparent;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    padding: 0.3rem 0.6rem;
    border-radius: var(--radius-sm);
}
.date-cal-today:hover { background: var(--primary-glow); }

/* Form Validation Error Styles */
.validation-error-message {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--danger);
    margin-top: 0.35rem;
    margin-bottom: 0;
    animation: slideDown var(--transition-fast) ease-out;
}

.form-control:user-invalid,
.form-control.is-invalid {
    border-color: var(--danger);
    background-color: var(--danger-light);
}

.form-control:user-invalid:focus,
.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px hsla(350, 70%, 48%, 0.25);
    background-color: var(--bg-surface);
}

.form-control:user-valid {
    border-color: var(--success);
}

.form-control:user-valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 3px hsla(142, 65%, 38%, 0.15);
    background-color: var(--bg-surface);
}

/* Eroarea explicită (.is-invalid, ex. CNP-ul unei persoane sub 18 ani) trebuie
   să învingă starea nativă :user-valid, care altfel ar colora verde un câmp ce
   respectă pattern-ul, dar pică la validarea noastră de logică. */
.form-control.is-invalid {
    border-color: var(--danger);
    background-color: var(--danger-light);
}
.form-control.is-invalid:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px hsla(350, 70%, 48%, 0.25);
    background-color: var(--bg-surface);
}

/* Sub-întrebare condiționată (pas 1): panou nuanțat, clar atașat de opțiunea aleasă,
   cu un conector „↳" în marginea din stânga ca să se vadă că atârnă din alegerea de mai sus. */
.form-subgroup {
    display: none;
    position: relative;
    background: rgba(38, 81, 181, 0.06); /* fallback pt. browsere fără color-mix */
    background: color-mix(in srgb, var(--primary) 6%, transparent);
    border: 1px solid rgba(38, 81, 181, 0.20); /* fallback */
    border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
    border-left: 4px solid var(--primary);
    border-radius: 10px;
    padding: 0.9rem 1.1rem 1rem;
    margin: 0.6rem 0 0 1.9rem;
    animation: slideDown var(--transition-fast);
}

.form-subgroup.active {
    display: block;
}

.form-subgroup::before {
    content: "↳";
    position: absolute;
    left: -1.45rem;
    top: 0.85rem;
    color: var(--primary);
    font-weight: 800;
    font-size: 1.05rem;
}

@media (max-width: 480px) {
    .form-subgroup { margin-left: 1.4rem; }
    .form-subgroup::before { left: -1.15rem; }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* === Pasul 1 — „Pas cu pas" (dezvăluire progresivă) ============================
   La început se văd doar Q1 (mod) + Q2 (data). Statusul termenului și a treia
   întrebare apar după ce e aleasă data. Toate câmpurile/id-urile rămân; doar
   structura vizuală se schimbă. */

/* Comutator segmentat (pastile) */
.seg-toggle { display: inline-flex; background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 999px; padding: 4px; gap: 2px; max-width: 100%; }
.seg-opt { position: relative; display: flex; flex: 0 0 auto; }
.seg-opt input { position: absolute; inset: 0; opacity: 0; cursor: pointer; margin: 0; }
.seg-opt span { display: block; width: 100%; text-align: center; padding: 0.55rem 1.5rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--text-muted); cursor: pointer; white-space: nowrap; transition: var(--transition-fast); }
.seg-opt:has(input:checked) span { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }
.seg-opt:has(input:focus-visible) span { box-shadow: 0 0 0 3px var(--primary-glow); }
/* Mobil: pastile pe toată lățimea + țintă de atins ~44px */
@media (max-width: 600px) { .seg-toggle { display: flex; width: 100%; } .seg-opt { flex: 1; } .seg-opt span { padding: 0.75rem 0.5rem; } }

/* Separator subțire (păstrat pentru compatibilitate; pasul 1 nu-l mai folosește) */
.soft-divider { height: 1px; background: var(--border-color); opacity: 0.65; margin: 1.4rem 0; }

/* Pasul 1: antet fără linie punctată + mai mult aer */
#pane-step-1 .pane-header { border-bottom: none; padding-bottom: 0; margin-bottom: 1.9rem; }
#pane-step-1 .pane-header h2 { font-size: 1.5rem; line-height: 1.25; }
@media (max-width: 600px) { #pane-step-1 .pane-header { margin-bottom: 1.5rem; } #pane-step-1 .pane-header h2 { font-size: 1.32rem; } }

/* Întrebare numerotată: pastilă-număr + corp */
.v3-q { display: flex; gap: 0.85rem; margin-bottom: 2.1rem; }
.v3-q:last-child { margin-bottom: 0; }
.v3-dot { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-glow); color: var(--primary); font-weight: 700; font-size: 0.9rem; margin-top: 0.1rem; }
.v3-dot.is-ghost { background: var(--bg-primary); color: var(--text-muted); box-shadow: inset 0 0 0 1.5px var(--border-color); }
.v3-body { flex: 1 1 auto; min-width: 0; }
.v3-q .form-label { font-size: 1rem; }
.v3-ghost-text { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--text-muted); }
@media (max-width: 600px) { .v3-q { margin-bottom: 1.8rem; } }

/* Zona dezvăluită după alegerea datei. Ascunsă cu [hidden] (display:none) ca să nu
   lase câmpuri focalizabile în afara fluxului; la afișare animăm cu slideDown. */
/* `.v3-q { display:flex }` învinge atributul `hidden` → forțăm ascunderea reală
   (la fel ca la #deadline-alert). Fără asta, marcajul „mai e un pas" rămâne vizibil
   sub întrebarea reală după dezvăluire. */
.v3-ghost[hidden] { display: none; }
.v3-after[hidden] { display: none; }
.v3-after { animation: slideDown var(--transition-fast); }
@media (prefers-reduced-motion: reduce) { .v3-after, #pane-step-1 .form-subgroup { animation: none; } }

/* Termenul de 15 zile: ascuns până la alegerea datei (role=status → anunțat la SR).
   Toate stările folosesc componenta unică .status-msg (chenar peste tot). */
#pane-step-1 .form-group:has(#date-field-received) { margin-bottom: 0; }
#deadline-alert { margin-top: 0.75rem; }

/* Subgrupurile condiționate: fără box indentat — doar conținut aerisit */
#pane-step-1 .form-subgroup { background: none; border: none; border-radius: 0; padding: 0; margin: 0; }
#pane-step-1 .form-subgroup::before { content: none; }
/* Ramura „prin poștă": puțin aer în plus ca să nu se aglomereze */
#pane-step-1 #subgroup-primire-posta .form-grid { gap: 1rem; margin-top: 0.2rem; }

.form-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.25rem;
}

.col-4 { grid-column: span 12; }
.col-6 { grid-column: span 12; }
.col-8 { grid-column: span 12; }
.col-12 { grid-column: span 12; }

@media(min-width: 768px) {
    .col-4 { grid-column: span 4; }
    .col-6 { grid-column: span 6; }
    .col-8 { grid-column: span 8; }
    .col-12 { grid-column: span 12; }
}

.form-section-title {
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: var(--primary);
}

.form-section-subtitle {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   Chunking Pas 3: cele ~15 câmpuri, grupate în 4 secțiuni numerotate, ca pe PV
   (Proces verbal & emitent / Persoana / Fapta / Încadrare & sancțiuni).
   ========================================================================== */
.pv-section { margin-top: 1.75rem; }
.pv-section:first-of-type { margin-top: 0; }
.pv-section-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.9rem;
    padding-bottom: 0.55rem;
    border-bottom: 1px solid var(--border-color);
}
.pv-section-num {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pv-section-title {
    margin: 0;
    font-family: var(--font-headers);
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}

/* Secțiunea FAPTELE (etapa B, #264): fiecare faptă cu descrierea + articolul ei; add/șterge + callout. */
.pv-section.fapte-sec { border-left: 3px solid var(--gold, #9a7418); padding-left: 0.9rem; }
.pv-section.fapte-sec .pv-section-num { background: var(--gold, #9a7418); }
.fapta {
    background: color-mix(in srgb, var(--gold, #9a7418) 5%, var(--surface, #fff));
    border: 1px solid color-mix(in srgb, var(--gold, #9a7418) 22%, var(--border, #dde3ec));
    border-radius: 12px;
    padding: 0.85rem 0.9rem;
    margin-bottom: 0.7rem;
}
.fapta-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.65rem; }
.fapta-badge {
    font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.72rem; font-weight: 700;
    color: #fff; background: var(--gold, #9a7418); border-radius: 6px; padding: 3px 9px;
}
.fapta-del {
    border: 1px solid var(--border, #dde3ec); background: var(--surface, #fff); color: var(--danger, #b23524);
    border-radius: 7px; padding: 4px 9px; font-size: 0.78rem; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
}
.fapta-del:hover { background: color-mix(in srgb, var(--danger, #b23524) 10%, transparent); }
.fapta-del[disabled] { opacity: 0.35; cursor: not-allowed; }
.fapta .fapta-stack { display: flex; flex-direction: column; gap: 0.6rem; }
.add-fapta {
    width: 100%; border: 1.5px dashed color-mix(in srgb, var(--gold, #9a7418) 55%, var(--border, #dde3ec));
    background: transparent; color: var(--gold, #9a7418); border-radius: 10px; padding: 0.7rem;
    font-size: 0.9rem; font-weight: 650; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 7px;
}
.add-fapta:hover { background: color-mix(in srgb, var(--gold, #9a7418) 10%, transparent); }
.add-help {
    margin: 0.6rem 0 0; display: flex; gap: 9px; align-items: flex-start; font-size: 0.8rem; line-height: 1.5;
    color: var(--text-primary); background: color-mix(in srgb, var(--gold, #9a7418) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--gold, #9a7418) 40%, transparent);
    border-left: 3px solid var(--gold, #9a7418); border-radius: 9px; padding: 0.65rem 0.75rem;
}
.add-help svg { flex: none; stroke: var(--gold, #9a7418); margin-top: 1px; }
.add-help b { color: var(--gold, #9a7418); font-weight: 700; }

/* Avertisment „copiaz-o din PV" (#276) — apare când OCR-ul nu a putut citi descrierea faptei.
   Ton de atenție (amber/danger), aceeași anatomie ca .add-help, conștient de temă prin tokeni. */
.fapte-warning {
    margin: 0 0 0.85rem; display: flex; gap: 9px; align-items: flex-start; font-size: 0.82rem; line-height: 1.5;
    color: var(--text-primary); background: color-mix(in srgb, var(--warning) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--warning) 45%, transparent);
    border-left: 3px solid var(--warning); border-radius: 9px; padding: 0.7rem 0.8rem;
}
.fapte-warning[hidden] { display: none; }
.fapte-warning svg { flex: none; stroke: var(--warning); margin-top: 1px; }
.fapte-warning b { color: var(--warning); font-weight: 700; }

/* Radio Cards (Step 1) */
.radio-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media(min-width: 576px) {
    .radio-card-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Variantă compactă: două opțiuni scurte, una lângă alta inclusiv pe mobil.
   Mai aerisită și mai „profi" — fără descrieri lungi, doar eticheta clară. */
.radio-card-grid--compact {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}
.radio-card-grid--compact .radio-card {
    padding: 0.95rem 1rem;
    display: flex;
    align-items: center;
}
.radio-card-grid--compact .radio-card-content {
    align-items: center;
    gap: 0.6rem;
}
.radio-card-grid--compact .radio-circle {
    margin-top: 0;
}
.radio-card-grid--compact .radio-text strong {
    font-size: 0.92rem;
    line-height: 1.25;
}

.radio-card {
    border: 2px solid var(--border-color);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    cursor: pointer;
    transition: var(--transition-fast);
    display: block;
}

.radio-card:hover {
    border-color: var(--primary-light);
}

.radio-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radio-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.radio-card-content {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.radio-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid var(--border-color);
    display: inline-block;
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
    transition: var(--transition-fast);
}

.radio-card input[type="radio"]:checked + .radio-card-content .radio-circle {
    border-color: var(--primary);
    background-color: var(--primary);
}

.radio-card input[type="radio"]:checked + .radio-card-content .radio-circle::after {
    content: "";
    width: 8px;
    height: 8px;
    background-color: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.radio-card input[type="radio"]:checked {
    /* container style when checked */
}

.radio-card:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background-color: var(--bg-surface);
    box-shadow: 0 4px 12px var(--primary-glow);
}

.radio-text {
    display: flex;
    flex-direction: column;
}

.radio-text strong {
    font-size: 0.95rem;
    color: var(--text-primary);
}

.radio-text small {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Toggle Switch */
.toggle-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    flex-shrink: 0;
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--border-color);
    transition: .3s;
    border-radius: 24px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .3s;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
}

.toggle-switch input:checked + .toggle-slider {
    background-color: var(--success);
}

.toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(22px);
}

.toggle-label {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Alert Boxes */
.alert-box {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-sm);
    margin-top: 1rem;
    border: 1px solid transparent;
}

.alert-box.info {
    background-color: var(--primary-glow);
    border-color: var(--primary);
    color: var(--text-primary);
}

.alert-box.success {
    background-color: var(--success-light);
    border-color: var(--success);
    color: hsl(142, 60%, 15%);
}

.alert-box.warning {
    background-color: hsla(28, 85%, 50%, 0.08);
    border-color: var(--warning);
    color: var(--text-primary);
}

body.dark-theme .alert-box.success {
    background-color: hsla(142, 65%, 25%, 0.15);
    color: hsl(142, 65%, 85%);
}

.alert-icon {
    font-size: 1.25rem;
    line-height: 1.2;
}

.alert-content h4 {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
}

.alert-content p {
    font-size: 0.85rem;
    margin-bottom: 0;
    color: inherit;
}

/* ==========================================================================
   COMPONENTĂ UNICĂ DE STATUS — succes / danger / warning / info / support.
   Aceeași anatomie peste tot: chenar + fundal + iconiță semantică + titlu + descriere.
   Variază DOAR culoarea și iconița per variantă. Vezi setStatusMsg() în app.js.
   ========================================================================== */
.status-msg {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
}
.status-msg[hidden] { display: none !important; }
.status-msg-icon { flex: none; margin-top: 0.06rem; color: var(--text-muted); }
.status-msg-icon svg { display: block; width: 20px; height: 20px; }
.status-msg-body { min-width: 0; }
.status-msg-title { margin: 0; font-size: 0.95rem; font-weight: 700; line-height: 1.3; color: var(--text-primary); }
.status-msg-title:empty { display: none; }
.status-msg-text { margin: 0.15rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--text-muted); }
.status-msg-text:empty { display: none; }

.status-msg--success { border-color: var(--success); background: var(--success-light); }
.status-msg--success .status-msg-icon,
.status-msg--success .status-msg-title { color: var(--success-text); }

.status-msg--danger { border-color: var(--danger); background: var(--danger-light); }
.status-msg--danger .status-msg-icon { color: var(--danger); }

.status-msg--warning { border-color: var(--warning); background: hsla(28, 85%, 50%, 0.10); }
.status-msg--warning .status-msg-icon { color: var(--warning); }

.status-msg--info { border-color: var(--primary); background: var(--primary-glow); }
.status-msg--info .status-msg-icon { color: var(--primary); }

/* support = teal „ajutor/îndrumare" (recomandări blânde) */
.status-msg--support { border-color: hsl(176, 78%, 24%); background: hsl(176, 42%, 93%); }
.status-msg--support .status-msg-icon { color: hsl(176, 78%, 24%); }

body.dark-theme .status-msg--success { background: hsla(142, 65%, 25%, 0.15); }
body.dark-theme .status-msg--danger { background: hsla(350, 60%, 30%, 0.18); }
body.dark-theme .status-msg--warning { background: hsla(28, 85%, 50%, 0.14); }
body.dark-theme .status-msg--info { background: var(--primary-glow); }
body.dark-theme .status-msg--support { background: hsla(176, 60%, 25%, 0.16); border-color: hsl(176, 55%, 45%); }
body.dark-theme .status-msg--support .status-msg-icon { color: hsl(176, 55%, 55%); }

.small-alert {
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
}

/* ==========================================================================
   SCANNER & OCR LAYOUT (Steps 2 & 3)
   ========================================================================== */
.scanner-split-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media(min-width: 992px) {
    /* Poza PV e un bon înalt și îngust: coloana ei se strânge la lățimea reală
       (~230px), iar formularul primește restul (~75%) ca să nu se mai înghesuie. */
    .scanner-split-layout {
        grid-template-columns: 230px 1fr;
    }
    /* Doar în modul OCR (nu solo/manual): poza rămâne fixă cât derulezi formularul,
       iar formularul umple coloana mare (nu rămâne capat la 650px, cu gol în dreapta). */
    .scanner-split-layout:not(.is-solo):not(.is-manual) .scanner-upload-card {
        position: sticky;
        top: 1rem;
    }
    .scanner-split-layout:not(.is-solo):not(.is-manual) #pv-form-container {
        max-width: none;
        margin: 0;
    }
}

/* Stare „solo": doar cardul de scanare, centrat (înainte de extragerea OCR) */
.scanner-split-layout.is-solo {
    grid-template-columns: minmax(0, 620px);
    justify-content: center;
}

/* Stare „manual": ascundem cardul de scanare și arătăm doar formularul,
   centrat pe o singură coloană (completare de mână a datelor din buletin). */
.scanner-split-layout.is-manual {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}
.scanner-split-layout.is-manual .scanner-upload-card {
    display: none;
}

/* Câmpurile suplimentare din buletin (serie, număr, județ, adresă) — ascunse
   implicit (în modul OCR rămân în fundal) și afișate doar la completare manuală. */
.id-extra-field {
    display: none;
}
/* Dezvăluite ori de câte ori formularul de buletin e vizibil (după OCR SAU la completare
   manuală) — adică în orice stare în afară de „doar scanerul" (is-solo). Oglindă după
   .pv-extra-field: pe buletinele NOI (card electronic) domiciliul e tipărit pe VERSO, deci
   OCR-ul feței nu-l citește; dacă rămâneau ascunse după OCR, utilizatorul NU putea completa
   manual domiciliul (nici corecta seria/numărul/județul citite greșit). #278. */
.scanner-split-layout:not(.is-solo) .id-extra-field {
    display: flex;
}

/* Câmpurile secundare din procesul-verbal — ascunse implicit (în modul OCR rămân
   în fundal) și afișate doar la completare manuală. Oglindă după .id-extra-field. */
.pv-extra-field {
    display: none;
}
/* Dezvăluite ori de câte ori formularul PV e vizibil (după OCR SAU la completare
   manuală) — adică în orice stare în afară de „doar scanerul" (is-solo). Altfel,
   după OCR rămâneau ascunse tocmai rubricile greșite des de OCR (serie, amendă,
   articole, dată, județ), iar corecțiile utilizatorului nu erau posibile. */
.scanner-split-layout:not(.is-solo) .pv-extra-field {
    display: flex;
}

/* Rand subțire, dar sugestiv: revenire la scanarea buletinului din modul manual. */
.manual-back-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    text-align: left;
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    padding: 0.6rem 0.85rem;
    margin-bottom: 1.5rem;
    font-family: var(--font-primary);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    transition: var(--transition-fast);
}
.manual-back-row:hover {
    border-color: var(--primary);
    background-color: var(--primary-glow);
    color: var(--primary);
}
.manual-back-row strong {
    color: var(--primary);
    font-weight: 700;
}
.manual-back-arrow {
    font-size: 1rem;
    line-height: 1;
    flex-shrink: 0;
}

.text-upper {
    text-transform: uppercase;
}

/* Antet secțiune date extrase: titlu + subtitlu pe stânga, buton Editează pe dreapta */
.form-section-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

/* OCR — avertisment „verifică datele extrase" (înlocuiește subtitlul). Bară groasă
   galbenă pe stânga + ⚠️ în titlu, banner pe toată lățimea sub rândul titlu+„Editează".
   Culori legate de --accent / --accent-text (trec contrastul AA, light+dark). */
/* Bannerul „Verifică datele" folosește componenta unică .status-msg; clasa asta
   păstrează doar spațierea de banner (sub rândul titlu + „Editează"). */
.ocr-verify-warning { margin-top: 0.75rem; margin-bottom: 2rem; }
/* Casetele de status de la alegerea instanței (autostradă): doar spațiere. */
.autostrada-msg { margin-top: 0.6rem; }

/* Câmpurile blocate (readonly) — aspect „preluat din buletin", needitabil.
   Chenarul albastru de focus apare doar în modul editare (după „Editează"). */
.form-control[readonly] {
    background-color: var(--bg-surface);
    cursor: default;
}

.form-control[readonly]:focus {
    border-color: var(--border-color);
    box-shadow: none;
    background-color: var(--bg-surface);
}

.scanner-upload-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    position: relative;
}

.scanner-badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    background-color: var(--accent);
    color: hsl(222, 60%, 12%);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 50px;
}

.scan-zone {
    border: 2px dashed var(--border-color);
    background-color: var(--bg-surface);
    border-radius: var(--radius-md);
    padding: 3rem 1.5rem;
    text-align: center;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: var(--transition-fast);
}

.scan-zone:hover {
    border-color: var(--primary);
    background-color: var(--bg-primary);
}

/* Cardurile de scanare (buletin și proces-verbal) nu mai au badge-ul „OCR local";
   compactăm zona ca să rămână echilibrată și simetrică. */
#id-scan-zone,
#pv-scan-zone {
    padding: 2.25rem 1.5rem;
    min-height: 210px;
}

.file-hidden {
    display: none;
}

.scan-zone-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
}

/* Callout de upload PV — proeminent, above-the-fold, cu beneficiul + CTA „Încarcă PV". */
.pv-upload-callout {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    text-align: left;
    padding: 1.05rem 1.2rem;
    background: var(--primary-glow);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
}
.pv-upload-callout-icon { flex: none; color: var(--primary); display: flex; }
.pv-upload-callout-icon svg { width: 30px; height: 30px; }
.pv-upload-callout-body { flex: 1 1 auto; min-width: 0; }
.pv-upload-callout-title { margin: 0; font-family: var(--font-headers); font-size: 1.08rem; font-weight: 700; color: var(--text-primary); }
.pv-upload-callout-text { margin: 0.15rem 0 0; font-size: 0.88rem; line-height: 1.4; color: var(--text-muted); }
.pv-upload-callout .btn { flex: none; white-space: nowrap; }
.pv-dropzone-hint { font-size: 0.82rem; color: var(--text-muted); margin: 0; }
@media (max-width: 560px) {
    .pv-upload-callout { flex-direction: column; align-items: flex-start; gap: 0.7rem; }
    .pv-upload-callout .btn { width: 100%; justify-content: center; }
}

.scroll-to-manual-link {
    background: none;
    border: none;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--primary);
    text-decoration: underline;
    margin-top: 1rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.scroll-to-manual-link:hover {
    color: var(--primary-light);
}

.scan-icon {
    font-size: 3rem;
    margin-bottom: 0.25rem;
}

.scan-zone-placeholder h3 {
    font-size: 1.15rem;
    font-weight: 600;
}

.scan-zone-placeholder p {
    font-size: 0.85rem;
    max-width: 250px;
    margin: 0 auto;
}

.scan-preview-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0; left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-primary);
}

.scan-preview-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Laser scan animation overlay */
.scan-overlay-laser {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: var(--accent);
    box-shadow: 0 0 15px 2px var(--accent);
    z-index: 12;
    animation: laser-bounce 2.2s linear infinite;
    pointer-events: none;
}

@keyframes laser-bounce {
    0% { top: 0%; }
    50% { top: 98%; }
    100% { top: 0%; }
}

/* Loader scanner */
.scan-loader {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 340px;
    background-color: rgba(10, 17, 40, 0.85);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: var(--shadow-lg), 0 10px 30px rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-sm);
    z-index: 20;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: white;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    pointer-events: none;
    transition: var(--transition-fast);
}

.scan-loader span {
    font-size: 0.8rem;
    font-weight: 600;
    text-align: left;
    flex: 1;
}

.spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-top: 2.5px solid var(--accent);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    flex-shrink: 0;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.ocr-privacy-info {
    margin-top: 1rem;
    font-size: 0.75rem;
    text-align: center;
    color: var(--text-muted);
}

.pv-help-tip {
    margin-top: 1rem;
    background-color: var(--primary-glow);
    padding: 0.85rem;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-primary);
}

/* ==========================================================================
   GROUNDS FOR APPEAL (Step 4)
   ========================================================================== */
.motive-selector-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media(min-width: 768px) {
    .motive-selector-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.motive-card {
    border: 2px solid var(--border-color);
    background-color: var(--bg-primary);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    cursor: pointer;
    transition: var(--transition-smooth);
    display: block;
    position: relative;
}

.motive-card:hover {
    border-color: var(--primary-light);
    transform: translateY(-3px);
}

.motive-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.motive-card:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.motive-card-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.motive-icon {
    font-size: 1.75rem;
    margin-bottom: 0.25rem;
}

.motive-title {
    font-family: var(--font-headers);
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-primary);
}

.motive-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.motive-card:has(input[type="radio"]:checked) {
    border-color: var(--primary);
    background-color: var(--bg-surface);
    box-shadow: var(--shadow-md);
}

.motive-card:has(input[type="radio"]:checked) .motive-title {
    color: var(--primary);
}

/* Court Assigned Card */
.court-card {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1.75rem;
    position: relative;
    margin-top: 1.25rem;
    transition: var(--transition-fast);
}

.court-badge {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    background-color: var(--primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.6rem;
    border-radius: 50px;
}

.court-card h3 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
    max-width: 80%;
    color: var(--text-primary);
}

.court-card p {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.court-card p .label {
    font-weight: 600;
    color: var(--text-primary);
}

.court-card a {
    color: var(--primary);
    text-decoration: underline;
    font-weight: 600;
}

/* ==========================================================================
   PREVIEW, GENERATION & GUIDE (Step 5)
   ========================================================================== */
.generation-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media(min-width: 992px) {
    .generation-layout {
        grid-template-columns: 1fr 1.1fr;
    }
}

/* Paper Style Document Preview */
.doc-preview-wrapper {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.doc-preview-header {
    background-color: var(--bg-primary);
    border-bottom: 1px solid var(--border-color);
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-muted);
}

.doc-preview-body {
    background-color: white;
    color: #222;
    padding: 2.5rem 2rem;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.75rem;
    line-height: 1.5;
    height: 480px;
    overflow-y: auto;
    white-space: pre-wrap;
    text-align: left;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
}

/* Dark mode compatibility for preview: always light paper inside */
body.dark-theme .doc-preview-body {
    background-color: #fafafa;
    color: #111;
}

/* CTA Card right side */
.cta-card {
    background: linear-gradient(135deg, hsl(222, 60%, 15%) 0%, hsl(222, 60%, 8%) 100%);
    color: white;
    padding: 2rem;
    border-radius: var(--radius-md);
    text-align: center;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
}

.cta-meta {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--accent-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.cta-card h2 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.cta-security {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 1rem;
    margin-bottom: 0;
}

/* Next steps guides */
.next-steps-guide h3 {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid var(--border-color);
    padding-bottom: 0.5rem;
}

.step-list-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.step-list-item {
    display: flex;
    gap: 1rem;
}

.item-number {
    width: 28px;
    height: 28px;
    background-color: var(--primary-glow);
    border: 2px solid var(--primary);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.item-content h4 {
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.item-content p {
    font-size: 0.85rem;
    margin-bottom: 0;
    line-height: 1.5;
}

.step-list-item.special {
    background-color: hsla(38, 90%, 50%, 0.08);
    border: 1px dashed var(--accent);
    padding: 1.25rem;
    border-radius: var(--radius-sm);
}

.step-list-item.special .item-number {
    background-color: var(--accent);
    border-color: var(--accent);
    color: hsl(222, 60%, 12%);
}

.step-list-item.special .item-content p {
    color: var(--text-primary);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.app-footer {
    background-color: var(--bg-surface);
    border-top: 1px solid var(--border-color);
    padding: 4rem 1.5rem 2rem 1.5rem;
    margin-top: auto;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
}

@media(min-width: 768px) {
    .footer-container {
        grid-template-columns: 2fr 1.2fr;
    }
}

.footer-about h4 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.footer-about p {
    font-size: 0.85rem;
    max-width: 600px;
    margin-bottom: 0;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--transition-fast);
}

.footer-links a:hover {
    color: var(--primary);
    padding-left: 4px;
}

.footer-bottom {
    grid-column: span 1;
    border-top: 1px solid var(--border-color);
    padding-top: 1.5rem;
    text-align: center;
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media(min-width: 768px) {
    .footer-bottom {
        grid-column: span 2;
    }
}

/* ==========================================================================
   CHECKOUT / FAKE PAYMENT STYLING
   ========================================================================== */
.checkout-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: start;
    margin-top: 1.5rem;
}

@media (min-width: 992px) {
    .checkout-grid {
        grid-template-columns: 1.2fr 1fr;
        gap: 3rem;
    }
}

.payment-form-wrapper {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

/* Card Mockup */
.credit-card-mock {
    width: 100%;
    max-width: 350px;
    height: 200px;
    margin: 0 auto;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    border-radius: 15px;
    padding: 1.5rem;
    color: white;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 25px rgba(30, 60, 114, 0.35);
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
    overflow: hidden;
    transition: transform 0.3s;
}

.credit-card-mock:hover {
    transform: translateY(-5px);
}

.credit-card-mock::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -20%;
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 70%);
    pointer-events: none;
}

.card-chip {
    width: 45px;
    height: 32px;
    background: linear-gradient(135deg, #ffd700 0%, #b8860b 100%);
    border-radius: 6px;
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.5);
    position: relative;
}

.card-chip::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 6px;
}

.card-logo {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    font-size: 1.8rem;
}

.card-number-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 1.35rem;
    letter-spacing: 2.5px;
    font-weight: bold;
    margin: 1.5rem 0;
    text-align: center;
}

.card-details-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.card-label {
    font-size: 0.65rem;
    opacity: 0.7;
    letter-spacing: 1px;
    margin-bottom: 2px;
}

.card-value-display {
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
}

.payment-security-badges {
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.payment-security-badges span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Order Summary */
.order-summary-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.order-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    padding: 2rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}

.order-card h3 {
    font-size: 1.2rem;
    margin-bottom: 1.25rem;
}

.price-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.original-price {
    font-size: 1.25rem;
    text-decoration: line-through;
    color: var(--text-muted);
}

.current-price {
    font-size: 2rem;
    font-weight: 800;
    color: var(--accent-text);
}

.discount-badge {
    background-color: var(--success-light);
    color: var(--success-text);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 700;
    border: 1px solid var(--success);
}

body.dark-theme .discount-badge {
    background-color: rgba(46, 204, 113, 0.15);
    color: #2ecc71;
}

.price-subtext {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.divider {
    border: 0;
    border-top: 1px solid var(--border-color);
    margin: 1.5rem 0;
}

.benefits-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.benefits-list li {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.benefit-icon {
    width: 20px;
    height: 20px;
    background-color: var(--success-light);
    color: var(--success-text);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: bold;
    flex-shrink: 0;
    margin-top: 2px;
}

body.dark-theme .benefit-icon {
    background-color: rgba(46, 204, 113, 0.15);
}

.benefit-text {
    font-size: 0.9rem;
    line-height: 1.4;
}

/* Payment Loader Overlay */
.payment-loader-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.loader-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2rem;
    border-radius: var(--radius-md);
    box-shadow: 0 15px 35px rgba(0,0,0,0.5);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.25rem;
    transition: background-color var(--transition-fast);
}

.secure-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background-color: var(--border-color);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 0.5rem;
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--primary) 0%, var(--accent) 100%);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.spinner {
    width: 45px;
    height: 45px;
    border: 4px solid var(--border-color);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: loader-spin 1s linear infinite;
}

@keyframes loader-spin {
    to { transform: rotate(360deg); }
}

.court-law {
    font-size: 0.8rem;
    color: var(--text-muted);
    border-top: 1px solid var(--border-color);
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    line-height: 1.4;
}

/* === Overlay de redactare a plângerii (generare AI) === */
.gen-loader-overlay .loader-card {
    max-width: 420px;
    gap: 1rem;
    animation: bounce-in 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.spinner.spinner-lg {
    width: 76px;
    height: 76px;
    border-width: 5px;
    border-top-color: var(--primary);
    border-right-color: var(--accent);
}

.gen-loader-ring {
    position: relative;
    width: 76px;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gen-loader-emoji {
    position: absolute;
    font-size: 2rem;
    line-height: 1;
    animation: gen-loader-pulse 2.2s ease-in-out infinite;
}

@keyframes gen-loader-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.14); }
}

.gen-loader-title {
    font-family: var(--font-headers);
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.gen-loader-msg {
    font-size: 0.95rem;
    color: var(--text-muted);
    margin: 0;
    min-height: 2.6em;
    line-height: 1.35;
    transition: opacity 0.25s ease;
}

.gen-loader-meta {
    width: 100%;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: -0.25rem;
}

.gen-loader-time {
    font-family: var(--font-headers);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary);
    font-variant-numeric: tabular-nums;
}

.gen-loader-hint {
    font-size: 0.82rem;
    color: var(--text-muted);
}

/* Sclipire subtilă care „curge" peste bara de progres, în culorile brandului. */
.gen-loader-overlay .progress-bar-fill {
    position: relative;
    overflow: hidden;
}

.gen-loader-overlay .progress-bar-fill::after {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 40%;
    background: linear-gradient(90deg, transparent, hsla(0, 0%, 100%, 0.45), transparent);
    animation: gen-loader-shine 1.6s ease-in-out infinite;
}

@keyframes gen-loader-shine {
    from { transform: translateX(-120%); }
    to { transform: translateX(320%); }
}

/* === Payment Card (Step 4) === */
.payment-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.4rem;
  max-width: 620px;
  margin: 0 auto;
  padding: 0.5rem 0;
}

/* Opțiunile „unde depui plângerea" (pasul 5) — carduri selectabile (.radio-card). */
.recipient-cards { display: flex; flex-direction: column; gap: 0.75rem; }
.recipient-card .radio-text { flex: 1; min-width: 0; }

/* Eticheta „recomandat" — pe limbajul de badge al site-ului, varianta discretă. */
.recommend-pill {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--primary);
  background: var(--primary-glow);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-sm);
  margin-left: 0.4rem;
  vertical-align: middle;
}

/* Instanța dedusă automat — card imbricat, în aceeași notă cu .court-recipient-card. */
.resolved-court {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.8rem;
  margin-top: 0.7rem;
  box-shadow: var(--shadow-sm);
}
.resolved-court.is-empty { display: none; }
.resolved-court .rc-icon { color: var(--primary); font-size: 1.35rem; flex-shrink: 0; margin-top: 1px; }
.resolved-court .rc-name { font-family: 'Outfit', sans-serif; font-weight: 600; color: var(--text-primary); font-size: 0.98rem; }
.resolved-court .rc-addr { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.15rem; line-height: 1.4; }
.resolved-court .rc-src { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.resolved-court .rc-src .rc-fix-link {
  color: var(--primary); text-decoration: underline; cursor: pointer; background: none;
  border: none; font: inherit; font-size: inherit; padding: 0;
}
.resolved-court.is-error { background: var(--danger-glow, rgba(192,57,43,0.06)); border-color: var(--danger, #c0392b); }
.resolved-court.is-error .rc-name { color: var(--danger, #c0392b); }
.resolved-court.is-error .rc-icon { color: var(--danger, #c0392b); }
/* Stare NEUTRĂ (card neselectat, instanță doar la nivel de județ): indiciu gri, calm —
   fără alarma roșie, care ar fi confuză pe o opțiune pe care nu ai ales-o. */
.resolved-court.is-muted { background: transparent; border-style: dashed; border-color: var(--border-color, rgba(0,0,0,0.18)); }
.resolved-court.is-muted .rc-name { color: var(--text-primary); }
.resolved-court.is-muted .rc-icon { color: var(--text-muted); }
.resolved-court.is-muted .rc-src { color: var(--text-muted); }

.recipient-fix { margin-top: 0.6rem; }
.recipient-fix[hidden] { display: none; }
.recipient-fix-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.3rem; }
.recipient-fix .form-control { font-size: 0.9rem; }
.payment-card {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  border-radius: var(--radius-md);
  padding: 2.5rem;
  width: 100%;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}
/* Coloana stângă (contract + semnătură) */
.payment-main { display: flex; flex-direction: column; gap: 1.4rem; min-width: 0; }
/* Desktop: 2 coloane (contract+semnătură | rezumat sticky) — fără golul alb din dreapta */
/* Stivuit (o coloană) și pe desktop: semnătura sus, cardul de cost + butonul de
   plată dedesubt. (Fără layout pe 2 coloane / sticky de când a fost scos contractul.) */
.payment-summary {
  display: flex; flex-direction: column; align-items: center;
  text-align: center; margin-bottom: 2rem;
}
.payment-label { color: var(--text-muted, #666); font-size: 0.95rem; margin-bottom: 0.75rem; }
.payment-amount {
  font-family: 'Outfit', sans-serif; font-size: 3rem; font-weight: 700;
  background: linear-gradient(135deg, var(--primary), var(--primary-light));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.payment-currency { font-size: 1.5rem; color: var(--text-primary, #1a1a1a); -webkit-text-fill-color: var(--text-primary, #1a1a1a); }
.payment-features { list-style: none; padding: 0; margin: 0 0 2rem 0; }
.payment-features li {
  padding: 0.5rem 0;
  color: var(--text-primary, #1a1a1a);
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.payment-features li:last-child { border-bottom: none; }
.btn-pay { width: 100%; justify-content: center; }
.payment-secure-note { text-align: center; color: var(--text-muted, #666); font-size: 0.85rem; margin-top: 1rem; }
@media (max-width: 600px) {
  .payment-card { padding: 1.5rem; border-radius: var(--radius-md); }
  .payment-amount { font-size: 2.5rem; }
}

/* === Step 5: Document viewer + Send === */
.step5-container { max-width: 880px; margin: 0 auto; padding: 1rem; }
.step5-header { text-align: center; margin-bottom: 2rem; }
.step5-badge {
  display: inline-block; padding: 0.4rem 0.9rem;
  background: rgba(34, 197, 94, 0.1); color: rgb(22, 163, 74);
  border-radius: 999px; font-size: 0.85rem; font-weight: 500;
  margin-bottom: 1rem;
}
.step5-title { font-family: 'Outfit', sans-serif; font-size: 2rem; margin: 0 0 0.5rem; }
.step5-subtitle { color: var(--text-muted, #666); margin: 0; }

.legal-doc-viewer { position: relative; margin-bottom: 1.5rem; }
.legal-doc-paper {
  background: #ffffff;
  color: #1a1a1a;
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  padding: 3rem 3.5rem;
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  line-height: 1.7;
  min-height: 600px;
}
.legal-doc-content { white-space: normal; }
.legal-doc-content .doc-title { text-align: center; font-size: 1.3rem; margin: 1.5rem 0; font-weight: 700; }
/* Aceeași formă ca PDF-ul (#262): destinatarul + „MOTIVE" centrate & bold; petit stânga+indentat; corp justified. */
.legal-doc-content .doc-addressee { text-align: left; font-weight: 700; margin: 0.15rem 0; padding-left: 1.25em; }
.legal-doc-content .doc-instanta { text-align: center; font-weight: 700; margin: 0.15rem 0; }
.legal-doc-content .doc-motive { text-align: center; font-weight: 700; font-size: 1.05rem; margin: 1.5rem 0 0.75rem; }
.legal-doc-content .doc-section-heading {
  border-left: 3px solid var(--primary);
  padding-left: 0.75rem;
  margin: 1.5rem 0 0.75rem;
  font-weight: 700;
}
.legal-doc-content .doc-para { text-align: justify; margin: 0.6rem 0; }
.legal-doc-content .doc-petit-label { font-weight: 700; margin: 0.6rem 0 0.15rem; }
.legal-doc-content .doc-petit-item { font-weight: 700; padding-left: 1.4rem; margin: 0.1rem 0; }
.legal-doc-editor {
  width: 100%;
  min-height: 600px;
  font-family: 'Lora', Georgia, serif;
  font-size: 14px;
  line-height: 1.7;
  border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  border-radius: var(--radius-sm);
  padding: 3rem 3.5rem;
  background: #ffffff;
  color: #1a1a1a;
  resize: vertical;
  box-sizing: border-box;
}
/* Buton CLAR de editare a plângerii, deasupra documentului (vezi #doc-view).
   Stil distinct de „Trimite" (care e plin/albastru): aici e conturat + tentă, ca să
   nu concureze cu acțiunea principală, dar să fie evident că poți edita. */
.edit-cta-row { margin: 0 0 1.25rem; }
.edit-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  width: 100%; padding: 0.9rem 1rem; border-radius: 12px;
  font-family: var(--font-primary); font-weight: 600; font-size: 1.02rem; cursor: pointer;
  background: var(--primary-glow); color: var(--primary);
  border: 1.5px solid var(--primary); transition: var(--transition-fast);
}
.edit-cta:hover { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.edit-cta .ico { width: 20px; height: 20px; flex-shrink: 0; }
.edit-hint { margin: 0.45rem 0 0; text-align: center; font-size: 0.82rem; color: var(--text-muted); }

/* Stările editorului: banner de status + rândul de acțiuni (editează / anulează + salvează). */
#editor-banner { margin-bottom: 0.85rem; }
.editor-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; }
.editor-actions > .btn { flex: 1 1 0; min-width: 0; }
/* .edit-cta/.btn au display:inline-flex (clasă) care ar învinge atributul `hidden` →
   îl respectăm explicit, ca butonul potrivit fiecărei stări să fie chiar ascuns. */
.edit-cta[hidden], .editor-actions .btn[hidden] { display: none; }
.editor-send-hint { margin: 0 0 0.6rem; text-align: center; font-size: 0.85rem; font-weight: 600; color: var(--warning); }
/* Revenire la varianta generată — plasă de siguranță, discretă (link secundar cu iconiță). */
.editor-restore-link {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
    width: 100%; margin-top: 0.55rem; padding: 0.55rem 0.75rem;
    background: none; border: none; cursor: pointer;
    font-family: var(--font-primary); font-size: 0.86rem; font-weight: 600; color: var(--text-muted);
    border-radius: 8px; transition: var(--transition-fast);
}
.editor-restore-link:hover { color: var(--primary); background: var(--primary-glow); }
.editor-restore-link .ico { width: 16px; height: 16px; flex-shrink: 0; }
.editor-restore-link[hidden] { display: none; }

.court-recipient-card {
  display: flex; gap: 1rem;
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.court-recipient-icon { font-size: 2rem; line-height: 1; }
.court-recipient-label { font-size: 0.8rem; color: var(--text-muted, #666); text-transform: uppercase; letter-spacing: 0.05em; }
.court-recipient-name { font-family: 'Outfit', sans-serif; font-size: 1.15rem; font-weight: 600; margin: 0.25rem 0; }
.court-recipient-meta { color: var(--text-muted, #666); font-size: 0.9rem; line-height: 1.5; }

.send-action {
  background: var(--bg-surface, #ffffff);
  border: 1px solid var(--border-color, rgba(0,0,0,0.1));
  border-radius: var(--radius-md);
  padding: 1.5rem;
}
.send-consent { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1.25rem; cursor: pointer; user-select: none; }
.send-consent input { margin-top: 0.25rem; transform: scale(1.2); }
.btn-send { width: 100%; justify-content: center; }
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== SCROLL-TO-ACCEPT — piesă reutilizabilă (vezi /js/scroll-to-accept.js) =====
   Blochează un consimțământ până derulezi conținutul până la capăt. Toate stările
   (blocat ↔ deblocat) sunt comutate de o singură clasă: .read-complete pe .accept-gate. */
.accept-gate { border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-surface); overflow: hidden; margin: 0 0 1rem; }
.accept-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 1rem; border-bottom: 1px solid var(--border-color); }
.accept-head strong { font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.98rem; color: var(--text-primary); }
.accept-readmark { font-size: 0.8rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.accept-gate.read-complete .accept-readmark { color: var(--success-text); font-weight: 600; }
.accept-scrollwrap { position: relative; }
.accept-scroll { max-height: 240px; overflow-y: auto; padding: 1rem 1.15rem; font-size: 0.86rem; line-height: 1.6; color: var(--text-primary); -webkit-overflow-scrolling: touch; }
.accept-scroll h4 { margin: 1rem 0 0.25rem; font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 0.9rem; }
.accept-scroll h4:first-child { margin-top: 0; }
.accept-scroll p { margin: 0.25rem 0 0.6rem; color: var(--text-muted); }
.accept-scroll a { color: var(--primary); }
.accept-sentinel { height: 1px; }
.accept-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 54px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--bg-surface)); transition: opacity 0.25s; }
.accept-gate.read-complete .accept-fade { opacity: 0; }
.accept-progress { height: 3px; background: var(--border-color); }
.accept-progress > i { display: block; height: 100%; width: 0; background: var(--primary); transition: width 0.1s linear; }
.accept-gate.read-complete .accept-progress > i { background: var(--success); width: 100%; }
.accept-scrollbtn { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.7rem 1rem 0; padding: 0.5rem 0.9rem; border-radius: 999px; cursor: pointer; font-family: var(--font-primary); font-weight: 600; font-size: 0.82rem; background: var(--primary-glow); color: var(--primary); border: 1px solid var(--primary); }
.accept-gate.read-complete .accept-scrollbtn { display: none; }
.accept-consent { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.9rem 1rem 0.4rem; cursor: not-allowed; }
.accept-gate.read-complete .accept-consent { cursor: pointer; }
.accept-consent input { margin-top: 0.15rem; transform: scale(1.25); accent-color: var(--primary); }
.accept-consent input:disabled { cursor: not-allowed; }
.accept-consent-text { font-size: 0.9rem; color: var(--text-muted); }
.accept-gate.read-complete .accept-consent-text { color: var(--text-primary); }
.accept-hint { display: flex; align-items: center; gap: 0.4rem; padding: 0 1rem 1rem 2.4rem; font-size: 0.82rem; }
.accept-hint .locked { color: var(--text-muted); }
.accept-hint .unlocked { color: var(--success-text); font-weight: 600; }
/* comutarea text blocat ↔ deblocat, doar din clasa .read-complete (fără JS per-text) */
.accept-readmark .unlocked, .accept-hint .unlocked { display: none; }
.accept-gate.read-complete .accept-readmark .locked, .accept-gate.read-complete .accept-hint .locked { display: none; }
.accept-gate.read-complete .accept-readmark .unlocked, .accept-gate.read-complete .accept-hint .unlocked { display: inline; }
@keyframes acc-pop { 0% { box-shadow: 0 0 0 0 var(--success-light); } 100% { box-shadow: 0 0 0 7px transparent; } }
.accept-gate.read-complete .accept-consent input { animation: acc-pop 0.8s ease-out 1; border-radius: 4px; }

/* Plata blocată până la acceptarea termenilor. */
.btn-pay:disabled { opacity: 0.5; cursor: not-allowed; }

/* Plângerea: consimțământul de trimitere e blocat până derulezi plângerea la capăt. */
.send-consent input:disabled { cursor: not-allowed; }
.send-consent-hint { display: flex; align-items: center; gap: 0.4rem; margin: -0.75rem 0 1rem 1.95rem; font-size: 0.82rem; }
.send-consent-hint .locked { color: var(--text-muted); }
.send-consent-hint .unlocked { color: var(--success-text); font-weight: 600; }
.send-action .send-consent-hint .unlocked { display: none; }
.send-action.read-complete .send-consent-hint .locked { display: none; }
.send-action.read-complete .send-consent-hint .unlocked { display: inline; }

/* === Progres la citirea plângerii (mod vizualizare) === */
/* A — bară fixă chiar SUB header-ul aplicației (--reading-offset = înălțimea headerului,
   setată din JS) + eticheta „Citit %". z-index sub header (100), dar peste conținut. */
.doc-read-topbar, .doc-read-pct { display: none; } /* vizibile doar în modul de citire */
body.reading-doc .doc-read-topbar, body.reading-doc .doc-read-pct { display: block; }
.doc-read-topbar { position: fixed; top: var(--reading-offset, 0px); left: 0; right: 0; height: 4px; background: var(--border-color, rgba(0,0,0,0.1)); z-index: 90; }
.doc-read-topbar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); transition: width 0.08s linear; }
.doc-read-pct {
  position: fixed; top: calc(var(--reading-offset, 0px) + 8px); right: 12px; z-index: 91; font-size: 0.72rem; font-weight: 700;
  font-family: var(--font-headers, 'Outfit', sans-serif); color: var(--text-muted);
  background: var(--bg-surface); border: 1px solid var(--border-color, rgba(0,0,0,0.12));
  border-radius: 999px; padding: 0.15rem 0.6rem; box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
/* B — card de progres deasupra confirmării */
.doc-read-card {
  background: var(--bg-surface); border: 1px solid var(--border-color, rgba(0,0,0,0.12));
  border-radius: var(--radius-md); padding: 0.85rem 1rem; margin-bottom: 1.1rem;
}
.doc-read-card-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.5rem; }
.doc-read-card-row .doc-read-card-pct { color: var(--primary); font-family: var(--font-headers, 'Outfit', sans-serif); flex: none; }
.doc-read-bar { height: 8px; background: var(--border-color, rgba(0,0,0,0.12)); border-radius: 999px; overflow: hidden; }
.doc-read-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 999px; transition: width 0.08s linear; }
/* Stare „citit complet" — verde, aliniat cu restul confirmărilor din aplicație. */
.send-action.read-complete .doc-read-card .doc-read-card-pct { color: var(--success-text); }
.send-action.read-complete .doc-read-card .doc-read-bar > i { background: var(--success); }
/* La citire completă, bara de sus + pastila trec pe verde (aliniate cu restul confirmărilor). */
body.reading-done .doc-read-topbar > i { background: var(--success); }
body.reading-done .doc-read-pct { color: var(--success-text); border-color: hsla(142,65%,38%,0.4); }

.send-confirmation { max-width: 600px; margin: 4rem auto; padding: 2rem; text-align: center; }
.send-confirmation-icon { font-size: 4rem; margin-bottom: 1rem; }
.send-confirmation-title { font-family: 'Outfit', sans-serif; font-size: 2rem; margin: 0 0 1.5rem; }
.send-confirmation-message { color: var(--text-primary, #1a1a1a); margin: 0.75rem 0; }
.send-confirmation-note { color: var(--text-muted, #666); font-size: 0.85rem; margin-top: 1.5rem; }

@media (max-width: 700px) {
  .legal-doc-paper, .legal-doc-editor { padding: 1.5rem 1.25rem; font-size: 13px; overflow-x: auto; word-wrap: break-word; }
  .court-recipient-card { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
  .send-action { position: sticky; bottom: 0; box-shadow: 0 -4px 16px rgba(0,0,0,0.08); z-index: 10; }
  .step5-title { font-size: 1.5rem; }
}

/* === Footer + Status + Privacy pages === */
.app-footer { text-align: center; padding: 2rem 1rem; color: var(--text-muted, #666); }
.app-footer a { margin: 0 1rem; color: inherit; text-decoration: none; }
.app-footer a:hover { color: var(--primary); }

.status-page, .privacy-page { padding: 4rem 1rem; max-width: 720px; margin: 0 auto; }
.status-container h1, .privacy-page h1 { font-family: 'Outfit', sans-serif; }
.status-intro { color: var(--text-muted, #666); margin-bottom: 1.5rem; }
.status-form { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0; }
.status-form input { padding: 0.75rem 1rem; border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: var(--radius-sm); font-family: 'Outfit', sans-serif; background: var(--bg-surface, #fff); color: var(--text-primary, #1a1a1a); }
.status-card { background: var(--bg-surface, #fff); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); margin-top: 1.5rem; line-height: 2; }
.status-error { color: rgb(220, 38, 38); margin-top: 1rem; }
.status-back, .privacy-back { margin-top: 2rem; }
.status-back a, .privacy-back a { color: var(--text-muted, #666); text-decoration: none; }

.privacy-page { line-height: 1.7; }
.privacy-page h2 { font-family: 'Outfit', sans-serif; margin-top: 2rem; }
.privacy-page h3 { font-family: 'Outfit', sans-serif; margin-top: 1.25rem; font-size: 1.05rem; }
.cookie-list { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.cookie-list li { margin-bottom: 0.6rem; }

/* Banner de consimțământ cookies — bară fixă jos, mobile-first, non-blocantă. */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
  padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
  background: var(--bg-surface, #fff);
  border-top: 1px solid var(--border-color, rgba(0,0,0,0.12));
  box-shadow: 0 -6px 24px rgba(0,0,0,0.10);
}
.cookie-banner-text {
  flex: 1 1 240px;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text-primary, #1a1a1a);
}
.cookie-banner-text a { color: var(--primary, #2c5cff); text-decoration: underline; }
.cookie-banner-accept { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; align-items: stretch; text-align: left; }
  /* În coloană, flex-grow pe text l-ar întinde vertical (gol mare până la buton). */
  .cookie-banner-text { flex: 0 0 auto; }
  .cookie-banner-accept { width: 100%; }
}
.delete-form { margin-top: 2rem; padding: 1.5rem; background: var(--bg-surface, #fff); border-radius: var(--radius-md); border: 1px solid var(--border-color, rgba(0,0,0,0.1)); }
.delete-form label { display: block; font-size: 0.85rem; color: var(--text-muted, #666); margin-bottom: 0.5rem; }
.delete-form input { width: 100%; padding: 0.75rem; margin: 0 0 0.75rem; border: 1px solid var(--border-color, rgba(0,0,0,0.1)); border-radius: var(--radius-sm); box-sizing: border-box; }
#delete-result { margin-top: 0.75rem; color: var(--text-primary, #1a1a1a); }

/* === Mobile polish (Task 16) === */
@media (max-width: 600px) {
  /* Make all buttons at least 44px tall for touch targets */
  .btn { min-height: 44px; }
  /* Allow horizontal scroll on stepper if it doesn't fit */
  .stepper, .steps, .stepper-bar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Inputs in forms should have larger touch area */
  input[type="text"], input[type="email"], input[type="number"], select, textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 0.75rem;
  }
}

/* ==========================================================================
   PAS 4: motive identificate + preview blurat + contract + semnătură
   ========================================================================== */
.preview-card {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}
.preview-heading {
    font-family: var(--font-headers);
    font-size: 1.05rem;
    color: var(--text-primary);
    margin: 0 0 0.25rem;
}
.grounds-block .preview-heading { color: var(--success-text); }
.preview-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0 0 0.9rem;
}
/* Antet rezultat (Design 1): check mare în cerc verde + titlu bold + subtitlu. */
.grounds-result-head { display: flex; gap: 0.8rem; align-items: center; margin-bottom: 1rem; }
/* display:flex de mai sus ar suprascrie atributul `hidden` → îl respectăm explicit,
   ca antetul să fie ascuns în timpul countdown-ului și să apară doar după găsire. */
.grounds-result-head[hidden] { display: none; }
.grounds-check {
    flex: none; width: 46px; height: 46px; border-radius: 50%;
    background: var(--success-light); border: 2px solid var(--success); color: var(--success-text);
    display: flex; align-items: center; justify-content: center; font-size: 1.6rem; font-weight: 800;
}
.grounds-result-head .preview-heading { margin: 0; font-size: 1.18rem; font-weight: 800; }
.grounds-result-head .preview-sub { margin: 0.15rem 0 0; }
.grounds-block { margin-bottom: 1.4rem; }

/* Carduri de categorie la Pasul 5 — chenar DISTINCT pe „Motive identificate" și pe
   „Previzualizare plângere" (legea proximității): spațiere mică în interiorul grupului,
   mare + chenar între grupuri. */
.step5-card {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--bg-surface);
    padding: 1.4rem 1.5rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden; /* clipează documentul full-bleed la colțurile rotunjite */
}
.grounds-block.step5-card { margin-bottom: 0; }
/* Previzualizarea: documentul umple cardul (fără dublă bordură); gradientul ajunge la
   marginile cardului. Titlul stă în padding-ul de sus, paper-ul e full-bleed dedesubt. */
.step5-card.preview-doc-wrap { padding-bottom: 0; margin-bottom: 0; }
.step5-card .preview-doc-paper { border: none; box-shadow: none; border-radius: 0; background: transparent; margin: 0 -1.5rem; }
.step5-card .preview-doc-text { padding-left: 1.5rem; padding-right: 1.5rem; }

/* Spațiu între grupuri (mare) — clar mai mare decât spațierea intra-grup (~0.5rem). */
#step5-after-motive { margin-top: 2rem; }
.grounds-list { display: flex; flex-direction: column; gap: 0.5rem; }
/* Checklist read-only de rezultat (scurt & comercial): ✓ verde simplu (fără cerc,
   fiindcă avem deja checkul mare în antet) + titlu bold pe un rând. */
.ground-item { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.1rem 0; }
.ground-check { flex: none; color: var(--success-text); font-weight: 800; font-size: 1rem; margin-top: 1px; }
.ground-title-text { font-size: 0.95rem; color: var(--text-primary); font-weight: 700; line-height: 1.35; }
.ground-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.ground-badge {
    flex: 0 0 auto;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    color: #fff;
    white-space: nowrap;
}
.ground-badge.tip-nulitate { background: #b4232a; }
.ground-badge.tip-nelegalitate { background: #b8690f; }
.ground-badge.tip-netemeinicie { background: #2563a8; }
.ground-badge.tip-admisibilitate { background: #4b5563; }
/* Bordura din stânga reflectă tipul juridic al motivului. */
.ground-item[data-tip="nulitate"] { border-left-color: #b4232a; }
.ground-item[data-tip="nelegalitate"] { border-left-color: #b8690f; }
.ground-item[data-tip="netemeinicie"] { border-left-color: #2563a8; }
.ground-item[data-tip="admisibilitate"] { border-left-color: #4b5563; }
.ground-titlu {
    flex: 1 1 200px;
    min-width: 0;
    border: none;
    background: transparent;
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    padding: 0.1rem 0;
}
.ground-titlu:focus { outline: none; border-bottom: 1px dashed var(--primary); }
.ground-expl {
    width: 100%;
    border: none;
    background: transparent;
    resize: vertical;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 0.2rem 0;
    box-sizing: border-box;
}
.ground-expl:focus { outline: none; }
/* Temeiul legal al motivului (extras de model, doar afișat — nu editabil). */
.ground-temei {
    font-size: 0.74rem;
    color: var(--text-muted);
    margin-top: 0.3rem;
    padding-top: 0.3rem;
    border-top: 1px dashed var(--border-color);
}
.ground-temei-mark { color: var(--accent-text); font-weight: 700; margin-right: 0.15rem; }

/* Motivele apar rând pe rând când analiza s-a terminat. */
.ground-item.ground-rise {
    opacity: 0;
    transform: translateY(8px);
    animation: ground-rise 0.45s ease forwards;
}
@keyframes ground-rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .ground-item.ground-rise { animation: none; opacity: 1; transform: none; }
}

/* === Starea de analiză (countdown) la extragerea motivelor din caz === */
.grounds-analyze {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.8rem 1rem 1.4rem;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}
.grounds-analyze[hidden] { display: none !important; }
.ga-ring { position: relative; width: 148px; height: 148px; }
.ga-ring svg { transform: rotate(-90deg); }
.ga-track { stroke: var(--border-color); }
.ga-prog { stroke: url(#ga-grad); stroke-linecap: round; transition: stroke-dashoffset 0.95s linear; }
.ga-num {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ga-num b {
    font-family: 'Outfit', sans-serif;
    font-size: 2.5rem; font-weight: 700; line-height: 1;
    color: var(--primary);
}
.ga-num span { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.2rem; }
.ga-title { font-family: 'Outfit', sans-serif; font-size: 1.05rem; margin: 1.1rem 0 0.2rem; color: var(--text-primary); }
.ga-steps { list-style: none; padding: 0; margin: 0.9rem 0 0; width: 100%; max-width: 380px; text-align: left; }
.ga-steps li {
    display: flex; gap: 0.6rem; align-items: center;
    padding: 0.38rem 0;
    color: var(--text-muted); font-size: 0.88rem;
    transition: color 0.3s;
}
.ga-steps li.active { color: var(--text-primary); font-weight: 600; }
.ga-dot {
    width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border-color);
    flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    transition: var(--transition-fast);
}
.ga-steps li.active .ga-dot { border-color: var(--primary); }
.ga-steps li.done .ga-dot { background: var(--primary); border-color: var(--primary); }
.ga-spin {
    width: 10px; height: 10px;
    border: 2px solid var(--primary); border-right-color: transparent;
    border-radius: 50%;
    animation: ga-spin 0.7s linear infinite;
}
@keyframes ga-spin { to { transform: rotate(360deg); } }
.ga-check { color: #fff; font-size: 11px; line-height: 1; }

/* Preview blurat — linii placeholder, fără text real */
/* Preview REAL al plângerii la pasul 4: antetul citibil + fade/blur doar la bază. */
.preview-doc-wrap { margin-bottom: 1.4rem; }
.preview-doc-paper {
    position: relative;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--bg-surface);
    box-shadow: var(--shadow-sm);
}
.preview-doc-text {
    padding: 1.6rem 1.75rem 7rem;
    font-family: 'Georgia', 'Times New Roman', serif;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--text-primary);
    white-space: pre-wrap;
    word-wrap: break-word;
}
.preview-doc-title {
    display: block;
    text-align: center;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 1px;
    margin: 1.4rem 0;
}
/* Banda de jos: gradient PRONUNȚAT care „topește" textul (evident că plângerea continuă
   și e ascunsă intenționat) + butonul de deblocare. Bandă înaltă, blur mai puternic
   crescător spre bază, cu 3 opriri pentru un fade clar (pe alb și pe dark). */
.preview-doc-fade {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 5.5rem 1rem 1.3rem;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background: linear-gradient(180deg,
        hsla(var(--hue), 30%, 100%, 0) 0%,
        hsla(var(--hue), 30%, 100%, 0.65) 34%,
        var(--bg-surface) 72%);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
body.dark-theme .preview-doc-fade {
    background: linear-gradient(180deg,
        hsla(224, 22%, 12%, 0) 0%,
        hsla(224, 22%, 12%, 0.65) 34%,
        var(--bg-surface) 72%);
}
.lock-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.4;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: center;
    max-width: 95%;
}

/* Contract */
.contract-block { margin-bottom: 1.4rem; }
.contract-text {
    max-height: 220px;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    background: var(--bg-primary);
    color: var(--text-primary);
    padding: 0.9rem 1rem;
    font-family: var(--font-primary);
    font-size: 0.8rem;
    line-height: 1.5;
    white-space: pre-wrap;
    margin: 0;
}

/* Semnătură */
.signature-block { margin-bottom: 0.25rem; }
.signature-pad-wrap { position: relative; }
.signature-pad {
    width: 100%;
    height: 180px;
    border: 2px dashed var(--border-color);
    border-radius: var(--radius-md);
    background: #fff;
    touch-action: none;
    cursor: crosshair;
    display: block;
}
.signature-clear {
    position: absolute;
    top: 8px;
    right: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-size: 0.78rem;
    padding: 0.3rem 0.6rem;
    cursor: pointer;
}
.signature-clear:hover { color: var(--danger); border-color: var(--danger); }
.signature-error {
    color: var(--danger);
    font-size: 0.82rem;
    margin-top: 0.5rem;
}

/* ==========================================================================
   PAS 3: ferestrele PV (scaner | date citite). #pv-step3-layout rămâne layout-ul
   implicit scaner|formular (neschimbat față de pasul 2).
   „Apărarea ta" are acum ecran propriu (pasul 4); stilurile de mai jos se aplică acolo.
   ========================================================================== */
/* „Starea de fapt" — cel mai important câmp din pasul 4. Mesaj de importanță deasupra
   (rămâne vizibil și după ce omul scrie, spre deosebire de placeholder). */
.narrative-important {
    display: flex; gap: 0.55rem; align-items: flex-start;
    background: var(--primary-glow); border: 1px solid var(--primary);
    border-radius: 10px; padding: 0.6rem 0.8rem; margin-bottom: 0.6rem;
    font-size: 0.86rem; color: var(--text-primary); line-height: 1.4;
}
.narrative-important .ni-mark {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    background: var(--primary); color: #fff; margin-top: 1px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-headers); font-weight: 800; font-size: 0.82rem;
}

/* P4 — GHIDAJ „starea de fapt" (V1 întrebări + V4 indicii/contor). Design pe tokenii
   sistemului (navy primary, verde success, ambră warning), conștient de dark-mode,
   plăcut: badge-uri numerotate, focus cu glow, stare „gata" verde, contor animat
   primary→success. Structura (id-uri, data-hint) e protejată de stare-de-fapt-ghidaj.test.js. */
.sf-guide {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem 0.9rem;
    margin-bottom: 0.9rem;
    background: var(--bg-primary);
}
.sf-guide-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; flex-wrap: wrap; margin-bottom: 0.7rem;
}
.sf-guide-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-family: var(--font-headers); font-weight: 700;
    font-size: 0.95rem; color: var(--text-primary);
}
.sf-guide-title .sf-spark {
    flex: none; width: 20px; height: 20px; color: var(--primary);
}
.sf-meter-label {
    font-size: 0.76rem; font-weight: 600; letter-spacing: 0.01em;
    color: var(--text-muted); white-space: nowrap;
    transition: color var(--transition-fast);
}
.sf-guide.is-strong .sf-meter-label { color: var(--success-text); }
.sf-meter {
    height: 7px; background: var(--primary-glow);
    border-radius: 999px; overflow: hidden; margin-bottom: 1rem;
}
.sf-meter-bar {
    height: 100%; width: 0;
    background: linear-gradient(90deg, var(--primary), var(--success));
    border-radius: 999px;
    transition: width var(--transition-smooth) ease;
}

.sf-q {
    display: grid; grid-template-columns: 30px 1fr; gap: 0.65rem;
    padding: 0.7rem 0.75rem; margin-bottom: 0.55rem;
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    background: var(--bg-surface);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.sf-q:last-of-type { margin-bottom: 0; }
.sf-q:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-glow);
}
.sf-num {
    grid-row: 1 / -1;
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    background: var(--primary-glow); color: var(--primary);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-headers); font-weight: 800; font-size: 0.9rem;
    transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.sf-q.is-done .sf-num {
    background: var(--success); color: #fff; transform: scale(1.02);
}
/* Bifă în locul cifrei când întrebarea e „gata" (răspuns dezvoltat). */
.sf-q.is-done .sf-num { font-size: 0; position: relative; }
.sf-q.is-done .sf-num::after {
    content: ""; position: absolute;
    width: 6px; height: 11px; border: solid #fff;
    border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translate(-1px, -1px);
}
.sf-q-body { min-width: 0; }
.sf-q label {
    display: block; font-weight: 600; font-size: 0.86rem;
    color: var(--text-primary); margin-bottom: 0.3rem; line-height: 1.35;
}
.sf-q label small { font-weight: 400; color: var(--text-muted); }
.sf-q .sf-answer { margin: 0; }
.sf-hint {
    display: flex; align-items: flex-start; gap: 0.35rem;
    font-size: 0.8rem; color: var(--warning); margin: 0.35rem 0 0;
    line-height: 1.35;
}
.sf-hint::before {
    content: "→"; font-weight: 700; flex: none;
}
.sf-foot {
    display: flex; align-items: flex-start; gap: 0.4rem;
    font-size: 0.8rem; color: var(--text-muted);
    margin: 0.9rem 0 0; line-height: 1.4;
}
.sf-foot svg { flex: none; width: 15px; height: 15px; margin-top: 1px; }
@media (max-width: 600px) {
    .sf-q { grid-template-columns: 26px 1fr; gap: 0.5rem; padding: 0.6rem; }
    .sf-num { width: 26px; height: 26px; font-size: 0.82rem; }
}

/* Probele (martori / înscrisuri / alte probe) — secțiuni pe lățime completă, una
   sub alta. Coloanele înguste strângeau câmpurile (mai ales Martori, cu 2 câmpuri),
   așa că nu se mai citea nimic; aici câmpurile sunt largi pe desktop și pe mobil. */
.aparare-probe-grid {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

/* Liste dinamice (martori / înscrisuri / alte probe) cu buton „+ Adaugă" */
.dyn-list { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.6rem; }

/* Rând cu un singur câmp (înscrisuri / alte probe): input lat + buton ștergere */
.dyn-row { display: grid; grid-template-columns: 1fr 44px; gap: 0.5rem; align-items: center; }
.dyn-row .form-control { margin: 0; }

/* Rând Martori: două câmpuri largi (Nume + Domiciliu) cu etichetă deasupra fiecăruia,
   plus butonul de ștergere. Pe mobil, cele două câmpuri se stivuiesc pe verticală. */
.dyn-row-martor { grid-template-columns: 1fr 1fr 44px; align-items: end; }
.dyn-field { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.dyn-field-label { font-size: 0.78rem; font-weight: 600; color: var(--text-muted); }
@media (max-width: 600px) {
    .dyn-row-martor {
        grid-template-columns: 1fr 44px;
        grid-template-areas: "nume rm" "dom rm";
        column-gap: 0.5rem; row-gap: 0.6rem;
    }
    .dyn-row-martor .dyn-field-nume { grid-area: nume; }
    .dyn-row-martor .dyn-field-dom  { grid-area: dom; }
    .dyn-row-martor .dyn-row-remove { grid-area: rm; align-self: stretch; height: auto; }
}

.dyn-row-remove {
    flex: 0 0 auto; width: 44px; height: 44px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); border-radius: var(--radius-sm);
    font-size: 1.1rem; line-height: 1;
}
.dyn-row-remove:hover { color: var(--danger); border-color: var(--danger); }

/* Rând Înscris: descriere + buton „📎 Atașează" + ștergere pe primul nivel, iar
   sub el un „chip" cu fișierul atașat (apare doar după upload). */
/* align-items:stretch reverează center-ul moștenit de la .dyn-row, ca grila din
   interior (deci și câmpul de descriere) să ocupe toată lățimea, nu doar conținutul. */
.dyn-row-inscris { display: flex; flex-direction: column; gap: 0.4rem; align-items: stretch; }
.dyn-inscris-main { display: grid; grid-template-columns: 1fr 44px 44px; gap: 0.4rem; align-items: center; }
.dyn-attach {
    flex: 0 0 auto; width: 44px; height: 44px; cursor: pointer;
    background: transparent; border: 1px solid var(--border-color);
    color: var(--text-muted); border-radius: var(--radius-sm);
    font-size: 1.05rem; line-height: 1;
}
.dyn-attach:hover { color: var(--primary); border-color: var(--primary); }
.dyn-attach.has-file { color: var(--success-text); border-color: var(--success); }
.dyn-attach-chip {
    display: flex; align-items: center; gap: 0.5rem;
    align-self: flex-start; max-width: 100%;
    font-size: 0.82rem; color: var(--text-primary);
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: var(--radius-sm); padding: 0.4rem 0.6rem;
}
.dyn-attach-chip.is-uploading { opacity: 0.75; }
.dyn-attach-chip.is-uploading .chip-icon svg { animation: spin 0.8s linear infinite; }
.dyn-attach-chip.is-done { border-color: var(--success); background: var(--success-light); }
.dyn-attach-chip.is-error { border-color: var(--danger); background: var(--danger-light); color: var(--danger); }
.dyn-attach-chip .chip-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dyn-attach-chip .chip-msg { flex: 1; min-width: 0; }
.dyn-attach-chip .chip-size { flex: 0 0 auto; color: var(--text-muted); }
.dyn-attach-chip .chip-icon { flex: 0 0 auto; }
.dyn-attach-chip .chip-remove {
    flex: 0 0 auto; cursor: pointer; border: none; background: transparent;
    color: inherit; opacity: 0.6; font-size: 1.05rem; line-height: 1; padding: 0 0.15rem;
}
.dyn-attach-chip .chip-remove:hover { opacity: 1; }
.btn-add-row {
    background: transparent; border: 1px dashed var(--primary); color: var(--primary);
    border-radius: var(--radius-sm); padding: 0.45rem 0.85rem; font-size: 0.85rem;
    font-weight: 600; cursor: pointer;
}
.btn-add-row:hover { background: var(--primary-glow); }

/* Antet grup probe (Martori / Înscrisuri / Alte probe): titlu + buton „+" pătrat
   (outline: fundal alb, bordură + „+" albastru). Lista pornește goală. */
.probe-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
/* Lățime minimă egală pe etichete → toate butoanele „+" se aliniază pe verticală
   (cât să încapă cel mai lung titlu — „Înscrisuri"/„Alte probe" — și nimic în plus). */
.probe-head .form-label { margin: 0; min-width: 5.5rem; }
.btn-add-square {
    flex: none; width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-surface); color: var(--primary); border: 1px solid var(--primary);
    border-radius: var(--radius-sm); font-size: 1.25rem; font-weight: 600; line-height: 1; cursor: pointer;
    transition: var(--transition-fast);
}
.btn-add-square:hover { background: var(--primary-glow); }

.checkbox-row { display: flex; gap: 0.5rem; align-items: center; cursor: pointer; font-size: 0.9rem; }
.checkbox-row input { width: 18px; height: 18px; }

/* ==========================================================================
   PAS 3 — formular PV compact: rânduri apropiate, ușor de urmărit și completat,
   fără să întindă pagina. Scoping pe #pv-form-container (nu afectează alte forme).
   ========================================================================== */
#pv-form-container .form-grid { gap: 0.6rem 1.25rem; }
#pv-form-container .form-group { margin-bottom: 0; }
#pv-form-container .form-label { margin-bottom: 0.25rem; font-size: 0.9rem; }
#pv-form-container .form-control { padding: 0.55rem 0.85rem; }
#pv-form-container .form-section-subtitle { margin-bottom: 0.6rem; }

/* „Locul săvârșirii faptei" + „Descrierea faptei": se întind la conținut (JS
   autoGrowTextarea), fără derulare internă; min-height păstrează un minim când textul
   e scurt (~1 rând pentru loc, ~3 rânduri pentru descriere). */
#pv-loc-fapta, #pv-descriere-fapta { overflow: hidden; resize: none; }
#pv-loc-fapta { min-height: 2.75rem; }
#pv-descriere-fapta { min-height: 5rem; }

/* === Strip static de pași „așa funcționează aplicația" (înlocuiește caruselul) === */
.hc-hero{max-width:880px;margin:0 auto 32px;text-align:center;padding:4px 0}
.hc-title{font-family:var(--font-headers,'Outfit',sans-serif);font-weight:800;font-size:clamp(1.7rem,4.6vw,2.5rem);line-height:1.1;letter-spacing:-.02em;color:var(--text-primary);margin:0 0 8px}
.hc-subtitle{font-family:var(--font-primary,'Inter',sans-serif);font-size:clamp(.95rem,2.4vw,1.08rem);font-weight:500;color:var(--text-muted);line-height:1.4;margin:0 auto 22px;max-width:560px}

/* Ilustrația hero: proces-verbal REALIST cu textul blurat + ștampilă „CONTESTAT".
   SVG inline optimizat, theme-aware prin tokeni. Textul e estompat (feGaussianBlur):
   recunoști formatul unui PV, dar nu e lizibil (și nu expune date personale). */
.hc-illustration{max-width:392px;margin:2px auto 24px}
.hero-pv-illustration{width:100%;height:auto;display:block}
.hero-pv-shadow{fill:rgba(11,19,43,.12)}
.hero-pv-paper{fill:var(--bg-surface);stroke:var(--border-color);stroke-width:1.5}
/* Textul PV-ului (blurat) — culoarea din temă, ca să pară scris real pe hârtie. */
.pv-txt{fill:var(--text-primary);font-family:var(--font-primary,'Inter',sans-serif)}
.pv-txt-mut{fill:var(--text-muted);font-family:var(--font-primary,'Inter',sans-serif)}
.pv-grid{stroke:var(--border-color);stroke-width:1;fill:none}
.pv-barcode{fill:var(--text-primary)}
.pv-fade-0{stop-color:var(--bg-surface);stop-opacity:0}
.pv-fade-1{stop-color:var(--bg-surface);stop-opacity:1}
/* Ștampila (clară, deasupra textului blurat) — aspect de tuș verde. */
.hero-stamp-frame,.hero-stamp-frame-inner{fill:none;stroke:var(--success)}
.hero-stamp-frame{stroke-width:4.5}
.hero-stamp-frame-inner{stroke-width:2}
.hero-stamp-text{fill:var(--success);font-family:var(--font-headers,'Outfit',sans-serif);font-weight:800;font-size:28px;letter-spacing:2px;text-anchor:middle}
.hero-badge rect{fill:var(--primary)}
.hero-badge-text{fill:#fff;font-family:var(--font-primary,'Inter',sans-serif);font-weight:700;font-size:14px;text-anchor:middle}
/* Animație de „ștampilare": vine mai mare + rotită, se apasă cu un mic overshoot și se așază. */
.hero-stamp{transform-box:fill-box;transform-origin:center;opacity:.92;animation:heroStampIn .82s cubic-bezier(.32,1.35,.5,1) .4s both}
@keyframes heroStampIn{
  0%{opacity:0;transform:scale(1.55) rotate(6deg)}
  55%{opacity:1;transform:scale(.95) rotate(-1.5deg)}
  78%{transform:scale(1.03) rotate(.6deg)}
  100%{opacity:.92;transform:scale(1) rotate(0)}
}
@media (prefers-reduced-motion: reduce){.hero-stamp{animation:none;opacity:.92}}
@media (max-width:600px){.hc-illustration{max-width:330px;margin-bottom:20px}}

/* Indicator „faza de testare" — eyebrow auriu deasupra titlului (varianta A). Auriul e
   accentul de brand; punctul pulsatil semnalează discret „e viu, se întâmplă acum". */
.testing-badge{
  display:inline-flex;align-items:center;gap:.5rem;margin:0 0 14px;
  font-family:var(--font-headers,'Outfit',sans-serif);font-weight:700;font-size:.8rem;
  letter-spacing:.03em;text-transform:uppercase;color:var(--accent-text);
  background:hsla(38,90%,52%,.14);border:1px solid hsla(38,90%,52%,.35);
  padding:.42rem .9rem;border-radius:999px;
}
.testing-badge-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--accent);position:relative;flex:none}
.testing-badge-dot::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:1.5px solid var(--accent);animation:testingPulse 1.8s ease-out infinite}
@keyframes testingPulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){.testing-badge-dot::after{animation:none}}

/* Linia de încredere AI (sub subtitlul hero) — pastilă albastră, simetrică vizual cu
   badge-ul verde „Gratis": verde = preț, albastru = cum e făcută. Numește AI-ul și cele
   două pârghii de credibilitate: legea citată exact + controlul uman („tu aprobi"). */
.ai-chip{display:inline-flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem;
  margin:0 auto 22px;padding:.5rem 1rem;border-radius:999px;
  background:var(--primary-glow);border:1px solid hsla(224,70%,55%,.28);
  color:var(--text-primary);font-size:.86rem;font-weight:500;line-height:1.4;max-width:92%}
.ai-chip svg{width:1rem;height:1rem;color:var(--primary);flex:none}
.ai-chip b{font-weight:700;color:var(--primary)}

/* Banda transparenței AI: „Da, e AI — uite exact cum funcționează", între CTA și cardurile
   de încredere. Trei dovezi + un extras de plângere cu temeiul evidențiat (proba că AI-ul
   citează legea, nu inventează). Totul pe tokeni — funcționează în light și dark. */
.ai-band{margin:0 0 4rem;padding:2.4rem 1.5rem;background:var(--bg-surface-glass);
  border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}
.ai-band-head{text-align:center;max-width:640px;margin:0 auto 2rem}
.ai-band-head h2{font-size:1.45rem;line-height:1.25;margin:0 0 .55rem}
.ai-band-head p{color:var(--text-muted);margin:0;font-size:.95rem}
.ai-band-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;max-width:840px;margin:0 auto;text-align:left}
@media(min-width:768px){.ai-band-grid{grid-template-columns:repeat(3,1fr)}}
.ai-point{display:flex;flex-direction:column;gap:.55rem}
.ai-point .ai-ico{width:42px;height:42px;border-radius:12px;background:var(--primary-glow);
  color:var(--primary);display:flex;align-items:center;justify-content:center}
.ai-point .ai-ico svg{width:22px;height:22px}
.ai-point h3{font-size:1.02rem;margin:0}
.ai-point p{font-size:.9rem;color:var(--text-muted);margin:0;line-height:1.55}
.ai-proof{max-width:640px;margin:2rem auto 0;background:var(--bg-surface);border:1px solid var(--border-color);
  border-left:4px solid var(--primary);border-radius:12px;padding:1.05rem 1.25rem;
  font-size:.92rem;line-height:1.65;color:var(--text-primary);font-style:italic}
.ai-proof mark{background:var(--primary-glow);color:var(--primary);font-weight:700;font-style:normal;padding:0 .25em;border-radius:4px}
.ai-proof-cap{display:flex;align-items:flex-start;gap:.45rem;margin-top:.7rem;font-size:.8rem;
  color:var(--success-text);font-weight:600;font-style:normal}
.ai-proof-cap svg{width:1rem;height:1rem;flex:none;margin-top:1px}

/* Reasigurare sub buton (varianta D) — taie ezitarea „mă costă?" la momentul deciziei. */
.testing-note{
  flex-basis:100%;text-align:center;margin:2px 0 0;
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  color:var(--success-text);font-weight:600;font-size:.9rem;
}
.testing-note svg{width:1rem;height:1rem;flex:none}

/* Strip de 6 pași (corespunde stepper-ului real): cerc cu iconiță + număr + etichetă, cu conectori. */
.hc-steps{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:0;max-width:940px;margin:0 auto;padding:6px 0 2px;list-style:none}
.hc-stepItem{position:relative;display:flex;flex-direction:column;align-items:center;gap:12px;padding:0 6px;text-align:center}
.hc-stepItem:not(:last-child)::after{content:"";position:absolute;z-index:0;top:27px;left:calc(50% + 31px);width:calc(100% - 62px);height:2px;background:linear-gradient(90deg,var(--primary),var(--accent));opacity:.45;border-radius:2px}
.hc-bubble{position:relative;z-index:1;width:54px;height:54px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-surface,#fff);border:2px solid var(--primary);color:var(--primary);box-shadow:var(--shadow-sm),0 0 0 4px var(--primary-glow)}
.hc-bubble svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-num{position:absolute;z-index:2;top:-7px;right:-7px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--accent);color:hsl(38,90%,15%);font-family:var(--font-headers,'Outfit',sans-serif);font-weight:800;font-size:.74rem;border:2px solid var(--bg-surface,#fff);box-shadow:var(--shadow-sm)}
.hc-stepLbl{font-family:var(--font-primary,'Inter',sans-serif);font-size:.82rem;font-weight:600;line-height:1.3;color:var(--text-primary);max-width:15ch}
.hc-stepLbl b{color:var(--primary);font-weight:700}

/* Mobil: 2 coloane, fără conectori. 6 pași = grilă curată 3×2 (fără orfan pe ultimul rând). */
@media(max-width:600px){
  .hc-steps{grid-template-columns:repeat(2,1fr);gap:18px 8px;max-width:420px;padding:4px 0}
  .hc-stepItem:not(:last-child)::after{display:none}
  .hc-bubble{width:48px;height:48px}
  .hc-bubble svg{width:21px;height:21px}
  .hc-stepLbl{font-size:.78rem}
}

/* Iconuri SVG inline (linie subțire) — înlocuiesc emoji; scalează cu font-size, currentColor. */
.ico{width:1em;height:1em;display:inline-block;vertical-align:-0.125em;flex:none}

/* Modal „înapoi la pagina principală" (reutilizează .payment-loader-overlay + .loader-card) */
.home-modal-card { gap: 0.85rem; max-width: 420px; text-align: center; }
.home-modal-title { font-family: var(--font-headers); font-size: 1.2rem; color: var(--text-primary); margin: 0; }
.home-modal-msg { color: var(--text-muted); font-size: 0.92rem; line-height: 1.5; margin: 0; }
.home-modal-actions { display: flex; gap: 0.6rem; width: 100%; margin-top: 0.4rem; }
.home-modal-actions .btn { flex: 1; justify-content: center; }

/* Disclaimer juridic în footer (Audit 2 #12) */
.footer-disclaimer { font-size: 0.78rem; color: var(--text-muted); line-height: 1.5; max-width: 760px; margin: 0 auto 0.6rem; opacity: 0.9; }

/* === Ecran de confirmare după plată (link pe e-mail) === */
.send-confirmation-icon { color: var(--primary); }
.confirm-eyebrow {
  display:inline-block; font-family:var(--font-headers,'Outfit',sans-serif); font-weight:700;
  font-size:.72rem; letter-spacing:1.3px; text-transform:uppercase; color:var(--accent-text);
  background:hsla(38,92%,50%,.14); border:1px solid var(--accent); padding:.34rem .85rem;
  border-radius:50px; margin-bottom:1rem;
}
/* Variantă verde — pentru faza gratuită (se leagă de badge-ul „Gratis în faza de testare"). */
.confirm-eyebrow.is-green { color:var(--success-text); background:var(--success-light); border-color:hsla(142,65%,38%,.4); }
.email-sent-hl {
  display:flex; gap:.8rem; align-items:flex-start; text-align:left;
  background:hsla(38,92%,50%,.12); border:1px solid var(--accent); border-left:5px solid var(--accent);
  border-radius:12px; padding:1rem 1.2rem; max-width:540px; margin:1.4rem auto 0;
}
.email-sent-hl .ico { width:24px; height:24px; color:var(--accent-text); flex:none; margin-top:2px; }

/* Mod vizualizare (deschis din linkul de e-mail): ascunde wizard-ul, lasă documentul */
body.mode-doc-only .stepper-bar,
body.mode-doc-only .stepper-navigation,
body.mode-doc-only #pay-view,
body.mode-doc-only #email-sent-view { display:none !important; }