/* ==========================================================================
   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 ------------------------------------------------------------ */
  /* One hue, 21deg -- the complement of the navy. Replaces five warm values
     that sat in two different hue families (orange ~12deg and crimson ~357deg)
     and were picked independently of each other. The old names are kept so no
     rule below had to be rewritten. */
  --wh-accent:#C25214;          /* fills, white text        4.66:1 */
  --wh-accent-strong:#A8450F;   /* hover, accent text       5.96:1 */
  --wh-accent-deep:#93390D;     /* foot of hover gradient   7.56:1 */
  --wh-accent-light:#FFB183;    /* accent text on navy      5.86:1 */
  --wh-accent-wash:#FFF3EC;     /* palest warm ground */
  --wh-coral:var(--wh-accent);          /* DECORATION: rules, bars, icons */
  --wh-coral-btn:var(--wh-accent);      /* button fill, white text  4.66:1 */
  --wh-coral-btn-dark:var(--wh-accent-strong);  /* button hover     5.96:1 */
  --wh-coral-ink:var(--wh-accent-strong);       /* text on light    5.96:1 */
  --wh-coral-on-navy:var(--wh-accent-light);    /* text on navy     5.86:1 */
  --wh-coral-dark:var(--wh-accent-strong);      /* legacy alias */
  --wh-coral-alt:var(--wh-accent);              /* legacy alias */

  /* 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}
/* Bootstrap only floats .pull-md-* from 992px up. Applied at every width,
   these floated the main column on phones and tablets, where it became
   shrink-to-fit and grew to its widest content (the domains table: 681px on
   a 390px screen). In RTL that overflow is on the unscrollable side, so the
   table, its search box and the "With selected" menu were cut off. */
@media (min-width:992px){
  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}

/* Mirrors Bootstrap's own float, breakpoint for breakpoint.
   The single rule this replaces floated EVERY column class at EVERY width.
   Bootstrap only floats a tier from its own breakpoint up, and below that a
   column has no width -- so a floated one became shrink-to-fit and was sized
   by its widest content. Measured at 390px: a .col-md-12 holding a DNS table
   stretched to 609px and took the page with it, and .col-md-4 columns sat
   side by side instead of stacking. English was unaffected, so it only ever
   showed in Arabic. */
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{float:right}
@media (min-width:768px){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{float:right}}
@media (min-width:992px){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{float:right}}
@media (min-width:1200px){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,var(--wh-accent) 0%,var(--wh-accent-strong) 100%);
  --wh-cta-grad-hover:linear-gradient(135deg,var(--wh-accent-strong) 0%,var(--wh-accent-deep) 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;
}

/* ==========================================================================
   30. Button finish
   Two problems, one measured and one visible on hover.
   ========================================================================== */

/* 30.1  The gradient.
   Section 25.1 ran #BF3742 -> #D14622. Those are crimson (355deg) and orange
   (12deg), so the sweep travels 343 degrees of hue and its midpoint sits in
   the muddy brown-red between the two. That is what made it look cheap --
   the hue journey, not the endpoints.
   This holds one hue (12deg) and varies only lightness, so the gradient reads
   as depth rather than a colour change. Top to bottom, because a diagonal
   across a 40px pill is mostly noise.
     #D0451F  4.61:1 white      #B23A18  5.98:1 white
     hover #B93C19 5.64:1  ->  #9A3013 7.48:1
   Worst stop anywhere in the set is 4.61:1, so white text is safe across the
   whole sweep rather than only at its darker end. */
:root{
  --wh-cta-grad:linear-gradient(180deg,var(--wh-accent) 0%,var(--wh-accent-strong) 100%);
  --wh-cta-grad-hover:linear-gradient(180deg,var(--wh-accent-strong) 0%,var(--wh-accent-deep) 100%);
  --wh-cta-flat:var(--wh-accent);
  --wh-cta-shadow:rgba(194,82,20,.34);
}
body .btn-primary,
body .btn-info,
body .btn-success,
body a.btn-success,
body #order-standard_cart .btn-checkout,
body section#header .top-nav > li.primary-action > a,
body section#home-banner .input-group-btn .btn.search{
  background-color:var(--wh-cta-flat);
  background-image:var(--wh-cta-grad);
  border-color:transparent;
  color:#fff;
}
body .btn-primary:hover,body .btn-primary:focus,body .btn-primary:active,
body .btn-info:hover,body .btn-info:focus,
body .btn-success:hover,body .btn-success:focus,body .btn-success:active,
body a.btn-success:hover,
body #order-standard_cart .btn-checkout:hover,
body section#header .top-nav > li.primary-action > a:hover,
body section#home-banner .input-group-btn .btn.search:hover{
  background-color:var(--wh-accent-strong);
  background-image:var(--wh-cta-grad-hover);
  color:#fff;
}

