/* ==========================================================================
   PK DOMAIN  ·  WHMCS client-area theme  (child of "Twenty-One")
   --------------------------------------------------------------------------
   This is the deep version used by the "pkdomain" child template. It goes
   beyond colour: it restructures the header, sidebar, dashboard, order flow,
   invoices and support views to match pkdomain.com.pk — while every .tpl it
   doesn't touch is inherited from the twenty-one copy, so nothing breaks.

   Palette / type = the marketing site's design system.
   Selectors match WHMCS 8.x Twenty-One markup. Spots that vary between point
   releases are flagged  ·verify·  — check them in devtools on your install.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --navy-900:#0a1f3d; --navy-800:#11294c; --navy-700:#1b3a63;
  --blue-700:#004494; --blue-600:#0057b8; --blue-500:#1a72d4; --blue-100:#d4e4f7; --blue-50:#eef4fc;
  --green-700:#117033; --green-600:#14833c; --green-500:#21a34d; --green-50:#e9f6ee;
  --gold-700:#8a6410; --gold-600:#b3820f; --gold-500:#d4a017; --gold-50:#fdf6e4;
  --red-600:#c22c2c; --red-50:#fdeded;
  --ink:#16202e; --ink-muted:#55637a; --ink-subtle:#7b869a;
  --line:#dfe5ee; --line-strong:#c5cfdd;
  --bg:#ffffff; --bg-alt:#f5f8fc; --bg-alt2:#eaf0f8;
  --font-head:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --font-body:"Source Sans 3","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --r-xs:3px; --r-sm:5px; --r-md:8px; --r-lg:12px;
  --sh-sm:0 1px 2px rgba(12,28,56,.07);
  --sh-md:0 4px 14px -4px rgba(12,28,56,.13);
  --sh-lg:0 14px 34px -10px rgba(12,28,56,.18);

  /* Twenty-One reads these for its own components — repoint them at the brand */
  --pcolor:#0057b8;  --pcolor-d:#004494;  --pcolor-l:#eef4fc;
  --scolor:#0a1f3d;

  /* DNS-constellation backdrop for navy hero bands (from the marketing-site hero) */
  --pkd-constellation:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 460'%3E%3Cg stroke='rgba(255,255,255,0.13)' stroke-width='1.3' fill='none'%3E%3Cpath d='M620 230 792 118M620 230 806 232M620 230 784 348M792 118 946 74M792 118 962 168M806 232 968 214M806 232 958 292M784 348 946 386M784 348 936 300M946 74 1112 110M962 168 1120 200M968 214 1108 262M958 292 1124 330M946 386 1116 408'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.06)' stroke='%234f9fe6' stroke-width='1.5'%3E%3Ccircle cx='620' cy='230' r='15'/%3E%3Ccircle cx='792' cy='118' r='9'/%3E%3Ccircle cx='806' cy='232' r='9'/%3E%3Ccircle cx='784' cy='348' r='9'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.30)'%3E%3Ccircle cx='946' cy='74' r='5'/%3E%3Ccircle cx='962' cy='168' r='5'/%3E%3Ccircle cx='968' cy='214' r='5'/%3E%3Ccircle cx='958' cy='292' r='5'/%3E%3Ccircle cx='936' cy='300' r='5'/%3E%3C/g%3E%3Cg fill='%2328c565'%3E%3Ccircle cx='946' cy='386' r='5'/%3E%3Ccircle cx='1112' cy='110' r='4'/%3E%3Ccircle cx='1108' cy='262' r='4'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.18)'%3E%3Ccircle cx='1120' cy='200' r='4'/%3E%3Ccircle cx='1124' cy='330' r='4'/%3E%3Ccircle cx='1116' cy='408' r='4'/%3E%3C/g%3E%3Ccircle cx='620' cy='230' r='30' fill='none' stroke='rgba(255,255,255,0.12)' stroke-width='1.1'/%3E%3Ccircle cx='620' cy='230' r='46' fill='none' stroke='rgba(255,255,255,0.07)' stroke-width='1.1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   1 · BASE
   ========================================================================== */
body{ font-family:var(--font-body); color:var(--ink); background:var(--bg-alt); -webkit-font-smoothing:antialiased; }
.body-wrapper, #main-body{ background:var(--bg-alt); }
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5{ font-family:var(--font-head); font-weight:600; color:var(--navy-900); letter-spacing:-.01em; }
a{ color:var(--blue-700); } a:hover,a:focus{ color:var(--blue-600); text-decoration:none; }
hr{ border-color:var(--line); }
code,kbd{ font-family:var(--font-mono); color:var(--blue-700); background:var(--blue-50); border-radius:var(--r-xs); padding:.1em .35em; }
::selection{ background:var(--blue-100); color:var(--navy-900); }
.text-primary{ color:var(--blue-700)!important; }
.text-success{ color:var(--green-700)!important; }
.text-danger{ color:var(--red-600)!important; }
.text-muted{ color:var(--ink-muted)!important; }
.bg-primary{ background:var(--blue-600)!important; }
.bg-light{ background:var(--bg-alt)!important; }

/* page container: match the site's max width */
.container, .container-fluid.limit-width, main > .container{ max-width:1240px; }

/* ==========================================================================
   2 · HEADER  (header#header wraps two white .navbar bars)
   ========================================================================== */
#header, .header{ background:var(--navy-900)!important; border:0; position:relative; z-index:30;
  box-shadow:var(--sh-md); }
/* signature brand accent along the very top edge */
#header::before{ content:""; position:absolute; inset:0 0 auto 0; height:2px; z-index:2;
  background:linear-gradient(90deg, var(--blue-700) 0%, var(--blue-500) 65%, var(--green-500) 100%); }

