/* =====================================================================
   INOVATE DIGITAL - Custom Stylesheet  (v9)
   Brand: #2872FA primary + black.

   Path on server:  templates/inovate-digital/css/custom.css
   Loaded LAST, after theme.min.css, so everything here wins.
   Never edit theme.min.css / all.min.css - do it here.

   01. Brand tokens          11. Responsive
   02. Base + typography     12. Shared components
   03. Buttons               13. Status pills
   04. Bootstrap overrides   14. Sidebar
   05. Top bar               15. Tables
   06. Header                16. Client area dashboard
   07. Hero + domain search  17. Invoices
   08. Homepage sections     18. Login / register
   09. Footer                19. Domain pricing
   10. Client area           20. Support / knowledgebase
   ===================================================================== */


/* ---------------------------------------------------------------------
   01. BRAND TOKENS  <-- change your colours here and nowhere else
   --------------------------------------------------------------------- */
:root {
    --id-primary:       #2872FA;
    --id-primary-dark:  #1557D8;
    --id-primary-light: #5A93FB;
    --id-primary-soft:  #EEF4FF;
    --id-primary-line:  #C9DBFE;

    /* PURE BLACK / PURE WHITE, 20 Sep 2026.
       Every text token is #000 and every page/panel surface is #fff -
       no off-white, no soft black anywhere in between. The three ink
       tokens are deliberately identical now; they are kept as three
       separate names so the hierarchy they used to carry is still
       visible in the rules, and so one of them can be softened later
       without hunting through 3,000 lines.

       What did NOT go monochrome, and why:
         --id-line      light grey, by your choice. It is the only thing
                        left separating a card from the page, now that
                        panel headers are white too.
         --id-primary*  the brand blue stays on buttons, links and
                        active states. It is also what hover states use
                        now: a grey hover tint would be exactly the soft
                        white this change removes.
         status colours green/red on domain availability, order status
                        and alerts carry meaning, not decoration. Black
                        would delete the message. */
    --id-black:      #000000;
    --id-black-soft: #000000;

    --id-ink:    #000000;
    --id-body:   #000000;
    --id-muted:  #000000;
    --id-line:   #E6E9EF;
    --id-bg:     #FFFFFF;

    --id-radius:     14px;
    --id-radius-sm:  8px;
    --id-radius-pill: 999px;

    --id-shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --id-shadow:    0 4px 16px rgba(0, 0, 0, .06);
    --id-shadow-lg: 0 18px 44px rgba(0, 0, 0, .14);
    --id-shadow-blue: 0 10px 24px rgba(40, 114, 250, .30);

    /* semantic colours for statuses, alerts, badges */
    --id-success:      #0E9F6E;
    --id-success-soft: #E7F7F1;
    --id-warning:      #B45309;
    --id-warning-soft: #FEF4E6;
    --id-danger:       #DC2626;
    --id-danger-soft:  #FEECEC;
    --id-info:         var(--id-primary-dark);
    --id-info-soft:    var(--id-primary-soft);

    --id-topbar-h: 0px;    /* top bar removed; keep 0 so the header sticks at the very top */
}


/* ---------------------------------------------------------------------
   02. BASE + TYPOGRAPHY
   --------------------------------------------------------------------- */
html { font-size: 15px; }

body {
    color: var(--id-body);
    background-color: #fff;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WHMCS paints the page from a CLASS, not from body: header.tpl renders
   <body class="primary-bg-color"> and theme.min.css sets that class to
   #f1f1f1. A bare "body" selector is (0,0,1) and loses to a class (0,1,0),
   so the background declared above never actually reached the page - it has
   been #f1f1f1 the whole time. (0,1,1) settles it.

   --id-bg (#F5F7FB) stays what it is: it is still the right tint for card
   footers, input addons and table headers, which now sit on white. */
body.primary-bg-color { background-color: #fff; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--id-ink);
    font-weight: 700;
    letter-spacing: -0.02em;
}

a { color: var(--id-primary-dark); }
a:hover, a:focus { color: var(--id-primary); text-decoration: none; }

/* Full-width bands from inside the page container */
.id-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.id-band-white { background: #fff; border-top: 1px solid var(--id-line);
                 border-bottom: 1px solid var(--id-line); }

.id-section        { padding: 76px 0; }
.id-section-title  { font-size: 2.1rem; margin-bottom: 10px; text-align: center; line-height: 1.2; }
.id-section-sub    { font-size: 1.05rem; color: var(--id-muted); text-align: center;
                     max-width: 620px; margin: 0 auto 48px; line-height: 1.6; }
/* display:block matters more than it looks. This rule was written when
   every eyebrow was a <p> (homepage), where "text-align: center" works
   because a <p> is already a block. about.tpl uses <span>, and on an
   inline element text-align only centres the text inside its own box -
   and that box is exactly as wide as the word, so nothing moves. Same
   reason margin-bottom was being ignored there: vertical margins do not
   apply to inline elements. Forcing block fixes both, on any tag. */
.id-eyebrow        { display: block;
                     text-transform: uppercase; letter-spacing: .1em; font-size: .72rem;
                     font-weight: 700; color: var(--id-primary); margin-bottom: 12px;
                     text-align: center; }

/* Small status pill */
.id-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #fff;
    border-radius: var(--id-radius-pill);
    padding: 6px 16px;
    font-size: .82rem;
    font-weight: 600;
    margin-bottom: 24px;
}
.id-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #2BD98B;
    box-shadow: 0 0 0 3px rgba(43, 217, 139, .25);
    margin-right: 4px;
}


/* ---------------------------------------------------------------------
   03. BUTTONS
   Also replaces the old Twenty-One blue (#369) inside theme.min.css.
   --------------------------------------------------------------------- */
.btn {
    border-radius: var(--id-radius-sm);
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: all .16s ease;
}
.btn-lg { padding: .8rem 1.9rem; font-size: 1rem; }

.btn-primary,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
    box-shadow: var(--id-shadow-xs);
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: var(--id-shadow-blue);
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgba(40, 114, 250, .35); }
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--id-primary); border-color: var(--id-primary); opacity: .5;
}

.btn-outline-primary {
    color: var(--id-primary-dark);
    border-color: var(--id-primary-line);
    background-color: #fff;
}
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}
.btn-outline-primary.disabled, .btn-outline-primary:disabled {
    color: var(--id-primary-dark); border-color: var(--id-primary-line);
}

.btn-outline-light:hover { color: var(--id-black); }

.btn-dark, .btn-black {
    background-color: var(--id-black); border-color: var(--id-black); color: #fff;
}
/* Hover on a black button used to be a lighter black. With pure black
   there is no lighter black left to use, so hover moves to the brand
   blue - the one accent this design keeps. */
.btn-dark:hover, .btn-black:hover {
    background-color: var(--id-primary); border-color: var(--id-primary); color: #fff;
}

.btn-link { color: var(--id-primary-dark); }
.btn-link:hover { color: var(--id-primary); }

/* The stock "Transfer" button is btn-success (green) - retone it */
#btnTransfer, #btnTransfer2,
.id-hero .btn-success {
    background-color: var(--id-black) !important;
    border-color: var(--id-black) !important;
    color: #fff !important;
}
#btnTransfer:hover, #btnTransfer2:hover,
.id-hero .btn-success:hover { background-color: var(--id-primary) !important; }


/* ---------------------------------------------------------------------
   04. BOOTSTRAP PRIMARY-COLOUR OVERRIDES
   --------------------------------------------------------------------- */
.bg-primary     { background-color: var(--id-primary) !important; }
.text-primary   { color: var(--id-primary-dark) !important; }
.border-primary { border-color: var(--id-primary) !important; }
.badge-primary  { background-color: var(--id-primary); }
.progress-bar   { background-color: var(--id-primary); }

.page-link { color: var(--id-primary-dark); }
.page-item.active .page-link,
.list-group-item.active,
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--id-primary);
    border-color: var(--id-primary);
}
.dropdown-item.active, .dropdown-item:active {
    background-color: var(--id-primary); color: #fff;
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--id-primary); border-color: var(--id-primary);
}
.custom-range::-webkit-slider-thumb { background-color: var(--id-primary); }
.custom-range::-moz-range-thumb     { background-color: var(--id-primary); }
.custom-range::-ms-thumb            { background-color: var(--id-primary); }

/* .domain-pricing .tld-pricing-header div:nth-child(odd) used to be in
   this group. It painted the domain price table's header cells solid
   brand blue while the label text stayed grey - unreadable - and because
   the selector is a descendant one it hit the nested .row and .col-4
   cells too, so three of the four headings went blue. The order form
   stylesheet now styles that header properly; !important here made it
   impossible to override from anywhere. Removed 15 Sep 2026. */
.upgrade .products .product .header,
.upgrade .products .product .btn,
.status-onhold, .status-payment-pending, .status-delivered {
    background-color: var(--id-primary) !important;
}

.card {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow-xs);
}

.form-control { border-color: var(--id-line); border-radius: var(--id-radius-sm); }
.form-control:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 .2rem rgba(40, 114, 250, .16);
}


/* ---------------------------------------------------------------------
   05. TOP BAR  (NOT IN USE)
   The black utility strip was removed from header.tpl. These rules are
   kept so you can bring it back later - they do nothing right now.
   Its contents (notifications, account, login/register) now live in the
   main header toolbar, styled at the end of section 06.
   --------------------------------------------------------------------- */
