@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');
/* ============================================================
   WANT MORE HOSTING - WHMCS Panel Template
   Restrained palette: dark - white - purple
   ============================================================ */

:root{
  /* single accent */
  --purple:#7C3AED; --purple-d:#6429D6; --purple-l:#9D6BFF;
  --purple-soft:#F3EEFE; --purple-soft-2:#E7DDFC;
  /* neutrals */
  --ink:#16121F; --ink-2:#2A2338; --muted:#6B6478; --faint:#9C95AA;
  --bg:#F7F6FA; --panel:#FFFFFF; --line:#EBE8F1; --line2:#DCD7E6;
  --side:#141020; --side-2:#1B1630; --side-3:#251E3F;
  /* functional only */
  --ok:#2E9E63; --ok-bg:#E8F6EE;
  --warn:#B5811C; --warn-bg:#FBF3E2;
  --err:#C4384A; --err-bg:#FBEBED;
  --wa:#25D366;
  --shadow:0 18px 46px -26px rgba(40,20,80,.28);
  --shadow-lg:0 26px 60px -30px rgba(40,20,80,.40);
  --sidew:250px;
}
body.wm-body{ background:var(--bg)!important; font-family:'Poppins',system-ui,sans-serif!important; color:var(--ink)!important; margin:0; }
h1,h2,h3,h4,h5,.panel-title{ font-family:'Space Grotesk',sans-serif!important; letter-spacing:-.02em; color:var(--ink); }
a{ color:var(--purple); transition:.2s; } a:hover{ color:var(--purple-d); text-decoration:none; }

/* ---------- APP SHELL ---------- */
.wm-app{ display:flex; min-height:100vh; }
.wm-side{
  width:var(--sidew); flex:none; background:var(--side);
  color:#C3BCD2; display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:120;
  padding:18px 14px; overflow-y:auto; border-right:1px solid rgba(255,255,255,.06);
}
.wm-main{ flex:1; margin-left:var(--sidew); min-width:0; display:flex; flex-direction:column; }
.wm-side{ box-shadow:2px 0 24px -14px rgba(20,10,40,.5); }

