/*
 * CWS Login page — /admin-login
 * Design: "Login Flow" (Claude Design project 019e25b1).
 *
 * Two deliberate departures from the design file:
 *   - the page background is plain white (no radial wash, no diagonal texture);
 *   - no webfonts are loaded, so the serif/mono tokens are system stacks.
 *
 * Everything is namespaced cws-lp-* and scoped under .cws-lp-body: the active
 * theme's stylesheet also loads on this route (via wp_head), so generic names
 * like .card / .btn / .field / .progress would be a live collision.
 */

:root {
    --cws-lp-card: #ffffff;
    --cws-lp-ink: #2b2a28;
    --cws-lp-ink-soft: #6f6d68;
    --cws-lp-line-strong: #cfceca;
    --cws-lp-field: #ffffff;

    --cws-lp-btn: #f5f5f6;
    --cws-lp-btn-hover: #eaeaec;
    --cws-lp-btn-line: #e2e2e4;

    /* Hex fallbacks first; the oklch originals are applied below where
       supported, so a stale browser never renders a colourless error state. */
    --cws-lp-danger: #b3452e;
    --cws-lp-danger-bg: #fce9e3;
    --cws-lp-danger-ink: #85311f;
    --cws-lp-danger-line: #f1bdae;
    --cws-lp-danger-ring: rgba(179, 69, 46, .12);

    --cws-lp-warn: #ae7a20;
    --cws-lp-warn-bg: #fbf0d9;
    --cws-lp-warn-ink: #8a5e12;

    --cws-lp-ok: #40905f;

    --cws-lp-radius: 16px;
    --cws-lp-radius-in: 9px;

    /* Both font tokens are overridden inline by the module when the site has
       Elementor global typography set — "Text" drives --cws-lp-serif, "Primary"
       drives --cws-lp-heading. These system stacks are the fallback tail, and
       what the page uses outright when Elementor isn't in play. */
    --cws-lp-serif: Georgia, "Times New Roman", Times, serif;
    --cws-lp-heading: Georgia, "Times New Roman", Times, serif;
    --cws-lp-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

@supports (color: oklch(0.5 0.1 20)) {
    :root {
        --cws-lp-btn: oklch(0.965 0.003 250);
        --cws-lp-btn-hover: oklch(0.93 0.004 250);
        --cws-lp-btn-line: oklch(0.9 0.004 250);

        --cws-lp-danger: oklch(0.55 0.14 27);
        --cws-lp-danger-bg: oklch(0.96 0.03 27);
        --cws-lp-danger-ink: oklch(0.42 0.12 27);
        --cws-lp-danger-line: oklch(0.85 0.06 27);
        --cws-lp-danger-ring: oklch(0.55 0.14 27 / .12);

        --cws-lp-warn: oklch(0.62 0.12 70);
        --cws-lp-warn-bg: oklch(0.96 0.04 80);
        --cws-lp-warn-ink: oklch(0.5 0.12 70);

        --cws-lp-ok: oklch(0.58 0.11 155);

    }
}

/* ------------------------------------------------------------------ page -- */

.cws-lp-body {
    margin: 0;
    padding: 40px 20px;
    min-height: 100vh;
    background: #fff;
    color: var(--cws-lp-ink);
    font-family: var(--cws-lp-serif);
    font-size: 16px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

.cws-lp-body .cws-lp-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 80px);
}

/* ----------------------------------------------------------------- reset --
 * :where() keeps this at two-class specificity, so the component rules below
 * win on source order rather than needing a longer selector each. */

