:root{
  /* ============================================================
     KINGCOM THEME — CONTROL PANEL
     Change these variables to restyle the whole client area.
     ============================================================ */

  /* -- COLOUR : black & white + grey-with-hue, one accent -- */
  --gk-bg:        #eceef2;   /* page background (cool grey, slight hue) */
  --gk-surface:   #ffffff;   /* cards / panels */
  --gk-surface-2: #f4f6f9;   /* subtle inset grey */
  --gk-ink:       #14161a;   /* near-black text / primary buttons */
  --gk-ink-soft:  #565b63;   /* secondary text */
  --gk-line:      #e2e5ea;   /* borders */
  --gk-accent:    #0ca678;  /* brand teal-green */   /* THE accent — change this one to rebrand */
  --gk-accent-btn:#0a8560;  /* darker teal for WHITE TEXT buttons -- --gk-accent alone is 3.12:1 with white (fails WCAG AA 4.5:1 for text); this hits 4.63:1 */
  --gk-accent-2:  #0f172a;   /* deep ink accent for contrast */
  --gk-on-accent: #ffffff;

  /* -- TYPE : one place to change every size (headings kept modest) -- */
  --gk-font: 'Poppins', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gk-fs-base: 15px;
  --gk-h1: 1.7rem;
  --gk-h2: 1.38rem;
  --gk-h3: 1.18rem;
  --gk-h4: 1.02rem;
  --gk-h5: 0.92rem;
  --gk-h6: 0.8rem;
  --gk-weight-body: 400;
  --gk-weight-head: 600;

  /* -- SHAPE -- */
  --gk-radius: 14px;
  --gk-radius-sm: 9px;
  --gk-shadow: 0 1px 2px rgba(16,22,34,.04), 0 8px 24px rgba(16,22,34,.06);
  --gk-shadow-hover: 0 3px 6px rgba(16,22,34,.07), 0 18px 40px rgba(16,22,34,.13);
}

/* ---------- BASE ---------- */
body, .body-wrapper, .main-body, #main-body, .primary-content{
  font-family: var(--gk-font) !important;
  font-size: var(--gk-fs-base) !important;
  font-weight: var(--gk-weight-body);
  color: var(--gk-ink) !important;
  background: var(--gk-bg) !important;
  -webkit-font-smoothing: antialiased;
  letter-spacing: .002em;
}
a{ color: var(--gk-accent); text-decoration: none; }
a:hover{ color: var(--gk-ink); }
.text-muted, .small, small{ color: var(--gk-ink-soft) !important; }

/* ---------- HEADINGS (restrained) ---------- */
h1,.h1{font-size:var(--gk-h1)!important} h2,.h2{font-size:var(--gk-h2)!important}
h3,.h3{font-size:var(--gk-h3)!important} h4,.h4{font-size:var(--gk-h4)!important}
h5,.h5{font-size:var(--gk-h5)!important} h6,.h6{font-size:var(--gk-h6)!important;text-transform:uppercase;letter-spacing:.05em;color:var(--gk-ink-soft)}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{
  font-family:var(--gk-font)!important; font-weight:var(--gk-weight-head)!important;
  color:var(--gk-ink); letter-spacing:-.012em; line-height:1.25;
}

/* ---------- CARDS / PANELS ---------- */
.card,.panel,.home-panels .panel,.client-home-panels .panel,.tab-pane .panel{
  background:var(--gk-surface)!important; border:1px solid var(--gk-line)!important;
  border-radius:var(--gk-radius)!important; box-shadow:var(--gk-shadow)!important;
  transition:box-shadow .18s ease, transform .18s ease; overflow:hidden;
}
.card:hover,.panel:hover,.home-panels .panel:hover{
  box-shadow:var(--gk-shadow-hover)!important; transform:translateY(-3px);
}
.panel-heading,.card-header{background:var(--gk-surface-2)!important;border-bottom:1px solid var(--gk-line)!important;font-weight:600}
.panel-body,.card-body{background:var(--gk-surface)!important}

