/* ==========================================================================
   Auth surface — /cont-nou/ and wp-login.php
   ==========================================================================

   ONE stylesheet for both, because they are two halves of the same journey: the header's
   "Adaugă întrebare" sends people to the ask page, which gates them to /cont-nou/, which
   cross-links to wp-login. Styling them separately is how they drift apart.

   It has to work in two very different contexts:

     - /cont-nou/  — main.css and qa.css are already loaded, so the theme's :root tokens exist.
     - wp-login.php — NO theme templates, NO main.css. Only wp-admin's login.css.

   Hence the token block below: every value is `var(--theme-token, literal)`. On the front end
   the theme's own value wins and this file stays in sync automatically; on wp-login the theme
   token is undefined and the literal takes over. Change a colour in main.css :root and the
   /cont-nou/ page follows on its own — only the login screen needs the literal updated.
   ========================================================================== */

.eco-auth {
    --auth-ink:        var(--color-ink, #1A1A24);
    --auth-ink-light:  var(--color-ink-light, #6B6B7B);
    --auth-ink-muted:  var(--color-ink-muted, #9B9BAB);
    --auth-bg:         var(--color-bg, #FAFAF7);
    --auth-card:       var(--color-bg-card, #FFFFFF);
    --auth-dark:       var(--color-bg-dark, #0F0F14);
    --auth-dark-2:     var(--color-bg-dark-2, #1A1A24);
    --auth-border:     var(--color-border, #E8E6E1);
    --auth-accent:     var(--color-accent, #C8553D);
    --auth-accent-lt:  var(--color-accent-light, #E8765F);
    --auth-btn:        var(--color-btn, #CC4C4C);
    --auth-btn-hover:  var(--color-btn-hover, #D96666);
    --auth-emerald:    var(--color-emerald, #2D6A4F);

    --auth-font-display: var(--font-display, 'Funnel Display', Arial, sans-serif);
    --auth-font-body:    var(--font-body, 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);

    --auth-radius:     var(--radius-md, 8px);
    --auth-radius-lg:  var(--radius-lg, 12px);
    --auth-ease:       var(--transition, 0.3s cubic-bezier(0.16, 1, 0.3, 1));
}

/* ==========================================================================
   Shared shell
   ========================================================================== */

/* The form column is the wider of the two. The brand panel is support material — giving it
   an equal half makes the page read as a landing page rather than a form to fill in. */
.eco-auth__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: stretch;
    gap: 0;
    border-radius: var(--auth-radius-lg);
    overflow: hidden;
    box-shadow: 0 16px 48px rgba(15, 15, 20, 0.10);
}

.eco-auth__col {
    min-width: 0;
}

.eco-auth__col--form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: var(--auth-card);
}

/* ==========================================================================
   Form column
   ========================================================================== */

.eco-auth__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.75rem;
    font-family: var(--auth-font-display);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--auth-accent);
}

.eco-auth__eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--auth-accent);
    flex-shrink: 0;
}

.eco-auth__title {
    margin: 0 0 0.6rem;
    font-family: var(--auth-font-display);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: var(--auth-ink);
}

.eco-auth__lede {
    max-width: 46ch;
    margin: 0 0 2rem;
    font-family: var(--auth-font-body);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--auth-ink-light);
}

/* --- notices --- */
.eco-auth__notice {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border-radius: var(--auth-radius);
    font-family: var(--auth-font-body);
    font-size: 0.875rem;
    line-height: 1.55;
    border: 1px solid transparent;
}

.eco-auth__notice svg {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.eco-auth__notice--error {
    background: #FDF0ED;
    border-color: rgba(200, 85, 61, 0.25);
    color: #8C2F1C;
}

.eco-auth__notice--ok {
    background: #EDF7F1;
    border-color: rgba(45, 106, 79, 0.22);
    color: #1F4D39;
}

/* --- fields ---
   Laid out with grid rather than inline-block halves: the template emits sibling <p>s
   separated by newlines, and that whitespace makes two 50%-wide inline-blocks overflow and
   wrap. Same reasoning as the answer form in qa.css. */
.eco-auth__form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    align-items: start;
}

.eco-auth__form > * {
    grid-column: 1 / -1;
    min-width: 0;
}

.eco-auth__field {
    margin: 0 0 1.25rem;
}

.eco-auth__field--half {
    grid-column: span 1;
}

/* Scoped to `.eco-auth__field > label`, NOT `.eco-auth__form label`.
   The radio options are <label>s too, and `.eco-auth__form label` (0,1,1) outranks
   `.eco-auth__opt` (0,1,0) — which forced them back to display:block and collapsed the
   radio pseudo-element into a sliver. Every real field label is a direct child of a
   .eco-auth__field, so this targets exactly them and leaves the options alone. */
.eco-auth__field > label {
    display: block;
    margin: 0 0 0.4rem;
    font-family: var(--auth-font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--auth-ink);
}

.eco-auth__req {
    color: var(--auth-accent);
}

.eco-auth__optional {
    font-weight: 400;
    color: var(--auth-ink-muted);
}

/* input[type="password"] is listed explicitly. It is missing from the equivalent rule in
   qa.css, which is why the password box on /cont-nou/ rendered at the browser default ~175px
   next to 350px name and email boxes. */
.eco-auth__form input[type="text"],
.eco-auth__form input[type="email"],
.eco-auth__form input[type="url"],
.eco-auth__form input[type="password"],
.eco-auth__form select,
.eco-auth__form textarea {
    width: 100%;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: var(--auth-bg);
    font-family: var(--auth-font-body);
    font-size: 0.9375rem;
    color: var(--auth-ink);
    transition: border-color var(--auth-ease), box-shadow var(--auth-ease), background var(--auth-ease);
    -webkit-appearance: none;
    appearance: none;
}

/* 16px, so iOS does not zoom the viewport when the field takes focus. See the matching block
   in qa.css for why this is keyed on the pointer rather than a width breakpoint. */
@media (pointer: coarse) {
    .eco-auth__form input[type="text"],
    .eco-auth__form input[type="email"],
    .eco-auth__form input[type="url"],
    .eco-auth__form input[type="password"],
    .eco-auth__form select,
    .eco-auth__form textarea {
        font-size: 1rem;
    }
}

.eco-auth__form input::placeholder {
    color: var(--auth-ink-muted);
}

.eco-auth__form input:focus,
.eco-auth__form select:focus,
.eco-auth__form textarea:focus {
    outline: none;
    background: var(--auth-card);
    border-color: var(--auth-accent);
    box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.12);
}

/* :user-invalid, never :not(:placeholder-shown):invalid — a field with no placeholder never
   matches :placeholder-shown, so the negation is always true and an untouched required input
   renders with a red error border before anyone has typed. */
.eco-auth__form input:user-invalid {
    border-color: var(--auth-accent);
    background: #FDF6F4;
}

.eco-auth__hint {
    display: block;
    margin-top: 0.4rem;
    font-family: var(--auth-font-body);
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--auth-ink-muted);
}

/* --- password field with a reveal toggle ---
   .eco-auth__pass wraps the input and the button ONLY. It cannot be the whole field: the
   button is absolutely positioned, and anchoring it to a box that starts at the label puts it
   a label-height above the input. */
/* flex, not block: an <input> is inline-block, so a block wrapper picks up the line-box
   descender gap and the button ends up a few pixels taller than the field it sits in. */
.eco-auth__pass {
    position: relative;
    display: flex;
}

.eco-auth__pass input {
    padding-right: 3rem;
}

.eco-auth__reveal {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Full field height and 44px wide — a real tap target, not an icon to aim at. */
    width: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--auth-ink-muted);
    cursor: pointer;
    border-radius: var(--auth-radius);
    transition: color var(--auth-ease);
}

.eco-auth__reveal:hover,
.eco-auth__reveal:focus-visible {
    color: var(--auth-ink);
}

.eco-auth__reveal:focus-visible {
    outline: 2px solid var(--auth-accent);
    outline-offset: -2px;
}

.eco-auth__reveal .eco-auth__eye-off {
    display: none;
}

.eco-auth__reveal[aria-pressed="true"] .eco-auth__eye-on {
    display: none;
}

.eco-auth__reveal[aria-pressed="true"] .eco-auth__eye-off {
    display: block;
}

/* --- segmented "who are you" control --- */
.eco-auth__fieldset {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.eco-auth__legend {
    padding: 0;
    margin: 0 0 0.4rem;
    font-family: var(--auth-font-display);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--auth-ink);
}

.eco-auth__segment {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.eco-auth__opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.9rem;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: var(--auth-bg);
    font-family: var(--auth-font-body);
    font-size: 0.9375rem;
    color: var(--auth-ink-light);
    cursor: pointer;
    transition: border-color var(--auth-ease), background var(--auth-ease), color var(--auth-ease);
}

.eco-auth__opt input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* The dot is drawn by CSS rather than the native radio, so the checked state can carry the
   accent colour on every browser. The real input stays in the DOM for keyboard and AT. */
.eco-auth__opt::before {
    content: "";
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    /* 2px of a mid grey rather than 1.5px of --auth-ink-muted: at 1.5px the unselected ring
       reads as a stray vertical line next to the label instead of an empty radio. */
    border: 2px solid #B4B4C0;
    background: var(--auth-card);
    transition: border-color var(--auth-ease), border-width var(--auth-ease);
}

.eco-auth__opt:has(input:checked) {
    border-color: var(--auth-accent);
    background: var(--auth-card);
    color: var(--auth-ink);
}

.eco-auth__opt:has(input:checked)::before {
    border-color: var(--auth-accent);
    border-width: 6px;
}

.eco-auth__opt:has(input:focus-visible) {
    outline: 2px solid var(--auth-accent);
    outline-offset: 2px;
}

/* --- optional business block --- */
.eco-auth__business {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    padding: 1.25rem;
    margin: 0 0 1.25rem;
    border: 1px dashed var(--auth-border);
    border-radius: var(--auth-radius);
    background: var(--auth-bg);
}

.eco-auth__business[hidden] {
    display: none;
}

.eco-auth__business > * {
    grid-column: 1 / -1;
}

.eco-auth__business > .eco-auth__field--half {
    grid-column: span 1;
}

.eco-auth__business-note {
    margin: 0 0 1rem;
    font-family: var(--auth-font-body);
    font-size: 0.8125rem;
    color: var(--auth-ink-muted);
}

/* --- honeypot: hidden from people, irresistible to bots.
   Not display:none — some bots skip those. Off-screen but focusable-in-theory. --- */
.eco-auth__hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* --- submit --- */
.eco-auth__submit {
    width: 100%;
    padding: 0.9rem 1.5rem;
    border: none;
    border-radius: var(--auth-radius);
    background: var(--auth-btn);
    color: #fff;
    font-family: var(--auth-font-display);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--auth-ease), transform var(--auth-ease), box-shadow var(--auth-ease);
}

.eco-auth__submit:hover {
    background: var(--auth-btn-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(204, 76, 76, 0.28);
}

.eco-auth__submit:active {
    transform: translateY(0);
}

.eco-auth__submit:focus-visible {
    outline: 2px solid var(--auth-ink);
    outline-offset: 2px;
}

/* --- cross-link to the other auth page ---
   A bordered row, not the muted one-liner it replaced: this is the single most-needed escape
   hatch on either page (wrong page, already has an account) and it was previously grey text
   the same size as the form hints. */
.eco-auth__alt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--auth-border);
    font-family: var(--auth-font-body);
    font-size: 0.9375rem;
    color: var(--auth-ink-light);
}

.eco-auth__alt-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    font-family: var(--auth-font-display);
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--auth-ink);
    text-decoration: none;
    transition: border-color var(--auth-ease), color var(--auth-ease), background var(--auth-ease);
}

