/* ==========================================================================
   Geometric Hosting :: WHMCS client area layer

   Restyles the markup inherited from the twenty-one parent theme. Overriding
   all 87 stock templates would be unmaintainable and would break on WHMCS
   updates, so instead this sheet retargets the Bootstrap classes twenty-one
   already emits. One file covers invoices, tickets, domains, profile, cart
   and every other inherited page.

   Loaded after geometric.css, so it inherits the same design tokens.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Page frame
   -------------------------------------------------------------------------- */
.geo #main-body,
.geo .main-content {
  padding-block: clamp(var(--geo-s-8), 5vw, var(--geo-s-16));
}

.geo #main-body > .container,
.geo .main-content > .container {
  max-width: var(--geo-container);
}

/* Stock page header band. Ours is rendered by header.tpl, so hide the duplicate. */
.geo #header,
.geo .header-lined,
.geo #main-body > .container > h1:first-child { display: none; }

.geo .geo-pagehead h1 { margin-bottom: var(--geo-s-2); }
.geo .geo-crumbs,
.geo .breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--geo-s-2);
  list-style: none; margin: 0; padding: 0;
  font-size: var(--geo-fs-sm); background: transparent;
}
.geo .geo-crumbs a, .geo .breadcrumb a { color: rgba(255,255,255,.72); }
.geo .geo-crumbs a:hover, .geo .breadcrumb a:hover { color: #fff; }
.geo .breadcrumb-item + .breadcrumb-item::before { content: "/"; opacity: .4; padding-inline: 6px; }

/* --------------------------------------------------------------------------
   Cards and panels
   -------------------------------------------------------------------------- */
.geo .card,
.geo .panel {
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg);
  box-shadow: var(--geo-sh-sm);
  margin-bottom: var(--geo-s-6);
  overflow: hidden;
}

.geo .card-header,
.geo .panel-heading {
  background: var(--geo-bg-subtle);
  border-bottom: 1px solid var(--geo-border);
  padding: var(--geo-s-4) var(--geo-s-6);
  font-family: var(--geo-font-display);
  font-weight: 600;
  font-size: var(--geo-fs-base);
  color: var(--geo-text);
}
.geo .card-header h2, .geo .card-header h3, .geo .card-header h4,
.geo .panel-heading h2, .geo .panel-heading h3, .geo .panel-heading h4 {
  margin: 0; font-size: var(--geo-fs-base); font-weight: 600;
}

.geo .card-body, .geo .panel-body { padding: var(--geo-s-6); }
.geo .card-footer, .geo .panel-footer {
  background: var(--geo-bg-subtle);
  border-top: 1px solid var(--geo-border);
  padding: var(--geo-s-4) var(--geo-s-6);
}

