/* ══════════════════════════════════════════════════════════════════════════════
   [mm_auth] — Autentificare / Cont nou / Resetare parolă.
   Design refăcut complet de la zero (0.93.0), în locul cardului alb simplu
   folosit până acum (`.msp-auth-card`, șters odată cu această versiune).

   Concept: "split stage" — un singur card ridicat, împărțit în două panouri:
   la stânga brandul (fundal întunecat, cu lumini calde), la dreapta formularul
   (alb, curat, generos). E tiparul dominant al paginilor de autentificare
   moderne, pentru că separă vizual "cine ești tu" de "ce ai de făcut aici".

   Cardul are lățime maximă și stă centrat — NU e full-bleed pe tot ecranul:
   shortcode-urile rulează în interiorul unui container Avada, care ar tăia
   oricum un layout lipit de marginile ferestrei.

   Principii moștenite din refacerea dashboard-ului (0.86.0), ca portalul să
   arate ca un produs unitar: iconuri SVG (niciun emoji), token-uri `--mm-*`,
   mobile-first, roșul brandului folosit STRICT pe acțiunea principală.
   ══════════════════════════════════════════════════════════════════════════════ */

.mm-auth,
.mm-auth * {
    box-sizing: border-box;
}

/* Plasă de siguranță: Avada rulează șablonul nostru prin propriul lui wpautop, care —
   spre deosebire de nucleul WordPress — nu curăță întotdeauna paragrafele complet goale
   create pentru fiecare linie albă din markup (confirmat live, prin view-source, pe
   merrymusicschool.ro/login/: rămâneau `<p></p>` reale înaintea tag-urilor de închidere,
   inclusiv unul chiar înainte de finalul paginii — sursa liniei albe raportate de
   utilizator). Am eliminat liniile albe din PHP la sursă (0.93.4), dar regula de mai jos
   rămâne ca plasă de siguranță — un `<p>` fără text și fără copii nu ar trebui NICIODATĂ
   să ocupe spațiu vizibil aici. */
.mm-auth p:empty {
    display: none !important;
}

/* Din același motiv, un element fără clasă (ex: un `<button>` prins accidental într-un
   `<p>` de Avada, fiindcă `<button>` nu e pe lista de tag-uri „de bloc" a wpautop-ului)
   nu trebuie să capete marginea implicită de paragraf a browserului — spațierea reală e
   controlată strict de `gap` pe `.mm-auth-form`. */
.mm-auth p:not([class]) {
    margin: 0;
}

.mm-auth {
    /* Text */
    --mm-ink: #14161A;
    --mm-ink-2: #5B6472;
    --mm-ink-3: #8A93A3;
    /* Linii și suprafețe */
    --mm-line: #E7E9EE;
    --mm-line-2: #F1F3F6;
    --mm-soft: #F6F7F9;
    /* Accent (roșul școlii) */
    --mm-brand: #CB0A1A;
    --mm-brand-2: #F73760;
    --mm-brand-dark: #A80815;
    /* Panoul de brand (navy-ul real al site-ului, nu negru pur) */
    --mm-navy: #22253D;
    /* Semantice */
    --mm-ok: #067A46;
    --mm-ok-bg: #E7F6EE;
    --mm-warn: #92400E;
    --mm-bad: #B42318;
    --mm-bad-bg: #FEF0EF;
    /* Rotunjiri */
    --mm-r-sm: 10px;
    --mm-r: 14px;
    --mm-r-lg: 24px;

    display: flex;
    justify-content: center;
    width: 100%;
    padding: 40px 20px 56px;
    color: var(--mm-ink);
    font-size: 15px;
    line-height: 1.55;
}

/* Iconurile SVG moștenesc culoarea textului și se scalează cu fontul. */
.mm-auth .mm-ico {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
    display: inline-block;
    vertical-align: -0.18em;
}

/* ── Scena: cardul cu cele două panouri ──────────────────────────────────── */

