/* ==========================================================
   iWebVault WHMCS — custom.css FINAL CLEAN v5
   No duplicates. Responsive handled in head.tpl (inline).
========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --blue:#0057FF; --cyan:#00C8FF; --lime:#B8FF3C;
  --ink:#0A0E1A;  --panel:#1A2140;
  --muted:#6B7499; --border:#E4EAFF; --light:#F0F4FF;
  --pale:#F8FAFF;  --body:#374163;
  --grad:linear-gradient(135deg,#0057FF,#00C8FF);
  --green:#16a34a; --amber:#d97706; --red:#dc2626; --violet:#7c3aed;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:0 12px 40px rgba(0,0,0,.12);
  --radius:12px; --radius-lg:16px;
  --sb:260px; --tb:56px;
}

*,*::before,*::after { box-sizing:border-box }
body { font-family:'Plus Jakarta Sans',system-ui,sans-serif; background:var(--light); color:var(--body); margin:0; min-height:100vh; }
a { color:var(--blue); text-decoration:none }
a:hover { color:#0042cc; text-decoration:none }

/* ── Sidebar ── */
#iwv-sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sb); background:var(--ink); z-index:500; display:flex; flex-direction:column; overflow-y:auto; overflow-x:hidden; }
.iwv-sb-logo { padding:18px 20px 16px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0 }
.iwv-sb-logo-mark { width:34px; height:34px; border-radius:9px; background:var(--grad); display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:15px; flex-shrink:0; box-shadow:0 4px 12px rgba(0,87,255,.35) }
.iwv-sb-logo-text { font-family:'Plus Jakarta Sans',sans-serif; font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1 }
.iwv-sb-logo-text .i { color:var(--cyan) }
.iwv-sb-logo-text .web { color:#fff }
.iwv-sb-logo-text .vault { background:var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text }
.iwv-sb-user { margin:10px; padding:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07); border-radius:10px; display:flex; align-items:center; gap:10px; flex-shrink:0 }
.iwv-sb-avatar { width:36px; height:36px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; color:#fff; flex-shrink:0 }
.iwv-sb-user-info { min-width:0; flex:1 }
.iwv-sb-user-name { font-size:12.5px; font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.iwv-sb-user-role { font-size:10px; color:rgba(255,255,255,.3); text-transform:uppercase; letter-spacing:.1em; font-weight:600 }
.iwv-sb-user-actions a { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:6px; color:rgba(255,255,255,.3); font-size:11px }
.iwv-sb-section { padding:16px 16px 5px; font-size:9px; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.2); flex-shrink:0 }
.iwv-sb-nav { padding:0 8px; list-style:none; margin:0 0 4px; flex-shrink:0 }
.iwv-sb-nav>li { margin-bottom:1px }
.iwv-sb-nav>li>a,.iwv-sb-nav>li>.iwv-drop-trigger { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:9px; color:rgba(255,255,255,.55); font-size:13px; font-weight:600; text-decoration:none; cursor:pointer; border:none; background:none; width:100%; text-align:left; transition:background .15s,color .15s }
.iwv-sb-nav>li>a:hover,.iwv-sb-nav>li>.iwv-drop-trigger:hover { background:rgba(255,255,255,.07); color:#fff }
.iwv-sb-nav>li>a.iwv-active { background:rgba(0,87,255,.2); color:#fff; border-left:2px solid var(--blue); padding-left:8px }
.iwv-nav-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:13px; opacity:.7 }
.iwv-caret { margin-left:auto; font-size:10px; transition:transform .22s; opacity:.4; flex-shrink:0 }
.iwv-sb-nav>li.open>.iwv-drop-trigger .iwv-caret { transform:rotate(180deg) }
.iwv-sb-badge { margin-left:auto; background:var(--blue); color:#fff; font-size:10px; font-weight:700; border-radius:10px; padding:1px 7px; min-width:18px; text-align:center; flex-shrink:0 }
.iwv-sb-badge.red { background:var(--red) }
.iwv-sub-nav { list-style:none; padding:2px 0 4px 29px; margin:0; overflow:hidden; max-height:0; transition:max-height .28s }
.iwv-sb-nav>li.open .iwv-sub-nav { max-height:600px }
.iwv-sub-nav a { display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:6px; color:rgba(255,255,255,.4); font-size:12.5px; font-weight:500; text-decoration:none; border-left:1px solid rgba(255,255,255,.07); margin-bottom:1px; transition:color .12s,background .12s }
.iwv-sub-nav a:hover { color:rgba(255,255,255,.85); background:rgba(255,255,255,.05) }
.iwv-sub-nav a.iwv-active { color:var(--cyan); border-color:var(--cyan); background:rgba(0,200,255,.07) }
.iwv-page-sidebar { margin:8px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.07); background:rgba(255,255,255,.03); flex-shrink:0 }
.iwv-page-sidebar .card,.iwv-page-sidebar .card-sidebar { background:transparent!important; border:none!important; margin-bottom:0!important; border-radius:0!important; box-shadow:none!important }
.iwv-page-sidebar .card-header { background:rgba(255,255,255,.05)!important; border-bottom:1px solid rgba(255,255,255,.07)!important; padding:9px 13px!important }
.iwv-page-sidebar .card-title { color:rgba(255,255,255,.35)!important; font-size:9px!important; font-weight:800!important; letter-spacing:.2em!important; text-transform:uppercase!important; margin:0!important }
.iwv-page-sidebar .card-minimise { display:none!important }
.iwv-page-sidebar .list-group-item { background:transparent!important; border:none!important; border-bottom:1px solid rgba(255,255,255,.04)!important; color:rgba(255,255,255,.45)!important; font-size:12.5px!important; font-weight:500!important; padding:9px 13px!important }
.iwv-page-sidebar .list-group-item:hover { background:rgba(255,255,255,.06)!important; color:#fff!important }
.iwv-page-sidebar .list-group-item.active { background:rgba(0,87,255,.18)!important; color:var(--cyan)!important; border-left:2px solid var(--cyan)!important }
.iwv-page-sidebar .card-footer { background:transparent!important; border-top:1px solid rgba(255,255,255,.06)!important; padding:10px 13px!important }
.iwv-page-sidebar .card-footer .btn-default { background:rgba(255,255,255,.06)!important; border:1px solid rgba(255,255,255,.1)!important; color:rgba(255,255,255,.6)!important; font-size:12px!important; border-radius:7px!important }
.iwv-sb-bottom { margin-top:auto; padding:10px 8px 14px; border-top:1px solid rgba(255,255,255,.06); flex-shrink:0 }
.iwv-sb-bottom a { display:flex; align-items:center; gap:9px; padding:8px 10px; border-radius:8px; color:rgba(255,255,255,.35); font-size:12.5px; font-weight:600; text-decoration:none; transition:background .15s,color .15s }
.iwv-sb-bottom a:hover { background:rgba(255,255,255,.07); color:#fff }
.iwv-sb-bottom .iwv-logout { color:rgba(220,38,38,.5)!important }
.iwv-sb-bottom .iwv-logout:hover { color:#f87171!important; background:rgba(220,38,38,.1)!important }

/* ── Mobile sidebar toggle button (hidden on desktop via head.tpl) ── */
.iwv-sb-topbar-toggle {
  display: none;
  width: 40px; height: 40px;
  background: linear-gradient(135deg, #0057FF, #00C8FF);
  border: none; border-radius: 11px; cursor: pointer;
  align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(0,87,255,.28);
  transition: transform .15s, box-shadow .15s;
  padding: 0;
}
.iwv-sb-topbar-toggle:hover { transform:scale(1.06); box-shadow:0 5px 18px rgba(0,87,255,.4) }
.iwv-sb-topbar-toggle:active { transform:scale(.95) }

/* ── Overlay ── */
.iwv-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:499; pointer-events:none; opacity:0; transition:opacity .25s }

/* ── Topbar ── */
header#header,.topbar,nav.master-breadcrumb { display:none!important }
#iwv-topbar { height:var(--tb); background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; padding:0 24px; gap:10px; position:fixed; top:0; left:var(--sb); right:0; z-index:100 }
.iwv-topbar-actions { display:flex; align-items:center; gap:3px; flex-shrink:0 }
.iwv-tb-btn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border-radius:9px; color:var(--muted); text-decoration:none; border:1px solid transparent; cursor:pointer; background:none; font-size:15px; position:relative }
.iwv-tb-btn:hover { background:var(--light); color:var(--ink); border-color:var(--border) }
.iwv-tb-btn .badge { position:absolute; top:1px; right:1px; font-size:9px; padding:1px 4px; min-width:14px; border-radius:7px }
.iwv-tb-divider { width:1px; height:22px; background:var(--border); margin:0 2px; flex-shrink:0 }
.iwv-user-pill { display:flex; align-items:center; gap:7px; padding:4px 10px 4px 4px; border-radius:9px; border:1px solid var(--border); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:none; white-space:nowrap }
.iwv-user-pill .av { width:27px; height:27px; border-radius:50%; background:var(--grad); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:#fff; flex-shrink:0 }
.iwv-kb-search-form { flex-shrink:0 }

/* ── Breadcrumb bar ── */
#iwv-breadcrumb-bar { background:var(--light); border-bottom:1px solid var(--border); position:fixed; top:var(--tb); left:var(--sb); right:0; z-index:99 }
.iwv-breadcrumb-inner { padding:9px 24px; display:flex; align-items:center; gap:10px }
.iwv-breadcrumb-inner::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--blue); flex-shrink:0; opacity:.7 }
.iwv-breadcrumb-inner .breadcrumb { margin:0; padding:0; background:transparent; font-size:13px; display:flex; align-items:center; flex-wrap:nowrap; overflow:hidden }
.iwv-breadcrumb-inner .breadcrumb-item+.breadcrumb-item::before { content:'›'; color:var(--muted); font-size:14px; padding:0 4px }
.iwv-breadcrumb-inner .breadcrumb-item a { color:var(--muted); font-weight:500; text-decoration:none }
.iwv-breadcrumb-inner .breadcrumb-item a:hover { color:var(--blue) }
.iwv-breadcrumb-inner .breadcrumb-item.active { color:var(--ink); font-weight:700 }

/* ── Main content ── */
section#main-body { padding:24px!important; padding-top:calc(var(--tb) + 38px + 24px)!important; background:var(--light)!important }
section#main-body>.container { max-width:none!important; padding:0!important; margin:0!important; width:100%!important }
section#main-body .col-lg-4.col-xl-3 { display:none!important }
section#main-body .col-lg-8.col-xl-9 { max-width:none!important; width:100%!important; flex:none!important }
.primary-content { padding:0!important }

/* ── Cards ── */
.card { border:1px solid var(--border)!important; border-radius:var(--radius)!important; box-shadow:var(--shadow-sm)!important; background:#fff!important; margin-bottom:20px }
.card-header { background:#fff!important; border-bottom:1px solid var(--border)!important; border-radius:var(--radius) var(--radius) 0 0!important; padding:16px 20px!important; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px }
.card-title { font-family:'Plus Jakarta Sans',sans-serif!important; font-size:14px!important; font-weight:700!important; color:var(--ink)!important; margin:0!important }
.card-body { padding:20px!important }
.card-footer { background:var(--pale)!important; border-top:1px solid var(--border)!important; border-radius:0 0 var(--radius) var(--radius)!important; padding:12px 20px!important }

/* ── Buttons ── */
.btn { font-family:'Plus Jakarta Sans',sans-serif!important; font-weight:600!important; border-radius:9px!important; font-size:13px!important; padding:8px 16px!important; transition:all .15s!important }
.btn-primary,.btn-primary:not(:disabled) { background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important }
.btn-primary:hover { background:#0042cc!important; border-color:#0042cc!important }
.btn-default { background:#fff!important; border:1px solid var(--border)!important; color:var(--body)!important }
.btn-default:hover { background:var(--light)!important; border-color:var(--blue)!important }
.btn-success { background:var(--green)!important; border-color:var(--green)!important; color:#fff!important }
.btn-danger { background:var(--red)!important; border-color:var(--red)!important; color:#fff!important }
.btn-warning { background:var(--amber)!important; border-color:var(--amber)!important; color:#fff!important }
.btn-xs { font-size:11px!important; padding:4px 10px!important; border-radius:6px!important }
.btn-sm { font-size:12px!important; padding:6px 12px!important; border-radius:8px!important }
.btn-lg { font-size:15px!important; padding:12px 24px!important; border-radius:10px!important }

/* ── Forms ── */
.form-control { border:1px solid var(--border)!important; border-radius:9px!important; padding-top:9px!important; padding-bottom:9px!important; padding-right:14px!important; padding-left:14px; font-size:13.5px!important; font-family:'Plus Jakarta Sans',sans-serif!important; color:var(--ink)!important; background:#fff!important; transition:border-color .15s,box-shadow .15s!important }
.form-control:focus { border-color:var(--blue)!important; box-shadow:0 0 0 3px rgba(0,87,255,.1)!important; outline:none!important }
.form-control::placeholder { color:rgba(107,116,153,.6)!important }
.form-control:disabled,.form-control[readonly] { background:var(--light)!important }
select.form-control { -webkit-appearance:none!important; appearance:none!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236B7499' stroke-width='1.5' fill='none'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 12px center!important; padding-right:32px!important }
label,.col-form-label { font-size:12.5px!important; font-weight:600!important; color:var(--body)!important; margin-bottom:5px!important }
.iti { display:block!important; width:100%!important }
.iti__flag-container { z-index:4 }
#registration #inputPhone.field { border:1px solid var(--border)!important; border-radius:9px!important; font-family:'Plus Jakarta Sans',sans-serif!important; font-size:13.5px!important; color:var(--ink)!important; background:#fff!important; padding-top:9px!important; padding-bottom:9px!important; padding-right:14px!important; width:100%!important }

/* ── Badges ── */
.iwv-badge,.label.status { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:20px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; white-space:nowrap }
.iwv-badge::before,.label.status::before { content:''; width:5px; height:5px; border-radius:50%; background:currentColor; flex-shrink:0 }
.iwv-badge-green,.status-active,.status-completed,.status-paid { background:rgba(22,163,74,.1); color:var(--green) }
.iwv-badge-red,.status-suspended,.status-terminated,.status-cancelled,.status-unpaid,.status-overdue { background:rgba(220,38,38,.1); color:var(--red) }
.iwv-badge-amber,.status-pending,.status-open,.status-customer-reply { background:rgba(217,119,6,.1); color:var(--amber) }
.iwv-badge-blue,.status-in-progress,.status-answered { background:rgba(0,87,255,.1); color:var(--blue) }
.iwv-badge-muted,.status-draft,.status-on-hold,.status-closed { background:rgba(107,116,153,.1); color:var(--muted) }
.iwv-badge-violet,.status-refunded { background:rgba(124,58,237,.1); color:var(--violet) }

/* ── Tables ── */
.table-container { background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow-x:auto; -webkit-overflow-scrolling:touch; box-shadow:var(--shadow-sm) }
.table { border-collapse:separate!important; border-spacing:0!important; font-size:13.5px!important; min-width:500px }
.table thead th { background:var(--light)!important; color:var(--muted)!important; font-size:10.5px!important; font-weight:800!important; text-transform:uppercase!important; letter-spacing:.1em!important; border-bottom:1px solid var(--border)!important; border-top:none!important; padding:10px 16px!important; white-space:nowrap }
.table tbody tr:hover { background:var(--pale)!important }
.table tbody td { padding:13px 16px!important; border-bottom:1px solid var(--border)!important; vertical-align:middle!important; border-top:none!important }
.table tbody tr:last-child td { border-bottom:none!important }
.table-list { border:none!important }
div.dataTables_wrapper { padding:0 }
.dataTables_wrapper .dataTables_filter,.dataTables_wrapper .dataTables_length { padding:14px 16px 0 }
.dataTables_wrapper .dataTables_filter input,.dataTables_wrapper .dataTables_length select { border:1px solid var(--border)!important; border-radius:8px!important; padding:6px 12px!important }
.dataTables_info { color:var(--muted)!important; font-size:12px!important; padding:10px 16px }
.dataTables_paginate { padding:10px 16px }

/* ── Alerts ── */
.alert { border:none!important; border-radius:10px!important; padding:14px 18px!important; font-size:13.5px!important; border-left:3px solid transparent!important }
.alert-success { background:rgba(22,163,74,.08)!important; color:var(--green)!important; border-left-color:var(--green)!important }
.alert-danger  { background:rgba(220,38,38,.08)!important; color:var(--red)!important; border-left-color:var(--red)!important }
.alert-warning { background:rgba(217,119,6,.08)!important; color:var(--amber)!important; border-left-color:var(--amber)!important }
.alert-info    { background:rgba(0,87,255,.07)!important; color:var(--blue)!important; border-left-color:var(--blue)!important }

/* ── Misc ── */
.badge { border-radius:10px!important; font-size:10px!important; font-weight:700!important }
.badge-info,.badge-primary { background:var(--blue)!important }
.badge-success { background:var(--green)!important }
.badge-danger  { background:var(--red)!important }
.toggle-switch-success { position:relative; width:44px; height:24px; -webkit-appearance:none; appearance:none; background:rgba(107,116,153,.3); border-radius:12px; cursor:pointer; transition:background .2s; vertical-align:middle; flex-shrink:0 }
.toggle-switch-success:checked { background:var(--green)!important }
.toggle-switch-success::after { content:''; position:absolute; width:18px; height:18px; border-radius:50%; background:#fff; top:3px; left:3px; transition:left .2s; box-shadow:0 1px 3px rgba(0,0,0,.2) }
.toggle-switch-success:checked::after { left:23px }
.iwv-toggle-wrap { display:inline-flex; align-items:center; flex-shrink:0 }
.iwv-toggle-input { position:absolute; opacity:0; width:0; height:0; pointer-events:none }
.iwv-toggle-track { position:relative; display:inline-block; width:44px; height:24px; background:rgba(107,116,153,.25); border-radius:12px; transition:background .22s; cursor:pointer; flex-shrink:0 }
.iwv-toggle-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.22); transition:left .22s }
.iwv-toggle-input:checked~.iwv-toggle-track { background:var(--blue) }
.iwv-toggle-input:checked~.iwv-toggle-track .iwv-toggle-thumb { left:23px }
.nav-tabs { border-bottom:1px solid var(--border)!important; margin-bottom:20px }
.nav-tabs .nav-link { border:none!important; border-bottom:2px solid transparent!important; color:var(--muted)!important; font-size:13px!important; font-weight:600!important; padding:10px 16px!important; margin-bottom:-1px; border-radius:0!important }
.nav-tabs .nav-link:hover { color:var(--ink)!important }
.nav-tabs .nav-link.active { color:var(--blue)!important; border-bottom-color:var(--blue)!important }
.pagination .page-item .page-link { border:1px solid var(--border)!important; color:var(--body)!important; font-size:13px!important; font-weight:600!important; border-radius:8px!important; margin:0 2px!important; padding:6px 12px!important }
.pagination .page-item .page-link:hover { background:var(--light)!important; color:var(--blue)!important }
.pagination .page-item.active .page-link { background:var(--blue)!important; border-color:var(--blue)!important; color:#fff!important }
.modal-content { border:none!important; border-radius:14px!important; box-shadow:var(--shadow-lg)!important }
.modal-header { border-bottom:1px solid var(--border)!important; padding:18px 22px!important }
.modal-title { font-size:16px!important; font-weight:700!important }
.modal-body { padding:22px!important }
.modal-footer { border-top:1px solid var(--border)!important; padding:14px 22px!important; background:var(--pale)!important }
.modal-backdrop { z-index:490!important }
.modal { z-index:495!important }
footer#footer { background:#fff!important; border-top:1px solid var(--border)!important; padding:18px 24px!important }
footer#footer .copyright { font-size:12px!important; color:var(--muted)!important }
footer#footer .nav-link { color:var(--muted)!important; font-size:12.5px!important; font-weight:500!important; padding:4px 12px!important }
.breadcrumb { background:transparent!important; padding:0!important; margin-bottom:0!important }
.text-primary { color:var(--blue)!important }
.text-success { color:var(--green)!important }
.text-danger  { color:var(--red)!important }
.text-muted   { color:var(--muted)!important }

/* ── Ticket thread ── */
.iwv-reply { border-bottom:1px solid var(--border) }
.iwv-reply:last-child { border-bottom:none }
.iwv-reply.staff { background:rgba(0,87,255,.025) }
.iwv-reply-inner { padding:22px 24px }
.iwv-reply-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap }
.iwv-reply-avatar { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0 }
.iwv-reply-avatar.client { background:var(--light); color:var(--blue) }
.iwv-reply-avatar.staff  { background:var(--grad); color:#fff }
.iwv-reply-meta { flex:1; min-width:0 }
.iwv-reply-name { font-size:13px; font-weight:700; color:var(--ink) }
.iwv-reply-time { font-size:11.5px; color:var(--muted) }
.iwv-reply-type { font-size:10px; padding:2px 8px; border-radius:6px; font-weight:700; text-transform:uppercase }
.iwv-reply-type.client { background:var(--light); color:var(--blue) }
.iwv-reply-type.staff  { background:rgba(0,87,255,.1); color:var(--blue) }
.iwv-reply-body { background:var(--pale); border-radius:10px; padding:16px 18px; font-size:14px; line-height:1.75; color:var(--body); border:1px solid var(--border) }
.iwv-reply.staff .iwv-reply-body { background:rgba(0,87,255,.04); border-color:rgba(0,87,255,.1) }

/* ── Product hero ── */
.iwv-product-hero { background:linear-gradient(135deg,var(--ink),var(--panel)); border-radius:var(--radius-lg); padding:28px; margin-bottom:20px; display:flex; align-items:flex-start; gap:24px; flex-wrap:wrap }
.iwv-product-icon { width:64px; height:64px; border-radius:16px; background:rgba(0,87,255,.2); border:1px solid rgba(0,87,255,.3); display:flex; align-items:center; justify-content:center; font-size:26px; color:var(--cyan); flex-shrink:0 }
.iwv-product-hero-body { flex:1; min-width:200px }
.iwv-product-name { font-size:20px; font-weight:800; color:#fff; margin-bottom:4px }
.iwv-product-group { font-size:12px; color:rgba(255,255,255,.45); margin-bottom:12px }
.iwv-product-specs { display:flex; flex-wrap:wrap; gap:20px; margin-top:16px; padding-top:16px; border-top:1px solid rgba(255,255,255,.08) }
.iwv-product-spec label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:rgba(255,255,255,.35); display:block; margin-bottom:3px }
.iwv-product-spec span { font-size:14px; font-weight:600; color:#fff }

/* ── Services grid ── */
.iwv-services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-bottom:8px }

/* ── Dashboard grids (columns set in head.tpl to avoid cache) ── */
.iwv-stat-grid,.iwv-quick-grid { display:grid; gap:14px }

/* ── Page Section Tabs — horizontal nav at top of content ── */
.iwv-page-tabs-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 6px;
  margin-bottom: 20px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.iwv-page-tabs-wrap::-webkit-scrollbar { display: none; }

.iwv-page-tabs {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: max-content;
}

.iwv-page-tab {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 9px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
  border: none;
  background: none;
  cursor: pointer;
}
.iwv-page-tab:hover {
  background: var(--light);
  color: var(--ink);
  text-decoration: none;
}
.iwv-page-tab.active {
  background: linear-gradient(135deg, #0057FF, #00C8FF);
  color: #fff;
  box-shadow: 0 3px 10px rgba(0,87,255,.25);
}
.iwv-page-tab.active:hover {
  color: #fff;
  background: linear-gradient(135deg, #0042cc, #0057FF);
}
.iwv-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.25);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
  min-width: 18px;
}
.iwv-page-tab:not(.active) .iwv-tab-badge {
  background: rgba(0,87,255,.1);
  color: var(--blue);
}

/* ══════════════════════════════════════════════════════
   WHMCS SHOPPING CART — PREMIUM REDESIGN
   Targets the cart.php product listing page
   ($inShoppingCart = true)
══════════════════════════════════════════════════════ */

/* ── Cart page body layout ── */
body.inShoppingCart {
  background: var(--light) !important;
  padding-left: 0 !important;
}
body.inShoppingCart section#main-body {
  padding: 0 !important;
  padding-top: calc(var(--tb) + 38px) !important;
}
body.inShoppingCart .container {
  max-width: 1200px !important;
  padding: 24px 20px !important;
}

/* ── Cart page title (category heading) ── */
body.inShoppingCart h1.group-name,
body.inShoppingCart .product-group-heading h1,
body.inShoppingCart .product-group-heading h2 {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: clamp(22px, 3vw, 32px) !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  letter-spacing: -.025em !important;
  margin: 0 0 24px !important;
}

/* ── LEFT SIDEBAR: Categories & Actions ── */
body.inShoppingCart .col-md-3,
body.inShoppingCart .col-lg-3,
body.inShoppingCart .col-sm-3 {
  padding-right: 16px !important;
}

/* Sidebar cards */
body.inShoppingCart .sidebar .card,
body.inShoppingCart .col-md-3 .card,
body.inShoppingCart .col-lg-3 .card {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
  margin-bottom: 14px !important;
}

/* Sidebar card headers */
body.inShoppingCart .sidebar .card-header,
body.inShoppingCart .col-md-3 .card-header,
body.inShoppingCart .col-lg-3 .card-header {
  background: var(--ink) !important;
  border: none !important;
  padding: 14px 18px !important;
  border-radius: 13px 13px 0 0 !important;
}
body.inShoppingCart .sidebar .card-header *,
body.inShoppingCart .col-md-3 .card-header *,
body.inShoppingCart .col-lg-3 .card-header * {
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
body.inShoppingCart .sidebar .card-header .fa,
body.inShoppingCart .sidebar .card-header .fas,
body.inShoppingCart .col-md-3 .card-header .fa,
body.inShoppingCart .col-md-3 .card-header .fas {
  color: var(--cyan) !important;
  margin-right: 8px !important;
}

/* Sidebar nav list items */
body.inShoppingCart .sidebar .list-group-item,
body.inShoppingCart .col-md-3 .list-group-item,
body.inShoppingCart .col-lg-3 .list-group-item,
body.inShoppingCart .nav-stacked > li > a,
body.inShoppingCart .product-group-item a {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--body) !important;
  padding: 10px 18px !important;
  border: none !important;
  border-bottom: 1px solid var(--border) !important;
  background: #fff !important;
  text-decoration: none !important;
  display: block !important;
  transition: background .12s, color .12s !important;
}
body.inShoppingCart .sidebar .list-group-item:last-child,
body.inShoppingCart .col-md-3 .list-group-item:last-child {
  border-bottom: none !important;
  border-radius: 0 0 13px 13px !important;
}
body.inShoppingCart .sidebar .list-group-item:hover,
body.inShoppingCart .col-md-3 .list-group-item:hover {
  background: var(--light) !important;
  color: var(--blue) !important;
}
body.inShoppingCart .sidebar .list-group-item.active,
body.inShoppingCart .col-md-3 .list-group-item.active,
body.inShoppingCart .nav-stacked > li.active > a,
body.inShoppingCart .product-group-item.active a {
  background: rgba(0,87,255,.08) !important;
  color: var(--blue) !important;
  border-left: 3px solid var(--blue) !important;
  padding-left: 15px !important;
}
body.inShoppingCart .sidebar .list-group-item .fas,
body.inShoppingCart .sidebar .list-group-item .fa {
  color: var(--muted) !important;
  margin-right: 8px !important;
  width: 16px !important;
  text-align: center !important;
}

/* ── RIGHT: Product cards grid ── */
body.inShoppingCart .product-list,
body.inShoppingCart .products-wrapper,
body.inShoppingCart .col-md-9 > .row {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 18px !important;
}
body.inShoppingCart .product-list > *,
body.inShoppingCart .products-wrapper > *,
body.inShoppingCart .col-md-9 > .row > div[class*="col"] {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
}

/* Each product card */
body.inShoppingCart .product,
body.inShoppingCart .product-col,
body.inShoppingCart .col-md-9 .card {
  background: #fff !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04) !important;
  transition: transform .18s, box-shadow .18s, border-color .18s !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  margin: 0 !important;
}
body.inShoppingCart .product:hover,
body.inShoppingCart .product-col:hover,
body.inShoppingCart .col-md-9 .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 32px rgba(0,87,255,.12) !important;
  border-color: rgba(0,87,255,.25) !important;
}

/* Product name heading */
body.inShoppingCart .product .product-name,
body.inShoppingCart .product h3,
body.inShoppingCart .product h4,
body.inShoppingCart .col-md-9 .card-header h3,
body.inShoppingCart .col-md-9 .card-header h4,
body.inShoppingCart .col-md-9 .card .product-name {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  color: var(--ink) !important;
  margin: 0 0 8px !important;
  letter-spacing: -.02em !important;
}

/* Product card header area */
body.inShoppingCart .product > *:first-child,
body.inShoppingCart .col-md-9 .card-header {
  padding: 20px 20px 0 !important;
  background: #fff !important;
  border: none !important;
}

/* Features list */
body.inShoppingCart .product .features,
body.inShoppingCart .product ul,
body.inShoppingCart .product .product-features,
body.inShoppingCart .col-md-9 .card ul {
  list-style: none !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  flex: 1 !important;
}
body.inShoppingCart .product .features li,
body.inShoppingCart .product ul li,
body.inShoppingCart .col-md-9 .card ul li {
  font-size: 13px !important;
  color: var(--body) !important;
  padding: 5px 0 !important;
  border-bottom: 1px solid var(--border) !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  line-height: 1.45 !important;
}
body.inShoppingCart .product .features li:last-child,
body.inShoppingCart .col-md-9 .card ul li:last-child {
  border-bottom: none !important;
}
body.inShoppingCart .product .features li strong,
body.inShoppingCart .col-md-9 .card ul li strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

/* Price */
body.inShoppingCart .product .price,
body.inShoppingCart .product .product-price,
body.inShoppingCart .product-pricing,
body.inShoppingCart .col-md-9 .card .price {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  color: var(--blue) !important;
  letter-spacing: -.03em !important;
  line-height: 1.1 !important;
}
body.inShoppingCart .product .price-cycle,
body.inShoppingCart .product .price small,
body.inShoppingCart .col-md-9 .card .price small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--muted) !important;
  display: block !important;
  letter-spacing: 0 !important;
}

/* Price + CTA area */
body.inShoppingCart .product .order-area,
body.inShoppingCart .product .product-order,
body.inShoppingCart .col-md-9 .card .card-footer,
body.inShoppingCart .product > div:last-child {
  padding: 16px 20px 20px !important;
  background: var(--pale) !important;
  border-top: 1px solid var(--border) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  border-radius: 0 0 15px 15px !important;
}

/* Order Now button */
body.inShoppingCart .btn-order-now,
body.inShoppingCart .product .btn,
body.inShoppingCart .product .btn-success,
body.inShoppingCart .product .btn-primary,
body.inShoppingCart .col-md-9 .card .btn {
  background: linear-gradient(135deg, #0057FF, #00C8FF) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  padding: 10px 22px !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 12px rgba(0,87,255,.28) !important;
  transition: transform .15s, box-shadow .15s !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body.inShoppingCart .btn-order-now:hover,
body.inShoppingCart .product .btn:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(0,87,255,.38) !important;
  color: #fff !important;
}

/* Collapse button for sidebar sections */
body.inShoppingCart [data-toggle="collapse"],
body.inShoppingCart .btn-link {
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* ── Mobile cart layout ── */
@media (max-width: 767px) {
  body.inShoppingCart .col-md-3,
  body.inShoppingCart .col-md-9 {
    padding: 0 !important;
    margin-bottom: 16px !important;
  }
  body.inShoppingCart .product-list,
  body.inShoppingCart .col-md-9 > .row {
    grid-template-columns: 1fr !important;
  }
}