/* IranQuiz Shield - CAPTCHA widget. Uses the auth page theme variables. */

.iq-captcha { width: 100%; }

.iq-cap__row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    background: var(--bg-card);
    color: var(--text-secondary);
    font: inherit;
    font-size: 14px;
    text-align: start;
    cursor: pointer;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}

.iq-cap__row:hover { border-color: rgba(255, 107, 0, .45); }
.iq-cap__row:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 107, 0, .25); }

/* ---- checkbox / spinner / tick ---- */
.iq-cap__box {
    position: relative;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 9px;
    border: 2px solid var(--border-color);
    background: transparent;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}
.iq-cap__row:hover .iq-cap__box { border-color: #FF6B00; }

.iq-cap__ring, .iq-cap__tick {
    position: absolute;
    inset: -2px;
    width: calc(100% + 4px);
    height: calc(100% + 4px);
    fill: none;
    opacity: 0;
}
.iq-cap__ring circle {
    stroke: #FF6B00;
    stroke-width: 2.6;
    stroke-linecap: round;
    stroke-dasharray: 38 60;
    transform-origin: 12px 12px;
}
.iq-cap__tick path {
    stroke: #fff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
}

/* ---- brand ---- */
.iq-cap__brand {
    margin-right: auto; /* physical, not logical: this element has direction:ltr below,
                            which would flip what margin-inline-start means for it */
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    color: var(--text-muted);
    direction: ltr;
    transition: opacity .2s ease;
}

/* ---- progress bar ---- */
.iq-cap__bar {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    opacity: 0;
    transition: opacity .2s ease;
}
.iq-cap__bar i {
    display: block;
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #FF6B00, #E83E8C);
    transition: width .15s linear;
}

/* ---- states ---- */
.iq-captcha[data-state="working"] .iq-cap__row { cursor: progress; }
.iq-captcha[data-state="working"] .iq-cap__box { border-color: transparent; }
.iq-captcha[data-state="working"] .iq-cap__ring { opacity: 1; }
.iq-captcha[data-state="working"] .iq-cap__ring circle { animation: iqCapSpin .8s linear infinite; }
.iq-captcha[data-state="working"] .iq-cap__bar { opacity: 1; }

.iq-captcha[data-state="verified"] .iq-cap__row {
    cursor: default;
    border-color: rgba(34, 197, 94, .55);
    background: linear-gradient(135deg, rgba(34, 197, 94, .09), transparent 70%), var(--bg-card);
}
.iq-captcha[data-state="verified"] .iq-cap__box {
    border-color: transparent;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    animation: iqCapPop .45s cubic-bezier(.3, 1.6, .5, 1);
}
.iq-captcha[data-state="verified"] .iq-cap__tick { opacity: 1; }
.iq-captcha[data-state="verified"] .iq-cap__tick path { animation: iqCapDraw .35s .1s ease forwards; }
.iq-captcha[data-state="verified"] .iq-cap__label { color: #16a34a; font-weight: 600; }

.iq-captcha[data-state="error"] .iq-cap__row,
.iq-captcha[data-state="expired"] .iq-cap__row { border-color: rgba(239, 68, 68, .55); }
.iq-captcha[data-state="error"] .iq-cap__box,
.iq-captcha[data-state="expired"] .iq-cap__box { border-color: #ef4444; }
.iq-captcha[data-state="error"] .iq-cap__label,
.iq-captcha[data-state="expired"] .iq-cap__label { color: #ef4444; font-size: 13px; }
.iq-captcha[data-state="error"] .iq-cap__brand,
.iq-captcha[data-state="expired"] .iq-cap__brand { opacity: 0; }

/* screen-reader-only live region */
.iq-cap__live {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@keyframes iqCapSpin { to { transform: rotate(360deg); } }
@keyframes iqCapDraw { to { stroke-dashoffset: 0; } }
@keyframes iqCapPop { 0% { transform: scale(.7); } 100% { transform: scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .iq-captcha * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}