/* ==========================================================================================
   AheadHost client area — sidebar shell + panel-matched restyle of the stock Six pages.

   Tokens are the VPS panel's (modules/servers/hypervapi/assets/css/clientarea.css) so a customer
   moving between the dashboard, an invoice and their server sees one product. Loaded after
   custom.css and Six's all.min.css; it overrides, it does not replace, so every stock page keeps
   its markup and JS.
   ========================================================================================== */

:root {
  --ah-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --ah-mono: Menlo, Consolas, 'Liberation Mono', monospace;

  --ah-ground: #f3f6fb;
  --ah-surface: #ffffff;
  --ah-surface-2: #f8fafc;
  --ah-line: #e5e7eb;
  --ah-line-2: #eef1f5;
  --ah-ink: #1f2937;
  --ah-ink-2: #4b5563;
  --ah-ink-3: #6b7280;
  --ah-ink-4: #9ca3af;

  --ah-blue: #2563eb;
  --ah-blue-deep: #1d4ed8;
  --ah-blue-soft: #eff6ff;
  --ah-blue-line: #bfdbfe;
  --ah-green: #16a34a;
  --ah-green-soft: #ecfdf5;
  --ah-amber: #d97706;
  --ah-amber-soft: #fffbeb;
  --ah-red: #dc2626;
  --ah-red-soft: #fef2f2;
  --ah-slate: #475569;
  --ah-slate-soft: #f1f5f9;

  /* sidebar */
  --ah-sb-w: 264px;
  --ah-sb-bg-top: #0f2a6b;
  --ah-sb-bg-bot: #0a1d4e;
  --ah-sb-ink: #dbe4ff;
  --ah-sb-muted: #8ea4dc;
  --ah-sb-line: rgba(255, 255, 255, .08);
  --ah-sb-hover: rgba(255, 255, 255, .07);
  --ah-sb-active: #2563eb;

  --ah-top-h: 64px;
  --ah-r-lg: 14px;
  --ah-r: 10px;
  --ah-r-sm: 8px;
  --ah-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 10px 30px -18px rgba(16, 24, 40, .22);
  --ah-shadow-pop: 0 12px 40px -12px rgba(16, 24, 40, .35);
}

