/* ============================================================
   C Zone Host — WHMCS "six" template brand skin
   Upload to: /templates/six/css/custom.css  (auto-loaded, update-safe)
   Matches czonehost.com — Sora + Manrope, purple→pink gradient.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root{
  --cz-purple:#7b2ff7;
  --cz-pink:#e01e79;
  --cz-grad:linear-gradient(120deg,#7b2ff7,#e01e79);
  --cz-ink:#14141c;
  --cz-body:#2a2a34;
  --cz-muted:#63636f;
  --cz-line:#e6e6ee;
  --cz-bg:#f6f6fb;
  --cz-card:#ffffff;
  --cz-radius:14px;
}

/* ---------- Base ---------- */
body{
  font-family:'Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif !important;
  color:var(--cz-body);
  background:var(--cz-bg);
}
h1,h2,h3,h4,h5,.page-header h1,.card-title,.panel-title{
  font-family:'Sora',sans-serif !important;
  font-weight:700;
  color:var(--cz-ink);
  letter-spacing:-.01em;
}
a{ color:var(--cz-purple); }
a:hover,a:focus{ color:var(--cz-pink); }

/* ---------- Top nav / header ---------- */
#header,#header .navbar,.navbar-inverse,.primary-nav,#Primary_Navbar{
  background:#ffffff !important;
  border:none !important;
  box-shadow:0 1px 0 var(--cz-line);
}
#header .navbar-brand img,#logo img{ max-height:44px; width:auto; }
.primary-nav .navbar-nav > li > a,#Primary_Navbar .navbar-nav > li > a{
  color:var(--cz-body) !important;
  font-weight:600;
  font-family:'Manrope',sans-serif;
}
.primary-nav .navbar-nav > li > a:hover,
.primary-nav .navbar-nav > .active > a,
#Primary_Navbar .navbar-nav > li > a:hover,
#Primary_Navbar .navbar-nav > .open > a{
  color:var(--cz-pink) !important;
  background:transparent !important;
}
/* secondary/account menu pills */
#Secondary_Navbar .navbar-nav > li > a{ color:var(--cz-muted) !important; }