.eco-auth__alt-link:hover {
    border-color: var(--auth-accent);
    color: var(--auth-accent);
    background: var(--auth-card);
}

/* --- Turnstile inside an auth form --- */
.eco-auth .ecompedia-turnstile {
    margin: 0 0 1.25rem;
}

/* --- fine print --- */
.eco-auth__fine {
    margin: 1rem 0 0;
    font-family: var(--auth-font-body);
    font-size: 0.75rem;
    line-height: 1.6;
    color: var(--auth-ink-muted);
}

.eco-auth__fine a {
    color: var(--auth-ink-light);
}

/* ==========================================================================
   Brand column
   ==========================================================================
   Deep ink rather than a photo: the footer and the homepage stats band are already this
   colour, so the panel reads as part of the site instead of stock signup art — and there is
   no image to load, hotlink from ecompedia.ro, or go stale. */

.eco-auth__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: clamp(2rem, 4vw, 3.5rem);
    background: linear-gradient(155deg, var(--auth-dark-2) 0%, var(--auth-dark) 100%);
    color: #fff;
    overflow: hidden;
}

/* A single soft warm glow, top-right, so the panel is not a flat black rectangle. */
.eco-auth__brand::before {
    content: "";
    position: absolute;
    top: -30%;
    right: -25%;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(232, 118, 95, 0.20) 0%, rgba(232, 118, 95, 0) 70%);
    pointer-events: none;
}