/* ---------- BUTTONS ---------- */
.btn{border-radius:var(--gk-radius-sm)!important;font-weight:500!important;padding:.5rem 1.05rem}
.btn-primary{background:var(--gk-ink)!important;border-color:var(--gk-ink)!important;color:#fff!important}
.btn-primary:hover{background:#000!important;border-color:#000!important}
.btn-success,.btn-accent{background:var(--gk-accent)!important;border-color:var(--gk-accent)!important;color:var(--gk-on-accent)!important}
.btn-default,.btn-secondary{background:#fff!important;border:1px solid var(--gk-line)!important;color:var(--gk-ink)!important}
.btn-default:hover,.btn-secondary:hover{background:var(--gk-surface-2)!important}

/* ---------- HEADER / NAV ---------- */
#header,.navbar,.header-lined,.navbar-default{background:#ffffff1a;border-bottom:1px solid var(--gk-line)!important;box-shadow:0 1px 0 rgba(16,22,34,.03)}
.navbar .nav > li > a,.navbar-nav .nav-link{color:var(--gk-ink)!important;font-weight:500}

/* ---------- FORMS ---------- */
.form-control,.input-group-text{border-radius:var(--gk-radius-sm)!important;border:1px solid var(--gk-line)!important;font-family:var(--gk-font)}
.form-control:focus{border-color:var(--gk-accent)!important;box-shadow:0 0 0 3px rgba(47,109,246,.14)!important}

/* ---------- HERO / MARKETING (homepage) ---------- */
.header-lined h1,.jumbotron h1{font-size:calc(var(--gk-h1) + .35rem)!important}
.jumbotron,.homepage-header{background:var(--gk-surface)!important;border:1px solid var(--gk-line);border-radius:var(--gk-radius)}

/* subtle accent strip usable anywhere */
.gk-accent-text{color:var(--gk-accent)!important}
","dir":"/home1/kingcom/go.kingcom.co.za/templates/gkcustom/css","to_charset":"utf-8","path":"/home1/kingcom/go.kingcom.co.za/templates/gkcustom/css/gk-custom.css

/* ---------- ICONS (antler set, recoloured) ---------- */
.gk-icon{width:2.1rem;height:2.1rem;display:inline-block;color:var(--gk-accent);vertical-align:middle}
.gk-icon-lg{width:2.9rem;height:2.9rem}
.gk-icon-ink{color:var(--gk-ink)}
.gk-feature{display:flex;gap:.9rem;align-items:flex-start}
.gk-feature .gk-icon{flex:0 0 auto;margin-top:.15rem}
.gk-icon-badge{width:3.4rem;height:3.4rem;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gk-radius-sm);background:var(--gk-surface-2);border:1px solid var(--gk-line);color:var(--gk-accent)}
.gk-icon-badge .gk-icon{width:1.7rem;height:1.7rem}


/* ============================================================
   FOOTER (antler-inspired: dark, service columns, socials)
   ============================================================ */
.gk-footer{background:var(--gk-accent-2)!important;color:#c7ccd6;padding-top:3.2rem;font-size:.92rem}
.gk-footer a{color:#c7ccd6}
.gk-footer a:hover{color:#fff}
.gk-footer-top{padding-bottom:2.2rem;border-bottom:1px solid rgba(255,255,255,.08)}
.gk-foot-head{color:#fff;font-weight:600;letter-spacing:.03em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem}
.gk-foot-menu{list-style:none;padding:0;margin:0}
.gk-foot-menu li{margin-bottom:.55rem}
.gk-foot-menu a{opacity:.85}
.gk-foot-menu a:hover{opacity:1;color:var(--gk-accent)!important}
.gk-foot-brand{color:#fff;font-weight:700;font-size:1.15rem;margin-bottom:.4rem}
.gk-foot-tag{opacity:.75;margin-bottom:1rem}
.gk-social{display:flex;gap:.6rem}
.gk-social a{width:2.2rem;height:2.2rem;border-radius:50%;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease}
.gk-social a:hover{background:var(--gk-accent);color:#fff}
.gk-footer-bottom{background:rgba(0,0,0,.22);margin-top:2rem;padding:1.1rem 0}
.gk-fb-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.gk-copy{opacity:.65;font-size:.82rem}
.gk-pay{list-style:none;display:flex;gap:.9rem;margin:0;padding:0;opacity:.6;font-size:1.25rem}
.gk-locale{display:none}

/* ============================================================
   STORE / PRICING (antler-style pricing cards)
   ============================================================ */
.pricing-table,.product-list,.orderforms .row{gap:0}
.pricing-table .panel,.product-thumbnail,.package-panel,.orderforms .panel{
  border-radius:var(--gk-radius)!important;
}
/* product/pricing card */
.orderforms .panel,.pricing-table .panel{
  text-align:center;position:relative;padding-top:.5rem;
}
.orderforms .panel-heading,.pricing-table .panel-heading{
  background:var(--gk-surface)!important;border-bottom:none!important;
  padding-top:1.6rem;font-size:1.05rem;font-weight:700;
}
.orderforms .price,.pricing-table .price,.product-price{
  font-family:var(--gk-font);font-weight:700;color:var(--gk-ink);
}
.orderforms .price .h2,.pricing-table .price .h2{font-size:1.9rem!important}
.orderforms .btn-block,.pricing-table .btn-block{margin-top:1rem}
/* featured/recommended plan */
.panel-featured,.panel.featured,.orderforms .panel-primary{
  border:2px solid var(--gk-accent)!important;box-shadow:var(--gk-shadow-hover)!important;transform:translateY(-6px);
}
.panel-featured .panel-heading,.panel.featured .panel-heading,.orderforms .panel-primary .panel-heading{
  background:var(--gk-accent)!important;color:#fff!important;border-radius:calc(var(--gk-radius) - 1px) calc(var(--gk-radius) - 1px) 0 0!important;
}
.ribbon,.featured-ribbon{background:var(--gk-accent)!important;color:#fff!important}
/* feature list inside pricing cards */
.orderforms ul.list-unstyled li,.pricing-table ul li{padding:.4rem 0;border-bottom:1px dashed var(--gk-line)}
.orderforms ul.list-unstyled li:last-child,.pricing-table ul li:last-child{border-bottom:none}


/* ============================================================
   PREMIUM_COMPARISON ORDER FORM (WordPress Hosting etc.)
   Overrides the stock blue-gradient pricing table.
   Selectors are ID-scoped to match/beat the stock CSS specificity.
   ============================================================ */
#order-premium_comparison{font-family:var(--gk-font)!important;color:var(--gk-ink)!important}
#order-premium_comparison h3,#order-premium_comparison h4,#order-premium_comparison h5{
  font-family:var(--gk-font)!important;
}
#order-premium_comparison .price-table-container .price-table{
  background:var(--gk-surface)!important;
  border:1px solid var(--gk-line)!important;
  border-radius:var(--gk-radius)!important;
  box-shadow:var(--gk-shadow)!important;
  transition:box-shadow .18s ease, transform .18s ease;
}
#order-premium_comparison .price-table-container .price-table:hover{
  box-shadow:var(--gk-shadow-hover)!important; transform:translateY(-3px);
}
/* header band: solid ink, no gradient */
#order-premium_comparison .price-table-container .price-table .top-head{
  background:var(--gk-ink)!important;
  border-radius:calc(var(--gk-radius) - 1px) calc(var(--gk-radius) - 1px) 0 0!important;
}
#order-premium_comparison .price-table-container .price-table .top-head .top-area{
  border-bottom:1px solid rgba(255,255,255,.12)!important;
}
#order-premium_comparison .price-table-container .price-table .top-head .top-area h4{
  font-weight:600!important; color:#fff!important; font-size:var(--gk-h4)!important;
}
#order-premium_comparison .price-table-container .price-table .top-head .top-area p{
  color:rgba(255,255,255,.65)!important;
}
#order-premium_comparison .price-table-container .price-table .top-head .price-area{
  border-top:1px solid rgba(255,255,255,.1)!important;
  color:var(--gk-accent)!important; /* the price itself — green accent on black */
}
#order-premium_comparison .price-table-container .price-table .top-head .price-area .price{
  color:var(--gk-accent)!important; text-shadow:none!important;
}
/* order button: solid accent, no gradient */
#order-premium_comparison .price-table-container .order-button,
#order-premium_comparison .price-table-container .order-button:hover{
  background:var(--gk-accent)!important;
  color:#fff!important; text-shadow:none!important;
  border-radius:var(--gk-radius-sm)!important;
  font-weight:600!important; box-shadow:none!important;
  transition:filter .15s ease;
}
#order-premium_comparison .price-table-container .order-button:hover{filter:brightness(0.92)}
#order-premium_comparison .price-table-container .order-button.unavailable,
#order-premium_comparison .price-table-container .order-button.unavailable:hover{
  background:#c7ccd6!important;
}
/* feature list rows */
#order-premium_comparison .price-table-container .price-table ul li{
  border-bottom:1px dashed var(--gk-line)!important; color:var(--gk-ink-soft);
}
/* featured / active plan gets an accent ring instead of the old negative-margin "pop" */
#order-premium_comparison .price-table-container .price-table.active{
  border:2px solid var(--gk-accent)!important;
  box-shadow:var(--gk-shadow-hover)!important;
}
#order-premium_comparison .price-table-container .price-table.active .top-head{
  background:var(--gk-accent-2)!important;
}