/* ---- the navy utility strip (.topbar / .navbar-secondary) ---- */
.topbar, .navbar-secondary{
  background:linear-gradient(180deg,#0d264a,var(--navy-900))!important;
  border-bottom:1px solid rgba(255,255,255,.06); font-size:.82rem;
}
.topbar .container{ min-height:40px; }
.topbar a, .topbar .btn, .navbar-secondary a{
  color:#b9c8de!important; font-family:var(--font-head); font-weight:500;
}
.topbar a:hover, .topbar .btn:hover, .navbar-secondary a:hover{ color:#fff!important; }
.topbar .btn{ border:0!important; padding:.35rem .55rem; background:transparent!important; }
.topbar .input-group-text{ background:transparent!important; border:0!important; color:#8798b4!important;
  font-size:.78rem; padding-right:.5rem; }
.topbar .btn-group .btn{ border:1px solid rgba(255,255,255,.14)!important; border-radius:var(--r-xs);
  margin-left:.3rem; color:#dbe6f4!important; }
.topbar .btn-active-client{ background:rgba(255,255,255,.06)!important; font-weight:600; }
/* our injected "WhatsApp" helpline link (added by the hook) */
.pkd-topbar-help{ display:inline-flex; align-items:center; gap:.4rem; margin-right:1rem;
  color:#b9c8de; font-family:var(--font-head); font-weight:500; }
.pkd-topbar-help:hover{ color:#fff; }
.pkd-topbar-help svg{ width:14px; height:14px; opacity:.85; }

/* ---- the white logo bar ---- */
#header .navbar, #header .navbar-light{
  background:linear-gradient(180deg,#ffffff, #f4f8fd)!important; border:0; box-shadow:none; min-height:64px;
}
.navbar-brand{ padding:9px 0; position:relative; }
.navbar-brand img{ max-height:38px; width:auto; }
/* faint divider + micro-tag after the logo */
.navbar-brand::after{ content:"BILLING & SUPPORT"; position:absolute; left:calc(100% + 14px); top:50%;
  transform:translateY(-50%); white-space:nowrap; font-family:var(--font-head); font-weight:600;
  font-size:.62rem; letter-spacing:.16em; color:var(--ink-subtle);
  padding-left:14px; border-left:1px solid var(--line-strong); }
@media (max-width:600px){ .navbar-brand::after{ display:none; } }

/* ---- main client menu (2nd navbar) ---- */
.main-navbar-wrapper, #header .navbar-expand-xl{
  background:#fff!important; border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
}
.navbar-nav .nav-link{
  font-family:var(--font-head); font-weight:600; color:var(--navy-800)!important;
  text-transform:uppercase; letter-spacing:.045em; font-size:.8rem;
  padding:1.2rem .95rem!important; border-radius:0; position:relative;
}
.navbar-nav .nav-link::after{ content:""; position:absolute; left:.95rem; right:.95rem; bottom:0; height:2px;
  background:var(--blue-600); transform:scaleX(0); transform-origin:left; transition:transform .18s ease; }
.navbar-nav .nav-link:hover{ color:var(--blue-700)!important; }
.navbar-nav .nav-link:hover::after{ transform:scaleX(1); }
.navbar-nav .nav-item.active > .nav-link,
.navbar-nav .nav-link.active{ color:var(--blue-700)!important; background:var(--blue-50)!important; }
.navbar-nav .nav-item.active > .nav-link::after,
.navbar-nav .nav-link.active::after{ transform:scaleX(1); }

/* the toolbar (cart + account + hamburger) top-right */
.navbar .toolbar .nav-link, .cart-btn, .navbar-toggler{
  border:1px solid var(--line-strong)!important; border-radius:var(--r-sm); color:var(--navy-800)!important;
  width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; margin-left:.4rem;
  background:#fff!important;
}
.navbar .toolbar .nav-link:hover, .cart-btn:hover{ border-color:var(--blue-600)!important; color:var(--blue-700)!important; background:var(--blue-50)!important; }
.cart-btn .badge, .toolbar .badge{ background:var(--green-600)!important; }

/* the domain-search box some layouts drop into the top navbar */
.navbar form.form-inline .form-control{ border-color:var(--line-strong); border-radius:var(--r-sm) 0 0 var(--r-sm); }
.navbar form.form-inline .btn{ border-radius:0 var(--r-sm) var(--r-sm) 0; }

/* dropdown menus */
.dropdown-menu{ border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-lg); padding:.35rem; margin-top:.4rem; }
.dropdown-item{ border-radius:var(--r-xs); padding:.55rem .8rem; font-size:.92rem; color:var(--ink); }
.dropdown-item:hover,.dropdown-item:focus{ background:var(--bg-alt); color:var(--blue-700); }
.dropdown-header{ font-family:var(--font-head); font-weight:600; color:var(--ink-subtle); text-transform:uppercase; letter-spacing:.08em; font-size:.72rem; }

/* breadcrumb strip below the header */
.breadcrumb-wrapper, section.breadcrumb-nav{ background:var(--bg-alt); border-bottom:1px solid var(--line); }
.breadcrumb{ background:transparent; padding:.85rem 0; margin:0; font-size:.86rem; }
.breadcrumb-item.active{ color:var(--ink-muted); }
.breadcrumb-item a{ color:var(--blue-700); }

/* ==========================================================================
   3 · BUTTONS
   ========================================================================== */
.btn{ font-family:var(--font-head); font-weight:600; border-radius:var(--r-sm); padding:.6rem 1.2rem; transition:background .15s,border-color .15s,color .15s; }
.btn-lg{ padding:.8rem 1.5rem; }
.btn-sm{ padding:.4rem .8rem; font-size:.85rem; }
.btn-primary{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.btn-primary:hover,.btn-primary:focus,.btn-primary:not(:disabled):not(.disabled):active{ background:var(--blue-700); border-color:var(--blue-700); }
.btn-success{ background:var(--green-600); border-color:var(--green-600); color:#fff; }
.btn-success:hover{ background:var(--green-700); border-color:var(--green-700); }
.btn-danger{ background:var(--red-600); border-color:var(--red-600); }
.btn-warning{ background:var(--gold-500); border-color:var(--gold-500); color:#3d3110; }
.btn-default,.btn-secondary,.btn-outline-secondary,.btn-light{ background:#fff; border-color:var(--line-strong); color:var(--navy-800); }
.btn-default:hover,.btn-secondary:hover,.btn-outline-secondary:hover,.btn-light:hover{ border-color:var(--blue-600); color:var(--blue-700); background:var(--blue-50); }
.btn-link{ color:var(--blue-700); font-weight:600; }
.btn-block{ width:100%; }

/* the login / register / big form submits */
#login,#register,
form[action*="login"] .btn-primary,
form[action*="register"] .btn-primary{ width:100%; margin-top:.5rem; background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
#login:hover,#register:hover{ background:var(--blue-700); border-color:var(--blue-700); }

/* ==========================================================================
   4 · PANELS / CARDS
   ========================================================================== */
.panel,.card{ border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.panel-heading,.card-header{
  background:var(--bg-alt)!important; border-bottom:1px solid var(--line);
  font-family:var(--font-head); font-weight:600; color:var(--navy-900);
  border-radius:var(--r-md) var(--r-md) 0 0; padding:.9rem 1.1rem;
}
.panel-title,.card-title{ font-family:var(--font-head); font-weight:600; }
.panel-footer,.card-footer{ background:var(--bg-alt); border-top:1px solid var(--line); }
/* Twenty-One's little header action buttons carry .bg-color-gold/red/blue/asbestos
   (coloured bg + white text). On the light panel header that renders white-on-white —
   normalise them to a quiet outline button. */
.card-header .btn, .panel-heading .btn,
.card-title .btn, .panel-title .btn{
  background:#fff!important; color:var(--blue-700)!important;
  border:1px solid var(--line-strong)!important; box-shadow:none!important;
}
.card-header .btn:hover, .panel-heading .btn:hover,
.card-title .btn:hover, .panel-title .btn:hover{
  background:var(--blue-50)!important; border-color:var(--blue-600)!important; color:var(--blue-700)!important;
}
.well{ background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:none; }
.list-group-item{ border-color:var(--line); }
.list-group-item.active,.list-group-item.active:hover{ background:var(--blue-50); border-color:var(--blue-100); color:var(--blue-700); font-weight:600; }

/* ==========================================================================
   5 · CLIENT-AREA SIDEBAR
   ========================================================================== */
.sidebar, #sidebar, .primary-sidebar{ }
.sidebar .panel, .sidebar .card{ border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; }
.sidebar .panel-heading, .sidebar .card-header, .sidebar .list-group-item-heading{
  background:var(--navy-900)!important; color:#fff!important; font-family:var(--font-head); font-weight:600;
  letter-spacing:0; text-transform:none; padding:.85rem 1.1rem;
}
/* WHMCS puts an <h3 class="card-title"> inside the header with its own colour —
   force every descendant white so the navy band is readable. */
.sidebar .panel-heading *, .sidebar .card-header *,
.sidebar .panel-heading .fa, .sidebar .card-header .fa,
.sidebar .panel-title, .sidebar .card-title{ color:#fff!important; }
.sidebar .list-group-item{ border:0; border-bottom:1px solid var(--line); padding:.7rem 1.1rem; font-size:.92rem; color:var(--ink); }
.sidebar .list-group-item:last-child{ border-bottom:0; }
.sidebar .list-group-item i, .sidebar .list-group-item .fa{ color:var(--blue-600); width:1.2em; margin-right:.4rem; }
.sidebar .list-group-item.active{ background:var(--blue-50); color:var(--blue-700); font-weight:600; box-shadow:inset 3px 0 0 var(--blue-600); }
.sidebar .list-group-item:hover{ background:var(--bg-alt); }

/* ==========================================================================
   6 · CLIENT-AREA HOME  (dashboard)
   ========================================================================== */
/* page intro / greeting */
.clientarea-home .page-header, .home-banner, .client-home-panels + h1{ }
h1.text-center, .client-home h1{ text-align:left; }

/* summary widgets row */
.panel.panel-summary, .stat-panel, .home-panels .panel, .client-home-panels .panel{
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); text-align:left;
}
.panel-summary .panel-body, .stat-panel .panel-body{ display:flex; align-items:center; gap:.9rem; }
.panel-summary .number, .stat-panel .stat-number, .home-panels .h1{
  font-family:var(--font-head); font-weight:700; font-size:1.6rem; color:var(--navy-900); line-height:1.05;
}
.panel-summary .desc, .stat-panel .stat-label{ font-size:.82rem; color:var(--ink-muted); }
.panel-summary .fa, .stat-panel .fa, .home-panels .fa{
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  background:var(--blue-50); color:var(--blue-600); font-size:1.15rem; flex:none;
}
/* colour the icon by intent where WHMCS adds a modifier class ·verify· */
.text-success .fa, .panel-success .fa{ background:var(--green-50); color:var(--green-600); }
.text-danger  .fa, .panel-danger  .fa{ background:var(--red-50);  color:var(--red-600); }
.text-warning .fa, .panel-warning .fa{ background:var(--gold-50);  color:var(--gold-700); }

/* Twenty-One dashboard tiles: <a.tile> > i + .stat + .title + .highlight(bar) */
.tiles .row{ gap:0; }
.tile{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff;
  padding:1.15rem 1rem 0; margin:.35rem; overflow:hidden; box-shadow:var(--sh-sm);
  transition:box-shadow .15s,border-color .15s;
}
.tile:hover{ border-color:var(--blue-200,#b9d3f0); box-shadow:var(--sh-md); text-decoration:none; }
/* Twenty-One renders <i> as a big faint watermark (.tiles .tile i, #ccc) — keep the
   treatment but tint it brand-blue instead of grey. */
.tiles .tile > i{ color:var(--blue-100)!important; }
.tiles .tile:hover > i{ color:var(--blue-200,#c3daf5)!important; }
.tile .stat{ font-family:var(--font-head); font-weight:700; font-size:1.9rem; color:var(--navy-900); line-height:1.1; }
.tile .title{ font-family:var(--font-head); font-weight:600; font-size:.8rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-muted); margin-bottom:.9rem; }
.tile .highlight{ height:3px; margin:0 -1rem; }
.tile .highlight.bg-color-blue{ background:var(--blue-600); }
.tile .highlight.bg-color-green{ background:var(--green-600); }
.tile .highlight.bg-color-red{ background:var(--red-600); }
.tile .highlight.bg-color-gold{ background:var(--gold-500); }

/* card accent strip Twenty-One puts on home panels */
.card.card-accent-gold{ border-top:3px solid var(--gold-500); }
.card.card-accent-red{ border-top:3px solid var(--red-600); }
.card.card-accent-blue{ border-top:3px solid var(--blue-600); }
.card.card-accent-emerald,.card.card-accent-green{ border-top:3px solid var(--green-600); }
.card.card-accent-asbestos{ border-top:3px solid var(--ink-subtle); }
.client-home-cards .card-header .card-title > i{ color:var(--blue-600); }

/* the tables of services / domains / invoices on the home page */
.clientarea-home .table thead th, .home-tables .table thead th{ background:var(--bg-alt); }

/* "quick shortcuts" tiles some layouts show */
.quick-shortcuts a, .shortcut-tile{
  display:block; padding:1rem; border:1px solid var(--line); border-radius:var(--r-md);
  background:#fff; color:var(--navy-800); font-family:var(--font-head); font-weight:600; text-align:center;
}
.quick-shortcuts a:hover, .shortcut-tile:hover{ border-color:var(--blue-500); box-shadow:var(--sh-md); color:var(--blue-700); }

/* ==========================================================================
   7 · TABLES  →  ROW-CARD design
   Every data list (services, domains, invoices, tickets, …) renders as
   spaced, self-contained white row cards instead of a ruled grid.
   ========================================================================== */
.table{
  background:transparent!important; margin-bottom:0;
  border-collapse:separate!important; border-spacing:0 .55rem!important;
}
.table, .table td, .table th, .table tr{ border:0!important; }

/* header = a quiet label strip, not a navy bar */
.table > thead > tr > th, .table thead th{
  background:transparent!important; color:var(--ink-subtle)!important;
  font-family:var(--font-head); font-weight:700; white-space:nowrap;
  font-size:.68rem; text-transform:uppercase; letter-spacing:.07em;
  padding:.1rem 1rem .35rem!important;
}
.table > thead{ }

/* each body row floats as a card */
.table > tbody > tr{
  background:#fff; box-shadow:var(--sh-sm);
  transition:box-shadow .15s, transform .15s;
}
.table > tbody > tr:hover, .table-hover > tbody > tr:hover,
tr.clickable:hover, tr.clickableRow:hover{
  background:#fff!important; box-shadow:var(--sh-md); transform:translateY(-1px);
}
.table > tbody > tr > td, .table > tbody > tr > th{
  border-top:1px solid var(--line)!important; border-bottom:1px solid var(--line)!important;
  padding:1rem!important; vertical-align:middle; color:var(--ink); background:transparent;
}
.table > tbody > tr > td:first-child, .table > tbody > tr > th:first-child{
  border-left:1px solid var(--line)!important; border-radius:var(--r-md) 0 0 var(--r-md);
}
.table > tbody > tr > td:last-child, .table > tbody > tr > th:last-child{
  border-right:1px solid var(--line)!important; border-radius:0 var(--r-md) var(--r-md) 0;
}
.table-striped > tbody > tr:nth-of-type(odd){ background:#fff; }   /* kill zebra */
.table a{ font-weight:600; }
.table .text-right, .table td.text-right, .table .amount, td.price, .table td[class*="amount"]{
  font-family:var(--font-mono); font-variant-numeric:tabular-nums; color:var(--navy-900); font-weight:600;
}
/* totals row stays a card too */
.table tfoot td, .table tfoot th{
  background:var(--bg-alt)!important; font-family:var(--font-head); font-weight:600;
  border-top:1px solid var(--line)!important;
}
.table tfoot tr td:first-child{ border-radius:var(--r-md) 0 0 var(--r-md); border-left:1px solid var(--line)!important; }
.table tfoot tr td:last-child{ border-radius:0 var(--r-md) var(--r-md) 0; border-right:1px solid var(--line)!important; }

/* DataTables chrome */
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select{
  border:1px solid var(--line-strong)!important; border-radius:var(--r-sm)!important; padding:.45rem .7rem; background:#fff;
}
.dataTables_wrapper .dataTables_filter input:focus{ border-color:var(--blue-600)!important; box-shadow:0 0 0 3px rgba(0,87,184,.13); outline:0; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border-radius:var(--r-xs)!important; border:1px solid var(--line)!important; font-family:var(--font-head); font-weight:600;
  color:var(--blue-700)!important; padding:.35rem .7rem!important; background:#fff!important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{
  background:var(--blue-600)!important; border-color:var(--blue-600)!important; color:#fff!important;
}
.dataTables_wrapper .dataTables_info{ color:var(--ink-muted); font-size:.88rem; padding-top:.6rem; }
table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after{ opacity:.4; }

/* status pills used across tables (Active / Pending / Suspended / …) */
.table .label, .table .badge, .status .label, td .status, .statustag{
  display:inline-block; padding:.3em .75em; border-radius:999px; font-size:.7rem;
  font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.03em; line-height:1.4;
}

@media (max-width:640px){
  .table{ border-spacing:0 .6rem!important; }
  .table > thead{ display:none; }               /* labels off; rows stack */
  .table > tbody > tr{ display:block; padding:.4rem 0; }
  .table > tbody > tr > td{
    display:flex; justify-content:space-between; gap:1rem; text-align:right;
    border:0!important; border-radius:0!important; padding:.55rem 1rem!important;
  }
  .table > tbody > tr > td:first-child{ border-radius:var(--r-md) var(--r-md) 0 0; }
  .table > tbody > tr > td:last-child{ border-radius:0 0 var(--r-md) var(--r-md); }
  .table > tbody > tr > td::before{
    content:attr(data-label); font-family:var(--font-head); font-weight:700; font-size:.7rem;
    text-transform:uppercase; letter-spacing:.05em; color:var(--ink-subtle); text-align:left;
  }
}

/* ==========================================================================
   8 · ALERTS · BADGES · LABELS
   ========================================================================== */
.alert{ border-radius:var(--r-sm); border-width:1px; }
.alert-info{ background:var(--blue-50); border-color:var(--blue-100); color:var(--blue-700); }
.alert-success{ background:var(--green-50); border-color:#bfe3cd; color:var(--green-700); }
.alert-warning{ background:var(--gold-50); border-color:#ecdcb0; color:#5c4c22; }
.alert-danger{ background:var(--red-50); border-color:#f3c9c9; color:var(--red-600); }

.label,.badge{ font-family:var(--font-head); font-weight:600; border-radius:var(--r-xs); padding:.3em .6em; }
.label-success,.badge-success,.status-active,.badge.Active,.invoice-status-paid{ background:var(--green-600)!important; color:#fff!important; }
.label-danger,.badge-danger,.status-terminated,.invoice-status-unpaid,.invoice-status-overdue{ background:var(--red-600)!important; color:#fff!important; }
.label-warning,.badge-warning,.status-pending,.invoice-status-draft{ background:var(--gold-500)!important; color:#3d3110!important; }
.label-info,.badge-info{ background:var(--blue-500)!important; color:#fff!important; }
.label-default,.badge-secondary,.status-cancelled{ background:var(--ink-subtle)!important; color:#fff!important; }

/* ==========================================================================
   9 · FORMS
   ========================================================================== */
.form-control,.custom-select{
  border-color:var(--line-strong); border-radius:var(--r-sm); color:var(--ink);
  padding:.55rem .75rem; height:auto;
}
.form-control:focus,.custom-select:focus{ border-color:var(--blue-600); box-shadow:0 0 0 3px var(--blue-100); }
label,.control-label{ font-family:var(--font-head); font-weight:600; color:var(--navy-800); font-size:.9rem; }
.input-group-text,.input-group-addon{ background:var(--bg-alt); border-color:var(--line-strong); color:var(--ink-muted); }
.custom-control-input:checked ~ .custom-control-label::before{ background:var(--blue-600); border-color:var(--blue-600); }
.field-icon, .btn-reveal-pw{ color:var(--ink-subtle); }

/* ==========================================================================
   10 · LOGIN · REGISTER  (twenty-one: a plain .card inside <main>)
   ========================================================================== */
main .card, .card.mx-auto{ max-width:460px; margin-inline:auto; box-shadow:var(--sh-lg); border-radius:var(--r-lg); overflow:hidden; }
.card .card-body > h1:first-child, .card .card-body > h2:first-child{ margin-bottom:.25rem; }
.password-strength-indicator .progress-bar{ background:var(--blue-600); }

/* navy header band on the login / register card — used by TPL-PATCH #2.
   needs !important to beat the generic .card-header rule above. */
.pkd-auth-head{ background:var(--navy-900)!important; color:#fff!important; border:0!important; text-align:center; padding:1.6rem 1rem 1.2rem!important; }
.pkd-auth-head h1, .pkd-auth-head h2, .pkd-auth-head p{ color:#fff!important; margin:0; }
.pkd-auth-head p{ color:#cdd9ea!important; font-size:.85rem; margin-top:.35rem; }

/* ==========================================================================
   11 · ORDER FORM / CART   (templates/orderforms/twenty-one/*)
   ========================================================================== */
/* domain checker */
#domainName, #inputDomainName{ border-radius:var(--r-sm) 0 0 var(--r-sm)!important; border-color:var(--line-strong); }
#btnCheckAvailability, .domain-checker .btn-primary{ border-radius:0 var(--r-sm) var(--r-sm) 0!important; }
.domain-check-result, .domain-checker-result{ border:1px solid var(--line); border-radius:var(--r-md); }
.domain-check-available{ background:var(--green-50); border-color:#bfe3cd; }
.domain-check-unavailable{ background:var(--red-50); border-color:#f3c9c9; }
.tld-item, .domain-suggestion{ border:1px solid var(--line); border-radius:var(--r-sm); }
.tld-item.active, .domain-suggestion:hover{ border-color:var(--blue-500); background:var(--blue-50); }

/* product / pricing tables */
.pricing-table, .product-panel, .package{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm); transition:box-shadow .18s,transform .18s;
}
.pricing-table:hover, .product-panel:hover{ box-shadow:var(--sh-md); }
.pricing-table .panel-heading, .pricing-table-title, .product-panel-header, .package-name{
  background:var(--navy-900)!important; color:#fff!important; text-align:center; padding:1.3rem 1rem; border:0;
}
.pricing-table-price, .product-price, .package-price{
  font-family:var(--font-head); font-weight:700; color:var(--blue-700); font-size:1.6rem;
}
.pricing-table-price small, .product-price .term{ font-family:var(--font-body); font-weight:400; color:var(--ink-subtle); font-size:.8rem; }
.pricing-table.recommended, .product-panel.featured, .package.popular,     /* ·verify· */
.pricing-table[class*="popular"]{ border-color:var(--blue-600); box-shadow:var(--sh-md); }
.pricing-table.recommended .panel-heading::after,
.product-panel.featured .product-panel-header::after{
  content:"Most popular"; display:block; font-family:var(--font-head); font-weight:600; font-size:.72rem;
  letter-spacing:.08em; text-transform:uppercase; color:#8fc7ff; margin-top:.35rem;
}
.pricing-table .panel-body ul li, .product-panel-body li, .package-features li{
  border-bottom:1px solid var(--line); padding:.55rem 0; font-size:.92rem;
}

/* multi-step progress bar across the top of checkout */
.order-steps, .checkout-steps, #order-standard_cart .steps{ display:flex; }
.order-steps li, .checkout-steps li, .steps .step{
  font-family:var(--font-head); font-weight:600; color:var(--ink-subtle); position:relative; flex:1; text-align:center; padding:1rem .5rem;
}
.order-steps li.active, .checkout-steps li.active, .steps .step.active{ color:var(--blue-700); }
.order-steps li.complete, .steps .step.complete{ color:var(--green-700); }
.order-steps li::before, .steps .step .step-number{
  content:""; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:50%; background:var(--bg-alt); border:2px solid var(--line-strong);
  color:var(--ink-muted); margin-right:.5rem; font-size:.85rem;
}
.order-steps li.active::before, .steps .step.active .step-number{ background:var(--blue-600); border-color:var(--blue-600); color:#fff; }
.order-steps li.complete::before, .steps .step.complete .step-number{ background:var(--green-600); border-color:var(--green-600); color:#fff; }

/* cart summary panel */
.order-summary, .cart-summary, #orderSummary{ border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.order-summary .panel-heading, .cart-summary-header{ background:var(--navy-900)!important; color:#fff!important; }
.order-summary .total, .cart-total{ font-family:var(--font-head); font-weight:700; color:var(--blue-700); font-size:1.1rem; }

/* payment method chooser */
.payment-methods .payment-method, .paymentgateways label{
  border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem 1rem; cursor:pointer;
}
.payment-methods .payment-method.active, .paymentgateways input:checked + label{
  border-color:var(--blue-600); background:var(--blue-50);
}

/* ==========================================================================
   12 · INVOICES
   ========================================================================== */
.invoice, #invoice{ background:#fff; border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); }
.invoice-header, .invoice-top{ border-bottom:1px solid var(--line); }
.invoice #invoicenum, .invoice-number{ font-family:var(--font-head); font-weight:700; color:var(--navy-900); }
.invoice .table tfoot td, .invoice-totals .total-row{ background:var(--bg-alt); font-weight:600; }
.invoice .table tfoot tr:last-child td, .invoice-totals .grand-total{ font-size:1.05rem; color:var(--blue-700); }
.invoice-paid-stamp, .invoicePaid{ color:var(--green-600); border-color:var(--green-600); }
.invoice-unpaid-stamp, .invoiceUnpaid{ color:var(--red-600); border-color:var(--red-600); }

/* ==========================================================================
   13 · SUPPORT · KNOWLEDGEBASE · ANNOUNCEMENTS
   ========================================================================== */
.support-ticket, .ticketreply{ border:1px solid var(--line); border-radius:var(--r-md); }
.ticketreply.staff, .ticket-reply-staff{ border-left:3px solid var(--blue-600); background:var(--blue-50); }
.ticketreply.client, .ticket-reply-client{ border-left:3px solid var(--line-strong); }
.kb-article, .announcement-item{ border-bottom:1px solid var(--line); padding-bottom:1.25rem; margin-bottom:1.25rem; }
.kb-article h3 a, .announcement-item h3 a{ color:var(--navy-900); }
.kb-category-tile, .kb-cat{ border:1px solid var(--line); border-radius:var(--r-md); background:#fff; }
.kb-category-tile:hover{ border-color:var(--blue-500); box-shadow:var(--sh-md); }
.rating .fa-star, .article-helpful .fa{ color:var(--gold-500); }

/* ==========================================================================
   14 · MISC — pagination, progress, tooltips, modals
   ========================================================================== */
.pagination .page-link, .pagination > li > a{ color:var(--blue-700); border-color:var(--line); }
.pagination .page-item.active .page-link, .pagination > .active > a{ background:var(--blue-600); border-color:var(--blue-600); }
.progress{ background:var(--bg-alt); border-radius:var(--r-sm); height:.6rem; }
.progress-bar{ background:var(--blue-600); }
.progress-bar.bg-success{ background:var(--green-600)!important; }
.progress-bar.bg-danger{ background:var(--red-600)!important; }
.tooltip-inner{ background:var(--navy-900); font-family:var(--font-head); border-radius:var(--r-sm); }
.modal-content{ border:0; border-radius:var(--r-lg); box-shadow:var(--sh-lg); }
.modal-header{ background:var(--bg-alt); border-bottom:1px solid var(--line); border-radius:var(--r-lg) var(--r-lg) 0 0; }
.modal-title{ font-family:var(--font-head); font-weight:600; color:var(--navy-900); }

/* ==========================================================================
   15 · FOOTER   (footer.tpl is also overridden — this styles both)
   ========================================================================== */
#footer, .footer{ background:var(--navy-900); color:#a8b8ce; font-size:.9rem; padding:2.5rem 0 1.5rem; }
#footer a, .footer a{ color:#cdd9ea; }
#footer a:hover, .footer a:hover{ color:#fff; }
#footer h5, .footer h5{ color:#fff; font-family:var(--font-head); font-size:.95rem; margin-bottom:.75rem; }
#footer hr, .footer hr{ border-color:rgba(255,255,255,.12); }
.footer-brand b{ color:#fff; font-family:var(--font-head); }
.footer-brand small{ color:#7f91ab; letter-spacing:.08em; text-transform:uppercase; }
.footer-langcur .btn{ background:rgba(255,255,255,.08); border:0; color:#fff; }

/* ==========================================================================
   16 · RESPONSIVE
   ========================================================================== */
@media (max-width:991px){
  .navbar-nav .nav-link{ padding:.9rem .75rem!important; }
  .navbar-nav .nav-item.active > .nav-link{ box-shadow:inset 3px 0 0 var(--blue-600); }
}
@media (max-width:767px){
  .navbar-brand img{ max-height:32px; }
  .pricing-table.recommended, .product-panel.featured{ transform:none; }
  .panel-summary .panel-body, .stat-panel .panel-body{ flex-direction:column; text-align:center; }
}

/* ==========================================================================
   17 · PORTAL HOMEPAGE  (index.php — custom marketing page, drop-in
   homepage.tpl replaces the WHMCS "Browse our Products/Services" layout)
   ========================================================================== */
/* strip the WHMCS chrome around the custom page */
body:has(.pkd-home) .master-breadcrumb{ display:none; }
body:has(.pkd-home) #main-body{ padding:0; }
/* twenty-one renders its own "Secure your domain name" band separately from
   homepage.tpl — hide it, our hero (#pkdDomainSearch) carries the search */
body:has(.pkd-home) #frmDomainHomepage,
body:has(.pkd-home) .home-domain-search{ display:none!important; }
/* the framework's column wrapper around our page — let it go full-bleed */
body:has(.pkd-home) #main-body > .container{ max-width:none; padding:0; }
body:has(.pkd-home) #main-body > .container > .row{ margin:0; }
body:has(.pkd-home) #main-body .primary-content{ padding:0; }
.pkd-home{ color:var(--ink); font-family:var(--font-body); }
.pkd-home section{ padding:clamp(2.75rem,6vw,4.75rem) 1.25rem; }
.pkd-home .pkd-wrap{ max-width:1100px; margin:0 auto; }
.pkd-home h1,.pkd-home h2,.pkd-home h3{ font-family:var(--font-head); color:var(--navy-900); letter-spacing:-.015em; }

/* ---- hero  (navy, DNS-constellation backdrop, drifting glow) ---- */
.pkd-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(900px 380px at 78% -10%, rgba(26,114,212,.30), transparent 60%),
    radial-gradient(700px 360px at 8% 120%, rgba(17,112,51,.20), transparent 60%),
    linear-gradient(180deg, var(--navy-900) 0%, #0c2b52 45%, var(--navy-800) 100%);
  background-color:var(--navy-900);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.pkd-hero::before{                       /* the constellation */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--pkd-constellation) right -40px center / auto 118% no-repeat;
  opacity:.62; animation:pkd-constellation 26s ease-in-out infinite;
  -webkit-mask:linear-gradient(105deg, transparent 30%, #000 78%);
          mask:linear-gradient(105deg, transparent 30%, #000 78%);
}
.pkd-hero::after{                        /* a soft travelling highlight */
  content:""; position:absolute; z-index:-1; width:520px; height:520px; left:35%; top:-40%;
  background:radial-gradient(circle, rgba(26,114,212,.28), transparent 62%);
  filter:blur(8px); pointer-events:none; animation:pkd-blob 22s ease-in-out infinite;
}
.pkd-hero .pkd-wrap{ max-width:840px; text-align:center; position:relative; z-index:1; }
.pkd-eyebrow{ font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:#8fc0f2; margin:0 0 1rem; }
.pkd-hero h1{ font-size:clamp(1.95rem,4.7vw,3.05rem); line-height:1.1; margin:0 0 1rem; color:#fff;
  animation:pkd-fade-up .55s .02s both; }
.pkd-hero__sub{ font-size:clamp(1rem,2.3vw,1.2rem); color:#b7c6dc; max-width:42ch; margin:0 auto 2rem;
  animation:pkd-fade-up .55s .08s both; }
.pkd-hero__sub strong{ color:#fff; }

/* search — white "console" card that floats on the navy */
.pkd-hero__search{ margin:0 auto; max-width:640px; animation:pkd-fade-up .55s .14s both; }
.pkd-search{
  display:flex; align-items:center; gap:.5rem; position:relative;
  background:#fff; border:1px solid rgba(255,255,255,.4); border-radius:var(--r-md);
  padding:.5rem .5rem .5rem .55rem;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(10,31,61,.04);
  transition:box-shadow .18s, transform .18s;
}
.pkd-search__ico{                        /* blue icon tile */
  flex:none; width:42px; height:42px; display:grid; place-items:center;
  background:var(--blue-600); border-radius:var(--r-sm); color:#fff;
  transition:background .18s, transform .18s;
}
.pkd-search__ico svg{ width:20px; height:20px; }
.pkd-search:focus-within{ box-shadow:0 24px 60px -16px rgba(0,0,0,.6), 0 0 0 4px rgba(26,114,212,.35); }
.pkd-search:focus-within .pkd-search__ico{ background:var(--blue-700); animation:pkd-ping 1.4s ease-out; }
.pkd-search .form-control{
  flex:1; min-width:0; border:0; box-shadow:none!important; outline:0;
  font-size:1.06rem; font-family:var(--font-mono); letter-spacing:-.01em;
  color:var(--navy-900); background:transparent; padding:.5rem .35rem;
}
.pkd-search .form-control::placeholder{ color:var(--ink-subtle); }
.pkd-search .btn{
  flex:none; border-radius:var(--r-sm); padding:.62rem 1.4rem;
  font-family:var(--font-head); font-weight:600; font-size:.95rem;
}
.pkd-search .btn-success{ background:transparent; border-color:var(--green-600); color:var(--green-700); }
.pkd-search .btn-success:hover{ background:var(--green-600); border-color:var(--green-600); color:#fff; }

/* popular-TLD chips under the field */
.pkd-tlds{ display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; margin:.9rem 0 0;
  animation:pkd-fade-up .55s .2s both; }
.pkd-tlds button{
  font-family:var(--font-mono); font-size:.82rem; color:#dbe8fa;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16); border-radius:var(--r-xs);
  padding:.28rem .7rem; cursor:pointer; transition:background .14s,border-color .14s,color .14s;
}
.pkd-tlds button:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }

.pkd-hero__links{ display:flex; gap:1.25rem; justify-content:center; flex-wrap:wrap;
  margin:1.15rem 0 0; font-size:.9rem; animation:pkd-fade-up .55s .24s both; }
.pkd-hero__links a{ color:#9fc4ee; font-weight:600; }
.pkd-hero__links a:hover{ color:#fff; }
.pkd-hero__trust{ list-style:none; display:flex; gap:1.5rem 2.25rem; flex-wrap:wrap; justify-content:center;
  padding:0; margin:2.5rem 0 0; font-size:.9rem; color:#93a6c2; animation:pkd-fade-up .55s .3s both; }
.pkd-hero__trust li{ position:relative; }
.pkd-hero__trust li + li::before{ content:""; position:absolute; left:-1.15rem; top:.35em; bottom:.35em;
  width:1px; background:rgba(255,255,255,.18); }
.pkd-hero__trust b{ color:#fff; font-weight:700; }

/* ---- cards ---- */
.pkd-cards{ background:#fff; }
.pkd-cards__grid{ display:grid; gap:1.25rem; grid-template-columns:repeat(3,1fr); }
.pkd-card{ border:1px solid var(--line); border-radius:var(--r-lg); padding:1.6rem 1.5rem;
  background:var(--bg); transition:box-shadow .16s,border-color .16s,transform .16s;
  animation:pkd-fade-up .5s both; }
.pkd-card:nth-child(2){ animation-delay:.08s; }
.pkd-card:nth-child(3){ animation-delay:.16s; }
.pkd-card:hover{ box-shadow:var(--sh-lg); border-color:var(--blue-100); transform:translateY(-3px); }
.pkd-card__ico{ width:44px; height:44px; display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--blue-50); color:var(--blue-600); margin-bottom:1rem; }
.pkd-card__ico svg{ width:24px; height:24px; }
.pkd-card h3{ font-size:1.12rem; margin:0 0 .5rem; }
.pkd-card p{ color:var(--ink-muted); font-size:.94rem; margin:0 0 1rem; }
.pkd-card__cta{ font-family:var(--font-head); font-weight:600; color:var(--blue-700); font-size:.92rem; }

/* ---- why ---- */
.pkd-why{ background:var(--bg-alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.pkd-why h2{ font-size:clamp(1.5rem,3.4vw,2rem); margin:0 0 1.75rem; text-align:center; }
.pkd-why__grid{ display:grid; gap:1.1rem 2rem; grid-template-columns:repeat(2,1fr); }
.pkd-why__grid > div{ position:relative; padding-left:1.5rem; font-size:.98rem; color:var(--ink-muted); line-height:1.6; }
.pkd-why__grid > div::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px;
  border-radius:2px; background:var(--green-500); }
.pkd-why__grid b{ color:var(--navy-900); font-weight:600; display:block; }

/* ---- cta ---- */
.pkd-cta{ background:var(--navy-900); color:#c3d2e6; }
.pkd-cta .pkd-wrap{ display:grid; gap:2rem; grid-template-columns:repeat(2,1fr); }
.pkd-cta h2{ color:#fff; font-size:1.4rem; margin:0 0 .5rem; }
.pkd-cta p{ margin:0 0 1.1rem; font-size:.96rem; }
.pkd-cta .btn{ font-family:var(--font-head); font-weight:600; margin:0 .5rem .5rem 0; }
.pkd-cta .btn-outline-light{ border:1px solid rgba(255,255,255,.35); color:#fff; }
.pkd-cta .btn-outline-light:hover{ background:rgba(255,255,255,.1); }

@media (max-width:820px){
  .pkd-cards__grid{ grid-template-columns:1fr; }
  .pkd-why__grid{ grid-template-columns:1fr; }
  .pkd-cta .pkd-wrap{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .pkd-search{ flex-wrap:wrap; padding:.55rem; }
  .pkd-search__ico{ display:none; }
  .pkd-search .form-control{ flex-basis:100%; text-align:center; padding:.5rem; }
  .pkd-search .btn{ flex:1; }
  .pkd-hero::before{ background-size:auto 150%; opacity:.55; }
}

/* ==========================================================================
   18 · ORDER FORM  ·  domain checker / cart  (templates/orderforms/standard_cart)
   Strips the stock "yellow globe" look and matches the site.
   ========================================================================== */
#order-standard_cart{ font-family:var(--font-body); }

/* page title */
#order-standard_cart .header-lined{ border-bottom:1px solid var(--line); margin-bottom:1.5rem; padding-bottom:.25rem; }
#order-standard_cart .header-lined h1, #order-standard_cart h1.font-size-36{
  font-family:var(--font-head); font-weight:700; color:var(--navy-900);
  font-size:clamp(1.5rem,3.4vw,2rem); letter-spacing:-.015em;
}
/* the "Find your new domain name…" lede under the title */
#order-standard_cart .cart-body > .header-lined + .sidebar-collapsed + p{
  color:var(--ink-muted); font-size:1rem; max-width:60ch; margin:-.75rem 0 1.25rem;
}

/* ---- hero copy injected into the navy search band (.pkd-dc-head / .pkd-dc-trust) ---- */
.pkd-dc-head{ text-align:center; max-width:620px; margin:0 auto 1.4rem; position:relative; z-index:1; }
.pkd-dc-head h2{
  font-family:var(--font-head); font-weight:700; color:#fff; letter-spacing:-.015em;
  font-size:clamp(1.4rem,3.2vw,1.9rem); margin:0 0 .5rem;
}
.pkd-dc-head p{ color:#b7c6dc; font-size:1rem; margin:0; }
.pkd-dc-trust{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .5rem;
  padding:0; margin:1.35rem auto 0; max-width:640px; position:relative; z-index:1;
}
.pkd-dc-trust li{
  font-family:var(--font-head); font-weight:500; font-size:.82rem; color:#dbe8fa;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.16);
  border-radius:999px; padding:.3rem .8rem;
}

/* ---- extension pricing table (.domain-pricing) → row-card design ---- */
#order-standard_cart .domain-pricing{ margin:2rem 0; background:transparent; border:0; box-shadow:none; }
#order-standard_cart .domain-pricing > h4, #order-standard_cart .domain-pricing .font-size-18{
  font-family:var(--font-head)!important; font-weight:700; color:var(--navy-900);
  margin:0 0 .9rem; padding:0; background:transparent; border:0; font-size:1.15rem!important;
}
#order-standard_cart .domain-pricing .bg-white{ background:transparent!important; }
#order-standard_cart .tld-filters{ display:flex; flex-wrap:wrap; gap:.4rem; padding:0 0 1.1rem; border:0; }
#order-standard_cart .tld-filters a.badge{
  font-family:var(--font-head)!important; font-weight:600!important; font-size:.8rem!important;
  padding:.38rem .85rem!important; border-radius:999px!important;
  background:#fff!important; color:var(--ink-muted)!important; border:1px solid var(--line-strong)!important;
}
#order-standard_cart .tld-filters a.badge.badge-success,
#order-standard_cart .tld-filters a.badge:hover{
  background:var(--blue-600)!important; color:#fff!important; border-color:var(--blue-600)!important;
}
/* header row = quiet labels above the cards */
#order-standard_cart .tld-pricing-header{ background:transparent!important; padding:.1rem 1.15rem .5rem!important; }
#order-standard_cart .tld-pricing-header *{
  background:transparent!important; border:0!important; border-radius:0!important;
  color:var(--ink-subtle)!important; opacity:1!important; height:auto!important;
  font-family:var(--font-head)!important; font-weight:700!important;
  font-size:.68rem!important; text-transform:uppercase; letter-spacing:.06em;
}
/* each extension = its own card */
#order-standard_cart .tld-row{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  margin:0 0 .55rem; padding:.9rem 1.15rem; box-shadow:var(--sh-sm); align-items:center;
  transition:box-shadow .15s, border-color .15s, transform .15s;
}
#order-standard_cart .tld-row:hover{ box-shadow:var(--sh-md); border-color:var(--blue-100); transform:translateY(-1px); }
#order-standard_cart .tld-row.highlighted{ background:var(--bg-alt); border-color:var(--line); }  /* gentle zebra, not a blue ring */
#order-standard_cart .tld-row [class*="col-"]{ border:0!important; background:transparent!important; }
#order-standard_cart .tld-row strong{ font-family:var(--font-mono); font-weight:700; color:var(--navy-900); font-size:1.02rem; }
#order-standard_cart .tld-row .text-center{ font-family:var(--font-head); font-weight:700; color:var(--navy-900); }
#order-standard_cart .tld-row .text-center small{ font-weight:400; color:var(--ink-subtle); }
#order-standard_cart .tld-row.no-tlds{
  color:var(--ink-muted); padding:1.75rem 1.25rem; text-align:center;
  background:#fff; border:1px dashed var(--line-strong); box-shadow:none;
}

/* ---- injected "why + FAQ" block (.pkd-cart-extra) ---- */
.pkd-cart-extra{ margin:2.5rem 0 1rem; display:grid; gap:2.25rem; }
.pkd-cart-extra h3{
  font-family:var(--font-head); font-weight:700; color:var(--navy-900);
  font-size:1.3rem; letter-spacing:-.01em; margin:0 0 1.1rem;
}
.pkd-cx-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; }
.pkd-cx-grid article{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:1.3rem 1.2rem; background:#fff;
  box-shadow:var(--sh-sm); transition:box-shadow .16s, transform .16s;
}
.pkd-cx-grid article:hover{ box-shadow:var(--sh-md); transform:translateY(-2px); }
.pkd-cx-ico{
  width:40px; height:40px; display:grid; place-items:center; border-radius:var(--r-md);
  background:var(--blue-50); color:var(--blue-600); margin-bottom:.85rem;
}
.pkd-cx-ico svg{ width:20px; height:20px; }
.pkd-cx-grid h4{ font-family:var(--font-head); font-weight:600; color:var(--navy-900); font-size:1rem; margin:0 0 .35rem; }
.pkd-cx-grid p{ color:var(--ink-muted); font-size:.9rem; margin:0; line-height:1.55; }

.pkd-cx-faq details{
  border:1px solid var(--line); border-radius:var(--r-md); background:#fff; margin-bottom:.6rem; overflow:hidden;
}
.pkd-cx-faq summary{
  cursor:pointer; list-style:none; padding:.95rem 1.15rem; font-family:var(--font-head); font-weight:600;
  color:var(--navy-900); font-size:.97rem; display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.pkd-cx-faq summary::-webkit-details-marker{ display:none; }
.pkd-cx-faq summary::after{
  content:"+"; font-family:var(--font-mono); font-size:1.1rem; color:var(--blue-600); flex:none; transition:transform .18s;
}
.pkd-cx-faq details[open] summary::after{ content:"\2212"; }
.pkd-cx-faq details[open] summary{ border-bottom:1px solid var(--line); }
.pkd-cx-faq details > div{ padding:.9rem 1.15rem 1.05rem; color:var(--ink-muted); font-size:.93rem; line-height:1.6; }

@media (max-width:900px){ .pkd-cx-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .pkd-cx-grid{ grid-template-columns:1fr; } }

/* ---- sidebar (Categories / Actions) ---- */
#order-standard_cart .cart-sidebar .panel.card-sidebar, #order-standard_cart .panel-sidebar{
  border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-sm); overflow:hidden;
}
#order-standard_cart .card-sidebar .panel-heading, #order-standard_cart .card-sidebar .card-header{
  background:var(--navy-900)!important; color:#fff!important; border:0;
}
#order-standard_cart .card-sidebar .panel-title,
#order-standard_cart .card-sidebar .panel-heading *{ color:#fff!important; font-family:var(--font-head); font-weight:600; }
#order-standard_cart .card-sidebar .list-group-item{
  border:0; border-top:1px solid var(--line); padding:.7rem 1rem; font-size:.9rem; color:var(--ink);
}
#order-standard_cart .card-sidebar .list-group-item:first-child{ border-top:0; }
#order-standard_cart .card-sidebar .list-group-item .fa{ color:var(--blue-600); }
#order-standard_cart .card-sidebar .list-group-item.active{
  background:var(--blue-50); color:var(--blue-700); font-weight:600; box-shadow:inset 3px 0 0 var(--blue-600);
}
#order-standard_cart .card-sidebar .list-group-item.active .fa{ color:var(--blue-700); }
#order-standard_cart .card-sidebar .list-group-item:hover{ background:var(--bg-alt); }

/* ---- the search band (stock: yellow gradient on .container + globe.png on .bg) ---- */
#order-standard_cart .domain-checker-container{
  margin:0 0 1.75rem!important;
  background:
    radial-gradient(700px 300px at 82% -20%, rgba(26,114,212,.30), transparent 60%),
    linear-gradient(180deg, var(--navy-900), #0c2b52 55%, var(--navy-800))!important;
  border-radius:var(--r-lg)!important; position:relative; overflow:hidden; isolation:isolate;
}
#order-standard_cart .domain-checker-container::before{     /* DNS constellation */
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:var(--pkd-constellation) right -20px center / auto 165% no-repeat;
  opacity:.6; animation:pkd-constellation 26s ease-in-out infinite;
  -webkit-mask:linear-gradient(105deg, transparent 26%, #000 76%);
          mask:linear-gradient(105deg, transparent 26%, #000 76%);
}
#order-standard_cart .domain-checker-container::after{      /* travelling glow */
  content:""; position:absolute; z-index:-1; width:420px; height:420px; left:40%; top:-45%;
  background:radial-gradient(circle, rgba(26,114,212,.30), transparent 62%);
  pointer-events:none; animation:pkd-blob 20s ease-in-out infinite;
}
#order-standard_cart .domain-checker-bg{
  background:none!important; background-image:none!important;
  padding:2.4rem 1.5rem!important; position:relative; z-index:1;
}
#order-standard_cart .domain-checker-bg .input-group-box,
#order-standard_cart #frmDomainChecker .input-group{
  background:#fff; border:1px solid rgba(255,255,255,.4); border-radius:var(--r-md);
  padding:.5rem .5rem .5rem 1.1rem; position:relative;
  box-shadow:0 20px 50px -18px rgba(0,0,0,.55), 0 0 0 1px rgba(10,31,61,.04);
  transition:box-shadow .18s;
}
#order-standard_cart #frmDomainChecker .input-group:focus-within{
  box-shadow:0 24px 60px -16px rgba(0,0,0,.6), 0 0 0 4px rgba(26,114,212,.35);
}
#order-standard_cart #frmDomainChecker .form-control{
  border:0!important; box-shadow:none!important; background:transparent!important;
  font-family:var(--font-mono); font-size:1.04rem; color:var(--navy-900); padding:.55rem .4rem;
}
#order-standard_cart #frmDomainChecker .form-control:focus{ outline:0; }
#order-standard_cart #btnCheckAvailability, #order-standard_cart .domain-check-availability{
  border-radius:var(--r-sm)!important; background:var(--blue-600); border-color:var(--blue-600);
  font-family:var(--font-head); font-weight:600; padding:.55rem 1.4rem;
}
#order-standard_cart #btnCheckAvailability:hover{ background:var(--blue-700); border-color:var(--blue-700); }

/* ---- primary availability result ---- */
#order-standard_cart .domain-checker-result-headline{
  text-align:center; background:var(--bg-alt); border:1px solid var(--line);
  border-radius:var(--r-md); padding:1.5rem 1.25rem; margin-bottom:1.5rem;
}
#order-standard_cart .domain-checker-available,
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-checker-invalid{
  font-family:var(--font-head); font-size:1.15rem; font-weight:500; margin:0 0 1rem;
}
#order-standard_cart .domain-checker-available{ color:var(--green-700); }
#order-standard_cart .domain-checker-available strong{ color:var(--navy-900); }
#order-standard_cart .domain-checker-unavailable{ color:var(--red-600); }
#order-standard_cart .domain-price{
  display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin:0;
}
#order-standard_cart .domain-price .price{
  font-family:var(--font-head); font-weight:700; font-size:1.35rem; color:var(--navy-900);
}

/* ---- Add to Cart buttons (primary + suggestions) ---- */
#order-standard_cart .btn-add-to-cart{
  background:var(--green-600)!important; border:1px solid var(--green-600)!important; color:#fff!important;
  border-radius:var(--r-sm)!important; font-family:var(--font-head); font-weight:600; padding:.5rem 1.1rem;
}
#order-standard_cart .btn-add-to-cart:hover{ background:var(--green-700)!important; border-color:var(--green-700)!important; }
#order-standard_cart .btn-add-to-cart .added{ color:#fff; }

/* ---- suggested domains list ---- */
#order-standard_cart .suggested-domains{
  border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-sm);
}
#order-standard_cart .suggested-domains > .panel-heading,
#order-standard_cart .suggested-domains > .card-header{
  background:var(--bg-alt)!important; color:var(--navy-900)!important;
  font-family:var(--font-head); font-weight:600; padding:.9rem 1.1rem; border-bottom:1px solid var(--line);
}
#order-standard_cart .domain-suggestion.list-group-item{
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  border:0; border-top:1px solid var(--line); padding:.85rem 1.1rem;
}
#order-standard_cart .domain-suggestion:hover{ background:var(--bg-alt); }
#order-standard_cart .domain-suggestion .domain{ font-family:var(--font-head); font-weight:600; color:var(--navy-900); }
#order-standard_cart .domain-suggestion .extension{ font-family:var(--font-mono); color:var(--blue-700); font-weight:500; }
#order-standard_cart .domain-suggestion .actions{
  margin-left:auto; display:flex; align-items:center; gap:.9rem;
}
#order-standard_cart .domain-suggestion .actions .price{
  font-family:var(--font-head); font-weight:700; color:var(--navy-900); font-size:.98rem;
}
#order-standard_cart .domain-suggestion .promo span{
  font-family:var(--font-head); font-size:.68rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:.1rem .45rem; border-radius:var(--r-xs);
}
#order-standard_cart .sales-group-hot{ background:var(--red-50); color:var(--red-600); }
#order-standard_cart .sales-group-new{ background:var(--blue-50); color:var(--blue-700); }
#order-standard_cart .sales-group-sale{ background:var(--gold-50); color:var(--gold-700); }
#order-standard_cart .more-suggestions, #order-standard_cart a.get-more-suggestions{
  display:block; text-align:center; padding:.85rem; font-family:var(--font-head); font-weight:600; color:var(--blue-700);
}

/* ---- "Add Web Hosting" / "Transfer your domain to us" promo cards ----
   stock: two .domain-promo-box with a giant fa-4x icon + gold/blue text.
   Rebuild as the marketing site's feature cards. */
#order-standard_cart .row:has(> [class*="col-"] > .domain-promo-box) > [class*="col-"]{ display:flex; }
#order-standard_cart .domain-promo-box{
  flex:1; display:flex; flex-direction:column; align-items:flex-start; gap:.15rem;
  background:#fff; border:1px solid var(--line); border-top:3px solid var(--blue-600);
  border-radius:var(--r-lg); padding:1.8rem 1.65rem; box-shadow:var(--sh-sm); margin-bottom:1.25rem;
  transition:box-shadow .16s, transform .16s, border-color .16s;
}
#order-standard_cart .domain-promo-box:hover{ box-shadow:var(--sh-lg); transform:translateY(-3px); }
#order-standard_cart .domain-promo-box .clearfix{ display:contents; }   /* flatten the header wrapper */
#order-standard_cart .domain-promo-box i.fa-4x,
#order-standard_cart .domain-promo-box .clearfix > i{
  font-size:1.4rem!important; width:48px; height:48px; display:grid; place-items:center;
  background:var(--blue-50); color:var(--blue-600); border-radius:var(--r-md);
  margin:0 0 1.1rem!important; float:none!important;
}
#order-standard_cart .domain-promo-box h3{
  font-family:var(--font-head)!important; font-weight:600; color:var(--navy-900);
  font-size:1.16rem!important; margin:0 0 .35rem!important; white-space:normal!important; line-height:1.3;
}
#order-standard_cart .domain-promo-box .font-bold{
  font-weight:600!important; font-size:.92rem; color:var(--ink-muted)!important; margin:0 0 .35rem!important;
}
#order-standard_cart .domain-promo-box p{ color:var(--ink-muted); font-size:.94rem; margin:0 0 .5rem; }
#order-standard_cart .domain-promo-box p.small{ font-size:.78rem; color:var(--ink-subtle); order:9; margin:.7rem 0 0; }
#order-standard_cart .domain-promo-box .btn{
  margin-top:auto; align-self:flex-start; border:1px solid transparent;
  border-radius:var(--r-sm); font-family:var(--font-head); font-weight:600; padding:.62rem 1.35rem;
}
#order-standard_cart .domain-promo-box .btn-warning{
  background:var(--blue-600)!important; border-color:var(--blue-600)!important; color:#fff!important;
}
#order-standard_cart .domain-promo-box .btn-warning:hover{ background:var(--blue-700)!important; border-color:var(--blue-700)!important; }
#order-standard_cart .domain-promo-box .btn-primary{
  background:var(--green-600)!important; border-color:var(--green-600)!important; color:#fff!important;
}
#order-standard_cart .domain-promo-box .btn-primary:hover{ background:var(--green-700)!important; border-color:var(--green-700)!important; }
/* the transfer card (2nd) picks up the green accent to match its CTA */
#order-standard_cart [class*="col-"]:last-child > .domain-promo-box{ border-top-color:var(--green-600); }
#order-standard_cart [class*="col-"]:last-child > .domain-promo-box i.fa-4x,
#order-standard_cart [class*="col-"]:last-child > .domain-promo-box .clearfix > i{
  background:var(--green-50); color:var(--green-600);
}
@media (max-width:767px){
  #order-standard_cart .row:has(> [class*="col-"] > .domain-promo-box) > [class*="col-"]{ display:block; }
}

/* ==========================================================================
   18b · CHECKOUT FLOW  (a=confdomains / a=view / a=checkout)
   ========================================================================== */
/* section headers — the centred blue ".sub-heading" was the "old" tell */
#order-standard_cart .sub-heading{
  text-align:left!important; margin:2rem 0 1.15rem; padding:0 0 .55rem;
  border-bottom:1px solid var(--line);
}
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading{
  font-family:var(--font-head)!important; font-weight:700; color:var(--navy-900)!important;
  font-size:1.15rem; letter-spacing:-.01em; background:transparent!important;
}
#order-standard_cart form > .sub-heading:first-child,
#order-standard_cart .cart-body > form > .sub-heading:first-of-type{ margin-top:.5rem; }
#order-standard_cart form > p, #order-standard_cart .cart-body > p{ color:var(--ink-muted); }

/* form fields */
#order-standard_cart .form-group{ margin-bottom:1rem; }
#order-standard_cart .form-group > label, #order-standard_cart label.control-label{
  font-family:var(--font-head); font-weight:600; color:var(--navy-800); font-size:.85rem;
  margin-bottom:.3rem; display:inline-block;
}
#order-standard_cart .form-control, #order-standard_cart select.form-control{
  border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:.6rem .75rem;
  font-family:var(--font-body); color:var(--ink); background:#fff; box-shadow:none;
}
#order-standard_cart .form-control:focus{
  border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(0,87,184,.14); outline:0;
}

/* confdomains — one card per domain */
#frmConfigureDomains > .row{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.1rem 1.25rem; margin:0 0 1rem; box-shadow:var(--sh-sm);
}
#frmConfigureDomains .sub-heading{ margin-bottom:.4rem; }
#frmConfigureDomains .sub-heading + .row{ margin-top:0; }
#frmConfigureDomains .form-group > a{ font-family:var(--font-head); font-weight:600; }

/* the "[No Hosting! Click to Add]" link → animated "Buy Hosting" button (hook retexts it) */
#order-standard_cart .pkd-buy-hosting{
  display:inline-flex; align-items:center; gap:.45rem; vertical-align:middle;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-500));
  color:#fff!important; font-family:var(--font-head); font-weight:600; font-size:.88rem;
  line-height:1; padding:.6rem 1.05rem; border-radius:var(--r-sm); text-decoration:none!important;
  position:relative; overflow:hidden; margin-top:.35rem;
  box-shadow:0 4px 12px -2px rgba(0,87,184,.42);
  animation:pkd-buy-pulse 2.6s ease-in-out infinite;
  transition:transform .14s, box-shadow .14s;
}
#order-standard_cart .pkd-buy-hosting:hover{
  transform:translateY(-1px); color:#fff!important;
  box-shadow:0 8px 22px -3px rgba(0,87,184,.55);
}
#order-standard_cart .pkd-buy-hosting svg{ width:15px; height:15px; }
#order-standard_cart .pkd-buy-hosting::after{     /* moving shine */
  content:""; position:absolute; top:0; left:-70%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:pkd-shine 3s ease-in-out infinite;
}
@keyframes pkd-buy-pulse{
  0%,100%{ box-shadow:0 4px 12px -2px rgba(0,87,184,.42); }
  50%    { box-shadow:0 5px 22px 0 rgba(0,87,184,.6); }
}
@keyframes pkd-shine{ 0%{ left:-70%; } 58%,100%{ left:140%; } }
#order-standard_cart .text-center.pt-4 .btn, #order-standard_cart #btnContinueDomainConfig{
  background:var(--blue-600)!important; border-color:var(--blue-600)!important; border-radius:var(--r-sm);
  font-family:var(--font-head); font-weight:600; padding:.8rem 2rem;
}