/* Stock colour-coded panels get brand treatment rather than Bootstrap defaults. */
.geo .panel-primary > .panel-heading,
.geo .card-primary > .card-header { background: var(--geo-cyan-100); color: var(--geo-cyan-600); border-bottom-color: transparent; }
.geo .panel-success > .panel-heading { background: var(--geo-success-bg); color: #047857; border-bottom-color: transparent; }
.geo .panel-danger  > .panel-heading { background: var(--geo-danger-bg);  color: #B91C1C; border-bottom-color: transparent; }
.geo .panel-warning > .panel-heading { background: var(--geo-warning-bg); color: #B45309; border-bottom-color: transparent; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.geo .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--geo-s-2);
  font-family: var(--geo-font-body); font-weight: 600; font-size: var(--geo-fs-base);
  line-height: 1; min-height: 44px; padding: 12px var(--geo-s-5);
  border-radius: var(--geo-r-md); border: 1px solid transparent;
  transition: transform var(--geo-t-fast), box-shadow var(--geo-t-base), background var(--geo-t-base);
  text-decoration: none; cursor: pointer;
}
.geo .btn:hover { transform: translateY(-1px); }
.geo .btn:active { transform: translateY(0); }

.geo .btn-primary {
  background: var(--geo-grad-brand); border-color: transparent; color: #fff;
  box-shadow: var(--geo-sh-glow);
}
.geo .btn-primary:hover { box-shadow: 0 16px 40px rgba(41,171,226,.34); color: #fff; }

.geo .btn-secondary,
.geo .btn-default {
  background: transparent; color: var(--geo-text); border-color: var(--geo-border-strong);
}
.geo .btn-secondary:hover, .geo .btn-default:hover {
  border-color: var(--geo-cyan-400); color: var(--geo-cyan-600); background: transparent;
}

.geo .btn-success { background: var(--geo-success); border-color: transparent; color: #fff; }
.geo .btn-danger  { background: var(--geo-danger);  border-color: transparent; color: #fff; }
.geo .btn-warning { background: var(--geo-warning); border-color: transparent; color: #fff; }
.geo .btn-info    { background: var(--geo-cyan-500); border-color: transparent; color: #fff; }

.geo .btn-sm { min-height: 36px; padding: 9px var(--geo-s-4); font-size: var(--geo-fs-sm); }
.geo .btn-lg { min-height: 54px; padding: 16px var(--geo-s-8); font-size: var(--geo-fs-lg); }
.geo .btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.geo .form-control,
.geo .form-select,
.geo select.form-control,
.geo textarea.form-control {
  width: 100%; font-family: inherit; font-size: var(--geo-fs-base);
  color: var(--geo-text); background: var(--geo-surface);
  border: 1px solid var(--geo-border-strong); border-radius: var(--geo-r-md);
  padding: 0 var(--geo-s-4); height: 46px;
  transition: border-color var(--geo-t-fast), box-shadow var(--geo-t-fast);
  box-shadow: none;
}
.geo textarea.form-control { height: auto; min-height: 120px; padding: var(--geo-s-3) var(--geo-s-4); line-height: var(--geo-lh-base); }
.geo .form-control:focus, .geo .form-select:focus {
  outline: none; border-color: var(--geo-cyan-400);
  box-shadow: 0 0 0 3px rgba(41,171,226,.16);
}
.geo .form-control::placeholder { color: var(--geo-n-400); }
.geo label, .geo .control-label, .geo .form-label {
  font-size: var(--geo-fs-sm); font-weight: 600; color: var(--geo-text); margin-bottom: 6px;
}
.geo .form-group, .geo .mb-3 { margin-bottom: var(--geo-s-5); }
.geo .input-group-text {
  background: var(--geo-bg-sunken); border: 1px solid var(--geo-border-strong);
  color: var(--geo-text-muted); border-radius: var(--geo-r-md);
}
.geo .form-check-input { width: 18px; height: 18px; accent-color: var(--geo-cyan-500); }
.geo .help-block, .geo .form-text { font-size: var(--geo-fs-xs); color: var(--geo-text-subtle); }

/* --------------------------------------------------------------------------
   Tables
   -------------------------------------------------------------------------- */
.geo .table-responsive {
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-lg);
  background: var(--geo-surface); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.geo .table {
  width: 100%; margin: 0; border-collapse: collapse;
  font-size: var(--geo-fs-base); color: var(--geo-text);
}
.geo .table > thead > tr > th,
.geo .table > thead th {
  background: var(--geo-bg-subtle);
  font-family: var(--geo-font-display); font-weight: 600; font-size: var(--geo-fs-sm);
  color: var(--geo-text); text-align: left; white-space: nowrap;
  padding: var(--geo-s-4) var(--geo-s-5); border-bottom: 1px solid var(--geo-border);
}
.geo .table > tbody > tr > td {
  padding: var(--geo-s-4) var(--geo-s-5);
  border-top: 1px solid var(--geo-border);
  vertical-align: middle;
}
.geo .table > tbody > tr:hover { background: var(--geo-bg-subtle); }
.geo .table-striped > tbody > tr:nth-child(odd) { background: transparent; }
.geo .table td .btn-sm { white-space: nowrap; }

/* Amount columns line up */
.geo .table td:last-child, .geo .table th:last-child { text-align: right; }
.geo .table .text-right, .geo .table .text-end { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   Status labels
   -------------------------------------------------------------------------- */
.geo .label, .geo .badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--geo-r-pill);
  font-size: var(--geo-fs-xs); font-weight: 600; letter-spacing: .01em;
  background: var(--geo-n-100); color: var(--geo-n-600);
}
.geo .label-success, .geo .badge-success, .geo .bg-success { background: var(--geo-success-bg); color: #047857; }
.geo .label-danger,  .geo .badge-danger,  .geo .bg-danger  { background: var(--geo-danger-bg);  color: #B91C1C; }
.geo .label-warning, .geo .badge-warning, .geo .bg-warning { background: var(--geo-warning-bg); color: #B45309; }
.geo .label-info,    .geo .badge-info,    .geo .bg-info    { background: var(--geo-cyan-100);   color: var(--geo-cyan-600); }
.geo .label-primary, .geo .badge-primary, .geo .bg-primary { background: var(--geo-cyan-100);   color: var(--geo-cyan-600); }
.geo .label-default, .geo .badge-secondary { background: var(--geo-n-100); color: var(--geo-n-600); }

/* --------------------------------------------------------------------------
   Alerts
   -------------------------------------------------------------------------- */
.geo .alert {
  border-radius: var(--geo-r-md); border: 1px solid;
  padding: var(--geo-s-4) var(--geo-s-5); margin-bottom: var(--geo-s-6);
  font-size: var(--geo-fs-sm);
}
.geo .alert-success { background: var(--geo-success-bg); border-color: #A7F3D0; color: #047857; }
.geo .alert-danger, .geo .alert-error { background: var(--geo-danger-bg); border-color: #FECACA; color: #B91C1C; }
.geo .alert-warning { background: var(--geo-warning-bg); border-color: #FDE68A; color: #B45309; }
.geo .alert-info    { background: var(--geo-cyan-100);   border-color: var(--geo-cyan-200); color: #0A5C85; }

/* --------------------------------------------------------------------------
   Sidebars
   -------------------------------------------------------------------------- */
.geo .sidebar, .geo #sidebar { margin-bottom: var(--geo-s-6); }
.geo .sidebar .panel, .geo .sidebar .card { margin-bottom: var(--geo-s-4); }

.geo .list-group { border-radius: var(--geo-r-md); overflow: hidden; border: 0; }
.geo .list-group-item {
  border: 0; border-bottom: 1px solid var(--geo-border);
  padding: var(--geo-s-3) var(--geo-s-5);
  background: var(--geo-surface); color: var(--geo-text);
  font-size: var(--geo-fs-base);
  transition: background var(--geo-t-fast), color var(--geo-t-fast);
  display: flex; align-items: center; gap: var(--geo-s-3);
}
.geo .list-group-item:last-child { border-bottom: 0; }
.geo .list-group-item:hover { background: var(--geo-bg-subtle); color: var(--geo-cyan-600); }
.geo .list-group-item.active {
  background: var(--geo-cyan-100); color: var(--geo-cyan-600);
  font-weight: 600; border-left: 3px solid var(--geo-cyan-400);
}
.geo .list-group-item .fa, .geo .list-group-item .fas, .geo .list-group-item i { width: 18px; text-align: center; opacity: .7; }

/* --------------------------------------------------------------------------
   Tabs and pagination
   -------------------------------------------------------------------------- */
.geo .nav-tabs { border-bottom: 1px solid var(--geo-border); gap: var(--geo-s-1); margin-bottom: var(--geo-s-6); }
.geo .nav-tabs > li > a, .geo .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; border-radius: 0;
  padding: var(--geo-s-3) var(--geo-s-4);
  color: var(--geo-text-muted); font-weight: 500; background: transparent;
}
.geo .nav-tabs > li > a:hover, .geo .nav-tabs .nav-link:hover { color: var(--geo-text); border-bottom-color: var(--geo-border-strong); }
.geo .nav-tabs > li.active > a, .geo .nav-tabs .nav-link.active {
  color: var(--geo-cyan-600); border-bottom-color: var(--geo-cyan-400);
  background: transparent; font-weight: 600;
}

.geo .pagination { gap: 4px; }
.geo .pagination > li > a, .geo .pagination .page-link {
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-sm);
  color: var(--geo-text); padding: 8px 13px; background: var(--geo-surface);
}
.geo .pagination .active .page-link, .geo .pagination > .active > a {
  background: var(--geo-cyan-500); border-color: var(--geo-cyan-500); color: #fff;
}

/* --------------------------------------------------------------------------
   Client area home: stock panels and shortcuts
   -------------------------------------------------------------------------- */
.geo .client-home-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: var(--geo-s-6); }
.geo .client-home-panels > div { width: 100% !important; float: none !important; padding: 0 !important; }

.geo .home-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--geo-s-4); margin-bottom: var(--geo-s-8); }
.geo .home-shortcuts > div { width: 100% !important; float: none !important; padding: 0 !important; }
.geo .home-shortcuts a {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--geo-s-3);
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg); padding: var(--geo-s-6);
  color: var(--geo-text); font-weight: 600; min-height: 116px;
  transition: transform var(--geo-t-base), box-shadow var(--geo-t-base), border-color var(--geo-t-base);
}
.geo .home-shortcuts a:hover {
  transform: translateY(-3px); box-shadow: var(--geo-sh-lg);
  border-color: var(--geo-cyan-300); color: var(--geo-cyan-600);
}
.geo .home-shortcuts i, .geo .home-shortcuts .fa {
  font-size: 22px; color: var(--geo-cyan-500);
  width: 46px; height: 46px; border-radius: var(--geo-r-md);
  background: var(--geo-cyan-100); display: grid; place-items: center;
}

/* Notifications strip */
.geo .account-notifications .alert { display: flex; gap: var(--geo-s-3); align-items: flex-start; }

/* --------------------------------------------------------------------------
   Cart and order form
   -------------------------------------------------------------------------- */
.geo #order-standard_cart .product,
.geo #order-standard_cart .products li {
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg); box-shadow: var(--geo-sh-sm);
  transition: transform var(--geo-t-base), box-shadow var(--geo-t-base), border-color var(--geo-t-base);
}
.geo #order-standard_cart .product:hover,
.geo #order-standard_cart .products li:hover {
  transform: translateY(-3px); box-shadow: var(--geo-sh-lg); border-color: var(--geo-cyan-300);
}
.geo #order-standard_cart .product h3,
.geo #order-standard_cart .products li h3 { font-family: var(--geo-font-display); font-weight: 700; }
.geo #order-standard_cart .price,
.geo #order-standard_cart .product-pricing {
  font-family: var(--geo-font-display); font-weight: 800;
  color: var(--geo-text); letter-spacing: -.02em;
}
.geo #order-standard_cart .summary-container,
.geo #order-standard_cart .cart-sidebar {
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg); padding: var(--geo-s-6);
}
.geo .order-summary tr td { padding: var(--geo-s-2) 0; }
.geo .order-summary .total { font-weight: 700; font-size: var(--geo-fs-lg); }

