@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');

/* ═══════════════════════════════════════════════
   وب رمز — فرم ورود پیامکی (Webramz OTP Login)
   ═══════════════════════════════════════════════ */
:root {
    --wbrz-f: 'Vazirmatn', Tahoma, system-ui, sans-serif;
    --wbrz-bg:           #ffffff;
    --wbrz-surface:      #f7f8fa;
    --wbrz-surface-2:    #f1f3f7;
    --wbrz-border:       #e3e6ee;
    --wbrz-border-strong:#cbd2e0;
    --wbrz-text:         #11151c;
    --wbrz-muted:        #6b7280;
    --wbrz-primary:      #4f46e5;
    --wbrz-primary-600:  #4338ca;
    --wbrz-primary-soft: #eef0ff;
    --wbrz-ring:         rgba(79,70,229,.16);
    --wbrz-error:        #dc2626;
    --wbrz-error-bg:     #fef2f2;
    --wbrz-ok:           #16a34a;
    --wbrz-ok-bg:        #f0fdf4;
    --wbrz-r:            12px;
    --wbrz-shadow:       0 1px 2px rgba(16,24,40,.04), 0 12px 32px -12px rgba(16,24,40,.18);
}

/* ─── wrappers ─── */
.webramz-otp-login-page-wrap {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 64px 16px;
    min-height: 70vh;
    box-sizing: border-box;
}
#webramz-otp-login-woo-login {
    display: flex;
    justify-content: center;
    padding: 48px 16px;
}

/* ─── card ─── */
.webramz-otp-login-card {
    font-family: var(--wbrz-f);
    direction: rtl;
    text-align: right;
    background: var(--wbrz-bg);
    border: 1px solid var(--wbrz-border);
    border-radius: 20px;
    padding: 36px 32px 34px;
    width: 100%;
    max-width: 410px;
    box-sizing: border-box;
    box-shadow: var(--wbrz-shadow);
}

.webramz-otp-login-card__badge {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wbrz-primary);
    background: var(--wbrz-primary-soft);
    margin-bottom: 18px;
    box-shadow: inset 0 0 0 1px rgba(79,70,229,.10);
}

.webramz-otp-login-card__title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--wbrz-text);
    margin: 0 0 6px;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.webramz-otp-login-card__subtitle {
    font-size: 0.9rem;
    color: var(--wbrz-muted);
    margin: 0 0 26px;
    line-height: 1.6;
}

/* ─── steps ─── */
.webramz-otp-login-step { width: 100%; }
.webramz-otp-login-step[aria-hidden="true"] { display: none; }

/* ─── generic field ─── */
.webramz-otp-login-field { margin-bottom: 16px; }

.webramz-otp-login-field > label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--wbrz-text);
    margin-bottom: 8px;
}

.webramz-otp-login-field-note {
    margin: 8px 2px 0;
    font-size: 0.74rem;
    color: var(--wbrz-muted);
    line-height: 1.6;
}

/* ─── professional phone field ─── */
.webramz-otp-login-phone-wrap {
    display: flex;
    align-items: stretch;
    direction: ltr;
    background: var(--wbrz-surface);
    border: 1.5px solid var(--wbrz-border);
    border-radius: var(--wbrz-r);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.webramz-otp-login-phone-wrap.is-focused {
    border-color: var(--wbrz-primary);
    background: var(--wbrz-bg);
    box-shadow: 0 0 0 4px var(--wbrz-ring);
}
.webramz-otp-login-phone-wrap.is-valid {
    border-color: var(--wbrz-ok);
}
.webramz-otp-login-phone-wrap.is-valid.is-focused {
    box-shadow: 0 0 0 4px rgba(22,163,74,.14);
}

.webramz-otp-login-phone-prefix {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 12px;
    background: var(--wbrz-surface-2);
    border-inline-end: 1px solid var(--wbrz-border);
    color: var(--wbrz-text);
    font-weight: 600;
    font-size: 0.92rem;
    user-select: none;
    white-space: nowrap;
}
.webramz-otp-login-flag {
    display: inline-flex;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06);
    line-height: 0;
}
.webramz-otp-login-cc { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

.webramz-otp-login-phone-wrap input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    padding: 13px 14px;
    font-family: var(--wbrz-f);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--wbrz-text);
    direction: ltr;
    text-align: left;
    font-variant-numeric: tabular-nums;
}
.webramz-otp-login-phone-wrap input::placeholder {
    color: #aab1bf;
    font-weight: 500;
    letter-spacing: .04em;
}

