/* ===== หน้าต่างและช่องกรอกรหัส OTP ทั้งเว็บ =====
 * ใช้กับ: ป๊อปอัปเข้าสู่ระบบ (.lo-*), ป๊อปอัปสมัครสมาชิก (.ro-*), ป๊อปอัปจัดการโฮสติ้ง (.lo-*)
 * และช่องกรอก 6 ช่องในหน้าลืมรหัสผ่าน/โปรไฟล์/ยืนยันโฮสติ้ง (.otp-box จาก otp_input.js)
 * สไตล์เดิมถูกใส่จาก JS ภายหลัง จึงต้องใช้ !important เพื่อให้หน้าตาเหมือนกันทุกจุด
 */
:root {
    --otp-accent: #8b5cf6;
    --otp-accent-2: #3b82f6;
    --otp-ok: #34d399;
    --otp-line: rgba(148, 163, 184, .28);
}

/* กล่องป๊อปอัป */
.swal2-popup:has(.lo-boxes),
.swal2-popup:has(.ro-boxes) {
    width: min(420px, 94vw) !important;
    border-radius: 28px !important;
    padding: 1.6rem 1.2rem 1.4rem !important;
    background: radial-gradient(120% 80% at 50% 0%, rgba(139, 92, 246, .20), transparent 60%), #0b1120 !important;
    border: 1px solid rgba(139, 92, 246, .30) !important;
    box-shadow: 0 30px 80px rgba(0, 0, 0, .6) !important;
}
.swal2-popup:has(.lo-boxes) .swal2-title,
.swal2-popup:has(.ro-boxes) .swal2-title { color: #f8fafc !important; font-weight: 800 !important; }

/* ไอคอนด้านบนพร้อมวงแสงกระพริบ */
.lo-icon, .ro-icon {
    position: relative;
    width: 76px !important;
    height: 76px !important;
    border-radius: 24px !important;
    font-size: 30px !important;
    background: linear-gradient(135deg, var(--otp-accent), var(--otp-accent-2)) !important;
    box-shadow: 0 14px 34px rgba(124, 58, 237, .45) !important;
}
.lo-icon::after, .ro-icon::after {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 30px;
    border: 2px solid rgba(139, 92, 246, .35);
    animation: otpPulse 2.2s ease-out infinite;
    pointer-events: none;
}
@keyframes otpPulse {
    from { transform: scale(.92); opacity: 1; }
    to { transform: scale(1.18); opacity: 0; }
}

/* ข้อความและอีเมลปลายทาง */
.lo-sub, .ro-msg { color: #cbd5e1 !important; }
.lo-mail {
    display: inline-block !important;
    margin-top: 6px !important;
    padding: .35rem .9rem !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--otp-line) !important;
    font-size: 13.5px !important;
}

/* ช่องกรอกรหัส 6 ช่อง */
.lo-boxes, .ro-boxes, .otp-boxes { display: flex !important; flex-wrap: nowrap !important; justify-content: center; gap: 10px !important; width: 100%; max-width: 340px; margin: 20px auto 12px !important; }
.lo-box, .ro-box, .otp-box {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    max-width: 50px !important;
    height: 60px !important;
    padding: 0 !important;
    border-radius: 16px !important;
    border: 1.5px solid var(--otp-line) !important;
    background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)) !important;
    color: #fff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
    text-align: center;
    caret-color: var(--otp-accent);
    outline: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease, background .2s ease !important;
}
.lo-box:focus, .ro-box:focus, .otp-box:focus {
    border-color: var(--otp-accent) !important;
    background: rgba(139, 92, 246, .10) !important;
    box-shadow: 0 0 0 4px rgba(139, 92, 246, .22), 0 10px 24px rgba(139, 92, 246, .25) !important;
    transform: translateY(-2px);
}
.lo-box.filled, .ro-box.filled, .otp-box.filled {
    border-color: rgba(52, 211, 153, .75) !important;
    background: rgba(52, 211, 153, .08) !important;
}
@media (max-width: 400px) {
    .lo-boxes, .ro-boxes, .otp-boxes { gap: 7px !important; }
    .lo-box, .ro-box, .otp-box { height: 50px !important; border-radius: 13px !important; font-size: 22px !important; }
}

/* เวลาที่เหลือ */
.lo-timer, .ro-timer, #hotpExpire {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    background: rgba(148, 163, 184, .10);
    font-size: 12.5px !important;
}
.lo-timer:empty, .ro-timer:empty, #hotpExpire:empty { display: none !important; }

/* คำแนะนำด้านล่าง (ดูกล่องจดหมายขยะ) */
.lo-note, .ro-note, .otp-note {
    margin-top: 14px !important;
    padding-top: 12px;
    border-top: 1px dashed rgba(148, 163, 184, .22);
    font-size: 12px !important;
    color: #94a3b8 !important;
}

/* ปุ่มและข้อความผิดพลาดในป๊อปอัป OTP */
.swal2-popup:has(.lo-boxes) .swal2-actions,
.swal2-popup:has(.ro-boxes) .swal2-actions {
    gap: .5rem !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    margin-top: 1.1rem !important;
}
.swal2-popup:has(.lo-boxes) .swal2-actions > button,
.swal2-popup:has(.ro-boxes) .swal2-actions > button { margin: 0 !important; font-size: 14px !important; }
.swal2-popup:has(.lo-boxes) .swal2-confirm,
.swal2-popup:has(.ro-boxes) .swal2-confirm {
    border-radius: 14px !important;
    padding: .65rem 1.2rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, var(--otp-accent), var(--otp-accent-2)) !important;
    box-shadow: 0 10px 24px rgba(124, 58, 237, .35) !important;
}
.swal2-popup:has(.lo-boxes) .swal2-cancel, .swal2-popup:has(.lo-boxes) .swal2-deny,
.swal2-popup:has(.ro-boxes) .swal2-cancel, .swal2-popup:has(.ro-boxes) .swal2-deny {
    border-radius: 14px !important;
    padding: .65rem 1rem !important;
    background: rgba(255, 255, 255, .06) !important;
    border: 1px solid var(--otp-line) !important;
    color: #e2e8f0 !important;
}
.swal2-popup:has(.lo-boxes) .swal2-validation-message,
.swal2-popup:has(.ro-boxes) .swal2-validation-message {
    margin: .7rem 1rem 0 !important;
    border-radius: 12px !important;
    background: rgba(248, 113, 113, .12) !important;
    color: #fecaca !important;
}

@media (prefers-reduced-motion: reduce) {
    .lo-icon::after, .ro-icon::after { animation: none; }
    .lo-box, .ro-box, .otp-box { transition: none !important; }
}

/* หน้าลืมรหัสผ่านมีคำแนะนำเรื่องกล่องจดหมายขยะอยู่ด้านบนแล้ว ไม่ต้องแสดงซ้ำใต้ช่องกรอก */
#forgotCompleteForm .otp-note { display: none !important; }