/*
   AWWO® Captcha Protection - Styles
   Purpose: captcha widgets, error hints, form placement helpers
   @package cw-awwo-nt
*/

/**
 * © AWWO® (Advertise What We Offer)
 * Unauthorized use, copying, modification, distribution, or reverse engineering is strictly prohibited without prior written authorization from CITIPRO WORLD™.
 * @license LicenseRef-Proprietary
 */

.cw-captcha-wrap {
    display: block;
    float: none;
    clear: both;
    margin-bottom: 16px;
}

.login form .cw-captcha-wrap input {
    margin: 0;
}

/* Icon-led title row — the "(Ns left)" countdown now sits inline inside the
   same <label>, right after the message text, plain text with no background
   (see .cw-captcha-expiration-el below). */
.cw-captcha-header-row {
    margin-bottom: 10px;
    text-align: left;
}

.cw-captcha-header-row label {
    margin: 0;
    font-weight: 600;
}

.cw-captcha-header-row .cw-captcha-icon {
    width: 16px;
    height: 16px;
    margin-right: 6px;
    color: #0f9d58;
    vertical-align: -3px;
}

/* Plain inline text now (was a separate right-aligned pill) — no background,
   no border-radius, just sits in parentheses right after the label message. */
.cw-captcha-expiration-el {
    font-size: 12px;
    font-weight: 400;
    color: #6b7280;
    white-space: nowrap;
}

.cw_captcha_expired .cw_captcha_expired_txt {
    color: red;
}

.cw_captcha_reload {
    vertical-align: middle;
    text-decoration: none;
}

/* The bordered "chip" holding the actual challenge — operands, operator(s),
   the answer input — same box-and-border treatment the 2FA Protection
   settings page uses for its own inputs (cw-awwo-nt-2fa-protection.php),
   ported to the frontend. Full width to match the other inputs on the same
   form, not shrink-to-fit. */
.cw_captcha_container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    /* --cw-captcha-radius is set per-form on .cw-captcha-wrap by
       cw-awwo-nt-front.js, read off that form's own submit button, so
       this matches whatever radius the current theme actually uses;
       8px is only the fallback before JS runs / if no button was found. */
    border-radius: var(--cw-captcha-radius, 8px);
    padding: 10px 14px;
    box-sizing: border-box;
    position: relative;
}

/* Once expired, the whole box (not just the reload icon/text inside it)
   becomes the click target — see the delegated handler on
   .cw_captcha_container in cw-awwo-nt-front.js. */
.cw_captcha_container:has(.cw_captcha_expired) {
    cursor: pointer;
}

/* Ignore stray clicks — and the reload icon's own click — while a reload
   request is already in flight. */
.cw_captcha_container.cw_show_loader {
    pointer-events: none;
}

/* Plain text weight/size — deliberately NOT the input's monospace/
   tabular-nums treatment below, since an operand can render as a word
   ("seventy-three") just as often as a digit, and monospace digit-width
   text only makes sense for the latter. Color is inherited rather than a
   color of our own choosing — reflecting whatever WP core renders as the
   page's own text color; when Admin Connection Appearance's own colors
   are active, its ".cw_captcha_container span" rule already overrides
   this (higher specificity — see cw-awwo-nt-admin-connection-appearance.php),
   so this is only ever the fallback. */
.cw-captcha-operand {
    font-size: 16px;
    font-weight: 600;
    color: inherit;
}

.cw-captcha-operator {
    font-size: 16px;
    color: inherit;
}

input.cw-captcha-input {
    display: inline-flex !important;
    width: 56px !important;
    height: 40px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border: 1px solid #d1d5db !important;
    /* Same theme-matched radius as .cw_captcha_container above. */
    border-radius: var(--cw-captcha-radius, 8px) !important;
    background: #fff !important;
    text-align: center !important;
    vertical-align: middle;
    /* Always a typed number regardless of how the challenge itself is
       displayed (words, numbers, or a mix) — tabular-nums keeps the
       digits from shifting width as the visitor types. */
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
    font-variant-numeric: tabular-nums;
    font-size: 18px !important;
    font-weight: 600;
}

input.cw-captcha-input:focus {
    outline: none !important;
    border-color: #0f9d58 !important;
    box-shadow: 0 0 0 3px rgba(15, 157, 88, .15);
}

.cw_captcha_error_wrap_cmnt_edit,
.cw_captcha_error_empty_cmnt_edit,
.cw_captcha_error_wrong_cmnt_edit,
.cw_captcha_error_expire_cmnt_edit,
.cw_captcha_error_wrap_cmnt_rev,
.cw_captcha_error_empty_cmnt_rev,
.cw_captcha_error_wrong_cmnt_rev,
.cw_captcha_error_expire_cmnt_rev,
.cw_captcha_error_cmnt_emtpy,
.cw_captcha_error_rev_emtpy,
.cw_captcha_error_rev_not_given {
    display: none;
}