.webramz-otp-login-phone-check {
    display: flex;
    align-items: center;
    padding-inline-end: 12px;
    color: var(--wbrz-ok);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s, transform .18s;
}
.webramz-otp-login-phone-check.is-visible { opacity: 1; transform: scale(1); }

/* ─── OTP boxes ─── */
.webramz-otp-login-otp-boxes {
    display: flex;
    gap: 9px;
    justify-content: center;
    direction: ltr;
    margin: 0 0 18px;
}

.webramz-otp-login-otp-box {
    flex: 1;
    max-width: 56px;
    height: 60px;
    text-align: center;
    font-size: 1.55rem;
    font-weight: 700;
    font-family: var(--wbrz-f);
    border: 1.5px solid var(--wbrz-border);
    border-radius: var(--wbrz-r);
    background: var(--wbrz-surface);
    color: var(--wbrz-text);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s, transform .1s;
    -webkit-appearance: none;
    -moz-appearance: textfield;
    cursor: text;
}
.webramz-otp-login-otp-box::-webkit-outer-spin-button,
.webramz-otp-login-otp-box::-webkit-inner-spin-button { -webkit-appearance: none; }

.webramz-otp-login-otp-box:focus {
    border-color: var(--wbrz-primary);
    background: var(--wbrz-bg);
    box-shadow: 0 0 0 4px var(--wbrz-ring);
}
.webramz-otp-login-otp-box.filled {
    border-color: var(--wbrz-primary);
    background: var(--wbrz-primary-soft);
}
.webramz-otp-login-otp-box.shake { animation: wbrz-shake .3s ease; }

@keyframes wbrz-shake {
    0%,100% { transform: translateX(0); }
    25%     { transform: translateX(-4px); }
    75%     { transform: translateX(4px); }
}

#webramz-otp-login-code { display: none !important; }

/* ─── masked phone ─── */
.webramz-otp-login-phone-display {
    font-size: 0.9rem;
    color: var(--wbrz-muted);
    margin-bottom: 18px;
    text-align: center;
    direction: ltr;
    unicode-bidi: isolate;
}
.webramz-otp-login-phone-display strong { color: var(--wbrz-text); font-weight: 700; }

/* ─── progress bar ─── */
.webramz-otp-login-timer__bar {
    height: 3px;
    background: var(--wbrz-border);
    border-radius: 99px;
    margin-bottom: 18px;
    overflow: hidden;
}
.webramz-otp-login-timer__fill {
    height: 100%;
    background: linear-gradient( 90deg, var(--wbrz-primary), var(--wbrz-primary-600) );
    border-radius: 99px;
    transition: width 1s linear;
}

/* ─── timer ─── */
.webramz-otp-login-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 16px 0 6px;
    color: var(--wbrz-muted);
    font-size: 0.82rem;
}
#webramz-otp-login-countdown {
    font-weight: 700;
    color: var(--wbrz-primary);
    font-size: 0.9rem;
    direction: ltr;
    font-variant-numeric: tabular-nums;
    min-width: 38px;
    display: inline-block;
    text-align: center;
}

/* ─── buttons ─── */
.webramz-otp-login-btn {
    display: block;
    width: 100%;
    padding: 13px 18px;
    border-radius: var(--wbrz-r);
    font-size: 0.94rem;
    font-weight: 700;
    font-family: var(--wbrz-f);
    cursor: pointer;
    border: 1.5px solid transparent;
    text-align: center;
    line-height: 1.4;
    transition: background .15s, color .15s, border-color .15s, box-shadow .15s, opacity .15s, transform .08s;
    box-sizing: border-box;
    text-decoration: none;
}
.webramz-otp-login-btn:active  { transform: translateY(1px); }
.webramz-otp-login-btn:disabled { opacity: .5; cursor: not-allowed; }

.webramz-otp-login-btn-primary {
    background: var(--wbrz-primary);
    color: #fff;
    margin-top: 6px;
    box-shadow: 0 8px 18px -10px rgba(79,70,229,.7);
}
.webramz-otp-login-btn-primary:hover:not(:disabled) { background: var(--wbrz-primary-600); }