/* ---- checkout: personal-information form redesign ---- */
/* the "Please enter your personal details…" line + Already Registered button */
#order-standard_cart .cart-body > .already-registered,
#order-standard_cart .already-registered{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background:var(--blue-50)!important; border:1px solid var(--blue-100)!important;
  border-radius:var(--r-md); padding:.9rem 1.15rem; margin-bottom:1.5rem;
  font-family:var(--font-body); color:var(--navy-800);
}
#order-standard_cart #btnAlreadyRegistered, #order-standard_cart #btnNewUserSignup,
#order-standard_cart .already-registered .btn{
  flex:none; order:2; background:#fff!important; border:1px solid var(--blue-600)!important; color:var(--blue-700)!important;
  border-radius:var(--r-sm)!important; font-family:var(--font-head)!important; font-weight:600; padding:.55rem 1.15rem!important;
}
#order-standard_cart #btnAlreadyRegistered:hover, #order-standard_cart #btnNewUserSignup:hover,
#order-standard_cart .already-registered .btn:hover{ background:var(--blue-600)!important; color:#fff!important; }

/* intl-tel-input phone field — room for the flag/country dropdown */
#order-standard_cart .form-group.prepend-icon input[name="phonenumber"],
#order-standard_cart .form-group.prepend-icon .iti input,
#order-standard_cart input[type="tel"].form-control{ padding-left:92px!important; }
#order-standard_cart .form-group.prepend-icon:has(.iti) .field-icon{ display:none; }
#order-standard_cart .iti__selected-flag{ border-radius:var(--r-sm) 0 0 var(--r-sm); background:var(--bg-alt); }

