/* ==========================================================================
   Webhoster theme for WHMCS 8.x
   Layered on top of the Six theme Bootstrap 3 base. Everything lives here so
   the system .tpl files stay untouched and survive WHMCS updates.

   Contents
     1. Fonts            6. Home hero           11. Sidebar / nav
     2. Tokens           7. Home shortcuts      12. Cart / order form
     3. Base             8. Panels / cards      13. Invoices / tickets
     4. Buttons          9. Forms               14. Footer
     5. Header / nav    10. Tables / alerts     15. Misc + responsive
   ========================================================================== */

/* --------------------------------------------------------------- 1. Fonts */
@font-face{font-family:'Hind';font-style:normal;font-weight:300;font-display:swap;
  src:url(../fonts/webhoster/hind-5au19_a8oxmifmjaerysjq.woff2) format('woff2');}
@font-face{font-family:'Hind';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/webhoster/hind-5au69_a8oxmidgl4ba.woff2) format('woff2');}
@font-face{font-family:'Hind';font-style:normal;font-weight:500;font-display:swap;
  src:url(../fonts/webhoster/hind-5au19_a8oxmifjpberysjq.woff2) format('woff2');}
@font-face{font-family:'Hind';font-style:normal;font-weight:600;font-display:swap;
  src:url(../fonts/webhoster/hind-5au19_a8oxmiflzcerysjq.woff2) format('woff2');}
@font-face{font-family:'Hind';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/webhoster/hind-5au19_a8oxmifnjderysjq.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/webhoster/lato-s6u9w4bmutphh6uvswipgq.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:italic;font-weight:700;font-display:swap;
  src:url(../fonts/webhoster/lato-s6u_w4bmutphjxsi5wq_gwft.woff2) format('woff2');}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(../fonts/webhoster/lato-s6u9w4bmutphh50xswipgq.woff2) format('woff2');}

/* -------------------------------------------------------------- 2. Tokens */
/* Two rules govern this palette:
     - A colour used as a BACKGROUND behind white text needs >=4.5:1.
     - A colour used as TEXT on a light surface needs >=4.5:1.
   #FF643F satisfies neither (2.94:1 against white both ways), so the brand
   coral is kept for decoration and paired with darker siblings that carry
   text. Measured ratios are noted per token. */
:root{
  /* Navy ------------------------------------------------------------- */
  --wh-navy:#1A3E7C;            /* white on navy 10.38:1 */
  --wh-navy-dark:#152F5E;
  --wh-navy-deep:#042551;

  /* Coral ------------------------------------------------------------ */
  --wh-coral:#FF643F;           /* DECORATION ONLY: rules, bars, icons */
  --wh-coral-btn:#D44420;       /* button fill, white text  4.52:1 */
  --wh-coral-btn-dark:#B93714;  /* button hover             5.93:1 */
  --wh-coral-ink:#C63A18;       /* coral as text on light   5.22:1 */
  --wh-coral-on-navy:#FF9270;   /* coral as text on navy    4.62:1 */
  --wh-coral-dark:#E9502B;      /* legacy alias, decoration only */
  --wh-coral-alt:#FE575B;       /* decorative danger tint */

  /* Support ---------------------------------------------------------- */
  --wh-teal:#0B6B95;            /* link on white            5.91:1 */
  --wh-teal-dark:#0A5F85;
  --wh-tint:#EDF1FC;
  --wh-tint-2:#DDE5F8;
  --wh-slate:#2E354E;
  --wh-muted:#5B6275;           /* was #7A7A7A = 4.00:1 (failed) -> 5.68:1 */
  --wh-muted-soft:#9AA0B0;      /* DECORATION ONLY: never text */
  --wh-line:#DFE5F3;
  --wh-bg:#F5F7FC;

  /* Status ----------------------------------------------------------- */
  --wh-green:#1E7A34;           /* text/fill, white on it   5.40:1 */
  --wh-green-fill:#2BA84A;      /* decorative fill only */
  --wh-amber:#B85200;           /* text/fill, white on it   4.95:1 */
  --wh-amber-fill:#F0A32E;      /* decorative fill only */
  --wh-danger:#C0392B;          /* text/fill, white on it   5.05:1 */

  /* Shape ------------------------------------------------------------ */
  --wh-radius:8px;
  --wh-radius-lg:14px;
  --wh-pill:40px;
  --wh-shadow:0 6px 24px rgba(26,62,124,.08);
  --wh-shadow-lg:0 14px 40px rgba(26,62,124,.13);

  /* Spacing scale ----------------------------------------------------
     One 4px-based scale for the whole theme. Section 20 replaces the ad-hoc
     values that produced the uneven gaps. */
  --wh-sp-1:4px;
  --wh-sp-2:8px;
  --wh-sp-3:12px;
  --wh-sp-4:16px;
  --wh-sp-5:20px;
  --wh-sp-6:24px;
  --wh-sp-7:32px;
  --wh-sp-8:48px;

  --wh-font:'Hind',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
  --wh-head:'Lato','Hind',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---------------------------------------------------------------- 3. Base */
body{
  font-family:var(--wh-font);
  font-size:15px;
  line-height:1.75;
  color:var(--wh-slate);
  background:var(--wh-bg);
}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4{
  font-family:var(--wh-head);
  font-weight:700;
  color:var(--wh-navy);
  letter-spacing:-.2px;
}
h1,.h1{font-size:34px}
h2,.h2{font-size:28px}
h3,.h3{font-size:22px}
a{color:var(--wh-teal);transition:color .2s ease}
a:hover,a:focus{color:var(--wh-coral-ink);text-decoration:none}
hr{border-top-color:var(--wh-line)}
.text-muted{color:var(--wh-muted)!important}
blockquote{border-left:4px solid var(--wh-coral);background:var(--wh-tint);
  padding:14px 20px;border-radius:0 var(--wh-radius) var(--wh-radius) 0;font-size:15px}

/* ------------------------------------------------------------- 4. Buttons */
.btn{
  font-family:var(--wh-font);
  font-weight:600;
  letter-spacing:.3px;
  border-radius:var(--wh-pill);
  padding:9px 26px;
  border:none;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease;
}
.btn:hover,.btn:focus{transform:translateY(-2px);outline:none}
.btn-lg{padding:13px 38px;font-size:16px}
.btn-sm{padding:5px 16px;font-size:13px}
.btn-xs{padding:2px 12px;font-size:12px}

.btn-primary,.btn-info{background:var(--wh-coral-btn);color:#fff}
.btn-primary:hover,.btn-primary:focus,.btn-primary:active,.btn-primary.active,
.btn-info:hover,.btn-info:focus,.btn-info:active{
  background:var(--wh-coral-btn-dark);color:#fff;box-shadow:0 8px 20px rgba(212,68,32,.30);
}
.btn-default{background:var(--wh-tint);color:var(--wh-navy)}
.btn-default:hover,.btn-default:focus,.btn-default:active{background:#DDE5F8;color:var(--wh-navy)}
.btn-success{background:var(--wh-green);color:#fff}
.btn-success:hover,.btn-success:focus,.btn-success:active{background:#238B3D;color:#fff}
.btn-danger{background:var(--wh-danger);color:#fff}
.btn-danger:hover,.btn-danger:focus,.btn-danger:active{background:#A32F23;color:#fff}
.btn-warning{background:var(--wh-amber);color:#fff}
.btn-warning:hover,.btn-warning:focus,.btn-warning:active{background:#D88C1B;color:#fff}
.btn-link{color:var(--wh-teal);border-radius:0}
.btn-link:hover{color:var(--wh-coral-ink);transform:none}
.btn-group > .btn:first-child:not(:last-child){border-radius:var(--wh-pill) 0 0 var(--wh-pill)}
.btn-group > .btn:last-child:not(:first-child){border-radius:0 var(--wh-pill) var(--wh-pill) 0}

/* --------------------------------------------------- 5. Header + main nav */
/* Six stacks #header (logo + utility) above #main-menu (primary nav).
   Webhoster reads as one navy bar, so both are painted and the seam removed. */
body section#header{
  background:var(--wh-navy);
  border:none;
  padding:0;
  position:relative;
}
body section#header .container{position:relative}

/* utility strip */
body section#header .top-nav{
  list-style:none;
  margin:0;
  padding:0;
  float:right;
  display:flex;
  align-items:center;
  min-height:74px;
}
body section#header .top-nav > li{position:relative;margin-left:6px}
body section#header .top-nav > li > a{
  color:rgba(255,255,255,.9);
  font-size:13.5px;
  font-weight:600;
  padding:8px 12px;
  display:inline-block;
  transition:color .2s ease;
}
body section#header .top-nav > li > a:hover{color:var(--wh-coral-on-navy)}
body section#header .top-nav > li.primary-action > a,
body section#header .top-nav > li.primary-action > a.btn{
  background:var(--wh-coral-btn);
  color:#fff;
  border-radius:var(--wh-pill);
  padding:9px 26px;
  font-weight:600;
  border:none;
  box-shadow:none;
}
body section#header .top-nav > li.primary-action > a:hover,
body section#header .top-nav > li.primary-action > a.btn:hover{
  background:var(--wh-coral-btn-dark);color:#fff;transform:translateY(-2px);
}

/* brand */
body section#header .logo{
  display:inline-block;
  padding:16px 0;
  line-height:1;
}
body section#header .logo img{max-height:40px;width:auto}
body section#header .logo-text{
  color:#fff;
  font-family:var(--wh-head);
  font-weight:900;
  font-size:26px;
  letter-spacing:-.5px;
}
body section#header .logo-text:hover{color:#fff}

/* primary navigation */
body section#main-menu{background:var(--wh-navy);border:none}
body section#main-menu .navbar,
#nav.navbar-main,
.navbar-default.navbar-main{
  background:var(--wh-navy);
  border:none;
  border-radius:0;
  margin-bottom:0;
  min-height:auto;
  box-shadow:none;
}
body section#main-menu{box-shadow:0 3px 18px rgba(4,37,81,.20)}

.navbar-main .navbar-nav > li > a,
body section#main-menu .navbar-nav > li > a{
  color:rgba(255,255,255,.92);
  font-weight:600;
  font-size:13.5px;
  text-transform:uppercase;
  letter-spacing:.7px;
  padding:18px 16px;
  transition:color .2s ease;
  background:transparent;
}
.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus,
body section#main-menu .navbar-nav > li > a:hover,
body section#main-menu .navbar-nav > .active > a,
body section#main-menu .navbar-nav > .open > a{
  color:var(--wh-coral-on-navy);
  background:transparent;
}
.navbar-default .navbar-toggle{border-color:rgba(255,255,255,.35);margin-top:16px}
.navbar-default .navbar-toggle .icon-bar{background-color:#fff}
.navbar-default .navbar-toggle:hover,.navbar-default .navbar-toggle:focus{background:rgba(255,255,255,.12)}
.navbar-default .navbar-collapse,.navbar-default .navbar-form{border-color:rgba(255,255,255,.12)}

/* dropdowns */
.dropdown-menu{
  border:none;
  border-radius:var(--wh-radius);
  box-shadow:var(--wh-shadow-lg);
  padding:8px 0;
  margin-top:2px;
}
.dropdown-menu > li > a{
  padding:9px 20px;color:var(--wh-slate);font-weight:500;
  transition:background .18s ease,color .18s ease;
}
.dropdown-menu > li > a:hover,.dropdown-menu > li > a:focus{background:var(--wh-tint);color:var(--wh-navy)}
.dropdown-menu > .active > a,.dropdown-menu > .active > a:hover{background:var(--wh-tint);color:var(--wh-navy)}
.dropdown-header{color:var(--wh-muted);text-transform:uppercase;font-size:11px;letter-spacing:.8px;font-weight:700}
body section#header .top-nav .dropdown-menu{margin-top:6px}

/* ------------------------------------------------------------ 6. Home hero */
body section#home-banner{
  background:linear-gradient(135deg,var(--wh-navy) 0%,var(--wh-navy-deep) 100%);
  border:none;
  padding:78px 0 86px;
  margin-bottom:0;
  position:relative;
}
body section#home-banner h2{
  color:#fff;
  font-family:var(--wh-head);
  font-weight:900;
  font-size:42px;
  line-height:1.25;
  margin:0 0 34px;
  letter-spacing:-.6px;
}
body section#home-banner .input-group{box-shadow:0 16px 44px rgba(4,37,81,.28);border-radius:var(--wh-pill)}
body section#home-banner .input-group .form-control{
  height:60px;
  border:none;
  border-radius:var(--wh-pill) 0 0 var(--wh-pill);
  padding:0 30px;
  font-size:16px;
  box-shadow:none;
}
body section#home-banner .input-group .form-control:focus{box-shadow:none}
body section#home-banner .input-group-btn .btn{
  height:60px;
  border-radius:0;
  padding:0 32px;
  font-size:15px;
  background:var(--wh-coral-btn);
  color:#fff;
}
body section#home-banner .input-group-btn .btn:hover{background:var(--wh-coral-btn-dark);transform:none}
body section#home-banner .input-group-btn:last-child .btn:last-child{border-radius:0 var(--wh-pill) var(--wh-pill) 0}
body section#home-banner .btn.transfer{background:rgba(255,255,255,.16);color:#fff}
body section#home-banner .btn.transfer:hover{background:rgba(255,255,255,.26)}

/* ------------------------------------------------------- 7. Home shortcuts */
body .home-shortcuts{
  background:transparent;
  border:none;
  margin:-46px 0 46px;
  position:relative;
  z-index:2;
}
body .home-shortcuts .lead{
  color:var(--wh-navy);
  font-family:var(--wh-head);
  font-weight:700;
  font-size:21px;
  padding-top:26px;
}
body .home-shortcuts ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
}
body .home-shortcuts ul > li{
  flex:1 1 0;
  min-width:150px;
  padding:0 9px;
  margin:0;
  border:none;
}
body .home-shortcuts ul > li > a{
  display:block;
  background:#fff;
  border-radius:var(--wh-radius-lg);
  box-shadow:var(--wh-shadow);
  padding:28px 16px 22px;
  text-align:center;
  color:var(--wh-navy);
  transition:transform .2s ease,box-shadow .2s ease;
  height:100%;
}
body .home-shortcuts ul > li > a:hover{
  transform:translateY(-5px);
  box-shadow:var(--wh-shadow-lg);
  color:var(--wh-navy);
}
body .home-shortcuts ul > li > a i{
  font-size:30px;
  color:var(--wh-coral);
  margin-bottom:14px;
  display:block;
  transition:transform .2s ease;
}
body .home-shortcuts ul > li > a:hover i{transform:scale(1.12)}
body .home-shortcuts ul > li > a p{
  margin:0;
  font-weight:600;
  font-size:14.5px;
  line-height:1.45;
}
body .home-shortcuts ul > li > a p span{color:var(--wh-coral-ink);font-weight:700}

/* announcements on the portal home */
.announcement-single{
  background:#fff;
  border-radius:var(--wh-radius-lg);
  box-shadow:var(--wh-shadow);
  padding:22px 26px;
  margin-bottom:20px;
}
.announcement-single h3{margin-top:0;font-size:20px}
.announcement-single blockquote{margin-bottom:0}

/* ------------------------------------------------- 8. Panels / page header */
body section#main-body{background:transparent;padding:34px 0 50px}
.page-header h1,.page-header h2{margin-top:0;font-size:32px}
/* pageheader.tpl renders .header-lined INSIDE the content column, so it is a
   page title block, not a full-width band. #header-inner is kept as an opt-in
   band for anyone who adds one to header.tpl. */
.header-lined{
  border-bottom:1px solid var(--wh-line);
  padding:0 0 14px;
  margin:0 0 26px;
  position:relative;
}
.header-lined:after{
  content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;
  background:var(--wh-coral);border-radius:3px;
}
html[dir="rtl"] .header-lined:after{left:auto;right:0}
.header-lined h1{
  color:var(--wh-navy);font-family:var(--wh-head);font-weight:700;
  font-size:31px;margin:0 0 4px;
}
.header-lined h1 small{color:var(--wh-muted);font-size:.55em;display:block;margin-top:6px}
.header-lined .breadcrumb{background:transparent;padding:0;margin:0;font-size:13px}
.header-lined .breadcrumb a{color:var(--wh-teal)}
.header-lined .breadcrumb a:hover{color:var(--wh-coral)}
.header-lined .breadcrumb > .active{color:var(--wh-muted)}
.page-header{border-bottom:1px solid var(--wh-line);margin:0 0 26px;padding-bottom:12px}

/* optional full-width navy band */
#header-inner{background:var(--wh-navy);color:#fff;padding:52px 0 46px;margin-bottom:34px}
#header-inner h1,#header-inner h2{color:#fff;margin:0}
#header-inner #header-inner .breadcrumb a{color:rgba(255,255,255,.85)}
#header-inner .breadcrumb a:hover{color:var(--wh-coral)}
#header-inner .breadcrumb > .active{color:rgba(255,255,255,.6)}

