/* ============================================================
   TsClickCaptcha — ویجت کپچای کلیکی «من ربات نیستم» (سبک گوگل)
   [T26] — روشن/تاریک خودکار با data-theme و .dark-mode
   ============================================================ */
.ts-captcha {
    position: relative;
    width: 100%;
    max-width: 340px;
    margin: 18px auto 20px;
    background: #fafafa;
    border: 1px solid #d7dbe3;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(60, 64, 67, .08);
    padding: 14px 14px 12px;
    direction: rtl;
    transition: border-color .25s, box-shadow .25s;
    user-select: none;
}
.ts-captcha:hover { box-shadow: 0 2px 10px rgba(60, 64, 67, .14); }
.ts-captcha.ts-cap-error { border-color: #dc2626; animation: tsCapShake .4s ease; }
.ts-captcha.is-done { border-color: #b7e4c7; }

.ts-cap-row { display: flex; align-items: center; gap: 12px; }
.ts-cap-check {
    position: relative;
    width: 26px; height: 26px;
    flex: 0 0 auto;
    cursor: pointer;
    outline: none;
}
.ts-cap-check:focus-visible { border-radius: 8px; box-shadow: 0 0 0 3px rgba(124, 58, 237, .35); }
.ts-cap-box {
    position: absolute; inset: 0;
    background: #fff;
    border: 2px solid #b9bfca;
    border-radius: 4px;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}
.ts-cap-check:hover .ts-cap-box { border-color: #8f96a5; }
.ts-cap-check:active .ts-cap-box { transform: scale(.92); }

/* اسپینر */
.ts-cap-spinner {
    position: absolute; inset: -3px;
    display: none;
    animation: tsCapSpin .8s linear infinite;
}
.ts-cap-spinner circle { stroke: #7c3aed; stroke-dasharray: 88; stroke-dashoffset: 42; stroke-linecap: round; }
.ts-captcha.is-loading .ts-cap-box { border-color: transparent; }
.ts-captcha.is-loading .ts-cap-spinner { display: block; }

/* تیک سبز با انیمیشن ترسیم */
.ts-cap-tick {
    position: absolute; inset: -2px;
    display: none;
    background: transparent;
}
.ts-cap-tick path {
    stroke: #12a150;
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}
.ts-captcha.is-done .ts-cap-box {
    border-color: transparent;
    background:
        radial-gradient(circle at 50% 50%, transparent 0, transparent 0) #fff;
}
.ts-captcha.is-done .ts-cap-tick { display: block; }
.ts-captcha.is-done .ts-cap-tick path { animation: tsCapDraw .45s ease .05s forwards; }
.ts-captcha.is-done .ts-cap-check::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: 6px;
    background: rgba(18, 161, 80, .08);
    animation: tsCapPop .35s ease;
}

.ts-cap-label { font-size: 14.5px; color: #202124; flex: 1 1 auto; }
.ts-captcha.is-done .ts-cap-label { color: #12a150; font-weight: 600; }

.ts-cap-brand {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    flex: 0 0 auto; margin-inline-start: auto;
}
.ts-cap-logo svg { width: 26px; height: 26px; display: block; }
.ts-cap-brandname { font-size: 10px; color: #7a7f8b; }

.ts-cap-refresh {
    position: absolute;
    top: 6px; left: 6px;
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; border-radius: 50%;
    color: #9aa0ab; cursor: pointer; opacity: 0;
    transition: opacity .2s, background .2s, transform .4s;
}
.ts-captcha:hover .ts-cap-refresh, .ts-cap-refresh:focus-visible { opacity: 1; }
.ts-cap-refresh:hover { background: rgba(124, 58, 237, .1); color: #7c3aed; transform: rotate(60deg); }
.ts-cap-refresh svg { width: 15px; height: 15px; stroke: currentColor; }

.ts-cap-honey {
    position: absolute !important;
    inset-inline-start: 2px;
    bottom: 2px;
    width: 2px !important;
    height: 2px !important;
    opacity: 0 !important;
    border: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
    clip-path: inset(50%);
}

/* پیام راهنمای زیر ویجت */
.ts-cap-hint {
    width: 100%; max-width: 340px;
    margin: -12px auto 14px;
    font-size: 12.5px;
    color: #dc2626;
    text-align: center;
    min-height: 16px;
}

/* تاریک */
[data-theme="dark"] .ts-captcha, .dark-mode .ts-captcha {
    background: #1b2130;
    border-color: #2c3446;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}
[data-theme="dark"] .ts-captcha.is-done, .dark-mode .ts-captcha.is-done { border-color: #1d5137; }
[data-theme="dark"] .ts-cap-box, .dark-mode .ts-cap-box { background: #232a3c; border-color: #4a5266; }
[data-theme="dark"] .ts-cap-check:hover .ts-cap-box, .dark-mode .ts-cap-check:hover .ts-cap-box { border-color: #6b7488; }
[data-theme="dark"] .ts-cap-label, .dark-mode .ts-cap-label { color: #dbe2f0; }
[data-theme="dark"] .ts-cap-brandname, .dark-mode .ts-cap-brandname { color: #7f8798; }
[data-theme="dark"] .ts-cap-spinner circle, .dark-mode .ts-cap-spinner circle { stroke: #00d4ff; }
[data-theme="dark"] .ts-cap-tick path, .dark-mode .ts-cap-tick path { stroke: #34d399; }

@keyframes tsCapSpin { to { transform: rotate(360deg); } }
@keyframes tsCapDraw { to { stroke-dashoffset: 0; } }
@keyframes tsCapPop { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: scale(1); } }
@keyframes tsCapShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) {
    .ts-cap-spinner { animation-duration: 0s; }
    .ts-captcha.ts-cap-error { animation: none; }
}