/* ---------- Buttons ---------- */
.btn{
  border-radius:10px;
  font-family:'Manrope',sans-serif;
  font-weight:700;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-primary,.btn-info,.btn-success,
.btn-primary:focus,.btn-primary.active{
  background:var(--cz-grad) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 8px 22px -8px rgba(224,30,121,.55);
}
.btn-primary:hover,.btn-info:hover,.btn-success:hover{
  filter:brightness(1.06);
  transform:translateY(-2px);
  color:#fff !important;
}
.btn-default,.btn-secondary{
  background:#fff !important;
  border:1px solid var(--cz-line) !important;
  color:var(--cz-ink) !important;
}
.btn-default:hover{ border-color:var(--cz-pink) !important; color:var(--cz-pink) !important; }

/* ---------- Cards / panels ---------- */
.card,.panel{
  border:1px solid var(--cz-line) !important;
  border-radius:var(--cz-radius) !important;
  box-shadow:0 18px 40px -30px rgba(20,20,28,.28);
  background:var(--cz-card);
}
.panel-heading,.card-header{
  background:#fbfbfe !important;
  border-bottom:1px solid var(--cz-line) !important;
  border-radius:var(--cz-radius) var(--cz-radius) 0 0 !important;
  font-family:'Sora',sans-serif;
  font-weight:700;
}
.panel-primary > .panel-heading{ background:var(--cz-grad) !important; color:#fff !important; border:none !important; }

/* ---------- Home panels (client area tiles) ---------- */
.home-panels .panel .panel-body h3,.home-panels a{ color:var(--cz-ink); }
.home-panels .panel:hover{ transform:translateY(-4px); border-color:rgba(224,30,121,.4) !important; }

/* ---------- Forms ---------- */
.form-control{
  border-radius:10px;
  border:1px solid var(--cz-line);
  box-shadow:none;
  font-family:'Manrope',sans-serif;
}
.form-control:focus{
  border-color:var(--cz-purple);
  box-shadow:0 0 0 3px rgba(123,47,247,.12);
}
label,.control-label{ font-weight:600; color:var(--cz-body); }

/* ---------- Login / Signup pages ---------- */
body.loginpage,body.registerpage{ background:var(--cz-bg); }
.loginpage .logincontainer,.loginpage .card,
.registerpage .card,.verifyemailbanner{
  border-radius:16px !important;
  border:1px solid var(--cz-line) !important;
  box-shadow:0 30px 70px -40px rgba(123,47,247,.5) !important;
}
.loginpage .header-lined,.loginpage h1,.registerpage h1{
  font-family:'Sora',sans-serif; font-weight:800; color:var(--cz-ink);
}
/* accent bar on top of login card */
.loginpage .card::before,.registerpage .card::before{
  content:''; display:block; height:4px; margin:-1px -1px 20px;
  background:var(--cz-grad); border-radius:16px 16px 0 0;
}

/* ---------- Alerts / badges ---------- */
.label-success,.badge-success{ background:#12b886 !important; }
.alert-info{ background:#f3eefe; border-color:#e2d4fb; color:#4b2a99; }
.alert-info a{ color:var(--cz-purple); }

/* ---------- Order form / cart ---------- */
.order-summary .btn,.cartbox .btn{ background:var(--cz-grad) !important; border:none !important; }
.product-highlight,.recommended{ border-color:var(--cz-pink) !important; }
.summary-container .total{ color:var(--cz-purple); font-family:'Sora',sans-serif; }

/* ---------- Progress bars / links ---------- */
.progress-bar,.progress-bar-info{ background:var(--cz-grad) !important; }
.pagination > .active > a{ background:var(--cz-purple) !important; border-color:var(--cz-purple) !important; }

/* ---------- Footer (dark, matches site) ---------- */
#footer,.footer{
  background:#0d0d14 !important;
  color:#9a9aac !important;
  border-top:none !important;
}
#footer a,.footer a{ color:#9a9aac !important; }
#footer a:hover,.footer a:hover{ color:#f26fb2 !important; }
.cz-footer{ background:#0d0d14; color:#fff; padding:56px 22px 30px; font-family:'Manrope',sans-serif; position:relative; }
.cz-footer .cz-wrap{ max-width:1180px; margin:0 auto; }
/* marquee ticker */
.cz-footer .cz-ticker{ overflow:hidden; margin-bottom:40px; padding-bottom:34px; border-bottom:1px solid rgba(255,255,255,.08);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.cz-footer .cz-ticker-track{ display:flex; width:max-content; animation:cz-marquee 34s linear infinite; }
.cz-footer .cz-tick{ display:flex; align-items:center; gap:10px; padding:6px 26px; white-space:nowrap; font-size:14.5px; font-weight:600; color:#c8c8d4; }
.cz-footer .cz-tick em{ font-style:normal; font-size:16px; }
.cz-footer .cz-tick .cz-dot{ width:5px; height:5px; border-radius:50%; background:linear-gradient(120deg,#a56bff,#e01e79); margin-left:16px; display:inline-block; }
@keyframes cz-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
/* columns */
.cz-footer .cz-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:30px; }
.cz-footer h4{ font-family:'Sora',sans-serif; font-weight:700; font-size:14px; letter-spacing:.04em; color:#fff !important; margin-bottom:16px; }
.cz-footer .cz-col a{ display:block; font-size:14px; color:#9a9aac !important; margin-bottom:11px; text-decoration:none; }
.cz-footer .cz-col a:hover{ color:#f26fb2 !important; }
.cz-footer .cz-logo{ height:48px; width:auto; margin-bottom:16px; }
.cz-footer .cz-tagline{ font-size:14px; line-height:1.6; color:#9a9aac; max-width:280px; }
.cz-footer .cz-tagline a{ color:#f26fb2 !important; font-weight:600; }
/* socials */
.cz-footer .cz-socials{ display:flex; gap:10px; margin-top:18px; }
.cz-footer .cz-socials a{ width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; font-size:15px; color:#d4d4de !important; transition:background .2s; text-decoration:none; }
.cz-footer .cz-socials a:hover{ background:rgba(255,255,255,.14); }
/* payments */
.cz-footer .cz-pay{ margin-top:40px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); }
.cz-footer .cz-pay-label{ font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#7a7a8a; margin-bottom:14px; }
.cz-footer .cz-pay-row{ display:flex; flex-wrap:wrap; gap:10px; }
.cz-footer .cz-pay-row .pay{ height:42px; min-width:64px; padding:0 14px; border-radius:9px; background:#fff; display:flex; align-items:center; justify-content:center; gap:7px; box-shadow:0 4px 12px -6px rgba(0,0,0,.5); font-family:'Sora',sans-serif; }
.cz-footer .pay-visa{ font-weight:800; font-style:italic; font-size:17px; color:#1a1f71; letter-spacing:.02em; }
.cz-footer .pay-amex{ font-weight:800; font-size:12.5px; color:#fff; background:#2e77bb; padding:4px 7px; border-radius:4px; letter-spacing:.02em; }
.cz-footer .pay-1link{ font-weight:800; font-size:14px; color:#00874d; }
.cz-footer .pay-txt{ display:flex; align-items:center; gap:6px; font-weight:700; font-size:12px; color:#14141c; }
.cz-footer .pay-mc{ display:flex; align-items:center; }
.cz-footer .pay-mc span{ width:18px; height:18px; border-radius:50%; display:inline-block; }
.cz-footer .pay-mc .mc-r{ background:#eb001b; }
.cz-footer .pay-mc .mc-y{ background:#f79e1b; margin-left:-8px; mix-blend-mode:multiply; }
/* copyright */
.cz-footer .cz-copy{ margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13px; color:#7a7a8a; }
.cz-footer .cz-copy a{ color:#9a9aac !important; }
.cz-footer .cz-copy .cz-copy-links{ display:flex; gap:20px; }
.cz-footer .back-to-top{ color:#fff; }
@media(max-width:900px){ .cz-footer .cz-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:560px){ .cz-footer .cz-grid{ grid-template-columns:1fr; } }

/* ============================================================
   OVERRIDES v2 — force nav, headings and fonts to match home page
   (higher-specificity + !important to beat six's compiled theme)
   ============================================================ */

/* ---- Primary nav bar: teal -> white like the website ---- */
.navbar-main,nav.navbar-main,#main-menu,.primary-nav,.primary-nav-container,
.navbar-default,.navbar.navbar-main{
  background:#ffffff !important;
  background-image:none !important;
  border:none !important;
  box-shadow:0 2px 12px -7px rgba(20,20,28,.35) !important;
}
.navbar-main .navbar-nav > li > a,
#main-menu .navbar-nav > li > a,
.primary-nav .navbar-nav > li > a,
.navbar-default .navbar-nav > li > a{
  color:#2a2a34 !important;
  font-weight:600 !important;
  font-family:'Manrope',sans-serif !important;
}
.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 > .open > a,
#main-menu .navbar-nav > li > a:hover,
.primary-nav .navbar-nav > li > a:hover{
  color:#e01e79 !important;
  background:transparent !important;
}
.navbar-main .caret,#main-menu .caret{ color:inherit !important; }
.navbar-main .dropdown-menu,#main-menu .dropdown-menu{
  border:1px solid #e6e6ee !important; border-radius:12px !important;
  box-shadow:0 20px 44px -24px rgba(20,20,28,.4) !important;
}
.navbar-main .dropdown-menu > li > a:hover,
#main-menu .dropdown-menu > li > a:hover{ background:#faf5ff !important; color:#7b2ff7 !important; }

/* ---- Page heading (the teal "Login") -> dark Sora ---- */
h1,h2,h3,h4,h5,h6,
.page-header h1,.page-header h2,.page-header,
.loginpage h1,.registerpage h1{
  color:#14141c !important;
  font-family:'Sora',sans-serif !important;
  font-weight:800 !important;
  letter-spacing:-.01em !important;
}
.page-header small,.page-header h1 small{
  color:#63636f !important; font-family:'Manrope',sans-serif !important; font-weight:500 !important;
}
.page-header{ border-bottom:1px solid #e6e6ee !important; }

/* ---- Top-row action links: match homepage (Login ghost, Sign Up gradient) ---- */
.top-nav{ display:flex; align-items:center; gap:10px; }
.top-nav > li{ float:none !important; display:flex; align-items:center; }
.top-nav a{ color:#2a2a34 !important; font-family:'Manrope',sans-serif !important; font-weight:600 !important; }
.top-nav a:hover{ color:#e01e79 !important; }
/* Login link -> ghost button */
.top-nav a[href*="clientarea.php"]{
  padding:9px 15px !important; border-radius:10px !important;
  border:1px solid #dcdce4 !important; color:#2a2a34 !important;
}
.top-nav a[href*="clientarea.php"]:hover{ border-color:#e01e79 !important; color:#e01e79 !important; }
/* Sign Up (register) -> gradient button */
.top-nav a[href*="register.php"]{
  padding:10px 18px !important; border-radius:10px !important;
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important; border:none !important;
  box-shadow:0 8px 22px -8px rgba(224,30,121,.55) !important;
}
.top-nav a[href*="register.php"]:hover{ filter:brightness(1.06); color:#fff !important; }
/* View Cart + logout -> gradient pill */
.top-nav .primary-action .btn,.top-nav a.btn{
  padding:10px 18px !important; border-radius:10px !important;
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important; border:none !important;
  box-shadow:0 8px 22px -8px rgba(224,30,121,.55) !important;
}
/* language / notifications caret links stay plain */
.top-nav a.choose-language,.top-nav #accountNotifications{ padding:9px 6px !important; border:none !important; }

/* ---- Login / register page: center it in a card like the site ---- */
/* scoped so it does NOT squeeze contact.php / other wide forms (see v20) */
body.loginpage #main-body .main-content > form,
body.registerpage #main-body .main-content > form,
#main-body .main-content > form[action*="dologin"],
#main-body .main-content > form[action*="register"],
#main-body .main-content > .row form[action*="dologin"]{ max-width:520px; }
.card,.well{ border-radius:16px !important; }

/* ---- Body & general text font ---- */
body,p,label,.control-label,td,th,li,a,input,select,textarea,button,.btn{
  font-family:'Manrope',-apple-system,'Segoe UI',sans-serif !important;
}
h1,h2,h3,h4,h5,h6{ font-family:'Sora',sans-serif !important; }

/* ============================================================
   OVERRIDES v4 — order-form package cards + sidebar panels
   ============================================================ */

/* ---- Product / package cards (cart.php order form) ---- */
#main-body .panel,#main-body .card,#order-standard_cart .panel,
.packages .package,.product,.cartbox{
  border:1px solid #e6e6ee !important;
  border-radius:16px !important;
  box-shadow:0 20px 46px -32px rgba(20,20,28,.35) !important;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow:hidden;
}
#main-body .panel:hover,.packages .package:hover,.product:hover{
  transform:translateY(-6px);
  border-color:rgba(224,30,121,.45) !important;
  box-shadow:0 30px 62px -34px rgba(123,47,247,.5) !important;
}
#main-body .panel-heading,.packages .package .panel-heading,
.product .panel-heading,.package-name{
  background:#fbfbfe !important;
  border-bottom:1px solid #eee !important;
  font-family:'Sora',sans-serif !important;
  font-weight:700 !important;
  font-size:18px !important;
  color:#14141c !important;
  padding:16px 20px !important;
}
.panel-title,.package-name,.product-name{ font-family:'Sora',sans-serif !important; font-weight:700 !important; color:#14141c !important; }
/* price emphasis */
.package-price,.product-price,.pricing .price,.amount,.cartbox .total,.order-price{
  color:#7b2ff7 !important; font-family:'Sora',sans-serif !important; font-weight:800 !important;
}
/* the cycle line under the price (Annually / Monthly) */
.package-price small,.product-price small,.recurring{ color:#8a8a99 !important; font-weight:500 !important; }
/* Order Now button already gradient via .btn-primary; make sure any order btn matches */
.order-button .btn,.package-order .btn,.product .btn,a.btn.btn-order{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  border:none !important; color:#fff !important; border-radius:10px !important;
  box-shadow:0 8px 22px -8px rgba(224,30,121,.55) !important;
}

/* ---- Sidebar panels (Categories / Actions / Choose Currency) ---- */
#main-body .sidebar .panel{ border-radius:14px !important; overflow:hidden; }
#main-body .sidebar .panel-heading,.sidebar .panel-title{
  font-family:'Sora',sans-serif !important; font-weight:700 !important; color:#14141c !important;
}
/* active category item -> brand gradient (was dark) */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus,
.sidebar .nav > .active > a,
.sidebar ul li.active > a{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  border-color:transparent !important; color:#fff !important;
}
.sidebar .list-group-item{ border-color:#eee !important; }
.sidebar .list-group-item:hover{ color:#e01e79 !important; }
/* currency select in sidebar */
.sidebar select.form-control{ border-radius:10px !important; }

/* ============================================================
   OVERRIDES v5 — single-row homepage-style header (.cz-header)
   ============================================================ */
#header.cz-header{
  position:sticky !important; top:0; z-index:100;
  background:rgba(255,255,255,.85) !important;
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid #ececf2 !important;
  box-shadow:0 6px 24px -18px rgba(20,20,28,.5) !important;
  padding:0 !important; overflow:visible !important;
}
.cz-header .cz-headbar{ max-width:1240px; margin:0 auto; display:flex !important; align-items:center; gap:18px; padding:0 22px !important; height:84px; position:relative; }
.cz-header .logo{ position:static !important; float:none !important; margin:0 !important; padding:0 !important; flex:0 0 auto; display:inline-flex; align-items:center; }
.cz-header .logo img{ height:52px !important; width:auto !important; max-width:none !important; display:block; }
.cz-header .cz-nav{ display:flex; align-items:center; gap:4px; flex:1 1 auto; justify-content:center; flex-wrap:wrap; }
.cz-header .cz-nav a{ font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:15px !important; color:#3a3a46 !important; text-decoration:none; padding:9px 13px; border-radius:9px; white-space:nowrap; transition:background .2s,color .2s; }
.cz-header .cz-nav a:hover{ color:#e01e79 !important; background:#faf5ff !important; }
.cz-header .cz-actions{ display:flex !important; align-items:center; gap:10px; margin:0 !important; padding:0 !important; list-style:none; flex:0 0 auto; }
.cz-header .cz-actions > li{ float:none !important; margin:0 !important; display:flex; align-items:center; }
/* Free Domain Name Finder tab (matches homepage) */
.cz-header .cz-finder-tab{
  position:absolute; left:50%; bottom:-42px; transform:translateX(-50%); z-index:99;
  display:flex; align-items:center; gap:8px; padding:11px 22px; border:none; cursor:pointer;
  color:#fff !important; text-decoration:none;
  background:linear-gradient(120deg,#7b2ff7,#e01e79);
  border-radius:0 0 14px 14px;
  box-shadow:0 12px 28px -10px rgba(224,30,121,.65);
  font-family:'Sora',sans-serif; font-weight:700; font-size:14px; letter-spacing:.02em; white-space:nowrap;
  transition:filter .2s;
}
.cz-header .cz-finder-tab:hover{ filter:brightness(1.08); color:#fff !important; }
.cz-header .cz-finder-tab span{ opacity:.85; }
/* logged-in client menu bar sits directly under, still white */
#main-menu{ margin-top:0 !important; }
@media(min-width:992px){
  /* clear the overhanging finder tab */
  #header.cz-header ~ #main-menu,
  #header.cz-header ~ #home-banner,
  #header.cz-header ~ #main-body{ padding-top:38px !important; }
}
@media(max-width:991px){
  .cz-header .cz-headbar{ height:auto; padding:12px 16px !important; flex-wrap:wrap; }
  .cz-header .cz-nav{ order:3; flex-basis:100%; justify-content:flex-start; gap:8px; margin:6px 0 4px; }
  .cz-header .cz-actions{ margin-left:auto !important; }
  .cz-header .cz-finder-tab{ position:static; transform:none; width:100%; justify-content:center; border-radius:12px; margin-top:8px; box-shadow:none; }
}

/* ============================================================
   OVERRIDES v7 — cart / checkout page
   ============================================================ */
/* product review table header: dark charcoal (not gradient) */
.table > thead > tr > th,
.secondary-cart-body thead th,.secondary-cart-body > thead > tr > th,
.cart-review-table thead th,#products thead th,
.order-review thead th,#cartSummary thead th{
  background:#14141c !important;
  background-image:none !important;
  color:#fff !important; border-color:transparent !important;
  font-family:'Sora',sans-serif !important; font-weight:700 !important;
}
.table > thead > tr > th a,.secondary-cart-body thead th a{ color:#fff !important; }

/* Order Summary panel header: dark charcoal */
.order-summary .panel-heading,.summary-container .panel-heading,
#orderSummary .panel-heading,.sidebar-order-summary .panel-heading,
.checkout-summary .panel-heading,.order-summary h2,.summary-container h2{
  background:#14141c !important;
  background-image:none !important;
  color:#fff !important; border:none !important;
  font-family:'Sora',sans-serif !important;
}

/* Order Summary buttons: stack full-width, no overlap */
.order-summary .btn,.summary-container .btn,#orderSummary .btn,
.checkout-btn-container .btn,.order-button-container .btn{
  display:block !important; width:100% !important; float:none !important;
  position:static !important; margin:0 0 10px 0 !important;
}
.order-summary .btn:last-child,.summary-container .btn:last-child{ margin-bottom:0 !important; }
/* Continue Shopping -> gray button, white text */
.btn-continue-shopping,a.continue-shopping,#btnContinueShopping,
.btn.btn-link.btn-continue-shopping{
  background:#63636f !important; background-image:none !important;
  color:#fff !important; border:1px solid #63636f !important; box-shadow:none !important;
  text-decoration:none !important;
}
.btn-continue-shopping:hover,.btn.btn-link.btn-continue-shopping:hover{
  background:#4d4d58 !important; border-color:#4d4d58 !important; color:#fff !important;
}

/* Promo code -> prominent card */
.apply-promo,.promotioncode,#promo,.cart-promo,.promo-code-container,.promotion-code{
  background:#faf5ff !important; border:2px dashed rgba(224,30,121,.55) !important;
  border-radius:14px !important; padding:18px !important;
}
.apply-promo .nav-tabs,.promotioncode .nav-tabs{ border:none !important; }
.apply-promo .nav-tabs > li > a,.apply-promo .nav-tabs > li.active > a{
  font-family:'Sora',sans-serif !important; font-weight:700 !important; color:#7b2ff7 !important;
  border:none !important; background:transparent !important; font-size:15px !important;
}
#inputPromotionCode,input[name="promocode"],#promocode,.promo-code-container input[type="text"]{
  height:48px !important; font-size:15px !important; border-radius:10px !important;
  border:1px solid #e0d4fb !important; box-shadow:0 0 0 3px rgba(123,47,247,.06) !important;
}
#btnValidateCode,.validate-code,button[name="validatepromo"],.apply-promo .btn{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important; border:none !important; font-weight:700 !important; border-radius:10px !important;
}

/* ============================================================
   OVERRIDES v9 — login page styled like a package card
   (hook off the login form's action so it works on any six build)
   ============================================================ */
/* the whole login column becomes one card */
#main-body:has(form[action*="dologin"]) .main-content{
  max-width:540px; margin:24px auto; float:none !important; padding:0 !important;
  background:#fff; border:1px solid #ececf2; border-radius:16px; overflow:hidden;
  box-shadow:0 26px 62px -40px rgba(20,20,28,.45);
}
/* heading -> light-gray header band (like the card header) */
#main-body:has(form[action*="dologin"]) .main-content > h1,
#main-body:has(form[action*="dologin"]) .main-content > .page-header,
#main-body:has(form[action*="dologin"]) .main-content > .text-center > h1,
#main-body:has(form[action*="dologin"]) .main-content h1:first-child{
  margin:0 !important; padding:18px 26px !important;
  background:#f7f7fb !important; border-bottom:1px solid #ececf2 !important;
  border-radius:16px 16px 0 0 !important;
  font-family:'Sora',sans-serif !important; font-size:23px !important; font-weight:800 !important;
  color:#14141c !important; text-align:left !important;
}
#main-body:has(form[action*="dologin"]) .main-content h1 small{
  font-family:'Manrope',sans-serif !important; font-weight:500 !important; color:#8a8a99 !important; font-size:15px !important;
}
/* form is the plain white body */
form[action*="dologin"]{
  background:#fff; border:none; box-shadow:none; border-radius:0;
  margin:0; max-width:none; padding:26px 26px 28px; position:static; overflow:visible;
}
form[action*="dologin"]::before{ display:none !important; }
/* taller, comfortable inputs (also helps mobile) — keep theme's icon padding */
form[action*="dologin"] .form-control,
input.form-control[type="text"],input.form-control[type="email"],
input.form-control[type="password"],input.form-control[type="tel"]{
  min-height:52px !important; height:52px !important;
  font-size:15px !important; border-radius:11px !important;
}
.form-control{ min-height:46px; }
/* re-center left field icons for the taller inputs */
.field-icon,.form-group > i,.form-group .input-icon,
.input-with-icon i,i.field-icon,.form-group span.glyphicon{
  top:50% !important; transform:translateY(-50%) !important; margin-top:0 !important;
}
form[action*="dologin"] label,form[action*="dologin"] .control-label{ font-weight:700; color:#2a2a34; margin-bottom:7px; }
/* buttons row */
form[action*="dologin"] .btn{ height:50px !important; padding:0 26px !important; font-size:15px !important; border-radius:11px !important; }
form[action*="dologin"] .btn-default{ background:#fff !important; color:#2a2a34 !important; border:1px solid #dcdce4 !important; }
form[action*="dologin"] .btn-default:hover{ border-color:#e01e79 !important; color:#e01e79 !important; }
/* remember-me + captcha spacing */
form[action*="dologin"] .checkbox{ margin:14px 0 18px; }
form[action*="dologin"] .g-recaptcha,form[action*="dologin"] .recaptcha{ display:flex; justify-content:center; margin:6px 0 20px; }

/* ============================================================
   OVERRIDES v12 — checkout payment step
   ============================================================ */
/* the card-entry container: gray -> clean white card */
.credit-card-input,#creditCardInputFields,.card-input-container,
.new-card-details,.payment-details,.paymentmethod-details,
#paymentDetails,.credit-card,.cc-inputs{
  background:#fff !important; border:1px solid #ececf2 !important; border-radius:16px !important;
  box-shadow:0 22px 54px -40px rgba(20,20,28,.4) !important; padding:24px !important; margin-top:10px !important;
}
/* payment method chooser row */
.payment-methods,.paymentmethods,#paymentMethods{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-bottom:8px; }
.payment-method,.paymentmethod{
  border:1px solid #e6e6ee !important; border-radius:12px !important; padding:12px 18px !important;
  background:#fff !important; transition:border-color .2s, box-shadow .2s;
}
.payment-method:hover,.paymentmethod:hover{ border-color:rgba(224,30,121,.4) !important; }
/* selected payment method + its check icon -> brand */
.payment-method.selected,.paymentmethod.selected,
input[type="radio"]:checked ~ .payment-method{
  border-color:#7b2ff7 !important; box-shadow:0 0 0 3px rgba(123,47,247,.12) !important;
}
.fa-check-circle,.payment-methods .fas.fa-check-circle{ color:#7b2ff7 !important; }
/* card field labels */
.card-field label,.credit-card-input label,#frmCheckout label,.cc-inputs label,
.payment-details label{ font-family:'Sora',sans-serif !important; font-weight:700 !important; color:#2a2a34 !important; margin-bottom:7px; }
/* card fields taller + focus ring (in addition to global) */
#cardNumber,#cardExpiry,#cardCVV,input[name="ccnumber"],input[name="cccvv"]{
  min-height:50px !important; height:50px !important; border-radius:11px !important; font-size:15px !important;
}
/* Additional Notes divider heading */
.additional-notes-title,#additionalNotesTitle,.additionalnotes h3,.additional-notes h3{
  font-family:'Sora',sans-serif !important; font-weight:700 !important; color:#14141c !important;
}

/* ============================================================
   OVERRIDES v14 — domain search / register page
   (hero banner, category pills, TLD pricing table)
   ============================================================ */

/* ---- Hero search banner: yellow globe -> brand gradient ---- */
.domain-checker-container,.domain-checker,#domain-checker,
.domainchecker .jumbotron,.domain-search-container,
#order-standard_cart .jumbotron,.jumbotron.domain-checker{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:
    radial-gradient(circle at 82% 50%, rgba(255,255,255,.16) 0 1px, transparent 1px 100%),
    linear-gradient(120deg,#7b2ff7 0%,#9b25c4 45%,#e01e79 100%) !important;
  border:none !important; border-radius:20px !important;
  box-shadow:0 30px 70px -40px rgba(123,47,247,.6) !important;
  padding:54px 40px !important; overflow:hidden; position:relative;
}
/* faint globe motif on the right */
.domain-checker-container::after,.domain-checker::after,#domain-checker::after,
.domain-search-container::after{
  content:''; position:absolute; right:-60px; top:50%; transform:translateY(-50%);
  width:340px; height:340px; border-radius:50%;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.10) 0 1px, transparent 1px 34px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 1px, transparent 1px 34px);
  -webkit-mask:radial-gradient(circle, #000 60%, transparent 71%);
  mask:radial-gradient(circle, #000 60%, transparent 71%);
  opacity:.6; pointer-events:none;
}
.domain-checker-container .sub-heading,.domain-checker h1,
.domain-search-container h1,.domain-checker-container p{ color:#fff !important; }

/* search field + button inside the hero */
.domain-checker-container .input-group,.domain-search-container .input-group{
  background:#fff !important; border-radius:16px !important; padding:8px !important;
  box-shadow:0 20px 44px -20px rgba(20,20,28,.4) !important; max-width:640px; margin:0 auto;
  position:relative; z-index:2;
}
.domain-checker-container .input-group .form-control,
.domain-checker-container #domain,.domain-search-container #domain,
input#domain,input[name="query"].form-control{
  height:56px !important; min-height:56px !important; border:none !important;
  box-shadow:none !important; font-size:16px !important; background:transparent !important;
}
.domain-checker-container .input-group .form-control:focus{ box-shadow:none !important; }
.domain-checker-availability-btn,.domain-checker-container .btn,
.domain-search-container .btn,.domain-checker .btn-primary{
  height:56px !important; padding:0 32px !important; border-radius:12px !important;
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  border:none !important; color:#fff !important; font-family:'Sora',sans-serif !important;
  font-weight:700 !important; font-size:16px !important;
  box-shadow:0 8px 22px -8px rgba(224,30,121,.55) !important;
}

/* ---- "Browse extensions by category" pills ---- */
.domain-category-filters,.tld-categories,.domain-categories,
.domain-extension-categories{ display:flex; flex-wrap:wrap; gap:9px !important; margin:8px 0 26px; }
.domain-category-filters .btn,.tld-categories .btn,.domain-categories .btn,
.domain-category-filters a.label,.domain-category-filters .btn-group > .btn{
  background:#f0f0f6 !important; background-image:none !important;
  color:#3a3a46 !important; border:1px solid #e6e6ee !important;
  border-radius:999px !important; padding:7px 15px !important;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13.5px !important;
  box-shadow:none !important; transition:all .18s ease;
}
.domain-category-filters .btn:hover,.tld-categories .btn:hover,
.domain-categories .btn:hover{
  border-color:rgba(224,30,121,.45) !important; color:#e01e79 !important; background:#fff !important;
}
.domain-category-filters .btn.active,.domain-category-filters .btn-primary,
.tld-categories .btn.active,.domain-categories .btn.active,
.domain-category-filters .btn.selected{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 20px -10px rgba(224,30,121,.6) !important;
}

/* ---- TLD pricing table ---- */
.domain-pricing,.tld-pricing-table,#domain-pricing,
table.domain-pricing,.domainchecker table.table{
  border:1px solid #ececf2 !important; border-radius:14px !important; overflow:hidden;
  box-shadow:0 20px 46px -34px rgba(20,20,28,.3) !important;
}
.domain-pricing thead > tr > th,.tld-pricing-table thead th,
#domain-pricing thead th,.domainchecker table.table thead > tr > th{
  background:#14141c !important; background-image:none !important;
  color:#fff !important; border:none !important; text-align:center !important;
  font-family:'Sora',sans-serif !important; font-weight:700 !important;
  padding:16px !important; font-size:14.5px !important;
}
.domain-pricing thead > tr > th:first-child{ text-align:left !important; }
.domain-pricing tbody > tr,.tld-pricing-table tbody tr,
.domainchecker table.table tbody > tr{ transition:background .15s ease; }
.domain-pricing tbody > tr:hover,.tld-pricing-table tbody tr:hover,
.domainchecker table.table tbody > tr:hover{ background:#faf5ff !important; }
.domain-pricing tbody td,.domainchecker table.table tbody > tr > td{
  vertical-align:middle !important; border-color:#f0f0f4 !important;
}
/* TLD name cell (.com, .net…) */
.domain-pricing .domain,.domain-pricing td:first-child,
.domainchecker table.table tbody > tr > td:first-child{
  font-family:'Sora',sans-serif !important; font-weight:700 !important;
  color:#14141c !important; font-size:16px !important;
}
/* prices */
.domain-pricing .price,.domain-pricing td .amount,
.domainchecker table.table tbody td{ text-align:center; }
.domain-pricing .price,.domain-pricing .registerprice{
  color:#7b2ff7 !important; font-family:'Sora',sans-serif !important; font-weight:700 !important;
}
/* HOT / SALE little tags next to TLDs -> brand */
.domain-pricing .label,.domain-pricing .badge,
.domainchecker .label-danger,.domainchecker td .label{
  border-radius:5px !important; font-family:'Sora',sans-serif !important;
  font-weight:800 !important; letter-spacing:.04em !important; font-size:10px !important;
  padding:3px 6px !important;
}
.domain-pricing .label-danger,.domainchecker .label-danger{
  background:#e01e79 !important; color:#fff !important;
}
.domain-pricing .label-success,.domainchecker .label-success{
  background:#12b886 !important; color:#fff !important;
}
@media(max-width:767px){
  .domain-checker-container,.domain-checker,#domain-checker{ padding:34px 20px !important; }
  .domain-checker-container::after{ display:none; }
}

/* ============================================================
   OVERRIDES v15 — review fixes:
   page gutters, logged-in header, account name, dropdowns,
   TLD pricing table + category pills (broadened selectors)
   ============================================================ */

/* ---- 1. Horizontal gutters (cart/domain pages use .without-padding = 0) ---- */
#main-body > .container,
#main-body > .container-fluid{
  padding-left:clamp(16px,4vw,40px) !important;
  padding-right:clamp(16px,4vw,40px) !important;
}
#main-body > .container-fluid.without-padding{
  max-width:1240px !important; margin-left:auto !important; margin-right:auto !important;
}
/* pull the row's negative margins back so nothing bleeds to the edge */
#main-body > .container-fluid.without-padding > .row{ margin-left:0 !important; margin-right:0 !important; }

/* ---- 2. Logged-in client-area menu bar (#main-menu) cleanup ---- */
#main-menu{ position:relative; z-index:60 !important; background:#fff !important; box-shadow:0 2px 12px -8px rgba(20,20,28,.35) !important; }
#main-menu .navbar-main,#main-menu .navbar-default{ margin-bottom:0 !important; border:none !important; border-radius:0 !important; background:#fff !important; }
#main-menu .container{ padding-left:clamp(16px,4vw,40px) !important; padding-right:clamp(16px,4vw,40px) !important; }
/* Finder tab now sticks to the LEFT (see v16); give this bar clearance so it
   sits in the gap above the menu row instead of overlapping it */
#header.cz-header:has(~ #main-menu) ~ #main-menu{ padding-top:34px !important; }
/* page content needs its own top breathing room under the menu bar */
#header.cz-header:has(~ #main-menu) ~ #main-body{ padding-top:26px !important; }

/* ---- 3. Account "Hello, {name}" dropdown — kill dark bg, make readable ---- */
#main-menu .navbar-right > li > a,
#main-menu .navbar-nav.navbar-right .dropdown-toggle,
#main-menu .navbar-right .dropdown > a,
#Secondary_Navbar .navbar-nav > li > a{
  background:transparent !important; background-image:none !important;
  color:#2a2a34 !important; font-weight:600 !important;
}
/* make the account/user pill a clean brand chip so the name pops */
#main-menu .navbar-right > li:last-child > a,
#main-menu .navbar-right > li.dropdown:last-child > a{
  display:inline-flex !important; align-items:center; gap:8px;
  background:#fff !important;
  border:1.5px solid #e6d9fb !important;
  border-radius:999px !important; padding:9px 18px !important;
  color:#4a1d8f !important; font-family:'Sora',sans-serif !important;
  font-weight:600 !important; font-size:14.5px !important; line-height:1 !important;
  box-shadow:0 2px 8px -4px rgba(123,47,247,.25) !important;
  outline:none !important; transition:all .18s ease !important;
}
#main-menu .navbar-right > li:last-child.open > a,
#main-menu .navbar-right > li:last-child > a:hover,
#main-menu .navbar-right > li:last-child > a:focus{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important; color:#fff !important;
  border-color:transparent !important;
  box-shadow:0 8px 20px -8px rgba(224,30,121,.5) !important; outline:none !important;
}
#main-menu .navbar-right > li:last-child .caret{ color:inherit !important; margin-left:2px; }

/* kill the dark background WHMCS paints behind the account item / its <li> */
#main-menu .navbar-right,
#main-menu .navbar-right > li,
#main-menu .navbar-right > li.dropdown,
#main-menu .navbar-right > li.open,
#main-menu .navbar-right > li.open > a,
#main-menu .navbar-nav > li.dropdown.open{
  background:transparent !important; background-image:none !important; box-shadow:none !important;
}

/* ---- Email-verification / warning notice bar -> soft red ---- */
#main-body .alert-warning,
.verification-banner,.email-verification,
.verifyEmailBanner,.email-verification-banner,
.alert.alert-warning,#verifyEmailBanner{
  background:#fdECEC !important; background-image:none !important;
  border:1px solid #f5c2c2 !important; border-left:4px solid #e01e79 !important;
  color:#8a1f1f !important; border-radius:12px !important;
}
#main-body .alert-warning a:not(.btn),.verification-banner a:not(.btn),.verifyEmailBanner a:not(.btn){ color:#c01553 !important; font-weight:600 !important; }
#main-body .alert-warning .fa,#main-body .alert-warning .fas,
.verification-banner .fa,.verification-banner .fas,
.verifyEmailBanner .fa,.verifyEmailBanner .fas{ color:#e01e79 !important; }

/* ---- 4. Dropdowns: lift menus above page content so they don't hide ---- */
#main-body{ position:relative; z-index:1; }
#main-menu .dropdown-menu,
.navbar-main .dropdown-menu,
.navbar-default .dropdown-menu{
  z-index:1200 !important; display:none;
  border:1px solid #e6e6ee !important; border-radius:12px !important;
  box-shadow:0 20px 44px -22px rgba(20,20,28,.45) !important; margin-top:6px !important;
  padding:6px !important;
}
#main-menu .dropdown.open > .dropdown-menu,
.navbar-main .dropdown.open > .dropdown-menu{ display:block !important; }
#main-menu .dropdown-menu > li > a{ border-radius:8px !important; padding:9px 14px !important; font-weight:600 !important; }
#main-menu .dropdown-menu > li > a:hover{ background:#faf5ff !important; color:#7b2ff7 !important; }

/* ---- 5. Category pills (broadened: bootstrap labels used as filters) ---- */
#main-body a.label,
#domainCategoryList a,#domainCategoryList .label,
.tld-categories a,.domain-categories a,.domain-pricing-categories a,
.domain-category-filters a,ul.domain-tld-categories a{
  display:inline-block; background:#f0f0f6 !important; background-image:none !important;
  color:#3a3a46 !important; border:1px solid #e6e6ee !important;
  border-radius:999px !important; padding:7px 15px !important; margin:0 !important;
  font-family:'Manrope',sans-serif !important; font-weight:600 !important; font-size:13.5px !important;
  box-shadow:none !important; transition:all .18s ease; text-decoration:none !important;
}
#main-body a.label:hover,#domainCategoryList a:hover,.tld-categories a:hover,.domain-categories a:hover{
  border-color:rgba(224,30,121,.45) !important; color:#e01e79 !important; background:#fff !important;
}
/* active category (was green) -> brand gradient */
#main-body a.label-success,#main-body a.label.active,
#domainCategoryList li.active a,#domainCategoryList a.active,
.tld-categories a.active,.domain-categories a.active,.domain-category-filters a.active{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  background-image:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important; border-color:transparent !important;
  box-shadow:0 8px 20px -10px rgba(224,30,121,.6) !important;
}
/* keep the small in-table HOT/SALE tags as compact tags, not big pills */
#main-body table .label,#main-body td .label,#main-body th .label{
  display:inline-block !important; padding:3px 6px !important; border-radius:5px !important;
  font-size:10px !important; font-weight:800 !important; letter-spacing:.04em !important;
  border:none !important; vertical-align:middle;
}
#main-body table .label-danger,#main-body td .label-danger{ background:#e01e79 !important; color:#fff !important; }
#main-body table .label-success,#main-body td .label-success{ background:#d99a12 !important; color:#fff !important; }

/* ---- 6. TLD pricing table (broadened: any main-body table) ---- */
#main-body table thead > tr > th{
  background:#14141c !important; background-image:none !important;
  color:#fff !important; border:none !important; border-bottom:none !important;
  font-family:'Sora',sans-serif !important; font-weight:700 !important;
  padding:15px 16px !important; text-align:center !important; vertical-align:middle !important;
}
#main-body table thead > tr > th:first-child{ text-align:left !important; }
#main-body table thead > tr > th a{ color:#fff !important; }
#main-body table.table{ border:1px solid #ececf2 !important; border-radius:14px !important; overflow:hidden; }
#main-body table tbody > tr{ transition:background .15s ease; }
#main-body table tbody > tr:hover{ background:#faf5ff !important; }
#main-body table tbody > tr > td{ vertical-align:middle !important; border-color:#f0f0f4 !important; }
/* first column = TLD name, in Sora */
#main-body table tbody > tr > td:first-child{
  font-family:'Sora',sans-serif !important; font-weight:700 !important; color:#14141c !important; font-size:15px !important;
}
/* price cells + accent */
#main-body table tbody > tr > td .price,
#main-body table tbody > tr > td strong{
  color:#7b2ff7 !important; font-family:'Sora',sans-serif !important; font-weight:700 !important;
}

/* ============================================================
   OVERRIDES v17 — vertical left-edge finder tab + single-line header
   (supersedes v16 tab placement)
   ============================================================ */

/* ---- Finder tab: vertical rail fixed to the LEFT edge of the viewport ---- */
.cz-header .cz-finder-tab{
  position:fixed !important;
  left:0 !important; right:auto !important;
  top:50% !important; bottom:auto !important;
  transform:translateY(-50%) rotate(180deg) !important;
  writing-mode:vertical-rl !important; text-orientation:mixed !important;
  padding:20px 11px !important; gap:10px !important;
  border-radius:0 !important;
  box-shadow:4px 0 22px -8px rgba(123,47,247,.55) !important;
  letter-spacing:.02em; z-index:1000 !important;
}
.cz-header .cz-finder-tab span{ transform:rotate(90deg); display:inline-block; }

/* ---- Logged-in ONLY: hide marketing top nav; client menu becomes the top nav ---- */
#header.cz-header.cz-loggedin .cz-nav{ display:none !important; }
#header.cz-header.cz-loggedin ~ #main-menu{ margin-top:0 !important; }

/* ============================================================
   OVERRIDES v20 — client menu bar height, right-float, header gap
   ============================================================ */
/* taller, comfortable second nav */
#main-menu .navbar-main,#main-menu .navbar-default,#main-menu .navbar{ min-height:64px !important; }
#main-menu .navbar-nav > li > a{
  padding-top:21px !important; padding-bottom:21px !important;
  line-height:22px !important; font-size:15px !important;
}
@media(min-width:992px){
  #main-menu .container{ display:flex !important; align-items:center; }
  #main-menu .navbar-collapse{ flex:1 1 auto; display:flex !important; align-items:center; width:100%; }
}

/* push language picker / account / logout to the RIGHT */
@media(min-width:992px){
  #main-menu .navbar-nav.navbar-right,
  #main-menu #Secondary_Navbar,
  #main-menu ul.navbar-right{ margin-left:auto !important; float:none !important; display:flex !important; align-items:center; }
  #main-menu .navbar-nav:first-child{ margin-right:auto; }
}

/* breathing room below the header so page content doesn't stick to it */
#main-body{ margin-top:0 !important; padding-top:40px !important; }
#header.cz-header.cz-loggedin ~ #main-body{ margin-top:0 !important; padding-top:40px !important; }
/* also pad the inner container in case #main-body padding is overridden by the theme */
#main-body > .container,
#main-body > .container-fluid{ padding-top:40px !important; }

/* remove the Free Domain Finder sticky tab on WHMCS pages */
.cz-header .cz-finder-tab{ display:none !important; }

/* tab is no longer overhanging the header, so remove the top clearance it forced */
#header.cz-header ~ #main-menu,
#header.cz-header ~ #home-banner,
#header.cz-header ~ #main-body,
#header.cz-header:has(~ #main-menu) ~ #main-menu,
#header.cz-header:has(~ #main-menu) ~ #main-body{ padding-top:0 !important; }
/* give page content its own modest top breathing room instead */
#main-body{ padding-top:24px !important; }

/* ---- Top header: keep everything on ONE line ---- */
.cz-header .cz-headbar{ flex-wrap:nowrap !important; gap:14px !important; }
.cz-header .cz-nav{ flex-wrap:nowrap !important; gap:2px !important; min-width:0; }
.cz-header .cz-nav a{ white-space:nowrap !important; padding:9px 11px !important; font-size:14.5px !important; }
.cz-header .cz-actions{ flex-wrap:nowrap !important; gap:8px !important; }
.cz-header .cz-actions a{ white-space:nowrap !important; }

/* below the desktop breakpoint, return the tab to a normal horizontal bar */
@media(max-width:991px){
  .cz-header .cz-finder-tab{
    position:static !important; transform:none !important;
    writing-mode:horizontal-tb !important; width:100% !important;
    justify-content:center; border-radius:12px !important; margin-top:8px;
    box-shadow:none !important; padding:11px 22px !important;
  }
  .cz-header .cz-finder-tab span{ transform:none; }
  .cz-header .cz-headbar{ flex-wrap:wrap !important; }
  .cz-header .cz-nav{ flex-wrap:wrap !important; }
}


/* ---------- WHMCS branding line ----------
   Hides "Powered by WHMCompleteSolution" wherever it sits in the page.
   NOTE: WHMCS only permits this on a branding-free licence. */
a[href*="whmcs.com"],
a[href*="whmcompletesolution"]{ display:none !important; }
p:has(> a[href*="whmcs.com"]),
div:has(> a[href*="whmcs.com"]),
li:has(> a[href*="whmcs.com"]),
small:has(> a[href*="whmcs.com"]),
span:has(> a[href*="whmcs.com"]){ display:none !important; }

/* ============================================================
   OVERRIDES v20 — contact.php full width
   ============================================================ */
#main-body:has(form[action*="contact.php"]) .main-content,
#main-body:has(#contactForm) .main-content{
  width:100% !important; max-width:1100px !important;
  float:none !important; margin:0 auto !important;
}
#main-body:has(form[action*="contact.php"]) .main-content > form,
#main-body:has(#contactForm) .main-content > form,
form[action*="contact.php"]{
  max-width:none !important; width:100% !important;
}
/* card shell around the form so the extra width reads as intentional */
form[action*="contact.php"]{
  background:#fff; border:1px solid #ececf2; border-radius:16px;
  padding:clamp(20px,3vw,34px) !important;
  box-shadow:0 18px 44px -34px rgba(20,20,40,.45);
}
/* two-column field grid on desktop; message + button span full width */
@media(min-width:768px){
  form[action*="contact.php"] > .form-group,
  form[action*="contact.php"] .row > [class*="col-"]{ margin-bottom:16px; }
  form[action*="contact.php"] .row{ display:flex; flex-wrap:wrap; }
  form[action*="contact.php"] .row > [class*="col-md-6"]{ width:50% !important; float:none !important; }
  form[action*="contact.php"] .row > [class*="col-md-12"]{ width:100% !important; float:none !important; }
}
form[action*="contact.php"] textarea.form-control{ min-height:170px !important; }
form[action*="contact.php"] .form-control{
  height:48px; border-radius:10px !important; border:1px solid #e2e2ec !important;
}
form[action*="contact.php"] textarea.form-control{ height:auto; }

/* ============================================================
   OVERRIDES v23 — domain search + TLD pricing table
   (cart.php?a=add&domain=register). Table rules are hung off
   #main-body, not #order-standard_cart, because WHMCS renders the
   TLD pricing block outside the order-form wrapper.
   ============================================================ */

/* left content no longer glued to the edge */
#main-body .main-content{ padding-left:18px !important; padding-right:18px !important; }
@media(max-width:767px){
  #main-body .main-content{ padding-left:14px !important; padding-right:14px !important; }
}

/* ---- TLD category links -> pills ---- */
#main-body .tld-categories,
#main-body #tldCategoriesNav,
#main-body .domain-pricing .nav-pills,
#main-body .domain-pricing ul.nav{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  padding:0 0 20px !important; margin:0 !important; list-style:none !important; border:0 !important;
}
#main-body .tld-categories > li,
#main-body #tldCategoriesNav > li,
#main-body .domain-pricing .nav-pills > li{ margin:0 !important; float:none !important; }
#main-body .tld-categories > li > a,
#main-body #tldCategoriesNav > li > a,
#main-body .domain-pricing .nav-pills > li > a{
  display:inline-block !important; padding:7px 13px !important;
  border-radius:999px !important; font-size:12.5px !important; font-weight:600 !important;
  background:#f2f2f7 !important; color:#3b3b52 !important;
  border:1px solid #e6e6ef !important; text-decoration:none !important;
  transition:background .18s,color .18s,border-color .18s;
}
#main-body .tld-categories > li > a:hover,
#main-body #tldCategoriesNav > li > a:hover,
#main-body .domain-pricing .nav-pills > li > a:hover{
  background:#ebe7fb !important; color:#4c2fb0 !important; border-color:#d8cffa !important;
}
#main-body .tld-categories > li.active > a,
#main-body #tldCategoriesNav > li.active > a,
#main-body .domain-pricing .nav-pills > li.active > a{
  background:#5b34d6 !important; color:#fff !important; border-color:#5b34d6 !important;
}

/* ---- tables in the main content area (incl. TLD pricing) ---- */
#main-body .main-content table.table,
#main-body table.domain-pricing,
#main-body #tldPricingTable{
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  background:#fff !important; border:1px solid #ececf2 !important;
  border-radius:14px !important; overflow:hidden !important;
  box-shadow:0 18px 44px -36px rgba(20,20,40,.4) !important;
  margin:0 0 24px !important;
}
#main-body .main-content table.table > thead > tr > th,
#main-body .main-content table.table > tr > th,
#main-body table.domain-pricing th{
  background:#f7f7fb !important; color:#2c2c40 !important;
  font-size:12.5px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.6px !important;
  text-align:center !important; vertical-align:middle !important;
  padding:16px 18px !important;
  border:0 !important; border-bottom:1px solid #e8e8f0 !important;
}
#main-body .main-content table.table > tbody > tr > td,
#main-body table.domain-pricing td{
  padding:14px 18px !important; text-align:center !important; vertical-align:middle !important;
  border:0 !important; border-bottom:1px solid #f0f0f6 !important;
  font-size:14.5px !important; color:#2f2f44 !important; background:transparent !important;
}
#main-body .main-content table.table > thead > tr > th:first-child,
#main-body .main-content table.table > tbody > tr > td:first-child{
  text-align:left !important; padding-left:26px !important;
}
#main-body .main-content table.table > tbody > tr > td:first-child{
  font-weight:700 !important; color:#1d1d2e !important;
}
#main-body .main-content table.table > tbody > tr:last-child > td{ border-bottom:0 !important; }
#main-body .main-content table.table > tbody > tr:nth-child(even) > td{ background:#fbfbfe !important; }
#main-body .main-content table.table > tbody > tr:hover > td{ background:#f6f3ff !important; }

/* cycle line under each price */
#main-body .main-content table.table td small,
#main-body .main-content table.table td .cycle{
  display:block !important; margin-top:3px !important;
  color:#8a8aa3 !important; font-size:12px !important; font-weight:500 !important;
}
/* Hot / Sale / New chips next to the TLD */
#main-body .main-content table.table td .label,
#main-body .main-content table.table td .badge{
  margin-left:8px !important; padding:3px 7px !important; border-radius:5px !important;
  font-size:10px !important; font-weight:700 !important; letter-spacing:.5px !important;
  vertical-align:middle !important;
}

/* scroll instead of squeeze on phones */
@media(max-width:767px){
  #main-body .table-responsive{ overflow-x:auto !important; border:0 !important; }
  #main-body .main-content table.table{ min-width:560px !important; }
  #main-body .main-content #invoiceIdSummary table.table,
  #main-body .main-content .invoice-summary table.table{ min-width:0 !important; width:100% !important; }
  #main-body .main-content table.table > thead > tr > th:first-child,
  #main-body .main-content table.table > tbody > tr > td:first-child{ padding-left:16px !important; }
}


/* ============================================================
   OVERRIDES v24 — TLD pricing table, tagged at runtime
   The tagging script at the end of footer.tpl adds .cz-tld-wrap /
   .cz-tld-table / .cz-tld-head / .cz-tld-cats, so these rules do not
   depend on WHMCS's own class names.
   ============================================================ */

.cz-tld-wrap{ padding:0 !important; margin:8px 0 40px !important; }

.cz-tld-head{
  margin:34px 0 16px !important; padding:0 !important;
  font-size:20px !important; font-weight:800 !important;
  color:#1d1d2e !important; letter-spacing:-.3px !important;
}

/* category pills */
.cz-tld-cats{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  padding:0 0 22px !important; margin:0 !important; list-style:none !important; border:0 !important;
}
.cz-tld-cats > li{ margin:0 !important; float:none !important; list-style:none !important; }
.cz-tld-cats > li > a, .cz-tld-cats > a{
  display:inline-block !important; padding:7px 14px !important;
  border-radius:999px !important; font-size:12.5px !important; font-weight:600 !important;
  background:#f2f2f7 !important; color:#3b3b52 !important;
  border:1px solid #e6e6ef !important; text-decoration:none !important;
  transition:background .18s,color .18s,border-color .18s;
}
.cz-tld-cats > li > a:hover, .cz-tld-cats > a:hover{
  background:#ebe7fb !important; color:#4c2fb0 !important; border-color:#d8cffa !important;
}
.cz-tld-cats > li.active > a, .cz-tld-cats > a.active{
  background:#5b34d6 !important; color:#fff !important; border-color:#5b34d6 !important;
}

/* the pricing table itself */
table.cz-tld-table{
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  background:#fff !important; border:1px solid #ececf2 !important;
  border-radius:14px !important; overflow:hidden !important;
  box-shadow:0 18px 44px -36px rgba(20,20,40,.4) !important;
  margin:0 !important; table-layout:auto !important;
}
table.cz-tld-table th{
  background:#f7f7fb !important; color:#2c2c40 !important;
  font-size:12px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.7px !important;
  text-align:center !important; vertical-align:middle !important;
  padding:16px 20px !important; white-space:nowrap !important;
  border:0 !important; border-bottom:1px solid #e8e8f0 !important;
}
table.cz-tld-table td{
  padding:15px 20px !important; text-align:center !important; vertical-align:middle !important;
  border:0 !important; border-bottom:1px solid #f1f1f7 !important;
  font-size:14.5px !important; color:#33334a !important; background:transparent !important;
}
table.cz-tld-table th:first-child,
table.cz-tld-table td:first-child{
  text-align:left !important; padding-left:28px !important; width:22% !important;
}
table.cz-tld-table td:first-child{
  font-weight:700 !important; color:#1d1d2e !important; font-size:15.5px !important;
}
table.cz-tld-table tr:last-child td{ border-bottom:0 !important; }
table.cz-tld-table tbody tr:nth-child(even) td{ background:#fbfbfe !important; }
table.cz-tld-table tbody tr:hover td{ background:#f5f2ff !important; }

/* "1 Year" / "2 Years" line under each price */
table.cz-tld-table td small,
table.cz-tld-table td span.cycle,
table.cz-tld-table td div small{
  display:block !important; margin-top:4px !important;
  color:#8a8aa3 !important; font-size:11.5px !important;
  font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important;
}

/* Hot / Sale / New chips beside the TLD */
table.cz-tld-table td .label,
table.cz-tld-table td .badge,
table.cz-tld-table td .promo{
  display:inline-block !important; margin-left:9px !important;
  padding:3px 8px !important; border-radius:5px !important;
  font-size:9.5px !important; font-weight:800 !important;
  letter-spacing:.7px !important; text-transform:uppercase !important;
  vertical-align:middle !important; line-height:1.4 !important;
}

/* horizontal scroll rather than a squeezed table on small screens */
.cz-tld-wrap .table-responsive,
.cz-tld-scroll{ overflow-x:auto !important; border:0 !important; -webkit-overflow-scrolling:touch; }
@media(max-width:767px){
  table.cz-tld-table{ min-width:600px !important; }
  table.cz-tld-table th{ padding:13px 14px !important; }
  table.cz-tld-table td{ padding:13px 14px !important; }
  table.cz-tld-table th:first-child,
  table.cz-tld-table td:first-child{ padding-left:16px !important; }
  .cz-tld-head{ font-size:18px !important; }
}


/* ============================================================
   OVERRIDES v25 — .domain-pricing (confirmed class on the live page)
   Covers both cases: .domain-pricing as the wrapper AND as the table.
   ============================================================ */

/* wrapper spacing */
.domain-pricing{ margin:8px 0 40px !important; }
#main-body .domain-pricing {
    padding-left: 17px !important;
    padding-right: 17px !important;
    padding-top: 15px !important;
}

/* headings inside the block */
.domain-pricing h1,.domain-pricing h2,.domain-pricing h3,
.domain-pricing h4,.domain-pricing h5{
  margin:0 0 16px !important; padding:0 !important;
  font-size:20px !important; font-weight:800 !important;
  color:#1d1d2e !important; letter-spacing:-.3px !important;
}

/* category links -> pills */
.domain-pricing ul,
.domain-pricing ol{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  padding:0 0 22px !important; margin:0 !important; list-style:none !important; border:0 !important;
}
.domain-pricing ul > li,
.domain-pricing ol > li{ margin:0 !important; float:none !important; list-style:none !important; }
.domain-pricing ul > li > a,
.domain-pricing ol > li > a{
  display:inline-block !important; padding:7px 14px !important;
  border-radius:999px !important; font-size:12.5px !important; font-weight:600 !important;
  background:#f2f2f7 !important; color:#3b3b52 !important;
  border:1px solid #e6e6ef !important; text-decoration:none !important;
  transition:background .18s,color .18s,border-color .18s;
}
.domain-pricing ul > li > a:hover,
.domain-pricing ol > li > a:hover{
  background:#ebe7fb !important; color:#4c2fb0 !important; border-color:#d8cffa !important;
}
.domain-pricing ul > li.active > a,
.domain-pricing ol > li.active > a,
.domain-pricing ul > li > a.active{
  background:#5b34d6 !important; color:#fff !important; border-color:#5b34d6 !important;
}

/* the table — whether .domain-pricing IS the table or wraps it */
table.domain-pricing,
.domain-pricing table{
  width:100% !important; border-collapse:separate !important; border-spacing:0 !important;
  background:#fff !important; border:1px solid #ececf2 !important;
  border-radius:14px !important; overflow:hidden !important;
  box-shadow:0 18px 44px -36px rgba(20,20,40,.4) !important;
  margin:0 !important;
}
table.domain-pricing th,
.domain-pricing table th{
  background:#f7f7fb !important; color:#2c2c40 !important;
  font-size:12px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.7px !important;
  text-align:center !important; vertical-align:middle !important;
  padding:16px 20px !important; white-space:nowrap !important;
  border:0 !important; border-bottom:1px solid #e8e8f0 !important;
}
table.domain-pricing td,
.domain-pricing table td{
  padding:15px 20px !important; text-align:center !important; vertical-align:middle !important;
  border:0 !important; border-bottom:1px solid #f1f1f7 !important;
  font-size:14.5px !important; color:#33334a !important; background:transparent !important;
}
table.domain-pricing th:first-child,
table.domain-pricing td:first-child,
.domain-pricing table th:first-child,
.domain-pricing table td:first-child{
  text-align:left !important; padding-left:28px !important; width:22% !important;
}
table.domain-pricing td:first-child,
.domain-pricing table td:first-child{
  font-weight:700 !important; color:#1d1d2e !important; font-size:15.5px !important;
}
table.domain-pricing tbody tr:last-child td,
.domain-pricing table tbody tr:last-child td{ border-bottom:0 !important; }
table.domain-pricing tbody tr:nth-child(even) td,
.domain-pricing table tbody tr:nth-child(even) td{ background:#fbfbfe !important; }
table.domain-pricing tbody tr:hover td,
.domain-pricing table tbody tr:hover td{ background:#f5f2ff !important; }

/* "1 Year" / "2 Years" line under each price */
table.domain-pricing td small,
.domain-pricing table td small,
.domain-pricing table td .cycle{
  display:block !important; margin-top:4px !important;
  color:#8a8aa3 !important; font-size:11.5px !important;
  font-weight:500 !important; text-transform:none !important; letter-spacing:0 !important;
}

/* Hot / Sale / New chips beside the TLD */
table.domain-pricing td .label,
table.domain-pricing td .badge,
.domain-pricing table td .label,
.domain-pricing table td .badge{
  display:inline-block !important; margin-left:9px !important;
  padding:3px 8px !important; border-radius:5px !important;
  font-size:9.5px !important; font-weight:800 !important;
  letter-spacing:.7px !important; text-transform:uppercase !important;
  vertical-align:middle !important; line-height:1.4 !important;
}

@media(max-width:767px){
  .domain-pricing .table-responsive{ overflow-x:auto !important; border:0 !important; }
  table.domain-pricing,
  .domain-pricing table{ min-width:600px !important; }
  table.domain-pricing th,.domain-pricing table th,
  table.domain-pricing td,.domain-pricing table td{ padding:13px 14px !important; }
  table.domain-pricing th:first-child,.domain-pricing table th:first-child,
  table.domain-pricing td:first-child,.domain-pricing table td:first-child{ padding-left:16px !important; }
}


/* ============================================================
   OVERRIDES v26 — brand colouring for the TLD pricing table.
   Prefixed with #main-body .domain-pricing throughout: that is the
   selector confirmed to match on the live page.
   ============================================================ */

/* ---- section heading ---- */
#main-body .domain-pricing h1,
#main-body .domain-pricing h2,
#main-body .domain-pricing h3,
#main-body .domain-pricing h4,
#main-body .domain-pricing h5{
  margin:0 0 18px !important; padding:0 !important;
  font-size:20px !important; font-weight:800 !important;
  color:#1d1d2e !important; letter-spacing:-.3px !important;
}

/* ---- category links -> brand pills ---- */
#main-body .domain-pricing ul,
#main-body .domain-pricing ol{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  padding:0 0 24px !important; margin:0 !important;
  list-style:none !important; border:0 !important;
}
#main-body .domain-pricing ul > li,
#main-body .domain-pricing ol > li{
  margin:0 !important; float:none !important; list-style:none !important;
}
#main-body .domain-pricing ul > li > a,
#main-body .domain-pricing ol > li > a{
  display:inline-block !important; padding:7px 14px !important;
  border-radius:999px !important;
  font-size:12.5px !important; font-weight:600 !important;
  background:#f3f1fb !important; color:#4a4a66 !important;
  border:1px solid #e6e1f7 !important; text-decoration:none !important;
  transition:background .18s, color .18s, border-color .18s !important;
}
#main-body .domain-pricing ul > li > a:hover,
#main-body .domain-pricing ol > li > a:hover{
  background:#e8e2fc !important; color:#4c2fb0 !important; border-color:#d3c8f8 !important;
}
#main-body .domain-pricing ul > li.active > a,
#main-body .domain-pricing ul > li > a.active,
#main-body .domain-pricing ol > li.active > a{
  background:#5b34d6 !important; color:#fff !important;
  border-color:#5b34d6 !important;
  box-shadow:0 6px 16px -8px rgba(91,52,214,.7) !important;
}

/* ---- table shell ---- */
#main-body .domain-pricing table{
  width:100% !important;
  border-collapse:separate !important; border-spacing:0 !important;
  background:#fff !important;
  border:1px solid #ebe7f7 !important;
  border-radius:14px !important; overflow:hidden !important;
  box-shadow:0 20px 46px -34px rgba(45,25,105,.42) !important;
  margin:0 !important;
}

