/* Developed by RegiTech (+2348038240084). Unauthorized removal does not transfer authorship. */
/* ═══════════════════════════════════════════════════════════
   iPay NG — Global Panel & Component Styles
   ═══════════════════════════════════════════════════════════ */

/* ── Faster Bootstrap modals ── */
.modal.fade .modal-dialog { transition: transform .12s ease-out !important; }
.modal.fade { transition: opacity .12s ease !important; }
.modal-backdrop.fade { transition: opacity .12s ease !important; }

/* ── Service modals (Airtime / Data / Cable / Exam) ── */
#airtime .modal-dialog,
#data    .modal-dialog,
#cable   .modal-dialog,
#examPins .modal-dialog {
    max-width: 360px;
    margin: auto;
}
@media (max-width: 576px) {
    #airtime .modal-dialog,
    #data    .modal-dialog,
    #cable   .modal-dialog,
    #examPins .modal-dialog {
        max-width: 340px !important;
        margin: auto !important;
    }
}

/* Grid layout — items fill full row equally */
.box-service.box-service-modal {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    flex-wrap: unset !important;
    justify-content: unset !important;
    padding: 8px 4px 12px !important;
}
.box-service.box-service-modal li {
    flex-shrink: unset !important;
    min-width: unset !important;
    list-style: none;
}
.box-service.box-service-modal li a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 6px 12px !important;
    gap: 10px;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #444 !important;
    text-decoration: none;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0px 8px 15px rgba(24,25,27,.07);
    transition: background .15s, box-shadow .15s;
    height: 100%;
    box-sizing: border-box;
}
.box-service.box-service-modal li a:hover {
    background: #FBEDEC !important;
    box-shadow: 0px 8px 20px rgba(171, 41, 35,.18) !important;
    color: #AB2923 !important;
}
.box-service.box-service-modal li .icon-box2 {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    padding: 4px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.1) !important;
    pointer-events: none;
}
.box-service.box-service-modal li .icon-box2 img {
    pointer-events: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
}

/* 2-item modals (Exam) — only 2 cols */
#examPins .box-service-modal {
    grid-template-columns: repeat(2, 1fr) !important;
    max-width: 220px;
    margin: 0 auto;
}

/* ── Button Loader ── */
@keyframes btn-spin { to { transform: rotate(360deg); } }
.btn-spinner {
    display: inline-block; width: 18px; height: 18px;
    border: 2px solid rgba(0,0,0,.2);
    border-top-color: #000;
    border-radius: 50%;
    animation: btn-spin .7s linear infinite;
    vertical-align: middle; margin-right: 8px; flex-shrink: 0;
}