/* the signup + security fields sit in one clean card */
#order-standard_cart #containerNewUserSignup, #order-standard_cart #containerNewUserSecurity{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:1.5rem 1.6rem .5rem; box-shadow:var(--sh-sm); margin-bottom:1.25rem;
}
/* the existing-customer login — a compact blue-tinted card */
#order-standard_cart #containerExistingUserSignin{
  background:linear-gradient(180deg, var(--blue-50), #fff 55%)!important;
  border:1px solid var(--blue-100)!important; border-radius:var(--r-lg)!important;
  box-shadow:var(--sh-sm); max-width:540px; padding:1.5rem 1.6rem!important; margin-bottom:1.5rem;
}
#order-standard_cart #containerExistingUserSignin > .row{ margin:0!important; }
#order-standard_cart #containerExistingUserSignin > .row > .col-sm-6{ padding:0!important; }
#order-standard_cart #containerExistingUserSignin > .row > .col-sm-6:first-child .form-group{ margin-bottom:.9rem; }
#order-standard_cart #containerExistingUserSignin .text-center{ margin-top:.4rem; }
#order-standard_cart #existingLoginMessage:not(.w-hidden){ margin-bottom:1rem; border-radius:var(--r-sm); }
#order-standard_cart #containerNewUserSignup .sub-heading:first-child,
#order-standard_cart #containerExistingUserSignin .sub-heading:first-child{ margin-top:0; }
#order-standard_cart #containerExistingUserSignin .sub-heading{ margin-top:0; }