.mm-auth-scena {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    width: 100%;
    max-width: 1040px;
    background: #fff;
    border-radius: var(--mm-r-lg);
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(16, 24, 40, 0.04),
        0 24px 60px -12px rgba(16, 24, 40, 0.18);
    animation: mm-auth-intra 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes mm-auth-intra {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

/* ── Panoul de brand (stânga) ────────────────────────────────────────────── */

.mm-auth-brand {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 42px 38px;
    color: #fff;
    overflow: hidden;
    /* Două "aurore" calde peste un navy profund — roșul brandului apare aici ca
       lumină difuză, nu ca suprafață plină (roșu mult, plat, a fost respins). */
    background:
        radial-gradient(115% 85% at 10% 6%, rgba(247, 55, 96, 0.34), transparent 58%),
        radial-gradient(100% 80% at 94% 100%, rgba(203, 10, 26, 0.38), transparent 60%),
        linear-gradient(158deg, #262A47 0%, #1A1D31 58%, #101223 100%);
}

/* Notă muzicală uriașă, abia vizibilă — dă adâncime fără să încarce. */
.mm-auth-brand::after {
    content: "";
    position: absolute;
    right: -58px;
    bottom: -52px;
    width: 260px;
    height: 260px;
    z-index: -1;
    opacity: 0.07;
    background: currentColor;
    -webkit-mask: var(--mm-nota) center / contain no-repeat;
    mask: var(--mm-nota) center / contain no-repeat;
    --mm-nota: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18V5l12-2v13'/%3E%3Ccircle cx='6' cy='18' r='3'/%3E%3Ccircle cx='18' cy='16' r='3'/%3E%3C/svg%3E");
}

.mm-auth-marca {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 15px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.mm-auth-marca-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
}

.mm-auth-marca-ico .mm-ico {
    width: 19px;
    height: 19px;
}

/* `margin: auto 0` centrează blocul în spațiul rămas între marcă (sus) și nota de
   subsol (jos). Cu `margin-top: auto` singur, textul se lipea de subsol și lăsa un gol
   mare sub logo pe cardurile înalte (formularul de cont nou are patru câmpuri). */
.mm-auth-brand-mij {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: auto 0;
}

.mm-auth-brand-titlu {
    margin: 0;
    font-size: 27px;
    line-height: 1.22;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: #fff;
}

.mm-auth-brand-text {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

.mm-auth-puncte {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.mm-auth-puncte li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.9);
}

.mm-auth-punct-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.mm-auth-punct-ico .mm-ico {
    width: 15px;
    height: 15px;
}

/* Fără `margin-top: auto` aici: îl are deja `.mm-auth-brand-mij`, iar două margini
   automate în aceeași coloană flex ar împărți spațiul liber între ele, în loc să
   împingă tot blocul în jos. */
.mm-auth-brand-jos {
    margin: 0;
    padding-top: 26px;
    border-top: 1px solid rgba(255, 255, 255, 0.13);
    font-size: 12.5px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
}

/* ── Panoul de formular (dreapta) ────────────────────────────────────────── */

.mm-auth-panou {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 46px 44px;
    background: #fff;
}

.mm-auth-continut {
    width: 100%;
    max-width: 380px;
}

.mm-auth-cap {
    margin-bottom: 26px;
}

.mm-auth-titlu {
    margin: 0 0 7px;
    font-size: 25px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.022em;
    color: var(--mm-ink);
}

.mm-auth-sub {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.55;
    color: var(--mm-ink-2);
}

/* ── Formular ────────────────────────────────────────────────────────────── */

.mm-auth-form {
    display: flex;
    flex-direction: column;
    gap: 17px;
}

.mm-auth-camp {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.mm-auth-camp-cap {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.mm-auth-camp-cap label,
.mm-auth-camp > label {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mm-ink);
    letter-spacing: -0.005em;
}

.mm-auth-camp-hint {
    font-weight: 400;
    color: var(--mm-ink-3);
    font-size: 12.5px;
}

.mm-auth-camp-link {
    font-size: 12.5px;
    font-weight: 550;
    color: var(--mm-ink-2);
    text-decoration: none;
    transition: color 0.15s ease;
}

.mm-auth-camp-link:hover {
    color: var(--mm-brand);
    text-decoration: underline;
}

/* Controlul propriu-zis: icon la stânga, input în mijloc, (opțional) ochi la dreapta. */
.mm-auth-camp-control {
    position: relative;
    display: flex;
    align-items: center;
}

.mm-auth-camp-ico {
    position: absolute;
    left: 14px;
    display: inline-flex;
    align-items: center;
    pointer-events: none;
    color: var(--mm-ink-3);
    transition: color 0.15s ease;
}

.mm-auth-camp-ico .mm-ico {
    width: 17px;
    height: 17px;
}

.mm-auth .mm-auth-camp-control input {
    width: 100%;
    margin: 0;
    padding: 13px 14px 13px 42px;
    /* 16px, NU mai puțin: sub pragul ăsta, iOS Safari face automat zoom la focus pe
       câmp — exact „zoom-ul enervant" raportat de utilizator. Peste 16px, Safari nu
       mai intervine deloc. */
    font-size: 16px;
    line-height: 1.4;
    font-family: inherit;
    color: var(--mm-ink);
    background: var(--mm-soft);
    border: 1px solid var(--mm-line);
    border-radius: var(--mm-r);
    box-shadow: none;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.mm-auth .mm-auth-camp-control input::placeholder {
    color: var(--mm-ink-3);
}

.mm-auth .mm-auth-camp-control input:hover {
    border-color: #D8DCE4;
}

.mm-auth .mm-auth-camp-control input:focus {
    outline: none;
    background: #fff;
    border-color: var(--mm-brand);
    box-shadow: 0 0 0 4px rgba(203, 10, 26, 0.11);
}

.mm-auth-camp-control:focus-within .mm-auth-camp-ico {
    color: var(--mm-brand);
}

/* Câmpurile de parolă lasă loc butonului "arată parola". */
.mm-auth .mm-auth-camp-control input[type="password"],
.mm-auth .mm-auth-camp-control input.mm-auth-camp-cu-ochi {
    padding-right: 46px;
}

.mm-auth .mm-auth-camp-control .msp-toggle-parola {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 9px;
    color: var(--mm-ink-3);
    cursor: pointer;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.mm-auth .mm-auth-camp-control .msp-toggle-parola:hover {
    color: var(--mm-ink);
    background: var(--mm-line-2);
}

/* ── Indicator de putere a parolei ───────────────────────────────────────── */

.mm-forta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.mm-forta[hidden] {
    display: none;
}

.mm-forta-bare {
    display: flex;
    gap: 4px;
    flex: 1 1 auto;
}

.mm-forta-bare span {
    flex: 1 1 0;
    height: 4px;
    border-radius: 99px;
    background: var(--mm-line);
    transition: background-color 0.2s ease;
}

.mm-forta-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--mm-ink-3);
    min-width: 62px;
    text-align: right;
}

.mm-forta[data-nivel="1"] .mm-forta-bare span:nth-child(-n+1) { background: #E5484D; }
.mm-forta[data-nivel="2"] .mm-forta-bare span:nth-child(-n+2) { background: #F0910B; }
.mm-forta[data-nivel="3"] .mm-forta-bare span:nth-child(-n+3) { background: #3E9B4F; }
.mm-forta[data-nivel="4"] .mm-forta-bare span                 { background: var(--mm-ok); }

.mm-forta[data-nivel="1"] .mm-forta-text { color: #E5484D; }
.mm-forta[data-nivel="2"] .mm-forta-text { color: #B26800; }
.mm-forta[data-nivel="3"] .mm-forta-text,
.mm-forta[data-nivel="4"] .mm-forta-text { color: var(--mm-ok); }

/* ── Butonul principal ───────────────────────────────────────────────────── */

.mm-auth .mm-auth-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    margin-top: 6px;
    padding: 14px 20px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 650;
    line-height: 1.3;
    /* `!important` pentru că butonul e uneori un `<a>` (ex: „Mergi la contul tău”), iar
       temele dau culoare linkurilor cu specificitate mare. */
    color: #fff !important;
    text-decoration: none;
    background: var(--mm-brand);
    border: none;
    border-radius: var(--mm-r);
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.mm-auth .mm-auth-btn:hover {
    background: var(--mm-brand-dark);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(203, 10, 26, 0.26);
}

.mm-auth .mm-auth-btn:active {
    transform: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08);
}

.mm-auth .mm-auth-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(203, 10, 26, 0.24);
}

.mm-auth .mm-auth-btn .mm-ico {
    width: 17px;
    height: 17px;
}

/* ── Subsolul panoului (link-uri) ────────────────────────────────────────── */

.mm-auth-jos {
    margin: 24px 0 0;
    padding-top: 20px;
    border-top: 1px solid var(--mm-line-2);
    text-align: center;
    font-size: 13.5px;
    color: var(--mm-ink-2);
}

.mm-auth-jos a {
    color: var(--mm-brand);
    font-weight: 600;
    text-decoration: none;
}

.mm-auth-jos a:hover {
    text-decoration: underline;
}

.mm-auth-inapoi {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--mm-ink-2) !important;
    font-weight: 550 !important;
}

.mm-auth-inapoi:hover {
    color: var(--mm-ink) !important;
}

.mm-auth-inapoi .mm-ico {
    width: 15px;
    height: 15px;
}

/* ── Mesaje (eroare / succes) ────────────────────────────────────────────── */

.mm-auth-mesaj {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0 18px;
    padding: 12px 14px;
    border-radius: var(--mm-r-sm);
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 500;
}

.mm-auth-mesaj .mm-ico {
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

.mm-auth-mesaj-rau {
    background: var(--mm-bad-bg);
    color: var(--mm-bad);
}

.mm-auth-mesaj-bun {
    background: var(--mm-ok-bg);
    color: var(--mm-ok);
}

/* Stare "gata" pe tot panoul: email de resetare trimis, cont deja autentificat. */
.mm-auth-stare {
    text-align: center;
}

.mm-auth-stare-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--mm-ok-bg);
    color: var(--mm-ok);
}

.mm-auth-stare-ico .mm-ico {
    width: 27px;
    height: 27px;
}

.mm-auth-stare .mm-auth-titlu {
    margin-bottom: 9px;
}

/* Un buton singur, fără formular în jurul lui (stările „gata” / „link expirat”). */
.mm-auth-actiune {
    margin: 24px 0 0;
}

.mm-auth-nota {
    margin: 12px 0 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--mm-ink-3);
}

/* Caseta de validare injectată de msp-validare.js, adusă în limbajul paginii. */
.mm-auth .msp-eroare-validare {
    background: var(--mm-bad-bg);
    color: var(--mm-bad);
    padding: 12px 14px;
    border-radius: var(--mm-r-sm);
    font-size: 13.5px;
    font-weight: 600;
    margin: 0 0 4px;
}

.mm-auth .msp-camp-invalid {
    border-color: var(--mm-bad) !important;
    background: #FFF8F8 !important;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Între 641–900px (tabletă, telefon mare pe orizontală): cardul rămâne un card,
   dar devine o singură coloană — panoul de brand se strânge într-o bandă de sus.
   Punctele de valoare și textul de subsol RĂMÂN vizibile (la cererea explicită a
   utilizatorului: „tot textul la fel ca pe desktop" — până la 0.93.6 dispăreau
   aici, ca să nu împingă formularul sub linia de plutire; utilizatorul a preferat
   totuși textul complet, chiar cu prețul unei pagini puțin mai lungi). */
@media (max-width: 900px) {
    .mm-auth {
        padding: 22px 14px 40px;
    }

    .mm-auth-scena {
        grid-template-columns: 1fr;
        max-width: 480px;
        border-radius: 20px;
    }

    /* Ecranele care cer o acțiune imediată (`.mm-auth-scena-formular-intai`, adăugată
       din PHP via scena_start($brand, true)) inversează ordinea: pe coloană unică,
       formularul trece înaintea panoului de brand — login, „parolă uitată" și ecranul
       „ești deja autentificat". Doar „cont nou" păstrează ordinea implicită (brand,
       apoi formular). `order` funcționează la fel în grid ca în flex. */
    .mm-auth-scena-formular-intai .mm-auth-panou {
        order: -1;
    }

    .mm-auth-brand {
        gap: 18px;
        padding: 28px 28px 30px;
    }

    .mm-auth-brand::after {
        right: -70px;
        bottom: -80px;
        width: 190px;
        height: 190px;
    }

    .mm-auth-brand-mij {
        margin: 0;
        gap: 8px;
    }

    .mm-auth-brand-titlu {
        font-size: 22px;
    }

    .mm-auth-brand-text {
        font-size: 14px;
    }

    .mm-auth-panou {
        padding: 30px 28px 34px;
    }

    .mm-auth-continut {
        max-width: none;
    }
}

/* Sub 640px (telefon): pe cererea explicită a utilizatorului, dispare complet
   aspectul de „card" — nu mai stă pe un fundal decupat, cu margini vizibile în
   jur. Pagina ocupă tot ecranul, edge-to-edge: fără colțuri rotunjite, fără
   umbră, fără padding lateral pe wrapper, fundalul cardului devine fundalul
   paginii. Banda de brand rămâne (marcă + titlu), doar fără "insula" din jurul
   ei.

   „Ieșirea din container" (width:100vw + left:50% + margin-left:-50vw) e
   necesară fiindcă simplul `padding:0` de mai jos NU ajunge la lățime completă
   pe site-ul real: shortcode-ul rulează în interiorul unui rând Avada/Fusion
   Builder care NU e marcat „Full Width" în pagina de login, deci moștenește
   ~30px de padding pe fiecare parte de la containerul lui (`.fusion-fullwidth`
   → `main.width-100`, ambele cu `padding: 30px`). Tehnica asta „sparge" acel
   padding indiferent cât de adânc e — poziționează elementul relativ la EL
   ÎNSUȘI (nu la părinte), apoi îl deplasează cu jumătate din lățimea reală a
   viewport-ului, ajungând exact la marginile ecranului. Verificat live, pe
   merrymusicschool.ro/login/, prin măsurători JS (getBoundingClientRect):
   0 → lățimea viewport-ului, fără niciun pixel de depășire pe document — nu
   introduce scroll orizontal (body-ul Avada are oricum `overflow-x: hidden`
   global, ca plasă de siguranță suplimentară). */
@media (max-width: 640px) {
    .mm-auth {
        width: 100vw;
        position: relative;
        left: 50%;
        margin-left: -50vw;
        padding: 0;
        background: #fff;
    }

    .mm-auth-scena {
        max-width: none;
        border-radius: 0;
        box-shadow: none;
        animation: none;
    }

    /* Padding-ul orizontal al celor două panouri TREBUIE să fie identic — pe telefon ele
       stau unul sub altul, deci orice diferență se vede direct ca text nealiniat între
       „Bine ai revenit" și titlul din banda de brand de deasupra (bug real, raportat de
       utilizator: panoul avea 20px, banda de brand moștenea 28px din breakpoint-ul de
       900px, fără să fie redefinită aici). */
    .mm-auth-brand {
        padding: 30px 28px 32px;
    }

    .mm-auth-panou {
        padding: 30px 28px 44px;
    }
}

@media (max-width: 420px) {
    .mm-auth-brand {
        padding: 26px 22px 28px;
    }

    .mm-auth-panou {
        padding: 26px 22px 40px;
    }

    .mm-auth-titlu {
        font-size: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mm-auth-scena {
        animation: none;
    }

    .mm-auth .mm-auth-btn:hover {
        transform: none;
    }
}


/* Vezi nota din msp-dashboard.css: pe iOS, un câmp cu text sub 16px face pagina să se
   mărească singură la atingere. Paginile de autentificare folosesc deja 16px peste tot,
   dar punem regula și aici, ca plasă de siguranță pentru câmpurile adăugate ulterior. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    .mm-auth input,
    .mm-auth select,
    .mm-auth textarea {
        font-size: 16px;
    }
}