.panel{
  border:none;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow);
  margin-bottom:26px;overflow:hidden;
}
.panel > .panel-heading{
  background:#fff;border-bottom:1px solid var(--wh-line);color:var(--wh-navy);
  font-family:var(--wh-head);font-weight:700;font-size:15px;padding:16px 22px;border-radius:0;
}
.panel-body{padding:22px}
.panel-primary > .panel-heading,
.panel-info > .panel-heading{background:var(--wh-navy);color:#fff;border-bottom:none}
.panel-success > .panel-heading{background:var(--wh-green);color:#fff;border-bottom:none}
.panel-danger > .panel-heading{background:var(--wh-danger);color:#fff;border-bottom:none}
.panel-warning > .panel-heading{background:var(--wh-amber);color:#fff;border-bottom:none}
.panel-footer{background:var(--wh-tint);border-top:1px solid var(--wh-line)}
.well{background:var(--wh-tint);border:none;border-radius:var(--wh-radius-lg);box-shadow:none}

.client-home-panels .panel,.panel-hover{transition:transform .2s ease,box-shadow .2s ease}
.client-home-panels .panel:hover,.panel-hover:hover{
  box-shadow:var(--wh-shadow-lg);transform:translateY(-3px);
}

/* ---------------------------------------------------------------- 9. Forms */
.form-control{
  height:auto;padding:11px 16px;border:1px solid var(--wh-line);
  border-radius:var(--wh-radius);box-shadow:none;color:var(--wh-slate);
  transition:border-color .18s ease,box-shadow .18s ease;
}
.form-control:focus{border-color:var(--wh-coral);box-shadow:0 0 0 3px rgba(255,100,63,.14)}
label,.control-label{font-weight:600;color:var(--wh-navy);font-size:13.5px}
.input-group-addon{
  background:var(--wh-tint);border:1px solid var(--wh-line);
  border-radius:var(--wh-radius);color:var(--wh-navy);
}
.has-error .form-control{border-color:var(--wh-danger)}
.has-error .control-label{color:var(--wh-danger)}
.help-block{color:var(--wh-muted);font-size:13px}

/* login / register cards */
/* `.login-form` sits INSIDE `.logincontainer`, so styling both as cards
   produced a card inside a card with doubled padding. Only the outer element
   is a card now; section 20 sets its rhythm. */
#login,.login-box,#frmLogin{max-width:520px;margin:0 auto}
.logincontainer{
  background:#fff;border-radius:var(--wh-radius-lg);
  box-shadow:var(--wh-shadow-lg);padding:var(--wh-sp-7);
}
.login-form{background:transparent;box-shadow:none;padding:0;border:none}

/* --------------------------------------------------- 10. Tables / alerts */
.table{background:#fff}
.table > thead > tr > th{
  background:var(--wh-tint);border-bottom:none;color:var(--wh-navy);
  font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.5px;padding:14px 16px;
}
.table > tbody > tr > td{padding:14px 16px;border-top:1px solid var(--wh-line);vertical-align:middle}
.table-striped > tbody > tr:nth-of-type(odd){background:#FAFBFF}
.table-hover > tbody > tr:hover{background:var(--wh-tint)}
.table-bordered,.table-bordered > tbody > tr > td,.table-bordered > thead > tr > th{border-color:var(--wh-line)}
.panel > .table:last-child,.panel > .table-responsive:last-child{margin-bottom:0}

.alert{border:none;border-radius:var(--wh-radius);padding:15px 20px;border-left:4px solid transparent}
.alert-success{background:#E8F7ED;color:#1D6B33;border-left-color:var(--wh-green)}
.alert-info{background:var(--wh-tint);color:var(--wh-navy);border-left-color:var(--wh-teal)}
.alert-warning{background:#FDF4E4;color:#8A5B10;border-left-color:var(--wh-amber)}
.alert-danger{background:#FEECEC;color:#96271F;border-left-color:var(--wh-danger)}
.label,.badge{font-weight:600;letter-spacing:.3px;border-radius:var(--wh-pill);padding:4px 11px}
.label-default,.badge{background:var(--wh-tint);color:var(--wh-navy)}
.label-primary,.label-info{background:var(--wh-teal);color:#fff}
.label-success{background:var(--wh-green);color:#fff}
.label-danger{background:var(--wh-danger);color:#fff}
.label-warning{background:var(--wh-amber);color:#fff}

/* ---------------------------------------------------- 11. Sidebar / menus */
.sidebar .panel,.panel-sidebar{border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow)}
.sidebar .panel > .panel-heading,.panel-sidebar > .panel-heading{
  background:var(--wh-navy);color:#fff;border-bottom:none;
}
.list-group-item{
  border-color:var(--wh-line);padding:12px 20px;color:var(--wh-slate);
  font-weight:500;transition:background .18s ease,color .18s ease;
}
.list-group-item:hover,.list-group-item:focus{background:var(--wh-tint);color:var(--wh-navy)}
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus{
  background:var(--wh-tint);border-color:var(--wh-line);color:var(--wh-navy);
  font-weight:700;box-shadow:inset 3px 0 0 var(--wh-coral);
}
.list-group-item i,.list-group-item .fas,.list-group-item .far{color:var(--wh-coral);width:18px}
.nav-tabs{border-bottom:1px solid var(--wh-line)}
.nav-tabs > li > a{border:none;color:var(--wh-muted);font-weight:600;border-radius:0}
.nav-tabs > li > a:hover{background:transparent;color:var(--wh-navy);border:none}
.nav-tabs > li.active > a,.nav-tabs > li.active > a:hover,.nav-tabs > li.active > a:focus{
  border:none;color:var(--wh-navy);background:transparent;box-shadow:inset 0 -3px 0 var(--wh-coral);
}
.nav-pills > li.active > a,.nav-pills > li.active > a:hover{background:var(--wh-coral-btn);color:#fff;border-radius:var(--wh-pill)}
.pagination > li > a,.pagination > li > span{color:var(--wh-navy);border-color:var(--wh-line)}
.pagination > li:first-child > a,.pagination > li:first-child > span{border-radius:var(--wh-pill) 0 0 var(--wh-pill)}
.pagination > li:last-child > a,.pagination > li:last-child > span{border-radius:0 var(--wh-pill) var(--wh-pill) 0}
.pagination > .active > a,.pagination > .active > span,
.pagination > .active > a:hover{background:var(--wh-coral-btn);border-color:var(--wh-coral-btn);color:#fff}

/* -------------------------------------------------- 12. Cart / order form */
#order-standard_cart .products,.product-card,.order-summary,.cart-body{border-radius:var(--wh-radius-lg)}
#order-standard_cart .product,#products .product{
  border:none;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow);
  transition:transform .2s ease,box-shadow .2s ease;overflow:hidden;
}
#order-standard_cart .product:hover,#products .product:hover{
  transform:translateY(-4px);box-shadow:var(--wh-shadow-lg);
}
#order-standard_cart .product header,#products .product header{
  background:var(--wh-navy);color:#fff;border-radius:0;padding:16px 18px;
  font-family:var(--wh-head);font-weight:700;
}
#order-standard_cart .product .product-desc{padding:18px}
.product .price,.pricing .price,#order-standard_cart .price,.product-pricing{
  color:var(--wh-coral-ink);font-family:var(--wh-head);font-weight:900;
}
#order-standard_cart .cycle,.product .cycle{color:var(--wh-muted);font-weight:500}
#order-standard_cart .summary-container,.order-summary{
  background:#fff;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow);
}
.domain-checker-bg,.domain-checker-container,#domain-selection-header{background:var(--wh-navy)}
.domain-checker-container .btn,#btnCheckAvailability{background:var(--wh-coral-btn);color:#fff}
#order-standard_cart .view-cart-items-header,.cart-header{background:var(--wh-navy);color:#fff}
.promo-box,#promo-code{background:var(--wh-tint);border-radius:var(--wh-radius-lg);border:none}

/* --------------------------------------------- 13. Invoices / tickets / kb */
.invoice-container,#invoice{background:#fff;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow)}
.invoice-header,.invoice-status{border-radius:var(--wh-radius-lg) var(--wh-radius-lg) 0 0}
.invoice-status-unpaid{background:var(--wh-danger);color:#fff}
.invoice-status-paid{background:var(--wh-green);color:#fff}
.invoice-status-cancelled,.invoice-status-refunded{background:var(--wh-muted);color:#fff}

.ticket-reply,.supportticket-reply{
  background:#fff;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow);
  padding:20px;margin-bottom:18px;border:none;
}
.ticket-reply.staff,.supportticket-reply.staff{box-shadow:inset 4px 0 0 var(--wh-coral),var(--wh-shadow)}
.ticket-status,.ticket-header{background:var(--wh-navy);color:#fff;border-radius:var(--wh-radius)}

.kbarticle,.kb-article{background:#fff;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow);padding:24px}
.kbarticle-title,.kb-title{color:var(--wh-navy);font-family:var(--wh-head);font-weight:700}

/* ---------------------------------------------------------- 14. Footer */
body section#footer{
  background:var(--wh-navy-deep);border:none;color:rgba(255,255,255,.72);
  margin-top:50px;padding:44px 0 30px;position:relative;
}
body section#footer p{margin:0}
body section#footer a{color:rgba(255,255,255,.82)}
body section#footer a:hover{color:var(--wh-coral)}
body section#footer .footer-heading,body section#footer h4,body section#footer h5{
  color:#fff;font-family:var(--wh-head);font-weight:700;
  text-transform:uppercase;letter-spacing:.7px;font-size:13px;
}
body section#footer hr{border-top-color:rgba(255,255,255,.12)}
body section#footer .back-to-top{
  position:absolute;right:26px;top:-22px;
  width:46px;height:46px;line-height:46px;text-align:center;
  background:var(--wh-coral-btn);color:#fff;border-radius:50%;
  box-shadow:0 8px 22px rgba(212,68,32,.34);
  transition:transform .2s ease,background .2s ease;
}
body section#footer .back-to-top i{background:transparent;color:#fff;padding:0;opacity:1;border-radius:0}
body section#footer .back-to-top:hover{background:var(--wh-coral-btn-dark);color:#fff;transform:translateY(-3px)}

/* ------------------------------------------------------- 15. Misc + a11y */
.modal-content{border:none;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow-lg)}
.modal-header{border-bottom:1px solid var(--wh-line);padding:18px 22px}
.modal-header .modal-title{font-family:var(--wh-head);font-weight:700;color:var(--wh-navy)}
.modal-content.panel-primary .modal-header{background:var(--wh-navy);color:#fff;border-bottom:none}
.modal-content.panel-primary .modal-header .modal-title,
.modal-content.panel-primary .modal-header .close{color:#fff}
.modal-footer{border-top:1px solid var(--wh-line)}
.progress{border-radius:var(--wh-pill);box-shadow:none;background:var(--wh-tint)}
.progress-bar{background:var(--wh-coral);box-shadow:none}
.tooltip-inner{background:var(--wh-navy);border-radius:var(--wh-radius);padding:7px 12px}
.popover{border:none;border-radius:var(--wh-radius-lg);box-shadow:var(--wh-shadow-lg)}
.popover-title{background:var(--wh-tint);color:var(--wh-navy);font-weight:700;border-bottom:none}
#fullpage-overlay{background:rgba(4,37,81,.90)}
::selection{background:var(--wh-coral);color:#fff}
a:focus-visible,.btn:focus-visible,.form-control:focus-visible,.list-group-item:focus-visible{
  outline:3px solid rgba(255,100,63,.45);outline-offset:2px;
}

/* RTL: Arabic installs get the same layout mirrored correctly */
html[dir="rtl"] .list-group-item.active{box-shadow:inset -3px 0 0 var(--wh-coral)}
html[dir="rtl"] blockquote{border-left:none;border-right:4px solid var(--wh-coral);
  border-radius:var(--wh-radius) 0 0 var(--wh-radius)}
html[dir="rtl"] #header .top-nav{float:left}
html[dir="rtl"] #footer .back-to-top{right:auto;left:26px}
html[dir="rtl"] .ticket-reply.staff{box-shadow:inset -4px 0 0 var(--wh-coral),var(--wh-shadow)}

/* ------------------------------------------------------ 16. Responsive */
@media (max-width:991px){
  body section#home-banner{padding:56px 0 64px}
  body section#home-banner h2{font-size:34px}
  body .home-shortcuts{margin-top:-32px}
}
@media (max-width:767px){
  body section#header .top-nav{min-height:auto;float:none;justify-content:center;padding:8px 0;flex-wrap:wrap}
  body section#header .logo{display:block;text-align:center;padding:14px 0 4px}
  body section#main-menu .navbar-nav > li > a,body .navbar-main .navbar-nav > li > a{padding:12px 15px}
  body section#home-banner{padding:44px 0 52px}
  body section#home-banner h2{font-size:27px;margin-bottom:24px}
  body section#home-banner .input-group .form-control,#home-banner .input-group-btn .btn{height:52px}
  body section#home-banner .input-group{border-radius:var(--wh-radius-lg)}
  body section#home-banner .input-group .form-control{border-radius:var(--wh-radius-lg) var(--wh-radius-lg) 0 0;text-align:center}
  body section#home-banner .input-group-btn,#home-banner .input-group-btn .btn{width:100%;display:block;border-radius:0}
  body .home-shortcuts{margin-top:26px}
  body .home-shortcuts ul{display:block}
  body .home-shortcuts ul > li{padding:0 0 12px}
  #header-inner{padding:34px 0 30px}
  .header-lined{margin-bottom:20px;padding-bottom:12px}
  .header-lined h1{font-size:25px}
  h1,.h1{font-size:27px}
  .panel-body{padding:18px}
  .table > thead > tr > th,.table > tbody > tr > td{padding:11px 12px}
}

/* ==========================================================================
   17. Fixes from the live-install review
   Each block records the Six rule that was actually winning, so the reason a
   selector looks over-qualified stays obvious.
   ========================================================================== */

/* 17.1  Sidebar panel headings read as dark-on-navy.
   Cause: Six styles the inner element, `.panel-sidebar .panel-title{color:#555}`,
   which my heading rule never reached. Colour the title itself. */
body .panel-sidebar > .panel-heading,
body .sidebar .panel > .panel-heading,
body .panel-sidebar > .panel-heading .panel-title,
body .sidebar .panel > .panel-heading .panel-title,
body .panel-sidebar > .panel-heading a,
body .panel-sidebar > .panel-heading i,
body .panel-sidebar > .panel-heading .fas,
body .panel-sidebar > .panel-heading .far{
  color:#fff;
}
body .panel-sidebar > .panel-heading .panel-title{
  font-family:var(--wh-head);
  font-weight:700;
  font-size:15px;
  line-height:1.5;
}
body .panel-sidebar > .panel-heading i{opacity:.85;margin-inline-end:6px}

/* 17.2  The current sidebar entry stayed on Six's dark fill.
   Cause: WHMCS marks it `.list-group-item-selected`, not `.active`. */
body div.sidebar .list-group-item-selected,
body .panel-sidebar .list-group-item-selected,
body .list-group-item-selected,
body .list-group-item-selected:hover,
body .list-group-item-selected:focus{
  background:var(--wh-tint);
  color:var(--wh-navy);
  font-weight:700;
  border-color:var(--wh-line);
  box-shadow:inset 3px 0 0 var(--wh-coral);
}
html[dir="rtl"] body .list-group-item-selected{box-shadow:inset -3px 0 0 var(--wh-coral)}
body div.sidebar .list-group-item-selected .badge{background:var(--wh-coral);color:#fff}
body .list-group-item-selected i,
body .list-group-item-selected .fas,
body .list-group-item-selected .far{color:var(--wh-coral)}

/* 17.3  Sidebar icons were grey; the accent ties them to the theme. */
body .panel-sidebar .list-group-item i,
body .sidebar .list-group-item i,
body .panel-sidebar .list-group-item .fas,
body .panel-sidebar .list-group-item .far{color:var(--wh-coral);opacity:.9}

/* 17.4  Call-to-action colour language.
   WHMCS ships .btn-success as its primary CTA (Order Now, Activate Affiliate
   Account, ...). Green beside the coral CTAs read as a second theme, so those
   join the accent, and amber becomes the secondary navy so paired buttons keep
   a hierarchy. Status colours (.alert-success, .label-success) stay green. */
body .btn-success,
body .btn-success:focus,
body a.btn-success{background:var(--wh-coral-btn);color:#fff;border-color:transparent}
body .btn-success:hover,
body .btn-success:active,
body .btn-success.active,
body a.btn-success:hover{background:var(--wh-coral-btn-dark);color:#fff}
body .btn-warning,
body .btn-warning:focus,
body a.btn-warning{background:var(--wh-navy);color:#fff;border-color:transparent}
body .btn-warning:hover,
body .btn-warning:active,
body a.btn-warning:hover{background:var(--wh-navy-dark);color:#fff}

/* 17.5  Listing tables.
   Six paints the toolbar `#4f5360` and rules the header with two greens
   (`#a2d27a` / `#7bc144` on alternating cells). */
body .dataTables_wrapper .dataTables_info{
  background:var(--wh-navy);
  color:#fff;
  border-bottom:none;
  border-radius:var(--wh-radius-lg) var(--wh-radius-lg) 0 0;
  padding:14px 18px;
  font-size:13.5px;
}
body .dataTables_wrapper .dataTables_filter{background:var(--wh-navy);padding:8px 12px}
body .dataTables_wrapper .dataTables_filter label .form-control{
  border-radius:var(--wh-pill);border:none;height:38px;
}
body .dataTables_wrapper table.table-list thead th,
body .dataTables_wrapper table.table-list thead th:nth-child(even){
  border-bottom:2px solid var(--wh-line);
  background:var(--wh-tint);
  color:var(--wh-navy);
  font-weight:700;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.5px;
}
body .dataTables_wrapper table.table-list thead th.sorting_asc,
body .dataTables_wrapper table.table-list thead th.sorting_desc{
  background:#E4EBFA;box-shadow:inset 0 -2px 0 var(--wh-coral-btn);
}
body .dataTables_wrapper .dataTables_length{
  background:var(--wh-tint);color:var(--wh-navy);font-size:13px;
  border-radius:0 0 var(--wh-radius-lg) var(--wh-radius-lg);padding:10px 16px;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--wh-pill);border:1px solid var(--wh-line);
  background:#fff;color:var(--wh-navy);padding:5px 16px;margin:0 2px;
}
body .dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--wh-tint);color:var(--wh-navy);border-color:var(--wh-line);
}
body .dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--wh-coral-btn);color:#fff;border-color:var(--wh-coral-btn);
}
body .pagination > .active > a,
body .pagination > .active > a:focus,
body .pagination > .active > a:hover,
body .pagination > .active > span{background:var(--wh-coral-btn);border-color:var(--wh-coral-btn);color:#fff}

/* 17.6  TLD category filters were grey chips with a green active state. */
body .tld-filters a{
  border-radius:var(--wh-pill);
  padding:6px 14px;
  font-size:13px;
  font-weight:600;
  background:var(--wh-tint);
  color:var(--wh-navy);
  margin:0 3px 6px 0;
  transition:background .18s ease,color .18s ease;
}
body .tld-filters a:hover{background:#DDE5F8;color:var(--wh-navy)}
body .tld-filters a.active,
body .tld-filters a.badge-primary,
body .tld-filters a.badge-success{background:var(--wh-coral-btn);color:#fff}
body .tld-filters a.badge-secondary{background:var(--wh-tint);color:var(--wh-navy)}
body .tld-filters a.badge-secondary[href]:hover,
body .tld-filters a.badge-secondary[href]:focus{background:#DDE5F8;color:var(--wh-navy)}

/* 17.7  Featured-TLD price strips carry their own coloured fill, so the global
   coral price colour made them near-illegible.
   REVISED: the original fix set every strip to white, which only solved the
   dark strips. White on the gold strip measures 1.56:1 -- no better than the
   red it replaced. The strip fills are Six's `.bg-color-*`, so each one now
   gets whichever of navy/white actually passes against it, and the fills
   themselves are pulled into the brand palette by section 19. */
body .featured-tld .price,
body .featured-tld .price[class*=" "],
body .featured-tld .price span{
  color:#fff;font-family:var(--wh-head);font-weight:700;
}
/* Light fills only: navy reads on these, white does not. Every other fill is
   re-tinted dark by 19.4 and keeps the white above. Keep this list and the
   fill map in 19.4 in agreement -- a fill that moves from one group to the
   other has to move in both places. */
body .featured-tld .price.bg-color-gold,
body .featured-tld .price.bg-color-gold span,
body .featured-tld .price.bg-color-sun,
body .featured-tld .price.bg-color-sun span,
body .featured-tld .price.bg-color-silver,
body .featured-tld .price.bg-color-silver span,
body .featured-tld .price.bg-color-asbestos,
body .featured-tld .price.bg-color-asbestos span{color:var(--wh-navy)}
/* No fill: the coral ink, which passes on white. */
body .featured-tld .price.no-bg,
body .featured-tld .price[class="price"]{color:var(--wh-coral-ink)}

/* 17.8  The account menu sat in a darker navy block against the nav. */
body section#main-menu .navbar-nav > li > a,
body section#main-menu .navbar-right > li > a{background:transparent}
body section#main-menu .navbar-nav > li.open > a,
body section#main-menu .navbar-nav > li > a:hover,
body section#main-menu .navbar-right > li.open > a{background:rgba(255,255,255,.08)}

/* 17.9  RETIRED. This centred the "How can we help today?" lead against the
   tiles it labelled. The lead was removed from header.tpl at the client's
   request, so the selector no longer matches anything. Section 22 lays the
   tiles out across the full row instead. */

/* ==========================================================================
   18. Right-to-left
   Bootstrap 3 has no RTL support: its floats stay left regardless of `dir`,
   which left the Arabic pages with the logo, navigation and sidebar on the
   wrong side. header.tpl now emits dir="rtl" for RTL languages; these rules
   mirror the layout to match.
   ========================================================================== */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .navbar-header,
html[dir="rtl"] .navbar-nav,
html[dir="rtl"] .navbar-nav > li{float:right}
html[dir="rtl"] .navbar-right{float:left!important}
html[dir="rtl"] .navbar-toggle{float:left}
html[dir="rtl"] body section#header .logo{float:right}
html[dir="rtl"] body section#header .top-nav{float:left}
html[dir="rtl"] body section#header .top-nav > li{margin-left:0;margin-right:6px}

html[dir="rtl"] .pull-right{float:left!important}
html[dir="rtl"] .pull-left{float:right!important}
html[dir="rtl"] .pull-md-right{float:left!important}
html[dir="rtl"] .pull-md-left{float:right!important}
html[dir="rtl"] .text-right{text-align:left}
html[dir="rtl"] .text-left{text-align:right}

html[dir="rtl"] .col-xs-1,html[dir="rtl"] .col-xs-2,html[dir="rtl"] .col-xs-3,
html[dir="rtl"] .col-xs-4,html[dir="rtl"] .col-xs-5,html[dir="rtl"] .col-xs-6,
html[dir="rtl"] .col-xs-7,html[dir="rtl"] .col-xs-8,html[dir="rtl"] .col-xs-9,
html[dir="rtl"] .col-xs-10,html[dir="rtl"] .col-xs-11,html[dir="rtl"] .col-xs-12,
html[dir="rtl"] .col-sm-1,html[dir="rtl"] .col-sm-2,html[dir="rtl"] .col-sm-3,
html[dir="rtl"] .col-sm-4,html[dir="rtl"] .col-sm-5,html[dir="rtl"] .col-sm-6,
html[dir="rtl"] .col-sm-7,html[dir="rtl"] .col-sm-8,html[dir="rtl"] .col-sm-9,
html[dir="rtl"] .col-sm-10,html[dir="rtl"] .col-sm-11,html[dir="rtl"] .col-sm-12,
html[dir="rtl"] .col-md-1,html[dir="rtl"] .col-md-2,html[dir="rtl"] .col-md-3,
html[dir="rtl"] .col-md-4,html[dir="rtl"] .col-md-5,html[dir="rtl"] .col-md-6,
html[dir="rtl"] .col-md-7,html[dir="rtl"] .col-md-8,html[dir="rtl"] .col-md-9,
html[dir="rtl"] .col-md-10,html[dir="rtl"] .col-md-11,html[dir="rtl"] .col-md-12,
html[dir="rtl"] .col-lg-1,html[dir="rtl"] .col-lg-2,html[dir="rtl"] .col-lg-3,
html[dir="rtl"] .col-lg-4,html[dir="rtl"] .col-lg-5,html[dir="rtl"] .col-lg-6,
html[dir="rtl"] .col-lg-7,html[dir="rtl"] .col-lg-8,html[dir="rtl"] .col-lg-9,
html[dir="rtl"] .col-lg-10,html[dir="rtl"] .col-lg-11,html[dir="rtl"] .col-lg-12{float:right}

html[dir="rtl"] .list-group-item i,
html[dir="rtl"] .list-group-item .fas,
html[dir="rtl"] .list-group-item .far{float:left}
html[dir="rtl"] .breadcrumb{padding-right:0}
html[dir="rtl"] .header-lined:after{left:auto;right:0}
html[dir="rtl"] .alert{border-left:none;border-right:4px solid transparent}
html[dir="rtl"] .alert-success{border-right-color:var(--wh-green)}
html[dir="rtl"] .alert-info{border-right-color:var(--wh-teal)}
html[dir="rtl"] .alert-warning{border-right-color:var(--wh-amber)}
html[dir="rtl"] .alert-danger{border-right-color:var(--wh-coral-alt)}
html[dir="rtl"] .dropdown-menu{text-align:right;left:auto;right:0}
html[dir="rtl"] .input-group-addon:first-child{border-radius:0 var(--wh-radius) var(--wh-radius) 0}
html[dir="rtl"] .input-group-addon:last-child{border-radius:var(--wh-radius) 0 0 var(--wh-radius)}
html[dir="rtl"] body section#home-banner .input-group .form-control{
  border-radius:0 var(--wh-pill) var(--wh-pill) 0;
}
html[dir="rtl"] body section#home-banner .input-group-btn:last-child .btn:last-child{
  border-radius:var(--wh-pill) 0 0 var(--wh-pill);
}
html[dir="rtl"] .home-shortcuts ul{padding-right:0}
html[dir="rtl"] body section#footer .back-to-top{right:auto;left:26px}
html[dir="rtl"] .ticket-reply.staff{box-shadow:inset -4px 0 0 var(--wh-coral),var(--wh-shadow)}
html[dir="rtl"] blockquote{
  border-left:none;border-right:4px solid var(--wh-coral);
  border-radius:var(--wh-radius) 0 0 var(--wh-radius);
}
@media (max-width:767px){
  html[dir="rtl"] .navbar-nav,
  html[dir="rtl"] .navbar-nav > li,
  html[dir="rtl"] .navbar-right{float:none!important}
}

/* ==========================================================================
   19. Contrast pass
   Surfaces Six colours itself, which the theme had never overridden. Each
   block names the Six rule that was winning and the measured ratio it
   produced, so the reason for the specificity is visible.
   ========================================================================== */

/* 19.1  The worst failure in the theme: 1.03:1.
   `clientareahome` renders its panel buttons as
   `.btn .btn-default .bg-color-{colour} .btn-xs`, and Six paints them with
      .client-home-panels .panel > .panel-heading .panel-title .btn{color:#fff}
   (five classes). The theme's `.btn-default{color:navy}` is one class, so it
   lost the colour but won the background -- leaving white text on the pale
   tint fill. "View All", "Open New Ticket" and "New Contact..." were
   effectively invisible. Matching Six's specificity and giving them a real
   fill. */
body .client-home-panels .panel > .panel-heading .panel-title .btn,
body .client-home-panels .panel > .panel-heading .panel-title .btn:focus{
  background:var(--wh-coral-btn);
  color:#fff;
  border:none;
  font-weight:600;
  padding:4px 14px;
  border-radius:var(--wh-pill);
}
body .client-home-panels .panel > .panel-heading .panel-title .btn:hover{
  background:var(--wh-coral-btn-dark);
  color:#fff;
}
body .client-home-panels .panel > .panel-heading .panel-title .btn i{
  margin-inline-end:4px;
}

/* 19.2  Six's `.bg-color-*` helpers are a 19-colour Flat-UI palette dropped
   straight into the client area -- amethyst, magenta, pomegranate, wet.
   Anywhere one is used as a button fill it now resolves to the accent, so no
   page can introduce an off-brand colour. Decorative uses (the tile rules and
   TLD strips) are re-tinted in 19.3 and 19.4 instead. */
body .btn.bg-color-amethyst,body .btn.bg-color-asbestos,body .btn.bg-color-blue,
body .btn.bg-color-emerald,body .btn.bg-color-gold,body .btn.bg-color-green,
body .btn.bg-color-lime,body .btn.bg-color-magenta,body .btn.bg-color-midnight,
body .btn.bg-color-orange,body .btn.bg-color-pink,body .btn.bg-color-pomegranate,
body .btn.bg-color-purple,body .btn.bg-color-red,body .btn.bg-color-silver,
body .btn.bg-color-sun,body .btn.bg-color-teal,body .btn.bg-color-turquoise,
body .btn.bg-color-wet{
  background:var(--wh-coral-btn);
  color:#fff;
}
body .btn.bg-color-amethyst:hover,body .btn.bg-color-asbestos:hover,
body .btn.bg-color-blue:hover,body .btn.bg-color-emerald:hover,
body .btn.bg-color-gold:hover,body .btn.bg-color-green:hover,
body .btn.bg-color-lime:hover,body .btn.bg-color-magenta:hover,
body .btn.bg-color-midnight:hover,body .btn.bg-color-orange:hover,
body .btn.bg-color-pink:hover,body .btn.bg-color-pomegranate:hover,
body .btn.bg-color-purple:hover,body .btn.bg-color-red:hover,
body .btn.bg-color-silver:hover,body .btn.bg-color-sun:hover,
body .btn.bg-color-teal:hover,body .btn.bg-color-turquoise:hover,
body .btn.bg-color-wet:hover{
  background:var(--wh-coral-btn-dark);
  color:#fff;
}

/* 19.3  Panel accent borders. Six gives each home panel a 3px top border from
   the same Flat-UI palette, so four adjacent panels showed amber, green, teal
   and blue -- four accents, none of them the brand's. They keep their role as
   a divider but resolve to one navy.
   Six writes these as `.panel.panel-accent-gold` (two classes), so the
   `.panel` has to be repeated here or the override loses on specificity. */
body .panel.panel-accent-amethyst,body .panel.panel-accent-asbestos,
body .panel.panel-accent-blue,body .panel.panel-accent-emerald,
body .panel.panel-accent-gold,body .panel.panel-accent-green,
body .panel.panel-accent-lime,body .panel.panel-accent-magenta,
body .panel.panel-accent-midnight,body .panel.panel-accent-orange,
body .panel.panel-accent-pink,body .panel.panel-accent-pomegranate,
body .panel.panel-accent-purple,body .panel.panel-accent-red,
body .panel.panel-accent-silver,body .panel.panel-accent-sun,
body .panel.panel-accent-teal,body .panel.panel-accent-turquoise,
body .panel.panel-accent-wet{
  border-top:3px solid var(--wh-navy);
}

/* 19.4  Featured-TLD strip fills. Six's gold `#f0ad4e` and green `#5cb85c`
   are what made 17.7 impossible to solve with a single text colour. Pulling
   the fills into the palette so the pairing is predictable. */
body .featured-tld .price.bg-color-gold,body .featured-tld .price.bg-color-sun{
  background:var(--wh-amber-fill);
}
body .featured-tld .price.bg-color-green,body .featured-tld .price.bg-color-emerald,
body .featured-tld .price.bg-color-lime{
  background:var(--wh-green);
}
body .featured-tld .price.bg-color-blue,body .featured-tld .price.bg-color-turquoise,
body .featured-tld .price.bg-color-teal,body .featured-tld .price.bg-color-wet{
  background:var(--wh-teal);
}
body .featured-tld .price.bg-color-red,body .featured-tld .price.bg-color-pomegranate,
body .featured-tld .price.bg-color-orange,body .featured-tld .price.bg-color-magenta,
body .featured-tld .price.bg-color-pink{
  background:var(--wh-coral-btn);
}
body .featured-tld .price.bg-color-midnight,body .featured-tld .price.bg-color-purple,
body .featured-tld .price.bg-color-amethyst{
  background:var(--wh-navy);
}
body .featured-tld .price.bg-color-silver,body .featured-tld .price.bg-color-asbestos{
  background:var(--wh-tint-2);
}
body .featured-tld .price.bg-color-silver,body .featured-tld .price.bg-color-silver span,
body .featured-tld .price.bg-color-asbestos,body .featured-tld .price.bg-color-asbestos span{
  color:var(--wh-navy);
}

/* 19.5  Status text. Six's status palette is unthemed and two entries fail
   outright: `.status-answered` is pure black (a jarring 21:1 slab beside the
   soft UI) and `.status-active` `#3fad46` measures 2.89:1 on white.
   Recoloured to the palette's status tokens, all >=4.9:1. */
body .status-active,body .status-open,body .status-completed,
body .status-paid,body .status-accepted{color:var(--wh-green)}
body .status-pending,body .status-inprogress{color:var(--wh-amber)}
body .status-pending.transfer,body .status-suspended{color:var(--wh-amber)}
body .status-customer-reply{color:var(--wh-coral-ink)}
body .status-answered{color:var(--wh-navy)}
body .status-unpaid,body .status-collections{color:var(--wh-danger)}
body .status-fraud,body .status-lost,body .status-dead{color:var(--wh-danger)}
body .status-expired,body .status-onhold,body .status-delivered,
body .status-transferred.away{color:var(--wh-navy)}
body .status-cancelled,body .status-terminated,body .status-closed{color:var(--wh-muted)}
body .status-refunded{color:var(--wh-teal)}

/* Six declares `.status{display:block;border:2px solid #ccc}`, so a status
   stretched to the full width of whatever held it -- in the ticket list that
   produced a pill several hundred pixels wide around one word. Sized to its
   content and given the theme's pill radius. */
body .status{
  display:inline-block;
  width:auto;
  border:1px solid var(--wh-line);
  border-radius:var(--wh-pill);
  padding:1px var(--wh-sp-3);
  font-size:12.5px;
  font-weight:600;
  line-height:20px;
  background:#fff;
}

/* 19.6  Product status bars carry white text on their own fills; two of Six's
   five fail. Aligned to the status tokens. */
body .product-status-active{background-color:var(--wh-green)}
body .product-status-pending{background-color:var(--wh-amber)}
body .product-status-suspended{background-color:var(--wh-teal)}
body .product-status-terminated,body .product-status-cancelled{background-color:var(--wh-muted)}
body .product-status-fraud{background-color:var(--wh-danger)}
body .product-status{border-radius:var(--wh-radius)}

/* 19.7  Breadcrumb + tile labels used `#7A7A7A`, which measures 4.00:1 on the
   page background -- just under AA. The `--wh-muted` token now carries
   `#5B6275` (5.68:1); these selectors exist because Six sets the grey
   directly rather than through the token. */
body .tile .title{color:var(--wh-muted)}
body .client-home-panels .panel small{color:var(--wh-muted)}
body .markdown-editor-status{color:var(--wh-muted)}
body .home-kb-search .form-control{color:var(--wh-slate)}
body .home-kb-search .form-control::placeholder{color:var(--wh-muted);opacity:1}
body .breadcrumb > .active{color:var(--wh-muted)}

/* 19.8  Decorative icons Six leaves at `#ccc` on white (1.6:1). They are not
   text, so AA does not apply, but at that value they read as disabled.
   Lifted to a tone that registers as intentional. */
body .tile .icon{color:var(--wh-muted-soft)}
body .list-group-item .fa-fw{opacity:1}

/* 19.9  Focus ring. The old ring was a translucent coral that all but vanished
   on the coral buttons it was meant to outline. A navy ring on a white offset
   is visible against every surface in the theme. */
body a:focus-visible,
body .btn:focus-visible,
body .form-control:focus-visible,
body .list-group-item:focus-visible,
body .paginate_button:focus-visible{
  outline:3px solid var(--wh-navy);
  outline-offset:2px;
  box-shadow:0 0 0 5px rgba(255,255,255,.9);
}


/* ==========================================================================
   20. Spacing and rhythm
   The uneven gaps come from three places: Six's hard-coded pixel values, the
   `.tiles` block sitting on its own margin system, and panel bodies whose
   padding Six zeroes out. Everything below is expressed in the scale defined
   in section 2 so the vertical rhythm is one system rather than four.
   ========================================================================== */

/* 20.1  The statistics tiles.
   Three separate problems. Six sets `.tiles{margin:0 15px 15px}`, so the row
   sat 15px inside the grid and its edges lined up with nothing above or below
   it -- the most visible "not lining up" on the client area home. The tiles
   were also grey slabs divided by 1px rules rather than cards, and
   `.tile .icon` is a 48px `#ccc` glyph absolutely positioned into the same
   corner the number occupies, which is what made the row look crowded. */
body .tiles{
  margin:0 0 var(--wh-sp-6);
}
body .tiles .row{
  display:flex;
  flex-wrap:wrap;
}
body .tiles .tile{
  padding:0 var(--wh-sp-3) var(--wh-sp-4);
  background:transparent;
  border:none;
  display:flex;
}
body .tiles .tile:hover{background:transparent}
body .tiles .tile > a{
  position:relative;
  display:block;
  width:100%;
  background:#fff;
  border-radius:var(--wh-radius-lg);
  box-shadow:var(--wh-shadow);
  padding:var(--wh-sp-5) var(--wh-sp-5) var(--wh-sp-4);
  overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease;
}
body .tiles .tile > a:hover{
  transform:translateY(-3px);
  box-shadow:var(--wh-shadow-lg);
}
/* The icon moves out of the number's space and drops behind it. */
body .tiles .tile .icon{
  position:absolute;
  top:var(--wh-sp-4);
  right:var(--wh-sp-4);
  left:auto;
  font-size:34px;
  line-height:1;
  opacity:.28;
}
html[dir="rtl"] body .tiles .tile .icon{right:auto;left:var(--wh-sp-4)}
body .tiles .tile .stat{
  margin:0;
  font-family:var(--wh-head);
  font-weight:900;
  font-size:38px;
  line-height:1.05;
  color:var(--wh-navy);
}
body .tiles .tile .title{
  margin-top:var(--wh-sp-1);
  font-size:12px;
  font-weight:700;
  letter-spacing:.6px;
  line-height:1.4;
}
body .tiles .tile .highlight{
  margin-top:var(--wh-sp-3);
  height:3px;
  border-radius:3px;
}
/* Highlight bars inherit the same Flat-UI palette as everything else. */
body .tiles .tile .highlight.bg-color-blue{background:var(--wh-teal)}
body .tiles .tile .highlight.bg-color-green,
body .tiles .tile .highlight.bg-color-emerald{background:var(--wh-green-fill)}
body .tiles .tile .highlight.bg-color-red,
body .tiles .tile .highlight.bg-color-pomegranate{background:var(--wh-coral)}
body .tiles .tile .highlight.bg-color-gold,
body .tiles .tile .highlight.bg-color-sun{background:var(--wh-amber-fill)}

/* 20.2  Knowledgebase search on the home page.
   Six floats the magnifier and pulls it up 30px to sit inside an input of the
   original height. The theme's taller input left the icon riding high, and
   the block carried a 15px bottom margin against the tiles' 24px above it. */
body .home-kb-search{margin-bottom:var(--wh-sp-6)}
body .home-kb-search .form-control{
  padding-left:52px;
  height:auto;
  padding-top:var(--wh-sp-3);
  padding-bottom:var(--wh-sp-3);
  border:1px solid var(--wh-line);
  border-radius:var(--wh-pill);
  background:#fff;
  font-weight:400;
}
body .home-kb-search .form-control:focus{
  border-color:var(--wh-coral);
  box-shadow:0 0 0 3px rgba(255,100,63,.14);
}
body .home-kb-search i{
  float:none;
  position:absolute;
  top:50%;
  left:var(--wh-sp-6);
  margin:0;
  transform:translateY(-50%);
  color:var(--wh-muted);
}
body .home-kb-search{position:relative}
html[dir="rtl"] body .home-kb-search .form-control{padding-left:var(--wh-sp-5);padding-right:52px}
html[dir="rtl"] body .home-kb-search i{left:auto;right:var(--wh-sp-6)}

/* 20.3  Client area home panels.
   Six sets `.client-home-panels .panel > .panel-body{padding:0}` and then
   pads the paragraph inside it instead, so body text sat tight to the panel
   edge while every other panel in the theme had 22px. `max-height:170px`
   also clipped panels to different depths, which is what left the two
   columns ending at different points. */
body .client-home-panels .panel > .panel-body{
  padding:var(--wh-sp-5) var(--wh-sp-6);
  max-height:none;
  overflow:visible;
}
body .client-home-panels .panel > .panel-body p{padding:0;margin-bottom:var(--wh-sp-2)}
body .client-home-panels .panel > .panel-body p:last-child{margin-bottom:0}
body .client-home-panels .panel > .panel-heading{padding:var(--wh-sp-4) var(--wh-sp-6)}
body .client-home-panels .panel > .panel-heading .panel-title{
  font-family:var(--wh-head);
  font-weight:700;
  font-size:16px;
  line-height:30px;
}
body .client-home-panels .panel > .list-group{
  max-height:none;
  overflow:visible;
  border-top:1px solid var(--wh-line);
  border-bottom:none;
  margin-bottom:0;
}
body .client-home-panels .panel > .list-group .list-group-item{
  padding:var(--wh-sp-3) var(--wh-sp-6);
  border-left:none;
  border-right:none;
}
body .client-home-panels .panel > .panel-footer{
  padding:var(--wh-sp-3) var(--wh-sp-6);
  background:var(--wh-tint);
}
body .client-home-panels .panel > .panel-footer:empty{display:none}
/* Equal-height columns. Bootstrap 3 floats these, so the shorter column left
   a ragged bottom edge; floats are ignored on flex items, so the two columns
   now finish level without touching the grid widths. Making each column a
   flex column and letting its last panel grow is what actually squares the
   bottom edge -- equalising the columns alone does nothing visible, because
   the columns themselves have no background. */
body .client-home-panels > .row{
  display:flex;
  flex-wrap:wrap;
}
body .client-home-panels > .row > [class*="col-"]{
  display:flex;
  flex-direction:column;
}
body .client-home-panels > .row > [class*="col-"] > .panel:last-child{
  flex:1 0 auto;
  margin-bottom:0;
}

/* 20.4  Page header block.
   Order is title, optional subtitle, breadcrumb, rule. The gaps between those
   four were 0/4/0/14px, so the breadcrumb read as part of the content below
   rather than the header above. One scale, applied down the block. */
body .header-lined{
  padding:0 0 var(--wh-sp-4);
  margin:0 0 var(--wh-sp-7);
}
body .header-lined h1{margin:0 0 var(--wh-sp-2)}
body .header-lined h1 small{margin-top:var(--wh-sp-1)}
body .header-lined .breadcrumb{margin-top:var(--wh-sp-3)}
body .header-lined:after{width:64px;height:3px}
body .page-header{margin:0 0 var(--wh-sp-7);padding-bottom:var(--wh-sp-3)}

/* 20.5  Panels, forms and tables share the scale. */
body .panel{margin-bottom:var(--wh-sp-6)}
body .panel > .panel-heading{padding:var(--wh-sp-4) var(--wh-sp-6)}
body .panel-body{padding:var(--wh-sp-6)}
body .panel-footer{padding:var(--wh-sp-3) var(--wh-sp-6)}
body .form-group{margin-bottom:var(--wh-sp-5)}
body .form-group:last-child{margin-bottom:0}
body .table > thead > tr > th{padding:var(--wh-sp-3) var(--wh-sp-4)}
body .table > tbody > tr > td{padding:var(--wh-sp-3) var(--wh-sp-4)}
body .well{padding:var(--wh-sp-5) var(--wh-sp-6)}
body .alert{padding:var(--wh-sp-4) var(--wh-sp-5);margin-bottom:var(--wh-sp-5)}

/* 20.6  Sidebar rhythm. The heading and the rows below it were on different
   scales, so the first row sat closer to the heading than the rows to each
   other. */
body .panel-sidebar > .panel-heading,
body .sidebar .panel > .panel-heading{padding:var(--wh-sp-4) var(--wh-sp-5)}
body .panel-sidebar .list-group-item,
body .sidebar .list-group-item{padding:var(--wh-sp-3) var(--wh-sp-5)}
body .sidebar .panel,body .panel-sidebar{margin-bottom:var(--wh-sp-6)}

/* 20.7  Login. With the nested card removed (section 15) the inner elements
   need their own rhythm rather than inheriting the old doubled padding. */
body .logincontainer .login-form .form-group{margin-bottom:var(--wh-sp-5)}
body .logincontainer .header-lined{margin-bottom:var(--wh-sp-6)}
body .logincontainer .text-center.margin-bottom{margin-top:var(--wh-sp-6)}

/* 20.8  Content column top spacing, so the first element clears the header
   band by the same amount on every page. */
body section#main-body{padding:var(--wh-sp-7) 0 var(--wh-sp-8)}

/* 20.9  Footer. A tall band holding one line of copyright was mostly dead
   space; the padding now matches the density of the rest of the theme.
   REVISED: the margin-top here stacked on top of `#main-body`'s bottom
   padding, so the two produced 96px of empty page above the footer rather
   than 48. `#main-body` owns that gap; the footer no longer adds to it. */
body section#footer{margin-top:0;padding:var(--wh-sp-7) 0 var(--wh-sp-6)}

/* 20.10 Order form. NOTE: the store pages are rendered by the order form
   template in /templates/orderforms/, which is not part of this theme, so
   these are conservative rules against the class names Six and the stock
   cart share. The product cards ending at different heights needs that
   template to fix properly. */
body #order-standard_cart .products > .row,
body #products > .row{display:flex;flex-wrap:wrap}
body #order-standard_cart .product,
body #products .product{margin-bottom:var(--wh-sp-6)}
body #order-standard_cart .product .product-desc{padding:var(--wh-sp-5) var(--wh-sp-6)}

/* 20.11 Responsive. The scale compresses one step on small screens rather
   than each block choosing its own reduction. */
@media (max-width:767px){
  /* Six draws dividers between the stacked tiles with
     `.tiles .tile:nth-child(1){border-bottom:1px solid #ccc}`. A pseudo-class
     counts at class level, so that outranks the plain reset above and a grey
     rule was cutting across the cards. */
  body .tiles .tile,
  body .tiles .tile:nth-child(1),
  body .tiles .tile:nth-child(2),
  body .tiles .tile:last-child{border:none}
  body .tiles .tile{padding:0 var(--wh-sp-2) var(--wh-sp-3)}
  body .tiles .tile > a{padding:var(--wh-sp-4)}
  body .tiles .tile .stat{font-size:30px}
  body .tiles .tile .icon{font-size:26px;top:var(--wh-sp-3);right:var(--wh-sp-3)}
  body .panel-body,body .client-home-panels .panel > .panel-body{padding:var(--wh-sp-5)}
  body .panel > .panel-heading,
  body .client-home-panels .panel > .panel-heading{padding:var(--wh-sp-3) var(--wh-sp-5)}
  body .client-home-panels .panel > .list-group .list-group-item{padding:var(--wh-sp-3) var(--wh-sp-5)}
  body .header-lined{margin-bottom:var(--wh-sp-6)}
  body section#main-body{padding:var(--wh-sp-6) 0 var(--wh-sp-7)}
  body section#footer{margin-top:0;padding:var(--wh-sp-6) 0 var(--wh-sp-5)}
  body .logincontainer{padding:var(--wh-sp-5)}
}

/* ==========================================================================
   21. Sidebar current-item states
   The current row measured 1.25:1 on the live install -- navy text on a
   charcoal fill. Two independent causes, neither reached by section 17.2.
   ========================================================================== */

/* 21.1  Six paints the current entry with
       .panel-sidebar a.list-group-item.active{background-color:#465054}
   at 0-0-3-1. Section 11's `.list-group-item.active` is 0-0-2-0, so it set
   the navy text but lost the background -- navy on charcoal.
   Section 17.2 did not apply here at all: it targets
   `.list-group-item-selected`, which is what the account sidebars use, while
   the store, knowledgebase and support sidebars mark the row `.active`. */
body .panel-sidebar a.list-group-item.active,
body .panel-sidebar a.list-group-item.active:focus,
body .panel-sidebar a.list-group-item.active:hover,
body .sidebar a.list-group-item.active,
body .sidebar a.list-group-item.active:focus,
body .sidebar a.list-group-item.active:hover{
  background-color:var(--wh-tint);
  border-color:var(--wh-line);
  color:var(--wh-navy);
  font-weight:700;
  box-shadow:inset 3px 0 0 var(--wh-coral);
}
html[dir="rtl"] body .panel-sidebar a.list-group-item.active,
html[dir="rtl"] body .sidebar a.list-group-item.active{
  box-shadow:inset -3px 0 0 var(--wh-coral);
}

/* 21.2  Six turns the icon white to sit on that charcoal fill (0-0-3-2);
   white on the tint would be invisible. */
body .panel-sidebar a.list-group-item.active i,
body .panel-sidebar a.list-group-item.active:focus i,
body .panel-sidebar a.list-group-item.active:hover i,
body .panel-sidebar a.list-group-item.active .fas,
body .panel-sidebar a.list-group-item.active .far{
  color:var(--wh-coral);
}

/* 21.3  Six greys the icons on hover with `!important`, which no amount of
   specificity beats -- this has to match the flag. */
body .panel-sidebar a.list-group-item:hover i.fas,
body .panel-sidebar a.list-group-item:hover i.far{
  color:var(--wh-coral)!important;
}

/* 21.4  NOTE on the other marker: `div.sidebar .list-group-item-selected`
   (teal `#319FC3` in Six, 0-0-2-1) is already handled by 17.2, which lists
   `body div.sidebar .list-group-item-selected` at 0-0-2-2. Verified in the
   browser -- no rule needed here.

   21.5  The view filters (Active / Pending / Suspended) carry a third state
   at 0-0-4-0, grey `#eee` on `#555`. Legible, but a third look for the same
   idea, so it joins the other two. */
body .panel-sidebar.view-filter-btns .list-group-item.active,
body .panel-sidebar.view-filter-btns .list-group-item.active:focus,
body .panel-sidebar.view-filter-btns .list-group-item.active:hover{
  background-color:var(--wh-tint);
  border-color:var(--wh-line);
  color:var(--wh-navy);
  font-weight:700;
}

/* ==========================================================================
   22. Portal home: hero, captcha and shortcut tiles
   The three sat on colliding margin systems. The hero ended right below the
   search field, the captcha was injected into that gap with no spacing of its
   own, and the tiles were pulled up 46px into whatever was left -- so the
   captcha and the tiles fought for the same band of pixels and the section
   boundary cut straight through the cards.
   ========================================================================== */

/* 22.1  The captcha now owns vertical space instead of borrowing it.
   `.domainchecker-homepage-captcha` wraps a fixed 304px reCAPTCHA iframe that
   Six left inline, so it sat wherever the text flow put it. */
body #home-banner .domainchecker-homepage-captcha,
body section#home-banner .domainchecker-homepage-captcha{
  display:flex;
  justify-content:center;
  margin:var(--wh-sp-6) 0 0;
}
/* The iframe carries its own white card and shadow from Google. Softening the
   join so it reads as part of the hero rather than pasted on top of it. */
body section#home-banner .domainchecker-homepage-captcha > div,
body section#home-banner .recaptcha-container > div{
  border-radius:var(--wh-radius);
  overflow:hidden;
  box-shadow:0 8px 28px rgba(4,37,81,.28);
}
body section#home-banner .domainchecker-homepage-captcha iframe{display:block}
/* Six wraps the fallback image captcha in grid columns that fight the centring
   above; neutralised so both captcha types land in the same place. */
body section#home-banner #default-captcha-domainchecker{
  background:rgba(255,255,255,.96);
  border-radius:var(--wh-radius);
  padding:var(--wh-sp-4);
  max-width:420px;
}
body section#home-banner #default-captcha-domainchecker p{color:var(--wh-slate);margin-bottom:var(--wh-sp-3)}

/* 22.2  Hero depth. The bottom padding has to clear the tiles' overlap, or
   the boundary between the navy hero and the page cuts through the cards.
   46px of overlap plus breathing room below the captcha. */
body section#home-banner{padding:78px 0 104px}

/* 22.3  The tiles span the full row now that the lead column is gone. Four
   equal cards, centred, with the same gutter as the rest of the theme. */
body .home-shortcuts{margin:-46px 0 var(--wh-sp-8)}
/* Pulling the list out by the tile gutter so the card edges line up with the
   page content below rather than sitting 15px inboard of it. */
body .home-shortcuts ul{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
  justify-content:center;
  margin:0 -9px;
}
/* Six draws teal 1px rules between the tiles, and the first/last-child rules
   sit at 0-0-2-1 -- above the plain `li` reset in section 7, so a stray blue
   line survived down the left edge of the first card. */
body .home-shortcuts ul > li,
body .home-shortcuts ul > li:first-child,
body .home-shortcuts ul > li:last-child{border:none}
body .home-shortcuts ul > li{
  flex:1 1 0;
  min-width:0;
  display:flex;
}
body .home-shortcuts ul > li > a{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:124px;
  padding:var(--wh-sp-6) var(--wh-sp-4);
}
body .home-shortcuts ul > li > a i{margin-bottom:var(--wh-sp-3)}
body .home-shortcuts ul > li > a p{
  margin:0;
  text-transform:uppercase;
  letter-spacing:.5px;
  font-size:13.5px;
  font-weight:700;
}
/* Six hides the chevron until hover and reveals it inline, which shifts the
   label sideways. Reserving the space so the label never moves. */
body .home-shortcuts ul > li > a p span{
  display:inline-block;
  opacity:0;
  transition:opacity .18s ease;
}
body .home-shortcuts ul > li > a:hover p span{opacity:1}

@media (max-width:991px){
  body section#home-banner{padding:56px 0 92px}
  body .home-shortcuts ul > li{flex:1 1 45%}
}
@media (max-width:767px){
  body section#home-banner{padding:44px 0 var(--wh-sp-8)}
  body section#home-banner .domainchecker-homepage-captcha{
    margin-top:var(--wh-sp-5);
    transform:scale(.88);
    transform-origin:top center;
  }
  body .home-shortcuts{margin:var(--wh-sp-6) 0 var(--wh-sp-7)}
  body .home-shortcuts ul{display:flex}
  body .home-shortcuts ul > li{flex:1 1 100%;padding:0 0 var(--wh-sp-3)}
  body .home-shortcuts ul > li > a{min-height:0;padding:var(--wh-sp-5)}
}

/* ==========================================================================
   23. Domain register / domain pricing
   IMPORTANT — why these rules carry `!important`.
   The order form lives in /templates/orderforms/, not in this theme, and it
   loads its own stylesheet from inside the page body. That is AFTER
   custom.css in the cascade, so on these surfaces a later rule of equal
   specificity wins no matter how the selector is written. The flag is used
   deliberately here and nowhere else in the file.
   ========================================================================== */

/* 23.1  The domain search banner.
   It was a navy slab carrying a large globe illustration as a background
   image -- a 2014 hosting-site idiom, and the pale globe left the search
   field floating on a busy field. Replaced with a quiet tinted panel so the
   input is the only thing competing for attention. */
body .domain-checker-container,
body .domain-checker-bg,
body #domain-selection-header,
body #order-standard_cart .domain-checker-container,
body #order-standard_cart .domain-checker-bg{
  background-image:none!important;
  background-color:var(--wh-tint)!important;
  border:1px solid var(--wh-line)!important;
  border-radius:var(--wh-radius-lg)!important;
  box-shadow:none!important;
  padding:var(--wh-sp-8) var(--wh-sp-6)!important;
  margin:0 0 var(--wh-sp-7)!important;
  min-height:0!important;
  color:var(--wh-slate)!important;
}
/* The globe is painted on a child in some order form builds. */
body .domain-checker-container *,
body .domain-checker-bg *{background-image:none!important}
body .domain-checker-container h1,
body .domain-checker-container h2,
body .domain-checker-container h3,
body .domain-checker-container p,
body .domain-checker-container label{color:var(--wh-navy)!important}

/* The field itself: white on the tint, pill, coral action. */
body .domain-checker-container .form-control,
body #order-standard_cart .domain-checker-container .form-control{
  background:#fff!important;
  border:1px solid var(--wh-line)!important;
  border-radius:var(--wh-pill) 0 0 var(--wh-pill)!important;
  height:58px!important;
  padding:0 var(--wh-sp-6)!important;
  font-size:16px!important;
  box-shadow:none!important;
}
body .domain-checker-container .btn,
body #btnCheckAvailability{
  background:var(--wh-coral-btn)!important;
  color:#fff!important;
  border:none!important;
  height:58px!important;
  padding:0 var(--wh-sp-7)!important;
  border-radius:0 var(--wh-pill) var(--wh-pill) 0!important;
  font-weight:600!important;
}
body .domain-checker-container .btn:hover,
body #btnCheckAvailability:hover{background:var(--wh-coral-btn-dark)!important}
body .domain-checker-container .input-group{
  box-shadow:0 6px 24px rgba(26,62,124,.10);
  border-radius:var(--wh-pill);
}
@media (max-width:767px){
  body .domain-checker-container,
  body .domain-checker-bg{padding:var(--wh-sp-6) var(--wh-sp-5)!important}
  body .domain-checker-container .form-control,
  body .domain-checker-container .btn,
  body #btnCheckAvailability{height:50px!important}
}

/* 23.2  The three TLD logo cards (.com / .net / .online).
   Hidden at the client's request. They were third-party registry logos on
   coloured strips, duplicating prices the table below already lists. */
body .featured-tlds-container{display:none!important}

/* 23.3  The TLD pricing table.
   Six's version: a 6px `#97b5d2` rule under the header, `#efefef` header
   cells with alternating `#f5f5f5`, and a 2px `#c7d7e6` divider down every
   price cell -- three greys and two blues doing the work one line should do.
   Rebuilt as a plain modern table: one header band, one hairline per row,
   the price as the emphasis and the term as quiet support beneath it. */
body .domain-pricing .tld-pricing-header,
body .domain-pricing .tld-pricing-header .col-xs-2,
body .domain-pricing .tld-pricing-header .col-sm-2,
body .domain-pricing .tld-pricing-header div:nth-child(odd){
  background-color:var(--wh-tint)!important;
  border-bottom:1px solid var(--wh-line)!important;
  border-color:var(--wh-line)!important;
  color:var(--wh-navy)!important;
  font-family:var(--wh-head);
  font-weight:700;
  font-size:12.5px;
  text-transform:uppercase;
  letter-spacing:.6px;
  height:auto!important;
  padding-top:var(--wh-sp-3)!important;
  padding-bottom:var(--wh-sp-3)!important;
}
body .domain-pricing .tld-pricing-header{
  border-radius:var(--wh-radius-lg) var(--wh-radius-lg) 0 0!important;
  overflow:hidden;
}
body .domain-pricing .tld-row{
  padding-top:var(--wh-sp-3)!important;
  padding-bottom:var(--wh-sp-3)!important;
  border-bottom:1px solid var(--wh-line)!important;
  transition:background .15s ease;
}
body .domain-pricing .tld-row:hover{background:var(--wh-tint)!important}
body .domain-pricing .tld-row.highlighted{background:var(--wh-tint)!important}
/* The vertical rule between price columns was heavier than the row lines. */
body .domain-pricing .two-row-center{
  border-right:1px solid var(--wh-line)!important;
  line-height:1.4!important;
  margin:0!important;
}
body .domain-pricing .tld-row > div:last-child .two-row-center{border-right:none!important}
html[dir="rtl"] body .domain-pricing .two-row-center{
  border-right:none!important;border-left:1px solid var(--wh-line)!important;
}
/* TLD name reads as the row's label; price as the value; term as support. */
body .domain-pricing .tld-row .domain,
body .domain-pricing .tld-row > div:first-child{
  font-family:var(--wh-head);
  font-weight:700;
  color:var(--wh-navy);
  font-size:15px;
}
body .domain-pricing .tld-row .price,
body .domain-pricing .tld-row .domain-price{
  color:var(--wh-slate);
  font-weight:600;
}
body .domain-pricing .tld-row small,
body .domain-pricing .tld-row .cycle,
body .domain-pricing .tld-row .term{
  color:var(--wh-muted);
  font-size:12.5px;
}
/* Sits the whole table on a card so it reads as one object. */
body .domain-pricing .tld-pricing-header,
body .domain-pricing .tld-row{
  margin-left:0!important;
  margin-right:0!important;
}
body .domain-pricing{
  background:#fff;
  border:1px solid var(--wh-line);
  border-radius:var(--wh-radius-lg);
  box-shadow:var(--wh-shadow);
  padding:var(--wh-sp-6);
}
/* Inside a padded card the header no longer meets the card edge, so it takes
   the small radius rather than the card's. */
body .domain-pricing .tld-pricing-header{
  border-radius:var(--wh-radius) var(--wh-radius) 0 0!important;
}
body .domain-pricing .tld-row:last-child{border-bottom:none!important}

/* 23.4  Category filter chips: spacing to match the new table. */
body .tld-filters{margin:0 0 var(--wh-sp-6)!important}
body .domain-pricing h4{
  font-family:var(--wh-head);
  font-weight:700;
  color:var(--wh-navy);
  margin:0 0 var(--wh-sp-4);
  font-size:18px;
}

/* ==========================================================================
   24. Fix pack
   Defects found auditing the deployed theme against the live main site.
   Each block names the cause, not just the cure, in the style of 17-23.
   ========================================================================== */

/* 24.1  Typography fallbacks, so head.tpl can stop fetching Google Fonts.
   Six paints Raleway in three places and only one of them was overridden:
     h1..h6                     -> covered by section 3
     section#header .logo-text  -> covered by section 5
     .navbar-main               -> NOT covered, fell back to Helvetica
   Section 3 also lists `.h1,.h2,.h3,.h4` but stops there, so the `.h5`/`.h6`
   utility classes kept Raleway too. Both are closed here, which makes the
   Open Sans + Raleway request in head.tpl genuinely dead weight.

   The nav values are taken from the Webhoster kit's own header template
   (elementor/css/post-23.css), which sets .elementor-nav-menu .elementor-item
   to typography token 520c191: Hind / 400 / 14px / uppercase / 1px tracking.
   Note this is the BODY face, not the heading face -- the theme was running
   the nav at weight 600, and Raleway before that. */
body .navbar-main,
body section#main-menu .navbar{font-family:var(--wh-font)}
body section#main-menu .navbar-nav > li > a,
.navbar-main .navbar-nav > li > a{
  font-family:var(--wh-font);
  font-weight:400;
  font-size:14px;
  letter-spacing:1px;
}
h5,h6,.h5,.h6{
  font-family:var(--wh-head);
  font-weight:700;
  color:var(--wh-navy);
  letter-spacing:-.2px;
}

/* 24.2  Arabic (and other RTL) text had no font at all.
   Hind carries Latin + Devanagari; Lato carries Latin. Neither has a single
   Arabic glyph, so every Arabic page fell through to the OS default and read
   as a different site. These stacks keep Hind/Lato first -- so Latin strings
   inside Arabic pages (domain names, prices, product codes) still render in
   the brand faces -- and hand only the Arabic range to an Arabic family.

   The families below are system fonts, chosen because they ship somewhere on
   every platform you actually serve: Segoe UI + Tahoma (Windows), Geeza Pro +
   SF Arabic (macOS/iOS), Noto Naskh/Sans Arabic (Android/Linux).

   To match Hind's geometric build more closely, self-host Cairo or Tajawal
   into fonts/webhoster/ and uncomment the @font-face + the first stack entry.
   Do not add a Google Fonts link for it -- that reintroduces the third-party
   request 24.1 just removed. */
/*
@font-face{font-family:'Cairo';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/webhoster/cairo-arabic-400.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
@font-face{font-family:'Cairo';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/webhoster/cairo-arabic-700.woff2) format('woff2');
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF;}
*/
:root{
  --wh-font-rtl:'Hind',/*'Cairo',*/'Noto Sans Arabic','Noto Naskh Arabic',
                'SF Arabic','Geeza Pro','Segoe UI',Tahoma,sans-serif;
  --wh-head-rtl:'Lato',/*'Cairo',*/'Noto Kufi Arabic','Noto Sans Arabic',
                'SF Arabic','Geeza Pro','Segoe UI',Tahoma,sans-serif;
}
html[dir="rtl"] body,
html[dir="rtl"] .btn,
html[dir="rtl"] .form-control{font-family:var(--wh-font-rtl)}
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3,
html[dir="rtl"] .h4,html[dir="rtl"] .h5,html[dir="rtl"] .h6,
html[dir="rtl"] body .navbar-main,
html[dir="rtl"] body section#header .logo-text{font-family:var(--wh-head-rtl)}
/* Arabic has no case, so the nav's uppercase + letter-spacing does nothing
   useful and the tracking pulls the joined script apart. */
html[dir="rtl"] body section#main-menu .navbar-nav > li > a,
html[dir="rtl"] .navbar-main .navbar-nav > li > a{
  text-transform:none;
  letter-spacing:0;
}
/* Arabic sits lower in its em box; 1.75 leading reads cramped for it. */
html[dir="rtl"] body{line-height:1.9}

/* 24.3  Button hover contrast.
   Section 4 darkens .btn-primary and .btn-danger on hover but LIGHTENS
   .btn-warning and .btn-success, which inverts the file's own rule that a
   fill under white text needs >=4.5:1. Measured:
     .btn-warning       #B85200  4.95:1  pass
     .btn-warning:hover #D88C1B  2.73:1  FAIL   <- worst in the theme
     .btn-success       #1E7A34  5.40:1  pass
     .btn-success:hover #238B3D  4.35:1  marginal
   .btn-warning is not an edge case: standard_cart's checkout page uses it for
   the New / Existing Customer toggle. Both hovers now darken. */
.btn-warning:hover,.btn-warning:focus,.btn-warning:active,.btn-warning.active{
  background:#964200;color:#fff;                 /* 6.83:1 */
  box-shadow:0 8px 20px rgba(150,66,0,.30);
}
.btn-success:hover,.btn-success:focus,.btn-success:active,.btn-success.active{
  background:#17612A;color:#fff;                 /* 7.55:1 */
  box-shadow:0 8px 20px rgba(23,97,42,.30);
}

/* 24.4  WhatsApp floating button.
   Was inline-styled in header.tpl, which caused three problems no stylesheet
   could reach: right:40px never flipped for RTL, it overlapped the footer's
   .back-to-top (right:26px, so the two collided once you scrolled to the
   bottom), and at 60px/40px on a phone it covered the primary CTA on the
   cart and checkout pages. header.tpl now emits `.wh-wa-fab` with no inline
   style. Offsets use logical properties so RTL flips for free. */
.wh-wa-fab{
  position:fixed;
  inset-block-end:26px;
  inset-inline-end:26px;
  width:56px;height:56px;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  border-radius:50%;
  font-size:29px;line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.24);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
  z-index:1030;               /* above content, below Bootstrap modals (1040+) */
}
.wh-wa-fab:hover,.wh-wa-fab:focus{
  background:#1FB855;color:#fff;
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(0,0,0,.30);
}
.wh-wa-fab i{margin:0}
/* Clear the .back-to-top disc, which is absolutely positioned at the top edge
   of #footer. Lifting the button one disc-height plus a gutter keeps both
   tappable when the page is scrolled to the end. */
@media (max-width:767px){
  .wh-wa-fab{
    width:50px;height:50px;font-size:26px;
    inset-block-end:16px;
    inset-inline-end:16px;
  }
}

/* 24.5  .back-to-top had no accessible name either (footer.tpl now carries
   one). It also had no focus treatment of its own, and the generic ring in
   19.9 is navy -- invisible against the navy footer. */
body section#footer .back-to-top:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(4,37,81,.85);
}

/* 24.6  Focus ring on dark surfaces.
   19.9 sets a navy ring for every focusable element. On the navy header, navy
   nav and navy footer that is navy-on-navy; only the 2px of white halo left
   uncovered by the outline shows, which is not a usable indicator. Invert it
   on the dark bands. */
body section#header a:focus-visible,
body section#header .btn:focus-visible,
body section#main-menu a:focus-visible,
body section#home-banner a:focus-visible,
body section#footer a:focus-visible{
  outline:3px solid #fff;
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(4,37,81,.85);
}

/* 24.7  Motion.
   Sections 4, 5, 8, 12 and 22 all animate transform on hover, and 12 lifts
   product cards on the store grid. Honour the OS setting. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .btn:hover,.btn:focus,
  .wh-wa-fab:hover,.wh-wa-fab:focus,
  body section#footer .back-to-top:hover,
  #order-standard_cart .product:hover,
  #products .product:hover{transform:none!important}
}

/* 24.8  Tap targets. Six's .btn-xs is 12px/2px padding, which lands well under
   the 24px minimum on the invoice, domain and service tables where it is used
   most. Only the vertical box grows; the type size is left alone so the
   tables keep their density. */
@media (pointer:coarse){
  .btn-xs,.btn-sm{min-height:32px;display:inline-flex;align-items:center;justify-content:center}
  .table .btn-xs,.table .btn-sm{min-height:30px}
}

/* ==========================================================================
   25. Kit fidelity pack   [OPTIONAL -- safe to delete this whole section]

   Sections 1-24 were built without the original theme files. With the static
   export of the Webhoster kit in hand, four signature treatments turn out to
   have been approximated rather than matched. Everything below closes those
   gaps; nothing below fixes a defect, so if you prefer the current flatter
   look, delete from this banner to the end of the file and nothing breaks.

   Measured from the kit's own Elementor CSS
   (assets/webhoster/wp-content/uploads/sites/57/elementor/css/):

     radius        30px on cards AND buttons   111 occurrences
                   15px on dropdowns
     CTA fill      linear-gradient(135deg, #FE575B, #FF643F)   27 occurrences
     shadow        0 10px 30px rgba(0,0,0,.1)   74 occurrences
     nav           Hind / 400 / 14px / uppercase / 1px   (applied in 24.1)
   ========================================================================== */

/* 25.1  The CTA gradient. This is the kit's most recognisable element -- every
   primary button on the marketing site is a 135deg red-to-coral sweep, and the
   theme rendered them as a flat #D44420.

   The kit's own stops cannot be used as-is: #FE575B is 3.12:1 under white text
   and #FF643F is 2.94:1, so both fail. A gradient has to pass at its worst
   point, not its average. These stops hold the same hue journey (red -> coral,
   same angle) at passing contrast:

     #BF3742  5.47:1        #D14622  4.56:1
     hover    #A62D34 6.89:1 -> #B93714 5.80:1

   background-color is kept underneath as the fallback so a failed gradient
   never leaves white text on a transparent button. */
:root{
  --wh-cta-grad:linear-gradient(135deg,#BF3742 0%,#D14622 100%);
  --wh-cta-grad-hover:linear-gradient(135deg,#A62D34 0%,#B93714 100%);
}
body .btn-primary,
body .btn-info,
body section#header .top-nav > li.primary-action > a,
body section#header .top-nav > li.primary-action > a.btn,
body section#home-banner .input-group-btn .btn.search,
body #order-standard_cart .btn-checkout{
  background-color:var(--wh-coral-btn);
  background-image:var(--wh-cta-grad);
  color:#fff;
  border:none;
}
body .btn-primary:hover,body .btn-primary:focus,body .btn-primary:active,
body .btn-info:hover,body .btn-info:focus,body .btn-info:active,
body section#header .top-nav > li.primary-action > a:hover,
body section#header .top-nav > li.primary-action > a.btn:hover,
body section#home-banner .input-group-btn .btn.search:hover,
body #order-standard_cart .btn-checkout:hover{
  background-color:var(--wh-coral-btn-dark);
  background-image:var(--wh-cta-grad-hover);
  color:#fff;
}
/* Secondary buttons stay flat. The kit uses the gradient sparingly, on the one
   action per screen it wants clicked; putting it on every button would spend
   the emphasis it exists to create. */

/* 25.2  Radius. The kit runs 30px on cards and buttons alike, which the theme
   approximated as 14px cards + a 40px pill.

   The pill was already right: at a ~40px button height, 30px and 40px both
   render as a full capsule, so buttons are left alone.

   Cards are raised to the kit's 30px, but only the card-shaped surfaces --
   panels, product tiles, the hero, promo blocks. Inputs, tables, table cells,
   alerts and badges keep the tighter radius on purpose: a 30px corner on a
   36px-tall input eats its own content, and WHMCS's data tables are far denser
   than any page in the kit. This is the one place the client area should not
   follow the marketing site literally. */
:root{
  --wh-radius-card:30px;
  --wh-radius-drop:15px;    /* kit dropdown radius */
}
body .panel,
body .panel-sidebar,
body .client-home-panels .panel,
body .tiles .tile,
body .product-card,
body .order-summary,
body #order-standard_cart .product,
body #order-standard_cart .summary-container,
body #order-standard_cart .order-summary,
body #order-standard_cart .bordered-totals,
body .promo-box,
body .domain-pricing,
body .invoice-container{border-radius:var(--wh-radius-card)}
/* A panel's heading and footer meet the rounded edge, so they need the same
   corner or the fill squares off outside the card outline. */
body .panel > .panel-heading,
body .panel-sidebar > .panel-heading,
body #order-standard_cart .product header{
  border-radius:var(--wh-radius-card) var(--wh-radius-card) 0 0;
}
body .panel > .panel-footer{border-radius:0 0 var(--wh-radius-card) var(--wh-radius-card)}
/* .list-group inside a sidebar panel is the last child, so its final row has
   to round with the card. */
body .panel-sidebar .list-group-item:last-child,
body .sidebar .panel .list-group-item:last-child{
  border-radius:0 0 var(--wh-radius-card) var(--wh-radius-card);
}
.dropdown-menu{border-radius:var(--wh-radius-drop)}

/* 25.3  Shadow. The kit uses one shadow everywhere: a neutral-black
   0 10px 30px at 10%. The theme's is navy-tinted, shorter and softer, which
   makes cards sit flatter against the page than they do on the main site. */
:root{
  --wh-shadow-kit:0 10px 30px rgba(0,0,0,.10);
  --wh-shadow-kit-lg:0 20px 30px rgba(0,0,0,.10);
}
body .panel,
body .panel-sidebar,
body .tiles .tile,
body .product-card,
body #order-standard_cart .product,
body #order-standard_cart .summary-container,
body .domain-pricing,
body .invoice-container{box-shadow:var(--wh-shadow-kit)}
body #order-standard_cart .product:hover,
body #products .product:hover{box-shadow:var(--wh-shadow-kit-lg)}

/* 25.4  Heading tracking. The kit sets H1 to Lato 700 at -2px letter-spacing;
   the theme uses -.2px, an order of magnitude looser, so headings read as a
   different typeface even though they are the same one.
   The kit's -2px is calibrated for 48-72px marketing headlines. Scaled to the
   client area's 34px H1 the proportional equivalent is about -1.4px, and the
   value tapers as the sizes drop -- tight tracking on a 22px H3 starts to cost
   legibility, which matters more here than on a landing page. */
h1,.h1{letter-spacing:-1.2px}
h2,.h2{letter-spacing:-.8px}
h3,.h3{letter-spacing:-.5px}
h4,h5,h6,.h4,.h5,.h6{letter-spacing:-.3px}
/* Arabic must never be tracked negatively -- the script is joined, and tight
   tracking breaks the connections between letterforms. */
html[dir="rtl"] h1,html[dir="rtl"] h2,html[dir="rtl"] h3,
html[dir="rtl"] h4,html[dir="rtl"] h5,html[dir="rtl"] h6,
html[dir="rtl"] .h1,html[dir="rtl"] .h2,html[dir="rtl"] .h3,
html[dir="rtl"] .h4,html[dir="rtl"] .h5,html[dir="rtl"] .h6{letter-spacing:0}

/* 25.5  Nav hover. The kit hovers nav items to the raw coral #FF643F, which is
   3.53:1 on the navy bar. Section 5 already substitutes #FF9270 (4.74:1) and
   that substitution is kept -- the nav is the primary way around the client
   area, so it is the wrong place to trade contrast for an exact hex match.
   Recorded here so the difference is a decision, not an oversight. */

/* ==========================================================================
   26. Review pass 2
   Defects found by rendering the deployed theme in a browser and inspecting
   computed styles, rather than reading the stylesheet. Three of these are
   regressions introduced by sections 24-25.
   ========================================================================== */

/* 26.1  Home tiles were clipped on hover.
   Cause, from the computed ancestor chain: Six sets `overflow:hidden` on the
   shortcut `li`. Section 22.3 restyled the li but never cleared it, so the
   card's 5px hover lift and its whole drop shadow were cut to the li's box --
   a hard rectangle round the hovered tile.
   The shadow also used the navy tint, which is invisible against the navy
   hero the tiles overlap, so the top half of the lift never read at all. */
body .home-shortcuts ul,
body .home-shortcuts ul > li{overflow:visible}
body .home-shortcuts ul > li > a{
  border-radius:var(--wh-radius-card,30px);
  box-shadow:0 10px 30px rgba(4,37,81,.16);
}
body .home-shortcuts ul > li > a:hover{
  box-shadow:0 18px 40px rgba(4,37,81,.26);
}

/* 26.2  Anchor buttons lost their text colour.
   Two separate causes, both specificity:
     a) section 3 sets `a:hover,a:focus{color:var(--wh-coral-ink)}` at 0-0-1-1.
        `.btn-primary{color:#fff}` is 0-0-1-0, so every <a class="btn"> in the
        theme turned dark coral on hover -- dark coral text on a coral fill.
     b) the order form sheet sets `#order-standard_cart a{color:teal}` at
        0-1-0-1, which beat the button colour even at rest. That one is mine.
   Buttons are not links for colour purposes. Pinning every variant's text
   colour across all states, above both rules. */
body a.btn-primary,body a.btn-primary:hover,body a.btn-primary:focus,body a.btn-primary:active,
body a.btn-info,body a.btn-info:hover,body a.btn-info:focus,body a.btn-info:active,
body a.btn-success,body a.btn-success:hover,body a.btn-success:focus,body a.btn-success:active,
body a.btn-danger,body a.btn-danger:hover,body a.btn-danger:focus,body a.btn-danger:active,
body a.btn-warning,body a.btn-warning:hover,body a.btn-warning:focus,body a.btn-warning:active{
  color:#fff;
}
body a.btn-default,body a.btn-default:hover,body a.btn-default:focus,body a.btn-default:active{
  color:var(--wh-navy);
}
/* `.btn` with no variant class: Six leaves these on the default grey fill.
   Give them the same treatment as .btn-default so no button anywhere renders
   link-coloured text on a coloured fill. */
body a.btn:not(.btn-link):not(.btn-default),
body a.btn:not(.btn-link):not(.btn-default):hover,
body a.btn:not(.btn-link):not(.btn-default):focus{color:#fff}
body .btn-default,
body .btn-default:hover,
body .btn-default:focus,
body .btn-default:active{color:var(--wh-navy)}
body a.btn-link,body a.btn-link:hover,body a.btn-link:focus{color:var(--wh-teal)}

/* 26.3  The RTL hero search box sat flush right instead of centred.
   Bootstrap 3 centres it with `.col-md-offset-2`, which is margin-LEFT. Under
   dir=rtl the columns float right, so a left margin pushes the box away from
   centre by exactly the offset -- measured 195px off at a 1440 viewport.
   Section 18 flipped floats and text but not offsets. */
html[dir="rtl"] .col-xs-offset-1{margin-left:0;margin-right:8.33333333%}
html[dir="rtl"] .col-xs-offset-2{margin-left:0;margin-right:16.66666667%}
html[dir="rtl"] .col-xs-offset-3{margin-left:0;margin-right:25%}
html[dir="rtl"] .col-xs-offset-4{margin-left:0;margin-right:33.33333333%}
html[dir="rtl"] .col-xs-offset-5{margin-left:0;margin-right:41.66666667%}
html[dir="rtl"] .col-xs-offset-6{margin-left:0;margin-right:50%}
html[dir="rtl"] .col-xs-offset-7{margin-left:0;margin-right:58.33333333%}
html[dir="rtl"] .col-xs-offset-8{margin-left:0;margin-right:66.66666667%}
html[dir="rtl"] .col-xs-offset-9{margin-left:0;margin-right:75%}
html[dir="rtl"] .col-xs-offset-10{margin-left:0;margin-right:83.33333333%}
html[dir="rtl"] .col-xs-offset-11{margin-left:0;margin-right:91.66666667%}
html[dir="rtl"] .col-sm-offset-1{margin-left:0;margin-right:8.33333333%}
html[dir="rtl"] .col-sm-offset-2{margin-left:0;margin-right:16.66666667%}
html[dir="rtl"] .col-sm-offset-3{margin-left:0;margin-right:25%}
html[dir="rtl"] .col-sm-offset-4{margin-left:0;margin-right:33.33333333%}
html[dir="rtl"] .col-sm-offset-5{margin-left:0;margin-right:41.66666667%}
html[dir="rtl"] .col-sm-offset-6{margin-left:0;margin-right:50%}
html[dir="rtl"] .col-sm-offset-7{margin-left:0;margin-right:58.33333333%}
html[dir="rtl"] .col-sm-offset-8{margin-left:0;margin-right:66.66666667%}
html[dir="rtl"] .col-sm-offset-9{margin-left:0;margin-right:75%}
html[dir="rtl"] .col-sm-offset-10{margin-left:0;margin-right:83.33333333%}
html[dir="rtl"] .col-sm-offset-11{margin-left:0;margin-right:91.66666667%}
html[dir="rtl"] .col-md-offset-1{margin-left:0;margin-right:8.33333333%}
html[dir="rtl"] .col-md-offset-2{margin-left:0;margin-right:16.66666667%}
html[dir="rtl"] .col-md-offset-3{margin-left:0;margin-right:25%}
html[dir="rtl"] .col-md-offset-4{margin-left:0;margin-right:33.33333333%}
html[dir="rtl"] .col-md-offset-5{margin-left:0;margin-right:41.66666667%}
html[dir="rtl"] .col-md-offset-6{margin-left:0;margin-right:50%}
html[dir="rtl"] .col-md-offset-7{margin-left:0;margin-right:58.33333333%}
html[dir="rtl"] .col-md-offset-8{margin-left:0;margin-right:66.66666667%}
html[dir="rtl"] .col-md-offset-9{margin-left:0;margin-right:75%}
html[dir="rtl"] .col-md-offset-10{margin-left:0;margin-right:83.33333333%}
html[dir="rtl"] .col-md-offset-11{margin-left:0;margin-right:91.66666667%}
html[dir="rtl"] .col-lg-offset-1{margin-left:0;margin-right:8.33333333%}
html[dir="rtl"] .col-lg-offset-2{margin-left:0;margin-right:16.66666667%}
html[dir="rtl"] .col-lg-offset-3{margin-left:0;margin-right:25%}
html[dir="rtl"] .col-lg-offset-4{margin-left:0;margin-right:33.33333333%}
html[dir="rtl"] .col-lg-offset-5{margin-left:0;margin-right:41.66666667%}
html[dir="rtl"] .col-lg-offset-6{margin-left:0;margin-right:50%}
html[dir="rtl"] .col-lg-offset-7{margin-left:0;margin-right:58.33333333%}
html[dir="rtl"] .col-lg-offset-8{margin-left:0;margin-right:66.66666667%}
html[dir="rtl"] .col-lg-offset-9{margin-left:0;margin-right:75%}
html[dir="rtl"] .col-lg-offset-10{margin-left:0;margin-right:83.33333333%}
html[dir="rtl"] .col-lg-offset-11{margin-left:0;margin-right:91.66666667%}

/* 26.4  The domain search block had two identical boxes nested inside it.
   `.domain-checker-container` wraps `.domain-checker-bg`, and section 23.1
   lists both in the same rule -- same tint, same 1px border, same
   `48px 24px` padding, all `!important`. Measured result: 192px of stacked
   vertical padding around a 58px input, and a second border drawn 25px inside
   the first.
   Section 23.1 qualifies with the cart id, so these have to match that weight
   and repeat !important to land. The outer box keeps the surface; the inner
   one becomes a plain wrapper. */
body .domain-checker-bg,
body #order-standard_cart .domain-checker-bg{
  background:transparent!important;
  border:none!important;
  padding:0!important;
  margin:0!important;
  box-shadow:none!important;
  border-radius:0!important;
  min-height:0!important;
}
body .domain-checker-container,
body #order-standard_cart .domain-checker-container{
  padding:var(--wh-sp-7) var(--wh-sp-6)!important;
  margin:0 0 var(--wh-sp-6)!important;
}
/* The field group was 488px inside an 848px block, so nearly half the panel
   was dead air either side of it. */
body .domain-checker-container .input-group,
body #order-standard_cart .domain-checker-container .input-group{
  width:100%;
  max-width:620px;
  margin:0 auto;
  float:none;
  display:flex;
}
body .domain-checker-container .input-group .form-control,
body #order-standard_cart .domain-checker-container .form-control{
  flex:1 1 auto;
  width:auto!important;
}
body .domain-checker-container .input-group .input-group-btn{
  flex:0 0 auto;
  width:auto;
}