.id-topbar {
    background-color: var(--id-black);
    color: #fff;
    font-size: .78rem;
    line-height: 1;
    padding: 7px 0;          /* breathing room above and below */
}
.id-topbar a, .id-topbar .btn {
    color: #fff;
    font-size: .78rem;
    padding: 11px 0;
    display: inline-block;
    line-height: 1;
}
.id-topbar a:hover, .id-topbar .btn:hover { color: #fff; }
.id-topbar i { opacity: .7; margin-right: 5px; }
.id-topbar .id-topbar-list { list-style: none; margin: 0; padding: 0; }
.id-topbar .id-topbar-list li { display: inline-block; margin-right: 22px; }
.id-topbar .id-topbar-login { margin-right: 6px; }

header.header .topbar, .id-topbar .topbar { background: transparent; padding: 0; }
.id-topbar .active-client .input-group-text,
.id-topbar .active-client .btn { color: #fff; font-size: .78rem; }
.id-topbar .btn-signup {
    background: var(--id-primary);
    color: #fff;
    border-radius: var(--id-radius-sm);
    padding: 5px 15px;
    margin-left: 8px;
    font-weight: 600;
}
.id-topbar .btn-signup:hover { background: var(--id-primary-dark); color: #fff; }


/* ---------------------------------------------------------------------
   06. HEADER  (single row, sticky)
   To turn OFF the sticky behaviour delete the three lines marked STICKY.
   --------------------------------------------------------------------- */
header.header {
    background-color: #fff;
    border-bottom: 1px solid var(--id-line);
    position: sticky;                              /* STICKY */
    top: calc(-1 * var(--id-topbar-h));            /* STICKY */
    z-index: 1030;                                 /* STICKY */
}

.id-mainbar { background: #fff; padding: .85rem .85rem; }
.id-mainbar > .container { flex-wrap: wrap; }

header.header .navbar-brand { margin-right: 2.25rem; padding: 0; }
header.header .logo-img { max-width: 210px; max-height: 46px; }

/* Nav links */
header.header .navbar a { color: var(--id-ink); }
header.header .navbar-nav > li > a {
    font-weight: 600;
    font-size: .93rem;
    padding: 9px 14px !important;
    border-radius: var(--id-radius-sm);
    color: var(--id-body);
    transition: all .14s ease;
}
header.header .navbar-nav > li > a:hover,
header.header .navbar-nav > li.active > a {
    color: var(--id-primary-dark);
    background: var(--id-primary-soft);
}
/* hand-written main menu */
.id-mainnav { align-items: center; }
.id-mainnav > li > a {
    position: relative;
    font-size: .95rem;
    padding: 10px 15px !important;
}
.id-mainnav > li.active > a { font-weight: 700; }

/* --- buttons inside the header keep their own text colour ---
   header.header .navbar a sets a dark colour, which is more specific
   than .btn-primary. Without this the Register button reads black. */
header.header .navbar a.btn-primary,
header.header .navbar a.btn-primary:hover,
header.header .navbar a.btn-primary:focus,
header.header .navbar a.btn-dark,
header.header .navbar a.btn-dark:hover { color: #fff; }

header.header .navbar a.id-login-link { color: var(--id-body); }
header.header .navbar a.id-login-link:hover { color: var(--id-primary-dark); }

/* thin divider between the icon buttons and Login / Register */
.id-toolbar-divider {
    width: 1px;
    height: 26px;
    background: var(--id-line);
    margin: 0 12px 0 8px;
    padding: 0 !important;
}
header.header .navbar-nav > li > a .caret,
header.header .dropdown-toggle::after { opacity: .5; }

header.header .dropdown-menu {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow-lg);
    padding: 8px;
    margin-top: 6px;
    min-width: 230px;
}
header.header .dropdown-menu .dropdown-item { padding: 0; }
header.header .dropdown-menu .dropdown-item a {
    padding: 9px 12px !important;
    border-radius: var(--id-radius-sm);
    font-size: .9rem;
    color: var(--id-body);
}
header.header .dropdown-menu .dropdown-item a:hover {
    background: var(--id-primary-soft); color: var(--id-primary-dark);
}

/* Icon buttons (search / cart / menu) */
header.header .toolbar { flex-direction: row; }
.id-icon-btn {
    width: 40px; height: 40px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border: 1px solid var(--id-line) !important;
    border-radius: var(--id-radius-sm) !important;
    color: var(--id-ink) !important;
    background: #fff;
    padding: 0 !important;
    font-size: .95rem !important;
    position: relative;
}
.id-icon-btn:hover {
    border-color: var(--id-primary) !important;
    color: var(--id-primary) !important;
    background: var(--id-primary-soft);
}
.id-icon-btn .badge {
    position: absolute;
    top: -6px; right: -6px;
    background-color: var(--id-primary);
    color: #fff;
    font-size: 10px;
    padding: 3px 6px;
    border-radius: var(--id-radius-pill);
    opacity: 1;
    border: 2px solid #fff;
}

/* Slide-down search */
.id-searchbar { background: var(--id-bg); border-top: 1px solid var(--id-line); }
.id-searchbar .container { padding-top: 16px; padding-bottom: 16px; }
.id-searchbar .search {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    background: #fff;
    overflow: hidden;
}
.id-searchbar .search .form-control { border: 0; box-shadow: none; height: 44px; }
.id-searchbar .search .btn { border: 0; color: var(--id-muted); background: #fff; }

/* Breadcrumb bar */
/* Breadcrumb bar - switched off site-wide, 14 Sep 2026.
   header.tpl still prints <nav class="master-breadcrumb"> on every page
   except the homepage (the homepage shows the hero there instead). It is
   hidden rather than deleted so the header keeps its div balance with
   footer.tpl - the two must always ship together.
   To bring it back, delete this rule and restore the four below it. */
.master-breadcrumb { display: none; }

/* .master-breadcrumb { background-color: #fff; border-bottom: 1px solid var(--id-line); }
   .master-breadcrumb .breadcrumb { background: transparent; }
   .master-breadcrumb a { color: var(--id-muted); }
   .master-breadcrumb a:hover { color: var(--id-primary); } */


/* --- account / auth items in the toolbar (moved out of the top bar) --- */
.id-login-link {
    font-size: .9rem;
    font-weight: 600;
    color: var(--id-body);
    padding: 8px 4px;
    white-space: nowrap;
}
.id-login-link:hover { color: var(--id-primary-dark); }

.id-signup-btn {
    padding: 10px 22px !important;
    font-size: .9rem !important;
    font-weight: 600;
    white-space: nowrap;
    color: #fff !important;
}
.id-signup-btn:hover { color: #fff !important; }

.id-account-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 190px;
    padding: 5px 14px 5px 5px;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-pill);
    background: #fff;
    color: var(--id-ink);
    font-size: .86rem;
    font-weight: 600;
    transition: all .15s ease;
}
.id-account-chip:hover {
    border-color: var(--id-primary-line);
    background: var(--id-primary-soft);
    color: var(--id-primary-dark);
}
.id-account-avatar {
    flex: 0 0 30px;
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--id-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
}
.id-account-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* notification popover */
.popover { border: 1px solid var(--id-line); border-radius: var(--id-radius); box-shadow: var(--id-shadow-lg); }
.popover .client-alerts { list-style: none; margin: 0; padding: 0; min-width: 260px; }
.popover .client-alerts li { border-bottom: 1px solid var(--id-line); }
.popover .client-alerts li:last-child { border-bottom: 0; }
.popover .client-alerts li a {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 12px 14px; font-size: .87rem; color: var(--id-body);
}
.popover .client-alerts li a:hover { background: var(--id-primary-soft); }
.popover .client-alerts li.none { padding: 16px 14px; color: var(--id-muted); font-size: .87rem; }


/* ---------------------------------------------------------------------
   07. HERO + DOMAIN SEARCH
   The hero wraps the stock includes/domain-search.tpl, so all WHMCS
   form logic and JavaScript keeps working - we only restyle it.
   --------------------------------------------------------------------- */
.id-hero {
    background: radial-gradient(120% 120% at 50% 0%, #143375 0%, #000000 62%);
    color: #fff;
    padding: 84px 0 78px;
    position: relative;
    overflow: hidden;
}
.id-hero::before {          /* subtle dot grid */
    content: "";
    position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 22px 22px;
    mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
    -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 100%);
    pointer-events: none;
}
.id-hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    pointer-events: none;
}
.id-hero-orb-1 {
    width: 420px; height: 420px;
    background: rgba(40, 114, 250, .40);
    top: -160px; right: -80px;
}
.id-hero-orb-2 {
    width: 320px; height: 320px;
    background: rgba(90, 147, 251, .22);
    bottom: -180px; left: -100px;
}
.id-hero-inner { position: relative; z-index: 2; }

.id-hero h1 {
    color: #fff;
    font-size: 3.1rem;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 18px;
}
.id-hero h1 .id-hl {
    background: linear-gradient(90deg, var(--id-primary-light) 0%, #9BC0FD 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.id-hero p.id-hero-sub {
    color: #fff;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto 38px;
}

.id-hero-badges { list-style: none; padding: 0; margin: 32px 0 0; }
.id-hero-badges li {
    display: inline-block;
    margin: 0 14px 8px;
    color: #fff;
    font-size: .88rem;
}
.id-hero-badges i { color: var(--id-primary-light); margin-right: 7px; }

/* --- the stock domain search -------------------------------------
   WHMCS puts five things inside one .input-group:
     1 the field (textarea in AI mode, input otherwise)
     2 Include TLDs        3 Maximum Length
     4 Safe Search         5 the Search / Transfer buttons
   They all fight for one flex row, which is why they overlapped.
   Below they are forced into two clean rows:

     row 1 |  field .....................  [Search] [Transfer]
     row 2 |  [Include TLDs] [Max Length] [Safe Search]
   ------------------------------------------------------------------ */
.id-hero .home-domain-search { background: transparent !important; }
.id-hero .home-domain-search .container { padding: 0; max-width: none; }
.id-hero .home-domain-search > .container > .p-5 { padding: 0 !important; }
.id-hero .home-domain-search h2 { display: none; }

/* theme.min.css gives ".home-domain-search .input-group-wrapper" a white
   background, a 1px grey border and 6px of padding - a second frame drawn
   around the search box. It was showing as a white ring outside the blue
   button. Same specificity as this selector (0,2,0), so simply declaring
   the four properties here is enough; custom.css loads last. */
.id-hero .input-group-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
}

/* --- Register / Transfer segmented toggle -------------------------
   Replaces the two submit buttons WHMCS puts beside the field. The
   markup is in includes/domain-search.tpl; the button that used to say
   "Transfer" is gone and a small script sets the hidden transfer field
   instead, so nothing about how the form posts has changed.

   A translucent track on the hero gradient rather than a solid one:
   a solid pill would read as a second card floating above the search
   box, which is one card too many for a hero. */
.id-ds-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 5px;
    margin: 0 auto 22px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--id-radius-pill);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.id-ds-tab {
    appearance: none;
    border: 0;
    background: transparent;
    border-radius: var(--id-radius-pill);
    padding: 9px 26px;
    font-size: .94rem;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.id-ds-tab:hover { color: #fff; }
.id-ds-tab:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .8);
    outline-offset: 2px;
}
.id-ds-tab.is-active {
    background: #fff;
    color: var(--id-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}

/* --- the search box, flush ----------------------------------------
   The padded version (12px of white around a 52px field, button inset)
   is kept for advanced/AI mode, where the second row of filters needs
   the breathing room. In plain mode the button sits flush against the
   right edge and fills the full height, so the box reads as one object
   instead of a button parked inside a card.

   ":not(.advanced-input)" is what keeps the two apart - it makes these
   (0,3,0) against the (0,2,0) rules above, so they win without
   !important and advanced mode is untouched. */
.id-hero .input-group:not(.advanced-input) {
    flex-wrap: nowrap;
    column-gap: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
}
.id-hero .input-group:not(.advanced-input) .form-control {
    height: 66px;
    line-height: 66px;
    padding: 0 26px;
    font-size: 1.05rem;
}
.id-hero .input-group:not(.advanced-input) .input-group-append { gap: 0; }
.id-hero .input-group:not(.advanced-input) .input-group-append .btn {
    height: 66px;
    padding: 0 40px;
    border-radius: 0 !important;
    font-size: 1rem;
    font-weight: 700;
}
.id-hero .input-group:not(.advanced-input) .input-group-append .btn:hover {
    background-color: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
}

.id-hero .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 14px;
    column-gap: 10px;
    background: #fff;
    border-radius: var(--id-radius);
    padding: 12px;
    box-shadow: var(--id-shadow-lg);
}

/* the field */
.id-hero .input-group .form-control,
.id-hero .input-group textarea {
    order: 1;
    flex: 1 1 240px;
    min-width: 0;
    height: 52px;
    line-height: 52px;          /* keeps the long placeholder on one line */
    padding: 0 16px;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent;
    font-size: 1.02rem;
    color: var(--id-ink);
    resize: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.id-hero .input-group textarea { max-height: 52px; padding-top: 0; }
.id-hero .input-group ::placeholder { color: #000; opacity: 1; }

/* the buttons - always end of row 1 */
.id-hero .input-group-append {
    order: 2;
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}
.id-hero .input-group-append .btn {
    height: 52px;
    padding: 0 28px;
    margin: 0 !important;
    font-size: .96rem;
    font-weight: 600;
    border-radius: var(--id-radius-sm) !important;
    white-space: nowrap;
}

/* forced line break between row 1 and row 2 */
.id-hero .advanced-input::after {
    content: "";
    order: 3;
    flex: 0 0 100%;
    height: 0;
}

/* everything else drops to row 2 */
.id-hero .advanced-input > * { order: 4; flex: 0 0 auto; }
.id-hero .advanced-input > .form-control,
.id-hero .advanced-input > textarea { order: 1; flex: 1 1 240px; }
.id-hero .advanced-input > .input-group-append { order: 2; }

.id-hero .advanced-input > .multiselect-native-select,
.id-hero .advanced-input > .btn-group,
.id-hero .advanced-input > label {
    margin: 0 4px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--id-muted);
}
.id-hero .advanced-input > label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding-left: 6px;
    cursor: pointer;
}
.id-hero .advanced-input .btn-group { position: relative; }
.id-hero .advanced-input .btn-group > .btn {
    height: auto;
    margin: 0 !important;
    padding: 7px 15px !important;
    font-size: .82rem;
    font-weight: 600;
    background: var(--id-bg) !important;
    border: 1px solid var(--id-line) !important;
    color: var(--id-body) !important;
    border-radius: var(--id-radius-pill) !important;
    box-shadow: none !important;
}
.id-hero .advanced-input .btn-group > .btn:hover {
    background: var(--id-primary-soft) !important;
    border-color: var(--id-primary-line) !important;
    color: var(--id-primary-dark) !important;
}
.id-hero .advanced-input .multiselect-container { text-align: left; }

/* mobile Search / Transfer row that WHMCS renders below the box */
.id-hero .row.d-sm-none { margin-top: 12px; }
.id-hero .row.d-sm-none .btn { height: 46px; border-radius: var(--id-radius-sm); }

/* Featured TLD chips - set these under
   Configuration > System Settings > Domain Pricing > Featured */
.id-hero .tld-logos { list-style: none; padding: 0; margin: 26px 0 0; text-align: center; }
.id-hero .tld-logos li {
    display: inline-block;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: var(--id-radius-pill);
    padding: 7px 18px;
    margin: 6px 5px;
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
}
.id-hero .tld-logos li img { max-height: 16px; margin-right: 8px; vertical-align: -2px; }
.id-hero .btn-link {
    color: #fff;
    float: none !important;
    display: inline-block;
    margin-top: 16px;
    font-size: .88rem;
}
.id-hero .btn-link:hover { color: #fff; text-decoration: underline; }


/* ---------------------------------------------------------------------
   08. HOMEPAGE SECTIONS
   --------------------------------------------------------------------- */

/* Trust strip */
.id-trust { padding: 30px 0; }
.id-trust .id-trust-item {
    display: flex; align-items: center; gap: 14px;
    color: var(--id-muted); font-size: .84rem;
}
.id-trust-ico {
    flex: 0 0 44px;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--id-primary-soft);
    color: var(--id-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.id-trust .id-trust-item strong {
    color: var(--id-ink); display: block; font-size: .98rem; line-height: 1.3;
}

/* Hosting plan cards (needs the homepage products hook) */
.id-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(224px, 1fr));
    gap: 24px;
    align-items: start;
}
.id-plan {
    position: relative;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 34px 26px 28px;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.id-plan:hover { transform: translateY(-4px); box-shadow: var(--id-shadow-lg); }
.id-plan-pop { border-color: var(--id-primary); box-shadow: var(--id-shadow-blue); }
.id-plan-flag {
    position: absolute;
    top: -12px; left: 50%;
    transform: translateX(-50%);
    background: var(--id-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 5px 15px;
    border-radius: var(--id-radius-pill);
    white-space: nowrap;
}
/* Matched to the plan name on /store/<group> (section 21). Both were
   .78rem uppercase eyebrows; the name of the thing you are buying is
   the card's heading, so it is set as one. Keeping the two pages
   identical matters more than usual here - a customer often lands on
   the homepage cards first and clicks through to the same plans. */
.id-plan h3 { font-size: 1.45rem; margin-bottom: 14px; color: var(--id-ink);
              font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.id-plan-price {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--id-ink);
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 22px;
}
.id-plan-price span { font-size: .88rem; font-weight: 500; color: var(--id-muted); letter-spacing: 0; }
.id-plan-features { list-style: none; padding: 0; margin: 0 0 26px; }
.id-plan-features li {
    font-size: .88rem;
    padding: 9px 0;
    border-bottom: 1px solid var(--id-line);
    color: var(--id-body);
    display: flex;
    gap: 9px;
    align-items: flex-start;
}
.id-plan-features li:last-child { border-bottom: 0; }
.id-plan-features i { color: var(--id-primary); font-size: .8rem; margin-top: 4px; }
.id-plans-note {
    text-align: center;
    margin: 34px 0 0;
    font-size: .88rem;
    color: var(--id-muted);
}
.id-plans-note a { font-weight: 600; margin-left: 6px; }

/* Annually / Monthly switch (homepage plans) */
.id-cycle {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    max-width: 100%;
    gap: 4px;
    margin: 0 auto 30px;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-pill);
    box-shadow: var(--id-shadow);
}
.id-cycle-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 0;
    background: transparent;
    color: var(--id-body);
    font-size: .92rem;
    font-weight: 600;
    padding: 9px 22px;
    border-radius: var(--id-radius-pill);
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    -webkit-appearance: none;
    appearance: none;
}
.id-cycle-btn:hover { color: var(--id-primary-dark); }
.id-cycle-btn.is-active { background: var(--id-primary); color: #fff; }
.id-cycle-btn.is-active:hover { color: #fff; }
.id-cycle-btn:focus-visible { outline: 2px solid var(--id-primary-dark); outline-offset: 2px; }
.id-cycle-save {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: var(--id-radius-pill);
    background: var(--id-primary-soft);
    color: var(--id-primary-dark);
    white-space: nowrap;
}
.id-cycle-btn.is-active .id-cycle-save { background: rgba(255,255,255,.22); color: #fff; }

/* The two prices live in the markup together; the switch shows one. */
.id-plan-price > span { font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit; }
.id-plan-price { margin-bottom: 6px; }
.id-plan-billed {
    font-size: .8rem;
    color: var(--id-muted);
    margin: 0 0 22px;
    min-height: 20px;
    line-height: 1.5;
}
.id-price-m, .id-price-a, .id-billed-m, .id-billed-a { display: none; }
.id-plans[data-cycle="annually"] .id-price-a,
.id-plans[data-cycle="annually"] .id-billed-a { display: inline; }
.id-plans[data-cycle="monthly"]  .id-price-m,
.id-plans[data-cycle="monthly"]  .id-billed-m { display: inline; }
/* No JavaScript, or the attribute missing: fall back to annually. */
.id-plans:not([data-cycle]) .id-price-a,
.id-plans:not([data-cycle]) .id-billed-a { display: inline; }

/* Product cards */
.id-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.id-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: inherit;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.id-card::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: linear-gradient(90deg, var(--id-primary), var(--id-primary-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
}
.id-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--id-shadow-lg);
    border-color: var(--id-primary-line);
    color: inherit;
}
.id-card:hover::before { transform: scaleX(1); }
.id-card-ico {
    width: 54px; height: 54px;
    border-radius: 14px;
    background: var(--id-primary-soft);
    color: var(--id-primary);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 20px;
    transition: all .2s ease;
}
.id-card:hover .id-card-ico { background: var(--id-primary); color: #fff; }
.id-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.id-card p  { font-size: .93rem; color: var(--id-body); margin-bottom: 20px; flex-grow: 1; line-height: 1.6; }
.id-card-link { font-weight: 600; font-size: .92rem; color: var(--id-primary-dark); display: inline-block; }
.id-card-link i { margin-left: 6px; font-size: .85em; transition: transform .18s ease; }
.id-card:hover .id-card-link i, .id-card-link:hover i { transform: translateX(4px); }

/* How it works - numbered steps */
.id-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; position: relative; }
.id-step { position: relative; padding-top: 6px; }
.id-step-num {
    width: 42px; height: 42px;
    border-radius: 12px;
    background: var(--id-primary);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.05rem;
    margin-bottom: 18px;
    box-shadow: var(--id-shadow-blue);
}
.id-step::after {           /* connector line */
    content: "";
    position: absolute;
    top: 27px; left: 56px; right: -28px;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--id-primary-line) 0 6px, transparent 6px 12px);
}
.id-step:last-child::after { display: none; }
.id-step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.id-step p  { font-size: .91rem; line-height: 1.65; margin-bottom: 12px; }

/* Why us */
.id-why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.id-why {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 32px 28px;
    text-align: left;
    transition: box-shadow .2s ease, transform .2s ease;
}
.id-why:hover { box-shadow: var(--id-shadow); transform: translateY(-3px); }
.id-why-ico {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--id-black);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 20px;
}
.id-why h3 { font-size: 1.1rem; margin-bottom: 8px; }
.id-why p  { font-size: .92rem; line-height: 1.65; margin: 0; }

/* Quick action tiles */
.action-icon-btns a {
    display: block;
    background: var(--id-bg);
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 26px 12px;
    text-align: center;
    color: var(--id-ink);
    font-weight: 600;
    font-size: .88rem;
    margin-bottom: 18px;
    transition: all .18s ease;
}
.action-icon-btns a:hover {
    background: #fff;
    border-color: var(--id-primary);
    color: var(--id-primary-dark);
    box-shadow: var(--id-shadow);
    transform: translateY(-3px);
}
.action-icon-btns .ico-container { margin: 0 0 12px; font-size: 1.7rem; color: var(--id-primary); }

/* FAQ */
.id-faq { max-width: 800px; margin: 0 auto; }
.id-faq .id-faq-item {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.id-faq .id-faq-item:hover { border-color: var(--id-primary-line); }
.id-faq .id-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 100%;
    text-align: left;
    padding: 20px 24px;
    font-weight: 600;
    font-size: .98rem;
    color: var(--id-ink);
    background: none;
    border: 0;
}
.id-faq .id-faq-q:hover { color: var(--id-primary-dark); }
.id-faq .id-faq-q i { color: var(--id-muted); transition: transform .22s ease; font-size: .85rem; }
.id-faq .id-faq-q[aria-expanded="true"] { color: var(--id-primary-dark); }
.id-faq .id-faq-q[aria-expanded="true"] i { transform: rotate(180deg); color: var(--id-primary); }
.id-faq .id-faq-a { padding: 0 24px 22px; font-size: .93rem; line-height: 1.7; }

/* Bottom CTA */
.id-cta {
    position: relative;
    overflow: hidden;
    background: radial-gradient(120% 140% at 50% 0%, #143375 0%, #000000 65%);
    color: #fff;
    border-radius: 20px;
    padding: 60px 40px;
    text-align: center;
}
.id-cta-inner { position: relative; z-index: 2; }
.id-cta h2 { color: #fff; font-size: 2rem; margin-bottom: 10px; }
.id-cta p  { color: #fff; margin-bottom: 28px; }


/* ---------------------------------------------------------------------
   09. FOOTER
   --------------------------------------------------------------------- */
footer.footer {
    background-color: var(--id-black);
    color: #fff;
    padding: 0 0 28px;
    font-size: .89rem;
    border-top: 3px solid var(--id-primary);
}
.id-foot-top { padding-top: 60px; }
footer.footer h5 {
    color: #fff;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-bottom: 18px;
}
footer.footer a, footer.footer .nav-link { color: #fff; }
footer.footer a:hover, footer.footer .nav-link:hover { color: #fff; }
footer.footer .id-foot-list { list-style: none; padding: 0; margin: 0; }
footer.footer .id-foot-list li { margin-bottom: 11px; }
footer.footer .id-foot-about p { color: #fff; max-width: 310px; line-height: 1.7; }
footer.footer .id-foot-logo-link { display: inline-block; margin-bottom: 18px; }
footer.footer .id-foot-logo-link:hover { opacity: .85; }
footer.footer .id-foot-logo { max-height: 38px; }
footer.footer .id-foot-bottom {
    border-top: 1px solid rgba(255, 255, 255, .1);
    margin-top: 30px;
    padding-top: 24px;
}
footer.footer .copyright { margin: 0; color: #fff; text-align: left; font-size: .84rem; }
footer.footer .btn {
    background-color: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--id-radius-sm);
    color: #fff;
    font-size: .82rem;
}
footer.footer .btn:hover { background-color: rgba(255, 255, 255, .14); }
footer.footer .id-social { margin: 20px 0 0; padding: 0; }
footer.footer .id-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .07);
    color: #fff;
    margin-right: 8px;
    transition: all .16s ease;
}
footer.footer .id-social a:hover { background: var(--id-primary); color: #fff; transform: translateY(-2px); }
footer.footer .id-pay { list-style: none; padding: 0; margin: 0; display: inline-flex; align-items: center; }
footer.footer .id-pay li {
    display: inline-block;
    color: #fff;
    font-size: 1.45rem;
    margin-left: 10px;
}

/* payment strip */
.id-paystrip {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: space-between;
    margin-top: 44px;
    padding: 16px 22px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: var(--id-radius);
}
.id-paystrip-left { color: #fff; font-size: .86rem; }
.id-paystrip-left i { color: var(--id-primary-light); margin-right: 9px; }
.id-paystrip-left strong { color: #fff; font-weight: 700; }
.id-paystrip-right { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.id-pay-chip {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: 4px 11px;
    border-radius: var(--id-radius-pill);
}

/* language switch + currency chip */
.id-lang {
    display: inline-flex;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--id-radius-pill);
    padding: 3px;
    margin-right: 10px;
    vertical-align: middle;
}
.id-lang button {
    background: none;
    border: 0;
    color: #fff;
    font-size: .79rem;
    font-weight: 600;
    padding: 5px 15px;
    border-radius: var(--id-radius-pill);
    transition: all .15s ease;
}
.id-lang button:hover { color: #fff; }
.id-lang button.active { background: var(--id-primary); color: #fff; }
.id-cur {
    display: inline-block;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12);
    color: #fff;
    font-size: .79rem;
    font-weight: 600;
    padding: 7px 15px;
    border-radius: var(--id-radius-pill);
    vertical-align: middle;
}


/* ---------------------------------------------------------------------
   10. CLIENT AREA
   --------------------------------------------------------------------- */
section#main-body { padding: 0 0 60px; overflow-x: hidden; }
section#main-body > .container { padding-top: 32px; }
/* let a full-width band sit flush under the hero */
.primary-content > .id-bleed:first-child { margin-top: -32px; }
.primary-content .card { border-radius: var(--id-radius); }
.sidebar .list-group-item.active { background: var(--id-primary); border-color: var(--id-primary); }
.panel-sidebar .list-group-item:hover { color: var(--id-primary); }
.table thead th {
    border-top: 0; color: var(--id-muted); font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}


/* ---------------------------------------------------------------------
   12. SHARED COMPONENTS  (cards, alerts, badges, tabs, modals)
   These appear on every inner page, cart included.
   --------------------------------------------------------------------- */
.card { background: #fff; }
.card > .card-header {
    background: #fff;
    border-bottom: 1px solid var(--id-line);
    padding: 16px 22px;
}
.card > .card-header .card-title,
.card > .card-header h3 {
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin: 0;
}
.card > .card-footer { background: var(--id-bg); border-top: 1px solid var(--id-line); }

/* alerts */
.alert {
    border: 1px solid transparent;
    border-radius: var(--id-radius);
    padding: 14px 18px;
    font-size: .92rem;
}
.alert h2, .alert h3, .alert strong { font-size: .95rem; }
.alert-success { background: var(--id-success-soft); border-color: #BCE8D8; color: #0A6B4B; }
.alert-info    { background: var(--id-info-soft);    border-color: var(--id-primary-line); color: var(--id-primary-dark); }
.alert-warning { background: var(--id-warning-soft); border-color: #F6DFB8; color: var(--id-warning); }
.alert-danger  { background: var(--id-danger-soft);  border-color: #F6C9C9; color: #A81C1C; }

/* badges */
.badge {
    font-weight: 600;
    font-size: .72rem;
    padding: 5px 10px;
    border-radius: var(--id-radius-pill);
    letter-spacing: .01em;
}
.badge-secondary { background: var(--id-bg); color: var(--id-body); border: 1px solid var(--id-line); }
.badge-success   { background: var(--id-success); }
.badge-warning   { background: var(--id-warning); color: #fff; }
.badge-danger    { background: var(--id-danger); }
.badge-info      { background: var(--id-primary); }

/* tabs */
.nav-tabs { border-bottom: 1px solid var(--id-line); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--id-muted);
    font-weight: 600;
    font-size: .92rem;
    padding: 12px 18px;
}
.nav-tabs .nav-link:hover { color: var(--id-ink); border-bottom-color: var(--id-line); }
.nav-tabs .nav-link.active {
    color: var(--id-primary-dark);
    background: transparent;
    border-bottom-color: var(--id-primary);
}

/* modals */
.modal-content { border: 0; border-radius: var(--id-radius); box-shadow: var(--id-shadow-lg); }
.modal-header, .modal-footer { border-color: var(--id-line); }
.modal-title { font-size: 1.05rem; }

/* forms */
label, .form-control-label { font-size: .86rem; font-weight: 600; color: var(--id-ink); }
.custom-select, .form-control {
    border-color: var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .92rem;
    padding: 10px 14px;
    height: auto;
}
.custom-select:focus, .form-control:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 .2rem rgba(40, 114, 250, .16);
}
.input-group-text { background: var(--id-bg); border-color: var(--id-line); color: var(--id-muted); }
.form-text, .help-block { font-size: .82rem; color: var(--id-muted); }

/* pagination */
.pagination { gap: 6px; }
.page-link {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm) !important;
    font-size: .88rem;
    font-weight: 600;
    padding: 7px 13px;
}
.page-link:hover { background: var(--id-primary-soft); border-color: var(--id-primary-line); }


/* ---------------------------------------------------------------------
   13. STATUS PILLS
   WHMCS paints these solid. Tinted pills read much better in tables.
   --------------------------------------------------------------------- */
.status-active, .status-paid, .status-completed, .status-delivered,
.status-accepted, .status-answered, .status-open, .status-closed,
.status-pending, .status-onhold, .status-grace, .status-redemption,
.status-inprogress, .status-payment-pending, .status-customer-reply,
.status-pending-registration, .status-pending-transfer,
.status-cancelled, .status-terminated, .status-fraud, .status-dead,
.status-lost, .status-expired, .status-suspended, .status-unpaid,
.status-collections, .status-refunded, .status-transferred-away {
    display: inline-block;
    padding: 5px 12px !important;
    border-radius: var(--id-radius-pill) !important;
    font-size: .74rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em;
    line-height: 1.4;
    border: 1px solid transparent;
}

.status-active, .status-paid, .status-completed, .status-delivered,
.status-accepted, .status-answered, .status-open {
    background-color: var(--id-success-soft) !important;
    color: #0A6B4B !important;
    border-color: #BCE8D8;
}
.status-pending, .status-onhold, .status-grace, .status-redemption,
.status-inprogress, .status-payment-pending, .status-customer-reply,
.status-pending-registration, .status-pending-transfer {
    background-color: var(--id-warning-soft) !important;
    color: var(--id-warning) !important;
    border-color: #F6DFB8;
}
.status-cancelled, .status-terminated, .status-fraud, .status-dead,
.status-lost, .status-expired, .status-suspended, .status-unpaid,
.status-collections {
    background-color: var(--id-danger-soft) !important;
    color: #A81C1C !important;
    border-color: #F6C9C9;
}
.status-closed, .status-refunded, .status-transferred-away {
    background-color: var(--id-bg) !important;
    color: var(--id-muted) !important;
    border-color: var(--id-line);
}


/* ---------------------------------------------------------------------
   14. SIDEBAR  (client area left column)
   --------------------------------------------------------------------- */
.sidebar .card-sidebar {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow-xs);
    overflow: hidden;
}
.sidebar .card-sidebar > .card-header {
    background: #fff;
    padding: 14px 18px;
}
.sidebar .card-sidebar .card-title {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--id-muted);
    font-weight: 700;
}
.sidebar .card-minimise { color: var(--id-muted); font-size: .78rem; }
.sidebar .list-group-item {
    border: 0;
    border-top: 1px solid var(--id-line);
    padding: 11px 18px;
    font-size: .89rem;
    font-weight: 500;
    color: var(--id-body);
    background: #fff;
}
.sidebar .list-group-item:hover { background: var(--id-primary-soft); color: var(--id-primary-dark); }
.sidebar .list-group-item.active {
    background: var(--id-primary-soft) !important;
    color: var(--id-primary-dark) !important;
    border-color: var(--id-line) !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 var(--id-primary);
}
.sidebar-menu-item-wrapper { display: flex; align-items: center; gap: 10px; }
.sidebar-menu-item-icon { color: var(--id-muted); width: 16px; }
.sidebar .list-group-item.active .sidebar-menu-item-icon { color: var(--id-primary); }
.sidebar-menu-item-label { flex: 1 1 auto; }
.sidebar-menu-item-badge .badge { background: var(--id-primary-soft); color: var(--id-primary-dark); }


/* ---------------------------------------------------------------------
   15. TABLES
   --------------------------------------------------------------------- */
.table { color: var(--id-body); }
.table thead th {
    background: var(--id-bg);
    border-bottom: 1px solid var(--id-line) !important;
    border-top: 0;
    color: var(--id-muted);
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: 12px 16px;
    white-space: nowrap;
}
.table td { padding: 14px 16px; vertical-align: middle; border-top-color: var(--id-line); font-size: .9rem; }
.table tbody tr:hover { background: var(--id-primary-soft); }
.table a { font-weight: 600; }
.table-list, .table-container .table { margin-bottom: 0; }
.table-container {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    overflow: hidden;
    background: #fff;
}
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    padding: 6px 12px;
}


/* ---------------------------------------------------------------------
   16. CLIENT AREA DASHBOARD
   --------------------------------------------------------------------- */
.tiles { display: block; }
.tiles .row { margin: 0; gap: 0; }
.tiles .tile {
    background: #fff !important;
    border: 1px solid var(--id-line);
    border-right-width: 1px !important;
    border-radius: var(--id-radius);
    padding: 20px 22px !important;
    margin: 0 8px 16px;
    box-shadow: var(--id-shadow-xs);
    transition: all .18s ease;
}
.tiles .tile:hover {
    background: #fff !important;
    border-color: var(--id-primary-line);
    box-shadow: var(--id-shadow);
    transform: translateY(-3px);
}
.tiles .tile .title {
    color: var(--id-muted) !important;
    font-size: .72rem !important;
    letter-spacing: .08em;
}
.tiles .tile .stat {
    margin-top: 10px !important;
    font-size: 2.1rem !important;
    font-weight: 700;
    color: var(--id-ink);
    letter-spacing: -0.03em;
}
.tiles .tile .highlight { display: none; }
.tiles .tile i {
    top: 18px !important;
    right: 20px !important;
    font-size: 1.6rem !important;
    color: var(--id-primary) !important;
    opacity: .35;
}
.tiles .tile:hover i { font-size: 1.6rem !important; color: var(--id-primary) !important; opacity: .6; }

.client-home-cards .card { height: 100%; }
.client-home-cards .card-header { font-size: .95rem; }


/* ---------------------------------------------------------------------
   17. INVOICES
   --------------------------------------------------------------------- */
.invoice-container { background: #fff; border-radius: var(--id-radius); }
.invoice-col { font-size: .9rem; }
.invoice-container .card-title.font-size-24 { font-size: 1.5rem !important; letter-spacing: -0.02em; }
.invoice-container .table thead th { background: var(--id-bg); }
.transactions-container .table { font-size: .88rem; }
.invoice-container .card-header.bg-success { background: var(--id-success) !important; }


/* ---------------------------------------------------------------------
   18. LOGIN / REGISTER / AUTH
   --------------------------------------------------------------------- */
/* Covers login.php, register.php and the password-reset screens.

   Two things to know before editing:

   1. register.php's fields are NOT styled by the generic .form-control
      rule in section 04. theme.min.css ships
      "#registration .field, #registration .form-control" - one id, one
      class - which outranks it however late this file loads. That is why
      the register rules below carry the #registration prefix.

   2. login.tpl puts the submit button (.float-left) BEFORE the remember
      me checkbox (.text-right) in the markup. Turning .card-body into a
      flex column lets `order` put the checkbox first and the button last
      without touching the template. */

.login-form { padding-top: 10px; }
.login-form .card,
.card.mw-540,
.card.mw-750 {
    border: 1px solid var(--id-line);
    border-radius: 18px;
    box-shadow: var(--id-shadow);
}
/* No max-width override here on purpose: theme.min.css already centres
   this card at 540px with ".primary-content .card.mw-540" (0,3,0), which
   a ".login-form .card" rule cannot outrank. 540px is fine. */
.login-form .card-body {
    display: flex;
    flex-direction: column;
    padding: 40px 36px !important;
}
.login-form h6.h3, .card .h3 { font-size: 1.45rem; font-weight: 700; color: var(--id-ink); }
.login-form .card-body > .mb-4:first-child p { font-size: .92rem; line-height: 1.6; }
.login-form .form-control-label,
.login-form label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--id-ink);
}
.login-form .form-group { margin-bottom: 20px; }

/* The icon box, the input and the reveal-password button read as one
   control, with a single focus ring around the whole thing. */
.input-group-merge {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    overflow: hidden;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.input-group-merge:focus-within {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 3px var(--id-primary-soft);
}
.input-group-merge .input-group-text {
    padding: 0 6px 0 14px;
    background: #fff;
    border: 0;
    color: var(--id-muted);
}
.input-group-merge .form-control {
    height: 46px;
    padding: 0 12px;
    border: 0;
    border-radius: 0;
    background: #fff;
    font-size: .95rem;
    box-shadow: none;
}
.input-group-merge .form-control:focus { box-shadow: none; }
.input-group-merge .btn-reveal-pw,
.input-group-merge .btn-reveal-pw:focus,
.input-group-merge .btn-reveal-pw:hover {
    padding: 0 14px;
    background: #fff;
    border: 0;
    border-radius: 0;
    color: var(--id-muted);
    box-shadow: none;
}
.input-group-merge .btn-reveal-pw:hover { color: var(--id-primary-dark); }

/* Remember me above, full width button below - see note 2. */
.login-form .card-body > .text-right { order: 1; text-align: left !important; margin-bottom: 18px; }
.login-form .card-body > .float-left { order: 2; float: none !important; width: 100%; }
.login-form .card-body > .text-right label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
    color: var(--id-body);
    cursor: pointer;
}
.login-form #login,
.login-form #login:focus {
    display: block;
    width: 100%;
    height: 50px;
    border-radius: var(--id-radius-sm);
    font-size: 1rem;
    font-weight: 600;
}
.login-form .card-footer,
.card.mw-540 .card-footer {
    padding: 18px 36px;
    background: #fff;
    border-top: 1px solid var(--id-line);
    text-align: center;
    font-size: .9rem;
    color: var(--id-body);
}
.login-form .card-footer a { font-weight: 600; color: var(--id-primary-dark); }
.providerLinkingFeedback:not(:empty) { margin-bottom: 16px; }

/* ---- register.php ---- */
.id-auth-head {
    max-width: 640px;
    margin: 4px 0 26px;
}
.id-auth-head h1 {
    margin: 0 0 8px;
    font-size: 1.95rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
.id-auth-head p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--id-muted);
}

#registration .card {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
#registration .card-title {
    margin: 0 0 20px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--id-line);
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-muted);
}
#registration label { font-size: .82rem; font-weight: 600; color: var(--id-ink); }
#registration .form-group { margin-bottom: 20px; }
/* Beats theme.min.css's own "#registration .form-control" - see note 1. */
#registration .form-control:not([type="tel"]),
#registration .field,
#registration .custom-select {
    height: 46px;
    padding: 0 14px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .95rem;
    color: var(--id-ink);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
#registration .form-control:focus,
#registration .field:focus,
#registration .custom-select:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 3px var(--id-primary-soft);
    outline: none;
}
#registration .form-control::placeholder { color: #000; }

/* ---- phone field ----
   WHMCS runs intl-tel-input on the phone input. That plugin overlays an
   absolutely positioned .flag-container (a flag + the dial code, 88px
   wide for "+880") on the LEFT of the input, and clears it with its own
   padding-left, set per dial-code length by .iti-sdc-1 ... .iti-sdc-5
   (82px, 92px, 102px ...).

   A "padding: X Y" shorthand on .form-control flattens that to Y and
   drops "+880" straight on top of the placeholder. So the tel input is
   excluded from the shorthand above and only gets the properties it
   actually needs - padding-left stays the plugin's business, which also
   means it keeps working when the customer picks a country with a
   longer or shorter dial code. */
#registration input[type="tel"].form-control {
    height: 46px;
    padding-right: 14px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .95rem;
    color: var(--id-ink);
    box-shadow: none;
}
#registration .intl-tel-input .selected-flag {
    border-right: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm) 0 0 var(--id-radius-sm);
}