/* ============================================================
   QUICK-LINK ICON CARDS (action-icon-btns) — smaller icons,
   left-aligned, narrow vertical height
   ============================================================ */
.action-icon-btns{gap:.9rem 0}
.action-icon-btns > div{padding-left:.45rem;padding-right:.45rem}
.action-icon-btns a{
  display:flex!important;
  align-items:center;
  justify-content:flex-start;
  text-align:left!important;
  gap:.7rem;
  background:var(--gk-surface);
  border:1px solid var(--gk-line);
  border-radius:var(--gk-radius-sm);
  box-shadow:var(--gk-shadow);
  padding:.65rem .85rem;   /* narrow vertical height */
  min-height:0;
  height:auto;
  color:var(--gk-ink)!important;
  font-weight:500;
  font-size:.9rem;
  transition:box-shadow .15s ease, transform .15s ease;
}
.action-icon-btns a:hover{box-shadow:var(--gk-shadow-hover);transform:translateY(-2px)}
.action-icon-btns .ico-container{
  margin:0!important;
  flex:0 0 auto;
  width:1.6rem;height:1.6rem;   /* smaller icon */
  display:flex;align-items:center;justify-content:center;
}
.action-icon-btns .ico-container .gk-icon{
  width:1.35rem;height:1.35rem;color:var(--gk-accent);
}
/* neutralise the stock per-card accent colours -> single consistent accent */
.action-icon-btns [class*="card-accent-"]{color:var(--gk-ink)!important}
.action-icon-btns [class*="card-accent-"] .gk-icon{color:var(--gk-accent)!important}