/* ---------- base ------------------------------------------------------------------------ */
html { background: var(--ah-ground); }
body.ah-body {
  margin: 0;
  background: var(--ah-ground);
  color: var(--ah-ink);
  font-family: var(--ah-font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
body.ah-body a { color: var(--ah-blue); }
body.ah-body a:hover { color: var(--ah-blue-deep); }
body.ah-body h1, body.ah-body h2, body.ah-body h3, body.ah-body h4 { font-family: var(--ah-font); color: var(--ah-ink); }

/* anything from the old shell that a cached page or a hook might still emit */


/* ---------- the shell is the LIVE theme's, unchanged ------------------------------------- */
/* Everything that used to be here styled a custom shell — app frame, left sidebar, top bar with
   its own breadcrumbs/search/notifications/account menu, custom footer, and a separate signed-out
   layout. All of it has been removed: header.tpl and footer.tpl are now the live theme's files
   verbatim, so WHMCS's own navbar, domain-search banner, shortcuts bar, breadcrumbs and footer are
   all present and in their original places. This stylesheet now only restyles that markup. */

/* ---------- WHMCS side panels (filters / actions / your info) --------------------------- */
.ah-side .panel { margin-bottom: 16px; }
.ah-side-below { margin-top: 4px; }
.ah-side-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.ah-side-grid .panel { margin: 0; }

/* ==========================================================================================
   Stock-page restyle (Six class names)
   ========================================================================================== */

/* cards */
body.ah-body .panel { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-r-lg); box-shadow: var(--ah-shadow); overflow: hidden; }
body.ah-body .panel-heading { background: var(--ah-surface); border-bottom: 1px solid var(--ah-line-2); padding: 14px 18px; color: var(--ah-ink); }
body.ah-body .panel-heading .panel-title { font-size: 14px; font-weight: 700; color: var(--ah-ink); letter-spacing: -.005em; }
body.ah-body .panel-heading .panel-title i { color: var(--ah-ink-3); margin-right: 2px; }
body.ah-body .panel-default > .panel-heading, body.ah-body .panel-sidebar > .panel-heading { background: var(--ah-surface); color: var(--ah-ink); }
body.ah-body .panel-primary, body.ah-body .panel-success, body.ah-body .panel-info, body.ah-body .panel-warning, body.ah-body .panel-danger { border-color: var(--ah-line); }
body.ah-body .panel-primary > .panel-heading { background: var(--ah-blue-soft); color: var(--ah-blue-deep); border-color: var(--ah-blue-line); }
body.ah-body .panel-primary > .panel-heading .panel-title, body.ah-body .panel-success > .panel-heading .panel-title, body.ah-body .panel-danger > .panel-heading .panel-title, body.ah-body .panel-warning > .panel-heading .panel-title, body.ah-body .panel-info > .panel-heading .panel-title { color: inherit; }
body.ah-body .panel-success > .panel-heading { background: var(--ah-green-soft); color: #15803d; border-color: #bbf7d0; }
body.ah-body .panel-info > .panel-heading { background: var(--ah-blue-soft); color: var(--ah-blue-deep); border-color: var(--ah-blue-line); }
body.ah-body .panel-warning > .panel-heading { background: var(--ah-amber-soft); color: #b45309; border-color: #fde68a; }
body.ah-body .panel-danger > .panel-heading { background: var(--ah-red-soft); color: #b91c1c; border-color: #fecaca; }
body.ah-body .panel-body { padding: 16px 18px; }
body.ah-body .panel-footer { background: var(--ah-surface-2); border-top: 1px solid var(--ah-line-2); padding: 12px 18px; }
body.ah-body .panel-heading .btn-xs, body.ah-body .panel-heading .btn-sm { margin-top: -3px; }
body.ah-body .panel-sidebar .panel-minimise { color: var(--ah-ink-4); font-size: 12px; margin-top: 3px; }

body.ah-body .list-group { margin: 0; }
body.ah-body .list-group-item { border: 0; border-top: 1px solid var(--ah-line-2); padding: 11px 18px; color: var(--ah-ink-2); font-size: 13.5px; font-weight: 500; background: transparent; }
body.ah-body .list-group-item:first-child { border-top: 0; }
body.ah-body .panel > .list-group .list-group-item:last-child { border-radius: 0 0 var(--ah-r-lg) var(--ah-r-lg); }
body.ah-body a.list-group-item:hover, body.ah-body a.list-group-item:focus { background: var(--ah-surface-2); color: var(--ah-ink); }
body.ah-body .list-group-item.active, body.ah-body .list-group-item.active:hover, body.ah-body .list-group-item.active:focus { background: var(--ah-blue-soft); color: var(--ah-blue-deep); border-color: var(--ah-line-2); box-shadow: inset 3px 0 0 var(--ah-blue); }
body.ah-body .list-group-item .badge { background: var(--ah-slate-soft); color: var(--ah-ink-2); font-weight: 600; border-radius: 999px; padding: 3px 8px; }
body.ah-body .list-group-item.active .badge { background: var(--ah-blue); color: #fff; }
body.ah-body .list-group-item i.sidebar-menu-item-icon, body.ah-body .list-group-item > i { color: var(--ah-ink-4); }
body.ah-body .list-group-item.disabled, body.ah-body .list-group-item.disabled:hover { color: var(--ah-ink-4); background: transparent; }

/* dashboard tiles */
body.ah-body .tiles { margin-bottom: 20px; }
body.ah-body .tiles .tile { padding: 0 8px; margin-bottom: 16px; cursor: pointer; }
body.ah-body .tiles .tile a { display: block; background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-r-lg); padding: 18px 18px 16px; position: relative; box-shadow: var(--ah-shadow); text-decoration: none !important; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease; }
body.ah-body .tiles .tile a:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -18px rgba(16,24,40,.35); }
body.ah-body .tiles .tile .icon { position: absolute; right: 16px; top: 16px; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--ah-blue-soft); color: var(--ah-blue); font-size: 17px; opacity: 1; }
body.ah-body .tiles .tile .stat { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--ah-ink); line-height: 1; margin: 2px 0 6px; font-variant-numeric: tabular-nums; }
body.ah-body .tiles .tile .title { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ah-ink-3); }
body.ah-body .tiles .tile .highlight { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; }
body.ah-body .tiles .tile .bg-color-blue { background: var(--ah-blue); } body.ah-body .tiles .tile .bg-color-green { background: var(--ah-green); }
body.ah-body .tiles .tile .bg-color-red { background: var(--ah-red); } body.ah-body .tiles .tile .bg-color-gold { background: var(--ah-amber); }
body.ah-body .tiles .tile:nth-child(2) .icon { background: var(--ah-green-soft); color: var(--ah-green); }
body.ah-body .tiles .tile:nth-child(3) .icon { background: var(--ah-red-soft); color: var(--ah-red); }
body.ah-body .tiles .tile:nth-child(4) .icon { background: var(--ah-amber-soft); color: var(--ah-amber); }
body.ah-body .home-kb-search { margin-bottom: 20px; position: relative; }
body.ah-body .home-kb-search .form-control { border-radius: 12px; height: 48px; padding-left: 44px; font-size: 14px; }
body.ah-body .home-kb-search i { position: absolute; left: 30px; top: 16px; color: var(--ah-ink-4); }