#registration textarea.form-control { height: auto; padding: 12px 14px; line-height: 1.7; }

/* theme.min.css pins the floating icon to a 36px box (top:0, height:36px,
   line-height:36px). The fields above are 46px, so the icon has to grow
   with them or it sits high in the field. */
#registration .prepend-icon .field { padding-left: 42px; }
#registration .prepend-icon .field-icon { height: 46px; line-height: 46px; }
#registration .field-icon { color: var(--id-muted); }

#registration .form-check,
#registration .accepttos + * { font-size: .92rem; color: var(--id-body); }
#registration input.btn[type="submit"] {
    width: 100%;
    max-width: 380px;
    height: 52px;
    border-radius: var(--id-radius-sm);
    font-size: 1rem;
    font-weight: 600;
}
#registration > form > p.text-center:last-child { margin-top: 6px; }

@media (max-width: 575px) {
    .login-form .card-body { padding: 28px 20px !important; }
    .login-form .card-footer { padding: 16px 20px; }
    .id-auth-head h1 { font-size: 1.55rem; }
    #registration .card-body { padding: 20px 16px !important; }
    #registration input.btn[type="submit"] { max-width: none; }
}


/* ---------------------------------------------------------------------
   19. DOMAIN PRICING TABLE
   --------------------------------------------------------------------- */
