/* ============================================
   Cricova-branded WordPress login
   Enterprise-grade polish: brand block, refined inputs, gold accent on focus,
   custom checkbox / eye / caps-lock, footer copyright, micro-animations.
   ============================================ */

:root {
    --cl-bg:        #000;
    --cl-fg:        #fff;
    --cl-muted:     rgba(255, 255, 255, 0.62);
    --cl-faint:     rgba(255, 255, 255, 0.42);
    --cl-line:      rgba(255, 255, 255, 0.92);
    --cl-line-dim:  rgba(255, 255, 255, 0.16);
    --cl-line-mid:  rgba(255, 255, 255, 0.28);
    --cl-gold:      #b8944a;     /* matches --color-gold-light from theme.css */
    --cl-error:     #e3735a;
    --cl-radius:    999px;
    --cl-ease:      cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Page shell ──────────────────────────────────────────── */
html, body { margin: 0; padding: 0; }

/* Apply border-box scoped to the login page so padding is included in any
   100vh height calculation — otherwise body becomes (100vh + padding) tall
   and the browser shows a scrollbar even when nothing actually overflows. */
body.login,
body.login *,
body.login *::before,
body.login *::after {
    box-sizing: border-box;
}

body.login {
    background: var(--cl-bg);
    color: var(--cl-fg);
    font-family: 'Manrope', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    /* min-height (instead of fixed height) lets the body grow if a long error
       message + form genuinely needs more vertical space, so content can still
       scroll WHEN it actually overflows, but not on the resting state. 100dvh
       is the dynamic viewport on mobile (Safari address bar collapse). */
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    /* Flex-column so the brand block, form, and footer copyright stack vertically;
       align-items:center pins the column horizontally; justify-content:center
       pins the whole stack vertically in the viewport. */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

#login {
    width: 100%;
    max-width: 420px;
    padding: 0;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* Hide WP's default "W" logo — we render our own brand block via login_message */
#login h1,
#login h1 a {
    display: none !important;
    margin: 0;
    padding: 0;
}

/* ── Brand block (logo + kicker) ─────────────────────────── */
.cricova-login-brand {
    text-align: center;
    margin: 0 0 32px;
}

.cricova-login-logo {
    display: block;
    margin: 0 auto 16px;
    max-width: 220px;
    color: var(--cl-fg);
}
.cricova-login-logo svg {
    display: block;
    width: 100%;
    height: auto;
    color: var(--cl-fg);
    fill: currentColor;
}

.cricova-login-kicker {
    margin: 0;
    color: var(--cl-faint);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
}

/* A delicate divider under the kicker — white fade */
.cricova-login-kicker::after {
    content: "";
    display: block;
    width: 28px;
    height: 1px;
    margin: 14px auto 0;
    background: linear-gradient(90deg,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent);
}

/* ── The form card ───────────────────────────────────────── */
#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
    background: #000;
    border: 1px solid var(--cl-line);
    border-radius: 20px;
    padding: 36px 32px 28px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.55),
        0 8px 18px  rgba(0, 0, 0, 0.35);
    margin: 0;
    overflow: visible;
    animation: cricova-login-rise 0.55s var(--cl-ease) both;
}

@keyframes cricova-login-rise {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0)    scale(1);     }
}

/* ── Field rows: equalise spacing across <p> and <div.user-pass-wrap> ─
   !important needed because WP's bundled login.css uses higher-specificity
   selectors that win on the cascade otherwise. */
#loginform > p,
#loginform > .user-pass-wrap,
#lostpasswordform > p,
#registerform > p,
#resetpassform > p,
#resetpassform > .user-pass-wrap {
    margin: 0 0 22px !important;
}

/* The remember-me row sits between the password and the submit — give it
   more breathing room above (separating it from the password) and below
   (separating it from the call-to-action button). */
#loginform > .forgetmenot {
    margin: 6px 0 26px !important;
}

/* The submit row gets no extra bottom margin — the lost-password link
   below it has its own top margin. */
#loginform > .submit,
#lostpasswordform > .submit,
#registerform > .submit,
#resetpassform > .submit {
    margin: 0 !important;
}

/* ── Labels — same style for every field, regardless of WP wrapper ─── */
#loginform label[for="user_login"],
#loginform label[for="user_pass"],
#loginform .user-pass-wrap > label,
#registerform p label,
#lostpasswordform p label,
#resetpassform p label,
#resetpassform .user-pass-wrap > label,
.login p label[for] {
    display: block;
    color: var(--cl-muted);
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    margin: 0 0 10px 6px;
    line-height: 1;
}

