/* =============================================================
   Vendor_FirebaseOtp :: firebase-otp.css
   Shared styles for OTP Login & Register flows
   Brand colour: #8B2500
   ============================================================= */

/* ─────────────────────────────────────────────────────────────
   Login page — standalone OTP card
   ───────────────────────────────────────────────────────────── */
.sl-wrap {
    max-width: 460px;
    margin: 24px auto 48px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 42px 36px 32px;
    box-shadow: 0 2px 18px rgba(0,0,0,.07);
}
.sl-title {
    font-size: 20px; font-weight: 500;
    color: #8B2500; text-align: center; margin: 0 0 6px;
}
input#sl-phone {
    font-size: 12px;
}
.sl-subtitle {
        font-size: 10px;
    color: #777;
    text-align: center;
    margin-bottom: 30px;
    padding-top: 5px;
}
.sl-label { display:block; font-weight:400; font-size:14px; color:#333; margin-bottom:6px; }
.sl-phone-row   { display:flex; gap:8px; margin-bottom:4px; }
.sl-country-sel {
    width:115px; flex-shrink:0; height:44px;
    border:1px solid #ccc; border-radius:4px;
    padding:0 8px; font-size:14px; background:#fafafa;
}
.sl-phone-inp {
    flex:1; height:44px;
    border:1px solid #ccc; border-radius:4px;
    padding:0 14px; font-size:15px;
}
.sl-phone-inp:focus, .sl-country-sel:focus {
    border-color:#8B2500; outline:none;
    box-shadow:0 0 0 3px rgba(139,37,0,.12);
}
.sl-btn-primary {
    width:100%; margin-top:16px; padding:13px;
    font-size:15px; font-weight:600; border-radius:4px;
    background:#8B2500; border:none; color:#fff;
    cursor:pointer; transition:background .2s;
}
.sl-btn-primary:hover:not(:disabled) { background:none; }
.sl-btn-primary:disabled { opacity:0; cursor:not-allowed; }
.sl-otp-row  { display:flex; gap:8px; justify-content:center; margin:14px 0 4px; }
.sl-digit {
    width:46px !important; height:52px !important;
    text-align:center !important; font-size:1.4rem !important;
    font-weight:700 !important; border:2px solid #ccc !important;
    border-radius:6px !important; padding:0 !important;
    transition:border-color .2s;
}
.sl-digit:focus { border-color:#8B2500 !important; outline:none; box-shadow:0 0 0 3px rgba(139,37,0,.15); }
.sl-sent-info { text-align:center; font-size:.9rem; color:#444; margin-bottom:14px; }
.sl-timer-row { text-align:center; margin-top:12px; font-size:.85rem; color:#888; }
.sl-countdown { font-weight:700; color:#8B2500; }
.sl-link-btn  { background:none; border:none; color:#8B2500; font-size:.875rem; cursor:pointer; text-decoration:underline; padding:0; }
.sl-link-btn:hover { color:#a83000; }
.sl-msg { margin-top:14px; padding:10px 14px; border-radius:4px; font-size:.875rem; border-left:4px solid transparent; }
.sl-msg-ok  { background:#e8f5e9; border-color:#43a047; color:#2e7d32; }
.sl-msg-err { background:#fdecea; border-color:#e53935; color:#c62828; }
.sl-loader  { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:14px; font-size:.875rem; color:#666; }
.sl-spinner {
    width:18px; height:18px; flex-shrink:0;
    border:3px solid #eee; border-top-color:#8B2500;
    border-radius:50%; animation:slSpin .75s linear infinite;
}
@keyframes slSpin { to { transform:rotate(360deg); } }
.sl-divider { display:flex; align-items:center; color:#aaa; font-size:13px; margin:26px 0 14px; }
.sl-divider::before, .sl-divider::after { content:''; flex:1; height:1px; background:#ddd; }
.sl-divider span { padding:0 12px;    font-size: 13px; }
.sl-alt { text-align:center; font-size:.875rem; color:#666; }
.sl-alt a {
    color: #8B2500;
    font-weight: 500;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: underline;
}

/* ─────────────────────────────────────────────────────────────
   Register page — OTP verification step box
   ───────────────────────────────────────────────────────────── */
.rs-box {
    max-width:500px; margin:0 auto 32px;
    border:2px solid #8B2500; border-radius:8px;
    padding:28px 32px 24px; background:#fffaf9;
    box-shadow:0 2px 14px rgba(139,37,0,.09);
    transition:border-color .4s, background .4s;
}
.rs-box.rs-done { border-color:#43a047; background:#f1faf1; }
.rs-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.rs-head-icon { font-size:1.3rem; }
.rs-head-title { font-size:1.1rem; font-weight:700; color:#8B2500; margin:0; transition:color .4s; }
.rs-box.rs-done .rs-head-title { color:#2e7d32; }
.rs-subtitle { font-size:.85rem; color:#777; margin:0 0 20px; }
.rs-label { display:block; font-weight:600; font-size:.875rem; color:#333; margin-bottom:6px; }
.rs-phone-row   { display:flex; gap:8px; margin-bottom:4px; }
.rs-country-sel {
    width:115px; flex-shrink:0; height:44px;
    border:1px solid #ccc; border-radius:4px;
    padding:0 8px; font-size:14px; background:#fafafa;
}
.rs-phone-inp { flex:1; height:44px; border:1px solid #ccc; border-radius:4px; padding:0 14px; font-size:15px; }
.rs-phone-inp:focus, .rs-country-sel:focus { border-color:#8B2500; outline:none; box-shadow:0 0 0 3px rgba(139,37,0,.12); }
.rs-btn-primary {
    margin-top:14px; padding:11px 28px; font-size:14px; font-weight:600;
    border-radius:4px; background:#8B2500; border:none; color:#fff;
    cursor:pointer; transition:background .2s;
}
.rs-btn-primary:hover:not(:disabled) { background:#a83000; }
.rs-btn-primary:disabled { opacity:.6; cursor:not-allowed; }
.rs-otp-row { display:flex; gap:8px; margin:12px 0 4px; }
.rs-digit {
    width:44px !important; height:50px !important;
    text-align:center !important; font-size:1.3rem !important;
    font-weight:700 !important; border:2px solid #ccc !important;
    border-radius:6px !important; padding:0 !important; transition:border-color .2s;
}
.rs-digit:focus { border-color:#8B2500 !important; outline:none; box-shadow:0 0 0 3px rgba(139,37,0,.15); }
.rs-sent-info { font-size:.9rem; color:#444; margin-bottom:12px; }
.rs-timer-row { margin-top:10px; font-size:.85rem; color:#888; }
.rs-countdown { font-weight:700; color:#8B2500; }
.rs-link-btn  { background:none; border:none; color:#8B2500; font-size:.85rem; cursor:pointer; text-decoration:underline; padding:0; }
.rs-link-btn:hover { color:#a83000; }
.rs-badge { display:inline-flex; align-items:center; gap:6px; background:#e8f5e9; color:#2e7d32; font-size:.875rem; font-weight:700; padding:8px 16px; border-radius:20px; margin-bottom:8px; }
.rs-unlock-note { font-size:.875rem; color:#555; margin:8px 0 0; }
.rs-msg { margin-top:12px; padding:10px 14px; border-radius:4px; font-size:.875rem; border-left:4px solid transparent; }
.rs-msg-ok  { background:#e8f5e9; border-color:#43a047; color:#2e7d32; }
.rs-msg-err { background:#fdecea; border-color:#e53935; color:#c62828; }
.rs-loader  { display:flex; align-items:center; gap:8px; margin-top:12px; font-size:.875rem; color:#666; }
.rs-spinner {
    width:18px; height:18px; flex-shrink:0;
    border:3px solid #eee; border-top-color:#8B2500;
    border-radius:50%; animation:rsSpin .75s linear infinite;
}
@keyframes rsSpin { to { transform:rotate(360deg); } }

/* ─────────────────────────────────────────────────────────────
   Form lock overlay
   ───────────────────────────────────────────────────────────── */
.rs-form-lock-wrap { position:relative; }
.rs-lock-overlay {
    position:absolute; top:0; left:0; right:0; bottom:0;
    background:rgba(255,255,255,.78);
    backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px);
    z-index:99;
    display:flex; align-items:flex-start;
    justify-content:center; padding-top:80px;
    border-radius:4px; transition:opacity .4s;
}
.rs-lock-msg {
    background:#fff; border:2px solid #8B2500; border-radius:8px;
    padding:20px 28px; text-align:center;
    color:#8B2500; font-weight:700; font-size:1.2rem;
    box-shadow:0 4px 24px rgba(139,37,0,.14);
}
.rs-lock-msg small { display:block; font-weight:400; font-size:.8rem; color:#000; margin-top:10px; }

/* ─────────────────────────────────────────────────────────────
   Responsive
   ───────────────────────────────────────────────────────────── */
@media(max-width:480px) {
    .sl-wrap    { padding:28px 16px 24px; margin:12px; }
    .sl-digit   { width:38px !important; height:44px !important; font-size:1.1rem !important; }
    .sl-otp-row { gap:5px; }
    .rs-box     { padding:20px 16px 18px; }
    .rs-digit   { width:38px !important; height:44px !important; font-size:1.1rem !important; }
    .rs-otp-row { gap:5px; }
}