/* ==========================================================================
   Depune o plângere la Consiliul pentru Egalitate — stil dedicat paginii
   ========================================================================== */

:root {
    --cmpl-primary: #8e3c8b;          /* violet — culoarea de brand a logoului */
    --cmpl-primary-dark: #6e2c6c;
    --cmpl-primary-soft: #f4e9f3;     /* tentă violet deschis */
    --cmpl-primary-tint: #faf5fa;
    --cmpl-primary-line: #e2c9e0;
    --cmpl-green: #1f9d57;            /* păstrat doar pentru semnalul „greenlight”/succes */
    --cmpl-green-soft: #e7f7ee;
    --cmpl-amber: #b87514;
    --cmpl-amber-soft: #fbf1e0;
    --cmpl-slate: #4a4453;           /* gri-violet neutru */
    --cmpl-ink: #16121a;             /* aproape negru */
    --cmpl-line: #e6e1ea;
    --cmpl-bg: #f7f5f9;              /* alb-violet foarte deschis */
    --cmpl-radius: 16px;
    --cmpl-shadow: 0 10px 30px rgba(22, 18, 26, 0.08);
}

[x-cloak] { display: none !important; }

.cmpl {
    background: var(--cmpl-bg);
    min-height: 100vh;
    padding: 40px 16px 80px;
    color: var(--cmpl-ink);
    font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.cmpl__container {
    max-width: 760px;
    margin: 0 auto;
}

.cmpl__brand { text-align: center; margin-bottom: 22px; }
.cmpl__logo { max-width: 340px; width: 100%; height: auto; }

.cmpl__title {
    font-size: clamp(1.6rem, 4vw, 2.3rem);
    font-weight: 800;
    text-align: center;
    line-height: 1.2;
    margin: 0 0 24px;
    color: var(--cmpl-ink);
}

/* ---- Tutorial video ---- */
.cmpl__tutorial { text-align: center; margin-bottom: 28px; }
.cmpl__tutorial-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid var(--cmpl-line);
    color: var(--cmpl-primary); font-weight: 600; font-size: .95rem;
    padding: 10px 18px; border-radius: 999px; cursor: pointer;
    transition: .2s; box-shadow: var(--cmpl-shadow);
}
.cmpl__tutorial-btn:hover { transform: translateY(-1px); }
.cmpl__tutorial-btn i { font-size: 1.3rem; }
.cmpl__video {
    margin-top: 16px; background: #000; border-radius: var(--cmpl-radius);
    overflow: hidden; aspect-ratio: 16/9; position: relative;
    display: flex; align-items: center; justify-content: center;
}
.cmpl__video iframe { width: 100%; height: 100%; border: 0; }
.cmpl__video-note { position: absolute; color: #cbd5e1; font-size: .85rem; padding: 0 20px; text-align: center; }

/* ---- Card etapă ---- */
.cmpl__card {
    background: #fff; border-radius: var(--cmpl-radius);
    box-shadow: var(--cmpl-shadow); padding: 32px;
    margin-bottom: 24px;
}
.cmpl__step-head { margin-bottom: 24px; }
.cmpl__step-kicker {
    display: inline-block; font-size: .75rem; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
    color: var(--cmpl-primary); background: var(--cmpl-primary-soft);
    padding: 4px 10px; border-radius: 6px; margin-bottom: 10px;
}
.cmpl__step-head h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 8px; }
.cmpl__step-desc { color: var(--cmpl-slate); margin: 0; font-size: .98rem; line-height: 1.5; }

/* ---- Bară progres etape (1..5) ---- */
.cmpl__steps {
    display: flex; justify-content: space-between; align-items: flex-start;
    position: relative; margin: 0 0 8px; gap: 4px;
}
.cmpl__steps::before {
    content: ''; position: absolute; top: 18px; left: 10%; right: 10%;
    height: 2px; background: var(--cmpl-line); z-index: 0;
}
.cmpl__stepbar {
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; flex: 1; position: relative; z-index: 1;
}
.cmpl__stepdot {
    width: 38px; height: 38px; border-radius: 50%;
    border: 2px solid var(--cmpl-line); background: #fff;
    color: var(--cmpl-slate); font-weight: 700; cursor: default; pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    transition: .25s; font-size: .95rem;
}
.cmpl__stepdot.is-active {
    border-color: var(--cmpl-primary); background: var(--cmpl-primary);
    color: #fff; transform: scale(1.08);
    box-shadow: 0 0 0 5px rgba(142, 60, 139, .18);
}
.cmpl__stepdot.is-done {
    border-color: var(--cmpl-green); background: var(--cmpl-green); color: #fff;
}
.cmpl__steplabel {
    font-size: .72rem; color: var(--cmpl-slate); text-align: center;
    max-width: 90px; line-height: 1.2;
}
.cmpl__stepcount {
    text-align: center; font-size: .8rem; font-weight: 600;
    color: var(--cmpl-slate); letter-spacing: .04em;
    text-transform: uppercase; margin: 0 0 24px;
}