/* 26.4b  The search field carried a permanent 3px navy outline.
   Not a border: WHMCS autofocuses this input on load, and a focused text
   field always matches :focus-visible, so section 19.9's link/button ring was
   painting on page load and never clearing. It read as an error state.
   Text inputs get the conventional affordance instead -- border colour plus a
   soft ring -- which is still a clear, non-colour-only focus indicator. The
   strong outline stays on links, buttons and list rows, where it belongs. */
body .form-control:focus-visible,
body .form-control:focus,
body input:focus-visible,
body textarea:focus-visible,
body select:focus-visible{
  outline:2px solid transparent;
  outline-offset:0;
  border-color:var(--wh-teal)!important;
  box-shadow:0 0 0 3px rgba(11,107,149,.22)!important;
}
/* Windows High Contrast mode ignores box-shadow, so the transparent outline
   above is what keeps a visible ring there. */
@media (forced-colors:active){
  body .form-control:focus-visible,
  body input:focus-visible,
  body select:focus-visible{outline:2px solid Highlight}
}

/* 26.5  TLD pricing table.
   Read off the live DOM rather than the stylesheet, because the causes were
   all in markup the theme never sees:

   a) The "Transfer" heading is a stock highlight: background #EFEFEF with a
      `border-bottom: 6px solid #97B5D2`. Against the tinted header that reads
      as a stuck hover or a sort control, and it is neither.
   b) Three elements stack a bottom border at different depths -- the header
      root, the nested `.row.no-gutters` inside the price column, and each
      `.col-xs-4` inside that. Hence the short rules that stop mid-table.
   c) The header cells centred their labels while the body cells start-aligned
      theirs, so no column label sat over its own values.
   d) Striping is driven by a `.highlighted` class, not nth-child. */