/* Domain checker results */
.geo .domain-checker-result,
.geo .domain-search-results .domain-result {
  border-radius: var(--geo-r-md); border: 1px solid var(--geo-border);
  padding: var(--geo-s-4) var(--geo-s-5); margin-bottom: var(--geo-s-3);
  background: var(--geo-surface);
}
.geo .domain-checker-available { border-color: #A7F3D0; background: var(--geo-success-bg); }
.geo .domain-checker-unavailable { border-color: #FECACA; background: var(--geo-danger-bg); }

/* --------------------------------------------------------------------------
   Invoices and tickets
   -------------------------------------------------------------------------- */
.geo .invoice-container, .geo #invoice { background: var(--geo-surface); border-radius: var(--geo-r-lg); }
.geo .support-ticket-reply,
.geo .ticket-reply {
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-lg);
  margin-bottom: var(--geo-s-5); overflow: hidden; background: var(--geo-surface);
}
.geo .support-ticket-reply-header, .geo .ticket-reply-header {
  background: var(--geo-bg-subtle); padding: var(--geo-s-4) var(--geo-s-5);
  border-bottom: 1px solid var(--geo-border); font-weight: 600; font-size: var(--geo-fs-sm);
}
.geo .support-ticket-reply-content, .geo .ticket-reply-content { padding: var(--geo-s-5); }
/* Staff replies get a brand edge so the thread is scannable */
.geo .support-ticket-reply.staff, .geo .ticket-reply.staff { border-left: 3px solid var(--geo-cyan-400); }

/* --------------------------------------------------------------------------
   Modals and dropdowns
   -------------------------------------------------------------------------- */
.geo .modal-content {
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-lg);
  background: var(--geo-surface); box-shadow: var(--geo-sh-xl);
}
.geo .modal-header, .geo .modal-footer { border-color: var(--geo-border); padding: var(--geo-s-5) var(--geo-s-6); }
.geo .modal-body { padding: var(--geo-s-6); }
.geo .dropdown-menu {
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-md);
  box-shadow: var(--geo-sh-lg); background: var(--geo-surface); padding: var(--geo-s-2);
}
.geo .dropdown-item { border-radius: var(--geo-r-sm); padding: var(--geo-s-2) var(--geo-s-4); color: var(--geo-text); }
.geo .dropdown-item:hover { background: var(--geo-bg-sunken); color: var(--geo-cyan-600); }