.webramz-otp-login-btn-ghost {
    background: transparent;
    color: var(--wbrz-muted);
    border-color: var(--wbrz-border-strong);
    margin-top: 8px;
    font-weight: 600;
}
.webramz-otp-login-btn-ghost:hover:not(:disabled) {
    background: var(--wbrz-surface);
    color: var(--wbrz-text);
    border-color: var(--wbrz-text);
}

/* loading spinner */
.webramz-otp-login-btn.is-loading { pointer-events: none; }
.webramz-otp-login-btn.is-loading::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: wbrz-spin .6s linear infinite;
    margin-inline-start: 8px;
    vertical-align: middle;
}
.webramz-otp-login-btn-ghost.is-loading::before {
    border-color: rgba(0,0,0,.2);
    border-top-color: var(--wbrz-primary);
}
@keyframes wbrz-spin { to { transform: rotate(360deg); } }

/* ─── messages ─── */
.webramz-otp-login-message {
    padding: 11px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-top: 12px;
    display: none;
    line-height: 1.6;
}
.webramz-otp-login-error   { background: var(--wbrz-error-bg); color: #991b1b; }
.webramz-otp-login-success { background: var(--wbrz-ok-bg);    color: #15803d; }

/* ─── divider ─── */
.webramz-otp-login-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 20px 0;
    color: #a1a1aa;
    font-size: 0.8rem;
}
.webramz-otp-login-divider::before,
.webramz-otp-login-divider::after { content:''; flex:1; height:1px; background:var(--wbrz-border); }

/* ─── WP login page ─── */
.login #webramz-otp-login-woo-login,
.login .webramz-otp-login-page-wrap { padding: 0; display: block; }
.login .webramz-otp-login-card { border-radius: 12px; padding: 26px 24px; }

/* hide leftover WooCommerce forms */
#webramz-otp-login-woo-login ~ .woocommerce-form-login,
#webramz-otp-login-woo-login ~ .woocommerce-form-register,
#webramz-otp-login-woo-login ~ form,
#webramz-otp-login-woo-login ~ h2,
#webramz-otp-login-woo-login ~ .col2-set { display: none !important; }

/* ─── checkout gate ─── */
.webramz-otp-login-gate-page {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 60px 16px;
    min-height: 55vh;
}
.webramz-otp-login-gate-page .webramz-otp-login-card { max-width: 430px; }

.webramz-otp-login-cart-notice {
    margin-top: 20px;
    padding: 11px 14px;
    border: 1px solid var(--wbrz-border);
    border-radius: 10px;
    font-size: 0.82rem;
    color: var(--wbrz-muted);
    text-align: center;
    line-height: 1.5;
    background: var(--wbrz-surface);
}

/* ─── mobile ─── */
@media (max-width: 480px) {
    .webramz-otp-login-card        { padding: 28px 20px; border-radius: 16px; }
    .webramz-otp-login-card__title { font-size: 1.15rem; }
    .webramz-otp-login-otp-box     { height: 54px; font-size: 1.4rem; }
    .webramz-otp-login-page-wrap,
    .webramz-otp-login-gate-page   { padding: 24px 12px; }
}

/* ─── dark mode ─── */
@media (prefers-color-scheme: dark) {
    :root {
        --wbrz-bg:           #15171c;
        --wbrz-surface:      #1c1f26;
        --wbrz-surface-2:    #232730;
        --wbrz-border:       #2c313b;
        --wbrz-border-strong:#3a4150;
        --wbrz-text:         #f3f5f9;
        --wbrz-muted:        #9aa3b2;
        --wbrz-primary:      #7c74ff;
        --wbrz-primary-600:  #6a61f5;
        --wbrz-primary-soft: #23243a;
        --wbrz-ring:         rgba(124,116,255,.22);
        --wbrz-error-bg:     #2a1416;
        --wbrz-ok-bg:        #122017;
        --wbrz-shadow:       0 1px 2px rgba(0,0,0,.4), 0 14px 36px -14px rgba(0,0,0,.7);
    }
    .login .webramz-otp-login-card { box-shadow: none; }
}