/* (a) + (b): one surface, one bottom rule, nothing else. */
body .domain-pricing .tld-pricing-header{
  display:flex;
  align-items:stretch;
  padding:0!important;
  min-height:52px;
  border-bottom:1px solid var(--wh-line)!important;
}
/* Section 23.3 draws these with
     body .domain-pricing .tld-pricing-header div:nth-child(odd)
   which is 0-0-3-2. An attribute selector alone only reaches 0-0-3-1, so the
   reset has to carry the same `div` qualifier to land. That nth-child(odd) is
   also why only two of the three labels had a rule under them: "Transfer" is
   the even child and never got one. */
body .domain-pricing .tld-pricing-header div:nth-child(odd),
body .domain-pricing .tld-pricing-header div[class*="col-"],
body .domain-pricing .tld-pricing-header div.row{
  background:transparent!important;
  border:none!important;
  min-height:0!important;
  height:auto!important;
}
body .domain-pricing .tld-pricing-header > [class*="col-"]{
  display:flex;
  align-items:center;
  padding:var(--wh-sp-3) 15px!important;
}
body .domain-pricing .tld-pricing-header > .col-md-8 > .row{
  display:flex;
  width:100%;
  align-items:center;
}
/* (c) The domain column is the row's label, so it aligns with its values on
   the start edge; the three price columns stay centred over theirs. Padding
   is stated on both header and body so the two never drift. */