.domain-pricing .featured-tlds-container { margin-bottom: 26px; }
.domain-pricing .featured-tld {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 20px 12px;
    text-align: center;
    margin-bottom: 16px;
    transition: all .18s ease;
}
.domain-pricing .featured-tld:hover {
    border-color: var(--id-primary);
    box-shadow: var(--id-shadow);
    transform: translateY(-3px);
}
.domain-pricing .featured-tld .img-container { margin-bottom: 10px; }
.domain-pricing .tld-filters {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 14px 18px;
    margin-bottom: 20px;
}
.domain-pricing .table-list thead th { text-align: center; }
.domain-pricing .table-list td { text-align: center; }
.domain-pricing .table-list td:first-child { text-align: left; font-weight: 700; color: var(--id-ink); }


/* ---------------------------------------------------------------------
   20. SUPPORT / KNOWLEDGEBASE / ANNOUNCEMENTS
   --------------------------------------------------------------------- */
.kbarticle, .kb-article { font-size: .95rem; line-height: 1.75; }
.kbarticle h1, .kbarticle h2, .kbarticle h3 { margin-top: 1.5em; }
.announcement + .announcement { margin-top: 18px; }

.ticket-reply, .ticketreply {
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    background: #fff;
    margin-bottom: 16px;
}
.ticket-reply.staff, .ticketreply.staff {
    border-color: var(--id-primary-line);
    background: var(--id-primary-soft);
}
.markdown-editor, .CodeMirror {
    border-radius: var(--id-radius-sm) !important;
    border-color: var(--id-line) !important;
}