.eco-auth__brand > * {
    position: relative;
}

.eco-auth__wordmark {
    display: inline-flex;
    align-items: center;
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    letter-spacing: -0.5px;
    text-decoration: none;
    color: #fff;
}

.eco-auth__wordmark b {
    font-weight: 800;
}

.eco-auth__wordmark span {
    font-weight: 400;
    color: rgba(255, 255, 255, 0.85);
}

.eco-auth__promise {
    margin: 0;
    max-width: 20ch;
    font-family: var(--auth-font-display);
    font-size: clamp(1.35rem, 2.2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.015em;
}

.eco-auth__benefits {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.eco-auth__benefit {
    display: flex;
    gap: 0.85rem;
}

.eco-auth__benefit-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--auth-accent-lt);
}

.eco-auth__benefit-title {
    display: block;
    margin: 0 0 0.15rem;
    font-family: var(--auth-font-display);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    color: #fff;
}

.eco-auth__benefit-note {
    display: block;
    font-family: var(--auth-font-body);
    font-size: 0.8125rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.62);
}

/* --- real community numbers --- */
.eco-auth__stats {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: 1.75rem;
    margin: 0;
    padding-top: 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.eco-auth__stat dt {
    font-family: var(--auth-font-body);
    font-size: 0.75rem;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.55);
    order: 2;
}