body .domain-pricing .tld-pricing-header .col-md-4,
body .domain-pricing .tld-row .col-md-4{
  text-align:start;
  padding-left:15px;
  padding-right:15px;
}
body .domain-pricing .tld-pricing-header .col-xs-4,
body .domain-pricing .tld-row .col-xs-4{text-align:center}
body .domain-pricing .tld-pricing-header .col-md-8,
body .domain-pricing .tld-row .col-md-8{text-align:center}
/* Header labels read as labels, not as data. */
body .domain-pricing .tld-pricing-header{
  font-family:var(--wh-font);
  font-size:12px;
  font-weight:600;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--wh-muted);
}

/* (d) Striping and hover. The stripe stopped short of the card padding on
   both sides, which left each tinted band floating inside the card instead of
   reading as a row. The card drops its side padding so rows can run edge to
   edge; the heading and filters keep theirs. */
body .domain-pricing{padding-left:0!important;padding-right:0!important}
body .domain-pricing > h4,
body .domain-pricing > .tld-filters,
body .domain-pricing > p{
  margin-left:var(--wh-sp-6);
  margin-right:var(--wh-sp-6);
}
body .domain-pricing .tld-row{
  display:flex;
  align-items:center;
  border-bottom:1px solid var(--wh-line);
  transition:background-color .15s ease;
}
body .domain-pricing .tld-row.highlighted{background:var(--wh-tint)}
/* A hover that reads as "this row", distinct from the stripe underneath it,
   and identical on both stripe colours so the feedback never depends on which
   row you happen to be over. */