/* ---------------------------------------------------------------------
   11. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1199px) {
    header.header { position: static; }
    .id-mainbar .navbar-collapse { padding: 10px 0 6px; border-top: 1px solid var(--id-line); margin-top: 10px; }
    header.header .navbar-nav > li > a { padding: 10px 12px !important; }
    .id-steps { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
    .id-step:nth-child(2)::after { display: none; }
}

@media (max-width: 991px) {
    .id-cards, .id-why-grid { grid-template-columns: repeat(2, 1fr); }
    .id-hero h1 { font-size: 2.4rem; }
    .id-hero { padding: 60px 0 56px; }
}

@media (max-width: 767px) {
    .id-cards, .id-why-grid, .id-steps { grid-template-columns: 1fr; }
    .id-cycle { display: flex; width: 100%; margin-bottom: 26px; }
    .id-cycle-btn { flex: 1 1 0; justify-content: center; padding: 10px 10px; font-size: .86rem; }
    .id-cycle-save { font-size: .62rem; padding: 2px 7px; }
    .id-step::after { display: none; }
    .id-section { padding: 52px 0; }
    .id-section-title { font-size: 1.65rem; }
    .id-section-sub { margin-bottom: 34px; }
    .id-hero { padding: 48px 0 44px; }
    .id-hero h1 { font-size: 1.95rem; }
    .id-hero p.id-hero-sub { font-size: 1rem; }
    .id-hero .input-group { padding: 10px; row-gap: 10px; }
    .id-hero .input-group .form-control,
    .id-hero .input-group textarea {
        flex: 1 1 100%; height: 46px; line-height: 46px; font-size: 1rem; padding: 0 12px;
    }
    .id-hero .input-group-append { width: 100%; margin-left: 0; }
    .id-hero .input-group-append .btn { flex: 1 1 0; height: 46px; padding: 0 14px; font-size: .92rem; }

    /* plain mode stays one flush row on phones - the field shrinks and the
       button gets a tighter label, rather than the button dropping under
       the field, which is what the two rules above do in advanced mode */
    .id-hero .input-group:not(.advanced-input) { padding: 0; border-radius: 14px; }
    .id-hero .input-group:not(.advanced-input) .form-control {
        flex: 1 1 auto; height: 54px; line-height: 54px; padding: 0 16px; font-size: .95rem;
    }
    .id-hero .input-group:not(.advanced-input) .input-group-append { width: auto; flex: 0 0 auto; }
    .id-hero .input-group:not(.advanced-input) .input-group-append .btn {
        flex: 0 0 auto; height: 54px; padding: 0 20px; font-size: .92rem;
    }
    .id-ds-toggle { margin-bottom: 18px; }
    .id-ds-tab { padding: 8px 20px; font-size: .88rem; }
    .id-hero .advanced-input > .multiselect-native-select,
    .id-hero .advanced-input > .btn-group,
    .id-hero .advanced-input > label { margin: 0 3px; font-size: .76rem; }
    .id-hero .advanced-input .btn-group > .btn { padding: 6px 11px !important; font-size: .76rem; }
    .id-paystrip { flex-direction: column; text-align: center; }
    .id-paystrip-right { justify-content: center; }
    .id-lang { margin: 0 0 10px 0; }
    .id-hero-badges li { margin: 0 10px 8px; font-size: .82rem; }
    .id-topbar .id-topbar-list li:not(.id-keep-mobile) { display: none; }
    .id-trust .id-trust-item { margin-bottom: 18px; }
    footer.footer { text-align: center; }
    footer.footer .id-foot-about p { margin-left: auto; margin-right: auto; }
    footer.footer .copyright { text-align: center; }
    footer.footer .id-pay li { margin: 0 5px; }
    .id-cta { padding: 40px 24px; border-radius: 16px; }
    .tiles .tile { margin: 0 0 12px; }
    .login-form .card-body { padding: 28px 22px !important; }
    .table td, .table thead th { padding: 11px 12px; }
    .id-cta h2 { font-size: 1.5rem; }
    .id-cta .btn { display: block; width: 100%; margin: 8px 0 0 0 !important; }
}
/* =====================================================================
   21. ORDER FORM - PRODUCT LIST  (/store/<group>, cart.php?gid=N)
   Rendered by templates/orderforms/standard_cart/products.tpl.

   SPECIFICITY - read before editing.
   The order form loads its own all.min.css in the BODY, after this file
   loads in the <head>, and its rules are written as

       #order-standard_cart .products .product ...        (1 id, 2+ classes)

   so anything we write with one id loses, even at the same class count,
   because theirs comes later. Every rule below therefore goes through
   TWO ids - #order-standard_cart #products - which outranks all of them
   whatever classes they stack. Do not shorten these selectors.

   What we are overriding, specifically: the stock card floats the
   description left at 60% and the price/button right at 40%, with a grey
   header strip and 3px corners. We want one vertical card that matches
   the homepage .id-plan: white, 14px radius, 1px line, lift on hover.
   ===================================================================== */

/* ---- full width: hide the category sidebar on the product LIST page ----
   The order form floats .cart-sidebar left at 25% and .cart-body right at
   75%, and its own stylesheet already carries
   "#order-standard_cart .cart-sidebar{display:none}" inside a mobile
   media query - one id, one class, loaded after us, so a plain override
   of ours would lose. :has(#products) adds a second id (specificity
   counts the heaviest argument), which outranks it.

   #products exists only in products.tpl, so this affects the package
   list and nothing else - configure, cart and checkout keep their
   sidebar. The "Register a New Domain / Transfer / View Cart" links live
   there, but the main menu and the cart icon already cover those. */
#order-standard_cart:has(#products) .cart-sidebar { display: none; }
#order-standard_cart:has(#products) .cart-body {
    float: none;
    width: 100%;
    /* Keep the 15px side padding the order form gives this column. The
       .row inside #products carries Bootstrap's -15px margins, and this
       padding is what absorbs them; zeroing it pushed 15px past the
       viewport on phones. */
}

/* ---- page heading (outside #products) ---- */
#order-standard_cart .header-lined {
    text-align: center;
    border: 0;
    margin-bottom: 34px;
    padding-bottom: 0;
}
#order-standard_cart .header-lined h1 {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--id-ink);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
#order-standard_cart .header-lined p {
    font-size: 1rem;
    color: var(--id-muted);
    max-width: 640px;
    margin: 0 auto;
}

/* ---- the card ---- */
#order-standard_cart #products .product {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    padding: 34px 26px 28px;
    margin: 0 0 24px;
    box-shadow: none;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
#order-standard_cart #products .product:hover {
    transform: translateY(-4px);
    box-shadow: var(--id-shadow-lg);
}

/* plan name - stock gives this a grey strip */
#order-standard_cart #products .product header {
    position: static;
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 16px;
}
/* The plan name was set as a small uppercase eyebrow (.78rem, muted).
   On a page whose whole job is "pick a plan", the plan name is the
   heading of the card - it should read like one. Now a real title:
   1.45rem, and no uppercase, because uppercase costs legibility at
   this size and buys nothing once the type is big enough to lead. */
#order-standard_cart #products .product header span {
    display: block;
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--id-ink);
    letter-spacing: -0.02em;
}
#order-standard_cart #products .product header .qty {
    float: none;
    display: block;
    margin-top: 6px;
    font-size: .8rem;
    font-style: normal;
    color: var(--id-primary-dark);
}

/* description + features - stock floats this left at 60% */
#order-standard_cart #products .product div.product-desc {
    float: none;
    width: auto;
    flex: 1 1 auto;
    padding: 0;
    margin: 0 0 22px;
    font-size: 1rem;
}
#order-standard_cart #products .product div.product-desc > p {
    font-size: .88rem;
    color: var(--id-body);
    margin: 0 0 16px;
    line-height: 1.6;
}
#order-standard_cart #products .product div.product-desc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
#order-standard_cart #products .product div.product-desc ul li {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: .88rem;
    color: var(--id-body);
    padding: 9px 0;
    border-bottom: 1px solid var(--id-line);
    line-height: 1.5;
}
/* products.tpl puts no icon in the <li>, so draw the same check the
   homepage cards use (far fa-check) from the Font Awesome 6 Pro webfont
   the theme already loads. */
#order-standard_cart #products .product div.product-desc ul li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 400;
    font-size: .8rem;
    line-height: 1;
    margin-top: 4px;
    flex: 0 0 auto;
    color: var(--id-primary);
}
#order-standard_cart #products .product div.product-desc ul li:last-child { border-bottom: 0; }
#order-standard_cart #products .product span.feature-value {
    font-weight: 700;
    color: var(--id-ink);
    margin-right: 5px;
}

/* price + button - stock floats this right at 40%, centred */
#order-standard_cart #products .product footer {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 1rem;
    text-align: left;
}
#order-standard_cart #products .product div.product-pricing {
    margin: 0 0 18px;
    font-size: .88rem;
    color: var(--id-muted);
    line-height: 1.5;
}
/* Stock markup is: <span class="price">..</span><br>Monthly<br>
   Dropping the <br>s puts the cycle next to the figure, as on the
   homepage ("৳399 /month") instead of on its own line. */
#order-standard_cart #products .product div.product-pricing br { display: none; }
#order-standard_cart #products .product div.product-pricing span.price {
    display: inline;
    margin-right: 6px;
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--id-ink);
    letter-spacing: -0.03em;
    line-height: 1.1;
}
#order-standard_cart #products .product div.product-pricing small { color: var(--id-muted); }

/* stock ships this button as btn-success (green) */
#order-standard_cart #products .btn-order-now,
#order-standard_cart #products .btn-order-now:focus,
#order-standard_cart #products .btn-order-now:active {
    display: block;
    width: 100%;
    padding: 11px 18px;
    font-size: .95rem;
    font-weight: 600;
    border-radius: var(--id-radius-sm);
    background: var(--id-primary);
    border: 1px solid var(--id-primary);
    color: #fff;
    box-shadow: none;
}
#order-standard_cart #products .btn-order-now:hover {
    background: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
}
#order-standard_cart #products .btn-order-now i { margin-right: 7px; }

/* ---- three across on desktop ----
   products.tpl opens a new .row after every 2 cards, so a plain grid on
   #products would never see the cards. display:contents dissolves those
   rows and hands the columns straight to the grid. */