/* 30.2  The green shadow.
   Section 24.3 gave `.btn-success:hover` a green fill and a green drop
   shadow, correct when Six's success button was green. But section 20
   recolours `.btn-success` to coral -- and it does so at a higher specificity
   (`body .btn-success:hover`, 0-0-2-1) than 24.3's (`.btn-success:hover`,
   0-0-2-0). So the *fill* stayed coral while the *shadow* stayed green, and
   "Order Now" grew a green halo on hover.
   The same mismatch applied to `.btn-warning`, which section 20 turns navy
   while 24.3 was still casting an amber shadow beneath it.

   Shadows now derive from the fill they sit under. Anything not listed gets a
   neutral one, so a future recolour can never orphan a shadow again. */
body .btn:hover,
body .btn:focus,
body a.btn:hover{
  box-shadow:0 8px 20px rgba(4,37,81,.26);
}
body .btn-primary:hover,body .btn-primary:focus,
body .btn-info:hover,body .btn-info:focus,
body .btn-success:hover,body .btn-success:focus,
body a.btn-success:hover,
body #order-standard_cart .btn-checkout:hover{
  box-shadow:0 8px 20px var(--wh-cta-shadow);
}
body .btn-warning:hover,body .btn-warning:focus,
body #order-standard_cart .domain-promo-box a.btn-warning:hover{
  box-shadow:0 8px 20px rgba(26,62,124,.30);   /* navy fill, navy shadow */
}
body .btn-danger:hover,body .btn-danger:focus{
  box-shadow:0 8px 20px rgba(163,47,35,.30);
}
body .btn-default:hover,body .btn-default:focus,
body .btn.disabled:hover,body .btn[disabled]:hover{
  box-shadow:none;
}

/* ==========================================================================
   31. Button colours matched to finjanhost.com
   Supersedes the gradient in section 30.1.

   Taken by sampling the rendered pixels of a live button, not by reading its
   CSS -- the live recipe is a vertical gradient with a large inset shadow
   painted over it, and only the composite is meaningful:

     rest    face #FE575B, darkening to #DB5354 at the left edge
     hover   face #FF643F, darkening to #DC5C41 at the left edge

   So the live site does not use a gradient sweep at all. It swaps between the
   two brand corals -- coral-alt at rest, coral on hover -- with the underlying
   gradient showing at the left edge as a soft shading.

   Reproduced with the same two layers so it composites identically at every
   button width.

   READABILITY, measured: white text is 3.12:1 at rest and 2.94:1 on hover.
   AA asks for 4.5:1 at this size. This is the brand and it is your call; the
   passing near-match is one line away, at the end of this section.
   ========================================================================== */
:root{
  /* Was #FE575B rest / #FF643F hover over a gradient that fell away to slate
     -- three hues in one button, and white text at 3.12:1 and 2.94:1, both
     below AA. Now one hue varying only in lightness, passing at every stop. */
  --wh-cta-face:var(--wh-accent);
  --wh-cta-face-hover:var(--wh-accent-strong);
  --wh-cta-underlay:linear-gradient(180deg,var(--wh-accent) 0%,var(--wh-accent-strong) 100%);
  --wh-cta-underlay-hover:linear-gradient(180deg,var(--wh-accent-strong) 0%,var(--wh-accent-deep) 100%);
  /* A hairline of light along the top edge, replacing the -100px inset flood
     that existed only to rebuild the old two-colour composite. */
  --wh-cta-inset:inset 0 1px 0 rgba(255,255,255,.16);
  --wh-cta-inset-hover:inset 0 1px 0 rgba(255,255,255,.12);
  --wh-cta-shadow:rgba(194,82,20,.34);
}
body .btn-primary,
body .btn-info,
body .btn-success,
body a.btn-success,
body #order-standard_cart .btn-checkout,
body section#header .top-nav > li.primary-action > a,
body section#home-banner .input-group-btn .btn.search{
  background-color:var(--wh-cta-face);
  background-image:var(--wh-cta-underlay);
  box-shadow:var(--wh-cta-inset);
  border-color:transparent;
  color:#fff;
}
body .btn-primary:hover,body .btn-primary:focus,body .btn-primary:active,
body .btn-info:hover,body .btn-info:focus,
body .btn-success:hover,body .btn-success:focus,body .btn-success:active,
body a.btn-success:hover,
body #order-standard_cart .btn-checkout:hover,
body section#header .top-nav > li.primary-action > a:hover,
body section#home-banner .input-group-btn .btn.search:hover{
  background-color:var(--wh-cta-face-hover);
  background-image:var(--wh-cta-underlay);
  /* The inset carries the fill; the outer shadow is the lift. Both in one
     declaration, because a second box-shadow rule would replace this, not add
     to it -- which is how the green shadow in section 30.2 survived. */
  box-shadow:var(--wh-cta-inset-hover),0 8px 20px var(--wh-cta-shadow);
  color:#fff;
}

