/* ==========================================================================
   TPWS Verify — challenge widget. Shared by the public site and the admin
   login, so it relies only on the CSS variables both stylesheets define.
   ========================================================================== */

/* ------------------------------------------------------- TPWS Verify widget -- */
.tpws-cap { margin: 4px 0 6px; }

.tpws-cap__box {
    display: flex; align-items: center; gap: 14px;
    max-width: 330px; padding: 14px 16px;
    background: #f8f7fa; border: 1px solid var(--line); border-radius: 8px;
    transition: border-color .25s, background .25s;
}
.tpws-cap.is-verified .tpws-cap__box { border-color: #9ccfae; background: #f2faf5; }
.tpws-cap.is-error .tpws-cap__box    { border-color: #e8a9a3; background: #fdf4f3; }

.tpws-cap__check {
    position: relative; flex: none;
    width: 28px; height: 28px; padding: 0; cursor: pointer;
    background: #fff; border: 2px solid #bdb7c6; border-radius: 4px;
    transition: border-color .2s, background .2s;
}
.tpws-cap__check:hover { border-color: var(--purple); }
.tpws-cap__check[aria-checked="true"] { background: #2e7d43; border-color: #2e7d43; }

.tpws-cap__tick { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transform: scale(.4); transition: opacity .2s, transform .2s; }
.tpws-cap__tick svg { width: 18px; height: 18px; fill: #fff; }
.tpws-cap__check[aria-checked="true"] .tpws-cap__tick { opacity: 1; transform: none; }

.tpws-cap__spinner {
    position: absolute; inset: 3px; border-radius: 50%;
    border: 2px solid var(--line); border-top-color: var(--purple);
    opacity: 0; transition: opacity .15s;
}
.tpws-cap.is-checking .tpws-cap__spinner { opacity: 1; animation: capSpin .7s linear infinite; }
@keyframes capSpin { to { transform: rotate(360deg); } }

.tpws-cap__label {
    font-family: var(--font-head); font-size: .88rem; color: var(--ink);
    cursor: pointer; flex: 1; margin: 0;
}
.tpws-cap__brand { display: flex; flex-direction: column; align-items: center; line-height: 1.1; color: var(--muted); }
.tpws-cap__brand img { width: 30px; height: 30px; object-fit: contain; margin-bottom: 3px; }
.tpws-cap__brand b { font-family: var(--font-head); font-size: .62rem; letter-spacing: .08em; color: var(--purple); }
.tpws-cap__brand small { font-size: .56rem; letter-spacing: .06em; text-transform: uppercase; }

.tpws-cap__error { margin: 8px 0 0; font-family: var(--font-head); font-size: .82rem; color: #c0392b; }

.tpws-cap__fallback { margin-top: 10px; max-width: 330px; }
.tpws-cap__fallback label { display: block; font-family: var(--font-head); font-size: .82rem; margin-bottom: 6px; }
.tpws-cap__fallback input {
    font-family: var(--font-body); font-size: .95rem; padding: 10px 13px; width: 120px;
    border: 1px solid var(--line); border-radius: 6px;
}