/* ---- header row: brand purple ---- */
#main-body .domain-pricing table thead th,
#main-body .domain-pricing table th{
  background:#5b34d6 !important;
  color:#fff !important;
  font-size:11.5px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.9px !important;
  text-align:center !important; vertical-align:middle !important;
  padding:16px 20px !important; white-space:nowrap !important;
  border:0 !important;
}

/* ---- body cells ---- */
#main-body .domain-pricing table td{
  padding:15px 20px !important;
  text-align:center !important; vertical-align:middle !important;
  border:0 !important; border-bottom:1px solid #f2effa !important;
  font-size:14.5px !important; font-weight:600 !important;
  color:#33334a !important; background:transparent !important;
}
#main-body .domain-pricing table tbody tr:last-child td{ border-bottom:0 !important; }
#main-body .domain-pricing table tbody tr:nth-child(even) td{ background:#fbfaff !important; }
#main-body .domain-pricing table tbody tr:hover td{ background:#f4f0ff !important; }

/* ---- first column: the TLD ---- */
#main-body .domain-pricing table th:first-child,
#main-body .domain-pricing table td:first-child{
  text-align:left !important; padding-left:26px !important;
}
#main-body .domain-pricing table td:first-child{
  font-size:16px !important; font-weight:800 !important;
  color:#5b34d6 !important; letter-spacing:-.2px !important;
}