/* ==========================================================================
   32. Hover gradient, pinned
   The gradient now carries the button's colour, so a hover that changed only
   background-color would not show -- background-image paints over it. One
   rule, last, for every component built from the accent.
   ========================================================================== */
body .btn-primary:hover,body .btn-primary:focus,body .btn-primary:active,
body .btn-info:hover,body .btn-info:focus,
body .btn-success:hover,body .btn-success:focus,body .btn-success:active,
body a.btn-success:hover,
body #order-standard_cart .btn-checkout:hover,
body section#header .top-nav > li.primary-action > a:hover,
body section#home-banner .input-group-btn .btn.search:hover{
  background-image:var(--wh-cta-underlay-hover);
}


/* ==========================================================================
   33. Sidebar active marker — following the panel's rounded corner
   The current entry is marked with `box-shadow: inset 3px 0 0`, which is a
   rectangle drawn inside the element. The panel clips its own rounded corner,
   so on the LAST row of a list the marker was sliced off square partway down
   and stopped short of the curve.
   An inset shadow follows the element's own border-radius, so giving the
   first and last rows the panel's radius makes the marker curve with the
   corner instead of being cut by it. The panel keeps its shape; only the
   marker changes.
   ========================================================================== */
body .sidebar .panel .list-group-item:last-child,
body .panel-sidebar .list-group-item:last-child{
  border-bottom-left-radius:var(--wh-radius-lg);
  border-bottom-right-radius:var(--wh-radius-lg);
}
body .sidebar .panel > .list-group:first-child .list-group-item:first-child,
body .panel-sidebar > .list-group:first-child .list-group-item:first-child{
  border-top-left-radius:var(--wh-radius-lg);
  border-top-right-radius:var(--wh-radius-lg);
}

/* ==========================================================================
   34. RTL — the phone widget, client area wide
   Same fault and same fix as section 15.2 of the order form stylesheet, which
   only loads on cart pages. Registration, profile and contact forms carry the
   same field.

   WHMCS ships the older intl-tel-input: it pins `.flag-container` with
   `left:0` and reserves room with `padding-left` on the input, sized by the
   length of the dial code (that is what `iti-sdc-N` encodes). All of it is
   mirrored here. Measured in a headless browser against these stylesheets.
   ========================================================================== */
html[dir="rtl"] .intl-tel-input .flag-container,
html[dir="rtl"] .intl-tel-input.allow-dropdown .flag-container,
html[dir="rtl"] .intl-tel-input.separate-dial-code .flag-container{
  left:auto;
  right:0;
}
html[dir="rtl"] .intl-tel-input.allow-dropdown input[type=tel],
html[dir="rtl"] .intl-tel-input.separate-dial-code input[type=tel]{
  padding-left:6px;
  padding-right:52px;
}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel]{padding-right:66px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel]{padding-right:76px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel]{padding-right:74px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel]{padding-right:84px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel]{padding-right:82px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel]{padding-right:92px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel]{padding-right:90px;padding-left:6px}
html[dir="rtl"] .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel]{padding-right:100px;padding-left:6px}
html[dir="rtl"] .intl-tel-input .selected-flag{padding:0 8px 0 0}
html[dir="rtl"] .intl-tel-input .selected-flag .iti-arrow{right:auto;left:6px}
html[dir="rtl"] .intl-tel-input .selected-flag .iti-flag{right:8px;left:auto}
html[dir="rtl"] .intl-tel-input.separate-dial-code .selected-dial-code{
  padding-left:0;
  padding-right:28px;
  /* "+90" is a dial code, not a sentence: under RTL bidi the plus sign jumps
     to the end and it renders "90+". Measured in the browser -- forcing the
     element to LTR keeps the sign where it belongs. */
  direction:ltr;
}
html[dir="rtl"] .intl-tel-input .country-list{
  left:auto;
  right:0;
  margin:0 -1px 0 0;
  text-align:left;
  max-width:min(320px,88vw);
}
html[dir="rtl"] input[type="tel"].form-control{direction:ltr;text-align:right}
body input, body button, body select, body textarea { font-family: inherit; }
/* --- FinjanHost fixes, 22 Sep --- */
@media (max-width:767px){
  body section#footer .back-to-top{right:auto;left:16px}
  html[dir="rtl"] body section#footer .back-to-top{left:auto;right:16px}
  body .dataTables_wrapper{overflow-x:auto;-webkit-overflow-scrolling:touch}
}
html[dir="rtl"] .message,
html[dir="rtl"] section#footer p,
html[dir="rtl"] .client-home-panels .list-group-item{unicode-bidi:plaintext}
body .table-responsive td{white-space:normal;word-break:break-word}