/* --------------------------------------------------------------------------
   Utility overrides for stock markup
   -------------------------------------------------------------------------- */
.geo .well {
  background: var(--geo-bg-subtle); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-md); padding: var(--geo-s-5); box-shadow: none;
}
.geo hr { border: 0; border-top: 1px solid var(--geo-border); margin: var(--geo-s-8) 0; }
.geo .text-muted { color: var(--geo-text-muted) !important; }
.geo .text-center { text-align: center; }
.geo a.text-primary, .geo .text-primary { color: var(--geo-link) !important; }
.geo blockquote { border-left: 3px solid var(--geo-cyan-400); padding-left: var(--geo-s-5); color: var(--geo-text-muted); }
.geo code, .geo pre {
  font-family: var(--geo-font-mono); font-size: .9em;
  background: var(--geo-bg-sunken); border-radius: var(--geo-r-sm);
  padding: 2px 6px; color: var(--geo-text);
}
.geo pre { padding: var(--geo-s-4); overflow-x: auto; }

/* Stock theme leaves footer credit markup around; keep it out of our footer. */
.geo .footer-push, .geo #footer .container > .row > div > .text-center small { display: none; }

/* --------------------------------------------------------------------------
   Dashboard panels (rendered by clientareahome.tpl from the menu-item API)
   -------------------------------------------------------------------------- */