/* fields with the prepend-icon pattern */
#order-standard_cart .form-group.prepend-icon{ position:relative; margin-bottom:.9rem; }
#order-standard_cart .form-group.prepend-icon .field-icon{
  position:absolute; left:0; top:0; bottom:0; width:42px; display:grid; place-items:center;
  color:var(--ink-subtle); pointer-events:none; margin:0; z-index:2;
}
#order-standard_cart .form-group.prepend-icon .field-icon i{ font-size:.9rem; }
#order-standard_cart .form-group.prepend-icon .form-control,
#order-standard_cart .form-group.prepend-icon .field{
  padding-left:42px!important; height:auto; min-height:46px;
  border:1px solid var(--line-strong)!important; border-radius:var(--r-sm)!important;
  font-family:var(--font-body); color:var(--ink); background:#fff;
}
#order-standard_cart .form-group.prepend-icon .form-control:focus,
#order-standard_cart .form-group.prepend-icon .field:focus{
  border-color:var(--blue-600)!important; box-shadow:0 0 0 3px rgba(0,87,184,.13)!important; outline:0;
}
#order-standard_cart .form-group.prepend-icon:focus-within .field-icon{ color:var(--blue-600); }
#order-standard_cart .form-control::placeholder, #order-standard_cart .field::placeholder{ color:var(--ink-subtle); }

