/* Mobile OTP Login — Padid Glass Theme */
:root {
    --mol-bg:     linear-gradient(135deg,#a78bfa,#776cb2);
    --mol-glass:  rgba(255,255,255,0.09);
    --mol-border: rgba(255,255,255,0.18);
    --mol-neon:   #c4b5fd;
    --mol-text:   #F1E8FF;
    --mol-muted:  rgba(241,232,255,0.6);
    --mol-faint:  rgba(241,232,255,0.35);
    --mol-red:    #e30613;
    --mol-radius: 16px;
    --mol-font:   'Peyda',Tahoma,sans-serif;
}

/* ══ فرم لاگین اصلی ══ */
.mol-wrapper { direction:rtl; font-family:var(--mol-font); max-width:420px; margin:0 auto; }

.mol-card {
    background:var(--mol-glass);
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--mol-border);
    border-radius:var(--mol-radius);
    padding:32px 28px;
    box-shadow:0 16px 48px rgba(100,60,200,.25);
}

.mol-mascot { text-align:center; margin-bottom:16px; }
.mol-mascot-svg { width:100px; height:auto; filter:drop-shadow(0 4px 16px rgba(108,99,255,.3)); }
.mol-thinking { display:flex; justify-content:center; gap:6px; margin-top:8px; height:14px; }
.mol-thinking span {
    width:8px; height:8px; border-radius:50%;
    background:var(--mol-neon); opacity:0;
    animation:molDot 1.2s ease-in-out infinite;
}
.mol-thinking span:nth-child(2){animation-delay:.2s}
.mol-thinking span:nth-child(3){animation-delay:.4s}
@keyframes molDot{0%,80%,100%{opacity:0;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}

.mol-step { animation:molFadeIn .3s ease; }
.mol-step-hidden { display:none !important; }
@keyframes molFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

.mol-title { font-size:1.2rem; font-weight:800; color:var(--mol-text); text-align:center; margin:0 0 6px; }
.mol-subtitle { font-size:.85rem; color:var(--mol-muted); text-align:center; margin:0 0 20px; }

.mol-field-wrap { position:relative; margin-bottom:10px; }
.mol-input {
    width:100%; padding:13px 44px 13px 16px;
    background:rgba(255,255,255,.07);
    border:1px solid var(--mol-border);
    border-radius:10px; color:var(--mol-text);
    font-family:var(--mol-font); font-size:1rem;
    outline:none; transition:border-color .25s;
    direction:ltr; text-align:center; letter-spacing:2px;
}
.mol-input:focus { border-color:var(--mol-neon); box-shadow:0 0 12px rgba(196,181,253,.3); }
.mol-input-icon {
    position:absolute; left:14px; top:50%; transform:translateY(-50%);
    color:var(--mol-muted); width:20px; height:20px;
}
.mol-input-icon svg { width:100%; height:100%; }

.mol-error { font-size:.8rem; color:#fca5a5; min-height:18px; text-align:center; margin-bottom:8px; }

/* OTP boxes */
.mol-otp-boxes { display:flex; gap:10px; justify-content:center; margin-bottom:12px; }
.mol-otp-digit {
    width:52px; height:58px;
    background:rgba(255,255,255,.07);
    border:1px solid var(--mol-border);
    border-radius:10px; color:var(--mol-text);
    font-size:1.4rem; font-weight:700; font-family:var(--mol-font);
    text-align:center; outline:none; transition:all .2s;
    caret-color:var(--mol-neon);
}
.mol-otp-digit:focus { border-color:var(--mol-neon); box-shadow:0 0 12px rgba(196,181,253,.3); transform:scale(1.05); }
.mol-otp-digit.mol-filled { border-color:var(--mol-neon); background:rgba(196,181,253,.12); }

/* دکمه‌ها */
.mol-btn {
    width:100%; padding:13px; border:none; border-radius:10px;
    font-family:var(--mol-font); font-size:.95rem; font-weight:700;
    cursor:pointer; transition:all .3s; display:flex; align-items:center; justify-content:center; gap:8px;
    margin-top:8px;
}
.mol-btn-primary {
    background:linear-gradient(135deg,#7c3aed,#a78bfa);
    color:#fff; box-shadow:0 4px 16px rgba(124,58,237,.4);
}
.mol-btn-primary:hover { box-shadow:0 6px 24px rgba(124,58,237,.65); transform:translateY(-2px); }
.mol-btn-primary:disabled { opacity:.55; cursor:not-allowed; transform:none; }
.mol-btn-secondary {
    background:var(--mol-glass); color:var(--mol-text);
    border:1px solid var(--mol-border);
}
.mol-btn-secondary:hover { background:rgba(255,255,255,.14); }

/* spinner */
.mol-btn-spinner svg { width:20px; height:20px; }
.mol-spin { animation:molSpin 1s linear infinite; }
@keyframes molSpin{to{transform:rotate(360deg)}}

/* timer */
.mol-timer-wrap { display:flex; align-items:center; justify-content:center; gap:6px; font-size:.8rem; color:var(--mol-muted); margin-bottom:10px; }
.mol-timer { font-weight:700; color:var(--mol-neon); }
.mol-resend-btn { background:none; border:none; color:var(--mol-neon); cursor:pointer; font-family:var(--mol-font); font-size:.8rem; padding:0; }
.mol-resend-btn:disabled { color:var(--mol-faint); cursor:not-allowed; }

/* back */
.mol-back-btn {
    background:rgba(255,255,255,.07); border:1px solid var(--mol-border);
    border-radius:8px; width:32px; height:32px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:var(--mol-muted); margin-bottom:12px;
    transition:all .2s;
}
.mol-back-btn:hover { background:rgba(255,255,255,.14); color:var(--mol-text); }
.mol-back-btn svg { width:18px; height:18px; }

/* success */
.mol-success-icon { text-align:center; margin-bottom:16px; }
.mol-success-icon svg { width:64px; height:64px; }
.mol-check-circle { stroke-dasharray:157; stroke-dashoffset:157; animation:molCircle .6s ease forwards; }
.mol-check-tick { stroke-dasharray:60; stroke-dashoffset:60; animation:molTick .4s .5s ease forwards; }
@keyframes molCircle{to{stroke-dashoffset:0}}
@keyframes molTick{to{stroke-dashoffset:0}}

/* logged in */
.mol-logged-in-card {
    background:var(--mol-glass); backdrop-filter:blur(16px);
    border:1px solid var(--mol-border); border-radius:var(--mol-radius);
    padding:28px; text-align:center;
}
.mol-logged-in-icon {
    width:52px; height:52px; border-radius:50%; margin:0 auto 12px;
    background:linear-gradient(135deg,rgba(124,58,237,.4),rgba(167,139,250,.2));
    border:2px solid var(--mol-neon);
    display:flex; align-items:center; justify-content:center;
    font-size:1.4rem; color:var(--mol-neon);
}
.mol-greeting { color:var(--mol-text); font-size:.95rem; margin-bottom:16px; }

/* ══ checkout login box ══ */
.mol-checkout-login {
    background:var(--mol-glass);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1px solid var(--mol-border);
    border-radius:var(--mol-radius);
    margin-bottom:24px; overflow:hidden;
}
.mol-checkout-login-header {
    display:flex; align-items:center; gap:10px;
    padding:14px 18px;
    background:rgba(124,58,237,.15);
    border-bottom:1px solid var(--mol-border);
    font-size:.88rem; font-weight:700; color:var(--mol-text);
    cursor:pointer;
}
.mol-checkout-toggle {
    margin-right:auto; background:none; border:none;
    color:var(--mol-muted); cursor:pointer; font-size:.8rem;
    transition:transform .3s;
}
.mol-checkout-toggle.open { transform:rotate(180deg); }
.mol-checkout-body { padding:18px; display:none; }
.mol-checkout-body.open { display:block; }

.mol-ck-field { display:flex; gap:8px; margin-bottom:8px; }
.mol-ck-input {
    flex:1; padding:10px 14px;
    background:rgba(255,255,255,.07);
    border:1px solid var(--mol-border);
    border-radius:8px; color:var(--mol-text);
    font-family:var(--mol-font); font-size:.9rem;
    outline:none; transition:border-color .25s;
    direction:ltr; text-align:center; letter-spacing:2px;
}
.mol-ck-input:focus { border-color:var(--mol-neon); box-shadow:0 0 8px rgba(196,181,253,.3); }
.mol-ck-btn {
    padding:10px 18px; border:none; border-radius:8px;
    background:linear-gradient(135deg,#7c3aed,#a78bfa);
    color:#fff; font-family:var(--mol-font); font-weight:700;
    font-size:.85rem; cursor:pointer; transition:all .3s; white-space:nowrap;
}
.mol-ck-btn:hover { box-shadow:0 4px 16px rgba(124,58,237,.5); transform:translateY(-1px); }
.mol-ck-btn:disabled { opacity:.5; cursor:not-allowed; transform:none; }
.mol-ck-error { font-size:.78rem; color:#fca5a5; min-height:16px; margin-bottom:6px; }
.mol-ck-hint { font-size:.8rem; color:var(--mol-muted); margin-bottom:10px; }

.mol-otp-boxes-sm { gap:7px; }
.mol-otp-boxes-sm .mol-otp-digit { width:42px; height:48px; font-size:1.2rem; }

.mol-ck-otp-row { display:flex; align-items:center; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
.mol-ck-success {
    color:#4ade80; font-size:.88rem; font-weight:700;
    text-align:center; padding:10px;
    background:rgba(74,222,128,.1); border-radius:8px;
}

/* پیام خطا و موفقیت عمومی ووکامرس */
.woocommerce-error, .woocommerce-message {
    font-family:var(--mol-font) !important;
}