.geo .client-home-panels {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--geo-s-6); align-items: start;
}
.geo-panel {
  --geo-panel-accent: var(--geo-cyan-400);
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg);
  box-shadow: var(--geo-sh-sm);
  overflow: hidden;
}
.geo-panel__head {
  display: flex; align-items: center; gap: var(--geo-s-3);
  padding: var(--geo-s-4) var(--geo-s-6);
  background: var(--geo-bg-subtle);
  border-bottom: 1px solid var(--geo-border);
  border-left: 3px solid var(--geo-panel-accent);
  font-family: var(--geo-font-display); font-weight: 600; font-size: var(--geo-fs-base);
  color: var(--geo-text);
}
.geo-panel__head i { color: var(--geo-panel-accent); width: 18px; text-align: center; }
.geo-panel__body { padding: var(--geo-s-6); }
.geo-panel__body p:last-child { margin-bottom: 0; }
.geo-panel__body table { width: 100%; }
.geo-panel__body td { padding: var(--geo-s-2) 0; border-bottom: 1px solid var(--geo-border); }
.geo-panel__body tr:last-child td { border-bottom: 0; }
.geo-panel__foot {
  padding: var(--geo-s-4) var(--geo-s-6);
  background: var(--geo-bg-subtle); border-top: 1px solid var(--geo-border);
  font-size: var(--geo-fs-sm);
}

/* --------------------------------------------------------------------------
   Mandate form width

   780px (--narrow) was too tight for a two-column form with a signature pad;
   fields were crowding and the pad overflowed its fieldset.
   -------------------------------------------------------------------------- */
.geo-container--form { max-width: 960px; }
.geo-container--form .geo-card { padding: clamp(var(--geo-s-6), 4vw, var(--geo-s-10)); }
.geo-container--form .geo-fieldset { padding: var(--geo-s-6) var(--geo-s-6) var(--geo-s-5); }
.geo-container--form .geo-fieldset > * { min-width: 0; }

/* --------------------------------------------------------------------------
   Signature pad (mandate form)
   -------------------------------------------------------------------------- */