/* ============================================================
   PRICING TABLE SHADOW PARITY with .card.mb-3
   ============================================================ */
#order-premium_comparison .price-table-container .price-table{
  box-shadow:var(--gk-shadow)!important;
}
#order-premium_comparison .price-table-container .price-table:hover{
  box-shadow:var(--gk-shadow-hover)!important;
}
/* CR-022: remove legacy shadow-btm.png background hack on the <li> wrapper --
   .price-table itself already carries our standard box-shadow above */
#order-premium_comparison .price-table-container ul li{
  background:none!important;
}


/* ============================================================
   MASCOT — above domain search box
   ============================================================ */
.kc-mascot-wrap{position:relative;z-index:1;margin:0 0 -18px 0;text-align:center}
.kc-mascot{width:70%;height:auto;max-width:500px}
@media (max-width:575.98px){
  .kc-mascot{width:58%;max-width:220px}
}
.input-group-wrapper{position:relative;z-index:2}
.tld-logos{position:relative;z-index:2}
.home-domain-search .p-5{padding:1rem 1.5rem}

/* CR-016: unified dark search bar (reference: kingcom.co.za/domain-registration/,
   adapted to our tokens instead of their black/orange) so the mascot rests ON the
   bar's top edge rather than plunging through the old white input-group box. */
.home-domain-search .input-group-wrapper{
  background:var(--gk-ink);
  border-radius:var(--gk-radius);
  padding:.6rem;
}
.home-domain-search .input-group-wrapper .input-group{background:transparent}
.home-domain-search .input-group-wrapper .form-control{border:0!important;height:44px}
/* CR-019 UX audit: WCAG 2.5.5 target size (44px), WCAG 2.5.8 spacing between
   adjacent targets (~16px), WCAG 1.4.3 text contrast (4.5:1 -> --gk-accent-btn) */
.home-domain-search #btnDomainSearch,
.home-domain-search #btnTransfer,
.home-domain-search #btnDomainSearch2,
.home-domain-search #btnTransfer2{
  height:44px;
}
.home-domain-search #btnDomainSearch,
.home-domain-search #btnDomainSearch2{
  background:var(--gk-accent-btn)!important;
  border-color:var(--gk-accent-btn)!important;
}
.home-domain-search .input-group-append .btn + .btn{margin-left:1rem!important}