/* dashboard panel header buttons: Six forces color:#fff on them (0,4,0), so match that specificity */
body.ah-body .client-home-panels .panel > .panel-heading .panel-title .btn,
body.ah-body .client-home-panels .panel > .panel-heading .panel-title .btn:hover,
body.ah-body .client-home-panels .panel > .panel-heading .panel-title .btn:focus {
  background: var(--ah-blue-soft); color: var(--ah-blue-deep); border: 1px solid var(--ah-blue-line);
  border-radius: 8px; padding: 4px 10px; font-size: 12px; font-weight: 600;
}
body.ah-body .client-home-panels .panel > .panel-heading .panel-title .btn:hover { background: #dbeafe; }

/* active services list on the dashboard */
body.ah-body .div-service-item { padding: 12px 18px; border-top: 1px solid var(--ah-line-2); display: flex; align-items: center; gap: 14px; cursor: pointer; }
body.ah-body .div-service-item:hover { background: var(--ah-surface-2); }
body.ah-body .div-service-item .div-service-name { flex: 1; }
body.ah-body .div-service-item .text-domain { color: var(--ah-ink-3); font-size: 12.5px; display: block; }

/* tables / datatables — Six paints .dataTables_info/.dataTables_filter as a dark #4f5360 band */
body.ah-body .table-container { background: transparent; border: 0; padding-bottom: 8px; }
body.ah-body .dataTables_wrapper .dataTables_info,
body.ah-body .dataTables_wrapper .dataTables_filter,
body.ah-body .dataTables_wrapper .dataTables_length,
body.ah-body .dataTables_wrapper .dataTables_paginate { background: transparent !important; color: var(--ah-ink-3) !important; border: 0 !important; padding: 8px 0 !important; font-size: 13px; }
body.ah-body .dataTables_wrapper .dataTables_filter label .form-control { background-color: #fff !important; background-position: 10px 9px !important; border: 1px solid var(--ah-line) !important; border-radius: 10px !important; height: 38px !important; width: 240px !important; padding-left: 36px !important; font-size: 13px !important; }
body.ah-body .dataTables_wrapper .dataTables_length select { height: 34px; }
body.ah-body .dataTables_wrapper .dataTables_length, body.ah-body .dataTables_wrapper .dataTables_filter, body.ah-body .dataTables_wrapper .dataTables_info, body.ah-body .dataTables_wrapper .dataTables_paginate { color: var(--ah-ink-3); font-size: 13px; }
body.ah-body .table-container .dataTables_wrapper > .row:first-child, body.ah-body .table-container > .table-container-top, body.ah-body div.dataTables_wrapper div.dataTables_filter { background: transparent; }
body.ah-body .dataTables_filter input, body.ah-body .dataTables_length select { border: 1px solid var(--ah-line); border-radius: 10px; padding: 7px 12px; background: #fff; font: inherit; font-size: 13px; }
body.ah-body .table-list { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-r-lg); overflow: hidden; border-collapse: separate; border-spacing: 0; margin-bottom: 14px; }
body.ah-body .table-list > thead > tr > th { background: var(--ah-surface-2); border-bottom: 1px solid var(--ah-line) !important; border-top: 0; color: var(--ah-ink-3); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 12px 14px; }
body.ah-body .table-list > thead > tr > th.sorting_asc, body.ah-body .table-list > thead > tr > th.sorting_desc { color: var(--ah-blue-deep); background: var(--ah-blue-soft); }
body.ah-body .table-list > tbody > tr > td { padding: 13px 14px; border-top: 1px solid var(--ah-line-2); vertical-align: middle; color: var(--ah-ink); font-size: 13.5px; }
body.ah-body .table-list.table-striped > tbody > tr:nth-of-type(odd), body.ah-body .table-striped > tbody > tr:nth-of-type(odd) { background: transparent; }
body.ah-body .table-list > tbody > tr:hover > td { background: var(--ah-surface-2); }
body.ah-body .table-list > tbody > tr > td .fa-lg, body.ah-body .table-list .fa-lock, body.ah-body .table-list .fa-unlock { color: var(--ah-ink-4); }
body.ah-body .table > thead > tr > th { border-bottom-color: var(--ah-line); }
body.ah-body .table > tbody > tr > td { border-top-color: var(--ah-line-2); }
body.ah-body .dataTables_wrapper .pagination > li > a, body.ah-body .pagination > li > a, body.ah-body .pagination > li > span { border-color: var(--ah-line); color: var(--ah-ink-2); margin: 0 3px; border-radius: 8px !important; padding: 6px 11px; font-size: 13px; }
body.ah-body .pagination > .active > a, body.ah-body .pagination > .active > a:hover { background: var(--ah-blue); border-color: var(--ah-blue); color: #fff; }
body.ah-body .pagination > .disabled > a { color: var(--ah-ink-4); }

/* buttons */
body.ah-body .btn { border-radius: var(--ah-r); font-weight: 600; font-size: 13.5px; padding: 9px 16px; border-width: 1px; box-shadow: none; transition: background .15s ease, color .15s ease, border-color .15s ease; font-family: var(--ah-font); }
body.ah-body .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 8px; }
body.ah-body .btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; }
body.ah-body .btn-lg { padding: 12px 22px; font-size: 15px; border-radius: 12px; }
body.ah-body .btn-default { background: #fff; border-color: var(--ah-line); color: var(--ah-ink-2); }
body.ah-body .btn-default:hover, body.ah-body .btn-default:focus { background: var(--ah-surface-2); border-color: #d1d5db; color: var(--ah-ink); }
body.ah-body .btn-primary { background: var(--ah-blue); border-color: var(--ah-blue); color: #fff; }
body.ah-body .btn-primary:hover, body.ah-body .btn-primary:focus { background: var(--ah-blue-deep); border-color: var(--ah-blue-deep); }
body.ah-body .btn-success { background: var(--ah-green); border-color: var(--ah-green); color: #fff; }
body.ah-body .btn-success:hover, body.ah-body .btn-success:focus { background: #15803d; border-color: #15803d; }
body.ah-body .btn-info { background: var(--ah-blue-soft); border-color: var(--ah-blue-line); color: var(--ah-blue-deep); }
body.ah-body .btn-info:hover, body.ah-body .btn-info:focus { background: #dbeafe; color: var(--ah-blue-deep); }
body.ah-body .btn-warning { background: var(--ah-amber); border-color: var(--ah-amber); color: #fff; }
body.ah-body .btn-danger { background: var(--ah-red); border-color: var(--ah-red); color: #fff; }
body.ah-body .btn-danger:hover, body.ah-body .btn-danger:focus { background: #b91c1c; border-color: #b91c1c; }
body.ah-body .btn-link { color: var(--ah-blue); font-weight: 500; }
body.ah-body .btn-group-sm > .btn { border-radius: 8px; }

/* labels & badges */
body.ah-body .label { border-radius: 999px; padding: 4px 10px; font-size: 11.5px; font-weight: 600; letter-spacing: .01em; display: inline-block; line-height: 1.2; }
body.ah-body .label-success { background: var(--ah-green-soft); color: #15803d; }
body.ah-body .label-warning { background: var(--ah-amber-soft); color: #b45309; }
body.ah-body .label-danger { background: var(--ah-red-soft); color: #b91c1c; }
body.ah-body .label-info, body.ah-body .label-primary { background: var(--ah-blue-soft); color: var(--ah-blue-deep); }
body.ah-body .label-default { background: var(--ah-slate-soft); color: var(--ah-slate); }
body.ah-body .label-placeholder { visibility: hidden; }
body.ah-body .badge { background: var(--ah-slate-soft); color: var(--ah-ink-2); font-weight: 600; border-radius: 999px; }

/* forms */
body.ah-body .form-control { border: 1px solid var(--ah-line); border-radius: var(--ah-r); box-shadow: none; height: 40px; padding: 8px 12px; font-size: 14px; color: var(--ah-ink); font-family: var(--ah-font); }
body.ah-body textarea.form-control { height: auto; }
body.ah-body .form-control:focus { border-color: var(--ah-blue-line); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
body.ah-body .input-group-addon { border-color: var(--ah-line); background: var(--ah-surface-2); border-radius: var(--ah-r); color: var(--ah-ink-3); }
body.ah-body label, body.ah-body .control-label { font-weight: 600; color: var(--ah-ink-2); font-size: 13px; }
body.ah-body .help-block { color: var(--ah-ink-3); }
body.ah-body .radio label, body.ah-body .checkbox label { font-weight: 500; }

/* alerts */
body.ah-body .alert { border: 1px solid transparent; border-left-width: 4px; border-radius: var(--ah-r); padding: 12px 16px; font-size: 13.5px; }
body.ah-body .alert-success { background: var(--ah-green-soft); border-color: #bbf7d0; border-left-color: var(--ah-green); color: #14532d; }
body.ah-body .alert-info { background: var(--ah-blue-soft); border-color: var(--ah-blue-line); border-left-color: var(--ah-blue); color: #1e3a8a; }
body.ah-body .alert-warning { background: var(--ah-amber-soft); border-color: #fde68a; border-left-color: var(--ah-amber); color: #78350f; }
body.ah-body .alert-danger { background: var(--ah-red-soft); border-color: #fecaca; border-left-color: var(--ah-red); color: #7f1d1d; }
body.ah-body .alert .btn-default { background: #fff; }

/* tabs */
body.ah-body .nav-tabs { border-bottom: 1px solid var(--ah-line); margin-bottom: 0; }
body.ah-body .nav-tabs > li > a { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--ah-ink-3); font-weight: 600; font-size: 13.5px; padding: 11px 16px; margin-right: 4px; }
body.ah-body .nav-tabs > li > a:hover { background: transparent; color: var(--ah-ink); border-bottom-color: var(--ah-line); }
body.ah-body .nav-tabs > li.active > a, body.ah-body .nav-tabs > li.active > a:hover, body.ah-body .nav-tabs > li.active > a:focus { border: 0; border-bottom: 2px solid var(--ah-blue); color: var(--ah-blue-deep); background: transparent; }
body.ah-body .tab-content.product-details-tab-container { background: var(--ah-surface); border: 1px solid var(--ah-line); border-top: 0; border-radius: 0 0 var(--ah-r-lg) var(--ah-r-lg); padding: 18px; }

/* product page (stock parts around the VPS panel) */
body.ah-body .product-details .product-status { background: var(--ah-surface); border: 1px solid var(--ah-line); border-radius: var(--ah-r-lg); overflow: hidden; box-shadow: var(--ah-shadow); }
body.ah-body .product-details .product-status .product-icon { padding: 24px 16px 14px; }
body.ah-body .product-details .product-status .product-icon .fa-stack-2x { color: var(--ah-blue-soft); }
body.ah-body .product-details .product-status .product-icon .fa-inverse { color: var(--ah-blue); }
body.ah-body .product-details .product-status h3 { font-size: 18px; font-weight: 700; margin: 10px 0 2px; }
body.ah-body .product-details .product-status h4 { color: var(--ah-ink-3); font-size: 13px; margin: 0 0 8px; }
body.ah-body .product-details .product-status .product-status-text { background: var(--ah-surface-2); color: var(--ah-ink-2); font-weight: 700; font-size: 12px; letter-spacing: .1em; padding: 10px; }
body.ah-body .product-details .product-status-active .product-status-text { background: var(--ah-green-soft); color: #15803d; }
body.ah-body .product-details .product-status-suspended .product-status-text { background: var(--ah-amber-soft); color: #b45309; }
body.ah-body .product-details .product-status-terminated .product-status-text, body.ah-body .product-details .product-status-cancelled .product-status-text { background: var(--ah-red-soft); color: #b91c1c; }
body.ah-body .product-details .product-actions-wrapper .btn { margin-top: 8px; }
body.ah-body .product-details h4 { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ah-ink-3); margin: 14px 0 2px; }

/* modals & misc */
body.ah-body .modal-content { border-radius: var(--ah-r-lg); border: 1px solid var(--ah-line); box-shadow: var(--ah-shadow-pop); }
body.ah-body .modal-header { border-bottom: 1px solid var(--ah-line); }
body.ah-body .modal-footer { border-top: 1px solid var(--ah-line); background: var(--ah-surface-2); border-radius: 0 0 var(--ah-r-lg) var(--ah-r-lg); }
body.ah-body .well { background: var(--ah-surface-2); border: 1px solid var(--ah-line); border-radius: var(--ah-r); box-shadow: none; }
body.ah-body hr { border-top-color: var(--ah-line); }
body.ah-body .text-muted { color: var(--ah-ink-3) !important; }
body.ah-body .dropdown-menu { border: 1px solid var(--ah-line); border-radius: 12px; box-shadow: var(--ah-shadow-pop); padding: 6px; }
body.ah-body .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; font-size: 13.5px; }
body.ah-body .dropdown-menu > li > a:hover { background: var(--ah-blue-soft); color: var(--ah-blue-deep); }

/* The WhatsApp / Telegram buttons are deliberately NOT styled here.
   includes/hooks/aheadhost_chat_widgets.php owns them: bottom-left at 24px/20px on desktop, and
   at <=768px it moves them to 16px/12px and collapses them to circular icon-only buttons. An
   override written for the old sidebar layout used to force right:20px !important here, which
   put them on the wrong side (into Tawk.to) and, because `bottom` was !important too, also
   defeated the hook's own mobile positioning. Removed 2026-10-12 — the hook is the single source
   of truth for these, on both themes. */

/* ---------- responsive ------------------------------------------------------------------ */
@media (max-width: 991px) {
}
@media (max-width: 767px) {
  /* dashboard service rows: stack name over buttons instead of truncating to "A..." */
  body.ah-body .div-service-item { flex-wrap: wrap; }
  body.ah-body .div-service-item .div-service-name { flex: 1 1 100%; order: -1; }
  body.ah-body .div-service-item .div-service-status .label-placeholder { display: none; }
  body.ah-body .div-service-item .div-service-status, body.ah-body .div-service-item .div-service-status .label { width: auto; max-width: none; overflow: visible; text-overflow: clip; }
  body.ah-body .tiles .tile .stat { font-size: 24px; }
  body.ah-body .panel-body { padding: 14px; }
  body.ah-body .table-list > tbody > tr > td, body.ah-body .table-list > thead > tr > th { padding: 9px 7px; }

  /* The services list is 461px of columns (52+144+75+88+101) inside a 358px content column, and
     DataTables Responsive only collapses its own edit-button column — so the PAGE scrolled
     sideways, which it also does on the live theme. Padding is trimmed above, but five columns
     cannot be squeezed under 358px, so the table is contained here instead: it scrolls in its own
     box and the page itself stays put.

     Scoped to phones on purpose. A permanent overflow container would clip any dropdown opened
     inside a table, and the dashboard's service rows have one ("Log in to cPanel"). */
  body.ah-body .listtable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (prefers-reduced-motion: reduce) {
  body.ah-body .btn, body.ah-body .tiles .tile a { transition: none !important; }
}

/* ==========================================================================================
   Order form — the cart, configure-product and checkout steps
   ==========================================================================================
   These pages come from templates/orderforms/standard_cart, which is SHARED by every theme, so
   none of its own CSS may be edited — a change there would hit the live theme too. Everything
   below overrides from here instead, scoped `body.ah-body #order-standard_cart` so it applies
   only under this theme and still outranks the shared rules (which are id + class).

   What it is replacing: an #666 grey summary panel with a 4px radius, and a summary body set at
   0.8em — 11.2px measured on the page, too small for the figures a customer is checking before
   they pay.
   ========================================================================================== */

/* the summary panel, given the same treatment as every other card in the theme */
body.ah-body #order-standard_cart .order-summary {
  background: var(--ah-surface);
  border: 1px solid var(--ah-line);
  border-bottom: 1px solid var(--ah-line);
  border-radius: var(--ah-r-lg);
  box-shadow: var(--ah-shadow);
  overflow: hidden;
  margin: 0 0 18px;
}
body.ah-body #order-standard_cart .order-summary h2 {
  background: var(--ah-surface-2);
  border-bottom: 1px solid var(--ah-line);
  color: var(--ah-ink);
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.005em;
  padding: 14px 18px;
}
body.ah-body #order-standard_cart .summary-container {
  background: var(--ah-surface);
  border-radius: 0;
  font-size: 13px;          /* was 0.8em -> 11.2px */
  color: var(--ah-ink-2);
  padding: 16px 18px;
  min-height: 0;
}

/* what is being bought, and the per-line prices under it */
body.ah-body #order-standard_cart .order-summary .product-name {
  font-size: 15px; font-weight: 700; color: var(--ah-ink); letter-spacing: -.01em;
}
body.ah-body #order-standard_cart .order-summary .product-group {
  display: block; font-size: 12px; color: var(--ah-ink-3); margin-bottom: 12px;
}
body.ah-body #order-standard_cart .summary-container .clearfix {
  padding: 4px 0; font-variant-numeric: tabular-nums;
}

/* the totals block, and the one figure the customer is actually looking for */
body.ah-body #order-standard_cart .summary-totals {
  border-top: 1px solid var(--ah-line-2);
  margin-top: 12px; padding-top: 12px;
  font-variant-numeric: tabular-nums;
}
body.ah-body #order-standard_cart .total-due-today {
  border-top: 1px solid var(--ah-line);
  margin-top: 12px; padding: 14px 0 2px;
  color: var(--ah-ink); font-variant-numeric: tabular-nums;
}
body.ah-body #order-standard_cart .total-due-today .amt,
body.ah-body #order-standard_cart .total-due-today .pull-right,
body.ah-body #order-standard_cart .total-due-today .float-right {
  color: var(--ah-blue-deep); font-weight: 700;
}

/* the "Configure Server" / "Configurable Options" divider bars */
body.ah-body #order-standard_cart .header-lined {
  border-bottom: 1px solid var(--ah-line);
  margin: 26px 0 18px; padding-bottom: 0;
}
body.ah-body #order-standard_cart .header-lined span,
body.ah-body #order-standard_cart .primary-bg-color {
  background: var(--ah-surface) !important;
  color: var(--ah-ink) !important;
  font-size: 13.5px; font-weight: 700; letter-spacing: -.005em;
  padding: 0 12px;
}
body.ah-body #order-standard_cart .product-title {
  font-size: 19px; font-weight: 700; color: var(--ah-ink); letter-spacing: -.015em;
}

/* form controls on the configure step, matched to the rest of the client area */
body.ah-body #order-standard_cart .form-control,
body.ah-body #order-standard_cart select.form-control {
  border: 1px solid var(--ah-line); border-radius: var(--ah-r-sm);
  font-size: 13.5px; color: var(--ah-ink); box-shadow: none;
}
body.ah-body #order-standard_cart .form-control:focus {
  border-color: var(--ah-blue); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
body.ah-body #order-standard_cart .fieldarea > label,
body.ah-body #order-standard_cart label.control-label {
  font-size: 12.5px; font-weight: 600; color: var(--ah-ink-2);
}

/* addon cards */
body.ah-body #order-standard_cart .panel-addon {
  border: 1px solid var(--ah-line); border-radius: var(--ah-r);
  box-shadow: var(--ah-shadow); background: var(--ah-surface);
}
body.ah-body #order-standard_cart .panel-addon-selected {
  border-color: var(--ah-blue); background: var(--ah-blue-soft);
}

/* The cart item list. Its header is the one genuinely off-palette thing left on these pages —
   #058 dark teal, straight from the shared order-form stylesheet. Given the same uppercase
   surface treatment the tables elsewhere in the client area use, and the list below it closed
   into the same card. */
body.ah-body #order-standard_cart .view-cart-items-header {
  background: var(--ah-surface-2);
  color: var(--ah-ink-3);
  border: 1px solid var(--ah-line);
  border-bottom: 0;
  border-radius: var(--ah-r-lg) var(--ah-r-lg) 0 0;
  padding: 12px 16px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
body.ah-body #order-standard_cart .view-cart-items {
  background: var(--ah-surface);
  border: 1px solid var(--ah-line);
  border-top: 0;
  border-radius: 0 0 var(--ah-r-lg) var(--ah-r-lg);
  box-shadow: var(--ah-shadow);
  margin-bottom: 18px;
}
body.ah-body #order-standard_cart .view-cart-empty {
  padding: 28px 16px; text-align: center; color: var(--ah-ink-3); font-size: 13.5px;
}
body.ah-body #order-standard_cart .view-cart-promotion-code {
  background: var(--ah-surface); border: 1px solid var(--ah-line);
  border-radius: var(--ah-r-lg); box-shadow: var(--ah-shadow); padding: 4px 0 0;
}

/* The public (signed-out) utility bar no longer carries a logo — the orange navbar above is the
   brand — so it collapses to a single row of links, right-aligned. */

/* The signed-out utility bar on phones. Five links at desktop padding do not fit 390px: they
   wrapped, "View Cart" broke across two lines and the first link sat flush against the screen
   edge. Compacted and kept on one row; the cart icon goes because the word alone is clear and
   the icon is what pushed it over. */
@media (max-width: 575px) {
}

/* ==========================================================================================
   The signed-in homepage: domain-search banner and shortcuts bar
   ==========================================================================================
   COLOUR AND SPACING ONLY. Every element, link and label stays exactly where WHMCS puts it —
   these two blocks are part of the live layout and are not to be moved or removed. They are
   restyled here purely so they sit in the same palette as the pages below them, instead of the
   stock navy/cyan.
   ========================================================================================== */

body.ah-body #home-banner {
  background: linear-gradient(180deg, var(--ah-sb-bg-top) 0%, var(--ah-sb-bg-bot) 100%);
  border-bottom: 0;
  padding: 44px 0 46px;
}
body.ah-body #home-banner h2 {
  font-family: var(--ah-font);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: #fff;
  margin: 0 0 20px;
}
body.ah-body #home-banner .form-control,
body.ah-body #home-banner textarea {
  height: 50px;
  border: 1px solid transparent;
  border-radius: var(--ah-r) 0 0 var(--ah-r);
  font-size: 14.5px;
  color: var(--ah-ink);
  box-shadow: none;
}
body.ah-body #home-banner .form-control:focus {
  border-color: var(--ah-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .25);
}
body.ah-body #home-banner .btn.search {
  background: var(--ah-blue);
  border-color: var(--ah-blue);
  color: #fff;
  height: 50px;
  padding: 0 22px;
  font-weight: 600;
}
body.ah-body #home-banner .btn.search:hover { background: var(--ah-blue-deep); border-color: var(--ah-blue-deep); }
body.ah-body #home-banner .btn.transfer {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .22);
  color: #fff;
  height: 50px;
  padding: 0 20px;
  border-radius: 0 var(--ah-r) var(--ah-r) 0;
  font-weight: 600;
}
body.ah-body #home-banner .btn.transfer:hover { background: rgba(255, 255, 255, .22); color: #fff; }