.geo-sigpad {
  position: relative;
  border: 1px dashed var(--geo-border-strong);
  border-radius: var(--geo-r-md);
  background: var(--geo-surface);
  overflow: hidden;
  height: 200px;               /* container owns the height so the absolutely
                                  positioned Clear button has something to sit in */
  max-width: 100%;
}
.geo-sigpad canvas {
  display: block; width: 100%; height: 100%;
  touch-action: none;          /* let the pad own the gesture, not the page scroll */
  cursor: crosshair;
  max-width: 100%;
}
.geo-sigpad canvas.is-invalid { outline: 2px solid var(--geo-danger); outline-offset: -2px; }
.geo-sigpad__clear {
  position: absolute; top: 8px; right: 8px;
  background: var(--geo-bg-sunken); border: 1px solid var(--geo-border);
  color: var(--geo-text-muted); font: 600 12px/1 var(--geo-font-body);
  padding: 7px 12px; border-radius: var(--geo-r-sm); cursor: pointer;
}
.geo-sigpad__clear:hover { color: var(--geo-text); border-color: var(--geo-border-strong); }
.geo-sigpad__hint {
  position: absolute; inset: 0; display: grid; place-items: center;
  pointer-events: none; color: var(--geo-text-subtle); font-size: var(--geo-fs-sm);
}
.geo-sigview {
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-md);
  background: #fff; padding: var(--geo-s-3); max-width: 340px;
}
.geo-sigview img { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------------------
   Order form / cart

   This install uses the "modern" order form (#order-modern), but the selectors
   below are written against [id^="order-"] so they hold if the order form
   template is ever switched. The visible faults were product tiles inheriting
   dark text on a dark card, and the category list rendering full-bleed.
   -------------------------------------------------------------------------- */
.geo [id^="order-"] .title-bar {
  margin-bottom: var(--geo-s-8);
  padding-bottom: var(--geo-s-5);
  border-bottom: 1px solid var(--geo-border);
}
.geo [id^="order-"] .title-bar h1,
.geo [id^="order-"] .title-bar h2 { margin: 0; }

/* Product tiles.

   The order form ships its own stylesheet that hard-sets a light card
   background. In dark mode our text token then rendered near-white on that
   light card, which is what made the tiles unreadable. Background and colour
   are therefore set together, with !important to beat the order form sheet, so
   the pair can never disagree in either theme. */
.geo [id^="order-"] .product {
  display: flex; flex-direction: column;
  background: var(--geo-surface) !important;
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg);
  box-shadow: var(--geo-sh-sm);
  padding: var(--geo-s-6);
  margin-bottom: var(--geo-s-5);
  color: var(--geo-text) !important;
  transition: transform var(--geo-t-base), box-shadow var(--geo-t-base), border-color var(--geo-t-base);
}
/* Anything the order form paints onto inner elements gets neutralised too. */
.geo [id^="order-"] .product > *,
.geo [id^="order-"] .product span,
.geo [id^="order-"] .product div { background-color: transparent !important; }

/* Its "Order Now" button ships Bootstrap green; bring it onto brand. */
.geo [id^="order-"] .product .btn,
.geo [id^="order-"] .product a.btn-success,
.geo [id^="order-"] .product button.btn-success {
  background: var(--geo-grad-brand) !important;
  border-color: transparent !important;
  color: #fff !important;
  width: 100%; margin-top: var(--geo-s-5);
}
.geo [id^="order-"] .product:hover {
  transform: translateY(-3px); box-shadow: var(--geo-sh-lg); border-color: var(--geo-cyan-300);
}
.geo [id^="order-"] .product h3,
.geo [id^="order-"] .product h4,
.geo [id^="order-"] .product .product-name {
  font-family: var(--geo-font-display); font-weight: 700;
  color: var(--geo-text); margin-bottom: var(--geo-s-3);
}
.geo [id^="order-"] .product p,
.geo [id^="order-"] .product li,
.geo [id^="order-"] .product .product-desc { color: var(--geo-text-muted); }
.geo [id^="order-"] .product ul {
  list-style: none; padding: 0; margin: var(--geo-s-4) 0 0;
  display: grid; gap: var(--geo-s-2); font-size: var(--geo-fs-sm);
}
.geo [id^="order-"] .product ul li { display: flex; gap: var(--geo-s-2); align-items: flex-start; }
.geo [id^="order-"] .product .price,
.geo [id^="order-"] .product .product-price {
  margin-top: auto; padding-top: var(--geo-s-5);
  font-family: var(--geo-font-display); font-weight: 800;
  font-size: var(--geo-fs-xl); color: var(--geo-text); letter-spacing: -.02em;
}

/* Category navigation: a contained list, not a full-bleed stack */
.geo [id^="order-"] .categories,
.geo [id^="order-"] .product-categories,
.geo [id^="order-"] nav.categories {
  background: var(--geo-surface);
  border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg);
  padding: var(--geo-s-2);
  margin-bottom: var(--geo-s-6);
  display: flex; flex-wrap: wrap; gap: 4px;
  list-style: none;
}
.geo [id^="order-"] .categories li,
.geo [id^="order-"] .product-categories li { list-style: none; }
.geo [id^="order-"] .categories a,
.geo [id^="order-"] .product-categories a {
  display: block; padding: var(--geo-s-3) var(--geo-s-5);
  border-radius: var(--geo-r-md); color: var(--geo-text);
  font-size: var(--geo-fs-sm); font-weight: 500; white-space: nowrap;
}
.geo [id^="order-"] .categories a:hover,
.geo [id^="order-"] .product-categories a:hover { background: var(--geo-bg-sunken); color: var(--geo-cyan-600); }
.geo [id^="order-"] .categories a.active,
.geo [id^="order-"] .product-categories a.active,
.geo [id^="order-"] .categories .active > a { background: var(--geo-cyan-100); color: var(--geo-cyan-600); font-weight: 600; }

/* Summary / totals column */
.geo [id^="order-"] .summary-container,
.geo [id^="order-"] .cart-sidebar,
.geo [id^="order-"] #ordersummary {
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg); padding: var(--geo-s-6);
  position: sticky; top: calc(var(--geo-header-h) + var(--geo-s-6));
}