@media (min-width: 992px) {
    #order-standard_cart #products {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
        align-items: stretch;
        margin: 12px 0 0;
    }
    #order-standard_cart #products > .row { display: contents; }
    #order-standard_cart #products .col-md-6 {
        max-width: none;
        flex: none;
        width: auto;
        padding: 0;
    }
    #order-standard_cart #products .product { margin-bottom: 0; }
}

/* ---- "Most popular" on the Regular plan ----
   products.tpl carries no such class, but each card gets an id built from
   the product id: #product1 Starter, #product17 Regular, #product18
   eCommerce. Change the number here if the popular product changes. */
#order-standard_cart #products #product17 {
    border-color: var(--id-primary);
    box-shadow: var(--id-shadow-blue);
}
#order-standard_cart #products #product17:hover {
    box-shadow: var(--id-shadow-blue), var(--id-shadow-lg);
}
#order-standard_cart #products #product17::before {
    content: "Most popular";
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--id-primary);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .09em;
    padding: 5px 15px;
    border-radius: var(--id-radius-pill);
    white-space: nowrap;
}

/* Below the grid breakpoint the cards stack. Give them room so the
   "Most popular" ribbon is not squeezed against the card above, and let
   each card size to its own content instead of stretching. */
@media (max-width: 991px) {
    #order-standard_cart #products .product { height: auto; margin-bottom: 36px; }
}

@media (max-width: 767px) {
    #order-standard_cart .header-lined h1 { font-size: 1.65rem; }
    #order-standard_cart #products .product { padding: 30px 20px 24px; }
    #order-standard_cart #products .product div.product-pricing span.price { font-size: 1.9rem; }
}

/* =====================================================================
   22. CONTACT PAGE  (contact.php)
   Rendered by templates/inovate-digital/contact.tpl.

   Layout note: contact.tpl renders inside
       #main-body > .container > div > .primary-content
   so the page content is already inside a 15px-padded container. The
   CTA band escapes it with .id-bleed (section 02), which is verified
   to sit flush at left:0 / width:100vw with no horizontal overflow.

   #main-body carries padding-bottom:60px, which would leave a grey
   strip between the CTA band and the footer - zeroed below, scoped
   with :has() so no other page is touched.
   ===================================================================== */

#main-body:has(.id-contact-cta) { padding-bottom: 0; }

.id-contact { padding: 8px 0 60px; }

/* ---- page heading ---- */
.id-contact-head {
    max-width: 640px;
    margin: 0 auto 42px;
    text-align: center;
}
.id-contact-head .id-eyebrow { margin-bottom: 10px; }
.id-contact-title {
    margin: 0 0 12px;
    font-size: 2.3rem;
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
.id-contact-sub {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--id-muted);
}

/* ---- two column shell ----
   Grid rather than Bootstrap columns: the side column needs to stop
   growing on wide screens while the form keeps the rest. */
.id-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
}

/* ---- the form card ---- */
.id-contact-form-card {
    padding: 32px 34px 30px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
.id-contact-form-title {
    margin: 0 0 4px;
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--id-ink);
}
.id-contact-form-note {
    margin: 0 0 24px;
    font-size: .85rem;
    color: var(--id-muted);
}
.id-req { color: var(--id-danger); font-weight: 700; }

/* Name and Email share a row on desktop, stack on phones. */
.id-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 18px;
}
.id-field { margin-bottom: 20px; }
.id-contact-form label {
    display: block;
    margin-bottom: 8px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--id-ink);
}
.id-contact-form .form-control {
    width: 100%;
    padding: 0 16px;
    height: 48px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .95rem;
    color: var(--id-ink);
    box-shadow: none;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.id-contact-form textarea.form-control {
    height: auto;
    padding: 14px 16px;
    line-height: 1.7;
    resize: vertical;
    min-height: 150px;
}
.id-contact-form .form-control::placeholder { color: #000; }
.id-contact-form .form-control:focus {
    border-color: var(--id-primary);
    box-shadow: 0 0 0 3px var(--id-primary-soft);
    outline: none;
}
.id-contact-submit,
.id-contact-submit:focus {
    display: block;
    width: 100%;
    height: 52px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--id-radius-sm);
}
.id-contact-submit i { margin-right: 8px; }
.id-contact-privacy {
    margin: 16px 0 0;
    font-size: .8rem;
    color: var(--id-muted);
    text-align: center;
}
.id-contact-privacy i { margin-right: 5px; color: var(--id-success); }
.id-contact-captcha { text-align: center; }

/* ---- side column ---- */
.id-contact-side {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.id-info-card {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
.id-info-title {
    margin: 0 0 18px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-muted);
}

/* Each row is one tappable block - icon tile, then a three line stack.
   Anchors so phone and email are one tap on mobile. */
.id-info-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 0;
    border-top: 1px solid var(--id-line);
    color: inherit;
    text-decoration: none;
}
.id-info-card .id-info-row:first-of-type { border-top: 0; padding-top: 0; }
.id-info-icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--id-primary-soft);
    color: var(--id-primary-dark);
    font-size: .95rem;
}
.id-info-text { display: block; min-width: 0; }
.id-info-label {
    display: block;
    margin-bottom: 3px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
}
.id-info-value {
    display: block;
    font-size: .95rem;
    font-weight: 600;
    line-height: 1.5;
    color: var(--id-ink);
    word-break: break-word;
}
.id-info-extra {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--id-muted);
}
a.id-info-row:hover .id-info-value { color: var(--id-primary-dark); }
a.id-info-row:hover .id-info-icon {
    background: var(--id-primary);
    color: #fff;
}
.id-info-row-static { cursor: default; }

.id-info-reply {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 11px 14px;
    border-radius: var(--id-radius-sm);
    background: var(--id-success-soft);
    font-size: .85rem;
    font-weight: 600;
    color: #0B7A54;
}

/* ---- social card ---- */
.id-social-note {
    margin: -8px 0 16px;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--id-body);
}
.id-social-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.id-social-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 6px;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    background: #fff;
    color: var(--id-body);
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.id-social-btn i { font-size: 1.15rem; }
.id-social-btn span { font-size: .74rem; font-weight: 600; }
.id-social-btn:hover { color: #fff; }
/* Brand colours on hover only, so the card stays calm at rest.
   All three are >= 4.5:1 against white text. */
.id-soc-fb:hover { background: #1554B3; border-color: #1554B3; }
.id-soc-wa:hover { background: #128C4A; border-color: #128C4A; }
.id-soc-li:hover { background: #005582; border-color: #005582; }

/* =====================================================================
   CONTACT CTA BAND
   ===================================================================== */
.id-contact-cta {
    position: relative;
    overflow: hidden;
    padding: 62px 0;
    background: radial-gradient(120% 140% at 50% 0%, #143375 0%, #000000 65%);
    color: #fff;
}
.id-cta-split {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    align-items: start;
}
.id-cta-divider {
    width: 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, .14);
}
.id-cta-eyebrow {
    display: block;
    margin-bottom: 10px;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--id-primary-light);
}
.id-cta-col h2 {
    margin: 0 0 10px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
}
.id-cta-col p {
    margin: 0 0 22px;
    font-size: .95rem;
    line-height: 1.7;
    color: #fff;
}
.id-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.id-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--id-radius-sm);
    border: 1px solid transparent;
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.id-cta-btn-wa      { background: #128C4A; color: #fff; }
.id-cta-btn-wa:hover{ background: #0E7A40; color: #fff; }
.id-cta-btn-primary       { background: var(--id-primary); color: #fff; }
.id-cta-btn-primary:hover { background: var(--id-primary-dark); color: #fff; }
.id-cta-btn-ghost {
    background: transparent;
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
.id-cta-btn-ghost:hover {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .id-contact-grid { grid-template-columns: 1fr; gap: 22px; }
    .id-cta-split { grid-template-columns: 1fr; gap: 34px; }
    .id-cta-divider { width: 100%; height: 1px; align-self: auto; }
}
@media (max-width: 575px) {
    .id-contact { padding-bottom: 42px; }
    .id-contact-title { font-size: 1.75rem; }
    .id-contact-sub { font-size: .95rem; }
    .id-contact-head { margin-bottom: 30px; }
    .id-contact-form-card { padding: 24px 18px 22px; }
    .id-info-card { padding: 22px 18px; }
    .id-field-row { grid-template-columns: 1fr; }
    .id-contact-cta { padding: 44px 0; }
    .id-cta-col h2 { font-size: 1.3rem; }
    .id-cta-btn { flex: 1 1 100%; justify-content: center; }
}

/* =====================================================================
   23. ABOUT PAGE  (about.php)
   Rendered by templates/inovate-digital/about.tpl.

   The hero and the "what we do" band escape the page container with
   .id-bleed (section 02). The CTA band at the bottom deliberately reuses
   the contact page's .id-contact-cta styles from section 22, so both
   marketing pages end identically - do not rename that class in
   about.tpl without updating the :has() rule in section 22.
   ===================================================================== */

/* The hero sits flush under the sticky header, so the container's
   32px top padding has to go on this page only. */
#main-body:has(.id-about) > .container { padding-top: 0; }

.id-about { padding-bottom: 0; }

/* ---- hero ---- */
.id-about-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 96px;
    background: radial-gradient(120% 140% at 50% 0%, #143375 0%, #000000 65%);
    color: #fff;
    text-align: center;
}
.id-about-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.id-about-eyebrow {
    display: block;
    margin-bottom: 14px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--id-primary-light);
}
.id-about-hero h1 {
    margin: 0 0 16px;
    font-size: 2.6rem;
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.025em;
    color: #fff;
}
.id-about-hero p {
    margin: 0 0 30px;
    font-size: 1.08rem;
    line-height: 1.75;
    color: #fff;
}
.id-about-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* ---- stat tiles, lifted over the hero edge ---- */
/* Flex, not a fixed 4-column grid: the two figure tiles are optional
   (they hide themselves when set to 0 in about.tpl), and a 4-column
   grid left the remaining two stuck in columns 1 and 2 instead of
   centred. Flex + justify-content:center lays out 2, 3 or 4 tiles
   correctly without the CSS having to know how many there are. */
.id-about-stats {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: -48px 0 0;
}
.id-stat {
    flex: 1 1 170px;
    max-width: 290px;
    padding: 22px 18px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
    text-align: center;
}
.id-stat-num {
    display: block;
    margin-bottom: 4px;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--id-primary-dark);
}
.id-stat-label {
    display: block;
    font-size: .8rem;
    line-height: 1.4;
    color: var(--id-muted);
}

/* ---- story ---- */
.id-eyebrow-left { text-align: left; }

.id-about-story {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 40px;
    align-items: start;
    padding: 72px 0;
}
.id-story-text h2 {
    margin: 0 0 18px;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
.id-story-text p {
    margin: 0 0 16px;
    font-size: 1rem;
    line-height: 1.8;
    color: var(--id-body);
}
.id-story-text p:last-child { margin-bottom: 0; }

.id-story-card {
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
}
.id-story-card h3 {
    margin: 0 0 18px;
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--id-muted);
}
.id-story-row {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 0;
    border-top: 1px solid var(--id-line);
}
.id-story-card .id-story-row:first-of-type { border-top: 0; padding-top: 0; }
.id-story-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--id-primary-soft);
    color: var(--id-primary-dark);
    font-size: .85rem;
}
.id-story-row > span:last-child {
    font-size: .92rem;
    line-height: 1.55;
    color: var(--id-body);
}
.id-story-row strong {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
    margin-bottom: 2px;
}
.id-story-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 16px;
    border-radius: var(--id-radius-sm);
    background: #128C4A;
    color: #fff;
    font-size: .92rem;
    font-weight: 600;
    text-decoration: none;
}
.id-story-cta:hover { background: #0E7A40; color: #fff; }

/* ---- what we do ---- */
.id-about-what { padding: 72px 0; }
.id-what-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.id-what-card {
    display: flex;
    flex-direction: column;
    padding: 26px 24px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.id-what-card:hover {
    border-color: var(--id-primary-line);
    box-shadow: var(--id-shadow);
    transform: translateY(-2px);
}
.id-what-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    border-radius: 12px;
    background: var(--id-primary-soft);
    color: var(--id-primary-dark);
    font-size: 1.1rem;
}
.id-what-card h3 {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--id-ink);
}
.id-what-card p {
    margin: 0 0 16px;
    font-size: .9rem;
    line-height: 1.7;
    color: var(--id-body);
}
.id-what-card a {
    margin-top: auto;
    font-size: .85rem;
    font-weight: 600;
    color: var(--id-primary-dark);
    text-decoration: none;
}
.id-what-card a i {
    margin-left: 5px;
    font-size: .75rem;
    transition: transform .14s ease;
}
.id-what-card a:hover i { transform: translateX(3px); }

/* ---- why us ---- */
.id-about-why { padding: 72px 0 76px; }
.id-why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px 34px;
}
.id-why-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.id-why-check {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--id-radius-pill);
    background: var(--id-success-soft);
    color: #0B7A54;
    font-size: .95rem;
}
.id-why-item h3 {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--id-ink);
}
.id-why-item p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.75;
    color: var(--id-body);
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .id-about-hero h1 { font-size: 2.1rem; }
    .id-about-story { grid-template-columns: 1fr; gap: 28px; padding: 52px 0; }
    .id-what-grid { grid-template-columns: repeat(2, 1fr); }
    .id-why-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 575px) {
    .id-about-hero { padding: 52px 0 76px; }
    .id-about-hero h1 { font-size: 1.7rem; }
    .id-about-hero p { font-size: .98rem; }
    .id-about-hero-actions .id-cta-btn { flex: 1 1 100%; justify-content: center; }
    .id-about-stats { gap: 12px; margin-top: -40px; }
    .id-stat { flex: 1 1 140px; }
    .id-stat { padding: 18px 12px; }
    .id-stat-num { font-size: 1.45rem; }
    .id-story-text h2 { font-size: 1.45rem; }
    .id-about-what { padding: 52px 0; }
    .id-what-grid { grid-template-columns: 1fr; }
    .id-about-why { padding: 52px 0 56px; }
}