/* ==========================================================================
   35. Review pass 6 -- 16 Oct screenshots
   ========================================================================== */

/* 35.1  Listing toolbar: the step cut out of the navy band.
   `.dataTables_filter` floats beside `.dataTables_info` and the two boxes
   are sized independently: the search field (42px + Six's 12px label
   padding + 8px band padding) is ~16px taller than the info line, so the
   navy under the search box hung below the rest of the band and left a
   white notch above the table header. `.listtable` becomes a wrapping flex
   row so the info line and the search box share one height; the table takes
   the next full row. Flex order follows `dir`, so Arabic mirrors for free. */
body .dataTables_wrapper .listtable{
  display:flex;
  flex-wrap:wrap;
  align-items:stretch;
}
body .dataTables_wrapper .listtable > *{flex:0 0 100%;min-width:0}
body .dataTables_wrapper .listtable > .dataTables_info{
  order:1;
  flex:1 1 auto;
  width:auto;
  display:flex;
  align-items:center;
  border-radius:0;
  border-start-start-radius:var(--wh-radius-lg);
}
body .dataTables_wrapper .listtable > .dataTables_filter{
  order:2;
  flex:0 0 auto;
  float:none;
  display:flex;
  align-items:center;
  margin:0;
  border-radius:0;
  border-start-end-radius:var(--wh-radius-lg);
}
body .dataTables_wrapper .listtable > .dataTables_filter label{padding:4px 0;margin:0}
body .dataTables_wrapper .listtable > table{order:3}
/* Only one of the two present (noInfo / noSearch): it spans and takes both
   corners. */
body .dataTables_wrapper .listtable > div:only-of-type{
  flex:1 1 100%;
  border-start-start-radius:var(--wh-radius-lg);
  border-start-end-radius:var(--wh-radius-lg);
}
html[dir="rtl"] body .dataTables_wrapper .dataTables_info{text-align:right!important}
@media (max-width:600px){
  /* Six pushes the search box under the info line with margin-top:30px and
     40px of bottom padding on the info; the flex row stacks them instead. */
  body .dataTables_wrapper .listtable > .dataTables_info{
    flex:1 1 100%;
    padding-bottom:var(--wh-sp-2)!important;
    border-start-end-radius:var(--wh-radius-lg);
  }
  body .dataTables_wrapper .listtable > .dataTables_filter{
    flex:1 1 100%;
    margin-top:0;
    border-radius:0;
    padding:0 var(--wh-sp-4) var(--wh-sp-4);
  }
  body .dataTables_wrapper .listtable > .dataTables_filter label{display:block;width:100%}
}

/* 35.2  "Show [10] entries": the number sat small and low in a white box.
   The select carries Bootstrap's .input-sm (12px), Six's 2px padding and
   25px height, plus section 29.2's 34px height -- the text box and the
   control no longer agreed, so the value dropped to the bottom edge. One
   size, centred, shaped like the pagination pills beside it. */
body .dataTables_wrapper .dataTables_length label{
  display:inline-flex;
  align-items:center;
  gap:var(--wh-sp-2);
  margin:0;
  font-size:14px;
}
body .dataTables_wrapper .dataTables_length select.form-control,
body .dataTables_wrapper > .dataTables_length select{
  height:36px;
  min-width:76px;
  margin:0;
  padding:0 34px 0 var(--wh-sp-4);
  font-size:14px;
  font-weight:600;
  line-height:34px;
  color:var(--wh-navy);
  background-color:#fff;
  border:1px solid var(--wh-tint-2);
  border-radius:var(--wh-pill);
  background-position:right 12px center;
  vertical-align:middle;
  cursor:pointer;
}
html[dir="rtl"] body .dataTables_wrapper .dataTables_length select.form-control,
html[dir="rtl"] body .dataTables_wrapper > .dataTables_length select{
  padding:0 var(--wh-sp-4) 0 34px;
  background-position:left 12px center;
}
html[dir="rtl"] body .dataTables_wrapper .dataTables_length label{padding:10px 30px 0 10px}