/* ---- "1 Year" / "2 Years" under each price ---- */
#main-body .domain-pricing table td small,
#main-body .domain-pricing table td .cycle{
  display:block !important; margin-top:4px !important;
  color:#9494ad !important; font-size:11.5px !important; font-weight:500 !important;
  text-transform:none !important; letter-spacing:0 !important;
}

/* ---- Hot / Sale / New chips ---- */
#main-body .domain-pricing table td .label,
#main-body .domain-pricing table td .badge{
  display:inline-block !important; margin-left:9px !important;
  padding:3px 8px !important; border-radius:5px !important;
  font-size:9.5px !important; font-weight:800 !important;
  letter-spacing:.7px !important; text-transform:uppercase !important;
  vertical-align:middle !important; line-height:1.4 !important;
  background:#ede8fc !important; color:#4c2fb0 !important;
  border:0 !important; text-shadow:none !important;
}
#main-body .domain-pricing table td .label-danger,
#main-body .domain-pricing table td .badge-danger,
#main-body .domain-pricing table td .label-important{
  background:#fdecec !important; color:#c3352f !important;
}
#main-body .domain-pricing table td .label-success,
#main-body .domain-pricing table td .badge-success{
  background:#e8f7ee !important; color:#1d7a45 !important;
}
#main-body .domain-pricing table td .label-info,
#main-body .domain-pricing table td .badge-info,
#main-body .domain-pricing table td .label-primary{
  background:#e7f1fd !important; color:#1f5fa8 !important;
}
#main-body .domain-pricing table td .label-warning,
#main-body .domain-pricing table td .badge-warning{
  background:#fdf3e3 !important; color:#9a6410 !important;
}