.cws-lp-body .cws-lp-card :where(div, span, p, form, label, input, button, a, img, svg) {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    float: none;
    max-width: none;
    min-width: 0;
    min-height: 0;
    color: inherit;
    font: inherit;
    font-size: 100%;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
    text-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.cws-lp-body .cws-lp-card,
.cws-lp-body .cws-lp-card *,
.cws-lp-body .cws-lp-card *::before,
.cws-lp-body .cws-lp-card *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ card -- */

.cws-lp-body .cws-lp-card {
    position: relative;
    width: min(452px, 100%);
    padding: 38px 40px 40px;
    background: var(--cws-lp-card);
    border: 1px solid #efeeeb;
    border-radius: var(--cws-lp-radius);
    box-shadow: 0 1px 2px rgba(20, 20, 19, .04), 0 18px 40px -18px rgba(20, 20, 19, .22);
}

.cws-lp-body .cws-lp-view {
    animation: cws-lp-fade .32s ease;
}

.cws-lp-body .cws-lp-view--success {
    text-align: center;
    padding-top: 10px;
}

@keyframes cws-lp-fade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

/* ----------------------------------------------------------------- brand -- */

.cws-lp-body .cws-lp-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    padding-top: 14px;
    min-height: 38px;
}

.cws-lp-body .cws-lp-logo {
    display: block;
    max-width: 200px;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cws-lp-body .cws-lp-sitetitle {
    font-family: var(--cws-lp-heading);
    font-size: 21px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
    color: var(--cws-lp-ink);
}

/* ---------------------------------------------------------------- fields -- */

.cws-lp-body .cws-lp-label {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    color: #3a3937;
}

.cws-lp-body .cws-lp-field {
    position: relative;
    margin-bottom: 20px;
}

.cws-lp-body .cws-lp-input {
    display: block;
    width: 100%;
    height: 48px;
    padding: 0 14px;
    background: var(--cws-lp-field);
    border: 1px solid var(--cws-lp-line-strong);
    border-radius: var(--cws-lp-radius-in);
    font-family: var(--cws-lp-serif);
    font-size: 16px;
    color: var(--cws-lp-ink);
    transition: border-color .15s, box-shadow .15s;
}

.cws-lp-body .cws-lp-input::placeholder {
    color: #b6b5b0;
}

.cws-lp-body .cws-lp-input:focus {
    border-color: #9a9995;
    box-shadow: 0 0 0 3px rgba(120, 118, 112, .12);
    outline: none;
}

.cws-lp-body .cws-lp-input:disabled {
    opacity: .6;
}

.cws-lp-body .cws-lp-field--toggle .cws-lp-input {
    padding-right: 48px;
}

.cws-lp-body .cws-lp-field.is-error .cws-lp-input {
    border-color: var(--cws-lp-danger);
    box-shadow: 0 0 0 3px var(--cws-lp-danger-ring);
}

.cws-lp-body .cws-lp-pw-toggle {
    position: absolute;
    right: 6px;
    top: 24px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 8px;
    color: #9a9995;
    cursor: pointer;
    transition: background .15s, color .15s;
}

.cws-lp-body .cws-lp-pw-toggle:hover {
    background: #f3f2ef;
    color: var(--cws-lp-ink);
}

.cws-lp-body .cws-lp-pw-toggle svg {
    display: block;
    width: 19px;
    height: 19px;
}

/* Caps-lock warning, as wp-login.php has. Sits inside the password field
   wrapper; the toggle button is pinned at top:24px, not centred, so this can
   grow the wrapper without pulling the eye icon off the input. */
.cws-lp-body .cws-lp-caps {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 8px;
    font-size: 13.5px;
    color: var(--cws-lp-warn-ink);
}

.cws-lp-body .cws-lp-caps[hidden] {
    display: none;
}

.cws-lp-body .cws-lp-caps svg {
    display: block;
    flex: none;
    width: 14px;
    height: 15px;
}

.cws-lp-shake {
    animation: cws-lp-shake .4s;
}

@keyframes cws-lp-shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-6px);
    }

    40%,
    80% {
        transform: translateX(6px);
    }
}

/* -------------------------------------------------------- remember me row -- */

.cws-lp-body .cws-lp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -4px 0 22px;
}

/* A real <input type="checkbox" name="rememberme"> drives this — same control
   wp-login.php uses — visually hidden behind the styled box below. */
.cws-lp-body .cws-lp-check {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    font-family: var(--cws-lp-serif);
    font-size: 14px;
    color: var(--cws-lp-ink-soft);
    cursor: pointer;
}

