/* ===================================================
EthicalSMM Panel Theme — style.css
Exact match to ethicalsmm.com design system
CSS variables use --nv- prefix (native variables)
=================================================== */
/* ── 1. TOKENS ── */
:root {
--nv-accent: #D93A2B;
--nv-accent-2: #D93A2B;
--nv-accent-press: #B92E21;
--nv-accent-soft: rgba(217,58,43,.12);
--nv-accent-ring: rgba(217,58,43,.28);
--nv-bg: #f6f7f9;
--nv-surface: #ffffff;
--nv-surface-2: #f1f3f7;
--nv-card: #ffffff;
--nv-text: #0f172a;
--nv-text-soft: #475569;
--nv-muted: #7c869a;
--nv-border: #e7e9ef;
--nv-border-2: #dfe2ea;
--nv-ok: #10b981;
--nv-okbg: rgba(16,185,129,.12);
--nv-warn: #f59e0b;
--nv-warnbg: rgba(245,158,11,.14);
--nv-bad: #ef4444;
--nv-badbg: rgba(239,68,68,.12);
--nv-info: #3b82f6;
--nv-infobg: rgba(59,130,246,.12);
--nv-r: 14px;
--nv-r-sm: 10px;
--nv-r-lg: 20px;
--nv-sh: 0 1px 2px rgba(16,24,40,.04),0 8px 24px -16px rgba(16,24,40,.18);
--nv-sh-lg: 0 24px 60px -24px rgba(16,24,40,.30);
--nv-sb: 264px;
--nv-tb: 64px;
}
/* ── DARK MODE ── */
.dark {
--nv-bg: #0f111a;
--nv-surface: #181c27;
--nv-surface-2: #1e2233;
--nv-card: #181c27;
--nv-text: #e8eaf2;
--nv-text-soft: #94a3b8;
--nv-muted: #5b6478;
--nv-border: #2a2f42;
--nv-border-2: #353a50;
}
/* ── 2. RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:14px;-webkit-text-size-adjust:100%;}
body{
font-family:var(--nv-font,system-ui,-apple-system,'Segoe UI',sans-serif);
background:var(--nv-bg);
color:var(--nv-text);
line-height:1.5;
min-height:100vh;
}
/* ── 3. SCROLLBAR ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--nv-border-2);border-radius:6px;}
/* ── 4. LAYOUT ── */
.nv-wrap{display:flex;height:100vh;height:100dvh;overflow:hidden;}
.nv-shell{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden;}
/* ── 5. SIDEBAR ── */
.nv-side{
width:var(--nv-sb);
background:var(--nv-surface);
border-right:1px solid var(--nv-border);
display:flex;flex-direction:column;
overflow:hidden;flex-shrink:0;
transition:width .3s ease;
position:relative;z-index:200;
}
/* Only the middle nav scrolls — logo (head) stays pinned at the top,
and the balance card (foot) stays pinned at the bottom. */
.nv-side-head{
padding:20px 16px 16px;
border-bottom:1px solid var(--nv-border);
flex-shrink:0;
}
.nv-brand{
display:flex;align-items:center;gap:10px;
text-decoration:none;color:var(--nv-text);
}
.nv-brand-icon{
width:36px;height:36px;
background:var(--nv-accent);
border-radius:10px;
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
}
.nv-brand-icon i{color:#fff;font-size:15px;}
.nv-brand-name{font-weight:700;font-size:15px;white-space:nowrap;}
.nv-brand img{max-width:150px;height:auto;}
/* Nav groups */
.nv-nav{flex:1;padding:8px 8px;overflow-y:auto;}
.nv-nav-group{
font-size:10px;font-weight:700;
color:var(--nv-muted);letter-spacing:.8px;text-transform:uppercase;
padding:12px 8px 4px;
}
.nv-nav-item{
display:flex;align-items:center;gap:10px;
padding:9px 10px;border-radius:var(--nv-r-sm);
color:var(--nv-text-soft);
font-size:13px;font-weight:500;
text-decoration:none;white-space:nowrap;
position:relative;transition:all .15s;
cursor:pointer;
}
.nv-nav-item:hover{
background:var(--nv-surface-2);
color:var(--nv-text);text-decoration:none;
}
.nv-nav-item.active{
background:var(--nv-accent-soft);
color:var(--nv-accent);font-weight:600;
}
/* Icon sits inside its own rounded, tinted box (not a bare glyph) so each
menu row reads clearly at a glance — matches the boxed-icon sidebar style
used by other panels instead of the old plain/naked icon look. */
.nv-nav-item i{
font-size:13px;width:26px;height:26px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
border-radius:7px;
background:var(--nv-surface-2);
color:var(--nv-muted);
transition:background .15s,color .15s;
}
.nv-nav-item:hover i{background:var(--nv-border);color:var(--nv-text);}
.nv-nav-item.active i{background:var(--nv-accent);color:#fff;}
.nv-nav-label{flex:1;}
.nv-nav-badge{
font-size:10px;font-weight:700;background:var(--nv-bad);color:#fff;
padding:1px 6px;border-radius:10px;min-width:18px;text-align:center;
}
/* Sidebar footer — pinned, never scrolls with the nav above it */
.nv-side-foot{
padding:12px;
border-top:1px solid var(--nv-border);
flex-shrink:0;
display:flex;flex-direction:column;gap:8px;
background:var(--nv-surface);
}
/* Balance card */
.nv-side-balance{
display:block;
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
border-radius:var(--nv-r);
padding:12px 14px;
text-decoration:none;
box-shadow:0 8px 20px -10px var(--nv-accent-ring);
transition:filter .15s,transform .15s;
}
.nv-side-balance:hover{filter:brightness(1.05);text-decoration:none;}
.nv-side-balance-top{
display:flex;align-items:center;gap:8px;
margin-bottom:10px;
}
.nv-side-balance-avatar{
width:22px;height:22px;border-radius:50%;
background:rgba(255,255,255,.22);
display:flex;align-items:center;justify-content:center;
color:#fff;font-weight:700;font-size:11px;flex-shrink:0;
}
.nv-side-balance-uname{
color:rgba(255,255,255,.92);font-size:12px;font-weight:600;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nv-side-balance-row{
display:flex;align-items:flex-end;justify-content:space-between;gap:8px;
}
.nv-side-balance-label{
color:rgba(255,255,255,.75);font-size:10.5px;font-weight:600;
text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px;
}
.nv-side-balance-amt{color:#fff;font-size:17px;font-weight:800;line-height:1.1;}
.nv-side-balance-btn{
display:flex;align-items:center;gap:5px;flex-shrink:0;
background:#fff;color:var(--nv-accent);
font-size:11.5px;font-weight:700;
padding:7px 10px;border-radius:20px;
white-space:nowrap;
}
.nv-side-balance-btn i{font-size:10px;}
/* Account / logout row under the balance card */
.nv-side-foot-links{display:flex;gap:8px;}
.nv-side-foot-links a{
display:flex;align-items:center;justify-content:center;gap:6px;
flex:1;padding:8px;border-radius:var(--nv-r-sm);
border:1px solid var(--nv-border);color:var(--nv-text-soft);
font-size:12px;font-weight:500;text-decoration:none;
transition:all .15s;
}
.nv-side-foot-links a:hover{border-color:var(--nv-accent);color:var(--nv-accent);background:var(--nv-accent-soft);}
/* ── 6. TOPBAR ── */
.nv-top{
height:var(--nv-tb);
background:var(--nv-surface);
border-bottom:1px solid var(--nv-border);
display:flex;align-items:center;gap:12px;
padding:0 20px;flex-shrink:0;
position:sticky;top:0;z-index:100;
}
.nv-top-ham{
width:36px;height:36px;border-radius:var(--nv-r-sm);
border:1px solid var(--nv-border);background:transparent;
display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--nv-text-soft);transition:all .15s;
}
.nv-top-ham:hover{border-color:var(--nv-accent);color:var(--nv-accent);}
.nv-top-spacer{flex:1;}
.nv-top-btn{
display:flex;align-items:center;justify-content:center;
width:36px;height:36px;border-radius:var(--nv-r-sm);
border:1px solid var(--nv-border);background:transparent;
color:var(--nv-text-soft);cursor:pointer;text-decoration:none;
transition:all .15s;position:relative;
}
.nv-top-btn:hover{border-color:var(--nv-accent);color:var(--nv-accent);background:var(--nv-accent-soft);text-decoration:none;}
/* Balance chip */
.nv-bal-chip{
display:flex;align-items:center;gap:6px;
padding:6px 14px;border-radius:20px;
background:var(--nv-accent-soft);color:var(--nv-accent);
font-size:13px;font-weight:700;text-decoration:none;
transition:filter .15s;
}
.nv-bal-chip:hover{filter:brightness(1.1);text-decoration:none;color:var(--nv-accent);}
.nv-bal-chip i{font-size:12px;}
/* ── 7. MAIN CONTENT ── */
.nv-main{
flex:1;overflow-y:auto;overflow-x:hidden;
background:var(--nv-bg);
padding:24px 20px;
}
/* ── 8. PAGE TITLE ── */
.nv-page-head{margin-bottom:20px;}
.nv-page-title{font-size:20px;font-weight:800;color:var(--nv-text);text-transform:capitalize;}
.nv-page-sub{font-size:13px;color:var(--nv-muted);margin-top:4px;}
/* ── 9. CARDS ── */
.nv-card{
background:var(--nv-card);
border:1px solid var(--nv-border);
border-radius:var(--nv-r);
padding:20px;
box-shadow:var(--nv-sh);
}
.nv-card + .nv-card{margin-top:16px;}
/* ── 10. STAT GRID ── */
.nv-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:20px;}
.nv-stat{
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);padding:18px;
box-shadow:var(--nv-sh);
}
.nv-stat-icon{
width:40px;height:40px;border-radius:var(--nv-r-sm);
background:var(--nv-accent-soft);
display:flex;align-items:center;justify-content:center;
font-size:17px;color:var(--nv-accent);margin-bottom:12px;
}
.nv-stat-label{font-size:12px;color:var(--nv-muted);font-weight:500;margin-bottom:4px;}
.nv-stat-val{font-size:24px;font-weight:800;color:var(--nv-text);line-height:1;}
.nv-stat-sub{font-size:12px;color:var(--nv-muted);margin-top:4px;}
/* ── 11. FORM ELEMENTS ── */
.nv-field{margin-bottom:16px;}
.nv-label{
display:block;font-size:12.5px;font-weight:600;
color:var(--nv-text-soft);margin-bottom:6px;
}
.nv-input,.nv-textarea,.nv-select{
width:100%;
background:var(--nv-surface);
border:1.5px solid var(--nv-border);
border-radius:var(--nv-r-sm);
padding:10px 14px;
font-size:13.5px;
color:var(--nv-text);
outline:none;
transition:border .2s, box-shadow .2s;
font-family:inherit;
}
.nv-input:focus,.nv-textarea:focus,.nv-select:focus{
border-color:var(--nv-accent);
box-shadow:0 0 0 3px var(--nv-accent-ring);
}
.nv-input::placeholder,.nv-textarea::placeholder{color:var(--nv-muted);}
.nv-select{appearance:none;cursor:pointer;}
/* Bootstrap form-control compat */
.nv .form-control,.nv .form-group input,.nv .form-group select,.nv .form-group textarea{
background:var(--nv-surface);
border:1.5px solid var(--nv-border);
border-radius:var(--nv-r-sm);
padding:10px 14px;font-size:13.5px;color:var(--nv-text);
outline:none;transition:border .2s,box-shadow .2s;
font-family:inherit;
width:100% !important;max-width:100%;
box-sizing:border-box;display:block;
float:none !important;
}
.nv .form-control:focus{
border-color:var(--nv-accent);
box-shadow:0 0 0 3px var(--nv-accent-ring);
}
#neworder_fields .form-group,
#neworder_fields .fields{
width:100%;float:none !important;clear:both;
margin-bottom:14px;
}
#neworder_fields .control-label{
display:block;font-size:12.5px;font-weight:600;
color:var(--nv-text-soft);margin-bottom:6px;
}
#neworder_fields .help-block{
font-size:11.5px;color:var(--nv-muted);margin-top:4px;display:block;
}
/* Dropdown custom */
.nv-dropdown-wrap{position:relative;}
.nv-dropdown-btn{
width:100%;background:var(--nv-surface);
border:1.5px solid var(--nv-border);
border-radius:var(--nv-r-sm);
padding:10px 14px;
display:flex;align-items:center;justify-content:space-between;
font-size:13.5px;color:var(--nv-text);cursor:pointer;
transition:border .2s;font-family:inherit;
}
.nv-dropdown-btn:focus,.nv-dropdown-btn:hover{border-color:var(--nv-accent);}
.nv-dropdown-menu{
position:absolute;top:calc(100%+4px);left:0;right:0;
background:var(--nv-surface);border:1px solid var(--nv-border);
border-radius:var(--nv-r-sm);
box-shadow:var(--nv-sh-lg);
max-height:220px;overflow-y:auto;z-index:300;
display:none;
}
.nv-dropdown-menu.open{display:block;}
.nv-dropdown-item{
padding:9px 14px;font-size:13px;cursor:pointer;
color:var(--nv-text);transition:background .1s;
}
.nv-dropdown-item:hover{background:var(--nv-surface-2);}
.nv-dropdown-item.active{background:var(--nv-accent-soft);color:var(--nv-accent);font-weight:600;}
/* ── 12. BUTTON ── */
.nv-btn{
display:inline-flex;align-items:center;justify-content:center;gap:8px;
padding:10px 20px;border-radius:var(--nv-r-sm);
font-size:13.5px;font-weight:600;cursor:pointer;
border:none;outline:none;text-decoration:none;
transition:all .18s;font-family:inherit;
}
.nv-btn-primary{
background:var(--nv-accent);color:#fff;
}
.nv-btn-primary:hover{background:var(--nv-accent-press);color:#fff;text-decoration:none;}
.nv-btn-outline{
background:transparent;color:var(--nv-text-soft);
border:1.5px solid var(--nv-border);
}
.nv-btn-outline:hover{border-color:var(--nv-accent);color:var(--nv-accent);background:var(--nv-accent-soft);}
.nv-btn-ghost{background:transparent;color:var(--nv-text-soft);}
.nv-btn-ghost:hover{background:var(--nv-surface-2);color:var(--nv-text);}
.nv-btn-lg{padding:12px 28px;font-size:15px;}
.nv-btn-block{width:100%;}
.nv-btn-sm{padding:6px 12px;font-size:12px;}
/* Bootstrap btn compat */
.nv .btn,.nv .btn-primary,.nv .btn-secondary,.nv .btn-lg,.nv .btn-block{
border-radius:var(--nv-r-sm);font-family:inherit;
}
.nv .btn-primary{background:var(--nv-accent);border-color:var(--nv-accent);}
.nv .btn-primary:hover,.nv .btn-primary:focus{background:var(--nv-accent-press);border-color:var(--nv-accent-press);}
/* ── 13. TABLE ── */
.nv-table-wrap{
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);overflow:hidden;
}
.nv-table{width:100%;border-collapse:collapse;}
.nv-table th{
padding:11px 16px;text-align:left;
font-size:11.5px;font-weight:700;
color:var(--nv-muted);
background:var(--nv-surface-2);
border-bottom:1px solid var(--nv-border);
text-transform:uppercase;letter-spacing:.5px;
}
.nv-table td{
padding:13px 16px;font-size:13px;
border-bottom:1px solid var(--nv-border);
vertical-align:middle;
color:var(--nv-text);
}
.nv-table tr:last-child td{border-bottom:none;}
.nv-table tr:hover td{background:var(--nv-surface-2);}
/* Bootstrap table compat */
.nv .table{width:100%;}
.nv .table>thead>tr>th{
background:var(--nv-surface-2);
border-bottom:1px solid var(--nv-border);
font-size:11.5px;font-weight:700;
color:var(--nv-muted);text-transform:uppercase;letter-spacing:.5px;
padding:11px 16px;
}
.nv .table>tbody>tr>td{
padding:13px 16px;font-size:13px;
border-bottom:1px solid var(--nv-border);vertical-align:middle;
}
.nv .table>tbody>tr:hover>td{background:var(--nv-surface-2);}
.nv .table>tbody>tr:last-child>td{border-bottom:none;}
/* ── 14. BADGE ── */
.nv-badge{
display:inline-flex;align-items:center;gap:3px;
padding:3px 10px;border-radius:20px;
font-size:11px;font-weight:700;
}
.nv-badge-ok{background:var(--nv-okbg);color:var(--nv-ok);}
.nv-badge-warn{background:var(--nv-warnbg);color:var(--nv-warn);}
.nv-badge-bad{background:var(--nv-badbg);color:var(--nv-bad);}
.nv-badge-info{background:var(--nv-infobg);color:var(--nv-info);}
.nv-badge-muted{background:var(--nv-surface-2);color:var(--nv-muted);}
.nv-badge-accent{background:var(--nv-accent-soft);color:var(--nv-accent);}
/* ── 15. ALERT / NOTICE ── */
.nv-notice{
padding:12px 16px;border-radius:var(--nv-r-sm);
font-size:13px;margin-bottom:16px;
display:flex;align-items:flex-start;gap:10px;
}
.nv-notice i{margin-top:1px;flex-shrink:0;}
.nv-notice-ok{background:var(--nv-okbg);color:#0d7a5f;border:1px solid rgba(16,185,129,.25);}
.nv-notice-bad{background:var(--nv-badbg);color:#c22;border:1px solid rgba(239,68,68,.25);}
.nv-notice-warn{background:var(--nv-warnbg);color:#b37400;border:1px solid rgba(245,158,11,.25);}
.nv-notice-info{background:var(--nv-infobg);color:#1e4fa8;border:1px solid rgba(59,130,246,.25);}
/* Bootstrap alert compat */
.nv .alert-success{background:var(--nv-okbg);color:#0d7a5f;border:1px solid rgba(16,185,129,.25);border-radius:var(--nv-r-sm);}
.nv .alert-danger{background:var(--nv-badbg);color:#c22;border:1px solid rgba(239,68,68,.25);border-radius:var(--nv-r-sm);}
.nv .alert-warning{background:var(--nv-warnbg);color:#b37400;border:1px solid rgba(245,158,11,.25);border-radius:var(--nv-r-sm);}
.nv .alert-info{background:var(--nv-infobg);color:#1e4fa8;border:1px solid rgba(59,130,246,.25);border-radius:var(--nv-r-sm);}
/* ── 16. PAGINATION ── */
.nv-pager{
display:flex;justify-content:space-between;align-items:center;
padding:14px 16px;border-top:1px solid var(--nv-border);
}
.nv-pager-info{font-size:12.5px;color:var(--nv-muted);}
.nv-pager-btns{display:flex;gap:4px;flex-wrap:wrap;}
.nv-page-btn{
min-width:32px;height:32px;border-radius:var(--nv-r-sm);
border:1px solid var(--nv-border);background:var(--nv-surface);
display:flex;align-items:center;justify-content:center;
font-size:12.5px;font-weight:600;color:var(--nv-text-soft);
cursor:pointer;text-decoration:none;padding:0 8px;
transition:all .15s;
}
.nv-page-btn:hover{border-color:var(--nv-accent);color:var(--nv-accent);text-decoration:none;}
.nv-page-btn.active{background:var(--nv-accent);color:#fff;border-color:var(--nv-accent);}
/* ── 17. TABS ── */
.nv-tabs{
display:inline-flex;gap:4px;
background:var(--nv-surface-2);
border-radius:var(--nv-r-sm);
padding:4px;margin-bottom:20px;
}
.nv-tab{
padding:7px 16px;border-radius:calc(var(--nv-r-sm) - 2px);
font-size:13px;font-weight:500;cursor:pointer;
color:var(--nv-muted);border:none;background:none;
transition:all .15s;font-family:inherit;
text-decoration:none;
}
.nv-tab.active,.nv-tab:hover{background:var(--nv-surface);color:var(--nv-text);box-shadow:var(--nv-sh);}
.nv-tab.active{font-weight:700;color:var(--nv-accent);}
/* ── 18. ORDER FORM ── */
.nv-os .row{display:flex;justify-content:space-between;padding:9px 0;font-size:13px;color:var(--nv-text-soft);}
.nv-os .row + .row{border-top:1px solid var(--nv-border);}
.nv-os .row b{color:var(--nv-text);font-weight:600;}
.nv-os .row.total{padding-top:12px;margin-top:2px;border-top:1.5px solid var(--nv-border);}
.nv-os .row.total span{font-weight:700;color:var(--nv-text);}
.nv-os .row.total b{font-size:17px;color:var(--nv-accent);}
.nv-order-wrap{
/* Left (order form) is deliberately wider than the right summary column:
service names are long, so the form needs the room and the summary
only shows 4 short rows. */
display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:20px;
align-items:start;
}
/* Grid items default to min-width:auto, which lets a child's content
(e.g. this long service-name box) force the column — and the whole
page — wider instead of wrapping/truncating inside its own column. */
.nv-order-wrap > div{min-width:0;}
/* ── Account page — profile/password column + settings column ── */
.nv-account-grid{
display:grid;grid-template-columns:1fr 1fr;gap:20px;
align-items:start;
}
.nv-account-grid > div{min-width:0;}
/* ── 18b. DASHBOARD GREETING + STAT PILLS — single unified card ── */
.nv-greet{
margin-bottom:18px;position:relative;overflow:hidden;
background:var(--nv-card);border:1px solid var(--nv-border-2);
border-radius:var(--nv-r-lg);padding:20px 22px;
box-shadow:var(--nv-sh-lg);
}
/* (the red bar that used to sit on top of the welcome card was removed) */
.nv-greet h1{font-size:20px;font-weight:800;color:var(--nv-text);margin-bottom:4px;}
.nv-greet .sub{font-size:13px;color:var(--nv-muted);}
/* Desktop/tablet: welcome text on the LEFT, the 4 stat boxes on the RIGHT — one row, one card */
.nv-greet{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
align-items:center;gap:22px;
}
.nv-greet-text{min-width:0;}
.dash-stats{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
margin-top:0;min-width:0;
}
/* Narrower screens: not enough width for side-by-side, so stack (text on top, 4 boxes below) */
@media(max-width:900px){
.nv-greet{grid-template-columns:1fr;gap:0;}
.dash-stats{margin-top:16px;}
}
.dash-stat{
display:flex;flex-direction:column;gap:6px;
background:var(--nv-surface-2);border:1px solid var(--nv-border);
border-radius:var(--nv-r);padding:12px 12px;min-width:0;
text-decoration:none;color:inherit;
transition:border-color .15s,transform .15s;
}
a.dash-stat:hover{border-color:var(--nv-accent);transform:translateY(-1px);text-decoration:none;color:inherit;}
.dash-stat .ic{
width:32px;height:32px;border-radius:9px;
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
color:#fff;
display:flex;align-items:center;justify-content:center;font-size:13px;
box-shadow:0 3px 8px rgba(217,58,43,.28);
}
/* Distinct gradient per stat pill, same style as the admin sidebar icon chips */
.dash-stat:nth-child(1) .ic{background:linear-gradient(135deg,#10b981,#059669);box-shadow:0 3px 8px rgba(16,185,129,.30);}
.dash-stat:nth-child(2) .ic{background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 3px 8px rgba(59,130,246,.30);}
.dash-stat:nth-child(3) .ic{background:linear-gradient(135deg,#f59e0b,#d97706);box-shadow:0 3px 8px rgba(245,158,11,.30);}
.dash-stat:nth-child(4) .ic{background:linear-gradient(135deg,#8b5cf6,#7c3aed);box-shadow:0 3px 8px rgba(139,92,246,.30);}
.dash-stat .k{font-size:11.5px;color:var(--nv-muted);font-weight:600;}
.dash-stat .v{font-size:18px;font-weight:800;color:var(--nv-text);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* ── 18b-2. DASHBOARD BANNER CAROUSEL (multiple admin-added banners, swipeable) ── */
.nv-banner{
position:relative;display:block;border-radius:var(--nv-r);
overflow:hidden;margin-bottom:16px;text-decoration:none;
border:1px solid var(--nv-border);
}
.nv-banner img{width:100%;display:block;max-height:220px;object-fit:cover;}
@media(max-width:768px){ .nv-banner img{ max-height:150px; } }
@media(max-width:480px){ .nv-banner img{ max-height:110px; } }
.nv-banner-carousel{
position:relative;border-radius:var(--nv-r-lg);overflow:hidden;
margin-bottom:18px;border:1px solid var(--nv-border-2);
background:var(--nv-card);
}
.nv-banner-track{display:flex;transition:transform .4s ease;}
.nv-banner-slide{flex:0 0 100%;display:block;text-decoration:none;line-height:0;}
.nv-banner-slide img{width:100%;display:block;max-height:220px;object-fit:cover;}
/* ── Responsive banner artwork ──
Each slide can carry two images: `.desktop` (wide, 1200x260-ish) and an
optional `.mobile` (phone-shaped). Only one is ever painted, so the admin
can design each size properly instead of cropping one wide strip.
When no phone image was uploaded the `.mobile` ![]()
simply isn't in the
markup, and the desktop one keeps showing everywhere. */
.nv-banner-img.mobile{display:none;}
@media(max-width:768px){
.nv-banner-slide img{max-height:none;}
/* The template adds `.has-mobile` to a slide only when the admin uploaded a
phone image, so we never hide the wide one and leave an empty slide.
(A class beats `:has()` here — it works in every browser, including the
older Android WebViews a lot of SMM customers browse on.) */
.nv-banner-slide.has-mobile .nv-banner-img.desktop{display:none;}
.nv-banner-slide.has-mobile .nv-banner-img.mobile{display:block;max-height:260px;object-fit:cover;}
.nv-banner-slide:not(.has-mobile) .nv-banner-img.desktop{max-height:150px;}
}
@media(max-width:480px){
.nv-banner-slide:not(.has-mobile) .nv-banner-img.desktop{max-height:120px;}
}
.nv-banner-arrow{
position:absolute;top:50%;transform:translateY(-50%);
width:30px;height:30px;border-radius:50%;border:none;
background:rgba(0,0,0,.35);color:#fff;display:flex;
align-items:center;justify-content:center;cursor:pointer;
font-size:12px;z-index:5;transition:background .15s;
}
.nv-banner-arrow:hover{background:rgba(0,0,0,.55);}
.nv-banner-arrow.prev{left:10px;}
.nv-banner-arrow.next{right:10px;}
.nv-banner-dots{
position:absolute;bottom:10px;left:0;right:0;
display:flex;justify-content:center;gap:6px;z-index:5;
}
.nv-banner-dots .dot{
width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.55);
cursor:pointer;transition:all .2s;
}
.nv-banner-dots .dot.active{background:#fff;width:18px;border-radius:4px;}
@media(max-width:480px){
.nv-banner-arrow{width:24px;height:24px;font-size:10px;}
}
/* ── 18c. NEW-ORDER: STEPS / SEARCH / PLATFORM PILLS ── */
.lm-steps{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.lm-step{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--nv-muted);}
.lm-step .n{
width:20px;height:20px;border-radius:50%;
background:var(--nv-surface-2);color:var(--nv-muted);
display:flex;align-items:center;justify-content:center;
font-size:11px;font-weight:700;
}
.lm-step.on{color:var(--nv-accent);}
.lm-step.on .n{background:var(--nv-accent);color:#fff;}
.lm-step .sep{display:inline-block;width:22px;height:1.5px;background:var(--nv-border);}
.lm-search-wrap{position:relative;margin-bottom:16px;}
.lm-search-wrap > .fa-magnifying-glass{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:var(--nv-muted);font-size:13px;pointer-events:none;
}
.lm-search-wrap .nv-input{padding-left:38px;}
.lm-platforms{
display:grid;gap:10px;
grid-template-columns:repeat(auto-fill,minmax(92px,1fr));
}
.lm-plat{
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
min-height:86px;padding:12px 6px;border-radius:14px;
border:1.5px solid var(--nv-border);background:var(--nv-surface);
font-size:12.5px;font-weight:600;color:var(--nv-text-soft);
cursor:pointer;transition:all .18s ease;font-family:inherit;
box-shadow:0 1px 2px rgba(16,24,40,.05);
text-align:center;line-height:1.2;
}
.lm-plat i{font-size:24px;line-height:1;transition:transform .18s ease;}
.lm-plat:hover{border-color:var(--nv-accent);color:var(--nv-text);transform:translateY(-2px);box-shadow:0 6px 16px rgba(16,24,40,.10);}
.lm-plat:hover i{transform:scale(1.08);}
.lm-plat.active{
background:var(--nv-accent);border-color:var(--nv-accent);color:#fff;
box-shadow:0 6px 18px rgba(0,0,0,.16);
}
.lm-plat.active i{color:#fff !important;}
@media(max-width:480px){
.lm-platforms{grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:8px;}
.lm-plat{min-height:76px;font-size:11.5px;padding:10px 4px;}
.lm-plat i{font-size:20px;}
}
/* ── Order / Mass Order tab switcher ── */
.nv-ordertabs{display:flex;gap:8px;margin-bottom:18px;}
.nv-ordertab{
flex:1;text-align:center;padding:10px 14px;border-radius:var(--nv-r-sm);
border:1.5px solid var(--nv-border);background:var(--nv-surface);
font-size:13px;font-weight:700;color:var(--nv-text-soft);cursor:pointer;
transition:all .15s;font-family:inherit;
}
.nv-ordertab.active{background:var(--nv-accent);border-color:var(--nv-accent);color:#fff;box-shadow:var(--nv-sh);}
.nv-ordertab-panel{display:none;}
.nv-ordertab-panel.active{display:block;}
/* ── Mass order ── */
.nv-mass-hint{font-size:12px;color:var(--nv-muted);margin-bottom:10px;line-height:1.5;}
.nv-mass-hint code{background:var(--nv-surface-2);padding:1px 6px;border-radius:5px;}
.nv-mass-results{margin-top:14px;display:flex;flex-direction:column;gap:6px;max-height:260px;overflow-y:auto;}
.nv-mass-row{
display:flex;align-items:center;gap:8px;font-size:12.5px;
padding:8px 10px;border-radius:8px;background:var(--nv-surface-2);
border:1px solid var(--nv-border);
}
.nv-mass-row.ok{border-color:var(--nv-ok);color:var(--nv-ok);}
.nv-mass-row.bad{border-color:var(--nv-bad);color:var(--nv-bad);}
.nv-mass-row.pending{opacity:.6;}
/* Category / service rich dropdown */
.nv-catdd{position:relative;}
.nv-catdd-btn{
width:100%;background:var(--nv-surface);
border:1.5px solid var(--nv-border);border-radius:var(--nv-r-sm);
padding:11px 14px;display:flex;align-items:center;justify-content:space-between;
gap:10px;font-size:13.5px;color:var(--nv-text);cursor:pointer;
transition:border .2s;font-family:inherit;text-align:left;
}
.nv-catdd-btn:hover,.nv-catdd-btn:focus{border-color:var(--nv-accent);}
.nv-catdd-btn .cur{display:flex;align-items:center;gap:9px;min-width:0;flex:1;overflow:hidden;}
.nv-catdd-btn .cur span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;}
/* The selected service's name (.nm) must be allowed to shrink/ellipsize
inside the flex row — without flex:1/min-width:0 a long service name
(e.g. "Instagram - Views (All Videos) ~ Max Unlimited ~ 500k/day ~
Instant ~ NO REFILL") just keeps its full width, forcing the button
wider and breaking the order-summary column next to it. The price
(.pr) stays a fixed, never-shrinking chip on the right. */
.nv-catdd-btn .cur .nm{flex:1;min-width:0;}
.nv-catdd-btn .cur .pr{flex-shrink:0;white-space:nowrap;}
.nv-catdd-btn .ar{font-size:11px;color:var(--nv-muted);transition:transform .15s;flex-shrink:0;}
.nv-catdd-btn.open .ar{transform:rotate(180deg);}
.nv-catdd-menu{
position:absolute;top:calc(100% + 4px);left:0;right:0;
background:var(--nv-surface);border:1px solid var(--nv-border);
border-radius:var(--nv-r-sm);box-shadow:var(--nv-sh-lg);
max-height:360px;overflow-y:auto;z-index:300;display:none;
}
.nv-catdd-menu.open{display:block;}
.nv-catdd-item{
display:flex;align-items:flex-start;gap:9px;
padding:10px 14px;font-size:13px;cursor:pointer;color:var(--nv-text);
}
/* OPEN LIST: never cut a service name with "…". The row grows taller and
the full name wraps onto as many lines as it needs, so the user can read
the whole thing before choosing. (The CLOSED button still ellipsizes —
see .nv-catdd-btn .cur .nm above — which is fine once a service is picked.) */
.nv-catdd-item .nm{
flex:1;min-width:0;
white-space:normal;overflow-wrap:anywhere;word-break:break-word;
line-height:1.45;
}
.nv-catdd-item .sid{font-weight:800;color:var(--nv-text-soft);margin-right:2px;}
.nv-catdd-item .pr{color:var(--nv-ok);font-weight:700;white-space:nowrap;padding-left:10px;flex-shrink:0;}
/* ── Favourite star inside the service dropdown ── */
.nv-catdd-item .fav{
flex-shrink:0;border:none;background:none;cursor:pointer;padding:0 2px;
color:var(--nv-muted);font-size:13px;line-height:1.45;transition:color .15s,transform .15s;
}
.nv-catdd-item .fav:hover{color:#f5a623;transform:scale(1.2);}
.nv-catdd-item .fav.on{color:#f5a623;}
/* ── Favourite services strip (above the search box) ── */
.nv-favs{margin-bottom:14px;}
.nv-favs-head{
display:flex;align-items:center;gap:7px;
font-size:12px;font-weight:700;color:var(--nv-text-soft);
text-transform:uppercase;letter-spacing:.4px;margin-bottom:8px;
}
.nv-favs-head i{color:#f5a623;}
.nv-favs-list{display:flex;flex-wrap:wrap;gap:7px;}
.nv-fav-chip{
display:inline-flex;align-items:center;gap:7px;max-width:100%;
background:var(--nv-surface-2);border:1.5px solid var(--nv-border);
border-radius:999px;padding:6px 12px;font-size:12.5px;color:var(--nv-text);
cursor:pointer;transition:border .15s,background .15s;font-family:inherit;
}
.nv-fav-chip:hover{border-color:var(--nv-accent);background:var(--nv-accent-soft);}
.nv-fav-chip .fid{font-weight:800;color:var(--nv-accent);}
.nv-fav-chip .fnm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px;}
.nv-fav-chip .fx{color:var(--nv-muted);font-size:11px;padding-left:2px;}
.nv-fav-chip .fx:hover{color:var(--nv-bad);}
.nv-favs-empty{font-size:12.5px;color:var(--nv-muted);}
/* ── Schedule order box ── */
.nv-sched{
border:1.5px dashed var(--nv-border);border-radius:var(--nv-r-sm);
padding:12px 14px;margin-bottom:14px;background:var(--nv-surface-2);
}
.nv-sched-top{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--nv-text);cursor:pointer;}
.nv-sched-top i{color:var(--nv-accent);}
.nv-sched-body{display:none;margin-top:10px;}
.nv-sched.on .nv-sched-body{display:block;}
.nv-sched.on{border-style:solid;border-color:var(--nv-accent);}
.nv-sched-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.nv-sched-quick button{
border:1px solid var(--nv-border);background:var(--nv-surface);
border-radius:999px;padding:4px 11px;font-size:11.5px;cursor:pointer;
color:var(--nv-text-soft);font-family:inherit;
}
.nv-sched-quick button:hover{border-color:var(--nv-accent);color:var(--nv-accent);}
.nv-sched-note{font-size:11.5px;color:var(--nv-muted);margin-top:8px;line-height:1.5;}
/* ── Scheduled orders manager (Orders page) ── */
.nv-schedwrap{
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);box-shadow:var(--nv-sh);
margin-bottom:20px;overflow:hidden;
}
.nv-schedwrap-head{
display:flex;align-items:center;gap:9px;
padding:13px 16px;border-bottom:1px solid var(--nv-border);
font-size:14px;font-weight:700;color:var(--nv-text);
}
.nv-schedwrap-head i{color:var(--nv-accent);}
.nv-schedwrap-head .cnt{
margin-left:auto;font-size:11.5px;font-weight:600;color:var(--nv-accent);
background:var(--nv-accent-soft);border-radius:999px;padding:3px 10px;
}
.nv-schedwrap-head .tz{font-size:11px;font-weight:500;color:var(--nv-muted);}
.nv-schedlist{display:flex;flex-direction:column;}
.nv-schedrow{
display:flex;align-items:center;gap:14px;flex-wrap:wrap;
padding:14px 16px;border-bottom:1px solid var(--nv-border);
}
.nv-schedrow:last-child{border-bottom:none;}
.nv-schedrow .meta{flex:1;min-width:220px;}
.nv-schedrow .meta .svc{font-size:13px;font-weight:700;color:var(--nv-text);margin-bottom:2px;}
.nv-schedrow .meta .sub{font-size:11.5px;color:var(--nv-muted);word-break:break-all;}
.nv-schedrow .when{min-width:190px;}
.nv-schedrow .when .t{font-size:13px;font-weight:700;color:var(--nv-text);}
.nv-schedrow .when .cd{font-size:11.5px;color:var(--nv-accent);font-weight:600;}
.nv-schedrow .acts{display:flex;gap:7px;margin-left:auto;}
.nv-schedempty{padding:22px 16px;text-align:center;font-size:12.5px;color:var(--nv-muted);}
.nv-resched{
display:none;width:100%;margin-top:10px;padding:12px;
border:1.5px dashed var(--nv-accent);border-radius:var(--nv-r-sm);
background:var(--nv-surface-2);
}
.nv-resched.on{display:block;}
.nv-resched-grid{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.nv-resched-grid input[type=datetime-local]{max-width:250px;}
.nv-resched-quick{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.nv-resched-quick button{
border:1px solid var(--nv-border);background:var(--nv-surface);
border-radius:999px;padding:4px 11px;font-size:11.5px;cursor:pointer;
color:var(--nv-text-soft);font-family:inherit;
}
.nv-resched-quick button:hover{border-color:var(--nv-accent);color:var(--nv-accent);}
.nv-catdd-item:hover{background:var(--nv-surface-2);}
.nv-catdd-item.active{background:var(--nv-accent-soft);color:var(--nv-accent);font-weight:600;}
/* ── 18d. ORDER SUMMARY SIDEBAR — bold color header bar (matches competitor) ── */
.lm-sum-card{
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);overflow:hidden;box-shadow:var(--nv-sh);
}
.lm-sum-head{
display:flex;align-items:center;gap:8px;
font-size:14px;font-weight:800;color:#fff;
padding:14px 20px;background:var(--nv-accent);
}
.lm-sum-head i{color:#fff;}
.nv-os{padding:16px 20px 20px;}
/* ── Public nav: "Legal" dropdown (Terms / Refund / Contact / Privacy) ── */
.nv-legal-dd{position:relative;margin-right:16px;}
.nv-legal-dd-btn{
display:flex;align-items:center;gap:6px;
background:none;border:none;cursor:pointer;padding:0;
color:var(--nv-text-soft);font-size:13.5px;font-weight:500;
font-family:var(--nv-font);
}
.nv-legal-dd-btn:hover,.nv-legal-dd-btn.open{color:var(--nv-text);}
.nv-legal-dd-btn .fa-chevron-down{transition:transform .15s;}
.nv-legal-dd-btn.open .fa-chevron-down{transform:rotate(180deg);}
.nv-legal-dd-menu{
position:absolute;top:calc(100% + 16px);left:0;min-width:210px;
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);box-shadow:var(--nv-sh-lg);
padding:8px;display:none;z-index:250;
}
.nv-legal-dd-menu.open{display:block;}
.nv-legal-dd-menu a{
display:flex;align-items:center;gap:10px;padding:8px 10px;
border-radius:var(--nv-r-sm);color:var(--nv-text);
text-decoration:none;font-size:13px;font-weight:600;
}
.nv-legal-dd-menu a:hover{background:var(--nv-surface-2);}
.nv-legal-ic{
width:26px;height:26px;border-radius:8px;flex-shrink:0;
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:11px;
}
@media(max-width:640px){
.nv-legal-dd{margin-right:8px;}
.nv-legal-dd-btn .lbl{display:none;} /* icon + chevron only on very small screens */
}
/* ── 19. HOME / LANDING ── */
/* (for non-logged-in state) */
.nv-lp-hero{
padding:80px 20px;text-align:center;
background:var(--nv-surface);
}
.nv-lp-hero h1{
font-size:clamp(28px,5vw,56px);
font-weight:900;color:var(--nv-text);
line-height:1.1;margin-bottom:20px;
}
.nv-lp-hero p{
font-size:16px;color:var(--nv-text-soft);
max-width:540px;margin:0 auto 32px;line-height:1.6;
}
.nv-lp-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;}
.nv-lp-features{
display:grid;
grid-template-columns:repeat(3,1fr);gap:20px;
padding:48px 20px;max-width:1100px;margin:0 auto;
}
.nv-feat-card{
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);padding:24px;
box-shadow:var(--nv-sh);text-align:center;
}
.nv-feat-icon{
width:52px;height:52px;border-radius:var(--nv-r);
background:var(--nv-accent-soft);
display:flex;align-items:center;justify-content:center;
font-size:22px;color:var(--nv-accent);
margin:0 auto 14px;
}
.nv-feat-title{font-size:15px;font-weight:700;color:var(--nv-text);margin-bottom:8px;}
.nv-feat-desc{font-size:13px;color:var(--nv-text-soft);line-height:1.6;}
/* ── 20. LOGIN / SIGNUP ── */
.nv-auth-wrap{
min-height:100vh;display:flex;
align-items:center;justify-content:center;
background:var(--nv-bg);padding:32px 16px;
}
.nv-auth-box{
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r-lg);padding:36px;
width:100%;max-width:420px;
box-shadow:var(--nv-sh-lg);
}
.nv-auth-logo{text-align:center;margin-bottom:28px;}
.nv-auth-title{font-size:22px;font-weight:800;color:var(--nv-text);margin-bottom:6px;text-align:center;}
.nv-auth-sub{font-size:13px;color:var(--nv-muted);text-align:center;margin-bottom:24px;}
/* ── 21. MOBILE NAV BAR ── */
/* Bottom tab-bar: sizing is driven by fluid clamp() values (not stepped
media-query breakpoints) so it scales smoothly from the smallest phones
(320px) up to tablets, with no sudden jumps and no clipped labels/icons.
--nv-mobnav-h tracks the *total* rendered height (bar + safe-area), and
.nv-main's bottom padding is tied to it below so page content can never
end up hidden underneath the fixed bar. */
:root{
/* Taller, premium bar. The old clamp topped out at 60px which, together
with the 560px max-width below, made the bar look like a small floating
strip on wide phones — labels got cut to "Servi…" / "Supp…". */
--nv-mobnav-bar-h: clamp(62px, 15.5vw, 74px);
--nv-mobnav-h: calc(var(--nv-mobnav-bar-h) + env(safe-area-inset-bottom, 0px));
}
.nv-mob-nav{
display:none;
position:fixed;bottom:0;left:0;right:0;
width:100%;
z-index:200;
box-sizing:border-box;
/* Edge-to-edge: no side padding, so the five tabs really do span the
full width of the phone instead of sitting in a narrow centred strip. */
padding:0 0 env(safe-area-inset-bottom, 0px);
background:var(--nv-surface);
border-top:1px solid var(--nv-border);
border-radius:20px 20px 0 0;
/* Frosted glass over scrolling content — the "premium" feel. */
-webkit-backdrop-filter:saturate(180%) blur(18px);
backdrop-filter:saturate(180%) blur(18px);
}
.nv-mob-nav-inner{
display:flex;align-items:stretch;
height:var(--nv-mobnav-bar-h);
/* max-width cap removed on purpose — the bar must fill the whole screen. */
width:100%;margin:0;
padding:0 max(2px, env(safe-area-inset-left)) 0 max(2px, env(safe-area-inset-right));
box-sizing:border-box;
}
.nv-mob-btn{
flex:1 1 0;min-width:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;
gap:5px;text-decoration:none;
color:var(--nv-muted);
font-size:clamp(10px, 3vw, 12px);font-weight:600;
letter-spacing:.1px;
padding:8px 1px 6px;
border:none;background:none;cursor:pointer;
position:relative;
transition:color .18s ease, transform .18s ease;
-webkit-tap-highlight-color:transparent;
}
.nv-mob-btn span{
/* Full width now, so labels fit — but keep a single clean line. */
max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
line-height:1.1;
}
.nv-mob-btn i{
font-size:clamp(17px, 5.2vw, 21px);line-height:1;
transition:transform .18s ease;
}
.nv-mob-btn:hover{color:var(--nv-accent);text-decoration:none;}
.nv-mob-btn:active{transform:scale(.94);}
.nv-mob-btn.active{color:var(--nv-accent);text-decoration:none;font-weight:700;}
.nv-mob-btn.active i{transform:translateY(-1px) scale(1.06);}
/* Little pill above the active tab, like the competitor's bar. */
.nv-mob-btn.active::before{
content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
width:26px;height:3px;border-radius:0 0 4px 4px;
background:var(--nv-accent);
}
/* Soft glow behind the active icon. */
.nv-mob-btn.active::after{
content:'';position:absolute;top:9px;left:50%;
transform:translateX(-50%);
width:38px;height:38px;border-radius:50%;
background:var(--nv-accent);opacity:.12;
pointer-events:none;
}
.nv-mob-center-btn{
flex:0 0 auto;width:clamp(64px, 19vw, 82px);
display:flex;align-items:flex-start;justify-content:center;
position:relative;
}
.nv-mob-center-btn a{
width:clamp(50px, 14.5vw, 60px);height:clamp(50px, 14.5vw, 60px);
border-radius:50%;
/* Raised above the bar, with a ring cut out of the surface behind it. */
margin-top:calc(-1 * clamp(16px, 4.5vw, 20px));
background:linear-gradient(145deg, var(--nv-accent), color-mix(in srgb, var(--nv-accent) 68%, #000));
display:flex;align-items:center;justify-content:center;
color:#fff;font-size:clamp(19px, 5.6vw, 24px);text-decoration:none;
border:4px solid var(--nv-surface);
box-shadow:0 8px 22px -4px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.14) inset;
transition:filter .18s ease, transform .18s ease;
flex-shrink:0;
}
.nv-mob-center-btn a:hover{filter:brightness(1.08);}
.nv-mob-center-btn a:active{transform:scale(.92);}
/* Older browsers with no color-mix() support still get a solid accent FAB. */
@supports not (background: color-mix(in srgb, red 50%, blue)){
.nv-mob-center-btn a{background:var(--nv-accent);}
}
/* ── 22. TICKER / MARQUEE ANNOUNCEMENT ── */
.nv-announcement{
background:var(--nv-accent-soft);
border-bottom:1px solid var(--nv-accent-ring);
padding:8px 20px;font-size:12.5px;color:var(--nv-accent);
font-weight:500;
display:flex;align-items:center;gap:8px;
}
.nv-announcement i{flex-shrink:0;}
/* ── 23. RESPONSIVE ── */
/* Tablet + mobile: sidebar becomes an off-canvas drawer and the bottom
tab-bar takes over primary navigation. Using 1024px (not 768px) as the
cutoff means iPads / Android tablets in portrait get the same touch-first
nav as phones, instead of a squeezed desktop layout. */
@media(max-width:1024px){
:root{--nv-sb:250px;}
.nv-side{
position:fixed;top:0;left:0;bottom:0;
transform:translateX(-100%);
transition:transform .3s ease;z-index:300;
box-shadow:4px 0 24px rgba(0,0,0,.15);
}
.nv-side.open{transform:translateX(0);}
.nv-mob-nav{display:flex;}
/* Bottom padding always equals the actual bar height (+ small gap), so the
last row of any page's content — order forms, platform pills, tables —
can never end up hidden or overlapped underneath the fixed tab-bar. */
.nv-main{padding-bottom:calc(var(--nv-mobnav-h) + 18px);}
.nv-stats{grid-template-columns:1fr 1fr;}
.nv-lp-features{grid-template-columns:1fr 1fr;}
}
@media(max-width:900px){
.nv-order-wrap{grid-template-columns:1fr;}
}
@media(max-width:480px){
.nv-stats{grid-template-columns:1fr;}
.nv-lp-features{grid-template-columns:1fr;}
.nv-auth-box{padding:24px;}
}
/* ══════════════════════════════════════
ADDITIONAL UI POLISH & RESPONSIVE FIXES
══════════════════════════════════════ */
/* ── Sidebar responsive (kept in sync with the 1024px drawer breakpoint above) ── */
@media(max-width:1024px){
.nv-shell{ width:100%;max-width:100%; }
.nv-main{ padding:16px 14px calc(var(--nv-mobnav-h) + 18px); }
}
/* ── Top bar ── */
.nv-top{
position:sticky;top:0;z-index:100;
}
/* ── Child Panels page layout ── */
.nv-cp-grid{
display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;
}
@media(max-width:900px){
.nv-cp-grid{grid-template-columns:1fr !important;}
}
.nv-cp-grid .nv-table-wrap{overflow-x:auto;}
.nv-cp-grid ~ .nv-table-wrap table{min-width:520px;}
/* ── Order form layout responsive ── */
@media(max-width:900px){
.nv-order-wrap{
grid-template-columns:1fr !important;
}
/* Account page: stack Profile/Password above Language/Timezone/API Key
instead of squeezing two columns into a phone-width screen (that's
what was clipping "Time[zone]", "API [Key]" and the copy button on
the right edge). */
.nv-account-grid{
grid-template-columns:1fr !important;
}
}
/* ── Stats grid responsive ── */
@media(max-width:640px){
.nv-stats{grid-template-columns:1fr 1fr !important;}
.dash-stats{grid-template-columns:1fr 1fr !important;}
}
/* Below 480px keep the 4 stat pills as 2x2 (not 1 full-width column) so the
greeting card stays compact all the way down to 320px instead of turning
into 4 tall stacked rows. .nv-stats keeps its own 1-column fallback for
very narrow layouts elsewhere, but dash-stats (dashboard greeting) never
drops below 2 columns. */
@media(max-width:340px){
.nv-stats{grid-template-columns:1fr !important;}
}
@media(max-width:480px){
.nv-greet{padding:14px;border-radius:var(--nv-r);}
.nv-greet h1{font-size:17px;}
.dash-stats{gap:8px;margin-top:12px;}
.dash-stat{padding:10px 10px;gap:4px;}
.dash-stat .ic{width:24px;height:24px;font-size:11px;border-radius:7px;}
.dash-stat .k{font-size:10.5px;}
.dash-stat .v{font-size:15px;}
.nv-ordertabs{gap:6px;}
.nv-ordertab{padding:9px 8px;font-size:12px;}
}
@media(max-width:340px){
.dash-stat .v{font-size:13.5px;}
}
/* ── Global small-screen safety net (prevents sideways scroll / cut-off boxes) ── */
html,body{overflow-x:hidden;max-width:100%;}
.nv-main,.nv-shell{max-width:100%;}
@media(max-width:480px){
.nv-card{padding:14px;}
.nv-input,.nv-select,.nv-textarea,.nv .form-control{font-size:13px;}
.lm-sum-head{padding:12px 16px;font-size:13px;}
.nv-os{padding:14px 16px 16px;}
}
img,svg,iframe{max-width:100%;}
/* ── Table ── */
.nv-table-wrap{ overflow-x:auto; }
.nv-table{ min-width:600px; }
/* ── Orders page: clickable link/URL under the service name ── */
.nv-order-link{
display:inline-block;font-size:11.5px;color:var(--nv-accent);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
vertical-align:bottom;text-decoration:none;
}
.nv-order-link:hover{text-decoration:underline;}
/* ── Services page (v3 — responsive by available width) ─────────────
Every category card and the toolbar measure THEIR OWN width (container
queries), so it is right with the sidebar open, on a tablet and on a
phone:
≥ 860px full table (ID · name · price · min · max · avg time · detail)
620–859 compact table, avg time moves under the service name
< 620px one card per service: ID + price, full name, Min/Max tiles,
Detail button — no sideways scrolling
─────────────────────────────────────────────────────────────────── */
/* toolbar */
.svc-toolbar{
container:svctb / inline-size;
display:flex;flex-wrap:wrap;gap:10px;align-items:stretch;
background:var(--nv-card);border:1px solid var(--nv-border);
border-radius:var(--nv-r);padding:12px;margin-bottom:18px;box-shadow:var(--nv-sh);
}
.svc-field{position:relative;display:block;flex:1 1 170px;min-width:0;margin:0;}
.svc-select{
appearance:none;-webkit-appearance:none;width:100%;height:44px;
border:1.5px solid var(--nv-border);border-radius:var(--nv-r-sm);
padding:0 36px 0 14px;font:inherit;font-size:13.5px;color:var(--nv-text);
background:var(--nv-surface);cursor:pointer;outline:none;text-overflow:ellipsis;
transition:border-color .15s,box-shadow .15s;
}
.svc-select:focus{border-color:var(--nv-accent);box-shadow:0 0 0 3px var(--nv-accent-ring);}
.svc-field > i{position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--nv-muted);font-size:11px;pointer-events:none;}
.svc-search{
flex:2 1 210px;min-width:0;height:44px;display:flex;align-items:center;
border:1.5px solid var(--nv-border);border-radius:var(--nv-r-sm);
background:var(--nv-surface);overflow:hidden;transition:border-color .15s,box-shadow .15s;
}
.svc-search:focus-within{border-color:var(--nv-accent);box-shadow:0 0 0 3px var(--nv-accent-ring);}
.svc-search i{flex:none;padding:0 4px 0 14px;color:var(--nv-muted);font-size:13px;}
.svc-search input{
flex:1;min-width:0;height:100%;border:0;outline:0;box-shadow:none;background:transparent;
padding:0 12px 0 8px;font:inherit;font-size:13.5px;color:var(--nv-text);
-webkit-appearance:none;appearance:none;
}
.svc-search input::-webkit-search-cancel-button{-webkit-appearance:none;}
.svc-pp{flex:0 0 auto;}
.svc-pp .svc-select{width:auto;min-width:132px;}
.svc-cta{flex:0 0 auto;height:44px;padding:0 20px;white-space:nowrap;}
@container svctb (max-width:640px){
.svc-cat,.svc-search{flex:1 1 100%;}
.svc-pp{flex:0 0 auto;}
.svc-pp .svc-select{width:auto;min-width:150px;}
.svc-cta{flex:1 1 0;}
}
/* phones: 16px controls so iOS does not zoom in on focus */
@media(max-width:640px){
.svc-select,.svc-search input{font-size:16px;}
}
/* category card */
.svc-cat-card{
container:svccard / inline-size;
margin-bottom:16px;border-radius:var(--nv-r-lg);overflow:hidden;
}
.svc-cat-card:hover{transform:none;}
.svc-cat-card:last-child{margin-bottom:0;}
.svc-cat-head{
display:flex;align-items:center;gap:13px;
padding:16px 20px;border-bottom:1px solid var(--nv-border);
background:linear-gradient(135deg,var(--nv-surface),var(--nv-surface-2));
}
.svc-cat-icon{
width:38px;height:38px;border-radius:12px;flex-shrink:0;
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
color:#fff;font-size:15px;box-shadow:0 6px 16px -6px var(--nv-accent-ring);
display:flex;align-items:center;justify-content:center;
}
.svc-cat-name{font-weight:800;font-size:15px;line-height:1.3;color:var(--nv-text);flex:1;min-width:0;overflow-wrap:anywhere;}
.svc-cat-count{
font-size:11px;font-weight:700;color:var(--nv-accent);
background:var(--nv-accent-soft);padding:5px 12px;border-radius:999px;
flex-shrink:0;white-space:nowrap;
}
.svc-cat-card .nv-table-wrap{margin:0;border:none;border-radius:0;overflow-x:auto;}
.svc-cat-card .nv-table{min-width:0;}
.svc-cat-card .nv-table thead th{background:var(--nv-surface);}
/* cells (wide table) */
.svc-id{font-size:12px;font-weight:600;color:var(--nv-muted);}
.svc-name{font-weight:500;color:var(--nv-text);line-height:1.45;overflow-wrap:anywhere;}
.svc-avg-inline{display:none;margin-top:4px;font-size:11.5px;color:var(--nv-muted);}
.svc-avg-inline i{margin-right:4px;}
.svc-td-avg{font-size:12.5px;color:var(--nv-muted);}
.svc-td-price,.svc-td-min,.svc-td-max{white-space:nowrap;}
.svc-td-act{text-align:right;white-space:nowrap;}
.svc-price{
display:inline-block;font-weight:800;color:var(--nv-accent);
background:var(--nv-accent-soft);padding:4px 10px;border-radius:8px;font-size:12.5px;
}
.svc-chip{
display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;
padding:3px 9px;border-radius:999px;white-space:nowrap;
}
.svc-chip.min{color:var(--nv-ok);background:var(--nv-okbg);}
.svc-chip.max{color:var(--nv-info);background:var(--nv-infobg);}
.svc-detail{font-size:11.5px;}
.svc-cat-empty{padding:34px 20px;text-align:center;color:var(--nv-muted);font-size:13px;}
/* compact table (tablet / narrow content) */
@container svccard (max-width:859px){
.svc-cat-card .nv-table th,
.svc-cat-card .nv-table td{padding:11px 10px;}
.svc-th-avg,.svc-td-avg{display:none;}
.svc-avg-inline{display:block;}
.svc-th-name,.svc-td-name{min-width:190px;}
}
/* phone cards */
@container svccard (max-width:619px){
.svc-cat-head{padding:13px 15px;gap:10px;}
.svc-cat-icon{width:32px;height:32px;font-size:13px;border-radius:10px;}
.svc-cat-name{font-size:14px;}
.svc-cat-count{padding:4px 10px;}
.svc-cat-card .nv-table-wrap{overflow:visible;}
.svc-cat-card .nv-table,
.svc-cat-card .nv-table tbody{display:block;width:100%;}
.svc-cat-card .nv-table thead{display:none;} /* tiles carry their own labels */
.svc-cat-card .nv-table tbody tr.serviceData{
display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
padding:14px 15px;border-bottom:1px solid var(--nv-border);
}
.svc-cat-card .nv-table tbody tr.serviceData:last-child{border-bottom:0;}
.svc-cat-card .nv-table tbody tr:hover td{background:transparent;}
.svc-cat-card .nv-table td{display:block;min-width:0;padding:0;border:0;white-space:normal;}
.svc-td-id{order:1;align-self:center;}
.svc-td-price{order:2;justify-self:end;}
.svc-td-name{order:3;grid-column:1 / -1;min-width:0 !important;}
.svc-td-min{order:4;}
.svc-td-max{order:5;}
.svc-cat-card .nv-table td.svc-td-avg{display:none;}
.svc-td-act{order:6;grid-column:1 / -1;}
.svc-cat-card .nv-table td.svc-td-act:empty{display:none;}
.svc-id{
display:inline-block;padding:3px 9px;border-radius:7px;
background:var(--nv-surface-2);font-size:12px;
}
.svc-price{font-size:15px;padding:5px 12px;border-radius:9px;}
.svc-name{font-size:14px;font-weight:600;line-height:1.4;}
.svc-cat-card .nv-table td.svc-td-min,
.svc-cat-card .nv-table td.svc-td-max{background:var(--nv-surface-2);border-radius:10px;padding:9px 12px;}
.svc-td-min::before,.svc-td-max::before{
content:attr(data-label);display:block;margin-bottom:2px;
font-size:11px;font-weight:500;color:var(--nv-muted);
}
.svc-td-min .svc-chip,.svc-td-max .svc-chip{padding:0;background:none;font-size:13.5px;}
.svc-td-min .svc-chip i,.svc-td-max .svc-chip i{display:none;}
.svc-detail{width:100%;height:40px;font-size:13px;}
}
/* pager */
.svc-pager{margin-top:18px;}
.nv-page-gap{display:flex;align-items:center;padding:0 3px;color:var(--nv-muted);}
.nv-pager-info b{color:var(--nv-text);}
.svc-pager .nv-pager{flex-wrap:wrap;gap:12px;}
@media(max-width:640px){
.svc-pager .nv-pager{flex-direction:column;align-items:center;text-align:center;gap:10px;}
.svc-pager .nv-pager-btns{justify-content:center;}
.svc-pager .nv-page-btn{min-width:38px;height:38px;}
}
/* very old browsers without container queries: table simply scrolls sideways */
@supports not (container-type:inline-size){
.svc-cat-card .nv-table{min-width:560px;}
}
/* ── PWA "Install App" pill: sits above the bottom bar, small, dismissible ── */
#nvInstallBtn{
position:fixed;right:16px;bottom:20px;z-index:2000;
display:flex;align-items:center;gap:4px;height:40px;padding:0 6px 0 4px;
background:var(--nv-accent);color:#fff;border-radius:999px;
box-shadow:0 6px 18px rgba(0,0,0,.25);font-size:13px;font-weight:700;
}
#nvInstallBtn button{border:0;background:none;color:inherit;font:inherit;cursor:pointer;}
#nvInstallBtn .nv-inst-go{display:flex;align-items:center;gap:8px;height:40px;padding:0 6px 0 12px;}
#nvInstallBtn .nv-inst-x{width:28px;height:28px;border-radius:50%;opacity:.85;font-size:15px;line-height:1;}
#nvInstallBtn .nv-inst-x:hover{background:rgba(255,255,255,.2);opacity:1;}
@media(max-width:1024px){
#nvInstallBtn{bottom:calc(var(--nv-mobnav-h,64px) + 14px);}
}
/* ── Input focus ring animation ── */
.nv-input:focus,.nv-select:focus,.nv-textarea:focus{
outline:none;
border-color:var(--nv-accent);
box-shadow:0 0 0 3px var(--nv-accent-ring);
transition:border-color .2s,box-shadow .2s;
}
/* ── Buttons ── */
.nv-btn{ transition:all .18s ease; }
.nv-btn-primary:hover{ filter:brightness(1.08); }
.nv-btn-outline:hover{
border-color:var(--nv-accent);
color:var(--nv-accent);
background:var(--nv-accent-soft);
}
/* ── Cards hover ── */
.nv-card{
transition:box-shadow .2s,transform .15s;
}
.nv-card:hover{
box-shadow:0 8px 28px rgba(0,0,0,.09);
transform:translateY(-1px);
}
.nv-stat:hover{
box-shadow:0 6px 20px rgba(0,0,0,.08);
transform:translateY(-1px);
}
/* ── Dropdown menu animation ── */
.nv-dropdown-menu{
animation:nvFadeIn .15s ease;
}
@keyframes nvFadeIn{
from{opacity:0;transform:translateY(-6px);}
to{opacity:1;transform:translateY(0);}
}
/* ── Active nav item indicator ── */
.nv-nav-item.active::before{
content:'';
position:absolute;
left:0;top:4px;bottom:4px;
width:3px;
background:var(--nv-accent);
border-radius:0 3px 3px 0;
}
.nv-nav-item{position:relative;}
/* ── Balance chip pulse ── */
.nv-bal-chip{
animation:none;
position:relative;
}
/* ── Table row hover ── */
.nv-table tr:hover td{
background:var(--nv-surface-2);
transition:background .1s;
}
/* ── Pagination active ── */
.nv-page-btn.active{
background:var(--nv-accent) !important;
color:#fff !important;
border-color:var(--nv-accent) !important;
}
/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--nv-border-2);border-radius:6px;}
/* ── Form errors ── */
.nv-notice{
border-radius:var(--nv-r-sm);
animation:nvSlideIn .2s ease;
}
@keyframes nvSlideIn{
from{opacity:0;transform:translateY(-4px);}
to{opacity:1;transform:translateY(0);}
}
/* ── Mobile nav ── */
.nv-mob-nav{
position:fixed;bottom:0;left:0;right:0;
box-shadow:0 -1px 0 var(--nv-border), 0 -10px 30px rgba(0,0,0,.10);
}
/* ── Stat card icon size ── */
.nv-stat-icon{ flex-shrink:0; }
/* ── Homepage hero responsive ── */
.lp-hero-inner{
display:grid;
grid-template-columns:1fr 1fr;
gap:48px;align-items:center;
}
@media(max-width:768px){
.lp-hero-inner{ grid-template-columns:1fr !important; }
.lp-why-grid{ grid-template-columns:1fr 1fr !important; }
.lp-hero{ padding:48px 16px 36px !important; }
}
@media(max-width:480px){
.lp-features{ grid-template-columns:1fr !important; }
.lp-why-grid{ grid-template-columns:1fr !important; }
.lp-login-box{ padding:20px !important; }
.platform-chips{ gap:8px; }
.platform-chip{ padding:7px 12px; font-size:12px; }
}
/* ── Signup page: branding + form collapse to one column on phones ── */
@media(max-width:768px){
.nv-signup-grid{
grid-template-columns:1fr !important;
gap:24px !important;
}
}
/* ── Dark mode support for panel ── */
body.dark .nv-card,
body.dark .nv-stat,
body.dark .nv-table-wrap,
body.dark .nv-tabs,
body.dark .nv-top,
body.dark .nv-side{
background:var(--nv-card);
border-color:var(--nv-border);
}
body.dark .nv-input,
body.dark .nv-select,
body.dark .nv-textarea{
background:var(--nv-surface-2);
border-color:var(--nv-border);
color:var(--nv-text);
}
body.dark .nv-dropdown-menu,
body.dark .nv-dropdown-btn{
background:var(--nv-card);
border-color:var(--nv-border);
}
/* ══════════════════════════════════════
UNIFIED "SOFT-UI" BOX SHADOW — every card/box on the panel
══════════════════════════════════════ */
.nv-card,
.nv-greet,
.nv-stat,
.dash-stat,
.nv-banner,
.nv-banner-carousel,
.nv-notice,
.nv-tabs,
.nv-table-wrap,
.nv-dropdown-menu,
.lm-sum-card,
.nv-os,
.nv-feat-card,
.nv-auth-box,
.nv-side-balance,
.nv-side{
box-shadow:
inset 0 1px 0 rgba(255,255,255,.95),
inset 0 -2px 0 rgba(0,0,0,.14),
0 2px 3px rgba(60,50,35,.18),
0 8px 20px -6px rgba(60,50,35,.24) !important;
}
/* .nv-top (the sticky top bar) intentionally excluded from the shared
soft-UI shadow above — it looked wrong sitting on a thin sticky bar. */
.nv-top{
box-shadow:none !important;
}
/* ═══════════════════════════════════════════════════════════════
ADD FUNDS PAGE (.af-*)
═══════════════════════════════════════════════════════════════ */
.af-grid{
display:grid;
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
gap:20px;align-items:start;
}
.af-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.af-side .nv-card + .nv-card{margin-top:0;}
.af-main{min-width:0;}
.af-h{
font-size:15px;font-weight:700;color:var(--nv-text);
margin:0 0 18px;display:flex;align-items:center;gap:8px;
}
.af-h i{color:var(--nv-accent);}
.af-h-sm{font-size:14px;margin-bottom:14px;}
/* select with a visible dropdown arrow */
.af-select{
padding-right:40px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237c869a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
}
/* amount input */
.af-amt{position:relative;}
.af-cur{
position:absolute;left:14px;top:50%;transform:translateY(-50%);
color:var(--nv-muted);font-size:15px;font-weight:700;pointer-events:none;
}
.af-amt .nv-input{padding-left:36px;font-size:16px;font-weight:700;height:46px;}
.af-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
.af-chip{
appearance:none;-webkit-appearance:none;cursor:pointer;
background:var(--nv-surface);color:var(--nv-text-soft);
border:1.5px solid var(--nv-border);border-radius:999px;
padding:6px 14px;font-size:12.5px;font-weight:600;font-family:inherit;
transition:border-color .15s,color .15s,background .15s;
}
.af-chip:hover,
.af-chip.active{
border-color:var(--nv-accent);color:var(--nv-accent);background:var(--nv-accent-soft);
}
.af-hint{font-size:12px;color:var(--nv-muted);margin-top:10px;min-height:16px;}
.af-or{
display:flex;align-items:center;gap:12px;
margin:16px 0;color:var(--nv-muted);font-size:12px;
}
.af-or::before,.af-or::after{content:"";flex:1;height:1px;background:var(--nv-border);}
.af-trust{
display:flex;flex-wrap:wrap;gap:8px 18px;
margin-top:18px;padding-top:16px;border-top:1px dashed var(--nv-border);
font-size:12px;color:var(--nv-muted);
}
.af-trust i{color:var(--nv-accent);margin-right:5px;}
/* balance card */
.af-balance{
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
color:#fff;border-radius:var(--nv-r);padding:20px;
box-shadow:0 14px 30px -14px var(--nv-accent-ring);
}
.af-balance-top{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.af-balance-ic{
width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.2);
display:flex;align-items:center;justify-content:center;font-size:15px;
}
.af-balance-lbl{font-size:12.5px;font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.5px;}
.af-balance-amt{font-size:32px;font-weight:800;line-height:1.1;word-break:break-word;}
.af-balance-sub{font-size:12.5px;opacity:.9;margin-top:10px;}
/* steps */
.af-steps{list-style:none;margin:0;padding:0;counter-reset:afs;}
.af-steps li{
position:relative;counter-increment:afs;
padding:0 0 14px 38px;font-size:13px;line-height:1.6;color:var(--nv-text-soft);
}
.af-steps li:last-child{padding-bottom:0;}
.af-steps li::before{
content:counter(afs);position:absolute;left:0;top:0;
width:26px;height:26px;border-radius:50%;
background:var(--nv-accent-soft);color:var(--nv-accent);
font-weight:700;font-size:12px;
display:flex;align-items:center;justify-content:center;
}
.af-note{font-size:13px;line-height:1.7;color:var(--nv-text-soft);margin:0;}
.af-note a{color:var(--nv-accent);font-weight:600;}
/* QR modal (v2) */
.qr-dialog{max-width:460px;}
.qr-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px;}
.qr-steps span{
display:flex;align-items:center;justify-content:center;gap:6px;
font-size:11.5px;font-weight:600;color:var(--nv-text-soft);
background:var(--nv-surface-2);border-radius:999px;padding:6px 8px;white-space:nowrap;
}
.qr-steps b{
width:18px;height:18px;border-radius:50%;background:var(--nv-accent);color:#fff;
font-size:10.5px;display:inline-flex;align-items:center;justify-content:center;flex:none;
}
.qr-card{
border:1px solid var(--nv-border);border-radius:var(--nv-r);padding:16px;
background:var(--nv-surface-2);display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:14px;
}
.qr-img{background:#fff;padding:10px;border-radius:14px;box-shadow:0 8px 24px -14px rgba(0,0,0,.35);line-height:0;}
.qr-img img{display:block;width:min(100%,250px);height:auto;max-height:300px;object-fit:contain;border-radius:6px;margin:0 auto;}
.qr-payee{font-size:12.5px;color:var(--nv-text-soft);}
.qr-payee b{color:var(--nv-text);}
.qr-upi{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;font-size:12.5px;color:var(--nv-text-soft);}
.qr-upi code{
background:var(--nv-card);border:1px dashed var(--nv-border-2);padding:4px 10px;border-radius:8px;
font-weight:700;color:var(--nv-text);font-size:13px;word-break:break-all;
}
.qr-copy{
appearance:none;-webkit-appearance:none;cursor:pointer;font-family:inherit;
background:var(--nv-accent-soft);color:var(--nv-accent);border:0;border-radius:8px;
padding:5px 10px;font-size:12px;font-weight:700;
}
.qr-copy:hover{filter:brightness(.95);}
.qr-opt{font-weight:500;color:var(--nv-muted);font-size:11.5px;}
.qr-drop{
display:flex;align-items:center;gap:12px;padding:14px;cursor:pointer;
border:1.5px dashed var(--nv-border-2);border-radius:var(--nv-r-sm);background:var(--nv-surface);
transition:border-color .15s,background .15s;
}
.qr-drop:hover,.qr-drop:focus,.qr-drop.drag{border-color:var(--nv-accent);background:var(--nv-accent-soft);outline:0;}
.qr-drop i{font-size:22px;color:var(--nv-accent);}
.qr-drop b{display:block;font-size:13px;color:var(--nv-text);}
.qr-drop span{font-size:11.5px;color:var(--nv-muted);}
.qr-preview{
display:none;align-items:center;gap:12px;padding:10px;
border:1px solid var(--nv-border);border-radius:var(--nv-r-sm);background:var(--nv-surface);
}
.qr-preview.show{display:flex;}
.qr-preview img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--nv-border);flex:none;}
.qr-prev-meta{flex:1;min-width:0;}
.qr-prev-meta b{display:block;font-size:12.5px;color:var(--nv-text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.qr-prev-meta span{font-size:11.5px;color:var(--nv-muted);}
.qr-prev-rm{
appearance:none;-webkit-appearance:none;cursor:pointer;flex:none;
width:30px;height:30px;border-radius:8px;border:1px solid var(--nv-border);
background:transparent;color:var(--nv-text-soft);
}
.qr-prev-rm:hover{border-color:var(--nv-bad);color:var(--nv-bad);}
.qr-err{display:none;}
.qr-err.show{display:flex;}
.qr-foot{font-size:11.5px;color:var(--nv-muted);text-align:center;margin:12px 0 0;}
.qr-done{text-align:center;padding:8px 2px 2px;}
.qr-done-ic{
width:64px;height:64px;border-radius:50%;background:var(--nv-okbg);color:var(--nv-ok);
display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 14px;
}
.qr-done h5{font-size:17px;font-weight:800;color:var(--nv-text);margin:0 0 8px;}
.qr-done p{font-size:13px;color:var(--nv-text-soft);line-height:1.6;margin:0 0 18px;}
@media(max-width:480px){
.qr-steps span{font-size:10.5px;padding:6px 4px;gap:4px;}
.qr-img img{width:min(100%,220px);}
}
/* ═══════════════════════════════════════════════════════════════
NOTIFICATION BELL (next to the balance chip)
═══════════════════════════════════════════════════════════════ */
.nv-notif{position:relative;}
.nv-notif-dot{
position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 5px;
border-radius:999px;background:var(--nv-bad);color:#fff;
font-size:10px;font-weight:800;line-height:1;
display:flex;align-items:center;justify-content:center;
border:2px solid var(--nv-surface);
}
.nv-notif-btn.ring i{animation:nvRing .8s ease;transform-origin:50% 0;}
@keyframes nvRing{
0%,100%{transform:rotate(0)} 15%{transform:rotate(16deg)} 30%{transform:rotate(-14deg)}
45%{transform:rotate(10deg)} 60%{transform:rotate(-8deg)} 75%{transform:rotate(4deg)}
}
.nv-notif-panel{
display:none;position:absolute;right:-40px;top:calc(100% + 10px);
width:380px;max-width:calc(100vw - 24px);
background:var(--nv-card);border:1px solid var(--nv-border);border-radius:var(--nv-r);
box-shadow:var(--nv-sh-lg);z-index:300;overflow:hidden;
}
.nv-notif-panel.open{display:block;}
.nv-notif-head{
display:flex;align-items:center;justify-content:space-between;gap:10px;
padding:12px 14px;border-bottom:1px solid var(--nv-border);font-size:13.5px;color:var(--nv-text);
}
.nv-notif-readall{background:none;border:0;cursor:pointer;color:var(--nv-accent);font-size:12px;font-weight:600;font-family:inherit;}
.nv-notif-readall:hover{text-decoration:underline;}
.nv-notif-list{max-height:min(440px,70vh);overflow-y:auto;}
.nv-notif-item{display:flex;gap:11px;padding:12px 14px 12px 18px;border-bottom:1px solid var(--nv-border);position:relative;}
.nv-notif-item:last-child{border-bottom:0;}
.nv-notif-item.unread{background:var(--nv-accent-soft);cursor:pointer;}
.nv-notif-item.unread::before{
content:"";position:absolute;left:6px;top:50%;width:6px;height:6px;margin-top:-3px;
border-radius:50%;background:var(--nv-accent);
}
.nv-notif-ic{
flex:0 0 34px;width:34px;height:34px;border-radius:10px;
display:flex;align-items:center;justify-content:center;font-size:14px;
background:var(--nv-infobg);color:var(--nv-info);
}
.nv-notif-item.k-debit .nv-notif-ic{background:var(--nv-badbg);color:var(--nv-bad);}
.nv-notif-item.k-credit .nv-notif-ic{background:var(--nv-okbg);color:var(--nv-ok);}
.nv-notif-item.k-reject .nv-notif-ic{background:var(--nv-warnbg);color:var(--nv-warn);}
.nv-notif-body{min-width:0;flex:1;}
.nv-notif-title{font-size:13px;font-weight:700;color:var(--nv-text);line-height:1.4;}
.nv-notif-msg{font-size:12.5px;color:var(--nv-text-soft);white-space:pre-line;word-break:break-word;margin-top:2px;line-height:1.5;}
.nv-notif-time{font-size:11px;color:var(--nv-muted);margin-top:4px;}
.nv-notif-empty{
padding:34px 16px;text-align:center;color:var(--nv-muted);font-size:13px;
display:flex;flex-direction:column;align-items:center;gap:8px;
}
.nv-notif-empty i{font-size:22px;}
@media(max-width:640px){
.nv-notif{position:static;}
.nv-notif-panel{position:fixed;left:12px;right:12px;top:calc(var(--nv-tb) + 8px);width:auto;max-width:none;}
}
/* responsive */
@media(max-width:900px){
.af-grid{grid-template-columns:1fr;}
.af-side{display:contents;} /* let balance / help cards be ordered individually */
.af-balance{order:-1;} /* balance first on phones, form next, help cards last */
.af-side .nv-card{order:1;}
.af-balance-amt{font-size:28px;}
}
@media(max-width:480px){
.af-chip{flex:1 1 calc(33% - 8px);text-align:center;}
.af-recent .nv-table{min-width:520px;}
}
/* ═══════════════════════════════════════════════════════════════
COLOURFUL SIDEBAR ICONS
Every menu row gets its own gradient icon tile + white glyph (same idea as
the PanelLaunch sidebar). Colours are set per link via --ic1/--ic2, so to
change a colour just edit the pair for that href below.
The active row is a soft neutral highlight (no red bar) so the tile colours stay the star.
═══════════════════════════════════════════════════════════════ */
.nv-nav-item[href] i{
width:32px;height:32px;font-size:14px;border-radius:10px;
background:linear-gradient(135deg,var(--ic1,#94a3b8),var(--ic2,#64748b));
color:#fff;
box-shadow:0 5px 10px -4px color-mix(in srgb,var(--ic2,#64748b) 65%,transparent),
inset 0 1px 0 rgba(255,255,255,.28);
transition:transform .15s,box-shadow .15s;
}
.nv-nav-item[href]:hover i{
background:linear-gradient(135deg,var(--ic1,#94a3b8),var(--ic2,#64748b));
color:#fff;transform:translateY(-1px) scale(1.05);
}
.nv-nav-item[href].active i{
background:linear-gradient(135deg,var(--ic1,#94a3b8),var(--ic2,#64748b));
color:#fff;
}
.nv-nav-item{padding:8px 10px;gap:12px;}
.nv-nav-item.active{
background:var(--nv-surface-2);
color:var(--nv-text);font-weight:700;
}
.nv-nav-item.active::before{display:none;}
/* per-link colours */
.nv-nav-item[href="/"] {--ic1:#fb7185;--ic2:#e11d48;} /* New Order / Platforms */
.nv-nav-item[href="/services"] {--ic1:#38bdf8;--ic2:#2563eb;} /* Services – blue */
.nv-nav-item[href="/orders"] {--ic1:#a78bfa;--ic2:#7c3aed;} /* Orders – purple */
.nv-nav-item[href="/dripfeeds"] {--ic1:#2dd4bf;--ic2:#0d9488;} /* Drip-feed – teal */
.nv-nav-item[href="/refills"] {--ic1:#fb923c;--ic2:#ea580c;} /* Refill – orange */
.nv-nav-item[href="/subscriptions"] {--ic1:#e879f9;--ic2:#c026d3;} /* Subscriptions – magenta */
.nv-nav-item[href="/addfunds"] {--ic1:#34d399;--ic2:#059669;} /* Add Funds – green */
.nv-nav-item[href="/financial"] {--ic1:#818cf8;--ic2:#4f46e5;} /* Financial – indigo */
.nv-nav-item[href="/affiliates"] {--ic1:#22d3ee;--ic2:#0891b2;} /* Refer & Earn – cyan */
.nv-nav-item[href="/child-panels"] {--ic1:#fbbf24;--ic2:#f59e0b;} /* Child Panels – amber */
.nv-nav-item[href="/api"] {--ic1:#f472b6;--ic2:#db2777;} /* API – pink */
.nv-nav-item[href="/tickets"] {--ic1:#fb923c;--ic2:#ea580c;} /* Tickets – orange */
.nv-nav-item[href="/blog"] {--ic1:#a3e635;--ic2:#65a30d;} /* Blog – lime */
.nv-nav-item[href="/faq"] {--ic1:#f87171;--ic2:#dc2626;} /* FAQ – red */
.nv-nav-item[href="/terms"] {--ic1:#94a3b8;--ic2:#475569;} /* Terms – slate */
.nv-nav-item[href="/signup"] {--ic1:#fb7185;--ic2:#e11d48;}
.nv-nav-item[href="/login"] {--ic1:#818cf8;--ic2:#4f46e5;}
.nv-nav-item[href="/refund-policy"] {--ic1:#fbbf24;--ic2:#f59e0b;}
.nv-nav-item[href="/privacy-policy"] {--ic1:#34d399;--ic2:#059669;}
.nv-nav-item[href="/contact-us"] {--ic1:#22d3ee;--ic2:#0891b2;}
/* the "Legal" dropdown row has no href — give it the same tile, and keep its little chevron plain */
#nvLegalToggle > i:first-child{
width:32px;height:32px;font-size:14px;border-radius:10px;color:#fff;
background:linear-gradient(135deg,#94a3b8,#475569);
box-shadow:0 5px 10px -4px rgba(71,85,105,.65),inset 0 1px 0 rgba(255,255,255,.28);
}
#nvLegalToggle:hover > i:first-child{background:linear-gradient(135deg,#94a3b8,#475569);color:#fff;}
#nvLegalToggle > #nvLegalChev{box-shadow:none;background:none !important;color:var(--nv-muted);width:auto;height:auto;}
/* ═══════════════════════════════════════════════════════════════
SUPPORT / TICKETS PAGE (.tk-*)
Desktop: form on the left, previous requests + FAQ on the right.
≤900px : ONE column → 1) New request 2) Previous requests 3) FAQ
═══════════════════════════════════════════════════════════════ */
.tk-head{margin-bottom:18px;}
.tk-sub{font-size:13px;color:var(--nv-muted);margin-top:4px;line-height:1.5;}
.tk-grid{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
gap:20px;align-items:start;
}
.tk-grid > *{min-width:0;}
.tk-side{display:flex;flex-direction:column;gap:16px;min-width:0;}
.tk-side .nv-card{margin:0;}
.tk-h{
font-size:15px;font-weight:700;color:var(--nv-text);
margin:0 0 18px;display:flex;align-items:center;gap:8px;line-height:1.3;
}
.tk-h i{color:var(--nv-accent);flex-shrink:0;}
.tk-h-sm{font-size:14px;margin-bottom:14px;}
/* selects with a visible chevron */
.tk-sel{position:relative;}
.tk-sel .nv-select{width:100%;padding-right:36px;text-overflow:ellipsis;}
.tk-sel > i{
position:absolute;right:14px;top:50%;transform:translateY(-50%);
font-size:11px;color:var(--nv-muted);pointer-events:none;
}
.tk-form .nv-input,.tk-form .nv-select,.tk-form .nv-textarea{width:100%;max-width:100%;}
.tk-form .nv-textarea{min-height:120px;resize:vertical;}
/* previous requests */
.tk-table{min-width:0 !important;width:100%;}
.tk-id{font-size:12px;color:var(--nv-muted);font-weight:600;}
.tk-subj{min-width:150px;}
.tk-subj a{color:var(--nv-text);text-decoration:none;font-weight:500;overflow-wrap:break-word;}
.tk-subj a.is-new{font-weight:700;}
.tk-new{margin-left:6px;font-size:10px;}
.tk-upd{font-size:12px;color:var(--nv-muted);min-width:88px;}
.tk-upd-inline{display:none;font-size:11.5px;color:var(--nv-muted);margin-top:2px;}
/* FAQ accordion (native , no JS) */
.tk-q{border-bottom:1px solid var(--nv-border);}
.tk-q:last-child{border-bottom:0;}
.tk-q summary{
list-style:none;cursor:pointer;
display:flex;justify-content:space-between;align-items:center;gap:12px;
padding:12px 0;font-size:13.5px;font-weight:600;color:var(--nv-text);line-height:1.4;
}
.tk-q summary::-webkit-details-marker{display:none;}
.tk-q summary i{color:var(--nv-muted);font-size:11px;flex-shrink:0;transition:transform .2s;}
.tk-q[open] summary i{transform:rotate(180deg);}
.tk-q p{font-size:13px;color:var(--nv-text-soft);line-height:1.7;margin:0 0 14px;}
/* ── tablet + phone ── */
@media(max-width:900px){
.tk-grid{grid-template-columns:minmax(0,1fr);gap:16px;}
}
@media(max-width:560px){
.tk-h{font-size:14.5px;margin-bottom:14px;}
.tk-sub{font-size:12.5px;}
/* history table -> compact list: # | subject + date | status */
.tk-table thead .tk-col-upd,
.tk-table tbody .tk-col-upd{display:none;}
.tk-upd-inline{display:block;}
.tk-table th,.tk-table td{padding-left:8px;padding-right:8px;}
.tk-subj{min-width:0;}
.tk-q summary{font-size:13px;}
}
/* ═══════════════════════════════════════════════════════════════
TOP BAR — page name instead of the ☰ button
Desktop : page name only (sidebar is always visible, so no menu button)
Tablet : ☰ button + page name
Phone : ☰ button only
═══════════════════════════════════════════════════════════════ */
.nv-top-ham{display:none;}
.nv-top-title{
font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--nv-text);
text-transform:capitalize;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
min-width:0;flex-shrink:1;
}
@media(max-width:1024px){
.nv-top-ham{display:flex;flex-shrink:0;}
}
/* phones: only the ☰ button — no page name (the name shows on tablet + desktop) */
@media(max-width:600px){
.nv-top-title{display:none;}
.nv-top{padding:0 12px;gap:10px;}
}
/* ═══════════════════════════════════════════════════════════════
DARK MODE v2
Layered navy surfaces, proper contrast, no bright "light-mode" highlights,
readable status colours, styled form controls / autofill / scrollbars.
Toggle = moon/sun button in the top bar ('nvDark' in localStorage;
follows the device setting until the user picks one).
═══════════════════════════════════════════════════════════════ */
.dark{
color-scheme:dark;
--nv-bg:#0b0e14;
--nv-surface:#11161f;
--nv-surface-2:#1a2130;
--nv-card:#141a25;
--nv-text:#eaeef7;
--nv-text-soft:#b3bccf;
--nv-muted:#7f8ba5;
--nv-border:#222a3a;
--nv-border-2:#2e384d;
--nv-ok:#34d399; --nv-okbg:rgba(52,211,153,.14);
--nv-warn:#fbbf24; --nv-warnbg:rgba(251,191,36,.14);
--nv-bad:#f87171; --nv-badbg:rgba(248,113,113,.14);
--nv-info:#60a5fa; --nv-infobg:rgba(96,165,250,.14);
--nv-accent-soft:color-mix(in srgb,var(--nv-accent) 20%,transparent);
--nv-accent-ring:color-mix(in srgb,var(--nv-accent) 42%,transparent);
--nv-accent-text:color-mix(in srgb,var(--nv-accent) 60%,#fff); /* accent used as TEXT on dark */
--nv-sh:0 1px 2px rgba(0,0,0,.45),0 8px 24px -14px rgba(0,0,0,.7);
--nv-sh-lg:0 24px 60px -24px rgba(0,0,0,.85);
}
html:has(body.dark){color-scheme:dark;background:#0b0e14;}
body.dark{background:var(--nv-bg);color:var(--nv-text);}
body.dark ::selection{background:color-mix(in srgb,var(--nv-accent) 45%,transparent);color:#fff;}
/* smooth switch between modes */
.nv-card,.nv-side,.nv-top,.nv-main,.nv-input,.nv-select,.nv-textarea,.nv-table-wrap,.dash-stat,.nv-greet{
transition:background-color .22s ease,border-color .22s ease,color .22s ease;
}
/* soft-UI shadows: the light theme's white top-highlight looks like a glowing line in dark → replace */
body.dark .nv-card,
body.dark .nv-greet,
body.dark .nv-stat,
body.dark .dash-stat,
body.dark .nv-banner,
body.dark .nv-banner-carousel,
body.dark .nv-notice,
body.dark .nv-tabs,
body.dark .nv-table-wrap,
body.dark .nv-dropdown-menu,
body.dark .lm-sum-card,
body.dark .nv-os,
body.dark .nv-feat-card,
body.dark .nv-auth-box,
body.dark .nv-side-balance{
box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 1px 2px rgba(0,0,0,.5),0 14px 30px -16px rgba(0,0,0,.8) !important;
}
body.dark .nv-side{box-shadow:none !important;border-right:1px solid var(--nv-border);}
body.dark .nv-top{box-shadow:0 10px 24px -18px rgba(0,0,0,.85) !important;background:color-mix(in srgb,var(--nv-surface) 88%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);}
body.dark .nv-card,body.dark .nv-greet,body.dark .dash-stat,body.dark .nv-table-wrap,body.dark .nv-tabs{border-color:var(--nv-border);}
body.dark .dash-stat{background:var(--nv-surface-2);}
/* top bar controls + brand chips */
body.dark .nv-top-btn:hover,body.dark .nv-top-ham:hover{background:var(--nv-surface-2);}
body.dark .nv-bal-chip{color:var(--nv-accent-text);}
body.dark .nv-badge-accent,
body.dark .nv-dropdown-item.active,
body.dark .nv-side-foot-links a:hover{color:var(--nv-accent-text);}
body.dark .nv-nav-group{color:#6b768f;}
body.dark .nv-nav-item:hover{background:var(--nv-surface-2);}
body.dark .nv-nav-item.active{background:var(--nv-surface-2);}
body.dark .nv-nav-item[href] i{box-shadow:0 5px 12px -4px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.25);}
/* form controls */
body.dark .nv-input,
body.dark .nv-select,
body.dark .nv-textarea,
body.dark .nv .form-control{
background:var(--nv-surface-2);border-color:var(--nv-border-2);color:var(--nv-text);
}
body.dark .nv-input:focus,body.dark .nv-select:focus,body.dark .nv-textarea:focus,body.dark .nv .form-control:focus{
border-color:var(--nv-accent);box-shadow:0 0 0 3px var(--nv-accent-ring);background:var(--nv-surface-2);
}
body.dark ::placeholder{color:var(--nv-muted);opacity:1;}
body.dark select option,body.dark select optgroup{background:var(--nv-surface);color:var(--nv-text);}
body.dark input:-webkit-autofill,
body.dark input:-webkit-autofill:hover,
body.dark input:-webkit-autofill:focus,
body.dark textarea:-webkit-autofill{
-webkit-box-shadow:0 0 0 1000px var(--nv-surface-2) inset !important;
-webkit-text-fill-color:var(--nv-text) !important;caret-color:var(--nv-text);
}
body.dark input[type=checkbox],body.dark input[type=radio]{accent-color:var(--nv-accent);}
/* tables */
body.dark .nv-table thead th,body.dark .nv .table>thead>tr>th{background:var(--nv-surface-2);color:var(--nv-muted);border-color:var(--nv-border);}
body.dark .nv-table td,body.dark .nv .table>tbody>tr>td{border-color:var(--nv-border);}
body.dark .nv-table tr:hover td,body.dark .nv .table>tbody>tr:hover>td{background:rgba(255,255,255,.03);}
/* status notices + bootstrap alerts: readable text colours */
body.dark .nv-notice-ok,body.dark .nv .alert-success{color:#6ee7b7;border-color:rgba(52,211,153,.30);}
body.dark .nv-notice-bad,body.dark .nv .alert-danger{color:#fca5a5;border-color:rgba(248,113,113,.30);}
body.dark .nv-notice-warn,body.dark .nv .alert-warning{color:#fcd34d;border-color:rgba(251,191,36,.30);}
body.dark .nv-notice-info,body.dark .nv .alert-info{color:#93c5fd;border-color:rgba(96,165,250,.30);}
body.dark .fr-pos{color:#34d399;} body.dark .fr-neg{color:#f87171;}
/* bootstrap leftovers (modals, dropdowns, wells) */
body.dark .nv .modal-content,
body.dark .nv .dropdown-menu,
body.dark .nv .well,
body.dark .nv .panel,
body.dark .nv .list-group-item{background:var(--nv-card);color:var(--nv-text);border-color:var(--nv-border);}
body.dark .nv .modal-header,body.dark .nv .modal-footer{border-color:var(--nv-border);}
body.dark .nv .close{color:var(--nv-text);text-shadow:none;}
/* bottom tab bar + notifications */
body.dark .nv-mob-nav{background:color-mix(in srgb,var(--nv-surface) 92%,transparent);border-top-color:var(--nv-border);box-shadow:0 -12px 28px -16px rgba(0,0,0,.8);}
body.dark .nv-mob-btn.active{color:var(--nv-accent-text);}
body.dark .nv-mob-center-btn a{border-color:var(--nv-surface);}
body.dark .nv-notif-panel{background:var(--nv-card);border-color:var(--nv-border-2);box-shadow:0 24px 60px -20px rgba(0,0,0,.9);}
body.dark .nv-notif-item:hover{background:var(--nv-surface-2);}
/* thin, subtle scrollbars */
body.dark{scrollbar-color:#2e384d transparent;}
body.dark ::-webkit-scrollbar-thumb{background:#2e384d;}
body.dark ::-webkit-scrollbar-thumb:hover{background:#3b4761;}
/* Currency switch: hidden in the header on phones — lives in Account settings instead */
@media(max-width:600px){
.nv-top .nv-cur-switch{display:none !important;}
}
/* ── Drip-feed switch card on the New Order form ───────────────────────── */
.nv-drip{border:1px solid var(--nv-border);border-radius:14px;background:var(--nv-surface-2);overflow:hidden;}
.nv-drip-head{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0;padding:14px 16px;cursor:pointer;font-weight:400;}
.nv-drip-txt{display:flex;flex-direction:column;gap:2px;}
.nv-drip-txt strong{font-size:14px;font-weight:700;color:var(--nv-text);}
.nv-drip-txt small{font-size:12px;color:var(--nv-muted);}
.nv-drip-input{position:absolute;opacity:0;pointer-events:none;}
.nv-drip-switch{position:relative;flex:0 0 46px;width:46px;height:26px;border-radius:26px;background:var(--nv-border-2);transition:background .2s;}
.nv-drip-switch::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s;}
.nv-drip-input:checked + .nv-drip-switch{background:var(--nv-accent);}
.nv-drip-input:checked + .nv-drip-switch::after{transform:translateX(20px);}
.nv-drip-input:focus-visible + .nv-drip-switch{outline:2px solid var(--nv-accent);outline-offset:2px;}
.nv-drip-body{padding:14px 16px 4px;background:var(--nv-surface);border-top:1px solid var(--nv-border);}
.nv-drip-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.nv-drip-body .control-label{font-size:12px;font-weight:600;color:var(--nv-muted);}
@media (max-width:520px){.nv-drip-row{grid-template-columns:1fr;}}
/* ── Drip-feed: options open ONLY while the switch is ON ───────────────
(this theme never shipped a ".hidden" rule, so the box was always open) */
#dripfeed-options.hidden{display:none !important;}
.nv-drip:has(.nv-drip-input:not(:checked)) #dripfeed-options{display:none !important;}
.nv-drip:has(.nv-drip-input:checked) #dripfeed-options{display:block !important;}
/* ── Order-page search results (all services) ─────────────────────────── */
.nv-sres{
display:none;position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:400;
background:var(--nv-surface);border:1px solid var(--nv-border);
border-radius:var(--nv-r-sm);box-shadow:var(--nv-sh-lg);
max-height:420px;overflow-y:auto;
}
.nv-sres.open{display:block;}
.nv-sres-item{
display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
padding:11px 14px;cursor:pointer;border-bottom:1px solid var(--nv-border);color:var(--nv-text);
}
.nv-sres-item:last-child{border-bottom:0;}
.nv-sres-item:hover,.nv-sres-item:focus{background:var(--nv-surface-2);}
.nv-sres-item .l{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;}
.nv-sres-item .sid{
font-size:11px;font-weight:700;color:var(--nv-accent);background:var(--nv-accent-soft);
padding:1px 7px;border-radius:999px;flex-shrink:0;
}
.nv-sres-item .nm{font-size:13px;font-weight:600;line-height:1.4;word-break:break-word;}
.nv-sres-item .cat{flex-basis:100%;font-size:11.5px;color:var(--nv-muted);}
.nv-sres-item .pr{font-size:13px;font-weight:700;color:var(--nv-ok);white-space:nowrap;flex-shrink:0;}
.nv-sres-item mark{background:var(--nv-accent-soft);color:inherit;border-radius:3px;padding:0 1px;}
.nv-sres-empty,.nv-sres-more{padding:14px;font-size:12.5px;color:var(--nv-muted);text-align:center;}
.nv-sres-more{border-top:1px solid var(--nv-border);background:var(--nv-surface-2);}
/* Dashboard 4 stat boxes: NO box-shadow (flat look, border only) — light + dark */
.dash-stat,
body.dark .dash-stat,
a.dash-stat:hover{
box-shadow:none !important;
}
/* ── Services page: social media icon bar ── */
.svc-plats{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.svc-plat{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border:1.5px solid var(--nv-border);border-radius:999px;background:var(--nv-surface);color:var(--nv-text-soft);font-size:13px;font-weight:600;text-decoration:none;transition:border-color .15s,background .15s;}
.svc-plat i{font-size:17px;}
.svc-plat:hover{border-color:var(--nv-accent);text-decoration:none;color:var(--nv-text);}
.svc-plat.active{border-color:var(--nv-accent);background:var(--nv-accent-soft);color:var(--nv-text);}
@media(max-width:600px){.svc-plat span{display:none;}.svc-plat{padding:9px 12px;}.svc-plat i{font-size:19px;}}
.svc-pin{color:var(--nv-accent);font-size:11px;transform:rotate(30deg);}
/* ── New order: selected service price = green, symbol FIRST (₹0.80) ── */
.nv-catdd-btn .cur .pr{color:var(--nv-ok);font-weight:700;}
/* ── Schedule box now uses the same switch-card look as Drip-feed ── */
.nv-drip.nv-sched{border:1px solid var(--nv-border);border-style:solid;padding:0;margin-bottom:14px;background:var(--nv-surface-2);}
.nv-drip.nv-sched.on{border-color:var(--nv-accent);}
.nv-drip.nv-sched .nv-sched-top{font-size:inherit;color:inherit;gap:12px;}
.nv-drip.nv-sched .nv-sched-body{display:none;margin-top:0;padding:14px 16px 14px;}
.nv-drip.nv-sched.on .nv-sched-body{display:block;}
.nv-sched-lbl{display:block;font-size:12px;font-weight:600;color:var(--nv-muted);margin-bottom:6px;}
.nv-drip.nv-sched .nv-sched-note{margin-top:10px;}
/* ── Phone only: platform picker = small icons, no text ── */
@media(max-width:600px){
.lm-platforms{display:flex;flex-wrap:wrap;gap:6px;grid-template-columns:none;}
.lm-plat{flex:0 0 auto;width:42px;height:42px;min-height:0;padding:0;border-radius:11px;}
.lm-plat i{font-size:18px;}
.lm-plat-t{display:none;}
}
/* selected service price always green */
#svcDDCur .pr,.nv-catdd-btn .cur .pr{color:var(--nv-ok) !important;font-weight:700;}
/* ── Dashboard stat boxes: phone only → small, icon beside the text ── */
@media(max-width:600px){
.dash-stats{gap:6px !important;margin-top:10px;}
.dash-stats .dash-stat{
display:grid !important;grid-template-columns:26px minmax(0,1fr);grid-template-rows:auto auto;
column-gap:8px;row-gap:0;align-items:center;padding:7px 9px !important;border-radius:10px;
}
.dash-stats .dash-stat .ic{grid-row:1 / span 2;grid-column:1;width:26px !important;height:26px !important;font-size:11px !important;border-radius:8px !important;}
.dash-stats .dash-stat .k{grid-column:2;grid-row:1;font-size:10px !important;line-height:1.2;}
.dash-stats .dash-stat .v{grid-column:2;grid-row:2;font-size:13.5px !important;line-height:1.2;}
}
/* ── Services page (phone): every service is its own card so they don't blur together ── */
.svc-cat-head{border-left:4px solid var(--nv-accent);}
@container svccard (max-width:619px){
.svc-cat-card .nv-table-wrap{padding:8px;background:var(--nv-surface-2);}
.svc-cat-card .nv-table tbody tr.serviceData{
grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 8px;align-items:center;
padding:9px 10px;margin-bottom:8px;border:1px solid var(--nv-border) !important;border-left:3px solid var(--nv-accent) !important;
border-radius:10px;background:var(--nv-surface);
}
.svc-cat-card .nv-table tbody tr.serviceData:last-child{margin-bottom:0;}
.svc-td-id{order:1;} .svc-td-price{order:2;justify-self:end;}
.svc-td-name{order:3;grid-column:1 / -1;}
.svc-td-min{order:4;grid-column:1;} .svc-td-max{order:5;grid-column:2;}
.svc-id{padding:1px 7px;font-size:11px;}
.svc-price{font-size:13.5px;padding:3px 10px;border-radius:8px;}
.svc-name{font-size:12.5px;line-height:1.35;}
.svc-cat-card .nv-table td.svc-td-min,
.svc-cat-card .nv-table td.svc-td-max{
display:flex;justify-content:space-between;align-items:baseline;gap:6px;
background:var(--nv-surface-2);border-radius:7px;padding:4px 9px;
}
.svc-td-min::before,.svc-td-max::before{display:inline;margin:0;font-size:10px;}
.svc-td-min .svc-chip,.svc-td-max .svc-chip{font-size:12px;font-weight:700;}
.svc-detail{height:30px;font-size:12px;}
.svc-cat-head{padding:11px 13px;}
}
/* ── Add Funds: compact, premium balance card ── */
.af-balance{
position:relative;overflow:hidden;isolation:isolate;
display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto auto;
column-gap:12px;row-gap:0;align-items:center;
padding:14px 16px;border-radius:16px;
background:
radial-gradient(120px 90px at 100% 0%,rgba(255,255,255,.22),transparent 70%),
radial-gradient(140px 120px at 0% 120%,rgba(0,0,0,.20),transparent 70%),
linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
border:1px solid rgba(255,255,255,.16);
box-shadow:0 12px 26px -14px var(--nv-accent-ring),inset 0 1px 0 rgba(255,255,255,.22);
}
.af-balance::after{ /* soft decorative ring */
content:"";position:absolute;z-index:-1;right:-26px;top:-26px;width:96px;height:96px;border-radius:50%;
border:14px solid rgba(255,255,255,.07);
}
.af-balance-top{display:contents;}
.af-balance-ic{
grid-column:1;grid-row:1 / span 2;width:38px;height:38px;border-radius:12px;font-size:16px;
background:linear-gradient(135deg,rgba(255,255,255,.30),rgba(255,255,255,.12));
box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 4px 10px -4px rgba(0,0,0,.25);
}
.af-balance-lbl{grid-column:2;grid-row:1;font-size:10px;font-weight:700;letter-spacing:1.2px;opacity:.85;}
.af-balance-amt{grid-column:2;grid-row:2;font-size:24px;font-weight:800;letter-spacing:-.02em;line-height:1.15;}
.af-balance-sub{
grid-column:1 / -1;grid-row:3;margin-top:10px;padding-top:8px;
border-top:1px solid rgba(255,255,255,.16);font-size:11px;opacity:.9;line-height:1.35;
}
@media(max-width:900px){ .af-balance-amt{font-size:24px;} }
/* ═══════════════════════════════════════════════════════════════
PREMIUM SIDEBAR BUTTONS (Add Funds / Account / Logout)
═══════════════════════════════════════════════════════════════ */
.nv-side-balance{
position:relative;overflow:hidden;
background:linear-gradient(135deg,var(--nv-accent) 0%,var(--nv-accent-press) 100%);
box-shadow:0 14px 28px -14px var(--nv-accent-ring),inset 0 1px 0 rgba(255,255,255,.28);
}
.nv-side-balance::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:radial-gradient(120% 90% at 0% 0%,rgba(255,255,255,.22),transparent 55%);
}
.nv-side-balance:hover{transform:translateY(-1px);filter:brightness(1.06);}
.nv-side-balance-btn{
background:linear-gradient(180deg,#fff,#f3f4f8);
box-shadow:0 6px 14px -6px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.06);
padding:8px 13px;font-weight:800;letter-spacing:.1px;
transition:transform .15s,box-shadow .15s;
}
.nv-side-balance:hover .nv-side-balance-btn{transform:translateY(-1px);box-shadow:0 10px 18px -8px rgba(0,0,0,.4);}
.nv-side-foot-links a{
padding:10px 8px;border-radius:12px;font-weight:600;
background:linear-gradient(180deg,var(--nv-surface),var(--nv-surface-2));
box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 10px -8px rgba(16,24,40,.35);
}
.nv-side-foot-links a i{
width:24px;height:24px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;
background:var(--nv-accent-soft);color:var(--nv-accent);font-size:11px;transition:all .15s;
}
.nv-side-foot-links a:hover{transform:translateY(-1px);box-shadow:0 10px 18px -12px var(--nv-accent-ring);}
.nv-side-foot-links a:hover i{background:var(--nv-accent);color:#fff;}
.nv-side-foot-links a:last-child i{background:var(--nv-badbg);color:var(--nv-bad);}
.nv-side-foot-links a:last-child:hover{border-color:var(--nv-bad);color:var(--nv-bad);background:var(--nv-badbg);}
.nv-side-foot-links a:last-child:hover i{background:var(--nv-bad);color:#fff;}
body.dark .nv-side-foot-links a{box-shadow:0 1px 0 rgba(255,255,255,.05) inset;}
/* ═══════════════════════════════════════════════════════════════
TICKETS LIST — chat-style rows with View button
═══════════════════════════════════════════════════════════════ */
.tk-list{display:flex;flex-direction:column;gap:8px;}
.tk-item{
display:flex;align-items:center;gap:12px;padding:12px;border-radius:14px;
border:1px solid var(--nv-border);background:var(--nv-surface);
text-decoration:none;color:var(--nv-text);transition:border-color .15s,box-shadow .15s,transform .15s;
}
.tk-item:hover{border-color:var(--nv-accent);box-shadow:0 12px 24px -16px var(--nv-accent-ring);transform:translateY(-1px);text-decoration:none;color:var(--nv-text);}
.tk-av{
width:42px;height:42px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));color:#fff;font-size:16px;
}
.tk-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;}
.tk-top{display:flex;align-items:baseline;gap:8px;min-width:0;}
.tk-top b{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tk-top em{font-style:normal;font-size:11.5px;color:var(--nv-muted);flex-shrink:0;}
.tk-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.tk-time{font-size:11.5px;color:var(--nv-muted);}
.tk-view{
display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
padding:8px 14px;border-radius:999px;font-size:12.5px;font-weight:700;
color:var(--nv-accent);background:var(--nv-accent-soft);transition:all .15s;
}
.tk-view i.fas{font-size:10px;}
.tk-item:hover .tk-view{background:var(--nv-accent);color:#fff;}
.tk-dot{width:8px;height:8px;border-radius:50%;background:var(--nv-accent);display:inline-block;}
.tk-item.is-new .tk-top b{font-weight:800;}
.tk-empty{text-align:center;padding:26px 12px;color:var(--nv-muted);}
.tk-empty i{font-size:30px;color:var(--nv-accent);opacity:.55;margin-bottom:10px;}
.tk-empty p{font-size:13px;line-height:1.6;margin:0;}
/* ═══════════════════════════════════════════════════════════════
CHAT VIEW (WhatsApp style) .wa-*
═══════════════════════════════════════════════════════════════ */
.wa{
--wa-me:#ffe9e6;--wa-me-t:#3a1410;--wa-them:#ffffff;--wa-them-t:#0f172a;--wa-bg:#f4efe9;
display:flex;flex-direction:column;
height:calc(100vh - var(--nv-tb) - 40px);height:calc(100dvh - var(--nv-tb) - 40px);
min-height:420px;max-width:860px;margin:0 auto;
border:1px solid var(--nv-border);border-radius:var(--nv-r-lg);overflow:hidden;
background:var(--wa-bg);box-shadow:var(--nv-sh-lg);
}
body.dark .wa{--wa-me:#5a1f1a;--wa-me-t:#ffeceb;--wa-them:#1e2233;--wa-them-t:#e8eaf2;--wa-bg:#0e1017;}
.wa-head{
display:flex;align-items:center;gap:12px;padding:10px 14px;flex-shrink:0;
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));color:#fff;
}
.wa-back{
width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
color:#fff;text-decoration:none;background:rgba(255,255,255,.16);flex-shrink:0;
}
.wa-back:hover{background:rgba(255,255,255,.28);color:#fff;text-decoration:none;}
.wa-av{width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.22);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.wa-who{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25;}
.wa-who b{font-size:15px;font-weight:700;}
.wa-who span{font-size:12px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.wa-status{font-size:11.5px;font-weight:700;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.2);flex-shrink:0;}
.wa-status::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#4ade80;margin-right:6px;}
.wa-status.is-closed::before{background:#fca5a5;}
.wa-body{
flex:1;overflow-y:auto;padding:16px 14px;display:flex;flex-direction:column;gap:6px;
background-image:radial-gradient(rgba(120,100,80,.10) 1px,transparent 1.2px);background-size:22px 22px;
overscroll-behavior:contain;
}
.wa-day{text-align:center;margin:8px 0;}
.wa-day span{display:inline-block;font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:10px;background:var(--wa-them);color:var(--nv-muted);box-shadow:0 1px 1px rgba(0,0,0,.08);}
.wa-row{display:flex;}
.wa-row.me{justify-content:flex-end;}
.wa-bub{
position:relative;max-width:min(78%,560px);padding:7px 10px 6px;border-radius:12px;
box-shadow:0 1px 1px rgba(0,0,0,.10);
}
.wa-row.me .wa-bub{background:var(--wa-me);color:var(--wa-me-t);border-top-right-radius:4px;}
.wa-row.them .wa-bub{background:var(--wa-them);color:var(--wa-them-t);border-top-left-radius:4px;}
.wa-name{font-size:12px;font-weight:800;color:var(--nv-accent);margin-bottom:2px;}
.wa-txt{font-size:14.5px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;}
.wa-meta{font-size:10.5px;opacity:.6;text-align:right;margin-top:2px;white-space:nowrap;}
.wa-row.me .wa-meta i{color:#3b82f6;opacity:1;margin-left:2px;font-size:10px;}
.wa-err{padding:8px 14px;font-size:13px;color:var(--nv-bad);background:var(--nv-badbg);flex-shrink:0;}
.wa-comp{
display:flex;align-items:flex-end;gap:10px;padding:10px 12px;flex-shrink:0;
padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));
background:var(--nv-surface);border-top:1px solid var(--nv-border);
}
.wa-comp textarea{
flex:1;min-width:0;resize:none;max-height:140px;padding:11px 16px;border-radius:22px;
border:1px solid var(--nv-border);background:var(--nv-surface-2);color:var(--nv-text);
font:inherit;font-size:15px;line-height:1.4;outline:none;
}
.wa-comp textarea:focus{border-color:var(--nv-accent);box-shadow:0 0 0 3px var(--nv-accent-soft);}
.wa-send{
width:46px;height:46px;border-radius:50%;border:0;flex-shrink:0;cursor:pointer;color:#fff;font-size:16px;
background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
box-shadow:0 10px 18px -8px var(--nv-accent-ring);transition:transform .15s;
}
.wa-send:hover{transform:scale(1.06);}
.wa-send:active{transform:scale(.96);}
.wa-closed{padding:14px 16px;font-size:13px;color:var(--nv-muted);background:var(--nv-surface);border-top:1px solid var(--nv-border);text-align:center;}
.wa-closed i{margin-right:6px;color:var(--nv-accent);}
@media (max-width:768px){
.wa{height:calc(100vh - var(--nv-tb) - 16px);height:calc(100dvh - var(--nv-tb) - 16px);border-radius:16px;}
.wa-bub{max-width:86%;}
.tk-item{padding:10px;gap:10px;}
.tk-av{width:38px;height:38px;}
.tk-view{padding:7px 11px;}
}
@media (max-width:380px){ .tk-view{font-size:0;gap:0;padding:8px 10px;} .tk-view i.fas{font-size:11px;} }
@media (prefers-reduced-motion:reduce){ .tk-item,.wa-send,.nv-side-balance,.nv-side-foot-links a{transition:none;} }
/* ═══════════════════════════════════════════════════════════════
PREMIUM BALANCE CARD (sidebar) — v2
═══════════════════════════════════════════════════════════════ */
.nv-side-balance{
position:relative;isolation:isolate;overflow:hidden;
padding:14px 14px 14px;border-radius:18px;
background:
radial-gradient(130% 120% at 100% 0%,rgba(255,255,255,.20) 0%,transparent 48%),
radial-gradient(90% 90% at 0% 100%,rgba(0,0,0,.28) 0%,transparent 60%),
linear-gradient(135deg,var(--nv-accent) 0%,var(--nv-accent-press) 100%);
border:1px solid rgba(255,255,255,.22);
box-shadow:0 18px 34px -16px var(--nv-accent-ring),0 2px 6px rgba(0,0,0,.10),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.18);
}
/* fine diagonal texture + glossy sweep */
.nv-side-balance::before{
content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
background:repeating-linear-gradient(135deg,rgba(255,255,255,.07) 0 1px,transparent 1px 9px);
}
.nv-side-balance::after{
content:"";position:absolute;top:-60%;left:-40%;width:50%;height:220%;z-index:-1;pointer-events:none;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);
transform:translateX(-120%) rotate(8deg);transition:transform .9s ease;
}
.nv-side-balance:hover::after{transform:translateX(420%) rotate(8deg);}
.nv-side-balance:hover{filter:none;transform:translateY(-2px);box-shadow:0 24px 38px -16px var(--nv-accent-ring),0 2px 6px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.18);}
.nv-side-balance-top{margin-bottom:14px;gap:9px;}
.nv-side-balance-avatar{
width:26px;height:26px;font-size:12px;
background:rgba(255,255,255,.95);color:var(--nv-accent);
box-shadow:0 0 0 3px rgba(255,255,255,.22);
}
.nv-side-balance-uname{flex:1;font-size:13px;font-weight:700;letter-spacing:.1px;}
.nv-sb-wallet{
width:28px;height:28px;border-radius:9px;flex-shrink:0;
display:inline-flex;align-items:center;justify-content:center;
color:#fff;font-size:12px;
background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.nv-side-balance-row{align-items:flex-end;gap:10px;}
.nv-sb-bal{min-width:0;}
.nv-side-balance-label{
display:flex;align-items:center;gap:6px;margin-bottom:4px;
text-transform:none;letter-spacing:.1px;font-size:11.5px;font-weight:600;color:rgba(255,255,255,.82);
}
.nv-sb-live{
width:6px;height:6px;border-radius:50%;background:#4ade80;flex-shrink:0;
box-shadow:0 0 0 3px rgba(74,222,128,.28);
}
.nv-side-balance-amt{
font-size:25px;font-weight:800;line-height:1.05;letter-spacing:-.6px;
font-variant-numeric:tabular-nums;text-shadow:0 2px 10px rgba(0,0,0,.22);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.nv-side-balance-btn{
gap:7px;padding:6px 12px 6px 6px;border-radius:999px;font-size:12px;font-weight:800;
background:#fff;color:#1f1f2b;
box-shadow:0 10px 18px -8px rgba(0,0,0,.45),inset 0 -2px 0 rgba(0,0,0,.05);
}
.nv-side-balance-btn i{
width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
font-size:10px;color:#fff;background:linear-gradient(135deg,var(--nv-accent),var(--nv-accent-press));
box-shadow:0 4px 8px -3px var(--nv-accent-ring);transition:transform .25s;
}
.nv-side-balance:hover .nv-side-balance-btn i{transform:rotate(90deg);}
.nv-side-balance:active{transform:translateY(0) scale(.99);}
/* top-bar balance chip to match */
.nv-bal-chip{
border-radius:999px;font-weight:800;font-variant-numeric:tabular-nums;
background:linear-gradient(180deg,var(--nv-accent-soft),transparent),var(--nv-surface);
border:1px solid var(--nv-accent-ring);
box-shadow:0 8px 16px -12px var(--nv-accent-ring),inset 0 1px 0 rgba(255,255,255,.5);
}
body.dark .nv-bal-chip{box-shadow:0 8px 16px -12px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.06);}
@media (prefers-reduced-motion:reduce){
.nv-side-balance::after{display:none;}
.nv-side-balance,.nv-side-balance-btn i{transition:none;}
}
/* ═══════════════════════════════════════════════════════════════
v3 fixes: full balance on sidebar card + no Quick Support on phones
═══════════════════════════════════════════════════════════════ */
.nv-side-balance-row{flex-direction:column;align-items:stretch;gap:12px;}
.nv-sb-bal{width:100%;}
.nv-side-balance-label{white-space:nowrap;}
.nv-side-balance-amt{
font-size:26px;overflow:visible;text-overflow:clip;white-space:nowrap;
max-width:100%;
}
.nv-side-balance-btn{width:100%;justify-content:center;padding:7px 14px 7px 8px;}
@media (max-width:767px){
.nv-quick-support{display:none !important;}
}
/* ── Service description: directly under Services on every device ── */
.nv-desc{margin-top:0}
.nv-desc-sum{padding:0 20px 20px}
.nv-desc-form{display:block;margin:0 0 14px}
.nv-desc-box{background:var(--nv-surface-2);border:1px solid var(--nv-border);border-radius:12px;overflow:hidden}
.nv-desc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-bottom:1px solid var(--nv-border);font-size:12.5px;font-weight:700;color:var(--nv-text)}
.nv-desc-head i{color:var(--nv-accent);margin-right:5px}
.nv-desc-hide,.nv-desc-show{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:4px 8px;border-radius:8px;font-size:12px;font-weight:600;color:var(--nv-text-soft);cursor:pointer;font-family:inherit}
.nv-desc-hide:hover,.nv-desc-show:hover{color:var(--nv-accent);background:var(--nv-accent-soft)}
.nv-desc-show{display:none;padding-left:0}
.nv-desc-body{padding:12px;font-size:13px;line-height:1.55;color:var(--nv-text-soft);max-height:260px;overflow-y:auto;overflow-wrap:anywhere;-webkit-overflow-scrolling:touch}
.nv-desc-body.empty{font-style:italic;color:var(--nv-muted)}
.nv-desc.is-off .nv-desc-box{display:none}
.nv-desc.is-off .nv-desc-show{display:inline-flex}
/* the raw description block that service_detail ajax prints inside the form: replaced by the boxes above */
#neworder_fields #description{display:none}