/* The "Remember me" label is treated as inline body text, not a kicker ─ */
.login .forgetmenot label {
    color: var(--cl-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    line-height: 1.2;
}

/* ── Inputs ──────────────────────────────────────────────── */
.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
input[type="text"].input,
input[type="password"].input {
    width: 100%;
    height: 52px;
    padding: 0 22px;
    background: transparent;
    border: 1px solid var(--cl-line-dim);
    border-radius: var(--cl-radius);
    color: var(--cl-fg);
    font-family: inherit;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition:
        border-color 0.2s var(--cl-ease),
        background-color 0.2s var(--cl-ease),
        box-shadow 0.2s var(--cl-ease);
}

.login form .input::placeholder,
.login input[type="text"]::placeholder,
.login input[type="password"]::placeholder { color: var(--cl-faint); }

.login form .input:hover,
.login input[type="text"]:hover,
.login input[type="password"]:hover {
    border-color: var(--cl-line-mid);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
    border-color: var(--cl-fg);
    background: rgba(255, 255, 255, 0.03);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08);
}

.login form .input:autofill,
.login input:-webkit-autofill {
    -webkit-text-fill-color: var(--cl-fg);
    box-shadow: 0 0 0 1000px #000 inset;
    transition: background-color 9999s ease-in-out 0s;
    caret-color: var(--cl-fg);
}

/* ── Password field (.user-pass-wrap > .wp-pwd > input + button) ─ */
.login .user-pass-wrap { position: relative; }

.login .wp-pwd {
    position: relative;
    /* Stop caps-warning from inflating .wp-pwd's height (which would
       throw off the eye-icon vertical centering). caps-warning is shown
       below the form via its own anchor instead. */
}

.login .wp-pwd .input,
.login .wp-pwd input[type="text"],
.login .wp-pwd input[type="password"] {
    padding-right: 60px; /* leaves room for the 36px eye + 8px gap on each side */
}

/* The caps-warning sits inside .wp-pwd — keep it out of layout flow when
   hidden so it doesn't add 16px of phantom height to the password row. */
.login #caps-warning,
.login .wp-pwd .caps-warning {
    position: absolute;
    top: calc(100% + 8px);   /* floats below the input rather than pushing it down */
    left: 0;
    right: 0;
    width: auto;
    margin: 0;
    z-index: 1;
}

/* The password INPUT inside .wp-pwd ships as inline-block, which lets the
   parent reserve ~16px of below-baseline descender space and adds a phantom
   "gap" below the field. Force block layout so the parent height equals
   the input height exactly. */
.login .wp-pwd .input,
.login .wp-pwd input[type="text"],
.login .wp-pwd input[type="password"] {
    display: block;
}

/* Eye toggle — absolutely positioned inside the input pill, with breathing
   room from both the input border and the typed text. WP's bundled
   admin-bar.css uses high-specificity selectors that override us, so we use
   !important here to guarantee our spacing wins on the cascade. */
.login button.wp-hide-pw {
    position: absolute !important;
    top: 6px !important;          /* (52 - 40) / 2 = 6 — vertically centred on the input */
    right: 8px !important;        /* small gap from input border so it doesn't look flush */
    width: 36px !important;       /* slightly slimmer = more space around the icon */
    height: 40px !important;
    background: transparent !important;
    border: none !important;
    color: var(--cl-faint);
    cursor: pointer;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
    transition: color 0.15s ease, background-color 0.15s ease;
}
.login button.wp-hide-pw:hover {
    color: var(--cl-fg);
    background: rgba(255, 255, 255, 0.06);
}
.login button.wp-hide-pw:focus-visible {
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    color: var(--cl-fg);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
}
.login button.wp-hide-pw .dashicons {
    color: inherit;
    width: 20px;
    height: 20px;
    font-size: 20px;
    line-height: 1;
}

/* Caps-lock warning — appears under the password row when needed */
.login .caps-warning {
    display: none; /* hidden until JS toggles it */
    margin: 8px 6px 0;
    padding: 8px 12px;
    background: rgba(227, 115, 90, 0.08);
    border: 1px solid rgba(227, 115, 90, 0.35);
    border-radius: 10px;
    color: var(--cl-error);
    font-size: 12px;
    align-items: center;
    gap: 8px;
}
.login .caps-warning[aria-hidden="false"],
.login .caps-warning.visible { display: flex; }
.login .caps-warning .caps-icon { display: inline-flex; }
.login .caps-warning .caps-icon svg {
    width: 14px;
    height: 14px;
    fill: currentColor;
    stroke: currentColor;
}