.cws-lp-body .cws-lp-check-input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
}

.cws-lp-body .cws-lp-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 18px;
    height: 18px;
    background: #fff;
    border: 1px solid var(--cws-lp-line-strong);
    border-radius: 5px;
    transition: background .12s, border-color .12s;
}

.cws-lp-body .cws-lp-box svg {
    display: block;
    width: 12px;
    height: 12px;
    color: #fff;
    opacity: 0;
    transition: opacity .12s;
}

.cws-lp-body .cws-lp-check-input:checked+.cws-lp-box {
    background: var(--cws-lp-ink);
    border-color: var(--cws-lp-ink);
}

.cws-lp-body .cws-lp-check-input:checked+.cws-lp-box svg {
    opacity: 1;
}

.cws-lp-body .cws-lp-check-input:focus-visible+.cws-lp-box {
    box-shadow: 0 0 0 3px rgba(120, 118, 112, .12);
}

/* --------------------------------------------------------------- buttons -- */

.cws-lp-body .cws-lp-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    background: var(--cws-lp-btn);
    border: 1px solid var(--cws-lp-btn-line);
    border-radius: var(--cws-lp-radius-in);
    font-family: var(--cws-lp-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--cws-lp-ink);
    cursor: pointer;
    transition: background .15s, border-color .15s, opacity .15s;
}

.cws-lp-body .cws-lp-btn:hover {
    background: var(--cws-lp-btn-hover);
}

.cws-lp-body .cws-lp-btn--dark {
    background: var(--cws-lp-ink);
    border-color: var(--cws-lp-ink);
    color: #fff;
}

.cws-lp-body .cws-lp-btn--dark:hover {
    background: #1c1b19;
}

.cws-lp-body .cws-lp-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}

.cws-lp-body .cws-lp-spin {
    flex: none;
    width: 18px;
    height: 18px;
    border: 2px solid rgba(43, 42, 40, .25);
    border-top-color: var(--cws-lp-ink);
    border-radius: 50%;
    animation: cws-lp-spin .7s linear infinite;
}

.cws-lp-body .cws-lp-btn--dark .cws-lp-spin {
    border-color: rgba(255, 255, 255, .35);
    border-top-color: #fff;
}

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

/* ------------------------------------------------------------------ foot -- */

.cws-lp-body .cws-lp-foot {
    margin-top: 24px;
    text-align: center;
    font-size: 14px;
    color: #a3a29d;
}

.cws-lp-body .cws-lp-foot a {
    color: var(--cws-lp-ink-soft);
    text-decoration: none;
    border-bottom: 1px solid var(--cws-lp-line-strong);
    cursor: pointer;
}

.cws-lp-body .cws-lp-foot a:hover {
    color: var(--cws-lp-ink);
}

/* --------------------------------------------------------------- banners -- */

/* Every banner this page shows is an error, so there is no neutral variant —
   the design's grey "notice" state read as informational for a failed sign-in. */
.cws-lp-body .cws-lp-banner {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 14px;
    line-height: 1.45;
    background: var(--cws-lp-danger-bg);
    border: 1px solid var(--cws-lp-danger-line);
    color: var(--cws-lp-danger-ink);
}

.cws-lp-body .cws-lp-banner[hidden] {
    display: none;
}

.cws-lp-body .cws-lp-banner-icon svg {
    display: block;
    flex: none;
    width: 17px;
    height: 17px;
    margin-top: 1px;
}

/* ------------------------------------------------ headings inside the card -- */

.cws-lp-body .cws-lp-h {
    margin: 6px 0 8px;
    font-family: var(--cws-lp-heading);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.01em;
    text-align: center;
}

.cws-lp-body .cws-lp-sub {
    margin: 0 0 26px;
    font-size: 14.5px;
    line-height: 1.5;
    text-align: center;
    color: var(--cws-lp-ink-soft);
}

.cws-lp-body .cws-lp-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--cws-lp-danger);
}

.cws-lp-body .cws-lp-hint--warn {
    color: var(--cws-lp-warn-ink);
}