/* ---- small screens ---- */
@media(max-width:767px){
  #main-body .domain-pricing{ padding-left:12px !important; padding-right:12px !important; }
  #main-body .domain-pricing .table-responsive{ overflow-x:auto !important; border:0 !important; }
  #main-body .domain-pricing table{ min-width:600px !important; }
  #main-body .domain-pricing table th,
  #main-body .domain-pricing table td{ padding:13px 14px !important; }
  #main-body .domain-pricing table th:first-child,
  #main-body .domain-pricing table td:first-child{ padding-left:16px !important; }
}


/* ============================================================
   OVERRIDES v27 — TLD pricing block, real markup.
   This block is NOT a <table>: it is Bootstrap div rows
   (.tld-filters / .tld-pricing-header / .tld-row). Earlier "table"
   rules never matched — these are the live class names.
   ============================================================ */

/* ---- section heading ---- */
#main-body .domain-pricing h4,
#main-body .domain-pricing h4.font-size-18{
  margin:0 0 16px !important; padding:0 !important;
  font-size:20px !important; font-weight:800 !important;
  color:#1d1d2e !important; letter-spacing:-.3px !important;
}

/* ---- category filter pills ---- */
#main-body .domain-pricing .tld-filters{
  display:flex !important; flex-wrap:wrap !important; gap:8px !important;
  margin:0 0 22px !important; padding:0 !important;
}
#main-body .domain-pricing .tld-filters a.badge{
  display:inline-block !important;
  padding:7px 14px !important; border-radius:999px !important;
  font-size:12.5px !important; font-weight:600 !important;
  letter-spacing:0 !important; text-transform:none !important;
  background:#f3f1fb !important; color:#4a4a66 !important;
  border:1px solid #e6e1f7 !important;
  text-decoration:none !important; text-shadow:none !important;
  transition:background .18s, color .18s, border-color .18s !important;
}
#main-body .domain-pricing .tld-filters a.badge:hover{
  background:#e8e2fc !important; color:#4c2fb0 !important; border-color:#d3c8f8 !important;
}
/* WHMCS marks the active category with .badge-success */
#main-body .domain-pricing .tld-filters a.badge.badge-success{
  background:#5b34d6 !important; color:#fff !important;
  border-color:#5b34d6 !important;
  box-shadow:0 6px 16px -8px rgba(91,52,214,.75) !important;
}