/* ── Custom Select ── */
.select-options { z-index: 10; }
.swal2-container { z-index: 99999 !important; }
.group-input label { background-color: #fff !important; z-index: 1; border-radius: 6px; padding: 2px 8px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.custom-select-wrapper { position: relative; width: 100%; }
.select-selected {
    border: 2px solid #e8e8e8; border-radius: 12px; margin-top: 2px;
    padding: 12px 45px 12px 15px; cursor: pointer; background: #fff;
    position: relative; transition: border 0.2s ease;
}
.select-selected:hover { border-color: #ccc; }
.select-selected::after {
    content: ""; position: absolute; right: 15px; top: 50%;
    width: 8px; height: 8px; border-right: 2px solid #888; border-bottom: 2px solid #888;
    transform: translateY(-50%) rotate(45deg); transition: transform 0.3s ease;
}
.select-selected.open::after { transform: translateY(-50%) rotate(-135deg); }
.select-options {
    position: absolute; width: 100%; background: #fff; margin-top: 8px;
    border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    max-height: 0; opacity: 0; overflow: hidden; transition: all 0.25s ease; z-index: 999;
}
.select-options.show { max-height: 250px; opacity: 1; overflow-y: auto; }
.select-options::-webkit-scrollbar { width: 0px; }
.select-options::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }
.select-options div { padding: 12px 15px; cursor: pointer; transition: background 0.2s ease; }
.select-options div:hover { background: #f3f4f6; }
.select-options .active { background: #FBEDEC; font-weight: 600; }

/* ── PIN Panel ── */
.pin-form { text-align: center; }
.pin-inputs { padding-top: 10px; display: flex; gap: 10px; margin-bottom: 20px; justify-content: center; }
.pin-inputs input {
    width: 56px; height: 56px; font-size: 26px; text-align: center;
    border: 2px solid #e0e0e0; border-radius: 14px;
    background: #f5f5f5; color: #111;
    -webkit-text-security: disc; -moz-text-security: disc; text-security: disc;
    transition: border-color .2s, background .2s;
    flex-shrink: 0;
}
.pin-inputs input:focus { border-color: #AB2923; background: #fff; outline: none; }

/* ── Transfer Panel ── */
.trp-inner { background: #eee; border-radius: 12px; padding: 14px; margin: 12px 10px 4px; }
.trp-who { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid #ddd; }
.trp-who-icon { width: 38px; height: 38px; border-radius: 50%; background: #AB2923; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trp-who-icon em { color: #000; font-size: 18px; }
.trp-who-text h5 { font-size: 14px; font-weight: 700; color: #111; margin: 0 0 2px; }
.trp-who-text p  { font-size: 11px; color: #888; margin: 0; }
.trp-field { position: relative; }
.trp-field label { display: block; font-size: 11px; font-weight: 700; color: #888; margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; background: transparent !important; }
.trp-field input {
    width: 100%; border: 1.5px solid #d8d8d8; border-radius: 10px;
    padding: 12px 40px 12px 14px; font-size: 15px; font-weight: 600; color: #111;
    background: #fff; outline: none; box-sizing: border-box; transition: border-color .2s;
}
.trp-field input:focus { border-color: #AB2923; }
.trp-field input::placeholder { font-weight: 400; color: #bbb; font-size: 14px; }
.trp-clear-btn {
    position: absolute; right: 12px; bottom: 12px;
    background: #eee; border: none; border-radius: 50%;
    width: 26px; height: 26px; min-width: 26px; min-height: 26px;
    padding: 0; line-height: 1;
    font-size: 11px; color: #888;
    cursor: pointer; display: none; align-items: center; justify-content: center;
}
.trp-clear-btn.show { display: flex; }
.trp-fee { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.trp-fee em { color: #00dfa3; font-size: 14px; }
.trp-fee span { font-size: 11px; color: #888; }
.trp-fee strong { color: #00dfa3; }
button:disabled { opacity: 0.5; cursor: not-allowed; }
@keyframes tfSpin { to { transform: rotate(360deg); } }

/* ── Notification Panel ── */
#notifPanel.notif-panel { z-index: 1200; }
#notifPanel .panel-box {
    bottom: 0; left: 50%; transform: translate(-50%, 100%);
    border-top-left-radius: 12px; border-top-right-radius: 12px;
    max-width: 420px; width: 100%;
    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#notifPanel.panel-open .panel-box { transform: translate(-50%, 0); }
#notifPanel.panel-closing .panel-box { transform: translate(-50%, 100%); }
#notifPanel .panel_overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    opacity: 0; visibility: hidden; z-index: 1199;
    transition: opacity .2s ease, visibility .2s ease;
}
#notifPanel.panel-open .panel_overlay { opacity: 1; visibility: visible; }
#notifPanel.panel-closing .panel_overlay { opacity: 0; visibility: hidden; }

.np-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 0; border-bottom: 1px solid #f5f5f5; }
.np-item:last-child { border-bottom: none; }
.np-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 18px; }
.np-icon.airtime     { background: #FBEDEC; color: #AB2923; }
.np-icon.data        { background: #e3f2fd; color: #1565c0; }
.np-icon.cable       { background: #f3e5f5; color: #7b1fa2; }
.np-icon.electricity { background: #FBEDEC; color: #AB2923; }
.np-icon.transfer    { background: #e8f5e9; color: #1b5e20; }
.np-icon.withdraw    { background: #fce4ec; color: #c62828; }
.np-icon.deposit     { background: #e0f7e9; color: #00695c; }
.np-icon.sms         { background: #e8eaf6; color: #283593; }
.np-icon.exam        { background: #f1f8e9; color: #558b2f; }
.np-icon.swap        { background: #e0f2f1; color: #00695c; }
.np-icon.kyc         { background: #e8f5e9; color: #2e7d32; }
.np-icon.security    { background: #fce4ec; color: #c62828; }
.np-icon.system      { background: #f5f5f5; color: #757575; }
.np-body { flex: 1; min-width: 0; }
.np-title   { font-size: 13px; font-weight: 700; color: #1d1d1f; margin-bottom: 2px; }
.np-message { font-size: 12px; color: #666; line-height: 1.45; margin-bottom: 3px; }
.np-date    { font-size: 11px; color: #bbb; }

[data-theme="dark"] .group-input label { background-color: #252525 !important; color: #9a9a9a !important; }
[data-theme="dark"] .group-input input,
[data-theme="dark"] .group-input select,
[data-theme="dark"] .group-input textarea { background: #252525 !important; }

/* ── Auth pages dark mode ── */
[data-theme="dark"] .auth-bg { background: #121212 !important; }
[data-theme="dark"] .auth-card { background: #1e1e1e !important; border-color: #2e2e2e !important; box-shadow: 0 4px 24px rgba(0,0,0,.4) !important; }
[data-theme="dark"] .auth-card h2 { color: #f0f0f0 !important; }
[data-theme="dark"] .auth-card .auth-subtitle { color: #666 !important; }
[data-theme="dark"] .auth-card .group-input label { background: #252525 !important; color: #9a9a9a !important; }
[data-theme="dark"] .auth-card .group-input input,
[data-theme="dark"] .auth-card .group-input select { background: #252525 !important; color: #f0f0f0 !important; border-color: #2e2e2e !important; }
[data-theme="dark"] .auth-card .group-input input::placeholder { color: #555 !important; }
[data-theme="dark"] .auth-forgot-link { color: #666 !important; }
[data-theme="dark"] .auth-or-line { color: #444 !important; }
[data-theme="dark"] .auth-or-line::before,
[data-theme="dark"] .auth-or-line::after { background: #2e2e2e !important; }
[data-theme="dark"] .auth-google-btn,
[data-theme="dark"] .auth-biometric-btn { background: #252525 !important; border-color: #2e2e2e !important; color: #f0f0f0 !important; }
[data-theme="dark"] .auth-google-btn:hover,
[data-theme="dark"] .auth-biometric-btn:hover { border-color: #AB2923 !important; }
[data-theme="dark"] .auth-logo-icon-wrap { background: #252525 !important; border-color: #2e2e2e !important; }
[data-theme="dark"] .auth-theme-btn { background: #252525 !important; border-color: #2e2e2e !important; color: #9a9a9a !important; }
[data-theme="dark"] .auth-bottom-link { color: #666 !important; }
[data-theme="dark"] .auth-logo-inline-text h4 { color: #f0f0f0 !important; }