/* the country / phone-cc selects and plain selects */
#order-standard_cart select.form-control, #order-standard_cart .custom-select{
  min-height:46px; border:1px solid var(--line-strong)!important; border-radius:var(--r-sm)!important;
}
#order-standard_cart .iti, #order-standard_cart .intl-tel-input{ width:100%; }
#order-standard_cart .iti__flag-container{ border-right:1px solid var(--line); }

/* password strength meter */
#order-standard_cart #pwStrengthMeter .progress, #order-standard_cart .password-strength .progress{
  height:6px; border-radius:999px; background:var(--bg-alt2);
}
#order-standard_cart #pwStrengthMeter .progress-bar,
#order-standard_cart .password-strength .progress-bar{ background:var(--blue-600); border-radius:999px; }
#order-standard_cart #passwdFeedback.alert-info{
  background:var(--blue-50)!important; border-color:var(--blue-100)!important; color:var(--blue-700)!important;
  border-radius:var(--r-sm); font-size:.88rem;
}

/* the "marketing emails" / TOS checkbox rows */
#order-standard_cart .checkbox, #order-standard_cart .form-check{ font-size:.9rem; color:var(--ink-muted); }
#order-standard_cart #containerNewUserSignup .row + .row{ margin-top:0; }

/* login-inside-checkout button */
#order-standard_cart #btnExistingLogin, #order-standard_cart #containerExistingUserSignin button[type=submit]{
  display:block; width:100%; background:var(--blue-600)!important; border-color:var(--blue-600)!important; color:#fff!important;
  border-radius:var(--r-sm)!important; font-family:var(--font-head); font-weight:600; padding:.7rem!important; margin-top:.3rem;
}
#order-standard_cart #btnExistingLogin:hover{ background:var(--blue-700)!important; }