/* 35.3  RTL checkboxes and radios printed on top of their label.
   Bootstrap 3 reserves the box's room with `padding-left:20px` and pulls the
   absolutely-positioned input into it with `margin-left:-20px`. In RTL the
   text starts at the right edge, so the input landed on the first letter
   (Contacts > email preferences, User Management > All / Choose
   Permissions, every checkbox-inline list). Mirrored. */
html[dir="rtl"] .radio label,
html[dir="rtl"] .checkbox label,
html[dir="rtl"] .radio-inline,
html[dir="rtl"] .checkbox-inline{
  padding-left:0;
  padding-right:20px;
}
html[dir="rtl"] .radio input[type=radio],
html[dir="rtl"] .radio-inline input[type=radio],
html[dir="rtl"] .checkbox input[type=checkbox],
html[dir="rtl"] .checkbox-inline input[type=checkbox]{
  margin-left:0;
  margin-right:-20px;
}
html[dir="rtl"] .radio-inline + .radio-inline,
html[dir="rtl"] .checkbox-inline + .checkbox-inline{
  margin-left:0;
  margin-right:var(--wh-sp-5);
}

/* 35.4  Page subtitle squeezed ("All the latest from FinjanHost").
   `<small>` inside an H1 inherited 25.4's -1.2px heading tracking, which is
   tuned for 34px bold Lato. At 17px it ran the letters together, and Lato is
   only self-hosted at 700/900, so the 400 the subtitle asks for was faked
   from the bold cut. The subtitle is body copy: body face, no tracking. */
h1 small,h2 small,h3 small,h4 small,
.h1 small,.h2 small,.h3 small,.h4 small,
body .header-lined h1 small{
  font-family:var(--wh-font);
  font-weight:400;
  letter-spacing:normal;
}

/* 35.5  Empty band under the footer on short pages.
   Nothing made the page at least one screen tall, so on pages with little
   content (profile, announcements, login) the footer ended mid-viewport and
   the page background showed beneath it. Body becomes a column at least the
   viewport's height and the main section takes the slack, which keeps the
   footer at the bottom. Fixed or hidden children (WhatsApp button, overlay,
   modals) are unaffected. */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
body > section#main-body{flex:1 0 auto}
body > *{flex-shrink:0}

/* 35.6  Back-to-top half hidden behind the WhatsApp button.
   Both sat in the same bottom corner (inline-end: right in English, left in
   Arabic). Scrolled to the end, the footer's disc rose into the fixed
   WhatsApp button and was covered by it. Phones already put back-to-top on
   the opposite side (22 Sep fixes above); desktop now does the same, so the
   two never meet in either direction. */
body section#footer .back-to-top{right:auto;left:26px}
html[dir="rtl"] body section#footer .back-to-top{left:auto;right:26px}
@media (max-width:767px){
  body section#footer .back-to-top{right:auto;left:16px}
  html[dir="rtl"] body section#footer .back-to-top{left:auto;right:16px}
}

/* 35.7  "Last Login: a week ago" printed as ":Last Login" in Arabic while
   the label is still English -- the Latin run and its colon were reordered
   by the RTL paragraph. Isolating the line keeps it readable whichever
   language the string arrives in. */
html[dir="rtl"] .main-content table td small{unicode-bidi:plaintext}

/* 35.8  Page titles: two rules under the heading, and the wrong blue.
   Six's `div.header-lined h1` (0-1-2) draws its own grey border-bottom and
   paints the title #058 at weight 400. It outranks section 8's
   `.header-lined h1` (0-1-1), so every page title came out lighter and thinner
   than the H2/H3 headings below it, with a second grey line above the
   breadcrumb's rule. The header block keeps the one rule with the accent. */
body div.header-lined h1{
  color:var(--wh-navy);
  font-weight:700;
  border-bottom:0;
  padding:0;
}

/* 35.9  reCAPTCHA badge under the round buttons.
   Google pins the badge bottom-right with an inline `bottom:14px`. The
   WhatsApp button (English) and back-to-top (Arabic) use that corner too, so
   on login, register, contact and ticket pages one covered the other. The
   badge is lifted clear of both; it still slides out on hover as usual. */
.grecaptcha-badge{bottom:120px!important}

/* 35.10  Divider beside the header cart / logout button sat on the wrong side
   in Arabic. Six draws it with `border-left` and `padding-left` on
   `li.primary-action`, so in RTL it hung at the outer edge of the bar instead
   of between the button and the links. */
html[dir="rtl"] ul.top-nav > li.primary-action{
  border-left:0;
  padding-left:0;
  margin-left:0;
  border-right:1px solid rgba(255,255,255,.25);
  padding-right:15px;
  margin-right:5px;
}