/* ---- card shell around the grid ---- */
#main-body .domain-pricing .bg-white{
  background:#fff !important;
  border:1px solid #ebe7f7 !important;
  border-radius:14px !important;
  overflow:hidden !important;
  box-shadow:0 20px 46px -34px rgba(45,25,105,.42) !important;
}

/* ---- header strip: brand purple ---- */
#main-body .domain-pricing .tld-pricing-header{
  background:#5b34d6 !important;
  margin:0 !important;
  border:0 !important;
  align-items:center !important;
}
#main-body .domain-pricing .tld-pricing-header,
#main-body .domain-pricing .tld-pricing-header > div,
#main-body .domain-pricing .tld-pricing-header .row > div{
  color:#fff !important;
  font-size:11.5px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.9px !important;
  border:0 !important; box-shadow:none !important;
}
#main-body .domain-pricing .tld-pricing-header > div{ padding:15px 0 !important; }
#main-body .domain-pricing .tld-pricing-header .tld-column{
  text-align:left !important; padding-left:26px !important;
}

/* ---- data rows ---- */
#main-body .domain-pricing .tld-row{
  margin:0 !important;
  border-bottom:1px solid #f2effa !important;
  transition:background .15s !important;
}
#main-body .domain-pricing .tld-row:last-child{ border-bottom:0 !important; }
#main-body .domain-pricing .tld-row.highlighted{ background:#fbfaff !important; }
#main-body .domain-pricing .tld-row:hover{ background:#f4f0ff !important; }

/* the .com / .net cell */
#main-body .domain-pricing .tld-row .two-row-center{
  padding:16px 0 16px 26px !important;
  border:0 !important;
}
#main-body .domain-pricing .tld-row .two-row-center strong{
  font-size:16px !important; font-weight:800 !important;
  color:#5b34d6 !important; letter-spacing:-.2px !important;
}

/* price cells — the theme draws a dark divider on these, remove it */
#main-body .domain-pricing .tld-row .col-md-8 > .row{
  margin:0 !important;
}
#main-body .domain-pricing .tld-row .col-md-8 > .row > div{
  padding:16px 10px !important;
  border:0 !important; box-shadow:none !important;
  font-size:14.5px !important; font-weight:600 !important;
  color:#33334a !important; line-height:1.35 !important;
}
#main-body .domain-pricing .tld-row small{
  display:block !important; margin-top:3px !important;
  color:#9494ad !important; font-size:11.5px !important; font-weight:500 !important;
}

/* ---- Hot / Sale / New chips ---- */
#main-body .domain-pricing .tld-sale-group{
  display:inline-block !important;
  padding:3px 8px !important; border-radius:5px !important;
  font-size:9.5px !important; font-weight:800 !important;
  letter-spacing:.7px !important; text-transform:uppercase !important;
  line-height:1.4 !important; vertical-align:middle !important;
  border:0 !important; text-shadow:none !important;
  background:#ede8fc !important; color:#4c2fb0 !important;
}
#main-body .domain-pricing .tld-sale-group-hot{
  background:#fdecec !important; color:#c3352f !important;
}
#main-body .domain-pricing .tld-sale-group-sale{
  background:#fdf3e3 !important; color:#8a5a0c !important;
}
#main-body .domain-pricing .tld-sale-group-new{
  background:#e8f7ee !important; color:#1d7a45 !important;
}

/* ---- small screens ---- */
@media(max-width:767px){
  #main-body .domain-pricing .tld-pricing-header{ display:none !important; }
  #main-body .domain-pricing .tld-row{ padding:6px 0 !important; }
  #main-body .domain-pricing .tld-row .two-row-center{
    padding:12px 0 4px 16px !important;
  }
  #main-body .domain-pricing .tld-row .col-md-8 > .row > div{
    padding:8px 6px 12px !important; font-size:13.5px !important;
  }
}


/* ============================================================
   OVERRIDES v28 — tighter rows + corrected header strip.
   Supersedes the header/padding rules in v27.
   ============================================================ */

/* ---- header strip: pad only the leaf cells, never the col wrappers ---- */
#main-body .domain-pricing .tld-pricing-header{
  background:#5b34d6 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
  display:flex !important; flex-wrap:nowrap !important; align-items:stretch !important;
}
#main-body .domain-pricing .tld-pricing-header > div{
  padding:0 !important; margin:0 !important; border:0 !important;
  display:flex !important; align-items:center !important;
}
#main-body .domain-pricing .tld-pricing-header > .col-md-8{ display:block !important; }
#main-body .domain-pricing .tld-pricing-header .row{
  margin:0 !important; display:flex !important; flex-wrap:nowrap !important; width:100% !important;
}
#main-body .domain-pricing .tld-pricing-header .tld-column{
  padding:12px 0 12px 26px !important;
  justify-content:flex-start !important; text-align:left !important;
}
#main-body .domain-pricing .tld-pricing-header .row > div{
  padding:12px 8px !important; text-align:center !important;
}
#main-body .domain-pricing .tld-pricing-header,
#main-body .domain-pricing .tld-pricing-header > div,
#main-body .domain-pricing .tld-pricing-header .row > div{
  color:#fff !important;
  font-size:11px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.9px !important;
  line-height:1.2 !important;
  border:0 !important; box-shadow:none !important; background:transparent !important;
}
#main-body .domain-pricing .tld-pricing-header{ background:#5b34d6 !important; }

/* ---- shorter data rows ---- */
#main-body .domain-pricing .tld-row .two-row-center{
  padding:9px 0 9px 26px !important;
}
#main-body .domain-pricing .tld-row .col-md-8 > .row > div{
  padding:9px 8px !important;
  font-size:14px !important; line-height:1.3 !important;
}
#main-body .domain-pricing .tld-row .two-row-center strong{ font-size:15px !important; }
#main-body .domain-pricing .tld-row small{
  margin-top:1px !important; font-size:11px !important;
}

@media(max-width:767px){
  #main-body .domain-pricing .tld-row .two-row-center{ padding:10px 0 2px 16px !important; }
  #main-body .domain-pricing .tld-row .col-md-8 > .row > div{ padding:4px 6px 10px !important; }
}


/* ============================================================
   OVERRIDES v29 — CORRECTIVE. Undoes the layout-affecting rules
   from v23 and v28 that broke the wider WHMCS layout:
     - global padding on #main-body .main-content  (v23)
     - forced display:flex on the TLD header row   (v28)
   The TLD block keeps its colours; Bootstrap handles the grid.
   ============================================================ */

/* v23: stop touching the main content column site-wide */
#main-body .main-content{
  padding-left:0 !important; padding-right:0 !important;
}

/* v28: hand the header grid back to Bootstrap */
#main-body .domain-pricing .tld-pricing-header{
  display:block !important; flex-wrap:initial !important; align-items:initial !important;
  background:#5b34d6 !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
#main-body .domain-pricing .tld-pricing-header > div{
  display:block !important; align-items:initial !important;
  padding:0 !important; margin:0 !important; border:0 !important;
}
#main-body .domain-pricing .tld-pricing-header .row{
  display:flex !important; flex-wrap:nowrap !important;
  margin:0 !important; width:auto !important;
}
#main-body .domain-pricing .tld-pricing-header .tld-column{
  padding:12px 0 12px 26px !important; text-align:left !important;
}
#main-body .domain-pricing .tld-pricing-header .row > div{
  padding:12px 8px !important; text-align:center !important;
}

/* v28/v29: REMOVED — display:flex here overrode WHMCS's inline
   style="display:none" on filtered-out rows, rendering every TLD.
   Row spacing/colour now lives in the v30 block below. */


/* ============================================================
   OVERRIDES v30 — CORRECTIVE, and the important one.
   Two bugs fixed:
     1. v29 forced display:flex on .tld-row, which overrode the
        inline style="display:none" WHMCS puts on rows outside the
        selected category — every TLD was rendering. No rule in here
        may ever set the display property on .tld-row.
     2. The purple header band only covered the Domain column,
        because the theme is Bootstrap 3 (floated columns) and the
        parent's background could not be relied on. The purple is
        now painted on the header cells themselves.
   ============================================================ */

/* ---- header: paint the cells, leave the grid alone ---- */
#main-body .domain-pricing .tld-pricing-header{
  display:block !important;
  background:#5b34d6 !important;
  overflow:hidden !important;
  margin:0 !important; padding:0 !important; border:0 !important;
}
#main-body .domain-pricing .tld-pricing-header > div,
#main-body .domain-pricing .tld-pricing-header .row,
#main-body .domain-pricing .tld-pricing-header .row > div{
  background:#5b34d6 !important;
  color:#fff !important;
  font-size:11px !important; font-weight:700 !important;
  text-transform:uppercase !important; letter-spacing:.9px !important;
  line-height:1.2 !important;
  border:0 !important; box-shadow:none !important;
  margin:0 !important;
}
#main-body .domain-pricing .tld-pricing-header > div{ padding:0 !important; }
#main-body .domain-pricing .tld-pricing-header .tld-column{
  padding:12px 0 12px 26px !important; text-align:left !important;
}
#main-body .domain-pricing .tld-pricing-header .row > div{
  padding:12px 8px !important; text-align:center !important;
}

/* ---- rows: never touch display, only spacing and colour ---- */
#main-body .domain-pricing .tld-row{
  margin:0 !important;
  border-bottom:1px solid #f2effa !important;
}
#main-body .domain-pricing .tld-row.highlighted{ background:#fbfaff !important; }
#main-body .domain-pricing .tld-row:hover{ background:#f4f0ff !important; }

#main-body .domain-pricing .tld-row .two-row-center{
  display:block !important;
  padding:11px 0 11px 26px !important;
  border:0 !important;
}
#main-body .domain-pricing .tld-row .two-row-center strong{
  display:inline-block !important; vertical-align:middle !important;
  font-size:15px !important; font-weight:800 !important;
  color:#5b34d6 !important; letter-spacing:-.2px !important;
}
#main-body .domain-pricing .tld-row .tld-sale-group{
  vertical-align:middle !important; margin-left:8px !important;
}

#main-body .domain-pricing .tld-row .col-md-8 > .row{ margin:0 !important; }
#main-body .domain-pricing .tld-row .col-md-8 > .row > div{
  padding:11px 8px !important; border:0 !important; box-shadow:none !important;
  font-size:14px !important; font-weight:600 !important;
  color:#33334a !important; line-height:1.3 !important;
}

@media(max-width:767px){
  #main-body .domain-pricing .tld-row .two-row-center{ padding:10px 0 2px 16px !important; }
  #main-body .domain-pricing .tld-row .col-md-8 > .row > div{ padding:4px 6px 10px !important; }
}


/* ============================================================
   OVERRIDES v31 — <select> controls styled to match the theme.
   select2-managed selects are excluded so WHMCS's own widgets
   (country pickers, TLD pickers) keep working.
   ============================================================ */

#main-body select:not(.select2-hidden-accessible),
#main-body select.form-control:not(.select2-hidden-accessible),
.modal select:not(.select2-hidden-accessible),
.cz-footer select{
  -webkit-appearance:none !important;
  -moz-appearance:none !important;
  appearance:none !important;
  height:44px !important;
  padding:0 42px 0 14px !important;
  border:1px solid #e2e2ec !important;
  border-radius:10px !important;
  background-color:#fff !important;
  background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b6b85' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat:no-repeat !important;
  background-position:right 14px center !important;
  background-size:13px 13px !important;
  font-size:14px !important;
  font-weight:500 !important;
  color:#2f2f44 !important;
  line-height:44px !important;
  box-shadow:none !important;
  text-shadow:none !important;
  cursor:pointer !important;
  transition:border-color .18s, box-shadow .18s !important;
}

#main-body select:not(.select2-hidden-accessible):hover,
.modal select:not(.select2-hidden-accessible):hover{
  border-color:#d3cbf2 !important;
}

#main-body select:not(.select2-hidden-accessible):focus,
.modal select:not(.select2-hidden-accessible):focus{
  outline:0 !important;
  border-color:#5b34d6 !important;
  box-shadow:0 0 0 3px rgba(91,52,214,.14) !important;
}

#main-body select:disabled,
.modal select:disabled{
  background-color:#f6f6fa !important;
  color:#9a9ab0 !important;
  cursor:not-allowed !important;
  opacity:1 !important;
}

/* multi-selects and sized selects keep their natural height */
#main-body select[multiple],
#main-body select[size]:not([size="1"]),
.modal select[multiple]{
  height:auto !important;
  line-height:1.5 !important;
  padding:10px 12px !important;
  background-image:none !important;
}