body.ah-body .home-shortcuts {
  background: var(--ah-surface);
  border-bottom: 1px solid var(--ah-line);
}
body.ah-body .home-shortcuts .lead {
  color: var(--ah-ink-2);
  font-size: 15px;
  font-weight: 600;
  margin: 0;
}
body.ah-body .home-shortcuts ul > li > a {
  color: var(--ah-ink-2);
  border-left: 1px solid var(--ah-line);
  transition: background .15s ease, color .15s ease;
}
body.ah-body .home-shortcuts ul > li > a:hover,
body.ah-body .home-shortcuts ul > li > a:focus {
  background: var(--ah-blue-soft);
  color: var(--ah-blue-deep);
}
body.ah-body .home-shortcuts ul > li > a i { color: var(--ah-blue); }
body.ah-body .home-shortcuts ul > li > a:hover i { color: var(--ah-blue-deep); }
body.ah-body .home-shortcuts ul > li > a p {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
}

/* ==========================================================================================
   Site footer — replica of the WordPress site's footer
   ==========================================================================================
   Four columns above WHMCS's own copyright line. Colours follow the website's global kit
   (teal #38ACA8 accent, navy headings, grey links) rather than this stylesheet's blue, because
   the point is for the two footers to look like one company.
   ========================================================================================== */