/* ── Remember-me row + custom checkbox ──────────────────── */
.login .forgetmenot {
    margin: 20px 4px 22px;
    color: var(--cl-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Custom checkbox — bulletproof "real input is invisible, label paints it" pattern.
   Edge / Windows + accent-color was still drawing a native ✓ on top of my
   custom background-image. The only reliable cross-browser solution is to
   hide the actual <input> entirely and paint the entire visual on the label's
   ::before pseudo-element (browsers can't paint native UI on a pseudo-element).
   Click handling and accessibility still work via <label for="..."> + the
   real input being focusable by keyboard. */

.login .forgetmenot {
    position: relative;
}

/* The real checkbox: visually invisible, but still focusable + accessible */
.login .forgetmenot input[type="checkbox"],
.login input[type="checkbox"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    pointer-events: none;     /* clicks go straight to the label */
    /* Pin to the visual checkbox position so screen-reader / dev-tools
       clicks land in the right spot if anything tries to click the input */
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

/* The label paints the visual checkbox via ::before */
.login .forgetmenot label {
    position: relative !important;
    padding-left: 28px !important;  /* leaves room for the visual checkbox */
    color: var(--cl-muted) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 18px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    margin: 0 !important;
    user-select: none;
    min-height: 18px;
}

/* The visual checkbox itself — a real DOM element (the ::before),
   so no browser can paint native UI inside it. */
.login .forgetmenot label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid var(--cl-line-mid);
    border-radius: 4px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 12px;
    transition:
        background-color 0.15s ease,
        border-color     0.15s ease,
        box-shadow       0.15s ease;
}

/* Hover on label brightens the empty box */
.login .forgetmenot label:hover::before {
    border-color: rgba(255, 255, 255, 0.55);
}

/* Keyboard focus ring on the (invisible) input shows on the visual box */
.login .forgetmenot input[type="checkbox"]:focus-visible + label::before {
    border-color: var(--cl-fg);
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.18);
}

/* Checked state: filled white box + URL-encoded SVG checkmark */
.login .forgetmenot input[type="checkbox"]:checked + label::before {
    background-color: #fff;
    border-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5L6.5 11.8L13 4.6' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Defensive: kill any accent-color / forced-color hand-painting */
.login input[type="checkbox"] {
    accent-color: transparent;
    color: transparent;
}
@media (forced-colors: active) {
    .login .forgetmenot label::before { forced-color-adjust: none; }
}

/* ── Submit button ───────────────────────────────────────── */
.login .submit { margin: 8px 0 0; padding: 0; }

.login .button-primary,
.wp-core-ui .button-primary,
#wp-submit {
    display: block;
    width: 100% !important;
    height: 54px;
    margin: 0;
    padding: 0 24px !important;
    background: var(--cl-fg) !important;
    border: 1px solid var(--cl-fg) !important;
    border-radius: var(--cl-radius) !important;
    color: #000 !important;
    font-family: 'Manrope', system-ui, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition:
        background-color 0.2s var(--cl-ease),
        color            0.2s var(--cl-ease),
        transform        0.1s ease,
        box-shadow       0.2s var(--cl-ease);
    line-height: 52px !important;
    float: none !important;
}

.login .button-primary:hover,
#wp-submit:hover {
    background: transparent !important;
    color: var(--cl-fg) !important;
    box-shadow: 0 0 0 1px var(--cl-fg) inset !important;
}

.login .button-primary:active,
#wp-submit:active { transform: scale(0.99); }

.login .button-primary:focus,
#wp-submit:focus,
.login .button-primary:focus-visible,
#wp-submit:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25) !important;
}

/* ── Footer links: "Lost password?" + "Back to site" ───── */
#login #nav,
#login #backtoblog {
    text-align: center;
    margin: 22px 0 0;
    padding: 0;
    color: var(--cl-muted);
    font-size: 13px;
}

#login #nav a,
#login #backtoblog a {
    color: var(--cl-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}
#login #nav a:hover,
#login #backtoblog a:hover,
#login #nav a:focus-visible,
#login #backtoblog a:focus-visible {
    color: var(--cl-fg);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    outline: none;
}

#login #nav {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cl-line-dim);
}
#backtoblog { margin-top: 14px !important; }

/* ── Footer copyright (rendered via login_footer hook) ──── */
.cricova-login-footer {
    text-align: center;
    margin: 28px auto 0;
    color: var(--cl-faint);
    font-size: 11px;
    letter-spacing: 1.5px;
    line-height: 1.6;
    max-width: 420px;
    position: relative;
    z-index: 1;
}
.cricova-login-footer span {
    display: block;
    margin-top: 4px;
    font-style: italic;
    letter-spacing: 0.5px;
    color: var(--cl-faint);
}

/* ── Notices: errors, success, info ──────────────────────── */
.login .notice,
.login .message,
.login #login_error {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--cl-line-dim);
    border-left: 3px solid var(--cl-fg);
    border-radius: 10px;
    padding: 12px 16px;
    color: var(--cl-fg);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: none;
    margin: 0 0 20px;
}

.login #login_error { border-left-color: var(--cl-error); }

.login .notice a,
.login .message a,
.login #login_error a {
    color: var(--cl-fg);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Hide WP's language switcher — site language is chosen on the front-end */
.login-language-switcher,
.login .language-switcher { display: none !important; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 480px) {
    body.login { padding: 24px 14px; }
    #login { max-width: 100%; }
    #loginform,
    #registerform,
    #lostpasswordform,
    #resetpassform { padding: 28px 22px 22px; border-radius: 18px; }
    .cricova-login-brand { margin-bottom: 24px; }
    .cricova-login-logo { max-width: 180px; margin-bottom: 12px; }
    .cricova-login-footer { font-size: 10.5px; margin-top: 22px; }
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    #loginform,
    #registerform,
    #lostpasswordform,
    #resetpassform { animation: none; }
    * { transition-duration: 0.01ms !important; }
}