/* small variant used in toolbars / table filters */
#main-body select.input-sm,
#main-body select.form-control-sm{
  height:38px !important; line-height:38px !important;
  font-size:13px !important;
  padding:0 36px 0 12px !important;
  background-position:right 12px center !important;
}

/* the option list itself — as far as browsers allow */
#main-body select option,
.modal select option{
  color:#2f2f44 !important;
  background:#fff !important;
  padding:8px 10px !important;
}

/* inline select inside an input group keeps square inner corners */
#main-body .input-group select:not(.select2-hidden-accessible){
  border-radius:0 10px 10px 0 !important;
}
#main-body .input-group select:not(.select2-hidden-accessible):first-child{
  border-radius:10px 0 0 10px !important;
}

/* ---------- Invoice page: pay button + back link ---------- */
.payment-btn-container{
  margin:24px 0 8px !important;
  text-align:center !important;
}
.payment-btn-container .btn,
.payment-btn-container input[type="submit"],
.payment-btn-container button,
.payment-btn-container .btn-sm,
#btnPayNow,
#btnPayNow.btn-sm,
#frmPayment input[type="submit"],
#frmPayment button[type="submit"],
#btnSubmitPayment{
  display:inline-block !important;
  min-width:220px !important;
  padding:16px 40px !important;
  height:auto !important;
  font-size:17px !important;
  font-weight:700 !important;
  line-height:1.2 !important;
  border:none !important;
  border-radius:12px !important;
  background:linear-gradient(120deg,#16a34a,#0f8f5f) !important;
  color:#fff !important;
  box-shadow:0 10px 24px -12px rgba(22,163,74,.6) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
.payment-btn-container .btn:hover,
.payment-btn-container input[type="submit"]:hover,
.payment-btn-container button:hover,
#btnPayNow:hover,
#btnPayNow.btn-sm:hover,
#btnSubmitPayment:hover,
#frmPayment input[type="submit"]:hover,
#frmPayment button[type="submit"]:hover{
  transform:translateY(-2px) !important;
  box-shadow:0 16px 30px -12px rgba(22,163,74,.65) !important;
  color:#fff !important;
}

/* "Back to Client Area" link under the invoice */
#main-body > .text-center.hidden-print,
#main-body > div > .text-center.hidden-print{
  margin:28px 0 36px !important;
}
#main-body .text-center.hidden-print > a[href*="clientarea"]:only-child,
.invoice-back-link{
  display:inline-block !important;
  margin:0 !important;
  padding:14px 32px !important;
  font-size:16px !important;
  font-weight:600 !important;
  line-height:1.2 !important;
  text-decoration:none !important;
  border-radius:12px !important;
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important;
  box-shadow:0 10px 24px -12px rgba(123,47,247,.55) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#main-body .text-center.hidden-print > a[href*="clientarea"]:only-child:hover,
.invoice-back-link:hover{
  color:#fff !important;
  transform:translateY(-2px) !important;
  box-shadow:0 16px 30px -12px rgba(224,30,121,.6) !important;
}

/* ============================================================
   Invoice checkout / payment page (index.php/invoice/*/pay)
   ============================================================ */

/* hide legacy card fields WHMCS still renders */
#frmPayment .form-group:has(#inputCardStart),
#frmPayment .form-group:has(#inputIssueNum),
#frmPayment .form-group.cz-hidden-field{
  display:none !important;
}
#inputCardStart,#inputIssueNum,
label[for="inputCardStart"],label[for="inputIssueNum"]{ display:none !important; }

#frmPayment{ margin:8px 0 40px !important; }

/* left column = payment form card, right column = summary card */
#frmPayment #paymentGatewayInput,
#frmPayment #billingAddressChoice,
#frmPayment #newBillingAddress,
#frmPayment #inputDescriptionContainer{
  background:transparent !important;
}
#frmPayment > .row > .col-md-7{
  background:#fff !important;
  border:1px solid #eceaf5 !important;
  border-radius:16px !important;
  padding:26px 26px 10px !important;
  box-shadow:0 10px 30px -22px rgba(45,25,90,.35) !important;
}
#frmPayment > .row > .col-md-5 .invoice-summary{
  background:#fff !important;
  border:1px solid #eceaf5 !important;
  border-radius:16px !important;
  padding:26px 24px 24px !important;
  min-height:340px !important;
  box-shadow:0 10px 30px -22px rgba(45,25,90,.35) !important;
}
@media (min-width:992px){
  #frmPayment > .row{ display:flex !important; flex-wrap:wrap !important; gap:24px !important; }
  #frmPayment > .row > .col-md-7{ flex:1 1 58% !important; width:auto !important; max-width:none !important; float:none !important; }
  #frmPayment > .row > .col-md-5{ flex:1 1 34% !important; width:auto !important; max-width:none !important; float:none !important; padding:0 !important; }
}

/* form rows */
#frmPayment .form-group{
  margin-bottom:18px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  margin-left:0 !important; margin-right:0 !important;
}
#frmPayment .form-group > label.control-label,
#frmPayment .form-group > .col-sm-4.control-label{
  flex:0 0 190px !important;
  max-width:190px !important;
  width:auto !important;
  text-align:left !important;
  padding:0 14px 0 0 !important;
  font-family:'Manrope',sans-serif !important;
  font-size:14px !important; font-weight:600 !important;
  color:#3a3a52 !important;
  line-height:1.35 !important;
}
#frmPayment .form-group > div[class*="col-"]{
  flex:1 1 240px !important;
  max-width:none !important;
  width:auto !important;
  padding:0 !important;
  min-width:0 !important;
}
/* empty helper columns collapse */
#frmPayment .form-group > div[class*="col-"]:empty{ display:none !important; }

#frmPayment .form-control,
#frmPayment .StripeElement{
  width:100% !important;
  min-height:46px !important;
  height:auto !important;
  border:1px solid #e3e0f0 !important;
  border-radius:10px !important;
  background:#fff !important;
  font-size:15px !important;
  box-shadow:none !important;
}
#frmPayment .form-control{ padding:12px 14px !important; }
#frmPayment .StripeElement{
  display:block !important;
  padding:13px 14px !important;
  line-height:normal !important;
  overflow:visible !important;
}
#frmPayment .StripeElement > .__PrivateStripeElement,
#frmPayment .StripeElement > div{
  width:100% !important; min-width:100% !important; display:block !important;
}
#frmPayment .StripeElement iframe{ width:100% !important; min-width:100% !important; }
/* phone input: leave room for the country/dial-code flag */
#frmPayment #inputPhone{ padding:12px 14px 12px 92px !important; }
#frmPayment .intl-tel-input .flag-container{ z-index:3 !important; }
#frmPayment .intl-tel-input .selected-flag{ padding:0 8px 0 12px !important; }
#frmPayment .intl-tel-input .country-list{ z-index:20 !important; max-height:240px !important; }
#frmPayment .form-control:focus,
#frmPayment .StripeElement--focus{
  border-color:#7b2ff7 !important;
  box-shadow:0 0 0 3px rgba(123,47,247,.12) !important;
}
#frmPayment .form-group.has-error .form-control,
#frmPayment .StripeElement--invalid{ border-color:#e0344b !important; }

/* payment-method + billing address radio blocks */
#frmPayment .paymethod-info,
#frmPayment #billingAddressChoice .radio-inline{
  background:#faf9ff !important;
  border:1px solid #eceaf5 !important;
  border-radius:12px !important;
  padding:12px 14px !important;
  margin:0 !important;
  display:block !important;
  font-size:14.5px !important;
  line-height:1.55 !important;
}
#frmPayment #billingAddressChoice .radio-inline{ margin-bottom:10px !important; padding-left:14px !important; }
#frmPayment .paymethod-info label,
#frmPayment #billingAddressChoice .radio-inline{
  display:flex !important; flex-wrap:wrap !important;
  align-items:flex-start !important; gap:4px 10px !important;
}
#frmPayment .iradio_square-blue,
#frmPayment .paymethod-info .iradio_square-blue,
#frmPayment #billingAddressChoice .iradio_square-blue{
  flex:0 0 20px !important; width:20px !important; height:20px !important;
  margin:2px 0 0 !important; position:relative !important; display:block !important;
}
#frmPayment #billingAddressChoice .radio-inline > *:not(.iradio_square-blue){ flex:0 1 auto !important; }
#frmPayment #billingAddressChoice .radio-inline .name{ flex:1 1 100% !important; }
#frmPayment .paymethod-info label,
#frmPayment #billingAddressChoice label{ margin:0 !important; font-weight:500 !important; }
#frmPayment #billingAddressChoice .radio-inline .name{
  display:block !important; margin-bottom:2px !important;
  font-family:'Sora',sans-serif !important; color:#1d1d2e !important;
}
#frmPayment #billingAddressChoice br{ display:none !important; }

/* Stripe wallet / payment request button */
#stripeElements #paymentRequestButton{
  display:block !important;
  padding:0 !important; border:none !important;
  background:transparent !important;
  min-height:44px !important; height:auto !important;
  width:100% !important;
  margin:0 0 22px !important;
  box-shadow:none !important;
  overflow:visible !important;
}
#stripeElements #paymentRequestButton .__PrivateStripeElement,
#stripeElements #paymentRequestButton iframe{
  width:100% !important; min-width:100% !important; display:block !important;
}
#stripeElements > .row{ margin:0 0 4px !important; }
#stripeElements > .row > div[class*="col-"]{ width:100% !important; margin:0 !important; padding:0 !important; }

/* "Where do I find this?" helper */
#stripeCvcWhere .btn-link{
  padding:0 !important; font-size:13.5px !important;
  color:#7b2ff7 !important; text-decoration:underline !important;
  background:none !important; box-shadow:none !important; min-width:0 !important;
}

/* phone input keeps its flag dropdown usable */
#frmPayment .intl-tel-input{ width:100% !important; }

/* submit button */
#btnSubmitContainer{ margin:8px 0 6px !important; display:block !important; }
#btnSubmit{
  display:inline-block !important;
  min-width:240px !important;
  padding:16px 42px !important;
  height:auto !important;
  font-family:'Sora',sans-serif !important;
  font-size:17px !important; font-weight:700 !important; line-height:1.2 !important;
  border:none !important; border-radius:12px !important;
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important;
  color:#fff !important;
  box-shadow:0 12px 26px -12px rgba(123,47,247,.55) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}
#btnSubmit:hover,#btnSubmit:focus{
  color:#fff !important; transform:translateY(-2px) !important;
  box-shadow:0 18px 32px -14px rgba(224,30,121,.6) !important;
}
#btnSubmit.disabled,#btnSubmit:disabled{ opacity:.6 !important; transform:none !important; }

/* invoice summary card */
.invoice-summary h2{
  margin:0 0 16px !important;
  font-family:'Sora',sans-serif !important;
  font-size:20px !important; font-weight:800 !important;
  color:#1d1d2e !important; letter-spacing:-.3px !important;
}
.invoice-summary .table{ margin:0 !important; font-size:14.5px !important; }
.invoice-summary .table > tbody > tr > td{
  padding:11px 12px !important;
  border-top:1px solid #f0eefa !important;
  vertical-align:top !important; line-height:1.5 !important;
}
.invoice-summary .table > tbody > tr:first-child > td{
  border-top:none !important;
  background:#faf9ff !important;
  font-family:'Sora',sans-serif !important;
  color:#5b34d6 !important;
}
.invoice-summary .table .total-row{ font-weight:600 !important; color:#2f2f44 !important; }
.invoice-summary .table > tbody > tr:last-child .total-row{
  font-size:16px !important; font-weight:800 !important; color:#5b34d6 !important;
}
/* summary table must never be clipped or squeezed */
#invoiceIdSummary,
#invoiceIdSummary .invoice-summary-table{
  height:auto !important; max-height:none !important; overflow:visible !important;
}
#invoiceIdSummary .invoice-summary-table{ margin:0 0 4px !important; }
#invoiceIdSummary .table{
  width:100% !important; table-layout:auto !important; height:auto !important;
}
#invoiceIdSummary .table > tbody > tr > td:first-child{
  white-space:normal !important; word-break:break-word !important; overflow-wrap:anywhere !important;
}
#invoiceIdSummary .table > tbody > tr > td:last-child{
  width:110px !important; min-width:110px !important; white-space:nowrap !important;
}
#invoiceIdSummary .table > tbody > tr > td[width="150"]{ width:110px !important; }
.invoice-summary > p.text-center{
  margin:16px 0 8px !important; font-size:14px !important; color:#5a5a72 !important;
}

/* security notice */
#frmPayment .alert-warning{
  margin:24px 0 0 !important;
  border:1px solid #f0e6c8 !important;
  border-radius:12px !important;
  background:#fffaf0 !important;
  color:#6b5a2c !important;
  font-size:14px !important;
  padding:14px 16px !important;
}
#frmPayment .alert-warning .fas{ color:#b8912f !important; }

/* stack labels above fields on small screens */
@media (max-width:767px){
  #frmPayment > .row > .col-md-7{ padding:18px 16px 6px !important; }
  #frmPayment .form-group{ display:block !important; }
  #frmPayment .form-group > label.control-label,
  #frmPayment .form-group > .col-sm-4.control-label{
    flex:none !important; max-width:none !important; width:100% !important;
    display:block !important; margin-bottom:7px !important; padding:0 !important;
  }
  #frmPayment .form-group > div[class*="col-"]{ width:100% !important; }
  #btnSubmit{ width:100% !important; min-width:0 !important; }
  #frmPayment > .row > .col-md-5 .invoice-summary{ margin-top:20px !important; }
  .invoice-summary .table > tbody > tr > td{ padding:10px 8px !important; font-size:14px !important; }
}

