/**
 * WP Octo Bot Protection widget — Wolter's design handoff, pixel-perfect: colours, sizes,
 * typography, timings and easings are taken as-is from the reference implementation. Every
 * class and keyframe is prefixed `wo-`; this block replaces the `.wpocto-bp-*` block from #92
 * rather than sitting beside it.
 *
 * Colours live only in the custom-property block on `.wo-bp` (the light values, the design's
 * own), so `[data-theme="dark"]` and the `prefers-color-scheme` media query below are each one
 * variable block and nothing else in this file names a colour twice.
 */
.wo-bp {
    --wo-container-border: #e5e7eb;
    --wo-container-bg: #fcfcfd;
    --wo-verified-border: #ddd6fb;
    --wo-verified-bg: #faf9ff;
    --wo-error-border: #fecdca;
    --wo-error-bg: #fffbfa;
    --wo-box-border: #d1d5db;
    --wo-box-hover-border: #9d8cf3;
    --wo-box-ring: #f1eefc;
    --wo-box-verifying-border: #ece9fb;
    --wo-verified-fill: #7c69ef;
    --wo-error-fill: #d92d20;
    --wo-label-idle: #111827;
    --wo-label-busy: #4b5563;
    --wo-label-ok: #111827;
    --wo-label-err: #b42318;
    --wo-sub: #6b7280;
    --wo-footer: #9ca3af;
    --wo-sweep: rgba(124, 105, 239, .08);
    --wo-logo-filter: grayscale(1) brightness(.65);

    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    box-sizing: border-box;
    width: 100%;
    margin: 16px 0;
    padding: 12px;
    border: 1px solid var(--wo-container-border);
    border-radius: 10px;
    background: var(--wo-container-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    transition: border-color .3s, background .3s;
}

/* ===== Dark theme: one variable block, forced or via the visitor's own preference ===== */
.wo-bp[data-theme="dark"] {
    --wo-container-border: #30313a;
    --wo-container-bg: #1c1d24;
    --wo-verified-border: #3d3554;
    --wo-verified-bg: #201b30;
    --wo-error-border: #4a2a28;
    --wo-error-bg: #2a1a1a;
    --wo-box-border: #4b4c58;
    --wo-box-hover-border: #9d8cf3;
    --wo-box-ring: rgba(157, 140, 243, .28);
    --wo-box-verifying-border: #454153;
    --wo-verified-fill: #8b7cf3;
    --wo-error-fill: #f04438;
    --wo-label-idle: #f3f4f6;
    --wo-label-busy: #b6bac2;
    --wo-label-ok: #f3f4f6;
    --wo-label-err: #ffb4a8;
    --wo-sub: #9aa0ab;
    --wo-footer: #7d8290;
    --wo-sweep: rgba(157, 140, 243, .14);
    --wo-logo-filter: grayscale(1) brightness(1.8);
}

@media (prefers-color-scheme: dark) {
    .wo-bp[data-theme="auto"] {
        --wo-container-border: #30313a;
        --wo-container-bg: #1c1d24;
        --wo-verified-border: #3d3554;
        --wo-verified-bg: #201b30;
        --wo-error-border: #4a2a28;
        --wo-error-bg: #2a1a1a;
        --wo-box-border: #4b4c58;
        --wo-box-hover-border: #9d8cf3;
        --wo-box-ring: rgba(157, 140, 243, .28);
        --wo-box-verifying-border: #454153;
        --wo-verified-fill: #8b7cf3;
        --wo-error-fill: #f04438;
        --wo-label-idle: #f3f4f6;
        --wo-label-busy: #b6bac2;
        --wo-label-ok: #f3f4f6;
        --wo-label-err: #ffb4a8;
        --wo-sub: #9aa0ab;
        --wo-footer: #7d8290;
        --wo-sweep: rgba(157, 140, 243, .14);
        --wo-logo-filter: grayscale(1) brightness(1.8);
    }
}

.wo-bp[data-state="verified"] { border-color: var(--wo-verified-border); background: var(--wo-verified-bg); }
.wo-bp[data-state="error"] { border-color: var(--wo-error-border); background: var(--wo-error-bg); }

.wo-bp__sweep {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--wo-sweep), transparent);
    animation: wo-sweep 1.1s ease-in-out infinite;
    display: none;
}
.wo-bp[data-state="verifying"] .wo-bp__sweep { display: block; }

.wo-bp__hit {
    all: unset;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 0;
    min-height: 34px;
    position: relative;
    box-sizing: border-box;
}
.wo-bp__hit:disabled { cursor: default; }
.wo-bp__hit:focus-visible .wo-bp__box { box-shadow: 0 0 0 4px var(--wo-box-ring); border-color: var(--wo-box-hover-border); }