/* =====================================================================
   24. MOBILE MENU  (below the navbar-expand-xl breakpoint)

   The header is .navbar-expand-xl, so everything under 1200px uses the
   burger and #mainNavbar becomes a stacked panel. Two lists live inside
   it: #idMainNav (Home, Buy Domain, ...) and a second .navbar-nav that
   holds only the Account dropdown.

   Section 06 gives #idMainNav "display:flex; flex-direction:column;
   align-items:center", which centred the main links - but that rule
   never reached the Account list, so Account sat hard against the left
   edge while everything above it was centred.

   Rather than centre the Account item to match, both lists are turned
   into full-width left-aligned rows here. On a phone a 375px-wide row
   is a far better tap target than a 64px-wide centred word, and the
   left edge gives the eye one line to scan down instead of five
   different starting points.
   ===================================================================== */

@media (max-width: 1199px) {

    header.header #mainNavbar {
        margin-top: 8px;
        padding: 0 0 4px;
        border-top: 1px solid var(--id-line);
    }
    header.header #mainNavbar .navbar-nav {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0 10px;
        align-items: stretch;
    }
    header.header #mainNavbar .navbar-nav > li {
        display: block;
        width: 100%;
        margin: 0;
    }
    header.header #mainNavbar .navbar-nav > li > a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 14px 6px !important;
        border-radius: 0;
        border-bottom: 1px solid var(--id-line);
        font-size: 1rem;
        text-align: left;
        color: var(--id-ink);
    }
    header.header #mainNavbar .navbar-nav > li > a:hover {
        background: var(--id-primary-soft);
        color: var(--id-primary-dark);
    }
    /* Nothing below the final row, so no rule needed under it. */
    header.header #mainNavbar > ul:last-child > li:last-child > a { border-bottom: 0; }

    /* The centred pill from the desktop header becomes a left accent bar -
       it marks the row without breaking the straight left edge. */
    header.header #mainNavbar .navbar-nav > li.active > a,
    header.header #mainNavbar .navbar-nav > li > a.active {
        background: var(--id-primary-soft);
        color: var(--id-primary-dark);
        box-shadow: inset 3px 0 0 var(--id-primary);
        padding-left: 16px !important;
    }

    /* Account: caret to the far right, like every other accordion row. */
    header.header #mainNavbar .dropdown-toggle::after { margin-left: auto; }

    /* Bootstrap already switches .dropdown-menu to position:static inside
       a collapsed navbar; this drops the floating-panel look so the open
       submenu reads as an indented part of the list. */
    header.header #mainNavbar .dropdown-menu {
        position: static !important;
        float: none;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding: 2px 0 6px;
        background: #fff;
        border: 0;
        border-bottom: 1px solid var(--id-line);
        border-radius: 0;
        box-shadow: none;
    }
    header.header #mainNavbar .dropdown-menu > li { padding: 0; }
    header.header #mainNavbar .dropdown-menu a {
        display: block;
        padding: 11px 6px 11px 22px;
        font-size: .93rem;
        color: var(--id-body);
    }
    header.header #mainNavbar .dropdown-menu a:hover {
        background: var(--id-primary-soft);
        color: var(--id-primary-dark);
    }
    header.header #mainNavbar .dropdown-divider {
        margin: 4px 22px;
        border-top: 1px solid var(--id-line);
    }
    header.header #mainNavbar .dropdown-header {
        padding: 8px 22px 4px;
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .09em;
        text-transform: uppercase;
        color: var(--id-muted);
    }
}

/* =====================================================================
   25. CLIENT AREA - LOGGED IN
   Dashboard, My Services / Domains / Invoices / Tickets, Account.

   Two things this section is fixing.

   1. NO PAGE TITLE ANYWHERE.
      WHMCS puts the page name only in <nav class="master-breadcrumb">,
      which section 08 switched off site-wide. On the marketing pages
      that was right - they print their own <h1>. But the client area
      has no heading of its own, so "My Products & Services" vanished
      and every page opened on a bare table.
      The bar is brought back for client-area pages ONLY, and the last
      crumb - which is always exactly the page name - is promoted to a
      real title with the trail above it.
      The hook is the client-area sidebar: those panels carry ids that
      start with "Primary_Sidebar-". The cart uses .cart-sidebar and the
      marketing pages have no sidebar at all, so none of them match.

   2. THE RAINBOW.
      Stock Twenty-One paints the dashboard in six unrelated colours:
        #f0ad4e gold      panel accent + "My Services" button
        #5bc0de light blue panel accent + "Open New Ticket" button
        #7f8c8d asbestos   "View All" button
        #2ecc71 emerald    "Register a New Domain" panel
        #28a745 green      Register / Transfer buttons
        #d9534f red        tile highlight
      None of them carry meaning - they are decoration. They are all
      brought to the brand blue here. The colours that DO carry meaning
      (the green/amber/red status pills in section 13) are left alone.
   ===================================================================== */

/* ---- page title, rebuilt from the breadcrumb ---- */
body:has(.sidebar [id^="Primary_Sidebar"]) .master-breadcrumb {
    display: block;
    padding: 24px 0 0;
    background: transparent;
    border: 0;
}
.master-breadcrumb .breadcrumb {
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    background: transparent;
    font-size: .8rem;
}
.master-breadcrumb .breadcrumb-item,
.master-breadcrumb .breadcrumb-item a { color: var(--id-muted); }
.master-breadcrumb .breadcrumb-item a:hover { color: var(--id-primary-dark); }
.master-breadcrumb .breadcrumb-item.active {
    flex: 0 0 100%;
    margin-top: 4px;
    padding-left: 0;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
/* Bootstrap draws the "/" with a ::before on every item after the first;
   the promoted title must not carry one. */
.master-breadcrumb .breadcrumb-item.active::before { display: none; }

/* ---- dashboard tiles ---- */
.tiles .tile {
    display: block;
    padding: 20px 18px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    text-decoration: none;
    transition: border-color .14s ease, box-shadow .14s ease, transform .14s ease;
}
.tiles .tile:hover {
    border-color: var(--id-primary-line);
    box-shadow: var(--id-shadow);
    transform: translateY(-2px);
}
.tiles .tile > i {
    font-size: 1.05rem;
    color: var(--id-primary);
    opacity: .55;
}
.tiles .tile .stat {
    font-size: 1.9rem;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
.tiles .tile .title {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
}
/* The four coloured bars are decoration, not status - one colour. */
.tiles .tile .highlight,
.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red,
.tiles .tile .highlight.bg-color-gold {
    background-color: var(--id-primary);
}

/* ---- home panels ---- */
.client-home-cards .card {
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
    box-shadow: var(--id-shadow);
    overflow: hidden;
}
.client-home-cards .card-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid var(--id-line);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
}
.client-home-cards .card-body { padding: 20px; }
/* The accent is the 3px strip along the top of each panel. */
.card-accent-gold,
.card-accent-blue,
.card-accent-emerald,
.card-accent-asbestos,
.card-accent-red,
.card-accent-green { border-top: 3px solid var(--id-primary); }

/* ---- the decorative colour-class buttons ---- */
.primary-content .btn.bg-color-gold,
.primary-content .btn.bg-color-blue,
.primary-content .btn.bg-color-green,
.primary-content .btn.bg-color-red,
.primary-content .btn.bg-color-emerald,
.primary-content .btn.bg-color-asbestos,
.primary-content .btn.bg-color-gold:focus,
.primary-content .btn.bg-color-blue:focus,
.primary-content .btn.bg-color-asbestos:focus {
    background-color: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}
.primary-content .btn.bg-color-gold:hover,
.primary-content .btn.bg-color-blue:hover,
.primary-content .btn.bg-color-green:hover,
.primary-content .btn.bg-color-red:hover,
.primary-content .btn.bg-color-emerald:hover,
.primary-content .btn.bg-color-asbestos:hover {
    background-color: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
    color: #fff;
}
/* "Register" / "Transfer" on the domain panel ship as btn-success. */
#registerDomainPanel .btn-success,
#registerDomainPanel .btn-success:focus {
    background-color: var(--id-primary);
    border-color: var(--id-primary);
}
#registerDomainPanel .btn-success:hover {
    background-color: var(--id-primary-dark);
    border-color: var(--id-primary-dark);
}

/* ---- list tables (Services, Domains, Invoices, Tickets) ---- */
.table-container {
    padding: 4px 4px 0;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius);
}
/* theme.min.css ships "table.table-list tbody td { padding: 10px 8px }" -
   four simple selectors deep, so a plain ".table-list tbody td" loses to
   it however late this file loads. Same shape, later file, we win. */
table.table-list thead th {
    padding: 14px 12px;
    background: #fff;
    border-bottom: 1px solid var(--id-line);
    border-top: 0;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
    white-space: nowrap;
}
/* Stock ships "padding: 0 8px", so rows were only as tall as one line. */
table.table-list tbody td {
    padding: 15px 12px;
    font-size: .92rem;
    vertical-align: middle;
    border-top: 1px solid var(--id-line);
    color: var(--id-body);
}
table.table-list tbody tr:hover td { background: var(--id-primary-soft); }
table.table-list tbody td a { font-weight: 600; }

/* Cells WHMCS marks .py-0 hold a button or a dropdown and are meant to sit
   flush; theme.min.css zeroes those with !important and that is left
   alone on purpose. */

/* DataTables furniture around the table */
.dataTables_filter { padding: 12px 10px 4px; }
.dataTables_info,
.dataTables_length label {
    font-size: .82rem;
    color: var(--id-muted);
}
.dataTables_paginate .page-link {
    border-color: var(--id-line);
    color: var(--id-body);
}
.dataTables_paginate .page-item.active .page-link {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}
.dataTables_paginate .page-link:hover {
    background: var(--id-primary-soft);
    color: var(--id-primary-dark);
}

@media (max-width: 767px) {
    .master-breadcrumb .breadcrumb-item.active { font-size: 1.4rem; }
    .tiles .tile { padding: 16px 14px; }
    .tiles .tile .stat { font-size: 1.5rem; }
    table.table-list tbody td { padding: 12px 10px; }
}

/* =====================================================================
   26. PRODUCT DETAILS  (clientarea.php?action=productdetails)

   This page is drawn by the cPanel server module, not by the theme:
   modules/servers/cpanel/templates/overview.tpl. Its five panels carry
   stable ids, which is what the rules below hook onto:
     #cPanelPackagePanel      Package / Domain
     #cPanelUsagePanel        Usage Statistics
     #cPanelQuickShortcutsPanel
     #cPanelQuickEmailPanel
     #cPanelBillingOverviewPanel

   One thing here is out of CSS's reach, on purpose: the two usage
   gauges are <canvas> drawn by jQuery Knob from data-fgcolor on the
   input, so their arc colour cannot be changed from a stylesheet. The
   number in the middle is a real <input> though - bandwidth ships it in
   #d9534f red even at 0% usage, which reads as an alert when nothing is
   wrong - so that one is corrected below.
   ===================================================================== */

/* Package and Usage sit side by side; without this the shorter card
   leaves a ragged gap under it. */
#tabOverview > .row { display: flex; flex-wrap: wrap; }
#tabOverview > .row > [class*="col-md-6"] { display: flex; }
#tabOverview > .row > [class*="col-md-6"] > .card { flex: 1 1 auto; }

/* Panel headers, matched to the cards in section 25. The two-class
   selector ".card > .panel-heading.card-header" only ever matches the
   module-drawn panels - theme cards use one class or the other. */
.primary-content .card > .panel-heading.card-header {
    padding: 15px 20px;
    background: #fff;
    border-bottom: 1px solid var(--id-line);
}
.primary-content .card > .panel-heading.card-header .card-title {
    font-size: .78rem !important;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
}