body.ah-body #ah-site-footer {
  background: #ffffff;
  border-top: 1px solid var(--ah-line);
  padding: 52px 0 34px;
  color: #5a6672;
  font-size: 14px;
  line-height: 1.75;
}
/* Measured off the website: Jost 20px/22px 700, #232E3D, uppercase. */
body.ah-body #ah-site-footer h4 {
  font-family: Jost, var(--ah-font);
  font-size: 20px;
  line-height: 22px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: uppercase;
  color: #232E3D;
  margin: 0 0 18px;
}
body.ah-body #ah-site-footer ul { list-style: none; margin: 0; padding: 0; }
body.ah-body #ah-site-footer .ah-f-col:not(.ah-f-contact) li { margin-bottom: 9px; }
/* the site sets these 12px uppercase, in black — not sentence-case grey */
body.ah-body #ah-site-footer .ah-f-col:not(.ah-f-contact) li > a {
  color: #000;
  font-size: 12px;
  font-weight: 500;
  line-height: 24px;
  text-transform: uppercase;
  text-decoration: none !important;
  position: relative;
  padding-left: 18px;
  display: inline-block;
  transition: color .15s ease, padding-left .15s ease;
}
/* The chevron bullet the website uses — drawn with borders, not a Font Awesome glyph.
   The first attempt used content:"\f054" with font-family "Font Awesome 5 Free", and this
   install actually ships **Font Awesome 6 Pro**, so every bullet rendered as an empty box.
   A CSS chevron cannot care which icon font is installed. */