.cws-lp-body .cws-lp-hint svg {
    display: block;
    flex: none;
    width: 15px;
    height: 15px;
}

/* -------------------------------------------------- 2FA method chooser --- */

.cws-lp-body .cws-lp-method {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    margin-bottom: 12px;
    padding: 16px;
    border: 1px solid var(--cws-lp-line-strong);
    border-radius: 11px;
    cursor: pointer;
    text-align: left;
    transition: border-color .15s, background .15s, box-shadow .15s;
}

.cws-lp-body .cws-lp-method:hover {
    border-color: #b4b3ae;
}

.cws-lp-body .cws-lp-method.is-selected {
    border-color: var(--cws-lp-ink);
    background: #fbfbfa;
    box-shadow: 0 0 0 1px var(--cws-lp-ink);
}

.cws-lp-body .cws-lp-method-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    background: #f4f3f0;
    border-radius: 10px;
    color: #57564f;
}

.cws-lp-body .cws-lp-method-icon svg {
    display: block;
    width: 21px;
    height: 21px;
}

.cws-lp-body .cws-lp-method-text {
    flex: 1;
}

.cws-lp-body .cws-lp-method-title {
    font-size: 15.5px;
    font-weight: 600;
}

.cws-lp-body .cws-lp-method-desc {
    margin-top: 2px;
    font-size: 13px;
    color: var(--cws-lp-ink-soft);
}

.cws-lp-body .cws-lp-radio {
    position: relative;
    flex: none;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--cws-lp-line-strong);
    border-radius: 50%;
}

.cws-lp-body .cws-lp-method.is-selected .cws-lp-radio {
    border-color: var(--cws-lp-ink);
}

.cws-lp-body .cws-lp-method.is-selected .cws-lp-radio::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: var(--cws-lp-ink);
    border-radius: 50%;
}

/* -------------------------------------------------------------- OTP entry -- */

.cws-lp-body .cws-lp-otp-wrap {
    position: relative;
}

.cws-lp-body .cws-lp-otp {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin: 4px 0 8px;
}

.cws-lp-body .cws-lp-otp-digit {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 60px;
    background: #fff;
    border: 1px solid var(--cws-lp-line-strong);
    border-radius: 10px;
    font-family: var(--cws-lp-mono);
    font-size: 26px;
    font-weight: 500;
    color: var(--cws-lp-ink);
    transition: border-color .12s, box-shadow .12s;
}

.cws-lp-body .cws-lp-otp-digit.is-filled {
    border-color: #9a9995;
}

.cws-lp-body .cws-lp-otp-digit.is-cursor {
    border-color: var(--cws-lp-ink);
    box-shadow: 0 0 0 3px rgba(120, 118, 112, .12);
}

.cws-lp-body .cws-lp-otp-digit.is-cursor::after {
    content: "";
    width: 2px;
    height: 26px;
    background: var(--cws-lp-ink);
    animation: cws-lp-blink 1.1s step-end infinite;
}

@keyframes cws-lp-blink {
    50% {
        opacity: 0;
    }
}

.cws-lp-body .cws-lp-otp.is-error .cws-lp-otp-digit {
    border-color: var(--cws-lp-danger);
}

.cws-lp-body .cws-lp-otp.is-expired .cws-lp-otp-digit {
    border-color: var(--cws-lp-warn);
}

/* The real input: kept in the layout (not display:none) so mobile keyboards
   and one-time-code autofill still target it. */
.cws-lp-body .cws-lp-otp-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    background: none;
    caret-color: transparent;
    cursor: pointer;
}

.cws-lp-body .cws-lp-resend {
    margin: 20px 0 4px;
    font-size: 13.5px;
    text-align: center;
    color: var(--cws-lp-ink-soft);
}

.cws-lp-body .cws-lp-resend a,
.cws-lp-body .cws-lp-resend button {
    color: var(--cws-lp-ink-soft);
    border-bottom: 1px solid var(--cws-lp-line-strong);
    cursor: pointer;
    font-family: var(--cws-lp-serif);
    font-size: inherit;
}