.wm-brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 18px; border-bottom:1px solid rgba(255,255,255,.08); margin-bottom:12px; }
.wm-brand img,.wm-brand .wm-logo-img{ width:36px; height:auto; max-height:38px; object-fit:contain; flex:none; }
.wm-brand-txt b{ font-family:'Space Grotesk'; font-size:15.5px; color:#fff; display:block; line-height:1; }
.wm-brand-txt span{ font-size:9px; letter-spacing:.26em; color:var(--purple-l); font-weight:700; }

.wm-nav{ display:flex; flex-direction:column; gap:2px; }
.wm-nav-lbl{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:#5E5772; padding:16px 10px 6px; font-weight:700; }
.wm-nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:9px;
  color:#ADA5BE!important; font-size:14px; font-weight:600; text-decoration:none; transition:.16s;
}
.wm-nav a i{ width:18px; text-align:center; font-size:15px; color:#7E7592; transition:.16s; }
.wm-nav a:hover{ background:var(--side-3); color:#fff!important; }
.wm-nav a:hover i{ color:var(--purple-l); }
.wm-nav a.on{ background:var(--purple); color:#fff!important; }
.wm-nav a.on i{ color:#fff; }
.wm-soon{ font-style:normal; font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase;
  background:rgba(157,107,255,.18); color:var(--purple-l); padding:2px 7px; border-radius:999px; margin-left:auto; }

.wm-side-foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,.08); }
.wm-userchip{ display:flex; align-items:center; gap:10px; padding:8px; }
.wm-av{ width:34px; height:34px; border-radius:9px; background:var(--purple);
  display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; font-size:12.5px; flex:none; text-transform:uppercase; }
.wm-userchip-txt{ min-width:0; }
.wm-userchip-txt b{ display:block; font-size:12.5px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wm-userchip-txt span{ font-size:10.5px; color:#736A88; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.wm-logout{ display:flex; align-items:center; gap:9px; padding:9px 12px; border-radius:9px; margin-top:6px;
  color:#8F86A5!important; font-size:13px; font-weight:600; }
.wm-logout:hover{ background:var(--side-3); color:#fff!important; }
.wm-side-backdrop{ display:none; position:fixed; inset:0; background:rgba(12,8,22,.55); z-index:110; }
.wm-side-backdrop.show{ display:block; }

/* ---------- TOP BAR ---------- */
.wm-top{ background:var(--panel); border-bottom:1px solid var(--line); padding:14px 34px;
  display:flex; align-items:center; gap:14px; position:sticky; top:0; z-index:90; }
.wm-top-title h1{ font-size:19px!important; margin:0; }
/* persistent brand in top bar - always visible, links to portal home */
.wm-top-brand{ display:flex; align-items:center; gap:9px; text-decoration:none!important;
  padding:5px 11px 5px 6px; border-radius:11px; transition:.18s; }
.wm-top-brand:hover{ background:var(--purple-soft); }
.wm-top-brand img{ width:28px; height:auto; max-height:30px; object-fit:contain; }
.wm-top-brand-txt{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:15px;
  color:var(--ink); letter-spacing:-.01em; white-space:nowrap; }
/* page title sits after the brand, separated */
.wm-top-title{ padding-left:14px; border-left:1px solid var(--line); }
.wm-top-right{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.wm-icon-btn{ width:38px; height:38px; border-radius:10px; background:var(--bg); border:1px solid var(--line);
  color:var(--muted); display:flex; align-items:center; justify-content:center; position:relative; cursor:pointer; }
.wm-icon-btn:hover{ color:var(--purple); border-color:var(--line2); background:var(--purple-soft); }
.wm-dot{ position:absolute; top:-5px; right:-5px; background:var(--purple); color:#fff; font-style:normal;
  font-size:10px; font-weight:800; min-width:17px; height:17px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px; }
.wm-burger{ display:none; width:38px; height:38px; border-radius:10px; background:var(--bg); border:1px solid var(--line); color:var(--ink); }

/* ---------- BUTTONS ---------- */
.wm-btn{ display:inline-flex; align-items:center; gap:8px; padding:11px 20px; border-radius:11px;
  font-weight:700; font-size:14.5px; text-decoration:none!important; transition:.2s; border:0; cursor:pointer; }
.wm-btn-sm{ padding:9px 16px; font-size:13.5px; }
.wm-btn-primary{ background:var(--purple); color:#fff!important; }
.wm-btn-primary:hover{ background:var(--purple-d); transform:translateY(-1px); color:#fff!important; }
.wm-btn-white{ background:#fff; color:var(--purple)!important; }
.wm-btn-white:hover{ transform:translateY(-1px); color:var(--purple-d)!important; }
.wm-btn-gold{ background:rgba(255,255,255,.14); border:1.5px solid rgba(255,255,255,.34); color:#fff!important; }
.wm-btn-gold:hover{ background:rgba(255,255,255,.22); color:#fff!important; }
.wm-btn-ghost{ background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.32); color:#fff!important; }
.wm-btn-outline{ background:transparent; border:1.5px solid var(--line2); color:var(--ink)!important; }
.wm-btn-outline:hover{ border-color:var(--purple); color:var(--purple)!important; background:var(--purple-soft); }
.wm-btn-wa{ background:var(--wa); color:#fff!important; }
.wm-btn-wa:hover{ filter:brightness(1.05); transform:translateY(-1px); color:#fff!important; }

/* ---------- CONTENT ---------- */
.wm-content{ padding:26px 34px 44px; flex:1; }
.wm-crumb{ margin-bottom:16px; font-size:13px; }
.wm-crumb .breadcrumb{ background:transparent!important; padding:0!important; margin:0!important; font-size:13px; }
.wm-dash{ max-width:1240px; margin-left:auto; margin-right:auto; width:100%; }

/* hero - deep dark with subtle purple */
.wm-hero{
  background:linear-gradient(120deg,var(--side) 0%,var(--side-2) 52%,#2E2151 100%);
  border-radius:18px; padding:34px 36px; color:#fff; margin-bottom:32px;
  display:flex; align-items:center; gap:26px; flex-wrap:wrap; position:relative; overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.wm-hero::after{ content:''; position:absolute; width:420px; height:420px; border-radius:50%; right:-140px; top:-180px;
  background:radial-gradient(circle,rgba(124,58,237,.45),transparent 68%); pointer-events:none; }
.wm-hero-text{ position:relative; z-index:2; flex:1 1 360px; }
.wm-eyebrow{ display:inline-block; font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--purple-l); margin-bottom:10px; }
.wm-hero h2{ font-size:clamp(24px,3.2vw,34px)!important; color:#fff!important; margin:0 0 10px; }
.wm-gold{ color:var(--purple-l); }
.wm-hero p{ color:#B6AEC8; margin:0; font-size:15.5px; }
.wm-hero-actions{ position:relative; z-index:2; display:flex; gap:11px; flex-wrap:wrap; }

/* section head */
.wm-sec{ display:flex; align-items:center; gap:14px; margin:34px 0 18px; }
.wm-sec h3{ font-size:17px!important; margin:0; color:var(--ink); }
.wm-sec-line{ flex:1; height:1px; background:var(--line); }

/* ---------- TILES (uniform, restrained) ---------- */
.wm-tiles{ display:grid; grid-template-columns:repeat(6,1fr); gap:13px; }
.wm-tile{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:20px 14px;
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:3px;
  color:var(--ink)!important; text-decoration:none!important; transition:.22s; }
.wm-tile:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--purple-soft-2); color:var(--ink)!important; }
.wm-tile-ico{ width:48px; height:48px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  font-size:19px; margin-bottom:9px; background:var(--purple-soft); color:var(--purple); transition:.22s; }
.wm-tile:hover .wm-tile-ico{ background:var(--purple); color:#fff; }
/* all accents unified - colour reserved for meaning */
.i-purple,.i-pink,.i-gold,.i-blue,.i-slate{ background:var(--purple-soft); color:var(--purple); }
.i-green{ background:var(--ok-bg); color:var(--ok); }
.i-wa{ background:#E4F8EC; color:var(--wa); }
.i-ai{ background:var(--purple); color:#fff; }
.wm-tile:hover .i-wa{ background:var(--wa); color:#fff; }
.wm-tile:hover .i-green{ background:var(--ok); color:#fff; }
.wm-tile b{ font-size:14.5px; font-weight:700; }
.wm-tile span{ font-size:12px; color:var(--muted); }

/* ---------- CARDS ---------- */
.wm-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.wm-card{ background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 22px;
  color:var(--ink)!important; text-decoration:none!important; transition:.24s; display:flex; flex-direction:column; }
.wm-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--purple-soft-2); color:var(--ink)!important; }
.wm-card-ico{ width:48px; height:48px; border-radius:13px; background:var(--purple-soft); color:var(--purple);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:15px; transition:.24s; }
.wm-card:hover .wm-card-ico{ background:var(--purple); color:#fff; }
.wm-card h4{ font-size:18px!important; margin:0 0 7px; }
.wm-card p{ color:var(--muted); font-size:14px; margin:0 0 16px; flex:1; }
.wm-card-cta{ font-weight:700; font-size:13.5px; color:var(--purple); }
.wm-card-cta i{ margin-left:5px; transition:.2s; }
.wm-card:hover .wm-card-cta i{ transform:translateX(4px); }

/* banner */
.wm-banner{ margin-top:38px; background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:26px 30px; display:flex; align-items:center; gap:22px; flex-wrap:wrap; }
.wm-banner h4{ font-size:19px!important; margin:0 0 5px; }
.wm-banner p{ color:var(--muted); margin:0; font-size:14px; }
.wm-banner > div:first-child{ flex:1 1 300px; }
.wm-banner-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* ---------- WHMCS CORE ---------- */
.panel,.card,.well{ background:var(--panel)!important; border:1px solid var(--line)!important; border-radius:14px!important;
  box-shadow:0 4px 20px -16px rgba(40,20,80,.30); overflow:hidden; margin-bottom:18px; }
.panel-heading,.card-header{ background:var(--panel)!important; border-bottom:1px solid var(--line)!important;
  border-radius:0!important; font-weight:700; font-family:'Space Grotesk',sans-serif!important;
  font-size:15px; padding:16px 20px!important; color:var(--ink)!important; letter-spacing:-.01em;
  display:flex; align-items:center; gap:10px; }
.panel-heading::before{ content:''; width:3px; height:16px; border-radius:3px; background:var(--purple); flex:none; }
.panel-body,.card-body{ padding:20px!important; }
.panel-body > .table:only-child,.panel-body > .table-responsive:only-child{ margin:-20px; width:calc(100% + 40px); }
.panel-footer{ background:var(--bg)!important; border-top:1px solid var(--line)!important; padding:14px 20px!important; }
/* tables inside panels sit flush */
.panel > .table,.panel > .table-responsive > .table{ margin-bottom:0; }
.table > thead > tr > th:first-child,.table > tbody > tr > td:first-child{ padding-left:20px; }
.table > thead > tr > th:last-child,.table > tbody > tr > td:last-child{ padding-right:20px; }
.table > tbody > tr > td{ padding-top:14px; padding-bottom:14px; }
.table > thead > tr > th{ padding-top:13px; padding-bottom:13px; }
.panel-primary>.panel-heading{ background:var(--purple)!important; color:#fff!important; border:0!important; }
.btn{ border-radius:10px!important; font-weight:700!important; font-family:'Poppins',sans-serif!important;
  padding:11px 20px; border:0; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center;
  gap:8px; line-height:1.2; vertical-align:middle; text-align:center; }
.btn + .btn{ margin-left:10px; }
.btn-sm{ padding:8px 15px!important; font-size:13.5px!important; }
.btn-lg{ padding:14px 28px!important; font-size:16px!important; }
.btn-block{ display:flex!important; width:100%; margin-left:0!important; }
.btn-block + .btn-block{ margin-top:10px; }
/* button groups / form actions never collide */
.form-group .btn,.panel-body > .btn,.text-center > .btn{ margin-bottom:0; }
.wm-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.wm-actions .btn{ margin-left:0!important; }
.btn-primary,.btn-info{ background:var(--purple)!important; border:0!important; color:#fff!important; }
.btn-primary:hover,.btn-info:hover{ background:var(--purple-d)!important; transform:translateY(-1px); }
.btn-default,.btn-secondary{ background:var(--bg)!important; border:1.5px solid var(--line2)!important; color:var(--ink)!important; }
.btn-default:hover{ border-color:var(--purple)!important; color:var(--purple)!important; background:var(--purple-soft)!important; }
.btn-success{ background:var(--ok)!important; border:0!important; }
.btn-warning{ background:var(--warn)!important; border:0!important; color:#fff!important; }
.btn-danger{ background:var(--err)!important; border:0!important; }
.form-control,input[type=text],input[type=email],input[type=password],select,textarea{
  border:1.5px solid var(--line2)!important; border-radius:10px!important; padding:11px 14px!important; height:auto!important;
  font-family:'Poppins',sans-serif!important; font-size:14.5px!important; background:#fff!important; box-shadow:none!important; }
.form-control:focus,select:focus,textarea:focus{ border-color:var(--purple)!important; box-shadow:0 0 0 3px rgba(124,58,237,.13)!important; outline:0!important; }
label,.control-label{ font-weight:600; color:var(--muted); font-size:13px; margin-bottom:7px; }
.form-group{ margin-bottom:18px; }
.form-group:last-child{ margin-bottom:0; }
select.form-control{ appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6478' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat!important; background-position:right 13px center!important; background-size:16px!important; padding-right:38px!important; }
.table>thead>tr>th{ background:var(--bg)!important; border-bottom:2px solid var(--line2)!important; color:var(--muted)!important;
  font-size:11.5px; text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.table>tbody>tr>td{ border-color:var(--line)!important; vertical-align:middle; }
.table-hover>tbody>tr:hover{ background:var(--purple-soft)!important; }
.list-group-item{ border-color:var(--line)!important; font-weight:500; }
.list-group-item:hover{ background:var(--purple-soft)!important; color:var(--purple)!important; }
.list-group-item.active{ background:var(--purple)!important; border-color:transparent!important; color:#fff!important; }
.sidebar .panel{ border-radius:14px!important; }
.alert{ border-radius:11px!important; border:0!important; }
.alert-success{ background:var(--ok-bg)!important; color:var(--ok)!important; }
.alert-info{ background:var(--purple-soft)!important; color:var(--purple)!important; }
.alert-warning{ background:var(--warn-bg)!important; color:var(--warn)!important; }
.alert-danger{ background:var(--err-bg)!important; color:var(--err)!important; }
.label,.badge{ border-radius:999px!important; padding:5px 12px!important; font-weight:700; font-size:11.5px; }
.label-success,.badge-success{ background:var(--ok-bg)!important; color:var(--ok)!important; }
.label-warning,.badge-warning{ background:var(--warn-bg)!important; color:var(--warn)!important; }
.label-danger,.badge-danger{ background:var(--err-bg)!important; color:var(--err)!important; }
.label-info,.badge-info{ background:var(--purple-soft)!important; color:var(--purple)!important; }
.nav-tabs>li.active>a{ border-bottom:3px solid var(--purple)!important; color:var(--purple)!important; background:transparent!important; font-weight:700; }
.nav-tabs>li>a{ border:0!important; color:var(--muted)!important; font-weight:600; }
.progress-bar{ background:var(--purple)!important; }
.pagination>.active>a{ background:var(--purple)!important; border-color:transparent!important; }

/* footer - aligned with page content, no drifting */
.wm-foot{
  background:var(--panel)!important;
  border-top:1px solid var(--line)!important;
  padding:18px 34px!important;
  margin-top:auto;
  width:100%;
}
.wm-foot-in{
  display:flex; align-items:center; gap:12px 26px; flex-wrap:wrap;
  max-width:1240px; width:100%;
  font-size:13px; color:var(--muted);
}
.wm-foot-copy{ white-space:nowrap; }
.wm-foot-links{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none; }
.wm-foot-links a{ color:var(--muted); font-size:13px; white-space:nowrap; }
.wm-foot-links a:hover{ color:var(--purple); }
.wm-foot-lang{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  background:var(--bg); border:1px solid var(--line); border-radius:9px;
  padding:7px 13px; font-size:12.5px; font-weight:600; color:var(--muted);
  font-family:'Poppins',sans-serif; cursor:pointer; white-space:nowrap;
}
.wm-foot-lang:hover{ border-color:var(--purple); color:var(--purple); }
.wm-foot-lang i{ font-size:12px; }
@media(max-width:900px){
  .wm-foot{ padding:16px!important; }
  .wm-foot-in{ gap:10px 18px; }
  .wm-foot-lang{ margin-left:0; }
}
@media(max-width:520px){
  .wm-foot-in{ flex-direction:column; align-items:flex-start; }
  .wm-foot-links{ gap:14px; }
}

/* ---------- AI CONSOLE ---------- */
.wm-ai-fab{ position:fixed; right:22px; bottom:22px; z-index:130; display:flex; align-items:center; gap:9px;
  background:var(--side-2); color:#fff; border:1px solid rgba(157,107,255,.35); border-radius:999px; padding:13px 21px;
  font-weight:700; font-size:14.5px; box-shadow:0 16px 38px -14px rgba(20,10,40,.7); cursor:pointer; font-family:'Poppins',sans-serif; }
.wm-ai-fab i{ color:var(--purple-l); }
.wm-ai-fab:hover{ background:var(--purple); border-color:transparent; transform:translateY(-2px); }
.wm-ai-fab:hover i{ color:#fff; }
.wm-ai-panel{ position:fixed; right:22px; bottom:22px; width:min(410px,calc(100vw - 32px)); max-height:min(560px,calc(100vh - 44px));
  background:var(--panel); border:1px solid var(--line2); border-radius:18px; box-shadow:0 40px 90px -30px rgba(20,10,40,.5);
  z-index:140; display:none; flex-direction:column; overflow:hidden; }
.wm-ai-panel.open{ display:flex; }
.wm-ai-head{ padding:15px 18px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:11px; background:var(--purple-soft); }
.wm-ai-orb{ width:32px; height:32px; border-radius:9px; background:var(--purple); color:#fff; display:flex; align-items:center; justify-content:center; }
.wm-ai-head b{ font-family:'Space Grotesk'; font-size:14.5px; display:block; }
.wm-ai-status{ font-size:11px; color:var(--purple); font-weight:700; }
.wm-ai-x{ margin-left:auto; background:transparent; border:0; color:var(--muted); font-size:22px; width:30px; height:30px; border-radius:8px; cursor:pointer; }
.wm-ai-body{ padding:24px 22px 26px; overflow-y:auto; }
.wm-ai-soon{ text-align:center; }
.wm-ai-soon-ico{ width:58px; height:58px; border-radius:16px; background:var(--purple); color:#fff; font-size:24px;
  display:flex; align-items:center; justify-content:center; margin:0 auto 16px; }
.wm-ai-soon h3{ font-size:18px!important; margin:0 0 10px; }
.wm-ai-soon p{ color:var(--muted); font-size:14px; margin:0 0 18px; }
.wm-ai-examples{ display:grid; gap:8px; margin-bottom:20px; }
.wm-ai-examples span{ background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:9px 13px;
  font-size:12.5px; color:var(--muted); font-style:italic; }

/* ---------- RESPONSIVE ---------- */
/* ---- large desktop ---- */
@media(min-width:1600px){ .wm-dash{ max-width:1400px; } .wm-content{ padding:30px 44px 50px; } }
/* ---- laptop ---- */
@media(max-width:1280px){
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(3,1fr); }
  .wm-cards{ grid-template-columns:repeat(3,1fr); }
}
/* ---- tablet ---- */
@media(max-width:1024px){
  :root{ --sidew:220px; }
  .wm-content{ padding:22px 24px 40px; }
  .wm-top{ padding:13px 24px; }
  .wm-foot{ padding:18px 24px!important; }
  .wm-cards{ grid-template-columns:repeat(2,1fr); }
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(3,1fr); }
  .wm-hero{ padding:30px 28px; }
}
@media(max-width:900px){
  .wm-side{ transform:translateX(-100%); transition:transform .26s; }
  .wm-side.open{ transform:none; }
  .wm-main{ margin-left:0; }
  .wm-burger{ display:flex; align-items:center; justify-content:center; }
  .wm-top{ padding:11px 16px; }
  .wm-top-title{ display:none; }
  .wm-content{ padding:18px 16px 34px; }
}
/* ---- mobile ---- */
@media(max-width:640px){
  .wm-hero{ padding:24px 18px; border-radius:14px; }
  /* buttons stack cleanly, never overlap */
  .btn{ white-space:normal; }
  .btn + .btn{ margin-left:0; }
  .panel-body .btn,.text-center .btn{ width:100%; margin-bottom:10px; }
  .panel-body .btn:last-child,.text-center .btn:last-child{ margin-bottom:0; }
  .wm-actions{ flex-direction:column; align-items:stretch; }
  .wm-actions .btn{ width:100%; }
  .panel-body,.card-body{ padding:16px!important; }
  .panel-body > .table:only-child,.panel-body > .table-responsive:only-child{ margin:-16px; width:calc(100% + 32px); }
  .panel-heading,.card-header{ padding:14px 16px!important; font-size:14.5px; }
  .table > thead > tr > th:first-child,.table > tbody > tr > td:first-child{ padding-left:16px; }
  .table > thead > tr > th:last-child,.table > tbody > tr > td:last-child{ padding-right:16px; }
  .table{ font-size:13.5px; }
  .form-control,input,select,textarea{ font-size:16px!important; } /* prevents iOS zoom */
  .wm-hero-actions{ width:100%; }
  .wm-hero-actions .wm-btn{ flex:1; justify-content:center; }
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .wm-cards{ grid-template-columns:1fr; }
  .wm-ai-fab span{ display:none; }
  .wm-ai-fab{ padding:15px; border-radius:50%; }
  .wm-banner-actions{ width:100%; }
  .wm-banner-actions .wm-btn{ flex:1; justify-content:center; }
}

/* ============================================================
   OVERRIDE: neutralise the old pink theme if custom.css lingers
   ============================================================ */
:root{
  --wm-pink:#7C3AED; --wm-pink-l:#9D6BFF;
  --wm-purple:#7C3AED; --wm-purple-l:#9D6BFF;
  --wm-gold:#7C3AED; --wm-gold-l:#9D6BFF;
  --wm-grad:linear-gradient(120deg,#7C3AED,#6429D6);
}

/* ============================================================
   FALLBACK LAYER
   Makes WHMCS components render correctly even if the core
   template CSS (all.min.css / Bootstrap) fails to load.
   ============================================================ */

/* --- utility classes WHMCS relies on --- */
/* w-hidden must NOT be !important: WHMCS JS reveals domain-lookup
   results, alerts and loaders by toggling it. !important blocks that. */
.w-hidden{ display:none; }
#accountNotificationsContent{ display:none; }
#generate-password-modal{ display:none; }
.hidden{ display:none!important; }
/* domain lookup results must always be able to show */
.domain-lookup-result:not(.w-hidden),
.domain-lookup-result-container:not(.w-hidden),
#domain-lookup-primary-result:not(.w-hidden),
.domain-checker-result:not(.w-hidden),
.domain-suggestion:not(.w-hidden){ display:block; }
.sr-only{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.clearfix::after{ content:''; display:table; clear:both; }
.text-center{ text-align:center; } .text-right{ text-align:right; } .text-left{ text-align:left; }
.float-right{ float:right; } .float-left{ float:left; }
.mb-0{ margin-bottom:0!important; } .mt-0{ margin-top:0!important; }

/* --- BUTTONS: stop full-width stretching --- */
.btn,
a.btn,
button.btn,
input[type=submit].btn{
  display:inline-flex!important; width:auto!important; max-width:100%;
  align-items:center; justify-content:center; white-space:nowrap;
}
.btn.btn-block,.btn-block{ display:flex!important; width:100%!important; }
form .btn{ vertical-align:middle; }

/* --- PANELS / CARDS structure --- */
.panel{ display:block; }
.panel-heading{ display:flex; align-items:center; }
.panel-body{ display:block; }
.panel > .panel-body:empty{ display:none; }

/* --- COLLAPSE (Bootstrap) --- */
.collapse:not(.show){ display:none; }
.collapse.show{ display:block; }
.collapsing{ height:0; overflow:hidden; transition:height .3s ease; }
/* collapsible panel headers get an affordance */
.panel-heading[data-toggle="collapse"],
.panel-heading a[data-toggle="collapse"]{ cursor:pointer; }

/* --- BREADCRUMBS: inline, not stacked --- */
.breadcrumb{ display:flex!important; flex-wrap:wrap; align-items:center; gap:8px;
  list-style:none; padding:0!important; margin:0 0 4px!important; background:transparent!important;
  font-size:13px; color:var(--faint); }
.breadcrumb li,.breadcrumb-item{ display:inline-flex; align-items:center; }
.breadcrumb li + li::before,
.breadcrumb-item + .breadcrumb-item::before{ content:'\203A'; margin-right:8px; color:var(--faint); }
.breadcrumb a{ color:var(--muted); }
.breadcrumb a:hover{ color:var(--purple); }
.breadcrumb .active{ color:var(--ink); }

/* --- LISTS: kill raw bullets in UI chrome --- */
.nav,.navbar-nav,.list-inline,.pagination,.dropdown-menu,
.client-alerts,.list-unstyled,.intl-tel-input .country-list{
  list-style:none!important; padding-left:0!important; margin-left:0!important; }
.list-inline{ display:flex; flex-wrap:wrap; gap:16px; }
.list-inline-item{ display:inline-flex; }
.pagination{ display:flex; gap:6px; align-items:center; }
.pagination li a{ display:inline-flex; padding:7px 12px; border:1px solid var(--line);
  border-radius:9px; color:var(--muted); font-size:13.5px; }
.pagination li a:hover{ border-color:var(--purple); color:var(--purple); }

/* --- phone country dropdown (intl-tel-input) --- */
.intl-tel-input .country-list{ position:absolute; z-index:800; max-height:260px; overflow-y:auto;
  background:var(--panel); border:1px solid var(--line2); border-radius:12px;
  box-shadow:var(--shadow-lg); padding:6px!important; min-width:280px; }
.intl-tel-input .country-list{ display:block; }
/* This plugin opens the list by REMOVING a .hide class — it has no .show class.
   An earlier `:not(.show)` rule here matched always and kept the dropdown
   permanently closed, so the country could never be changed. Do not reintroduce it. */
.intl-tel-input .country-list.hide{ display:none; }
.intl-tel-input .country{ padding:8px 12px; border-radius:8px; font-size:14px; cursor:pointer; }
.intl-tel-input .country:hover,.intl-tel-input .country.highlight{ background:var(--purple-soft); }
.intl-tel-input .country-list .divider{ height:1px; background:var(--line); margin:6px 0; }
.intl-tel-input{ position:relative; display:block; }
.intl-tel-input .flag-container{ position:absolute; top:0; bottom:0; right:0; padding:1px; }

/* --- TABLES --- */
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{ text-align:left; }
.table-responsive{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
/* DataTables chrome */
.dataTables_wrapper{ font-size:13.5px; }
.dataTables_filter,.dataTables_length{ display:inline-flex; align-items:center; gap:9px; margin-bottom:12px; }
.dataTables_filter input,.dataTables_length select{ margin-left:6px; }
.dataTables_info{ color:var(--muted); font-size:13px; margin-top:10px; }
.dataTables_paginate{ margin-top:10px; }

/* --- FORMS --- */
.form-inline{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.input-group{ display:flex; align-items:stretch; }
.input-group .form-control{ flex:1; min-width:0; }
.input-group-prepend,.input-group-append{ display:flex; }
.input-group-text{ display:flex; align-items:center; padding:0 13px; background:var(--bg);
  border:1.5px solid var(--line2); font-size:13.5px; color:var(--muted); }
.input-group > :first-child{ border-top-right-radius:0!important; border-bottom-right-radius:0!important; }
.input-group > :last-child{ border-top-left-radius:0!important; border-bottom-left-radius:0!important; }

/* --- GRID fallback (basic) --- */
.row{ display:flex; flex-wrap:wrap; margin-left:-9px; margin-right:-9px; }
.row > [class*="col-"]{ padding-left:9px; padding-right:9px; }
.col,.col-12{ flex:0 0 100%; max-width:100%; }
.col-6{ flex:0 0 50%; max-width:50%; }
.col-4{ flex:0 0 33.333%; max-width:33.333%; }
.col-3{ flex:0 0 25%; max-width:25%; }
@media(min-width:992px){
  .col-lg-4{ flex:0 0 33.333%; max-width:33.333%; }
  .col-lg-8{ flex:0 0 66.666%; max-width:66.666%; }
  .col-lg-6{ flex:0 0 50%; max-width:50%; }
}
@media(min-width:1200px){
  .col-xl-3{ flex:0 0 25%; max-width:25%; }
  .col-xl-9{ flex:0 0 75%; max-width:75%; }
}
@media(max-width:991px){ .d-none.d-lg-block{ display:none!important; } }
.container,.container-fluid{ width:100%; }

/* --- HIDE WHMCS BRANDING from customers --- */
.powered-by,
#footer .powered-by,
a[href*="whmcs.com"],
a[href*="WHMCompleteSolution"]{ display:none!important; }
/* the "Powered by WHMCompleteSolution" text node sits in a centered p/div */
.wm-content p:has(> a[href*="whmcs.com"]),
.wm-content div:has(> a[href*="whmcs.com"]){ display:none!important; }

/* --- shortcuts / stat links on client home --- */
.wm-content .btn-group{ display:inline-flex; gap:8px; flex-wrap:wrap; }

/* ============================================================
   LAYOUT LOCK - force the app shell to stack correctly
   Prevents the footer/content rendering side-by-side
   ============================================================ */
.wm-app{ display:flex!important; flex-direction:row!important; align-items:stretch;
  min-height:100vh; width:100%; max-width:100vw; overflow-x:hidden; }
.wm-main{
  display:flex!important; flex-direction:column!important;
  flex:1 1 auto!important; width:auto!important; min-width:0!important; max-width:100%;
}
.wm-main > .wm-top,
.wm-main > .wm-content,
.wm-main > .wm-foot,
.wm-main > section,
.wm-main > footer,
.wm-main > header{
  width:100%!important; max-width:100%!important; flex:0 0 auto!important;
}
.wm-main > .wm-content{ flex:1 1 auto!important; }
.wm-content > .container,
.wm-content > .container-fluid{
  width:100%!important; max-width:1240px!important;
  padding-left:0!important; padding-right:0!important;
  margin-left:auto!important; margin-right:auto!important;
}
@media(min-width:1600px){
  .wm-content > .container,
  .wm-content > .container-fluid{ max-width:1400px!important; }
}
/* breadcrumb + page sections align with the same centred column */
.wm-crumb{ max-width:1240px; margin-left:auto; margin-right:auto; width:100%; }
@media(min-width:1600px){ .wm-crumb{ max-width:1400px; } }
.wm-foot{ margin-top:auto; }
.wm-foot-in{ width:100%; }

/* domain search block on the client home */
.wm-domain-search{ background:var(--panel); border:1px solid var(--line);
  border-radius:16px; padding:24px; margin-bottom:24px; }
.wm-domain-search h2,.wm-domain-search h1{ font-size:22px!important; margin:0 0 14px; }
.wm-domain-search form{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.wm-domain-search .form-control{ flex:1 1 260px; min-width:0; }
.wm-domain-search .btn{ flex:0 0 auto; }
@media(max-width:640px){
  .wm-domain-search{ padding:18px; }
  .wm-domain-search form{ flex-direction:column; align-items:stretch; }
  .wm-domain-search .btn{ width:100%; }
}

/* ============================================================
   UX FIXES
   1. full-width inner pages   2. scrollable tables on mobile
   3. whole panel header clickable to expand/collapse
   ============================================================ */

/* ---- 1. FULL WIDTH on client-area pages ---- */
/* .wm-dash keeps its reading width on the dashboard only */
.wm-content > .container,
.wm-content > .container-fluid,
.wm-content > .row,
.wm-content > form,
.wm-content > section{
  width:100%!important; max-width:100%!important;
  margin-left:0!important; margin-right:0!important;
  padding-left:0!important; padding-right:0!important;
}
/* inner pages (not the dashboard) fill the screen */
body:not(.wm-home) .wm-content{ max-width:100%!important; }
.wm-content .primary-content{ width:100%!important; max-width:100%!important; }
/* only the portal dashboard keeps the narrower comfortable width */
.wm-dash{ max-width:1240px; width:100%; }
@media(min-width:1600px){ .wm-dash{ max-width:1400px; } }

/* ---- 2. TABLES: horizontal scroll instead of overflowing ---- */
.table-responsive,
.dataTables_wrapper,
.panel-body > .table-responsive{
  overflow-x:auto!important;
  -webkit-overflow-scrolling:touch;
  width:100%;
  max-width:100%;
}
/* any bare table gets a scroll container behaviour too */
.wm-content .table{ min-width:100%; }
@media(max-width:820px){
  .wm-content .table{ min-width:640px; }      /* forces the scroll rather than squashing */
  .table-responsive{ border:0; margin-bottom:4px; }
  /* subtle hint that there is more to the right */
  .table-responsive{
    background:
      linear-gradient(to right, var(--panel) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--panel) 70%) 100% 0,
      radial-gradient(farthest-side at 0 50%, rgba(40,20,80,.14), transparent),
      radial-gradient(farthest-side at 100% 50%, rgba(40,20,80,.14), transparent) 100% 0;
    background-repeat:no-repeat;
    background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment:local, local, scroll, scroll;
  }
  /* keep status/date columns readable */
  .wm-content .table td,.wm-content .table th{ white-space:nowrap; }
}

/* ---- 3. WHOLE PANEL HEADER CLICKABLE ---- */
/* stretch the collapse link across the entire heading */
.panel-heading a[data-toggle="collapse"],
.panel-heading a[data-bs-toggle="collapse"],
.card-header a[data-toggle="collapse"]{
  display:flex!important;
  align-items:center;
  gap:10px;
  width:100%;
  margin:-16px -20px;          /* cancel the heading padding */
  padding:16px 20px;           /* re-apply it inside the link  */
  color:var(--ink)!important;
  text-decoration:none!important;
  border-radius:0;
}
.panel-heading:has(a[data-toggle="collapse"]),
.card-header:has(a[data-toggle="collapse"]){
  cursor:pointer;
  padding:16px 20px!important;
  transition:background .16s;
}
.panel-heading:has(a[data-toggle="collapse"]):hover,
.card-header:has(a[data-toggle="collapse"]):hover{
  background:var(--purple-soft)!important;
}
/* clear chevron on the right, rotates when open */
.panel-heading a[data-toggle="collapse"]::after{
  content:'\25BE';
  margin-left:auto;
  font-size:13px;
  color:var(--purple);
  transition:transform .22s;
}
.panel-heading a[data-toggle="collapse"][aria-expanded="true"]::after,
.panel-heading a[data-toggle="collapse"]:not(.collapsed)::after{
  transform:rotate(180deg);
}
/* hide the original tiny arrow icon so there is only one indicator */
.panel-heading a[data-toggle="collapse"] > .fa-chevron-down,
.panel-heading a[data-toggle="collapse"] > .fa-caret-down,
.panel-heading a[data-toggle="collapse"] > .collapse-icon{ display:none!important; }

/* bigger tap target on mobile */
@media(max-width:640px){
  .panel-heading a[data-toggle="collapse"]{
    margin:-14px -16px; padding:15px 16px;
  }
  .panel-heading:has(a[data-toggle="collapse"]){ padding:14px 16px!important; }
}

/* ============================================================
   TOP BAR OVERFLOW FIX
   The page title would not shrink, pushing "New service" off
   the right edge. Title now truncates; controls never clip.
   ============================================================ */
.wm-top{
  flex-wrap:nowrap!important;
  overflow:visible!important;
  gap:12px;
}
/* title takes the leftover room and truncates instead of pushing */
.wm-top-title{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden;
}
.wm-top-title h1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
/* brand and controls hold their size */
.wm-top-brand{ flex:0 0 auto!important; }
.wm-top-right{
  flex:0 0 auto!important;
  margin-left:auto;
  white-space:nowrap;
}
.wm-top-right .wm-btn{ flex:0 0 auto; }

/* laptop: drop the button label, keep the icon */
@media(max-width:1180px){
  .wm-top-right .wm-btn-sm span{ display:none; }
  .wm-top-right .wm-btn-sm{ padding:9px 12px; }
}
/* tablet: hide the page title entirely, brand + controls only */
@media(max-width:1024px){
  .wm-top-title{ display:none!important; }
}
/* mobile: tighten spacing so nothing clips */
@media(max-width:520px){
  .wm-top{ padding:11px 12px; gap:8px; }
  .wm-top-brand{ padding:4px 6px; }
  .wm-top-brand-txt{ font-size:14px; }
  .wm-icon-btn{ width:34px; height:34px; }
}

/* ============================================================
   TOP BAR OVERFLOW FIX
   Title truncates; brand and right-hand controls never get cut.
   ============================================================ */
.wm-top{
  flex-wrap:nowrap!important;
  overflow:visible;
  min-width:0;
}
.wm-top-brand{ flex:0 0 auto!important; }
.wm-top-title{
  flex:1 1 auto!important;
  min-width:0!important;
  overflow:hidden;
}
.wm-top-title h1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}
.wm-top-right{
  flex:0 0 auto!important;
  margin-left:auto!important;
  white-space:nowrap;
}
.wm-top-right .wm-btn{ flex:0 0 auto; }

/* below 1200px the button label shortens rather than the button vanishing */
@media(max-width:1200px){
  .wm-top-title h1{ font-size:17px!important; }
}
/* below 1024px drop the page title, keep brand + all controls */
@media(max-width:1024px){
  .wm-top-title{ display:none!important; }
}
/* small screens: button becomes icon-only so it always fits */
@media(max-width:560px){
  .wm-top{ gap:8px; }
  .wm-top-right{ gap:7px; }
  .wm-top-right .wm-btn span{ display:none; }
  .wm-top-right .wm-btn{ padding:10px 13px; }
  .wm-top-brand{ padding:4px 8px 4px 4px; }
  .wm-top-brand-txt{ font-size:14px; }
}

/* ---- TOP BAR: stop the page title pushing the right side off ---- */
.wm-top{
  flex-wrap:nowrap!important;
  overflow:hidden;
}
.wm-top-brand{ flex:0 0 auto; }
.wm-top-title{
  flex:1 1 auto!important;
  min-width:0!important;          /* lets it shrink instead of overflowing */
  overflow:hidden;
}
.wm-top-title h1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;          /* long titles trail off cleanly */
  max-width:100%;
}
.wm-top-right{
  flex:0 0 auto!important;         /* never gets squeezed or pushed out */
  margin-left:auto;
}
/* tighten spacing on smaller desktops so nothing clips */
@media(max-width:1200px){
  .wm-top{ padding:13px 20px; gap:10px; }
  .wm-top-right{ gap:7px; }
}
@media(max-width:1024px){
  .wm-top-title{ padding-left:10px; }
  .wm-btn-sm{ padding:9px 13px; }
}
@media(max-width:820px){
  /* on small screens the New service label collapses to just the + icon */
  .wm-top-right .wm-btn-primary span{ display:none; }
  .wm-top-right .wm-btn-primary{ padding:9px 12px; }
}

/* ============================================================
   RESPONSIVE SYSTEM - MOBILE FIRST
   Base styles target 360px. Everything scales up via min-width
   queries at 390 / 414 / 480 / 768 / 820 / 1024 / 1280 / 1440.
   Components restructure, not just shrink.
   ============================================================ */

/* ---------- FLUID TOKENS ---------- */
:root{
  --pad-x: clamp(14px, 4vw, 34px);       /* page gutter        */
  --gap:   clamp(10px, 2vw, 20px);       /* grid/flex gap      */
  --radius:clamp(12px, 2vw, 18px);
  --fs-h1: clamp(17px, 2.4vw, 22px);
  --fs-h2: clamp(20px, 3.4vw, 34px);
  --fs-h3: clamp(15px, 1.6vw, 18px);
  --fs-body: clamp(14px, 1.2vw, 15px);
  --sidew: 250px;
}

/* ---------- GLOBAL OVERFLOW GUARD ---------- */
html, body{ max-width:100%; overflow-x:hidden; }
*, *::before, *::after{ min-width:0; }        /* stops flex children overflowing */
img, svg, video, table{ max-width:100%; }

/* ============================================================
   TOP BAR  - restructured so nothing can ever be cut off
   ============================================================ */
.wm-top{
  display:flex; align-items:center;
  gap:clamp(8px, 1.6vw, 14px);
  padding:12px var(--pad-x);
  width:100%; max-width:100%;
  flex-wrap:nowrap;
  overflow:visible;
}
.wm-burger{ flex:0 0 auto; }
.wm-top-brand{ flex:0 0 auto; padding:4px 8px 4px 4px; }
.wm-top-brand img{ width:clamp(24px, 4vw, 28px); }
.wm-top-title{
  flex:1 1 auto; min-width:0;
  padding-left:clamp(8px, 1.4vw, 14px);
  border-left:1px solid var(--line);
  overflow:hidden;
}
.wm-top-title h1{
  font-size:var(--fs-h1)!important; margin:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wm-top-right{
  flex:0 0 auto; margin-left:auto;
  display:flex; align-items:center;
  gap:clamp(6px, 1vw, 9px);
}
.wm-icon-btn{
  flex:0 0 auto;
  width:clamp(34px, 5vw, 38px); height:clamp(34px, 5vw, 38px);
}
.wm-top-right .wm-btn{ flex:0 0 auto; white-space:nowrap; }

/* ---- 360px - 479px : the tightest case ---- */
@media (max-width: 479px){
  .wm-top-title{ display:none; }                    /* brand is enough */
  .wm-top-brand-txt{ display:none; }                /* logo only       */
  .wm-top-brand{ padding:4px; }
  .wm-top-right .wm-btn span{ display:none; }       /* icon-only CTA   */
  .wm-top-right .wm-btn{
    width:clamp(34px,5vw,38px); height:clamp(34px,5vw,38px);
    padding:0!important; border-radius:10px; justify-content:center;
  }
  .wm-top-right .wm-btn i{ margin:0; }
}
/* ---- 480px+ : CTA label returns ---- */
@media (min-width: 480px){
  .wm-top-brand-txt{ display:inline; }
  .wm-top-right .wm-btn span{ display:inline; }
  .wm-top-right .wm-btn{ width:auto; height:auto; padding:9px 15px!important; }
}
/* ---- 900px+ : page title alongside brand ---- */
@media (min-width: 900px){
  .wm-top-title{ display:block; }
}

/* ============================================================
   APP SHELL
   ============================================================ */
.wm-app{ display:flex; min-height:100vh; min-height:100dvh; width:100%; }
.wm-main{ display:flex; flex-direction:column; flex:1 1 auto; min-width:0; }
.wm-content{ padding:clamp(16px,2.5vw,26px) var(--pad-x) clamp(30px,5vw,44px); flex:1 1 auto; width:100%; }
.wm-foot{ padding:clamp(14px,2vw,18px) var(--pad-x)!important; }

/* sidebar: drawer on small, fixed from 900px */
.wm-side{
  width:min(84vw, 300px);
  transform:translateX(-100%);
  transition:transform .26s ease;
  padding:16px 12px;
}
.wm-side.open{ transform:none; }
.wm-main{ margin-left:0; }
.wm-burger{ display:flex; align-items:center; justify-content:center; }

@media (min-width: 900px){
  .wm-side{ width:var(--sidew); transform:none; padding:18px 14px; }
  .wm-main{ margin-left:var(--sidew); }
  .wm-burger{ display:none; }
  .wm-side-backdrop{ display:none!important; }
}
@media (min-width: 1280px){ :root{ --sidew:250px; } }
@media (min-width: 1440px){ :root{ --sidew:264px; } }

/* ============================================================
   DASHBOARD GRIDS - restructured per breakpoint
   ============================================================ */
.wm-dash{ width:100%; max-width:100%; }
@media (min-width:1280px){ .wm-dash{ max-width:1240px; margin-left:auto; margin-right:auto; width:100%; } }
@media (min-width:1440px){ .wm-dash{ max-width:1360px; } }

/* HERO: stacks on phones, row from tablet */
.wm-hero{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(16px,3vw,26px);
  padding:clamp(20px,4vw,34px) clamp(18px,4vw,36px);
  border-radius:var(--radius);
  margin-bottom:clamp(20px,3vw,32px);
}
.wm-hero h2{ font-size:var(--fs-h2)!important; }
.wm-hero p{ font-size:var(--fs-body); }
.wm-hero-actions{ display:flex; gap:10px; width:100%; flex-wrap:wrap; }
.wm-hero-actions .wm-btn{ flex:1 1 auto; justify-content:center; min-width:140px; }
@media (min-width:768px){
  .wm-hero{ flex-direction:row; align-items:center; }
  .wm-hero-text{ flex:1 1 auto; }
  .wm-hero-actions{ width:auto; flex-wrap:nowrap; }
  .wm-hero-actions .wm-btn{ flex:0 0 auto; min-width:0; }
}

/* TILES: 2 -> 3 -> 6 across */
.wm-tiles, .wm-tiles-sm{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(2, minmax(0,1fr));
}
@media (min-width:480px){ .wm-tiles, .wm-tiles-sm{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (min-width:820px){ .wm-tiles, .wm-tiles-sm{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:1280px){ .wm-tiles, .wm-tiles-sm{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
.wm-tile{ padding:clamp(14px,2.4vw,20px) clamp(10px,1.6vw,14px); border-radius:var(--radius); }
.wm-tile-ico{ width:clamp(40px,7vw,48px); height:clamp(40px,7vw,48px); font-size:clamp(16px,2.6vw,19px); }
.wm-tile b{ font-size:clamp(13px,1.4vw,14.5px); }
.wm-tile span{ font-size:clamp(11px,1.2vw,12px); }

/* CARDS: 1 -> 2 -> 3 */
.wm-cards{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:768px){ .wm-cards{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1280px){ .wm-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }
.wm-card{ padding:clamp(18px,3vw,26px) clamp(16px,2.4vw,22px); border-radius:var(--radius); }
.wm-card h4{ font-size:var(--fs-h3)!important; }

/* BANNER */
.wm-banner{
  display:flex; flex-direction:column; align-items:flex-start;
  gap:clamp(14px,2.4vw,22px);
  padding:clamp(18px,3vw,26px) clamp(16px,3vw,30px);
  border-radius:var(--radius);
  margin-top:clamp(24px,4vw,38px);
}
.wm-banner-actions{ display:flex; gap:10px; width:100%; flex-wrap:wrap; }
.wm-banner-actions .wm-btn{ flex:1 1 auto; justify-content:center; min-width:150px; }
@media (min-width:768px){
  .wm-banner{ flex-direction:row; align-items:center; }
  .wm-banner-actions{ width:auto; margin-left:auto; }
  .wm-banner-actions .wm-btn{ flex:0 0 auto; min-width:0; }
}

/* SECTION HEADS */
.wm-sec{ margin:clamp(22px,3.4vw,34px) 0 clamp(12px,1.8vw,18px); }
.wm-sec h3{ font-size:var(--fs-h3)!important; }

/* ============================================================
   WHMCS COMPONENTS - responsive behaviour
   ============================================================ */
.panel, .card{ border-radius:var(--radius)!important; margin-bottom:var(--gap); }
.panel-body, .card-body{ padding:clamp(14px,2.4vw,20px)!important; }
.panel-heading, .card-header{ padding:clamp(13px,2vw,16px) clamp(14px,2.4vw,20px)!important; font-size:clamp(14px,1.5vw,15px); }

/* forms stack on phones, inline from tablet */
.form-group{ margin-bottom:clamp(14px,2vw,18px); }
.form-control, input, select, textarea{
  font-size:16px!important;            /* stops iOS zoom on focus */
  padding:clamp(10px,1.6vw,11px) clamp(12px,1.8vw,14px)!important;
}
@media (min-width:768px){
  .form-control, input, select, textarea{ font-size:14.5px!important; }
}

/* buttons: full width on phones, auto from 480 */
.wm-actions{ display:flex; flex-direction:column; gap:10px; }
.wm-actions .btn{ width:100%; }
@media (min-width:480px){
  .wm-actions{ flex-direction:row; flex-wrap:wrap; align-items:center; }
  .wm-actions .btn{ width:auto; }
}
.btn{ padding:clamp(10px,1.6vw,11px) clamp(16px,2.4vw,20px); font-size:clamp(13.5px,1.4vw,14.5px); }

/* tables: scroll container, never squash */
.table-responsive{ overflow-x:auto!important; -webkit-overflow-scrolling:touch; width:100%; }
.wm-content .table{ min-width:100%; }
@media (max-width:820px){
  .wm-content .table{ min-width:620px; }
  .wm-content .table td, .wm-content .table th{ white-space:nowrap; }
}
.table > thead > tr > th{ font-size:clamp(10.5px,1.2vw,11.5px); }
.table > tbody > tr > td{ font-size:clamp(13px,1.4vw,14px); }

/* sidebars WHMCS injects on inner pages */
@media (max-width:899px){
  .wm-content .sidebar{ margin-bottom:var(--gap); }
  .wm-content .row > [class*="col-"]{ flex:0 0 100%; max-width:100%; }
}
@media (min-width:900px){
  .wm-content .row > .col-lg-4{ flex:0 0 32%; max-width:32%; }
  .wm-content .row > .col-lg-8{ flex:0 0 68%; max-width:68%; }
}

/* footer */
.wm-foot-in{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; width:100%; }
.wm-foot-links{ display:flex; flex-wrap:wrap; gap:clamp(12px,2vw,20px); }
.wm-foot-lang{ margin-left:0; }
@media (min-width:768px){
  .wm-foot-in{ flex-direction:row; align-items:center; gap:clamp(12px,2vw,26px); }
  .wm-foot-lang{ margin-left:auto; }
}

/* AI console */
.wm-ai-fab{ right:clamp(12px,3vw,22px); bottom:clamp(12px,3vw,22px); }
@media (max-width:479px){
  .wm-ai-fab span{ display:none; }
  .wm-ai-fab{ padding:14px; border-radius:50%; }
}
.wm-ai-panel{
  right:clamp(8px,2vw,22px); bottom:clamp(8px,2vw,22px);
  width:min(410px, calc(100vw - 16px));
  max-height:min(560px, calc(100dvh - 32px));
  border-radius:var(--radius);
}

/* order form cards */
@media (max-width:767px){
  [id^="order-"] .product{ margin-bottom:var(--gap)!important; }
}

/* touch targets never below 40px */
@media (hover:none){
  .wm-nav a, .list-group-item, .nav-tabs > li > a{ min-height:42px; display:flex; align-items:center; }
  .btn, .wm-btn{ min-height:42px; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ transition:none!important; animation:none!important; }
}

/* ============================================================
   MOBILE TABLE SCROLLING
   Services / Domains / Invoices / Tickets tables have Date and
   Status columns that crush on small screens. Let them scroll
   sideways inside their own container instead.
   ============================================================ */
@media (max-width: 900px) {

  /* make every data table scrollable inside its own box */
  .table-responsive,
  .dataTables_wrapper,
  .panel > .table-responsive,
  .panel-body > .table-responsive,
  .tab-content .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    /* subtle edge fade hints there is more to the right */
    background:
      linear-gradient(to right, var(--panel) 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), var(--panel) 70%) 100% 0,
      linear-gradient(to right, rgba(40,20,80,.10), rgba(40,20,80,0)),
      linear-gradient(to left, rgba(40,20,80,.10), rgba(40,20,80,0)) 100% 0;
    background-repeat: no-repeat;
    background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  /* tables keep their natural width so columns stay readable */
  .table-responsive > .table,
  .dataTables_wrapper .table,
  .table-responsive table {
    min-width: 640px !important;
    width: auto !important;
    margin-bottom: 0 !important;
  }

  /* never wrap Date / Status / Amount into unreadable stacks */
  .table td, .table th { white-space: nowrap !important; }
  /* allow the first column (domain / product name) to wrap */
  .table td:first-child { white-space: normal !important; min-width: 150px; }

  /* status badges stay compact */
  .table .label, .table .badge { white-space: nowrap; }

  /* DataTables controls stack rather than overflow */
  .dataTables_wrapper .row { flex-direction: column; }
  .dataTables_filter, .dataTables_length {
    width: 100%; margin-bottom: 10px;
  }
  .dataTables_filter input { width: 100%; margin-left: 0; margin-top: 6px; }
  .dataTables_paginate { margin-top: 12px; }
  .dataTables_paginate .pagination { flex-wrap: wrap; gap: 5px; }

  /* scrollbar visible enough to discover, slim enough to ignore */
  .table-responsive::-webkit-scrollbar,
  .dataTables_wrapper::-webkit-scrollbar { height: 6px; }
  .table-responsive::-webkit-scrollbar-thumb,
  .dataTables_wrapper::-webkit-scrollbar-thumb {
    background: var(--line2); border-radius: 6px;
  }
  .table-responsive::-webkit-scrollbar-track,
  .dataTables_wrapper::-webkit-scrollbar-track { background: transparent; }
}

/* panel bodies must not clip the scrolling table */
@media (max-width: 900px) {
  .panel, .panel-body, .card, .card-body { overflow: visible !important; }
  .panel > .table-responsive { border-radius: 0 0 14px 14px; }
}

/* ============================================================
   LAYOUT CENTRING + RESPONSIVE POLISH
   ============================================================ */

/* the content column is centred at every width */
.wm-content{
  display:flex; flex-direction:column; align-items:center;
}
.wm-content > *{ width:100%; max-width:1240px; }
@media(min-width:1600px){ .wm-content > *{ max-width:1400px; } }

/* ---- ultra-wide ---- */
@media(min-width:1920px){
  .wm-dash,.wm-content > *{ max-width:1520px; }
  .wm-content{ padding:34px 52px 60px; }
}

/* ---- laptop: tiles breathe ---- */
@media(max-width:1400px){
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(6,1fr); }
}
@media(max-width:1200px){
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(4,1fr); }
  .wm-cards{ grid-template-columns:repeat(3,1fr); }
}

/* ---- small tablet ---- */
@media(max-width:820px){
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(3,1fr); }
  .wm-cards{ grid-template-columns:repeat(2,1fr); }
  .wm-hero{ padding:28px 24px; }
  .wm-hero h2{ font-size:clamp(22px,4.4vw,28px)!important; }
  .wm-banner{ padding:22px 20px; }
}

/* ---- phone ---- */
@media(max-width:560px){
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .wm-cards{ grid-template-columns:1fr; }
  .wm-tile{ padding:18px 10px; }
  .wm-tile-ico{ width:44px; height:44px; font-size:17px; margin-bottom:7px; }
  .wm-tile b{ font-size:13.5px; }
  .wm-tile span{ font-size:11.5px; }
  .wm-sec{ margin:26px 0 14px; }
  .wm-sec h3{ font-size:16px!important; }
  .wm-hero{ padding:22px 18px; }
  .wm-hero p{ font-size:14.5px; }
  .wm-card{ padding:22px 18px; }
}

/* ---- very small phone ---- */
@media(max-width:380px){
  .wm-tiles,.wm-tiles-sm{ grid-template-columns:1fr 1fr; gap:8px; }
  .wm-content{ padding:16px 12px 30px; }
  .wm-hero{ padding:20px 16px; }
}

/* ============================================================
   HEADER LOCK + HERO SPACING FIXES
   ============================================================ */

/* ---- TOP BAR: never overflow, never push buttons off-screen ---- */
.wm-top{
  display:flex !important;
  align-items:center;
  flex-wrap:nowrap !important;      /* one row, always */
  gap:12px;
  width:100%;
  max-width:100%;
  overflow:hidden;                  /* nothing escapes the bar */
  box-sizing:border-box;
}

/* brand keeps its size */
.wm-top-brand{ flex:0 0 auto !important; }

/* the TITLE is the only thing allowed to shrink — it truncates */
.wm-top-title{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden;
}
.wm-top-title h1{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

/* right-hand controls never shrink and never wrap */
.wm-top-right{
  flex:0 0 auto !important;
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:nowrap !important;
  white-space:nowrap;
}
.wm-top-right > *{ flex:0 0 auto !important; }
.wm-top-right .wm-btn,
.wm-top-right .wm-icon-btn{ white-space:nowrap; }

/* progressively shed the least important bits instead of overflowing */
@media(max-width:1100px){
  .wm-top-title{ display:none; }     /* page title goes first */
}
@media(max-width:700px){
  .wm-top-right .wm-btn span{ display:none; }   /* button label -> icon only */
  .wm-top-right .wm-btn{ padding:9px 12px; }
  .wm-top{ gap:8px; }
}
@media(max-width:420px){
  .wm-top-brand-txt{ display:none; }  /* logo only */
  .wm-top-right{ gap:6px; }
}

/* ---- HERO: kill the vertical gap on mobile ---- */
@media(max-width:820px){
  .wm-hero{
    gap:18px !important;
    align-items:flex-start !important;
  }
  .wm-hero-text{
    flex:1 1 100% !important;   /* was 360px — caused the dead space */
    min-width:0 !important;
  }
  .wm-hero-actions{
    flex:1 1 100% !important;
    width:100%;
    margin-top:0 !important;
  }
  .wm-hero h2{ margin-bottom:8px !important; }
  .wm-hero p{ margin-bottom:0 !important; }
}
@media(max-width:560px){
  .wm-hero{ gap:16px !important; padding:22px 18px !important; }
  .wm-hero-actions{ flex-direction:column; gap:9px; }
  .wm-hero-actions .wm-btn{ width:100%; justify-content:center; }
  .wm-eyebrow{ margin-bottom:8px; }
}

/* ============================================================
   CLICKABLE COLLAPSE HEADERS
   "View", "Actions", "Status", "Billing", "Support" panels on
   Services / Domains / Invoices / Tickets pages: make the whole
   bar clickable, not just the small text link.
   ============================================================ */

/* the heading itself reads as clickable */
.panel-heading:has([data-toggle="collapse"]),
.panel-heading:has([data-bs-toggle="collapse"]),
.panel-heading.collapse-toggle,
.card-header:has([data-toggle="collapse"]) {
  cursor: pointer;
  user-select: none;
  transition: background .16s;
}
.panel-heading:has([data-toggle="collapse"]):hover,
.panel-heading:has([data-bs-toggle="collapse"]):hover,
.card-header:has([data-toggle="collapse"]):hover {
  background: var(--purple-soft) !important;
}

/* expand the trigger link to fill the entire heading box.
   negative margins cancel the heading padding, the matching
   padding restores the visual spacing — result: full-width hit area */
.panel-heading > a[data-toggle="collapse"],
.panel-heading > a[data-bs-toggle="collapse"],
.panel-heading > [data-toggle="collapse"],
.card-header > a[data-toggle="collapse"] {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: -16px -20px !important;
  padding: 16px 20px !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  font-weight: 700;
  cursor: pointer;
}
.panel-heading > a[data-toggle="collapse"]:hover,
.card-header > a[data-toggle="collapse"]:hover { color: var(--purple) !important; }

/* if the trigger sits inside a title wrapper, expand that too */
.panel-heading .panel-title > a[data-toggle="collapse"],
.panel-heading h3 > a[data-toggle="collapse"],
.panel-heading h4 > a[data-toggle="collapse"] {
  display: flex !important;
  align-items: center;
  gap: 10px;
  width: 100%;
  margin: -16px -20px !important;
  padding: 16px 20px !important;
}
.panel-heading .panel-title,
.panel-heading h3, .panel-heading h4 {
  margin: 0 !important; width: 100%; font-size: 15px !important;
}

/* caret pushed to the far right, rotates on open */
.panel-heading [data-toggle="collapse"] .fa-chevron-up,
.panel-heading [data-toggle="collapse"] .fa-chevron-down,
.panel-heading [data-toggle="collapse"] .caret,
.panel-heading [data-toggle="collapse"] i:last-child {
  margin-left: auto;
  transition: transform .2s;
  color: var(--muted);
}
.panel-heading [data-toggle="collapse"][aria-expanded="true"] i:last-child { transform: rotate(180deg); }

/* mobile: bigger tap target */
@media (max-width: 640px) {
  .panel-heading > a[data-toggle="collapse"],
  .panel-heading .panel-title > a[data-toggle="collapse"] {
    margin: -14px -16px !important;
    padding: 15px 16px !important;
    min-height: 46px;
  }
}

/* ============================================================
   MOBILE CENTRING SAFEGUARDS
   ============================================================ */
@media (max-width: 900px) {
  .wm-main { width: 100%; max-width: 100vw; overflow-x: hidden; }
  .wm-content {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; max-width: 100vw; box-sizing: border-box;
  }
  .wm-content > *,
  .wm-dash {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
  }
  /* nothing may exceed the viewport */
  .wm-hero, .wm-banner, .panel, .card,
  .wm-tiles, .wm-cards, .table-responsive {
    max-width: 100% !important;
    box-sizing: border-box;
  }
  .wm-foot-in { margin-left: auto; margin-right: auto; }
}

/* =====================================================================
   FIELD ICONS — FIX (v14)
   The global input rule above sets `padding:...!important`, which also
   sets padding-left and so overrode the space these two components
   reserve for their icons. Restored below.

   NOTE the direct-child combinator on .prepend-icon: the phone field is
   wrapped in an extra .intl-tel-input div, so `>` deliberately excludes
   it and lets the phone rules underneath apply. Do not widen this to a
   descendant selector, and do not add #registration — an ID there
   outranks the phone rules and re-breaks the phone field.
   ===================================================================== */

/* Twenty-One's icon fields: register, checkout, account details */
.prepend-icon > .field,
.prepend-icon > .form-control{ padding-left:42px!important; }

.prepend-icon .field-icon{
  display:flex!important; align-items:center; justify-content:center;
  width:42px; height:100%; top:0; left:0;
  color:var(--muted); z-index:3; pointer-events:none; }
.prepend-icon .field-icon i{ font-size:14px; line-height:1; }

/* Phone field (intl-tel-input). Its own CSS is not !important, so the
   global rule beat it. Padding depends on dial-code length: iti-sdc-N. */
.intl-tel-input{ width:100%!important; display:block!important; }
.intl-tel-input .selected-flag{ height:100%!important; display:flex!important; align-items:center; }

.intl-tel-input.allow-dropdown input,
.intl-tel-input.separate-dial-code input{ padding-left:52px!important; }
.intl-tel-input.separate-dial-code.iti-sdc-2 input{ padding-left:66px!important; }
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input{ padding-left:76px!important; }
.intl-tel-input.separate-dial-code.iti-sdc-3 input{ padding-left:74px!important; }
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input{ padding-left:84px!important; }
.intl-tel-input.separate-dial-code.iti-sdc-4 input{ padding-left:82px!important; }   /* +237 */
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input{ padding-left:92px!important; }
.intl-tel-input.separate-dial-code.iti-sdc-5 input{ padding-left:90px!important; }
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input{ padding-left:100px!important; }

/* =====================================================================
   PHONE COUNTRY DROPDOWN — PANEL GEOMETRY + LEGIBILITY (v16)

   What was wrong in v15: the list opened, but the rule at ~line 444 gave
   it `position:absolute` with NO top/left, a `min-width:280px` floor and
   no max-width, and it kept the plugin's default `white-space:nowrap`.
   So the panel was placed at its static position and grew as wide as the
   longest country name — off the right edge of a phone screen. The rows
   also had no `color` and no layout, so text inherited whatever the
   surrounding block used and flag/name/dial-code sat inline.

   APPENDED on purpose: equal specificity to the v15 block, so source
   order wins. Do NOT set `display` in here —
   `.intl-tel-input .country-list.hide` (3 classes) must keep winning,
   because this plugin opens the list by REMOVING `.hide`. It has no
   `.show` class. Reintroducing a `display` rule here re-locks the field.
   ===================================================================== */
.intl-tel-input .country-list{
  top:calc(100% + 6px);               /* hang just below the field       */
  left:0;                             /* align to the field's left edge  */
  right:auto; bottom:auto;
  z-index:1200;                       /* above the fields that follow    */
  width:min(340px, calc(100vw - 48px));
  min-width:0;                        /* removes the old 280px floor     */
  max-width:calc(100vw - 48px);       /* never leaves the viewport       */
  max-height:min(300px, 50vh);
  overflow-y:auto; overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  white-space:normal;                 /* plugin default nowrap = huge box */
  text-align:left;
  margin:0;
}

/* Rows: explicit layout and colour so nothing is inherited from the form */
.intl-tel-input .country-list .country{
  display:flex; align-items:center; gap:10px;
  padding:9px 10px; margin:0;
  border-radius:8px;
  font-size:14px; line-height:1.35;
  color:var(--ink);
  cursor:pointer;
}
.intl-tel-input .country-list .flag-box{ flex:0 0 20px; }
.intl-tel-input .country-list .country-name{ flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.intl-tel-input .country-list .dial-code{
  flex:0 0 auto; color:var(--muted); font-size:13px;
  font-variant-numeric:tabular-nums; }
.intl-tel-input .country-list .country.active{
  background:var(--purple-soft-2); font-weight:600; }
.intl-tel-input .country-list .country:hover .dial-code,
.intl-tel-input .country-list .country.highlight .dial-code{ color:var(--purple-d); }
.intl-tel-input .country-list .divider{ margin:6px 2px; padding:0; }

/* A clipping ancestor would cut the panel off mid-list. */
.intl-tel-input,
.intl-tel-input .flag-container{ overflow:visible!important; }

/* Thin scrollbar, so a long list reads as scrollable rather than cut off */
.intl-tel-input .country-list{ scrollbar-width:thin; scrollbar-color:var(--line2) transparent; }
.intl-tel-input .country-list::-webkit-scrollbar{ width:10px; }
.intl-tel-input .country-list::-webkit-scrollbar-thumb{
  background:var(--line2); border-radius:10px; border:3px solid var(--panel); }

/* =====================================================================
   PHONE COUNTRY DROPDOWN — ESCAPE THE CARD (v17)

   Line ~177 sets `.panel,.card,.well{ overflow:hidden }` so tables stay
   inside the rounded corners. That also clips this dropdown at the
   bottom edge of the "Personal Information" card — measured: a 300px
   panel with only 219px visible. The native Country <select> is immune
   because the OS draws it outside the page entirely.

   `:has()` unclips ONLY the cards that actually contain a phone widget,
   so every other card keeps its corner clipping.
   ===================================================================== */
.panel:has(.intl-tel-input),
.card:has(.intl-tel-input),
.well:has(.intl-tel-input),
.panel-body:has(.intl-tel-input),
.card-body:has(.intl-tel-input),
.row:has(.intl-tel-input),
.form-group:has(.intl-tel-input){ overflow:visible!important; }


/* =====================================================================
   OPTIONAL — PLAIN PHONE FIELD (no country widget at all)

   Delete the opening and closing comment markers around the block below
   to turn the phone field into an ordinary text box: no flag, no dial
   code, no dropdown, nothing to clip or mis-position. The field still
   submits normally, so WHMCS validation is unaffected.

   Worth considering: almost every client is +237, and a 240-country
   picker is friction for all of them.
   ----------------------------------------------------------------- */
/*
.intl-tel-input .flag-container{ display:none!important; }
.intl-tel-input.allow-dropdown input,
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input,
.intl-tel-input.separate-dial-code.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input,
.intl-tel-input.separate-dial-code.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input,
.intl-tel-input.separate-dial-code.iti-sdc-5 input,
.intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input{
  padding-left:42px!important; }
*/