body .domain-pricing .tld-row:hover,
body .domain-pricing .tld-row.highlighted:hover{
  background:var(--wh-tint-2);
  box-shadow:inset 3px 0 0 var(--wh-coral);
}
html[dir="rtl"] body .domain-pricing .tld-row:hover,
html[dir="rtl"] body .domain-pricing .tld-row.highlighted:hover{
  box-shadow:inset -3px 0 0 var(--wh-coral);
}
body .domain-pricing .tld-row:last-child{border-bottom:none}
body .domain-pricing .tld-row .col-md-4{
  font-weight:700;
  color:var(--wh-navy);
}
/* The vertical rule between the domain label and the prices sat on
   `.two-row-center`, which is only 21px tall inside a 78px row, so it drew a
   short floating line rather than a column divider. With the header labels
   now sitting over their own columns the divider has nothing left to do. */
body .domain-pricing .two-row-center,
body .domain-pricing .tld-row .two-row-center,
html[dir="rtl"] body .domain-pricing .two-row-center{
  border-right:none!important;
  border-left:none!important;
}

/* 26.6  Dead space at the foot of the order form.
   `#order-standard_cart` carried a 48px bottom padding of its own on top of
   the section's, which left roughly 240px between the last card and the
   footer. The promo cards also had no top gap from the pricing table above
   them, so the whole block read as bottom-heavy. */