/* ---------- No black focus outline on mouse-clicked links ---------- */
a:focus,
a:active,
button:focus,
.btn:focus,
.btn:active,
.list-group-item:focus,
.panel-heading a:focus,
.nav > li > a:focus,
[data-toggle]:focus,
[role="button"]:focus{
  outline:0 !important;
  outline-offset:0 !important;
  -webkit-tap-highlight-color:transparent;
}

/* keyboard users still get a visible ring */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible{
  outline:2px solid var(--cz-purple) !important;
  outline-offset:2px !important;
  border-radius:4px;
}


/* ============================================================
   Mobile header, hamburger menu and dropdown legibility
   ============================================================ */
@media (max-width:991px){
  /* header bar wraps instead of squashing */
  #header .navbar-header,
  .navbar-main .navbar-header,
  #main-menu .navbar-header{
    display:flex !important; align-items:center !important;
    justify-content:space-between !important; gap:12px !important;
    float:none !important; width:100% !important; padding:8px 4px !important;
  }
  #header .navbar-brand,
  .navbar-main .navbar-brand,
  #main-menu .navbar-brand{
    float:none !important; height:auto !important; padding:6px 0 !important;
    display:flex !important; align-items:center !important;
  }
  #header .navbar-brand img,
  .navbar-main .navbar-brand img,
  #main-menu .navbar-brand img{ max-height:38px !important; width:auto !important; }

  /* hamburger button */
  .navbar-toggle,
  #main-menu .navbar-toggle,
  .navbar-main .navbar-toggle{
    display:flex !important; align-items:center !important; justify-content:center !important;
    float:none !important; margin:0 !important;
    width:44px !important; height:44px !important; padding:0 !important;
    background:#faf5ff !important;
    border:1px solid #e3d9fb !important; border-radius:10px !important;
  }
  .navbar-toggle .icon-bar{
    background:#5b34d6 !important; width:20px !important; height:2px !important;
    border-radius:2px !important; display:block !important;
  }
  .navbar-toggle .icon-bar + .icon-bar{ margin-top:4px !important; }
  .navbar-toggle:hover,.navbar-toggle:focus{ background:#f2eaff !important; }

  /* collapsed panel */
  .navbar-collapse,
  #main-menu .navbar-collapse,
  .navbar-main .navbar-collapse{
    display:block !important;
    float:none !important; width:100% !important;
    padding:0 !important; margin:0 !important;
    border-top:1px solid #eceaf5 !important;
    box-shadow:none !important;
    max-height:none !important;
  }
  .navbar-collapse.collapse:not(.in){ display:none !important; }
  .navbar-collapse.collapse.in{ display:block !important; overflow:visible !important; }

  /* menu items stack full width */
  .navbar-nav,
  #main-menu .navbar-nav,
  .navbar-main .navbar-nav{
    float:none !important; margin:0 !important; width:100% !important;
    display:block !important;
  }
  .navbar-nav > li,
  #main-menu .navbar-nav > li{ float:none !important; width:100% !important; }
  .navbar-nav > li > a,
  #main-menu .navbar-nav > li > a,
  .navbar-main .navbar-nav > li > a{
    display:block !important; width:100% !important;
    padding:14px 16px !important;
    border-radius:0 !important;
    border-bottom:1px solid #f2f0f9 !important;
    font-size:15.5px !important; font-weight:600 !important;
    color:#2a2a3c !important;
    background:transparent !important;
    line-height:1.3 !important;
  }
  #main-menu .navbar-right,
  .navbar-main .navbar-right{ float:none !important; margin:0 !important; width:100% !important; }
  #main-menu .navbar-right > li:last-child > a{
    margin:12px 16px !important; border-radius:10px !important;
    text-align:center !important; border-bottom:none !important;
  }

  /* dropdowns inline inside the collapsed panel */
  .navbar-nav .open > .dropdown-menu,
  #main-menu .navbar-nav .open > .dropdown-menu,
  .navbar-main .navbar-nav .open > .dropdown-menu{
    position:static !important; float:none !important;
    width:100% !important; margin:0 !important;
    border:none !important; border-radius:0 !important;
    box-shadow:none !important;
    background:#faf9ff !important;
    padding:4px 0 8px !important;
  }
  .navbar-nav .dropdown-menu > li > a,
  #main-menu .dropdown-menu > li > a{
    padding:12px 16px 12px 30px !important;
    border-radius:0 !important;
    font-size:15px !important; font-weight:500 !important;
  }
  .navbar-nav .dropdown-menu .divider{ margin:4px 16px !important; }
}

/* dropdown text legibility everywhere (was washed-out grey) */
.dropdown-menu,
#main-menu .dropdown-menu,
.navbar-main .dropdown-menu{ background:#fff !important; }
.dropdown-menu > li > a,
#main-menu .dropdown-menu > li > a,
.navbar-main .dropdown-menu > li > a,
.dropdown-menu > li > a:visited{
  color:#2a2a3c !important; opacity:1 !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus,
#main-menu .dropdown-menu > li > a:hover,
.navbar-main .dropdown-menu > li > a:hover{
  background:#faf5ff !important; color:#5b34d6 !important;
}
.dropdown-menu > li.active > a,
.dropdown-menu > li.active > a:hover{
  background:linear-gradient(120deg,#7b2ff7,#e01e79) !important; color:#fff !important;
}
.dropdown-menu .dropdown-header{
  color:#6a6a80 !important; font-weight:700 !important; font-size:12.5px !important;
  text-transform:uppercase !important; letter-spacing:.6px !important;
}
.dropdown-menu > li > a > i,
.dropdown-menu > li > a > .fas,
.dropdown-menu > li > a > .far{ color:#7b2ff7 !important; }

/* invoice summary table stays inside its card on every width */
#invoiceIdSummary,
#invoiceIdSummary .invoice-summary-table{ max-width:100% !important; }
#invoiceIdSummary .invoice-summary-table{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
@media (max-width:767px){
  #invoiceIdSummary table.table,
  .invoice-summary table.table{
    min-width:0 !important; width:100% !important; table-layout:fixed !important;
  }
  #invoiceIdSummary .table > tbody > tr > td:first-child{ width:auto !important; }
  #invoiceIdSummary .table > tbody > tr > td:last-child,
  #invoiceIdSummary .table > tbody > tr > td[width="150"]{
    width:96px !important; min-width:96px !important; font-size:13.5px !important;
  }
  #invoiceIdSummary .table > tbody > tr > td{ padding:10px 8px !important; font-size:13.5px !important; }
}


/* ============================================================
   Mobile menu — final overrides (id-scoped so they win)
   ============================================================ */
@media (max-width:991px){
  #main-menu .container{ display:block !important; }
  #main-menu .navbar-main,#main-menu .navbar-default,#main-menu .navbar{ min-height:0 !important; }

  #main-menu .navbar-header{
    display:flex !important; align-items:center !important;
    justify-content:flex-end !important; float:none !important;
    width:100% !important; padding:8px 0 !important; margin:0 !important;
  }
  #main-menu .navbar-toggle{ display:flex !important; }

  #main-menu .navbar-collapse,
  #main-menu #primary-nav{
    display:none !important;
    flex:none !important;
    float:none !important; width:100% !important;
    padding:0 !important; margin:0 !important;
    border-top:1px solid #eceaf5 !important; box-shadow:none !important;
    max-height:none !important; overflow:visible !important;
  }
  #main-menu .navbar-collapse.in,
  #main-menu #primary-nav.in,
  #main-menu .navbar-collapse.collapsing{ display:block !important; }

  #main-menu .navbar-nav,
  #main-menu ul.navbar-right,
  #main-menu #Secondary_Navbar{
    display:block !important; float:none !important;
    width:100% !important; margin:0 !important;
  }
  #main-menu .navbar-nav > li{ float:none !important; width:100% !important; display:block !important; }
  #main-menu .navbar-nav > li > a{
    display:block !important; width:100% !important;
    padding:14px 4px !important;
    line-height:1.3 !important; font-size:15.5px !important;
    border-radius:0 !important; border-bottom:1px solid #f2f0f9 !important;
    color:#2a2a3c !important; background:transparent !important;
  }
  #main-menu .navbar-nav > li.active > a,
  #main-menu .navbar-nav > li > a:hover{ background:#faf5ff !important; color:#5b34d6 !important; }
  #main-menu .navbar-right > li:last-child > a{
    margin:12px 0 !important; border-bottom:none !important;
    border-radius:10px !important; text-align:center !important;
  }
  #main-menu .navbar-nav .open > .dropdown-menu{
    position:static !important; float:none !important; width:100% !important;
    margin:0 !important; padding:2px 0 6px !important;
    background:#faf9ff !important; border:none !important;
    border-radius:0 !important; box-shadow:none !important;
  }
  #main-menu .navbar-nav .dropdown-menu > li > a{
    padding:12px 4px 12px 22px !important; border-radius:0 !important;
    font-size:15px !important; font-weight:500 !important; color:#2a2a3c !important;
  }

  /* top brand bar: logo left, marketing links wrap below */
  .cz-header .cz-headbar{
    flex-wrap:wrap !important; gap:8px 12px !important;
    height:auto !important; padding:12px 16px !important;
  }
  .cz-header .cz-logo,.cz-header .cz-brand{ flex:1 1 auto !important; }
  .cz-header .cz-logo img,.cz-header .cz-brand img{ max-height:36px !important; width:auto !important; }
  .cz-header .cz-nav{
    order:3 !important; flex:1 1 100% !important;
    flex-wrap:wrap !important; gap:4px !important;
    justify-content:flex-start !important; margin:4px 0 0 !important;
  }
  .cz-header .cz-nav a{ padding:8px 10px !important; font-size:14px !important; }
  .cz-header .cz-actions{ flex:0 0 auto !important; flex-wrap:wrap !important; justify-content:flex-end !important; }
  .cz-header .cz-actions > li > a,.cz-header .cz-actions a{ font-size:13.5px !important; padding:8px 10px !important; }
}
@media (max-width:575px){
  .cz-header .cz-nav a{ padding:7px 8px !important; font-size:13.5px !important; }
  .cz-header .cz-actions a{ padding:7px 9px !important; }
}


/* ============================================================
   Responsive tables across the whole portal
   ============================================================ */
#main-body .cz-table-scroll,
#main-body .table-responsive{
  width:100% !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  border:0 !important;
  -webkit-overflow-scrolling:touch;
}
#main-body .cz-table-scroll > table.table{ margin-bottom:14px !important; }

/* never let a table push the page wider than the viewport */
#main-body .main-content,
#main-body .panel,
#main-body .panel-body,
#main-body .tab-content{ min-width:0 !important; max-width:100% !important; }

@media (max-width:767px){
  #main-body .cz-table-scroll > table.table{ min-width:560px !important; }
  #main-body table.table:not(.cz-tld-table):not(.domain-pricing) > tbody > tr > td,
  #main-body table.table:not(.cz-tld-table):not(.domain-pricing) > thead > tr > th{
    white-space:nowrap !important;
    padding:11px 12px !important;
    font-size:13.5px !important;
  }
  /* cells that hold real prose still wrap */
  #main-body table.table td.wrap,
  #main-body table.table td[colspan]{ white-space:normal !important; }
  #main-body table.table .btn{ white-space:nowrap !important; }
}


/* hamburger: stack the three bars vertically (flex row was lining them up) */
#main-menu .navbar-toggle,
.navbar-main .navbar-toggle,
.navbar-toggle{
  flex-direction:column !important;
  gap:4px !important;
  align-items:center !important;
  justify-content:center !important;
}
#main-menu .navbar-toggle .icon-bar,
.navbar-toggle .icon-bar{
  width:20px !important; height:2px !important;
  margin:0 !important; border-radius:2px !important;
  background:#5b34d6 !important; display:block !important; flex:0 0 auto !important;
}
#main-menu .navbar-toggle .sr-only,
.navbar-toggle .sr-only{
  position:absolute !important; width:1px !important; height:1px !important;
  overflow:hidden !important; clip:rect(0,0,0,0) !important;
}


/* ============================================================
   DataTables (services / domains / invoices lists)
   ============================================================ */
#main-body table.dataTable,
#main-body table.table-list{
  width:100% !important; min-width:0 !important;
  table-layout:auto !important;
}
#main-body table.dataTable th,
#main-body table.dataTable td{ width:auto !important; }
#main-body .dataTables_wrapper{ width:100% !important; max-width:100% !important; }
#main-body .dataTables_wrapper .dataTables_scroll,
#main-body .dataTables_wrapper > .row{ max-width:100% !important; }

@media (max-width:991px){
  #main-body .dataTables_wrapper{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  #main-body table.dataTable{ min-width:640px !important; }
  #main-body table.dataTable th,
  #main-body table.dataTable td{
    padding:11px 12px !important; font-size:13.5px !important; white-space:nowrap !important;
  }
  #main-body table.dataTable td .btn{ white-space:nowrap !important; padding:9px 14px !important; font-size:13px !important; }
  #main-body table.dataTable td.sorting_1{ white-space:normal !important; min-width:180px !important; }
  /* the filter/length controls above the table stack cleanly */
  #main-body .dataTables_wrapper .dataTables_length,
  #main-body .dataTables_wrapper .dataTables_filter{
    float:none !important; width:100% !important; text-align:left !important; margin-bottom:10px !important;
  }
  #main-body .dataTables_wrapper .dataTables_filter input{ width:100% !important; margin-left:0 !important; }
  #main-body .dataTables_wrapper .dataTables_info,
  #main-body .dataTables_wrapper .dataTables_paginate{
    float:none !important; width:100% !important; text-align:left !important;
  }
  #main-body .dataTables_wrapper .dataTables_paginate{ margin-top:8px !important; }
}


/* previously-styled tables keep their own rules */
#main-body table.cz-tld-table,
#main-body table.domain-pricing,
#main-body .domain-pricing table{ min-width:auto !important; }
#main-body table.cz-tld-table td,
#main-body table.cz-tld-table th,
#main-body .domain-pricing table td,
#main-body .domain-pricing table th{ white-space:normal !important; }