.cws-lp-body .cws-lp-resend a:hover,
.cws-lp-body .cws-lp-resend button:hover {
    color: var(--cws-lp-ink);
}

.cws-lp-body .cws-lp-resend strong {
    color: var(--cws-lp-ink);
    font-weight: 600;
}

/* ------------------------------------------------------ lockout / status -- */

.cws-lp-body .cws-lp-status {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 8px auto 20px;
    border-radius: 50%;
}

.cws-lp-body .cws-lp-status svg {
    display: block;
    width: 30px;
    height: 30px;
}

.cws-lp-body .cws-lp-status--warn {
    background: var(--cws-lp-warn-bg);
    color: var(--cws-lp-warn-ink);
}

.cws-lp-body .cws-lp-countdown-wrap {
    margin-bottom: 22px;
    text-align: center;
}

.cws-lp-body .cws-lp-countdown {
    display: inline-block;
    padding: 4px 10px;
    background: #f4f3f0;
    border-radius: 8px;
    font-family: var(--cws-lp-mono);
    font-size: 15px;
    color: var(--cws-lp-ink);
}

/* --------------------------------------------------------------- success -- */

.cws-lp-body .cws-lp-ring {
    display: block;
    width: 78px;
    height: 78px;
    margin: 0 auto 22px;
}

.cws-lp-body .cws-lp-ring circle {
    fill: none;
    stroke: var(--cws-lp-ok);
    stroke-width: 5;
    stroke-dasharray: 239;
    stroke-dashoffset: 239;
    animation: cws-lp-draw-ring .6s ease forwards;
}

.cws-lp-body .cws-lp-ring path {
    fill: none;
    stroke: var(--cws-lp-ok);
    stroke-width: 6;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 60;
    stroke-dashoffset: 60;
    animation: cws-lp-draw-check .35s ease .55s forwards;
}

@keyframes cws-lp-draw-ring {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes cws-lp-draw-check {
    to {
        stroke-dashoffset: 0;
    }
}

.cws-lp-body .cws-lp-progress {
    height: 4px;
    width: 100%;
    margin-top: 26px;
    background: #eeedea;
    border-radius: 99px;
    overflow: hidden;
}

.cws-lp-body .cws-lp-progress i {
    display: block;
    height: 100%;
    width: 0;
    background: var(--cws-lp-ok);
    border-radius: 99px;
    /* Matches the 900ms hold before the redirect fires (see login-module.js). */
    animation: cws-lp-load .9s ease forwards;
}

@keyframes cws-lp-load {
    to {
        width: 100%;
    }
}

.cws-lp-body .cws-lp-view--success .cws-lp-foot {
    font-family: var(--cws-lp-mono);
    font-size: 12px;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 480px) {
    .cws-lp-body {
        padding: 24px 14px;
    }

    .cws-lp-body .cws-lp-stage {
        min-height: calc(100vh - 48px);
    }

    .cws-lp-body .cws-lp-card {
        padding: 28px 22px 30px;
    }

    .cws-lp-body .cws-lp-otp {
        gap: 7px;
    }

    .cws-lp-body .cws-lp-otp-digit {
        width: 44px;
        height: 54px;
        font-size: 22px;
    }

    .cws-lp-body .cws-lp-otp-digit.is-cursor::after {
        height: 22px;
    }
}

/* The spinner is deliberately left out below: it is a progress indicator, not
   decoration, and freezing it would read as a hung request. */
@media (prefers-reduced-motion: reduce) {

    .cws-lp-body .cws-lp-view,
    .cws-lp-body .cws-lp-ring circle,
    .cws-lp-body .cws-lp-ring path,
    .cws-lp-body .cws-lp-progress i,
    .cws-lp-body .cws-lp-otp-digit.is-cursor::after,
    .cws-lp-shake {
        animation-duration: .01ms;
        animation-iteration-count: 1;
    }

    .cws-lp-body .cws-lp-progress i {
        width: 100%;
    }

    .cws-lp-body .cws-lp-ring circle,
    .cws-lp-body .cws-lp-ring path {
        stroke-dashoffset: 0;
    }
}