/* Checkout steps */
.geo .cart-steps, .geo .checkout-steps, .geo #cartSteps {
  display: flex; flex-wrap: wrap; gap: var(--geo-s-2);
  list-style: none; margin: 0 0 var(--geo-s-8); padding: 0;
  counter-reset: geostep;
}
.geo .cart-steps li, .geo .checkout-steps li, .geo #cartSteps li {
  flex: 1 1 160px; position: relative;
  padding: var(--geo-s-4) var(--geo-s-5);
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-md);
  font-size: var(--geo-fs-sm); font-weight: 600; color: var(--geo-text-muted);
  display: flex; align-items: center; gap: var(--geo-s-3);
}
.geo .cart-steps li::before, .geo .checkout-steps li::before, .geo #cartSteps li::before {
  counter-increment: geostep; content: counter(geostep);
  width: 24px; height: 24px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--geo-bg-sunken); color: var(--geo-text-muted);
  font-size: var(--geo-fs-xs); font-weight: 700;
}
.geo .cart-steps li.active, .geo .checkout-steps li.active, .geo #cartSteps li.active {
  border-color: var(--geo-cyan-400); color: var(--geo-text); background: var(--geo-cyan-100);
}
.geo .cart-steps li.active::before, .geo .checkout-steps li.active::before, .geo #cartSteps li.active::before {
  background: var(--geo-grad-brand); color: #fff;
}

/* Domain choice radio rows on the cart */
.geo #order-standard_cart .domain-selection-options label,
.geo .cart-domain-option {
  display: flex; align-items: center; gap: var(--geo-s-3);
  padding: var(--geo-s-4) var(--geo-s-5); margin-bottom: var(--geo-s-2);
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-md);
  background: var(--geo-surface); cursor: pointer; font-weight: 500;
  transition: border-color var(--geo-t-fast), background var(--geo-t-fast);
}
.geo #order-standard_cart .domain-selection-options label:hover { border-color: var(--geo-cyan-300); }

@media (max-width: 900px) {
  .geo #order-standard_cart,
  .geo #order-premium_comparison,
  .geo #order-boxes { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Login / register (login.tpl)
   -------------------------------------------------------------------------- */
.geo-auth {
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - var(--geo-header-h));
}
.geo-auth__panel { display: grid; place-items: center; padding: clamp(var(--geo-s-8), 5vw, var(--geo-s-16)); }
.geo-auth__inner { width: 100%; max-width: 420px; }
.geo-auth__head { margin-bottom: var(--geo-s-8); }
.geo-auth__head h1 { font-size: clamp(1.875rem, 3.4vw, var(--geo-fs-3xl)); margin-bottom: var(--geo-s-2); }
.geo-auth__head p { margin: 0; }
.geo-auth__alt { margin-top: var(--geo-s-6); font-size: var(--geo-fs-sm); text-align: center; }
.geo-auth__back { margin-top: var(--geo-s-8); font-size: var(--geo-fs-sm); text-align: center; }

/* password reveal */
.geo-pw { position: relative; }
.geo-pw .geo-input { padding-right: 48px; }
.geo-pw__toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border: 0; background: transparent; cursor: pointer;
  color: var(--geo-text-subtle); display: grid; place-items: center; border-radius: var(--geo-r-sm);
}
.geo-pw__toggle:hover { color: var(--geo-text); background: var(--geo-bg-sunken); }
.geo-pw__toggle svg { width: 19px; height: 19px; }
.geo-pw__toggle[aria-pressed="true"] { color: var(--geo-cyan-600); }

/* brand side */
.geo-auth__brand { position: relative; overflow: hidden; background: var(--geo-grad-deep); display: grid; place-items: center; }
.geo-auth__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.geo-auth__veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(800px 420px at 70% 20%, rgba(41,171,226,.30), transparent 62%),
    linear-gradient(180deg, rgba(11,18,48,.45) 0%, rgba(11,18,48,.85) 100%);
}
.geo-auth__brandinner { position: relative; z-index: 1; padding: clamp(var(--geo-s-8), 5vw, var(--geo-s-16)); max-width: 460px; color: #fff; }
.geo-auth__logo { height: 40px; width: auto; margin-bottom: var(--geo-s-8); }
.geo-auth__brandinner h2 { color: #fff; font-size: var(--geo-fs-2xl); margin-bottom: var(--geo-s-6); }
.geo-auth__brandinner ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--geo-s-4); }
.geo-auth__brandinner li { display: flex; gap: var(--geo-s-3); align-items: flex-start; color: rgba(255,255,255,.82); font-size: var(--geo-fs-base); }
.geo-auth__brandinner li svg { width: 20px; height: 20px; color: var(--geo-cyan-300); flex: none; margin-top: 2px; }

@media (max-width: 900px) {
  .geo-auth { grid-template-columns: 1fr; min-height: 0; }
  .geo-auth__brand { display: none; }
  .geo-auth__panel { padding-block: var(--geo-s-12); }
}

/* --------------------------------------------------------------------------
   Dashboard (clientareahome.tpl)
   -------------------------------------------------------------------------- */