/* 35.11  (moved) The phone header is now handled by section 36. */

/* 35.12  Columns sized by their content on phones (home cards).
   Section 20 turns the home panel row and its columns into flex boxes for
   equal heights. Below 768px `.col-sm-6` has no width of its own, so each
   column shrank to its content: the Recent Tickets and News cards came out
   ~60px narrower than the cards above and sat off to one side. */
@media (max-width:767px){
  body .client-home-panels > .row > [class*="col-"]{width:100%}
}

/* 35.13  Card titles running into their buttons.
   The "View All" / "Open New Ticket" button floats beside the title. On a
   phone, "Your Active Products/Services" and "Recent Support Tickets" are
   wider than the space left, so the title ran under the button. The heading
   becomes a wrapping row: the button sits at the end and drops below the
   title only when the two cannot share a line. */
body .client-home-panels .panel > .panel-heading .panel-title{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:var(--wh-sp-2);
  row-gap:var(--wh-sp-2);
}
body .client-home-panels .panel > .panel-heading .panel-title > .pull-right{
  order:2;
  float:none!important;
  margin-inline-start:auto;
}

/* 35.14  Stat tiles wider than the cards below them.
   The tile columns use 8px gutters but the row kept Bootstrap's -15px
   margins, so the tile row stuck out 7px past the content edge on both
   sides. */
body .tiles > .row{margin-left:-8px;margin-right:-8px}

/* 35.15  Two-column forms: no gap where the columns meet on a phone.
   20.5 zeroes the margin of the last `.form-group` in its parent. Inside a
   `.col-sm-6` that is the last field of the column, and once the columns
   stack the next column's first label sat directly on it (Details: Email /
   Address 1, Phone / Payment Method). */
body .row > [class*="col-"] > .form-group:last-child{margin-bottom:var(--wh-sp-5)}

/* 35.16  User Management table scrolled sideways on phones (417px page on a
   390px screen): the email address and the nowrap "Manage Permissions" /
   "Remove Access" buttons could not break. */
@media (max-width:767px){
  body .main-content > .table td,
  body .main-content > .table th{word-break:break-word;overflow-wrap:anywhere}
  body .main-content > .table .btn{white-space:normal;margin-bottom:var(--wh-sp-1)}
}

/* 35.17  Full-width buttons clipped their label ("Go" on Contacts: 31px of
   room for a 35px word). A block button already spans its column, so it does
   not need the 26px side padding of an inline one. */
body .btn-block{padding-left:var(--wh-sp-3);padding-right:var(--wh-sp-3)}

/* ==========================================================================
   36. Header and navigation, rebuilt for every screen width
   Supersedes the header parts of sections 5, 18 and 35.11.

   What was wrong, measured in Arabic and English from 320px to 1440px:
     - Below 992px Six collapses the menu, but section 18 floats every menu
       item right in Arabic at all widths. Opened on a tablet, the items lay
       out side by side in rows next to the menu button; on a phone the list
       started beside the button instead of below it.
     - From 768 to 991px the drop-downs stayed floating white boxes inside the
       open menu, because Bootstrap only turns them into inline lists below
       768px.
     - On phones the header was three stacked rows -- links, logo, then a
       57px bar holding only the menu button.
     - From 992 to 1199px the English menu was ~990px wide in a 940px bar, so
       it wrapped onto a second row.

   The layout now:
     >= 1200px   logo + links | full menu on one row
     992-1199px  the same, with tighter menu spacing
     768-991px   one bar: logo, links, menu button; menu opens as a list
     < 768px     slim links strip on top, then logo + menu button
   ========================================================================== */

/* 36.1  The logo row is a flex row in every width. Flex order follows `dir`,
   so Arabic mirrors without separate rules. Bootstrap's clearfix pseudo
   elements would become flex items and take space, so they go. */
body section#header .container{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  column-gap:var(--wh-sp-4);
}
body section#header .container:before,
body section#header .container:after{display:none}
body section#header .logo,
html[dir="rtl"] body section#header .logo{
  order:1;
  float:none;
  display:block;
  margin:0;
  padding:16px 0;
  text-align:start;
}
body section#header .top-nav,
html[dir="rtl"] body section#header .top-nav{
  order:2;
  float:none!important;
  margin-inline-start:auto;
}

/* 36.2  The menu button. Hidden on desktop; the old one in #main-menu is
   retired because it needed a whole bar of its own. */