.eco-auth__stat dd {
    margin: 0 0 0.15rem;
    font-family: var(--auth-font-display);
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fff;
    order: 1;
}

.eco-auth__stat {
    display: flex;
    flex-direction: column;
}

.eco-auth__stat-suffix {
    color: var(--auth-accent-lt);
}

/* ==========================================================================
   /cont-nou/ page wrapper
   ========================================================================== */

.eco-auth--page {
    padding: clamp(2rem, 5vw, 4rem) 0;
}

/* The theme's .container is Tailwind's, which resolves to 1536px — the form card used to sit
   in the left 780px of it with half the row empty. The auth grid gets its own cap and is
   centred, so it never inherits that width again. */
.eco-auth--page .eco-auth__shell {
    max-width: 1080px;
    margin: 0 auto;
}

/* ==========================================================================
   wp-login.php
   ==========================================================================
   Core's login.css centres a 320px #login block on #f0f0f1. Everything below re-homes that
   block into the shared two-column shell. */

body.login {
    margin: 0;
    padding: 0;
    min-width: 0;
    background: var(--color-bg, #FAFAF7);
    font-family: 'Noto Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.eco-auth--login {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    min-height: 100vh;
}

.eco-auth--login .eco-auth__grid,
.eco-auth--login .eco-auth__col--form {
    box-shadow: none;
    border-radius: 0;
}

.eco-auth--login .eco-auth__col--form {
    align-items: center;
}

.eco-auth--login .eco-auth__brand {
    border-radius: 0;
}

/* The whole core block, re-scoped. width:auto lets it fill the column instead of staying at
   its hard-coded 320px, which looked lost in a half-page panel. */
body.login #login {
    width: 100%;
    max-width: 420px;
    padding: 0;
    margin: 0;
}