body #order-standard_cart{padding-bottom:0}
body #order-standard_cart .domain-promo-container,
body #order-standard_cart .cart-body > .row:last-child{
  margin-top:var(--wh-sp-7);
  margin-bottom:0;
}
body section#main-body{padding-bottom:var(--wh-sp-7)}

/* 26.7  Dropdowns, unified.
   Three different surfaces were acting as dropdowns -- the Bootstrap menus in
   the header, the popovers behind the language and notification triggers, and
   the bare native selects the order form falls back to on narrow screens.
   One shape, one shadow, one hover for all three. */
.dropdown-menu,
.popover{
  border:none!important;
  border-radius:var(--wh-radius-drop,15px);
  box-shadow:0 10px 30px rgba(4,37,81,.16);
  padding:var(--wh-sp-2) 0;
  overflow:hidden;
}
.popover{padding:0}
.popover .popover-content{padding:var(--wh-sp-2) 0}
.popover .arrow{display:none}
.dropdown-menu > li > a,
.popover ul li a{
  padding:10px var(--wh-sp-5);
  color:var(--wh-slate);
  font-weight:500;
  transition:background-color .15s ease,color .15s ease;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
.popover ul li a:hover{
  background:var(--wh-tint);
  color:var(--wh-navy);
}
.dropdown-menu > .divider{margin:var(--wh-sp-2) 0;background:var(--wh-line)}
/* Native selects cannot take a custom menu, so match the closed control to the
   dropdown triggers instead: same radius, same border, one chevron. */
select.form-control{
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
  border-radius:var(--wh-radius);
  border:1px solid var(--wh-line);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%231A3E7C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right var(--wh-sp-4) center;
  padding-right:var(--wh-sp-8);
}
html[dir="rtl"] select.form-control{
  background-position:left var(--wh-sp-4) center;
  padding-right:var(--wh-sp-3);
  padding-left:var(--wh-sp-8);
}

/* 26.8  Button text colour, defensive pass.
   The store pages are rendered inside `#order-standard_cart` too, so the order
   form sheet's `#order-standard_cart a{color:teal}` (0-1-0-1) reached the
   "Order Now" buttons on every product page. Measured there:
     at rest   teal   on coral   1.31:1
     on hover  coral-ink on coral 1.09:1   -- the label vanished entirely
   That rule is fixed at source in the order form stylesheet, but this file
   should not depend on the other one being deployed. Matching the id weight
   here means the theme is correct on its own. */
/* The exclusions are load-bearing. A first pass wrote this as a blanket
   `#order-standard_cart .btn{color:#fff}`, which turned "Validate Code"
   (`btn btn-block btn-default`, a pale tint fill) into white-on-tint at
   1.13:1. Pale-filled variants have to be carved out in the selector, not
   corrected afterwards, or the blanket rule wins on source order. */
#order-standard_cart a.btn:not(.btn-default):not(.btn-link),
#order-standard_cart a.btn:not(.btn-default):not(.btn-link):hover,
#order-standard_cart a.btn:not(.btn-default):not(.btn-link):focus,
#order-standard_cart a.btn:not(.btn-default):not(.btn-link):active,
#order-standard_cart button.btn:not(.btn-default):not(.btn-link),
#order-standard_cart button.btn:not(.btn-default):not(.btn-link):hover,
#order-standard_cart button.btn:not(.btn-default):not(.btn-link):focus{color:#fff}
#order-standard_cart .btn-default,
#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-default:focus,
#order-standard_cart .btn-default:active{color:var(--wh-navy)}
#order-standard_cart .btn-link,
#order-standard_cart .btn-link:hover,
#order-standard_cart .btn-link:focus{color:var(--wh-teal)}
/* `.btn-continue-shopping` and `.btn-remove-from-cart` are `.btn-link`
   variants that should stay link-coloured rather than turning white. */
#order-standard_cart a.btn-remove-from-cart,
#order-standard_cart a.btn-remove-from-cart:hover{color:var(--wh-danger)}

/* 26.9  Disabled checkout button.
   The cart sheet parked it on `--wh-muted-soft` (#9AA0B0), which section 2
   marks DECORATION ONLY: never text. White on it is 2.62:1, so the empty-cart
   state announced itself with an unreadable label. #6E7488 is 4.65:1 and still
   reads clearly as inactive next to the coral live state. */
body #order-standard_cart .btn-checkout.disabled,
body #order-standard_cart .btn-checkout[disabled],
body .btn.disabled,
body .btn[disabled]{
  background:#6E7488!important;
  background-image:none!important;
  color:#fff!important;
  box-shadow:none!important;
  opacity:1;
}
body .btn.disabled:hover,
body .btn[disabled]:hover{transform:none!important}

/* ==========================================================================
   27. Review pass 3 -- language parity, contrast, responsive
   ========================================================================== */

/* 27.1  The RTL sidebar gap.
   Reproduced on /announcements: the second sidebar panel starts at y=387 in
   English and y=674 in Arabic -- a 287px hole with nothing in it.

   Measured cause, one property. Six gives the secondary sidebar `clear:left`,
   which in English clears the primary sidebar -- also a left float -- so it
   drops neatly beneath it. Section 18 flips `float` for RTL but never flipped
   `clear`, so in Arabic the secondary sidebar floats right while still
   clearing LEFT. The only left float left on the page is the main content, so
   it cleared the entire article column and landed below it.

   `clear` is a directional property and has to flip with `float` or the two
   disagree. Flipping it on the columns that carry one, rather than globally,
   so no element that currently clears nothing starts clearing something. */
html[dir="rtl"] .sidebar-secondary,
html[dir="rtl"] .sidebar.sidebar-secondary,
html[dir="rtl"] .pull-md-left{clear:right}
html[dir="rtl"] .pull-md-right{clear:none}

/* 27.2  Content width on large screens.
   Bootstrap 3 caps `.container` at 1170px. The main site's Elementor sections
   run much wider, so on anything above about 1500px the client area sat as a
   narrow ribbon with a large empty margin either side -- read as "too much
   space on the right" because the sidebar anchors the left and the eye lands
   on the leftover on the trailing edge.
   Widening in two steps rather than going full-bleed: line length in the
   content column stays readable, and the page still has margins. */
@media (min-width:1400px){
  .container{width:1320px}
}
@media (min-width:1700px){
  .container{width:1480px}
}
/* The hero and footer already span the viewport; only their inner container
   moves, so the navy bands stay full width at every size. */

/* 27.3  Pale-filled buttons had no edge.
   `.btn-default` is `--wh-tint` (#EDF1FC) on a white card. That is a 1.06:1
   difference against the surface behind it, so the control had no visible
   boundary -- "Cancel", "Add More" and the pagination buttons read as text,
   not as buttons. The fill stays (it carries the navy label at 9.18:1); a
   border supplies the edge the fill cannot. */
.btn-default,
body .btn-default,
#order-standard_cart .btn-default{
  background:var(--wh-tint);
  border:1px solid var(--wh-tint-2);
  color:var(--wh-navy);
}
.btn-default:hover,.btn-default:focus,.btn-default:active,
body .btn-default:hover,body .btn-default:focus,
#order-standard_cart .btn-default:hover{
  background:var(--wh-tint-2);
  border-color:#C4D2F0;
  color:var(--wh-navy);
}
/* Same problem on the file-attachment "Add More" control and the DataTables
   pagination pills, which use the tint without the button class. */
body .attachment-add-more,
body .dataTables_paginate .paginate_button{
  background:var(--wh-tint);
  border:1px solid var(--wh-tint-2)!important;
  color:var(--wh-navy)!important;
  border-radius:var(--wh-pill);
}
body .dataTables_paginate .paginate_button:hover{
  background:var(--wh-tint-2);
  color:var(--wh-navy)!important;
}
body .dataTables_paginate .paginate_button.current{
  background:var(--wh-coral-btn);
  border-color:var(--wh-coral-btn)!important;
  color:#fff!important;
}

/* 27.4  The account menu in the navbar.
   It rendered as a dark slab in a different hue from the navy bar, both
   closed and open, so the one item that identifies the signed-in user looked
   like a rendering error. Section 17.8 only reached
   `section#main-menu .navbar-nav > li > a`; the account entry is emitted in
   the secondary navbar with its own id, and Six colours that separately.
   NOTE: this is the one block in this section I could not verify against a
   live page -- it only appears when signed in. If it still looks wrong,
   send a screenshot with the menu open and I will match the exact selector. */