body section#main-menu .navbar-header{display:none}
body section#header .wh-nav-toggle{
  display:none;
  order:3;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;
  height:44px;
  padding:0;
  margin:0;
  background:transparent;
  border:1px solid rgba(255,255,255,.35);
  border-radius:var(--wh-radius);
  cursor:pointer;
  transition:background-color .2s ease;
}
body section#header .wh-nav-toggle:hover,
body section#header .wh-nav-toggle:focus-visible{background:rgba(255,255,255,.12)}
body section#header .wh-nav-toggle .icon-bar{
  display:block;
  width:20px;
  height:2px;
  margin:0;
  border-radius:2px;
  background:#fff;
  transition:transform .2s ease,opacity .2s ease;
}
/* Open state: the three bars become a close mark. */
body section#header .wh-nav-toggle[aria-expanded="true"] .icon-bar:nth-of-type(2){transform:translateY(7px) rotate(45deg)}
body section#header .wh-nav-toggle[aria-expanded="true"] .icon-bar:nth-of-type(3){opacity:0}
body section#header .wh-nav-toggle[aria-expanded="true"] .icon-bar:nth-of-type(4){transform:translateY(-7px) rotate(-45deg)}

/* 36.3  992-1199px: the full menu on one row.
   Measured at 1024px, logged in: English 911px -> 723px, Arabic 751px ->
   628px, in a 940px bar. Logged out (the longest set) 989px -> 792px. */
@media (min-width:992px) and (max-width:1199px){
  body section#main-menu .navbar-nav > li > a,
  body .navbar-main .navbar-nav > li > a{
    padding:18px 10px;
    font-size:13px;
    letter-spacing:.3px;
  }
}

/* 36.4  Below 992px: menu button in the logo row, menu as a full-width list. */
@media (max-width:991px){
  body section#header .wh-nav-toggle{display:inline-flex}
  body section#header{box-shadow:0 3px 18px rgba(4,37,81,.20);z-index:2}
  body section#main-menu{box-shadow:none}
  body section#main-menu .navbar,
  body section#main-menu .navbar-main{min-height:0}

  /* The list runs edge to edge, so it reads as part of the header. */
  body section#main-menu #primary-nav{
    margin:0 -15px;
    padding:0;
    border-top:1px solid rgba(255,255,255,.12);
    box-shadow:none;
    max-height:calc(100vh - 120px);
    overflow-y:auto;
  }
  body section#main-menu #primary-nav.in{margin-bottom:0}
  body section#main-menu .navbar-nav,
  html[dir="rtl"] body section#main-menu .navbar-nav,
  body section#main-menu .navbar-right,
  html[dir="rtl"] body section#main-menu .navbar-right{
    float:none!important;
    margin:0;
  }
  body section#main-menu .navbar-nav > li,
  html[dir="rtl"] body section#main-menu .navbar-nav > li{
    float:none!important;
    display:block;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  body section#main-menu .navbar-right{border-top:1px solid rgba(255,255,255,.18)}
  body section#main-menu .navbar-nav > li > a,
  body section#main-menu .navbar-right > li > a,
  body .navbar-main .navbar-nav > li > a{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--wh-sp-2);
    padding:14px 20px;
    font-size:15px;
    letter-spacing:.4px;
    text-align:start;
  }
  html[dir="rtl"] body section#main-menu .navbar-nav > li > a{font-size:16px;letter-spacing:0}

  /* Drop-downs open inline under their item (Bootstrap does this only below
     768px; this extends it to tablets). */
  body section#main-menu .navbar-nav .dropdown-menu,
  body section#main-menu .navbar-right .dropdown-menu{
    position:static;
    float:none;
    width:auto;
    min-width:0;
    margin:0;
    padding:var(--wh-sp-1) 0;
    border:0;
    border-radius:0;
    box-shadow:none;
    background:rgba(0,0,0,.18)!important;
  }
  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 20px;
    padding-inline-start:36px;
    font-size:14px;
    white-space:normal;
  }
  html[dir="rtl"] body section#main-menu .navbar-nav .dropdown-menu > li > a{
    padding:11px 36px 11px 20px;
    font-size:15px;
    text-align:right;
  }
  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 .dropdown-menu .divider{
    margin:var(--wh-sp-1) 20px;
    background:rgba(255,255,255,.18)!important;
  }
}

/* 36.5  768-991px: logo, links and menu button share one row. */
@media (min-width:768px) and (max-width:991px){
  body section#header .top-nav{min-height:0;padding:0}
  body section#header .logo{padding:12px 0}
}

/* 36.6  Below 768px: a slim strip of links above the logo row.
   Replaces 35.11's centred two-row layout. */