.wo-bp__box {
    position: relative;
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    border: 2px solid var(--wo-box-border);
    background: #fff;
    transition: border-radius .3s ease, border-color .2s, background .2s, box-shadow .2s;
}
.wo-bp[data-state="unverified"] .wo-bp__hit:hover .wo-bp__box { border-color: var(--wo-box-hover-border); box-shadow: 0 0 0 4px var(--wo-box-ring); }
.wo-bp[data-state="verifying"] .wo-bp__box { border-radius: 50%; border-color: var(--wo-box-verifying-border); }
.wo-bp[data-state="verified"] .wo-bp__box,
.wo-bp[data-state="error"] .wo-bp__box { border: 0; border-radius: 50%; }
.wo-bp[data-state="verified"] .wo-bp__box { background: var(--wo-verified-fill); animation: wo-pop .38s cubic-bezier(.3, 1.5, .5, 1); }
.wo-bp[data-state="error"] .wo-bp__box { background: var(--wo-error-fill); animation: wo-shake .3s ease; }

.wo-bp__spin { position: absolute; inset: -2px; width: 26px; height: 26px; color: var(--wo-verified-fill); animation: wo-spin .8s linear infinite; display: none; }
.wo-bp[data-state="verifying"] .wo-bp__spin { display: block; }

.wo-bp__ripple { position: absolute; inset: 0; border-radius: 50%; display: none; animation: wo-ripple .7s ease-out forwards; }
.wo-bp[data-state="verified"] .wo-bp__ripple { display: block; background: var(--wo-verified-fill); }
.wo-bp[data-state="error"] .wo-bp__ripple { display: block; background: var(--wo-error-fill); }

.wo-bp__mark { position: relative; width: 14px; height: 14px; display: none; }
.wo-bp__mark path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 30; animation: wo-draw .32s .14s ease-out forwards; }
.wo-bp[data-state="verified"] .wo-bp__mark--ok,
.wo-bp[data-state="error"] .wo-bp__mark--err { display: block; }

.wo-bp__label { display: grid; gap: 1px; min-width: 0; }
.wo-bp__t { display: none; font-size: 15px; animation: wo-fade .25s ease; }
.wo-bp__t--idle { font-weight: 500; color: var(--wo-label-idle); white-space: nowrap; animation: none; }
.wo-bp__t--busy { font-weight: 500; color: var(--wo-label-busy); animation-duration: .2s; }
.wo-bp__t--ok { font-weight: 600; color: var(--wo-label-ok); }
.wo-bp__t--err { font-weight: 600; color: var(--wo-label-err); }
.wo-bp__sub { display: none; font-size: 12px; color: var(--wo-sub); }
.wo-bp[data-state="unverified"] .wo-bp__t--idle,
.wo-bp[data-state="verifying"] .wo-bp__t--busy,
.wo-bp[data-state="verified"] .wo-bp__t--ok,
.wo-bp[data-state="error"] .wo-bp__t--err,
.wo-bp[data-state="error"] .wo-bp__sub { display: block; }

.wo-bp__logo { width: 20px; height: 20px; flex-shrink: 0; position: relative; filter: var(--wo-logo-filter); }

.wo-bp__foot { flex-basis: 100%; position: relative; text-align: end; font-size: 10.5px; line-height: 1.2; color: var(--wo-footer); }
.wo-bp__foot a { color: var(--wo-footer); text-decoration: none; }

@keyframes wo-spin { to { transform: rotate(360deg); } }
@keyframes wo-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes wo-draw { to { stroke-dashoffset: 0; } }
@keyframes wo-ripple { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes wo-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }
@keyframes wo-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes wo-fade { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .wo-bp *, .wo-bp { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
    .wo-bp__mark path { stroke-dashoffset: 0; }
}

/* ===== Display: floating — the same widget, anchored near the submit control ===== */
.wo-bp[data-display="floating"] {
    position: fixed;
    z-index: 100000;
    width: 254px;
    max-width: calc(100vw - 16px);
    box-shadow: 0 8px 24px rgba(17, 24, 39, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, border-color .3s, background .3s;
    margin: 0;
}
.wo-bp[data-display="floating"].wo-bp--show {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
}

/* ===== Display: invisible — nothing shown; progress reaches assistive tech only ===== */
.wo-bp[data-display="invisible"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* The client-side failure notice `invisible` inserts above the form — WP core's own error-box
   look (a red left border, a tinted background), built here rather than borrowed from a
   `#login_error`/`.notice` class that is not guaranteed loaded outside wp-login.php. Fixed
   colours, not theme tokens: it sits outside `.wo-bp`, next to the form, not inside the widget. */
.wo-bp__notice {
    margin: 0 0 16px;
    padding: 12px;
    border-inline-start: 4px solid #d63638;
    background: #fcf0f1;
    color: #451c1c;
    font-size: 13px;
    line-height: 1.5;
}