body section#main-menu .navbar-nav > li > a,
body section#main-menu .navbar-right > li > a,
body #Secondary_Navbar-Account,
body #Secondary_Navbar-Account > a,
body .navbar-right > li > a{
  background:transparent!important;
  color:rgba(255,255,255,.92);
}
body section#main-menu .navbar-nav > li.open > a,
body section#main-menu .navbar-right > li.open > a,
body section#main-menu .navbar-nav > li > a:hover,
body section#main-menu .navbar-nav > li > a:focus,
body section#main-menu .navbar-right > li > a:hover,
body section#main-menu .navbar-right > li > a:focus,
body #Secondary_Navbar-Account > a:hover,
body #Secondary_Navbar-Account.open > a{
  background:rgba(255,255,255,.10)!important;
  color:var(--wh-coral-on-navy)!important;
  border-radius:var(--wh-radius) var(--wh-radius) 0 0;
}
/* Its dropdown is a light menu, so its items must not inherit the white the
   navbar sets on the trigger. */
body section#main-menu .navbar-right .dropdown-menu > li > a,
body section#main-menu .navbar-nav .dropdown-menu > li > a{
  color:var(--wh-slate)!important;
  background:transparent!important;
}
body section#main-menu .navbar-right .dropdown-menu > li > a:hover,
body section#main-menu .navbar-right .dropdown-menu > li > a:focus,
body section#main-menu .navbar-nav .dropdown-menu > li > a:hover,
body section#main-menu .navbar-nav .dropdown-menu > li > a:focus{
  color:var(--wh-navy)!important;
  background:var(--wh-tint)!important;
}
body .dropdown-menu .divider{background:var(--wh-line)!important}

/* 27.5  Promo cards above the pricing table.
   They were the last thing on the register and transfer pages, below a table
   that can run to forty rows, so nobody scrolled to them. Moved to sit right
   after the search field. Ordering only -- the markup is untouched, so this
   survives a WHMCS update.

   TWO THINGS THIS RULE MUST NOT DO, both learned the hard way:

   a) It must not apply to every `.cart-body`. The first version did, and the
      store pages share that class. A flex item with no `order` set defaults to
      0, and `.products` had none -- so on /store/* the product grid sorted
      ahead of `.header-lined` (order 1) and every category title dropped
      below its own products. `:has(> .domain-pricing)` limits this to the two
      pages that actually have a TLD table.
   b) Every child needs an order, including ones not listed. `> *` sets a
      default in the middle of the scale so anything WHMCS adds later lands in
      a sensible place instead of jumping to the front. */
body #order-standard_cart .cart-body:has(> .domain-pricing){
  display:flex;
  flex-direction:column;
}
body #order-standard_cart .cart-body:has(> .domain-pricing) > *{order:6}
body #order-standard_cart .cart-body:has(> .domain-pricing) > .alert{order:1}
body #order-standard_cart .cart-body:has(> .domain-pricing) > .header-lined{order:2}
body #order-standard_cart .cart-body:has(> .domain-pricing) > .sidebar-collapsed{order:3}
body #order-standard_cart .cart-body:has(> .domain-pricing) > p{order:4}
body #order-standard_cart .cart-body:has(> .domain-pricing) > .domain-checker-container{order:5}
body #order-standard_cart .cart-body:has(> .domain-pricing) > .row:last-child{
  order:7;
  margin-bottom:var(--wh-sp-7);
}
body #order-standard_cart .cart-body:has(> .domain-pricing) > .domain-pricing{order:8}
/* Browsers without :has() ignore the whole block and fall back to source
   order -- cards below the table, which is where they were before. */

/* 27.6  DataTables header band.
   The navy strip carrying the entry count and the search box is a separate
   block from the table's own header row, and the two were different widths,
   which left a step cut out of the navy at the trailing edge. Making the band
   and the table share one width and one radius closes it. */
body .dataTables_wrapper .panel-heading,
body .dataTables_wrapper > .row:first-child{
  border-radius:var(--wh-radius-card,30px) var(--wh-radius-card,30px) 0 0;
  margin:0;
  padding:var(--wh-sp-5) var(--wh-sp-6);
}
body .dataTables_wrapper .dataTables_filter input{
  border-radius:var(--wh-pill);
  border:none;
  height:42px;
  padding:0 var(--wh-sp-5);
}
body .dataTables_wrapper table{margin-bottom:0}
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_length label,
body .dataTables_wrapper .dataTables_filter label{color:#fff}
/* The length menu sits on the pale footer band, not the navy one. */
body .dataTables_wrapper > .row:last-child .dataTables_length label,
body .dataTables_wrapper > .row:last-child .dataTables_info{color:var(--wh-muted)}

/* 27.7  Responsive.
   Checked at 390 / 768 / 1024. Three things broke, all of them from rules in
   this file that assumed a desktop width. */
@media (max-width:991px){
  /* The sidebar sits under the content on tablet, so it must not keep a
     column width. */
  .sidebar,.sidebar-secondary{width:100%!important;float:none!important}
  body #order-standard_cart .cart-sidebar{width:100%;float:none}
}
@media (max-width:767px){
  /* Section 25.2 rounds cards to 30px. At phone width a card is nearly the
     full viewport, and a 30px corner starts eating its own first line. */
  body .panel,
  body .panel-sidebar,
  body .tiles .tile,
  body .home-shortcuts ul > li > a,
  body #order-standard_cart .product,
  body #order-standard_cart .domain-promo-box,
  body .domain-pricing,
  body .invoice-container{border-radius:18px}
  body .panel > .panel-heading,
  body .panel-sidebar > .panel-heading{border-radius:18px 18px 0 0}
  body .panel > .panel-footer{border-radius:0 0 18px 18px}
  /* Section 25.4's negative tracking is calibrated for 34px headings. At
     25-27px it starts closing the counters. */
  h1,.h1{letter-spacing:-.6px}
  h2,.h2{letter-spacing:-.4px}
  h3,.h3,h4,.h4{letter-spacing:-.2px}
  /* The TLD table is four columns of currency in ~340px. Letting the label
     take its own line keeps the figures legible instead of wrapping mid
     amount. */
  body .domain-pricing .tld-row,
  body .domain-pricing .tld-pricing-header{
    flex-wrap:wrap;
    padding-left:var(--wh-sp-4);
    padding-right:var(--wh-sp-4);
  }
  body .domain-pricing .tld-row .col-md-4{
    width:100%;
    padding-bottom:var(--wh-sp-2);
  }
  body .domain-pricing .tld-row .col-md-8{width:100%}
  body .domain-pricing .tld-pricing-header .col-md-4{display:none}
  body .domain-pricing .tld-pricing-header .col-md-8{width:100%}
  /* Buttons that sit side by side on desktop stack, and stop being 26px-wide
     slivers when they do. */
  body .cart-body .text-center .btn,
  body #order-standard_cart .btn-checkout{width:100%;margin-bottom:var(--wh-sp-3)}
  /* Tables that cannot reflow scroll rather than overflow the viewport. */
  body .table-responsive{border:none;-webkit-overflow-scrolling:touch}
}

/* 27.8  The domain search group overflowed its panel on phones.
   26.4 turned `.input-group` into a flex row and capped it at 620px, but the
   field keeps a default intrinsic minimum, so below about 420px the group
   refused to shrink and the Search button hung past the panel's right edge.
   `min-width:0` lets a flex item shrink below its content width, which is the
   one thing flex does not allow by default. */
body .domain-checker-container .input-group,
body #order-standard_cart .domain-checker-container .input-group{
  max-width:min(620px,100%);
}
body .domain-checker-container .input-group .form-control,
body #order-standard_cart .domain-checker-container .form-control{
  min-width:0;
}
@media (max-width:480px){
  body .domain-checker-container .input-group .btn,
  body #order-standard_cart .domain-checker-container .btn{
    padding:0 var(--wh-sp-5)!important;
    white-space:nowrap;
  }
}
/* Below 480px a pill field sharing one line with a pill button leaves the
   field about 150px wide -- too narrow to read a domain back. Stacking them
   matches what the home hero already does at this width. */
@media (max-width:480px){
  body .domain-checker-container .input-group,
  body #order-standard_cart .domain-checker-container .input-group{
    display:block;
    max-width:100%;
    box-shadow:none;
  }
  body .domain-checker-container .input-group .form-control,
  body #order-standard_cart .domain-checker-container .form-control{
    width:100%!important;
    display:block;
    border-radius:var(--wh-radius-lg)!important;
    margin-bottom:var(--wh-sp-3);
    text-align:center;
  }
  body .domain-checker-container .input-group .input-group-btn{
    display:block;
    width:100%;
  }
  body .domain-checker-container .input-group .btn,
  body #order-standard_cart .domain-checker-container .btn{
    width:100%;
    border-radius:var(--wh-pill)!important;
  }
}

/* ==========================================================================
   28. Review pass 4
   Two defects, both from section 27. Both are the same mistake in different
   clothes: a rule written for the desktop rendering of a component that also
   has a mobile rendering.
   ========================================================================== */

/* 28.1  Mobile navigation submenus were unreadable.
   Section 27.4 set the dropdown items to `--wh-slate` so they would read on
   the white floating panel the account menu drops on desktop. Below 768px
   Bootstrap does not float that panel at all -- it renders `.dropdown-menu`
   inline, static, transparent, inside the navy collapsed bar. Measured there:
   #2E354E on #1A3E7C, which is 1.4:1. The submenu was effectively invisible.

   The colour is only correct while the menu is a floating light panel, so it
   is now scoped to the width where that is true. Below it, submenu items are
   navy-bar items and take the navy bar's own treatment. */
@media (max-width:767px){
  body section#main-menu .navbar-nav .dropdown-menu,
  body section#main-menu .navbar-right .dropdown-menu{
    background:rgba(0,0,0,.16)!important;
    box-shadow:none;
    border-radius:0;
    padding:0;
    margin:0;
  }
  body section#main-menu .navbar-nav .dropdown-menu > li > a,
  body section#main-menu .navbar-right .dropdown-menu > li > a{
    color:rgba(255,255,255,.88)!important;
    padding:11px 32px;
    font-size:14px;
  }
  body section#main-menu .navbar-nav .dropdown-menu > li > a:hover,
  body section#main-menu .navbar-nav .dropdown-menu > li > a:focus,
  body section#main-menu .navbar-right .dropdown-menu > li > a:hover,
  body section#main-menu .navbar-right .dropdown-menu > li > a:focus{
    color:#fff!important;
    background:rgba(255,255,255,.12)!important;
  }
  body section#main-menu .navbar-nav .dropdown-menu > .active > a{
    color:var(--wh-coral-on-navy)!important;
    background:rgba(255,255,255,.10)!important;
  }
  /* The separator Six draws between groups is a light hairline meant for a
     white panel. */
  body section#main-menu .dropdown-menu .divider{
    background:rgba(255,255,255,.18)!important;
  }
  /* RTL indents from the other edge. */
  html[dir="rtl"] body section#main-menu .navbar-nav .dropdown-menu > li > a{
    padding:11px 32px 11px 20px;
  }
}

/* 28.2  The home search on phones: three stacked blocks that did not line up
   and were taller than they needed to be.
   Measured at 375px: the column is 345px of usable width but the group was
   260px wide, because section 16 set the input and the buttons to
   `display:block; width:100%` without taking `.input-group` off Bootstrap's
   `display:table`. A table shrinks to its content, so "100%" resolved against
   260px, not the column. The 1px offset between the field and the buttons was
   the table cell's border spacing.
   The button heights (60px) also disagreed with the field's (52px), and the
   transfer button kept a pill radius on its right edge from the horizontal
   layout, so the stack ended in a lozenge.

   Rebuilt as what it actually is on a phone: one field and two full-width
   actions, stacked, with the search action carrying the emphasis. */
@media (max-width:767px){
  body section#home-banner .input-group,
  body section#home-banner .input-group-lg{
    display:block;
    width:100%;
    border-radius:0;
    box-shadow:none;
  }
  body section#home-banner .input-group .form-control{
    display:block;
    width:100%;
    height:52px;
    border-radius:var(--wh-pill)!important;
    border:none;
    text-align:center;
    font-size:16px;              /* 16px stops iOS zooming the page on focus */
    margin-bottom:var(--wh-sp-3);
    padding:0 var(--wh-sp-5);
  }
  body section#home-banner .input-group-btn{
    display:block;
    width:100%;
    font-size:0;                 /* kills the inline-block gap between inputs */
  }
  body section#home-banner .input-group-btn .btn,
  body section#home-banner .input-group .btn{
    display:block;
    width:100%;
    height:52px;
    line-height:1;
    border-radius:var(--wh-pill)!important;
    font-size:15px;
    margin:0 0 var(--wh-sp-3);
    padding:0 var(--wh-sp-5);
  }
  body section#home-banner .input-group-btn .btn:last-child{margin-bottom:0}
  /* Search is the primary action and keeps the coral. Transfer is the
     alternative, so it reads as an outline on the navy rather than competing
     with a second filled button. White on the navy hero measures 10.4:1. */
  body section#home-banner .input-group .btn.search{
    background:var(--wh-coral-btn);
    background-image:var(--wh-cta-grad);
    color:#fff;
    border:none;
  }
  body section#home-banner .input-group .btn.transfer{
    background:transparent;
    background-image:none;
    color:#fff;
    border:1.5px solid rgba(255,255,255,.55);
  }
  body section#home-banner .input-group .btn.transfer:hover,
  body section#home-banner .input-group .btn.transfer:focus{
    background:rgba(255,255,255,.14);
    color:#fff;
    border-color:#fff;
  }
}

/* ==========================================================================
   29. Review pass 5
   Both defects here are mine, and both were reproduced and measured before
   being changed -- the product grid on the live store page, the table controls
   in a local page built from WHMCS's own DataTables markup and this site's
   live stylesheets.
   ========================================================================== */

/* 29.2  "Show N entries" was white text on the pale page.
   Section 27.6 set `.dataTables_length label` to white, correct for the navy
   band -- but the length menu is not in that band. WHMCS builds these tables
   with the DataTables dom string `<"listtable"fit>pl`, so only the filter,
   the info line and the table itself sit inside `.listtable`; pagination and
   the length menu are siblings after it, on the page background. The override
   I wrote targeted `> .row:last-child`, a row that does not exist in this
   markup, so it never matched and the white stood.
   Scoping the white to the band that is actually navy. */
body .dataTables_wrapper .dataTables_info,
body .dataTables_wrapper .dataTables_length label,
body .dataTables_wrapper .dataTables_filter label{color:inherit}
body .dataTables_wrapper .listtable .dataTables_filter label,
body .dataTables_wrapper .listtable .dataTables_info{color:#fff}
body .dataTables_wrapper > .dataTables_length,
body .dataTables_wrapper > .dataTables_length label,
body .dataTables_wrapper > .dataTables_info{
  color:var(--wh-muted);
  font-weight:500;
}
body .dataTables_wrapper > .dataTables_length select{
  color:var(--wh-navy);
  min-width:72px;
  height:34px;
  margin:0 var(--wh-sp-2);
}

/* 29.3  The blank pills next to Previous / Next.
   Section 27.3 styled `.paginate_button` -- which in Bootstrap's DataTables
   markup is the `<li>`, not the control. The `<a>` inside carries its own
   white fill and border, so the rule drew a second pill behind each link and
   the parts of it that stuck out read as empty white circles. Measured: the
   li rendered 34x26 with a 40px radius behind a 65x27 anchor.
   The link is the control. The li goes back to being a list item. */
body .dataTables_wrapper .dataTables_paginate .paginate_button,
body .dataTables_wrapper .dataTables_paginate li.paginate_button{
  background:transparent!important;
  border:none!important;
  border-radius:0!important;
  padding:0!important;
}
body .dataTables_wrapper .dataTables_paginate .pagination > li > a,
body .dataTables_wrapper .dataTables_paginate .pagination > li > span{
  background:#fff;
  border:1px solid var(--wh-line);
  color:var(--wh-navy);
  padding:7px 15px;
  margin:0 2px;
  border-radius:var(--wh-pill)!important;
  transition:background-color .15s ease,color .15s ease;
}
body .dataTables_wrapper .dataTables_paginate .pagination > li > a:hover,
body .dataTables_wrapper .dataTables_paginate .pagination > li > a:focus{
  background:var(--wh-tint);
  border-color:var(--wh-tint-2);
  color:var(--wh-navy);
}
body .dataTables_wrapper .dataTables_paginate .pagination > .active > a,
body .dataTables_wrapper .dataTables_paginate .pagination > .active > a:hover,
body .dataTables_wrapper .dataTables_paginate .pagination > .active > span{
  background:var(--wh-coral-btn);
  border-color:var(--wh-coral-btn);
  color:#fff;
}
/* Disabled controls have to look unavailable without becoming unreadable:
   #6E7488 on the tint is 4.6:1. */
body .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a,
body .dataTables_wrapper .dataTables_paginate .pagination > .disabled > a:hover{
  background:var(--wh-tint);
  border-color:var(--wh-tint-2);
  color:#6E7488;
  cursor:default;
}