/* ---- Package / Domain ---- */
#cPanelPackagePanel .card-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 22px;
}
.cpanel-package-details em {
    display: block;
    margin-bottom: 6px;
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--id-primary-dark);
}
.cpanel-package-details h4 {
    margin: 0 0 8px !important;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--id-ink);
}
.cpanel-package-details > a {
    font-size: .95rem;
    color: var(--id-body);
    word-break: break-all;
}
#cPanelPackagePanel p { margin: 20px 0 0; }
#cPanelPackagePanel .btn,
#cPanelPackagePanel .btn:focus {
    padding: 10px 22px;
    background: #fff;
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    font-size: .88rem;
    font-weight: 600;
    color: var(--id-primary-dark);
}
#cPanelPackagePanel .btn:hover {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}

/* ---- Usage Statistics ---- */
#cPanelUsagePanel .card-body { padding: 26px 20px; }
.cpanel-usage-stats strong {
    display: block;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--id-muted);
}
.cpanel-usage-stats > .row > div {
    font-size: .9rem;
    font-weight: 600;
    color: var(--id-ink);
}
/* The dial's own inline style sets the colour, so this needs !important.
   Red is reserved for an actual problem. */
.cpanel-usage-stats .usage-dial { color: var(--id-ink) !important; }
#cPanelUsagePanel .card-body > .row + a,
#cPanelUsagePanel .card-body a[href*="refresh"] { font-size: .82rem; }

/* ---- Quick Shortcuts ----
   Ten cPanel PNGs in a bare grid. They become proper tiles here; the
   images themselves are cPanel's own artwork and are left as they are. */
#cPanelQuickShortcutsPanel .card-body { padding: 16px; }
.cpanel-feature-row { margin-left: -6px; margin-right: -6px; }
.cpanel-feature-row > div { padding: 6px; }
.cpanel-feature-row a {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 100%;
    margin: 0 !important;
    padding: 18px 10px;
    background: #fff;
    border: 1px solid var(--id-line);
    border-radius: var(--id-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--id-body);
    text-align: center;
    text-decoration: none;
    transition: border-color .14s ease, background .14s ease, transform .14s ease;
}
.cpanel-feature-row a:hover {
    background: var(--id-primary-soft);
    border-color: var(--id-primary-line);
    color: var(--id-primary-dark);
    transform: translateY(-2px);
}
.cpanel-feature-row img {
    width: 34px;
    height: 34px;
    margin: 0 !important;
}

/* ---- Quick Create Email ---- */
#cPanelQuickEmailPanel .card-body { padding: 20px; }
#cPanelQuickEmailPanel .input-group-text {
    background: #fff;
    border-color: var(--id-line);
    font-size: .88rem;
    color: var(--id-muted);
}

/* ---- Billing Overview ----
   Stock renders each line as a nested .row with a right-aligned label
   column. Right-aligned labels against left-aligned values leave a ragged
   gutter down the middle, so each line becomes a plain label/value row
   with a divider. */
#cPanelBillingOverviewPanel .card-body { padding: 6px 20px 16px; }
#cPanelBillingOverviewPanel .card-body .row .row {
    display: flex;
    align-items: baseline;
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--id-line);
}
#cPanelBillingOverviewPanel .card-body .row > div > .row:first-child { border-top: 0; }
#cPanelBillingOverviewPanel .card-body .row .row > div:first-child {
    flex: 0 0 52%;
    max-width: 52%;
    padding-left: 0;
    text-align: left !important;
    font-size: .82rem;
    font-weight: 600;
    color: var(--id-muted);
}
#cPanelBillingOverviewPanel .card-body .row .row > div:last-child {
    flex: 1 1 auto;
    max-width: none;
    padding-right: 0;
    font-size: .95rem;
    font-weight: 600;
    color: var(--id-ink);
}

@media (max-width: 767px) {
    #tabOverview > .row > [class*="col-md-6"] { display: block; }
    .cpanel-package-details h4 { font-size: 1.35rem; }
    .cpanel-feature-row a { padding: 14px 8px; font-size: .78rem; }
    .cpanel-feature-row img { width: 30px; height: 30px; }
}

/* =====================================================================
   27. HEADER WHEN LOGGED IN

   Measured at 1200px on a signed-in page, before this fix:

     .container            1140  (flex, flex-wrap: wrap)
       .navbar-brand        138   row 1
       #mainNavbar          938   row 1
       .toolbar             403   ROW 2   margin-left: auto

     138 + 938 + 403 = 1479 > 1140, so the toolbar wrapped to a second
     line and the header grew from 76px to 122px.

   Two account controls are drawn at once:

     a) "Hello, NAME" in #mainNavbar - a real dropdown, and the ONLY way
        to reach Account Details, User Management, Contacts, Account
        Security, Email History, Your Profile, Change Password, Security
        Settings and Logout. Nine links, eight of them nowhere else in
        the header.
     b) .id-account-chip in the toolbar - avatar + name, 165px wide, and
        despite looking like a menu it is a plain <a> to
        clientarea.php?action=details with a tooltip. That single
        destination is already the dropdown's first item.

   So (b) is the duplicate and (b) is what goes, on desktop only.
   Measured after: 138 + 708 + 230 = 1076, one row, header 72px.

   Below 1200px the burger takes over and the dropdown is folded inside
   the collapsed menu, so the chip becomes the only account control that
   is visible without opening anything - it stays there untouched.
   ===================================================================== */

@media (min-width: 1200px) {
    header.header .toolbar li:has(.id-account-chip) { display: none !important; }
}

/* 768-1199px, where the chip is the visible account control: the name
   travels with the client, so a long one is capped rather than allowed
   to push the toolbar onto a second line. */
.id-account-name {
    display: inline-block;
    max-width: 130px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* ---- Client Area shortcut in the toolbar (header.tpl) ----
   Replaces the knowledgebase search icon. Only rendered when signed in. */
.id-clientarea-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: #fff;
    border: 1px solid var(--id-primary);
    border-radius: var(--id-radius-sm);
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--id-primary-dark);
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.id-clientarea-btn:hover,
.id-clientarea-btn:focus {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
}
@media (max-width: 767px) {
    .id-clientarea-btn { padding: 8px 10px; }
    .id-ca-text { display: none; }
}

/* ---- signed-in header on phones ----
   Measured at 375px: .container is 350 wide, the brand renders 138 and
   carries "margin-right: 2.25rem" from section 06, and the signed-in
   toolbar is 233. 138 + 36 + 233 = 407 against 350, so the toolbar
   dropped to a second line and the header stood at 112px. That was
   already happening before the Client Area button existed - the button
   only added 7px to it.

   The brand's 36px gutter buys nothing once the toolbar sits on the same
   line, so it goes; a slightly smaller wordmark and tighter icon spacing
   cover the rest. Measured after: 112 + 224 = 336 against 350, one row,
   header 66px, 14px to spare. */
@media (max-width: 575px) {
    header.header .navbar-brand { margin-right: 0; }
    header.header .logo-img { max-width: 112px; }
    header.header .toolbar > li.ml-2 { margin-left: .35rem !important; }
}

/* ---- "Return to admin area" control (admin masquerading as client) ----
   header.tpl now renders this as an icon only, so it needs the 40x40
   .id-icon-btn box like the cart and bell. It keeps a dark fill rather
   than the white one, because it is an admin control sitting inside a
   client page and it should not be mistaken for one of the client's own
   buttons.

   Why the size matters: the stock control was a btn-dark with the words
   "Return to Admin Area" in it, about 250px wide. At 1200px the container
   is 1140 and the signed-in row was already close to full, so that button
   was the thing tipping the toolbar onto a second line. 250 -> 40 gives
   back roughly 210px, which is more than the overflow was.

   .id-icon-btn sets colour/border/background with !important (it has to,
   to beat .nav-link), so these overrides carry !important too. */
.id-admin-return {
    background: var(--id-ink) !important;
    border-color: var(--id-ink) !important;
    color: #fff !important;
    text-decoration: none;
}
.id-admin-return:hover,
.id-admin-return:focus {
    background: var(--id-primary) !important;
    border-color: var(--id-primary) !important;
    color: #fff !important;
}


/* =====================================================================
   28. PURE BLACK SWEEP
   Section 01 turned every token black, but a handful of greys are
   written into the STOCK sheets (theme.min.css, all.min.css) as plain
   values, not tokens, so no token change can reach them. They are
   listed here with the sheet they come from.

   Only greys that are actually visible as text or icons are listed.
   Borders stay grey on purpose - that is what still separates a card
   from the page now that panel headers are white.
   ===================================================================== */

/* theme.min.css: .form-control { color: #495057 } - what a customer
   types into every field on the site, one step lighter than the label
   above it. */
.form-control,
.form-control:focus,
.form-control-plaintext,
select.form-control,
.custom-select { color: #000; }

/* theme.min.css: .table { color: #212529 }. Status badges keep their
   own colour - those rules carry !important and win over this. */
.table,
.table th,
.table td,
.table .thead-light th,
.table-hover tbody tr:hover { color: #000; }

/* theme.min.css: .action-icon-btns a .ico-container i { color: #C3CFD8 }
   The icons on the homepage support row. At #C3CFD8 on white they were
   nearly invisible even before this change. */
.action-icon-btns a .ico-container i { color: #000; }

/* theme.min.css: .btn-outline-light { color: #f8f9fa } - the "Contact
   Us" button on the dark CTA band. Soft white -> white. */
.btn-outline-light,
.btn-outline-light.disabled,
.btn-outline-light:disabled { color: #fff; }

/* Stock code/preformatted blocks, for knowledgebase articles. */
pre, code, kbd, samp { color: #000; }

/* Placeholders. Bootstrap sets .form-control::placeholder to #6c757d, so
   the greys were still there in every empty field.

   Worth knowing before you keep this: WHMCS's register form has no
   visible labels - the placeholder IS the label on all sixteen fields.
   At #000 an empty field looks the same as a filled one, so the form can
   read as already completed. If that bothers you when you see it, this
   one rule is the whole change - delete it and placeholders go back to
   Bootstrap's grey, with nothing else on the site affected. */
.form-control::placeholder,
input::placeholder,
textarea::placeholder { color: #000; opacity: 1; }

/* Bootstrap's text utilities. WHMCS puts .text-muted on helper lines all
   through the client area, invoices and tickets, so it is the single most
   common grey left on the site.

   These NEED !important, which almost nothing else in this file does:
   Bootstrap ships its utility classes as "color: #6c757d !important", so
   a plain override loses no matter how late it loads or how specific it
   is. Checked with getPropertyPriority() on the live page, after a
   non-important version of this rule quietly did nothing.

   .text-light is left alone - it is the one of these meant for dark
   backgrounds. The dark-band rules below are insurance: if .text-muted
   ever lands on the hero or the footer, black on black would be worse
   than the grey it replaced. */
.text-muted,
.text-secondary,
.text-dark,
.text-black-50 { color: #000 !important; }
.text-white-50 { color: #fff !important; }

footer.footer .text-muted,
.id-hero .text-muted,
.id-cta .text-muted { color: #fff !important; }

/* theme.min.css: "#registration .field-icon i { color: #bbb }" - the icon
   sitting inside every field on the register form. Note the "i": our own
   rule colours .field-icon, and the stock one reaches past it to the
   element inside, so it wins at (0,2,1) whatever we do to the parent. */
#registration .field-icon i,
.prepend-icon .field-icon i { color: #000; }

/* theme.min.css: .btn-default { color: #333 } - WHMCS's secondary button
   (Generate Password, Validate Code, and most modal footers). */
.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default.focus,
.btn-default.active,
.btn-default:active { color: #000; }

/* all.min.css: the unselected half of a bootstrap-switch toggle (#292B2C),
   e.g. the marketing opt-in on the register form. */
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-secondary:hover { color: #000; }

/* theme.min.css: ".page-item.disabled .page-link { color: #6C757D }" -
   the greyed-out Previous/Next on a table's pagination. It still reads as
   unavailable without the grey: it has no hover state and no href. */
.page-item.disabled .page-link,
.pagination > li > a,
.pagination > li > span { color: #000; }


/* =====================================================================
   29. LARGE SECTION CTA  (.id-btn-xl)
   For the one button that closes a homepage section - currently
   "View all pricing" under the What we offer cards. The plain
   .btn-outline-primary was the same size as a form button, so it read
   as a minor control at the end of the section rather than the thing
   the section is asking you to do.

   Outline rather than solid: the cards above it already carry blue
   links, and a solid blue block there would out-shout the hero. It
   fills in on hover, which is where the emphasis belongs.
   ===================================================================== */
.id-btn-xl {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 56px;
    padding: 0 34px;
    background: #fff;
    border: 2px solid var(--id-primary);
    border-radius: var(--id-radius-pill);
    color: var(--id-primary-dark);
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
.id-btn-xl i {
    font-size: .92em;
    transition: transform .16s ease;
}
.id-btn-xl:hover,
.id-btn-xl:focus {
    background: var(--id-primary);
    border-color: var(--id-primary);
    color: #fff;
    text-decoration: none;
    box-shadow: var(--id-shadow-blue);
}
.id-btn-xl:hover i { transform: translateX(4px); }

@media (max-width: 575px) {
    .id-btn-xl { height: 50px; padding: 0 26px; font-size: .95rem; }
}