/* SmileOne Top-Up — Frontend CSS (WoodMart compatible) */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Form wrapper ────────────────────────────────────────────── */
#sot-topup-wrapper { margin: 20px 0; font-family: 'Inter', sans-serif; }
#sot-topup-box { background: #181c27; border: 1px solid #252a38; border-radius: 12px; padding: 22px; max-width: 100%; }

/* ── Field groups ────────────────────────────────────────────── */
.sot-field-group { margin-bottom: 16px !important; }
.sot-label { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: #e2e8f0 !important; margin-bottom: 7px !important; font-family: 'Inter', sans-serif !important; }
.sot-req { color: #f87171 !important; }
.sot-field-hint { display: block !important; font-size: 11px !important; color: #64748b !important; margin-top: 5px !important; }

#sot-topup-box input[type=text],
#sot-topup-box input[type=email] {
    width: 100% !important; padding: 11px 14px !important;
    background: #0f1117 !important; border: 1px solid #252a38 !important;
    border-radius: 8px !important; color: #e2e8f0 !important;
    font-size: 14px !important; font-family: 'Inter', sans-serif !important;
    outline: none !important; box-shadow: none !important;
    transition: border-color .2s !important; height: auto !important;
    -webkit-appearance: none !important; appearance: none !important;
}
#sot-topup-box input[type=text]:focus,
#sot-topup-box input[type=email]:focus {
    border-color: #6c63ff !important;
    box-shadow: 0 0 0 3px rgba(108,99,255,.15) !important;
}

/* ── Verify button ───────────────────────────────────────────── */
#sot-verify-btn {
    width: 100% !important; padding: 13px !important;
    background: linear-gradient(135deg, #6c63ff, #a78bfa) !important;
    border: none !important; border-radius: 9px !important;
    color: #fff !important; font-size: 14px !important;
    font-weight: 600 !important; cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    margin-top: 6px !important; letter-spacing: .02em !important;
    transition: opacity .2s !important; box-shadow: none !important;
    -webkit-appearance: none !important;
}
#sot-verify-btn:hover { opacity: .88 !important; }
#sot-verify-btn:disabled { opacity: .45 !important; cursor: not-allowed !important; }

/* ── Result message ──────────────────────────────────────────── */
#sot-result-msg { margin-top: 12px !important; font-family: 'Inter', sans-serif !important; }
.sot-err { background: rgba(248,113,113,.1) !important; color: #f87171 !important; border: 1px solid rgba(248,113,113,.2) !important; padding: 10px 14px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; }
.sot-ok  { background: rgba(34,211,160,.1) !important;  color: #22d3a0 !important; border: 1px solid rgba(34,211,160,.2) !important;  padding: 10px 14px !important; border-radius: 8px !important; font-size: 13px !important; font-weight: 500 !important; }
.sot-loading { color: #a78bfa !important; font-size: 13px !important; padding: 8px 0 !important; }

/* ── Modal overlay ───────────────────────────────────────────── */
#sot-modal {
    font-family: 'Inter', sans-serif !important;
}

/* ── Modal card ──────────────────────────────────────────────── */
.sot-mc {
    background: #181c27 !important;
    border: 1px solid #252a38 !important;
    border-radius: 16px !important;
    padding: 28px 24px !important;
    max-width: 460px !important;
    width: 95% !important;
    text-align: center !important; margin: 0 auto !important;
    box-shadow: 0 24px 80px rgba(0,0,0,.7) !important;
    animation: sotSlideUp .25s ease !important;
}
@keyframes sotSlideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.sot-mc-icon  { font-size: 34px !important; margin-bottom: 10px !important; }
.sot-mc-title { margin: 0 0 16px !important; font-size: 17px !important; font-weight: 700 !important; color: #e2e8f0 !important; }
.sot-mc-sub   { color: #64748b !important; font-size: 12px !important; margin: 12px 0 16px !important; }
.sot-mc-rows  { margin-bottom: 4px !important; text-align: left !important; }

/* ── Modal rows ──────────────────────────────────────────────── */
.sot-mrow {
    display: flex !important; align-items: center !important; gap: 10px !important;
    padding: 10px 12px !important; border-radius: 8px !important;
    background: #0f1117 !important; border: 1px solid #252a38 !important;
    margin-bottom: 8px !important;
}
.sot-mrow:last-child { margin-bottom: 0 !important; }
.sot-mrow-icon  { font-size: 15px !important; flex-shrink: 0 !important; }
.sot-mrow-label { font-size: 11px !important; color: #64748b !important; font-weight: 600 !important; width: 76px !important; flex-shrink: 0 !important; }
.sot-mrow-value { font-size: 13px !important; font-weight: 700 !important; color: #e2e8f0 !important; word-break: break-all !important; }

/* ── Modal buttons ───────────────────────────────────────────── */
.sot-mc-confirm {
    width: 100% !important; padding: 13px !important;
    background: linear-gradient(135deg, #6c63ff, #a78bfa) !important;
    border: none !important; border-radius: 9px !important;
    color: #fff !important; font-size: 14px !important;
    font-weight: 600 !important; cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    transition: opacity .2s !important; margin-bottom: 10px !important;
    box-shadow: none !important;
}
.sot-mc-confirm:hover { opacity: .88 !important; }
.sot-mc-confirm:disabled { opacity: .45 !important; cursor: wait !important; }

.sot-mc-cancel {
    width: 100% !important; padding: 11px !important;
    background: transparent !important;
    border: 1px solid #252a38 !important; border-radius: 9px !important;
    color: #64748b !important; font-size: 13px !important;
    font-weight: 500 !important; cursor: pointer !important;
    font-family: 'Inter', sans-serif !important;
    transition: all .2s !important;
}
.sot-mc-cancel:hover { border-color: #f87171 !important; color: #f87171 !important; }