.geo-dashhead {
  font-size: var(--geo-fs-lg); font-weight: 600;
  margin: var(--geo-s-12) 0 var(--geo-s-5);
}
.geo-dashhead:first-of-type { margin-top: var(--geo-s-8); }

.geo-dashstats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: var(--geo-s-4); }
.geo-dashstat {
  display: block; background: var(--geo-surface);
  border: 1px solid var(--geo-border); border-radius: var(--geo-r-lg);
  padding: var(--geo-s-6); color: var(--geo-text);
  transition: transform var(--geo-t-base), box-shadow var(--geo-t-base), border-color var(--geo-t-base);
}
.geo-dashstat:hover { transform: translateY(-3px); box-shadow: var(--geo-sh-lg); border-color: var(--geo-cyan-300); color: var(--geo-text); }
.geo-dashstat__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--geo-r-md); background: var(--geo-cyan-100); color: var(--geo-cyan-600);
  margin-bottom: var(--geo-s-4);
}
.geo-dashstat__icon svg { width: 20px; height: 20px; }
.geo-dashstat__n {
  display: block; font-family: var(--geo-font-display); font-weight: 800;
  font-size: var(--geo-fs-2xl); line-height: 1; letter-spacing: -.02em;
  margin-bottom: 4px; font-variant-numeric: tabular-nums;
}
.geo-dashstat__l { display: block; font-size: var(--geo-fs-sm); color: var(--geo-text-muted); }

/* Something needing action reads as different in form, not just colour. */
.geo-dashstat.is-alert { border-color: #FCD34D; background: var(--geo-warning-bg); }
.geo-dashstat.is-alert .geo-dashstat__icon { background: #FDE68A; color: #B45309; }
.geo-dashstat.is-alert .geo-dashstat__n,
.geo-dashstat.is-alert .geo-dashstat__l { color: #B45309; }

.geo-dashgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); gap: var(--geo-s-4); }
.geo-dashcard {
  display: flex; flex-direction: column; gap: 6px;
  background: var(--geo-surface); border: 1px solid var(--geo-border);
  border-radius: var(--geo-r-lg); padding: var(--geo-s-6); color: var(--geo-text);
  transition: transform var(--geo-t-base), box-shadow var(--geo-t-base), border-color var(--geo-t-base);
}
.geo-dashcard:hover { transform: translateY(-3px); box-shadow: var(--geo-sh-lg); border-color: var(--geo-cyan-300); color: var(--geo-text); }
.geo-dashcard__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: var(--geo-r-md); background: var(--geo-cyan-100); color: var(--geo-cyan-600);
  margin-bottom: var(--geo-s-3);
}
.geo-dashcard__icon svg { width: 20px; height: 20px; }
.geo-dashcard strong { font-family: var(--geo-font-display); font-weight: 600; font-size: var(--geo-fs-base); }
.geo-dashcard span:not(.geo-dashcard__icon) { font-size: var(--geo-fs-sm); color: var(--geo-text-muted); line-height: 1.5; }

@media (max-width: 720px) {
  .geo .table > thead th, .geo .table > tbody > tr > td { padding: var(--geo-s-3) var(--geo-s-4); }
  .geo .card-body, .geo .panel-body { padding: var(--geo-s-5); }
  .geo-dashstats { grid-template-columns: 1fr 1fr; }
  .geo-dashstat, .geo-dashcard { padding: var(--geo-s-5); }
}


/* Geometric :: dark-theme fixes for WHMCS stock list tables (DataTables) */
.geo .table-list > tbody > tr > td, .geo .table-list > tbody > tr:hover > td, .geo table.dataTable > tbody > tr > td, .geo table.dataTable > tbody > tr > td.sorting_1, .geo table.dataTable > tbody > tr > td.sorting_2, .geo table.dataTable > tbody > tr > td.sorting_3 { background-color: transparent; }
.geo table.dataTable > thead > tr > th.sorting, .geo table.dataTable > thead > tr > th.sorting_asc, .geo table.dataTable > thead > tr > th.sorting_desc { background-color: transparent; }
.geo .dataTables_wrapper .dataTables_filter input, .geo .dataTables_wrapper .dataTables_length select { background-color: rgba(255,255,255,.06); color: #eef3ff; border: 1px solid rgba(255,255,255,.18); }
.geo .dataTables_wrapper .dataTables_info, .geo .dataTables_wrapper .dataTables_length, .geo .dataTables_wrapper .dataTables_filter { color: #eef3ff; }
.geo .dataTables_wrapper .paginate_button { color: #eef3ff !important; }