/* Core's WordPress logo. Replaced by the wordmark printed into the brand panel, so the
   original is removed rather than restyled — retargeting its background-image would break
   again the next time core changes the file name.

   ⚠️ :not(.screen-reader-text), NOT a bare `h1`. WP 7.0 prints TWO h1s on this page — the
   logo (h1.wp-login-logo, role="presentation") and the real page heading
   (h1.screen-reader-text, "Autentifică-te"), which is visually hidden but is the page's only
   heading. `body.login h1 {display:none}` takes out both and leaves the screen with no h1 at
   all. The :not() form also survives older markup, where the logo h1 carried no class. */
body.login h1:not(.screen-reader-text) {
    display: none;
}

body.login form {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-weight: 400;
    overflow: visible;
}

body.login form .forgetmenot {
    float: none;
    margin: 0;
    font-weight: 400;
}

body.login label {
    display: block;
    margin: 0 0 0.4rem;
    font-family: var(--font-display, 'Funnel Display', Arial, sans-serif);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-ink, #1A1A24);
    line-height: 1.4;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login .wp-pwd input[type="text"] {
    width: 100%;
    margin: 0 0 1.25rem;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--color-border, #E8E6E1);
    border-radius: var(--radius-md, 8px);
    background: var(--color-bg, #FAFAF7);
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.9375rem;
    line-height: 1.4;
    color: var(--color-ink, #1A1A24);
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

/* 16px, so iOS does not zoom the viewport when the field takes focus. */
@media (pointer: coarse) {
    body.login form .input,
    body.login input[type="text"],
    body.login input[type="email"],
    body.login input[type="password"],
    body.login .wp-pwd input[type="text"] {
        font-size: 1rem;
    }
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-accent, #C8553D);
    box-shadow: 0 0 0 3px rgba(200, 85, 61, 0.12);
}

/* Core's show/hide password button sits inside a .wp-pwd wrapper. */
body.login .wp-pwd {
    position: relative;
    margin: 0;
}

body.login .wp-pwd input {
    padding-right: 3rem;
}

body.login .wp-pwd .button.wp-hide-pw {
    top: 0;
    right: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--color-ink-muted, #9B9BAB);
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
    color: var(--color-ink, #1A1A24);
    background: none;
    box-shadow: none;
    border: 0;
}

body.login .forgetmenot label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'Noto Sans', sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--color-ink-light, #6B6B7B);
    cursor: pointer;
}

body.login input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    border-radius: 3px;
    border: 1px solid var(--color-border, #E8E6E1);
    accent-color: var(--color-accent, #C8553D);
}

body.login input[type="checkbox"]:checked::before {
    content: none;
}

/* Submit row: core floats the button right of "Remember me". Grid instead, so the button is
   full width on its own line — the primary action should not be a small right-aligned chip. */
body.login .submit,
body.login p.submit {
    margin: 1.25rem 0 0;
    padding: 0;
    text-align: left;
}

body.login .submit .button-primary,
body.login #wp-submit {
    float: none;
    display: block;
    width: 100%;
    height: auto;
    padding: 0.9rem 1.5rem;
    border: none;
    border-radius: var(--radius-md, 8px);
    background: var(--color-btn, #CC4C4C);
    color: #fff;
    font-family: var(--font-display, 'Funnel Display', Arial, sans-serif);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    text-shadow: none;
    box-shadow: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
}

body.login .submit .button-primary:hover,
body.login #wp-submit:hover {
    background: var(--color-btn-hover, #D96666);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(204, 76, 76, 0.28);
}

body.login .submit .button-primary:focus,
body.login #wp-submit:focus {
    outline: 2px solid var(--color-ink, #1A1A24);
    outline-offset: 2px;
    box-shadow: none;
}

/* --- messages and errors --- */
body.login .notice,
body.login #login_error,
body.login .message,
body.login .success {
    margin: 0 0 1.5rem;
    padding: 0.85rem 1rem;
    border: 1px solid transparent;
    border-left-width: 1px;
    border-radius: var(--radius-md, 8px);
    background: #FDF0ED;
    border-color: rgba(200, 85, 61, 0.25);
    color: #8C2F1C;
    font-size: 0.875rem;
    line-height: 1.55;
    box-shadow: none;
}

body.login .message,
body.login .success,
body.login .notice-info {
    background: #EDF7F1;
    border-color: rgba(45, 106, 79, 0.22);
    color: #1F4D39;
}

body.login #login_error a,
body.login .message a {
    color: inherit;
}

/* --- the nav row core prints under the form --- */
body.login #nav,
body.login #backtoblog {
    margin: 0;
    padding: 0;
    font-size: 0.875rem;
    text-align: left;
}

/* Core prints the links as bare siblings separated by a text pipe. The pipe is filtered away
   (login_link_separator), so the gap has to come from the layout or "Creează cont" and
   "Ai uitat parola?" end up touching. */
body.login #nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border, #E8E6E1);
}

body.login #backtoblog {
    margin: 0.85rem 0 0;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-link {
    color: var(--color-ink-light, #6B6B7B);
    text-decoration: none;
    transition: color 0.2s;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-link:hover {
    color: var(--color-accent, #C8553D);
    text-decoration: underline;
}

/* Core's "Register" link is styled as the page's secondary CTA — it is the one thing a
   visitor who lands here by mistake actually needs. */
body.login #nav a.eco-auth__alt-link {
    color: var(--color-ink, #1A1A24);
}

body.login .privacy-policy-page-link {
    margin: 0.85rem 0 0;
    text-align: left;
}

body.login .clear {
    display: none;
}

/* The language switcher core adds under the form on multilingual installs. */
body.login .language-switcher {
    margin: 1rem 0 0;
}

/* Interim login is the small "session expired" modal inside wp-admin. It gets no brand panel
   (see login.php), so the shell must not force a viewport-height two-column grid on it. */
body.interim-login .eco-auth--login {
    display: block;
    min-height: 0;
}

body.interim-login #login {
    max-width: none;
}

/* ==========================================================================
   Responsive
   ==========================================================================
   The brand panel drops BELOW the form rather than being hidden. It carries the only social
   proof on the page, and hiding it on mobile would remove the reason to sign up from the
   majority of visitors. */

@media (max-width: 900px) {
    .eco-auth__grid,
    .eco-auth--login {
        grid-template-columns: 1fr;
    }

    .eco-auth--login {
        min-height: 0;
    }

    .eco-auth__brand {
        gap: 1.5rem;
    }

    .eco-auth__promise {
        max-width: none;
    }

    body.login #login {
        max-width: none;
    }
}

@media (max-width: 560px) {
    .eco-auth__form,
    .eco-auth__business {
        grid-template-columns: 1fr;
    }

    .eco-auth__field--half,
    .eco-auth__business > .eco-auth__field--half {
        grid-column: 1 / -1;
    }

    .eco-auth__segment {
        grid-template-columns: 1fr;
    }

    /* Three stats across a 320px column gives ~90px each, which wraps "întrebări" mid-word. */
    .eco-auth__stats {
        grid-template-columns: repeat(2, auto);
        gap: 1.25rem 1.75rem;
    }

    .eco-auth__alt {
        flex-direction: column;
        align-items: stretch;
    }

    .eco-auth__alt-link {
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .eco-auth__submit,
    body.login #wp-submit {
        transition: none;
    }

    .eco-auth__submit:hover,
    body.login #wp-submit:hover {
        transform: none;
    }
}