/* account selection cards (checkout) */
#order-standard_cart .account{
  border:1px solid var(--line)!important; border-radius:var(--r-md)!important;
  padding:1rem 1.15rem!important; margin-bottom:.6rem!important; background:#fff!important;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
#order-standard_cart .account:hover{ border-color:var(--blue-500)!important; }
#order-standard_cart .account.active{
  border-color:var(--blue-600)!important; background:var(--blue-50)!important;
  box-shadow:0 0 0 3px rgba(0,87,184,.12);
}
#order-standard_cart .account .address strong{ font-family:var(--font-head); color:var(--navy-900); }
#order-standard_cart .account .label-info, #order-standard_cart .label-info{
  background:var(--blue-600)!important; font-family:var(--font-head); font-weight:600;
}
#order-standard_cart .already-registered{
  background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--r-md); padding:.9rem 1.15rem;
}

/* payment method chooser */
#order-standard_cart .payment-methods-container, #order-standard_cart .paymentmethods,
#order-standard_cart #paymentMethodsContainer{ display:flex; flex-wrap:wrap; gap:.55rem; margin:.5rem 0 1rem; }
#order-standard_cart .payment-methods-container label,
#order-standard_cart #paymentMethodsContainer label{
  border:1px solid var(--line-strong); border-radius:var(--r-md); padding:.65rem 1.1rem;
  font-family:var(--font-head); font-weight:600; color:var(--navy-800); cursor:pointer; margin:0;
  transition:border-color .15s, background .15s;
}
#order-standard_cart .payment-methods-container label:hover{ border-color:var(--blue-500); background:var(--blue-50); }
#order-standard_cart .payment-methods-container input:checked + label,
#order-standard_cart label.payment-method-active{
  border-color:var(--blue-600); background:var(--blue-50); color:var(--blue-700);
}

/* complete-order button + security note */
#order-standard_cart #btnCompleteOrder{
  background:var(--green-600)!important; border-color:var(--green-600)!important;
  border-radius:var(--r-sm); font-family:var(--font-head); font-weight:700; padding:.85rem 2rem;
}
#order-standard_cart #btnCompleteOrder:hover{ background:var(--green-700)!important; }
#order-standard_cart .checkout-security-msg{
  background:var(--green-50)!important; border:1px solid #bfe3cd!important; color:var(--green-700)!important;
  border-radius:var(--r-md);
}

/* view cart — items as row cards */
#order-standard_cart .view-cart-items-header{
  background:transparent; color:var(--ink-subtle); border:0; padding:.1rem 1.15rem .5rem;
  font-family:var(--font-head); font-weight:700; font-size:.68rem;
  text-transform:uppercase; letter-spacing:.06em;
}
#order-standard_cart .view-cart-items{ border:0; background:transparent; }
#order-standard_cart .view-cart-items .item{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.05rem 1.25rem; margin-bottom:.6rem; box-shadow:var(--sh-sm);
  transition:box-shadow .15s, border-color .15s;
}
#order-standard_cart .view-cart-items .item:hover{ box-shadow:var(--sh-md); border-color:var(--blue-100); }
#order-standard_cart .item-title{ font-family:var(--font-head); font-weight:600; color:var(--navy-900); }
#order-standard_cart .item-domain{
  font-family:var(--font-mono); color:var(--blue-700); font-size:.9rem; display:block; margin-top:.15rem;
}
#order-standard_cart .item-price > span[name]{
  font-family:var(--font-head); font-weight:700; color:var(--navy-900); font-size:1.05rem;
}
#order-standard_cart .item-price .cycle{ display:block; color:var(--ink-subtle); font-size:.8rem; }
#order-standard_cart .btn-remove-from-cart{ color:var(--ink-subtle)!important; }
#order-standard_cart .btn-remove-from-cart:hover{ color:var(--red-600)!important; }
#order-standard_cart .btn-empty-cart, #order-standard_cart #emptyCart{
  background:#fff!important; border:1px solid var(--line-strong)!important; color:var(--red-600)!important;
}

/* view cart — order summary sidebar (stock all.min.css paints it #666 with 0 padding) */
#order-standard_cart .order-summary{
  border:1px solid var(--line)!important; border-radius:var(--r-lg)!important; padding:1.4rem!important;
  background:#fff!important; box-shadow:var(--sh-sm); margin-bottom:1.5rem!important;
}
#order-standard_cart .order-summary h2, #order-standard_cart .order-summary .font-size-30{
  font-family:var(--font-head)!important; font-weight:700!important; color:var(--navy-900)!important;
  font-size:1.25rem!important; margin:0 0 1rem!important; padding:0 0 .9rem!important; text-align:left!important;
  background:transparent!important; border:0!important; border-bottom:1px solid var(--line)!important;
}
#order-standard_cart .order-summary .subtotal, #order-standard_cart .order-summary .bordered-totals{
  border-bottom-color:var(--line)!important; font-size:1rem!important;
}
#order-standard_cart .summary-container .subtotal,
#order-standard_cart .summary-container .recurring-totals{ padding:.5rem 0; color:var(--ink-muted); font-size:.92rem; }
#order-standard_cart .summary-container .subtotal span, #order-standard_cart #subtotal{ color:var(--navy-900); font-weight:600; }
#order-standard_cart .total-due-today{
  margin:.9rem 0; padding:.95rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  font-family:var(--font-head);
}
#order-standard_cart .total-due-today .amt{ font-size:1.5rem; font-weight:700; color:var(--navy-900); display:block; }
#order-standard_cart .total-due-today > span:last-child{ color:var(--ink-muted); font-size:.85rem; }
#order-standard_cart .btn-checkout, #order-standard_cart #checkout{
  display:block; width:100%; text-align:center;
  background:var(--green-600)!important; border-color:var(--green-600)!important; color:#fff!important;
  border-radius:var(--r-sm); font-family:var(--font-head); font-weight:600; padding:.85rem;
}
#order-standard_cart .btn-checkout:hover, #order-standard_cart #checkout:hover{ background:var(--green-700)!important; }
#order-standard_cart .btn-continue-shopping{ color:var(--blue-700)!important; font-weight:600; }
#order-standard_cart .promotion, #order-standard_cart #inputPromotionCode{ font-family:var(--font-body); }

@media (max-width:900px){
  #order-standard_cart .secondary-cart-sidebar .order-summary{ position:static; margin-top:1.5rem; }
}

/* ---- generic table steps ---- */
#order-standard_cart .clientarea-table th, #order-standard_cart table.table thead th{
  background:var(--bg-alt); font-family:var(--font-head); color:var(--navy-800);
}

/* ==========================================================================
   19 · SITE-WIDE BACKGROUND + MOTION
   ========================================================================== */
body, body.primary-bg-color{
  background:
    radial-gradient(820px 520px at 100% -4%, rgba(26,114,212,.07), transparent 60%),
    radial-gradient(640px 480px at -6% 106%, rgba(17,112,51,.05), transparent 58%),
    var(--bg-alt) !important;
  background-attachment:fixed, fixed, fixed !important;
}
/* let the body wash show through the content column (panels stay solid white).
   Note: .primary-bg-color is also a utility on spans/blocks — only neutralise
   it on the big layout wrappers, never globally. */
#main-body, .body-wrapper, #order-standard_cart,
#order-standard_cart .cart-body, .primary-content.primary-bg-color{ background:transparent!important; }

@keyframes pkd-constellation{
  0%,100%{ transform:translate3d(0,0,0) scale(1);      opacity:.78; }
  50%    { transform:translate3d(-20px,12px,0) scale(1.03); opacity:1; }
}
@keyframes pkd-blob{
  0%,100%{ transform:translate(0,0); }
  33%    { transform:translate(46px,26px); }
  66%    { transform:translate(-30px,14px); }
}
@keyframes pkd-fade-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } }
@keyframes pkd-ping{
  0%     { box-shadow:0 0 0 0 rgba(26,114,212,.5); }
  80%,100%{ box-shadow:0 0 0 14px rgba(26,114,212,0); }
}

@media (prefers-reduced-motion: reduce){
  .pkd-hero::before, .pkd-hero::after,
  #order-standard_cart .domain-checker-container::before,
  #order-standard_cart .domain-checker-container::after,
  .pkd-hero h1, .pkd-hero__sub, .pkd-hero__search, .pkd-tlds,
  .pkd-hero__links, .pkd-hero__trust, .pkd-card, .pkd-search:focus-within .pkd-search__ico,
  #order-standard_cart .pkd-buy-hosting, #order-standard_cart .pkd-buy-hosting::after{
    animation:none!important;
  }
  body, body.primary-bg-color{ background-attachment:scroll !important; }
}

/* ==========================================================================
   20 · SERVICES · PRODUCT DETAILS · HOSTING PRICING
   ========================================================================== */

/* ---- store: hosting packages → HORIZONTAL ROWS ---------------------------- */
.pkd-pricing-band{ margin:4rem 0; }
.pkd-pricing-head{ max-width:640px; margin:0 0 1.75rem; }
.pkd-pricing-head h2{
  font-family:var(--font-head); font-weight:700; color:var(--navy-900); letter-spacing:-.015em;
  font-size:clamp(1.35rem,3vw,1.8rem); margin:0 0 .45rem;
}
.pkd-pricing-head p{ color:var(--ink-muted); font-size:.98rem; margin:0; }

/* stock markup is .products > .row.row-eq-height > .col-md-6 > .product —
   flatten the row/columns so each product is a full-width stacked row */
#order-standard_cart .products{ display:block; margin:0; padding:0; }
#order-standard_cart .products > .row, #order-standard_cart .products .row-eq-height{ display:block!important; margin:0!important; }
#order-standard_cart .products [class*="col-"]{
  flex:0 0 100%!important; max-width:100%!important; width:100%!important; padding:0!important; margin:0 0 .85rem!important;
}
#order-standard_cart .products .product{
  float:none!important; width:100%!important; max-width:100%!important; margin:0!important; position:relative; overflow:visible;
  display:grid!important; grid-template-columns:190px minmax(0,1fr) auto; align-items:center; gap:1.75rem;
  background:#fff!important; border:1px solid var(--line)!important; border-left:4px solid var(--line-strong)!important;
  border-radius:var(--r-md)!important; padding:1.5rem 1.75rem!important; box-shadow:var(--sh-sm)!important; transform:none;
  transition:box-shadow .15s, border-color .15s; min-height:0;
}
#order-standard_cart .products .product::before, #order-standard_cart .products .product::after{ content:none; }
#order-standard_cart .products .product:hover{ box-shadow:var(--sh-md); border-left-color:var(--blue-500); }
#order-standard_cart .products .product > header,
#order-standard_cart .products .product .product-desc,
#order-standard_cart .products .product > footer,
#order-standard_cart .products .product footer{
  float:none!important; width:auto!important; margin:0!important; padding:0!important;
  background:transparent!important; border:0!important; box-sizing:border-box;
}