/* CR-027: standardise corner radius (a stale rule already baked into
   theme.min.css -- .home-domain-search .input-group-wrapper .btn{border-radius:.25rem!important} --
   was beating our token at equal specificity via source order; this matches
   its specificity exactly and loads later, so it wins) + even spacing */
.home-domain-search .input-group-wrapper .form-control,
.home-domain-search .input-group-wrapper .btn{
  border-radius:var(--gk-radius-sm)!important;
}
.home-domain-search .input-group-wrapper .btn{
  margin:0 0 0 1rem!important;
}

/* CR-027: header-lined -- transparent/no background (ID+class beats the
   plain #header rule above regardless of source order) */
#header.header-lined{
  background:transparent!important;
  border-bottom:none!important;
  box-shadow:none!important;
}

/* CR-027: smaller "Browse Products" text on homepage swipe cards */
.card-columns.home .btn{font-size:.85rem!important}

/* CR-027: hosting price display -- amount + currency/cycle on its own
   centered, lighter line (was one run-on line) */
.price-cycle-display{text-align:center;display:block}
.price-cycle-display .price-amount{display:block}
.price-cycle-display .price-meta{display:block;font-size:.8rem!important;font-weight:400;line-height:1.6!important;color:var(--gk-ink-soft);margin-top:.15rem}


/* ---------- CR-011: smaller TLD logo badges ---------- */
.tld-logos img{height:20px;width:auto;max-width:60px}

/* ---------- CR-011: homepage product cards as swipe row (no new JS) ---------- */
.swipe-row-wrap{position:relative;padding:0 2.75rem}
.card-columns.home{
  display:flex;
  flex-wrap:nowrap;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  column-count:initial;
  gap:1rem;
  padding-bottom:.5rem;
  margin:0 0 1rem;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.card-columns.home::-webkit-scrollbar{display:none;height:0}
.card-columns.home .card{
  scroll-snap-align:start;
  flex:0 0 260px !important;
  max-width:260px;
  margin:0 !important;
}
.swipe-arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--gk-line);
  background:var(--gk-surface);
  box-shadow:var(--gk-shadow);
  color:var(--gk-ink);
  font-size:1.4rem;
  line-height:1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:3;
}
.swipe-arrow:hover{box-shadow:var(--gk-shadow-hover)}
.swipe-arrow:disabled{opacity:.35;cursor:default;box-shadow:none}
.swipe-arrow-left{left:0}
.swipe-arrow-right{right:0}
@media (max-width:575.98px){
  .swipe-row-wrap{padding:0 2.25rem}
  .swipe-arrow{width:34px;height:34px;font-size:1.2rem}
}


/* CR-017: mobile — .co.za/.net/.com as one row (grid), View all pricing centered */
@media (max-width:575.98px){
  .tld-logos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:.5rem;
    list-style:none;
    padding:0;
    margin:.75rem 0 0;
  }
  .tld-logos li{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    font-size:.72rem;
  }
  .tld-logos img{margin:0 0 .25rem}
  .home-domain-search .p-5 a.btn-link{
    float:none!important;
    display:block;
    text-align:center;
    margin-top:.75rem;
  }
}

/* CR-025: Monthly/Annually run-switch on hosting pricing tables (premium_comparison) */
.run-switch{position:relative;cursor:pointer;display:inline-flex;align-items:center;-webkit-user-select:none;user-select:none}
.run-switch .mo,.run-switch .an{font-size:.8rem;font-weight:700;color:var(--gk-ink-soft);transition:color .3s ease}
.run-switch .mo.active,.run-switch .an.active{color:var(--gk-ink)}
.run-switch .switch{position:relative;width:52px;height:26px;margin:0 12px;border-radius:13px;background:var(--gk-accent);box-shadow:var(--gk-shadow);vertical-align:middle}
.run-switch .switch:after{content:"";position:absolute;top:50%;left:5px;margin-top:-9px;width:18px;height:18px;border-radius:50%;background:#fff;transition:left .3s ease}
.run-switch .switch.on:after{left:29px}
.annual-only-note{color:var(--gk-ink-soft);font-weight:400}
.price-cycle-display small{font-size:.85rem!important;font-weight:400;color:var(--gk-ink-soft)}
.price-cycle-display .price-currency-code{font-size:.7rem!important;font-weight:400;color:var(--gk-ink-soft)}