@media (max-width:767px){
  body section#header .container{column-gap:var(--wh-sp-3)}
  body section#header .top-nav,
  html[dir="rtl"] body section#header .top-nav{
    order:0;
    flex:1 0 100%;
    justify-content:center;
    flex-wrap:wrap;
    min-height:0;
    margin:0 -15px;
    padding:6px 15px;
    row-gap:2px;
    border-bottom:1px solid rgba(255,255,255,.10);
  }
  body section#header .top-nav > li,
  html[dir="rtl"] body section#header .top-nav > li{margin:0 2px}
  body section#header .top-nav > li > a{padding:6px 8px;font-size:13px;white-space:nowrap}
  body section#header .top-nav > li.primary-action,
  html[dir="rtl"] body section#header .top-nav > li.primary-action,
  html[dir="rtl"] ul.top-nav > li.primary-action{border:0;padding:0;margin:0 2px}
  body section#header .top-nav > li.primary-action > a,
  body section#header .top-nav > li.primary-action > a.btn{padding:6px 16px}
  body section#header .logo,
  html[dir="rtl"] body section#header .logo{padding:10px 0;text-align:start}
  body section#header .logo img{max-height:36px}
  body section#header .wh-nav-toggle{margin-inline-start:auto}
}
@media (max-width:374px){
  body section#header .top-nav > li > a{padding:6px 6px;font-size:12.5px}
  body section#header .top-nav > li.primary-action > a,
  body section#header .top-nav > li.primary-action > a.btn{padding:6px 12px}
  body section#header .logo img{max-height:32px}
}

/* ==========================================================================
   37. Review pass 7 -- account pages
   ========================================================================== */

/* 37.1  Arabic table headings sat at the far (left) end of their columns.
   Bootstrap sets `th{text-align:left}`; in RTL every header was aligned away
   from its values (User Management: "Email / Last login" in the middle of
   the column, "Actions" past its buttons). */
html[dir="rtl"] th{text-align:right}

/* 37.2  User Management: "Manage Permissions" and "Remove Access" stacked in
   English because the column was fixed at 300px for 360px of buttons. The
   template now marks the column (.table-users-actions) and it sizes to its
   buttons. Phones stack them full width instead. */
body .table-users > tbody > tr > th,
body .table-users > tbody > tr > td{vertical-align:middle}
body .table-users .table-users-actions{white-space:nowrap;width:1%}
body .table-users .table-users-actions .btn{margin:2px 0}
body .table-users .table-users-actions form{display:inline}
@media (max-width:767px){
  body .table-users .table-users-actions{white-space:normal;width:auto}
  body .table-users .table-users-actions .btn{display:block;width:100%;margin:0 0 6px}
}

/* 37.3  Home "Register a New Domain": input 43px, buttons 38/39px, and in
   Arabic the rounded ends on the wrong sides (the input was rounded on the
   side touching the buttons, "Transfer" on the side touching "Register").
   The group becomes a flex row of one height; RTL corners are mirrored for
   every Bootstrap input group with a trailing button. */
body .client-home-panels .input-group{display:flex;align-items:stretch;width:100%}
body .client-home-panels .input-group > .form-control{flex:1 1 auto;width:auto;height:44px;float:none}
body .client-home-panels .input-group > .input-group-btn{display:flex;width:auto}
body .client-home-panels .input-group > .input-group-btn > .btn{height:44px;padding:0 var(--wh-sp-5);margin:0}
html[dir="rtl"] .input-group > .form-control:first-child{border-radius:0 var(--wh-radius) var(--wh-radius) 0}
html[dir="rtl"] .input-group > .input-group-btn:last-child > .btn{border-radius:0;margin-left:0;margin-right:-1px}
html[dir="rtl"] .input-group > .input-group-btn:last-child > .btn:last-child{border-radius:var(--wh-pill) 0 0 var(--wh-pill)}

/* 37.4  Sidebar panel footers ("New Contact...") were a grey strip holding a
   pale button, so the action read as detached from its panel. */
body .sidebar .panel > .panel-footer{
  background:#fff;
  border-top:1px solid var(--wh-line);
  padding:var(--wh-sp-3) var(--wh-sp-5) var(--wh-sp-4);
}
body .sidebar .panel > .panel-footer .btn-default{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--wh-sp-2);
  min-height:38px;
  background:var(--wh-tint);
  border:1px solid var(--wh-tint-2);
  border-radius:var(--wh-pill);
  color:var(--wh-navy);
  font-weight:600;
}
body .sidebar .panel > .panel-footer .btn-default:hover,
body .sidebar .panel > .panel-footer .btn-default:focus{background:var(--wh-tint-2);color:var(--wh-navy)}