/* col 1 — name + tier icon + badge */
#order-standard_cart .products .product > header{ display:flex!important; align-items:center; gap:.8rem; text-align:left!important; }
#order-standard_cart .products .product .pkd-tier-ico{
  width:40px; height:40px; flex:none; display:grid; place-items:center; margin:0!important;
  border-radius:var(--r-md); background:var(--blue-50); color:var(--blue-600);
}
#order-standard_cart .products .product .pkd-tier-ico svg{ width:19px; height:19px; }
#order-standard_cart .products .product > header span, #order-standard_cart .products .product > header [id$="-name"]{
  font-family:var(--font-head); font-weight:700; color:var(--navy-900)!important; font-size:1.08rem; letter-spacing:-.01em;
}

/* col 2 — specs inline */
#order-standard_cart .products .product .product-desc{ min-width:0; }
#order-standard_cart .pkd-spec{
  list-style:none; margin:0!important; padding:0!important; display:flex!important; flex-wrap:wrap; gap:.3rem 1.35rem;
}
#order-standard_cart .pkd-spec li{
  display:flex!important; align-items:center; gap:.4rem; padding:0!important; border:0!important;
  font-size:.85rem; color:var(--ink-muted);
}
#order-standard_cart .pkd-spec li svg{ width:13px; height:13px; color:var(--green-600); flex:none; margin:0!important; }
#order-standard_cart .pkd-spec li b{ color:var(--navy-900); font-weight:600; }

/* col 3 — price + button */
#order-standard_cart .products .product > footer{ display:flex!important; align-items:center; gap:1.3rem; text-align:right; }
#order-standard_cart .products .product .product-pricing{
  font-family:var(--font-head); color:var(--ink-subtle)!important; font-size:.7rem; text-align:right; line-height:1.2; white-space:nowrap; margin:0!important;
}
#order-standard_cart .products .product .product-pricing .price{
  display:block; font-family:var(--font-head); font-weight:800; color:var(--navy-900)!important;
  font-size:1.5rem; letter-spacing:-.02em; line-height:1.05;
}
#order-standard_cart .products .product .product-pricing .price::before{
  content:"Rs "; font-size:.78rem; font-weight:700; color:var(--ink-muted); letter-spacing:0;
}
#order-standard_cart .products .product > footer .btn-order-now,
#order-standard_cart .products .product > footer a.btn{
  display:inline-flex!important; align-items:center; gap:.45rem; white-space:nowrap;
  background:linear-gradient(135deg, var(--blue-600), var(--blue-500))!important; background-color:var(--blue-600)!important;
  border:0!important; color:#fff!important; border-radius:var(--r-sm)!important;
  font-family:var(--font-head); font-weight:700; font-size:.9rem!important; padding:.65rem 1.3rem!important;
  box-shadow:0 6px 14px -4px rgba(0,87,184,.45); transition:transform .14s, box-shadow .14s;
}
#order-standard_cart .products .product > footer .btn-order-now:hover,
#order-standard_cart .products .product > footer a.btn:hover{
  transform:translateY(-1px); box-shadow:0 10px 20px -4px rgba(0,87,184,.55);
  background:linear-gradient(135deg, var(--blue-700), var(--blue-600))!important;
}

/* recommended row */
#order-standard_cart .products .product.pkd-recommended,
#order-standard_cart .products .product.featured,
#order-standard_cart .products .product.recommended{
  border-color:var(--blue-100)!important; border-left-color:var(--blue-600)!important;
  box-shadow:0 0 0 1px var(--blue-100), var(--sh-md)!important;
  background:linear-gradient(90deg, var(--blue-50), #fff 45%)!important;
}
#order-standard_cart .products .product.pkd-recommended .pkd-tier-ico,
#order-standard_cart .products .product.featured .pkd-tier-ico{ background:var(--blue-600)!important; color:#fff!important; }
#order-standard_cart .products .product.pkd-recommended > header::after,
#order-standard_cart .products .product.featured > header::after{
  content:"Popular"; font-family:var(--font-head); font-weight:800; font-size:.58rem; letter-spacing:.09em;
  text-transform:uppercase; color:#3d3110; background:var(--gold-500); padding:.15rem .5rem; border-radius:var(--r-xs);
}

/* store currency selector */
#order-standard_cart select[name="currency"], #order-standard_cart .products ~ form .form-control{
  border-radius:var(--r-sm); border-color:var(--line-strong);
}

@media (max-width:860px){
  #order-standard_cart .products .product{
    grid-template-columns:1fr!important; gap:1rem; padding:1.35rem;
  }
  #order-standard_cart .products .product > footer{ justify-content:space-between; }
  #order-standard_cart .products .product .product-pricing{ text-align:left; }
}

/* ---- My Services list (clientareaproducts) ---- */
#tableServicesList, .clientareaproducts-table, #productsTable{ }
.clientarea-services-card, .services-list .card{ border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.service-list-item, .services-list .list-group-item{
  border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:.75rem; padding:1.1rem 1.25rem; background:#fff;
  transition:border-color .15s, box-shadow .15s;
}
.service-list-item:hover, .services-list .list-group-item:hover{ border-color:var(--blue-200,#b9d3f0); box-shadow:var(--sh-md); }
.service-list-item .domain, .service-list-item .service-domain{ font-family:var(--font-mono); color:var(--blue-700); }

/* ---- product / service details page ---- */
.clientareaproductdetails .panel, .product-details-panel{ border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); }
.product-details-overview, .service-info-panel{ background:#fff; }
.clientareaproductdetails .nav-tabs, .product-details .nav-tabs{ border-bottom:1px solid var(--line); }
.clientareaproductdetails .nav-tabs > li > a, .product-details .nav-tabs .nav-link{
  font-family:var(--font-head); font-weight:600; color:var(--ink-muted); border:0; border-bottom:2px solid transparent;
  padding:.85rem 1.1rem;
}
.clientareaproductdetails .nav-tabs > li.active > a, .product-details .nav-tabs .nav-link.active{
  color:var(--blue-700); border-bottom-color:var(--blue-600); background:transparent;
}
/* usage bars */
.clientareaproductdetails .progress, .usage-bar .progress, .service-usage .progress{
  height:10px; border-radius:999px; background:var(--bg-alt2); box-shadow:none; overflow:hidden;
}
.clientareaproductdetails .progress-bar, .usage-bar .progress-bar{
  background:linear-gradient(90deg, var(--blue-600), var(--blue-500)); border-radius:999px;
}
.progress-bar.progress-bar-danger, .progress-bar.bg-danger{ background:linear-gradient(90deg, var(--red-600), #e05656)!important; }
.progress-bar.progress-bar-warning, .progress-bar.bg-warning{ background:linear-gradient(90deg, var(--gold-500), #e6bb4d)!important; }
.progress-bar.progress-bar-success, .progress-bar.bg-success{ background:linear-gradient(90deg, var(--green-600), var(--green-500))!important; }
.usage-title, .service-usage h4{ font-family:var(--font-head); font-weight:600; color:var(--navy-800); font-size:.9rem; }
.usage-value{ font-family:var(--font-mono); color:var(--navy-900); }

/* management action buttons on the details page */
.clientareaproductdetails .btn-group .btn, .product-actions .btn, .module-commands .btn{
  font-family:var(--font-head); font-weight:600;
}
.product-details-actions .btn-primary, .service-quick-actions .btn{
  background:var(--blue-600); border-color:var(--blue-600);
}

/* ---- My Domains list ---- */
.clientareadomains .table td .domain, td.domain-name, .domain-list .domain{
  font-family:var(--font-mono); color:var(--blue-700); font-weight:600;
}

/* ==========================================================================
   21 · "CHOOSE A DOMAIN" step  (cart.php?a=add&pid=X — domainoptions.tpl)
   ========================================================================== */
#order-standard_cart #frmProductDomain{ max-width:760px; }
#order-standard_cart .domain-selection-options{ display:flex; flex-direction:column; gap:.9rem; margin:1.25rem 0 2rem; }
#order-standard_cart .domain-selection-options .option{
  background:#fff; border:1.5px solid var(--line)!important; border-radius:var(--r-lg)!important;
  padding:1.2rem 1.4rem!important; margin:0!important; transition:border-color .15s, box-shadow .15s, background .15s;
}
#order-standard_cart .domain-selection-options .option:hover{ border-color:var(--blue-200,#b9d3f0); }
#order-standard_cart .domain-selection-options .option:has(.iradio_square-blue.checked),
#order-standard_cart .domain-selection-options .option.selected{
  border-color:var(--blue-600); background:var(--blue-50); box-shadow:0 0 0 3px rgba(0,87,184,.1);
}
#order-standard_cart .domain-selection-options .option > label{
  display:flex; align-items:center; gap:.7rem; margin:0; cursor:pointer;
  font-family:var(--font-head); font-weight:600; color:var(--navy-900); font-size:1rem;
}
#order-standard_cart .domain-selection-options .domain-input-group{
  margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line);
}
#order-standard_cart .domain-selection-options .domain-input-group .row{ margin:0; align-items:center; }
#order-standard_cart .domain-selection-options .domains-row{ gap:0; }
#order-standard_cart .domain-selection-options .input-group{
  border:1px solid var(--line-strong); border-radius:var(--r-sm); overflow:hidden; background:#fff;
}
#order-standard_cart .domain-selection-options .input-group:focus-within{ border-color:var(--blue-600); box-shadow:0 0 0 3px rgba(0,87,184,.13); }
#order-standard_cart .domain-selection-options .input-group-text{
  background:var(--bg-alt); border:0; color:var(--ink-subtle); font-family:var(--font-mono); font-size:.9rem;
}
#order-standard_cart .domain-selection-options .domain-input-group .form-control{
  border:0!important; box-shadow:none!important; font-family:var(--font-mono); color:var(--navy-900);
}
#order-standard_cart .domain-selection-options select.form-control{
  border:1px solid var(--line-strong); border-radius:var(--r-sm); font-family:var(--font-mono); margin-left:.4rem;
}
#order-standard_cart .domain-selection-options .btn-primary{
  background:linear-gradient(135deg, var(--blue-600), var(--blue-500))!important; border:0!important;
  border-radius:var(--r-sm); font-family:var(--font-head); font-weight:700; padding:.7rem 1rem;
  box-shadow:0 6px 14px -4px rgba(0,87,184,.4);
}
#order-standard_cart .domain-selection-options .btn-primary:hover{ background:linear-gradient(135deg, var(--blue-700), var(--blue-600))!important; }
/* the domain check result under an option */
#order-standard_cart #frmProductDomain .domaincheckresult, #order-standard_cart .domain-check-result-inline{
  margin-top:.9rem; padding:.8rem 1rem; border-radius:var(--r-sm); font-family:var(--font-head); font-weight:600;
}
#order-standard_cart .domaincheckresult.available{ background:var(--green-50); color:var(--green-700); border:1px solid #bfe3cd; }
#order-standard_cart .domaincheckresult.unavailable{ background:var(--red-50); color:var(--red-600); border:1px solid #f3c9c9; }
/* the intro line injected by the hook */
.pkd-domain-intro{
  background:linear-gradient(180deg, var(--navy-900), #0c2b52); color:#fff; border-radius:var(--r-lg);
  padding:1.6rem 1.75rem; margin:1.25rem 0 1.75rem; position:relative; overflow:hidden;
}
.pkd-domain-intro::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--pkd-constellation) right -20px center / auto 160% no-repeat; opacity:.5;
  -webkit-mask:linear-gradient(105deg, transparent 30%, #000 78%); mask:linear-gradient(105deg, transparent 30%, #000 78%);
}
.pkd-domain-intro h3{ font-family:var(--font-head); font-weight:700; color:#fff; font-size:1.2rem; margin:0 0 .35rem; position:relative; z-index:1; }
.pkd-domain-intro p{ color:#b7c6dc; font-size:.95rem; margin:0; position:relative; z-index:1; }

/* the "Continue to configuration" button */
#order-standard_cart #btnCompleteProductConfig, #order-standard_cart #productConfigForm .btn-primary,
#order-standard_cart .domain-continue .btn{
  background:var(--green-600)!important; border-color:var(--green-600)!important; border-radius:var(--r-sm);
  font-family:var(--font-head); font-weight:700; padding:.85rem 2rem;
}