/**
 * @package   JsonLand SMS Gateway
 * @author    Saman Molavi <https://jsonland.ir>
 * @copyright 2026 JsonLand. All rights reserved.
 */

.jlsms-otp {
    --jlsms-accent: #0F64D1;
    --jlsms-danger: #DC2626;
    --jlsms-ok: #16A34A;
    --jlsms-line: rgba(127, 127, 127, .45);
    font: inherit;
    color: inherit;
    text-align: center;
}
.jlsms-otp, .jlsms-otp *, .jlsms-otp *::before, .jlsms-otp *::after { box-sizing: border-box; }
.jlsms-otp-label { display: block; margin: 0 0 .75rem; font-weight: 600; }
.jlsms-otp-boxes { display: flex; justify-content: center; gap: .5rem; direction: ltr; }
.jlsms-otp-box {
    flex: 0 1 2.75rem;
    min-width: 0;
    width: 2.75rem;
    height: 3.25rem;
    padding: 0;
    margin: 0;
    text-align: center;
    font: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: inherit;
    background: transparent;
    border: 1px solid var(--jlsms-line);
    border-radius: .55rem;
    box-shadow: none;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.jlsms-otp-box:focus { border-color: var(--jlsms-accent); box-shadow: 0 0 0 3px rgba(15, 100, 209, .2); }
.jlsms-otp-box.is-error { border-color: var(--jlsms-danger); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); }
.jlsms-otp-box:disabled { opacity: .6; }
.jlsms-otp-msg { min-height: 1.5rem; margin: .75rem 0 .25rem; font-size: .9rem; }
.jlsms-otp-msg.is-error { color: var(--jlsms-danger); }
.jlsms-otp-msg.is-ok { color: var(--jlsms-ok); }
.jlsms-otp-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; }
.jlsms-otp-resend { background: none; border: 0; padding: .25rem .5rem; font: inherit; color: var(--jlsms-accent); cursor: pointer; font-weight: 600; }
.jlsms-otp-resend:disabled { color: inherit; opacity: .5; cursor: not-allowed; }
.jlsms-otp-timer { font-variant-numeric: tabular-nums; opacity: .75; direction: ltr; unicode-bidi: plaintext; }
.jlsms-otp.is-shake .jlsms-otp-boxes { animation: jlsms-shake .35s ease; }
.jlsms-otp.is-busy { opacity: .75; pointer-events: none; }
.jlsms-credit { margin: 1.25rem 0 0; font-size: .75rem; text-align: center; opacity: .7; }
.jlsms-credit a { color: var(--jlsms-accent, #0F64D1); font-weight: 600; }
@keyframes jlsms-shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (max-width: 380px) { .jlsms-otp-boxes { gap: .35rem; } .jlsms-otp-box { height: 3rem; font-size: 1.2rem; } }
@media (prefers-reduced-motion: reduce) { .jlsms-otp.is-shake .jlsms-otp-boxes { animation: none; } }
.jlsms-vbanner { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1rem; padding: .6rem 1rem; background: #EAF1FC; color: #1A4D80; border-bottom: 1px solid #CFE0F8; font-size: .9rem; text-align: center; }
.jlsms-vbanner[hidden] { display: none; }
.jlsms-vbanner a { color: #0F64D1; font-weight: 700; text-decoration: underline; }
.jlsms-vbanner button { background: none; border: 0; font-size: 1.25rem; line-height: 1; color: inherit; cursor: pointer; padding: 0 .35rem; }