body.ah-body #ah-site-footer .ah-f-col:not(.ah-f-contact) li > a::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 9px;
  width: 5px;
  height: 5px;
  border-right: 2px solid #232E3D;
  border-bottom: 2px solid #232E3D;
  transform: rotate(-45deg);
}
body.ah-body #ah-site-footer .ah-f-col:not(.ah-f-contact) li > a:hover { color: #38ACA8; padding-left: 22px; }

/* about column */
body.ah-body #ah-site-footer .ah-f-logo img { max-height: 46px; width: auto; margin-bottom: 16px; }
body.ah-body #ah-site-footer .ah-f-about p { margin: 0 0 18px; max-width: 330px; color: #666; font-size: 14px; line-height: 21px; }
body.ah-body #ah-site-footer .ah-f-about strong { color: #232E3D; font-weight: 700; }
body.ah-body #ah-site-footer .ah-f-social {
  width: 41px; height: 41px; border-radius: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #EBF7F6; color: #69727D;
  text-decoration: none !important; transition: background .15s ease, color .15s ease;
}
body.ah-body #ah-site-footer .ah-f-social:hover { background: #38ACA8; color: #fff; }

/* contact column: icon in the gutter, text aligned against it */
body.ah-body #ah-site-footer .ah-f-contact li {
  display: flex; gap: 11px; align-items: flex-start; margin-bottom: 14px;
}
body.ah-body #ah-site-footer .ah-f-contact li i { color: #38ACA8; font-size: 14px; margin-top: 5px; flex: 0 0 16px; }
body.ah-body #ah-site-footer .ah-f-contact li a { color: #5a6672; text-decoration: none !important; }
body.ah-body #ah-site-footer .ah-f-contact li a:hover { color: #38ACA8; }

/* WHMCS's own copyright line, kept as the bottom bar the website also has */
body.ah-body section#footer {
  background: #ffffff;
  border-top: 1px solid var(--ah-line);
  padding: 18px 0;
  margin: 0;
}
body.ah-body section#footer p {
  margin: 0; color: var(--ah-ink-3); font-size: 13px; text-align: center;
}

@media (max-width: 991px) {
  body.ah-body #ah-site-footer { padding: 38px 0 26px; }
  body.ah-body #ah-site-footer .ah-f-col { margin-bottom: 26px; }
  body.ah-body #ah-site-footer .ah-f-about p { max-width: none; }
}