/* ---- Test de orientare ---- */
.cmpl__qprogress { display: flex; justify-content: center; gap: 8px; margin-bottom: 20px; pointer-events: none; }
.cmpl__qdot {
    width: 28px; height: 28px; border-radius: 50%;
    border: 2px solid var(--cmpl-line); color: var(--cmpl-slate);
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; font-weight: 700; transition: .25s; pointer-events: none;
}
.cmpl__qdot.is-active { border-color: var(--cmpl-primary); color: var(--cmpl-primary); }
.cmpl__qdot.is-done { background: var(--cmpl-green); border-color: var(--cmpl-green); color: #fff; }

.cmpl__question { text-align: center; }
.cmpl__qcount { color: var(--cmpl-slate); font-weight: 600; font-size: .85rem; margin: 0 0 12px; }
.cmpl__qtext { font-size: 1.3rem; font-weight: 700; line-height: 1.4; margin: 0 0 28px; }
.cmpl__qoptions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cmpl__qopt {
    flex: 1; min-width: 120px; max-width: 180px;
    padding: 16px; border-radius: 12px; border: 2px solid var(--cmpl-line);
    background: #fff; font-weight: 700; font-size: 1rem; cursor: pointer;
    transition: .2s;
}
.cmpl__qopt:hover { transform: translateY(-2px); box-shadow: var(--cmpl-shadow); }
.cmpl__qopt--yes.is-sel { border-color: var(--cmpl-green); background: var(--cmpl-green-soft); color: var(--cmpl-green); }
.cmpl__qopt--maybe.is-sel { border-color: var(--cmpl-amber); background: var(--cmpl-amber-soft); color: var(--cmpl-amber); }
.cmpl__qopt--no.is-sel { border-color: #cbd5e1; background: #f1f5f9; }

/* ---- Rezultat orientare (greenlight) ---- */
.cmpl__result { text-align: center; padding: 16px; }
.cmpl__result-icon { font-size: 4rem; margin-bottom: 12px; animation: pop .5s ease; }
.cmpl__result--green .cmpl__result-icon { color: var(--cmpl-green); }
.cmpl__result--maybe .cmpl__result-icon { color: var(--cmpl-amber); }
.cmpl__result--other .cmpl__result-icon { color: var(--cmpl-primary); }
.cmpl__result h3 { font-size: 1.4rem; margin: 0 0 10px; }
.cmpl__result p { color: var(--cmpl-slate); line-height: 1.6; max-width: 480px; margin: 0 auto 24px; }
.cmpl__result-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Domenii ---- */
.cmpl__domains { display: flex; flex-direction: column; gap: 8px; }
.cmpl__domain {
    border: 1px solid var(--cmpl-line); border-radius: 12px; padding: 4px 16px;
    transition: .2s;
}
.cmpl__domain:has(input:checked) { border-color: var(--cmpl-primary); background: var(--cmpl-primary-tint); }
.cmpl__domain { display: grid; grid-template-columns: 1fr auto; align-items: center; }
.cmpl__learn {
    background: none; border: none; color: var(--cmpl-primary);
    font-size: .82rem; font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
}
.cmpl__learn-body {
    grid-column: 1 / -1; padding: 4px 0 14px; color: var(--cmpl-slate);
    font-size: .9rem; line-height: 1.6;
}

/* ---- Radio / checkbox ---- */
.cmpl__radio, .cmpl__check {
    display: flex; align-items: center; gap: 10px; cursor: pointer;
    padding: 12px 0; font-size: 1rem; line-height: 1.4;
}
.cmpl__radio input, .cmpl__check input {
    width: 20px; height: 20px; accent-color: var(--cmpl-primary);
    flex-shrink: 0; cursor: pointer;
}
.cmpl__toggle { display: flex; gap: 24px; flex-wrap: wrap; }

/* ---- Chips (criterii) ---- */
.cmpl__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.cmpl__chip {
    display: inline-flex; align-items: center;
    border: 1.5px solid var(--cmpl-line); border-radius: 999px;
    padding: 9px 16px; cursor: pointer; transition: .2s; font-size: .92rem;
}
.cmpl__chip input { display: none; }
.cmpl__chip:hover { border-color: var(--cmpl-primary); }
.cmpl__chip:has(input:checked) {
    border-color: var(--cmpl-primary); background: var(--cmpl-primary); color: #fff;
}

/* ---- Câmpuri ---- */
.cmpl__field { margin-top: 18px; }
.cmpl__field > label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.cmpl__hint { color: var(--cmpl-slate); font-size: .85rem; margin: 0 0 8px; line-height: 1.4; }
.cmpl__field input[type=text],
.cmpl__field input[type=email],
.cmpl__field input[type=tel],
.cmpl__field input[type=date],
.cmpl__field textarea {
    width: 100%; border: 1.5px solid var(--cmpl-line); border-radius: 10px;
    padding: 12px 14px; font-size: 1rem; font-family: inherit;
    background: #fff; transition: .2s; color: var(--cmpl-ink);
}
.cmpl__field input:focus, .cmpl__field textarea:focus {
    outline: none; border-color: var(--cmpl-primary);
    box-shadow: 0 0 0 3px rgba(142, 60, 139, .15);
}
.cmpl__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cmpl__subform { border-left: 3px solid var(--cmpl-primary-soft); padding-left: 16px; margin-top: 8px; }
.cmpl__consents { margin-top: 20px; border-top: 1px solid var(--cmpl-line); padding-top: 12px; }
.cmpl__error { color: #dc2626; font-size: .88rem; margin: 8px 0 0; font-weight: 500; }

/* ---- Upload ---- */
.cmpl__dropzone {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border: 2px dashed var(--cmpl-primary-line); border-radius: var(--cmpl-radius);
    padding: 36px 20px; cursor: pointer; text-align: center;
    color: var(--cmpl-primary); font-weight: 600; transition: .2s;
    background: var(--cmpl-primary-tint);
}
.cmpl__dropzone:hover { border-color: var(--cmpl-primary); background: var(--cmpl-primary-soft); }
.cmpl__dropzone i { font-size: 2.4rem; }
.cmpl__dropzone small { color: var(--cmpl-slate); font-weight: 400; font-size: .8rem; }
.cmpl__dropzone.is-busy { opacity: .6; pointer-events: none; }
.cmpl__file { display: none; }
.cmpl__files { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.cmpl__fileitem {
    display: flex; align-items: center; gap: 10px;
    background: #f4f6fb; border-radius: 10px; padding: 10px 14px;
}
.cmpl__filename { flex: 1; font-weight: 500; font-size: .92rem; word-break: break-all; }
.cmpl__filesize { color: var(--cmpl-slate); font-size: .82rem; }
.cmpl__fileremove { background: none; border: none; color: #94a3b8; cursor: pointer; padding: 4px; }
.cmpl__fileremove:hover { color: #dc2626; }

/* ---- Butoane / navigare ---- */
.cmpl__nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 28px; flex-wrap: wrap; }
.cmpl__nav-right { display: flex; gap: 12px; align-items: center; }
.cmpl__btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 13px 26px; border-radius: 10px; font-weight: 700; font-size: .98rem;
    cursor: pointer; border: 2px solid transparent; transition: .2s;
    text-decoration: none; line-height: 1;
}
.cmpl__btn:disabled { opacity: .6; cursor: not-allowed; }
.cmpl__btn--primary { background: var(--cmpl-primary); color: #fff; }
.cmpl__btn--primary:hover:not(:disabled) { background: var(--cmpl-primary-dark); transform: translateY(-1px); }
.cmpl__btn--outline { border-color: var(--cmpl-primary); color: var(--cmpl-primary); background: #fff; }
.cmpl__btn--outline:hover { background: var(--cmpl-primary-soft); }
.cmpl__btn--ghost { background: #f1f5f9; color: var(--cmpl-slate); }
.cmpl__btn--ghost:hover { background: #e2e8f0; }
.cmpl__btn--link { background: none; color: var(--cmpl-slate); text-decoration: underline; padding: 13px 8px; }

/* ---- Succes ---- */
.cmpl__success { text-align: center; padding: 48px 32px; }
.cmpl__success-anim { font-size: 5rem; color: var(--cmpl-green); animation: pop .6s ease; margin-bottom: 12px; }
.cmpl__success h2 { font-size: 1.7rem; margin: 0 0 12px; }
.cmpl__reference { color: var(--cmpl-slate); margin: 0 0 24px; font-size: 1.05rem; }
.cmpl__reference strong { color: var(--cmpl-ink); letter-spacing: .04em; }
.cmpl__infobox {
    background: var(--cmpl-primary-soft); border-left: 4px solid var(--cmpl-primary);
    border-radius: 10px; padding: 18px 20px; text-align: left;
    color: var(--cmpl-slate); line-height: 1.6; margin: 0 auto 28px; max-width: 560px;
}

/* ---- Overlay gamification ---- */
.cmpl__gamify {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    background: rgba(15, 23, 42, .35); backdrop-filter: blur(2px);
}
.cmpl__gamify-card {
    background: #fff; border-radius: 20px; padding: 40px 48px;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); position: relative;
}
.cmpl__gamify-card i { font-size: 4rem; color: var(--cmpl-green); animation: pop .5s ease; }
.cmpl__gamify-card p { font-size: 1.2rem; font-weight: 700; margin: 14px 0 0; }
.cmpl__gamify-burst {
    position: absolute; inset: 0; border-radius: 20px;
    background: radial-gradient(circle, rgba(31,157,87,.16) 0%, transparent 70%);
    animation: burst .8s ease forwards;
}

/* ---- Toast autosalvare ---- */
.cmpl__saved {
    position: fixed; bottom: 20px; right: 20px; z-index: 9998;
    background: var(--cmpl-ink); color: #fff; padding: 10px 16px;
    border-radius: 999px; font-size: .85rem; font-weight: 600;
    display: flex; align-items: center; gap: 8px; box-shadow: var(--cmpl-shadow);
}
.cmpl__saved i { color: #7ee2a8; }

/* ---- Animații ---- */
@keyframes pop { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }
@keyframes burst { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* ---- Glosar criterii (panou „Ce înseamnă aceste criterii?") ---- */
.cmpl__criteria-help { margin: 14px 0 4px; }
.cmpl__glossary { margin: 8px 0 0; }
.cmpl__glossary dt { font-weight: 700; color: var(--cmpl-ink, #1c1722); margin-top: 10px; }
.cmpl__glossary dd { margin: 2px 0 0; color: var(--cmpl-slate); font-size: .92rem; line-height: 1.45; }

/* ---- Notă „cât se cunoaște" (sub etichetă, gri deschis) ---- */
.cmpl__optnote { color: var(--cmpl-slate); font-weight: 400; font-size: .85rem; }
.cmpl__optnote--block { display: block; margin: 2px 0 6px; }

/* ---- Separare mai clară între secțiunea petiționarului și cea a persoanei vizate ---- */
.cmpl__subhead { margin: 0 0 12px; font-size: 1.05rem; }
.cmpl__behalf { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--cmpl-line); }

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .cmpl__card { padding: 22px 18px; }
    .cmpl__row { grid-template-columns: 1fr; }
    .cmpl__steplabel { display: none; }
    .cmpl__toggle { flex-direction: column; gap: 4px; }
    .cmpl__qopt { max-width: none; }

    /* Pe telefon, indicatorii de progres devin puncte discrete (nu cercuri numerotate
       care par butoane de avans). Întrebarea și răspunsurile rămân în prim-plan. */
    .cmpl__qprogress { gap: 6px; margin-bottom: 16px; }
    .cmpl__qdot { width: 10px; height: 10px; border-width: 1px; font-size: 0; }
    .cmpl__stepdot { width: 30px; height: 30px; font-size: .82rem; }
    .cmpl__qtext { font-size: 1.12rem; margin-bottom: 22px; }
    .cmpl__qoptions { flex-direction: column; }
    .cmpl__qopt { width: 100%; }
}