/* ==========================================================================
   Bindu Host — WHMCS 8.13 client area theme
   Dashboard layout: dark fixed sidebar + white topbar + card/stat/table UI.
   All classes are prefixed "bh-" so the stock (inherited) pages that still
   use Bootstrap markup keep working untouched.
   ========================================================================== */

:root {
    --bh-sidebar-w: 264px;
    --bh-sidebar-w-sm: 78px;
    --bh-topbar-h: 64px;

    --bh-primary: #7c3aed;
    --bh-primary-dark: #6321cc;
    --bh-primary-soft: #f3ecfe;
    --bh-accent: #a78bfa;

    /* The sidebar is a single deep gradient rather than a flat fill; the
       decoration on top of it is drawn in section 49. */
    --bh-sidebar-grad: linear-gradient(185deg, #2a1657 0%, #1d1140 38%, #150d2b 100%);
    --bh-sidebar-bg: #1a1033;
    --bh-sidebar-bg-alt: #140c29;
    --bh-sidebar-hover: #2b1a52;
    --bh-sidebar-text: #c9bee0;
    --bh-sidebar-muted: #8b7cb0;

    --bh-body-bg: #f4f6fa;
    --bh-card-bg: #ffffff;
    --bh-border: #e6eaf2;
    --bh-border-soft: #eef1f7;

    --bh-text: #101828;
    --bh-text-soft: #475467;
    --bh-muted: #8892a6;

    --bh-green: #12b76a;
    --bh-green-soft: #dcfce7;
    --bh-red: #ef4444;
    --bh-red-soft: #fee4e2;
    --bh-amber: #f59e0b;
    --bh-amber-soft: #fef3c7;
    --bh-purple: #7c3aed;
    --bh-purple-soft: #ede9fe;
    --bh-blue-soft: #dbeafe;

    /* One definition for the brand gradient, so "purple button" means the
       same thing on the dashboard, in the cart and on the order form. Used on
       primary actions and a few accents — not on every filled surface, which
       is what made the earlier version look busy. */
    /* Wider range and a flatter angle than before: at 135deg across a button
       600px wide the old stops were too close together to read as a gradient
       at all, so the big actions looked like flat purple. 108deg travels the
       long way across the button, light on the left, deep on the right. */
    --bh-grad: linear-gradient(108deg, #a855f7 0%, #8b5cf6 30%, #7c3aed 62%, #5b21b6 100%);
    --bh-grad-hover: linear-gradient(108deg, #9333ea 0%, #7c3aed 32%, #6d28d9 66%, #4c1d95 100%);
    /* the hairline of light along the top edge that makes a filled button read
       as raised rather than printed on */
    --bh-gloss: inset 0 1px 0 rgba(255, 255, 255, .22);
    --bh-grad-soft: linear-gradient(135deg, #faf8ff 0%, #f4efff 100%);
    --bh-lift: 0 6px 16px rgba(124, 58, 237, .22);

    --bh-radius: 12px;
    --bh-radius-sm: 8px;
    --bh-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --bh-shadow-lg: 0 8px 24px rgba(16, 24, 40, .10);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body.bh-body {
    margin: 0;
    min-height: 100vh;
    background: var(--bh-body-bg);
    color: var(--bh-text);
    font-family: "Inter", "Hind Siliguri", "Noto Sans Bengali", -apple-system,
                 BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

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

/* ==========================================================================
   1. Sidebar
   ========================================================================== */
.bh-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--bh-sidebar-w);
    background: var(--bh-sidebar-grad);
    color: var(--bh-sidebar-text);
    display: flex;
    flex-direction: column;
    z-index: 1050;
    transition: width .18s ease, transform .2s ease;
}

.bh-sidebar-brand {
    height: var(--bh-topbar-h);
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 18px;
    background: var(--bh-sidebar-bg-alt);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.bh-sidebar-brand a.bh-brand-link {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .2px;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.bh-sidebar-brand a.bh-brand-link:hover { color: #fff; }
.bh-brand-mark {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    display: grid; place-items: center;
    border-radius: 8px;
    background: var(--bh-primary);
    color: #fff;
    font-size: 14px;
}
.bh-brand-text .bh-dot { color: var(--bh-accent); }

.bh-collapse-btn {
    margin-left: auto;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    background: transparent;
    border: 0;
    color: var(--bh-sidebar-muted);
    cursor: pointer;
    padding: 0;
    border-radius: 8px;
    line-height: 1;
    transition: color .14s ease, background .14s ease;
}
.bh-collapse-btn:hover { color: #fff; background: rgba(255, 255, 255, .08); }

.bh-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 14px 12px 8px;
    list-style: none;
    margin: 0;
    scrollbar-width: thin;
}
.bh-sidebar-nav::-webkit-scrollbar { width: 6px; }
.bh-sidebar-nav::-webkit-scrollbar-thumb { background: #3a2a63; border-radius: 3px; }

.bh-nav-header {
    padding: 16px 10px 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--bh-sidebar-muted);
    white-space: nowrap;
}

.bh-nav-item > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin-bottom: 2px;
    border-radius: var(--bh-radius-sm);
    color: var(--bh-sidebar-text);
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    transition: background .14s ease, color .14s ease;
}
.bh-nav-item > a > i:first-child {
    width: 20px;
    flex: 0 0 20px;
    text-align: center;
    font-size: 15px;
    color: #a094c4;
}
.bh-nav-item > a:hover { background: var(--bh-sidebar-hover); color: #fff; }
.bh-nav-item > a:hover > i:first-child { color: #fff; }

.bh-nav-item > a.bh-active {
    background: var(--bh-primary);
    color: #fff;
    box-shadow: none;
}
.bh-nav-item > a.bh-active > i:first-child { color: #fff; }
.bh-nav-item > a.bh-active::before {
    content: "";
    position: absolute;
    left: -12px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 22px;
    border-radius: 0 3px 3px 0;
    background: #fff;
}

.bh-nav-badge {
    margin-left: auto;
    background: var(--bh-red);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 999px;
}
.bh-nav-item > a.bh-active .bh-nav-badge { background: rgba(255, 255, 255, .22); }

/* The "Contact Support" block that used to sit at the foot of the sidebar is
   gone — it was a third route to the same page as the Support nav row two
   lines above it and the topbar's support icon. Its rules are deleted rather
   than left behind. */

/* "More": a native <details>, so the open/close costs no JavaScript. */
.bh-nav-more-item { display: block; }
.bh-nav-more > summary {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 18px;
    color: var(--bh-sidebar-muted);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
    transition: color .14s ease;
}
.bh-nav-more > summary::-webkit-details-marker { display: none; }
.bh-nav-more > summary:hover { color: #fff; }
.bh-nav-more > summary > i { width: 18px; text-align: center; font-size: 14px; }
/* the caret: points down when closed, flips when the group is open */
.bh-nav-more > summary > .bh-more-caret {
    width: auto;
    margin-left: auto;
    font-size: 10px;
    opacity: .7;
    transition: transform .18s ease;
}
.bh-nav-more[open] > summary > .bh-more-caret { transform: rotate(180deg); }
.bh-nav-more-list > a {
    display: block;
    padding: 8px 18px 8px 48px;
    color: var(--bh-sidebar-text);
    font-size: 13px;
    transition: color .14s ease, background .14s ease;
}
.bh-nav-more-list > a:hover { color: #fff; background: var(--bh-sidebar-hover); }
.bh-nav-more-list > a.bh-active { color: #fff; }

/* --- Collapsed (desktop icon-only) ---------------------------------------
   Gated to desktop widths on purpose. Below 992px the sidebar is an off-canvas
   drawer and the collapse button is hidden, so a "collapsed" body class has no
   meaning there — and since the order flow now sets that class automatically,
   an ungated rule would have shrunk the phone drawer to a 78px strip of
   unlabelled icons. */
@media (min-width: 993px) {

    body.bh-collapsed .bh-sidebar { width: var(--bh-sidebar-w-sm); }
    body.bh-collapsed .bh-topbar,
    body.bh-collapsed .bh-main { margin-left: var(--bh-sidebar-w-sm); }
    body.bh-collapsed .bh-brand-text,
    body.bh-collapsed .bh-nav-header span,
    body.bh-collapsed .bh-nav-item > a > span,
    body.bh-collapsed .bh-nav-badge,
    body.bh-collapsed .bh-nav-more > summary > span,
    body.bh-collapsed .bh-nav-more > summary > .bh-more-caret { display: none; }
    /* At 78px the brand mark (30) + gap (10) + button (36) needed 76px of a
       58px content box, so the button was pushed outside the sidebar and
       clipped — which is why the toggle only worked when a click happened to
       land on the sliver still showing. Collapsed, the row now holds the
       toggle alone: the logo is decoration here, the toggle is the control,
       and it gets the whole width as a target. */
    body.bh-collapsed .bh-sidebar-brand { justify-content: center; padding: 0; }
    body.bh-collapsed .bh-brand-link { display: none; }
    body.bh-collapsed .bh-collapse-btn { margin-left: 0; width: 40px; height: 40px; }
    body.bh-collapsed .bh-nav-item > a { justify-content: center; padding: 11px 0; }
    body.bh-collapsed .bh-nav-header { height: 14px; padding: 8px 0 0; overflow: hidden; }
    body.bh-collapsed .bh-nav-more > summary { justify-content: center; padding: 11px 0; }
}

/* ==========================================================================
   2. Topbar
   ========================================================================== */
.bh-topbar {
    position: fixed;
    top: 0; right: 0; left: 0;
    margin-left: var(--bh-sidebar-w);
    height: var(--bh-topbar-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 24px;
    background: #fff;
    border-bottom: 1px solid var(--bh-border);
    z-index: 1030;
    transition: margin-left .18s ease;
}

.bh-burger {
    display: none;
    background: transparent;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-text-soft);
    width: 38px; height: 38px;
    cursor: pointer;
}
.bh-burger:hover { background: #f6f8fc; }

.bh-topbar-spacer { flex: 1 1 auto; }

.bh-topbar-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px;
    border-radius: var(--bh-radius-sm);
    border: 1px solid var(--bh-border);
    color: var(--bh-text-soft);
    font-weight: 500;
    font-size: 13.5px;
}
.bh-topbar-action:hover { background: #f6f8fc; color: var(--bh-primary); }

.bh-topbar-icon {
    position: relative;
    display: grid; place-items: center;
    width: 38px; height: 38px;
    border-radius: 50%;
    color: var(--bh-text-soft);
}
.bh-topbar-icon:hover { background: #f2f5fa; color: var(--bh-primary); }
.bh-topbar-icon .bh-dot-badge {
    position: absolute; top: 6px; right: 6px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bh-red);
    border: 2px solid #fff;
}

/* --- user menu --- */
.bh-dropdown { position: relative; }
.bh-user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 999px;
    color: var(--bh-text);
    font-weight: 600;
    font-size: 14px;
    font-family: inherit;
}
.bh-user-btn:hover { background: #f2f5fa; }
.bh-avatar {
    width: 36px; height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bh-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .4px;
}
.bh-user-btn .fa-chevron-down { font-size: 11px; color: var(--bh-muted); }

.bh-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 244px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow-lg);
    padding: 8px;
    display: none;
    z-index: 1060;
}
.bh-dropdown.bh-open .bh-menu { display: block; }
.bh-menu-head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--bh-border-soft);
    margin-bottom: 6px;
}
.bh-menu-head strong { display: block; font-size: 14px; }
.bh-menu-head span { font-size: 12.5px; color: var(--bh-muted); word-break: break-all; }
.bh-menu a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--bh-radius-sm);
    color: var(--bh-text-soft);
    font-size: 13.5px;
    font-weight: 500;
}
.bh-menu a:hover { background: #f7f4fe; color: var(--bh-primary); }
.bh-menu a i { width: 16px; text-align: center; color: var(--bh-muted); }
.bh-menu a:hover i { color: var(--bh-primary); }
.bh-menu hr { border: 0; border-top: 1px solid var(--bh-border-soft); margin: 6px 0; }
.bh-menu a.bh-danger, .bh-menu a.bh-danger i { color: var(--bh-red); }
.bh-menu a.bh-danger:hover { background: var(--bh-red-soft); color: #b42318; }

/* ==========================================================================
   3. Main area / page head
   ========================================================================== */
.bh-main {
    margin-left: var(--bh-sidebar-w);
    padding-top: var(--bh-topbar-h);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .18s ease;
}
.bh-page { flex: 1 1 auto; padding: 26px 24px 8px; }
.bh-page-inner { max-width: 1420px; margin: 0 auto; }

.bh-page-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 22px;
}
/* the page's own action, when this theme cannot put a button inside the page
   itself (see header.tpl). Sits at the end of the head row, after the
   breadcrumb, and takes its own line once the head starts wrapping. */
.bh-page-action { margin-left: 6px; }
@media (max-width: 768px) {
    .bh-page-action { margin-left: 0; width: 100%; }
}

.bh-page-head h1 {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: #344054;
}
.bh-breadcrumb {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--bh-muted);
}
.bh-breadcrumb a { color: var(--bh-primary); }
.bh-breadcrumb .bh-sep { color: #cdd5e3; }

.bh-footer {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    align-items: center;
    padding: 18px 24px;
    color: var(--bh-muted);
    font-size: 13px;
    border-top: 1px solid var(--bh-border);
    background: #fff;
    margin-top: 26px;
}
.bh-footer .bh-footer-right { margin-left: auto; }

/* ==========================================================================
   4. Cards & stat cards
   ========================================================================== */
.bh-card {
    background: var(--bh-card-bg);
    border: 1px solid var(--bh-border);
    border-radius: 14px;
    box-shadow: var(--bh-shadow);
    /* clips the head's gradient hairline to the rounded top corners */
    overflow: hidden;
    transition: box-shadow .18s ease, border-color .18s ease;
}
/* The head is tinted and carries a 2px gradient rule across the top: enough to
   give the card an edge to start from, without a filled colour bar. */
.bh-card-head {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 16px 20px;
    background: var(--bh-grad-soft);
    border-bottom: 1px solid var(--bh-border);
}
.bh-card-head::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--bh-grad);
    opacity: .85;
}
.bh-card-head h2, .bh-card-head h3 {
    margin: 0;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.1px;
}
.bh-card-head .bh-head-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.bh-card-body { padding: 20px; }

.bh-grid { display: grid; gap: 18px; }
.bh-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bh-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bh-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bh-mb-18 { margin-bottom: 18px; }
.bh-mb-24 { margin-bottom: 24px; }

/* Stat card. Rebuilt flat: label, then the figure. The old version wrapped a
   coloured icon bubble and a caption around each number — three decorations
   for one integer, in four different accent colours, none of which carried
   meaning. Colour is now spent on the single figure that implies an action:
   unpaid invoices. */
.bh-stat {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    transition: border-color .14s ease;
}
.bh-stat:hover { border-color: var(--bh-accent); }
.bh-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--bh-text-soft);
}
.bh-stat-value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.6px;
    color: var(--bh-text);
}
.bh-stat-due { border-color: #e4d8fb; background: #fdfcff; }
.bh-stat-due .bh-stat-value { color: var(--bh-primary); }

/* dashboard greeting row */
.bh-dash-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.bh-dash-head h2 {
    margin: 0;
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.2px;
    color: var(--bh-text);
}

/* label/value pairs — a table was overkill for five rows of account detail */
.bh-deflist { margin: 0; display: grid; grid-template-columns: 150px 1fr; gap: 12px 16px; }
.bh-deflist dt { font-size: 13px; color: var(--bh-muted); font-weight: 500; }
.bh-deflist dd { margin: 0; font-size: 13.5px; color: var(--bh-text); font-weight: 550; word-break: break-word; }
@media (max-width: 560px) {
    .bh-deflist { grid-template-columns: 1fr; gap: 2px 0; }
    .bh-deflist dd { margin-bottom: 10px; }
}

/* quick action tiles */
.bh-tile {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    color: var(--bh-text);
    transition: transform .14s ease, border-color .14s ease;
}
.bh-tile:hover {
    border-color: #dcccfb;
    background: #fbfdff;
    color: var(--bh-primary);
    transform: translateY(-2px);
}
.bh-tile > i:first-child {
    width: 42px; height: 42px;
    flex: 0 0 42px;
    border-radius: var(--bh-radius-sm);
    display: grid; place-items: center;
    background: var(--bh-primary-soft);
    color: var(--bh-primary);
    font-size: 17px;
}
.bh-tile strong { display: block; font-size: 14.5px; font-weight: 600; }
.bh-tile small { color: var(--bh-muted); font-size: 12.5px; }

/* ==========================================================================
   5. Tabs / toolbar / filters
   ========================================================================== */
.bh-tabs-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
    padding: 6px 20px 0;
    border-bottom: 1px solid var(--bh-border-soft);
}
.bh-tabs { display: flex; gap: 18px; flex-wrap: wrap; }
.bh-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 2px 13px;
    margin-bottom: -1px;
    border-bottom: 2px solid transparent;
    color: var(--bh-text-soft);
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
}
.bh-tab:hover { color: var(--bh-primary); }
.bh-tab.bh-active { color: var(--bh-primary); border-bottom-color: var(--bh-primary); }
.bh-tabs-actions { margin-left: auto; display: flex; gap: 10px; padding: 8px 0; flex-wrap: wrap; }

.bh-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 18px 20px;
}
.bh-toolbar-left, .bh-toolbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.bh-toolbar-right { margin-left: auto; }
.bh-toolbar-label { font-size: 13.5px; color: var(--bh-text-soft); }

.bh-select, .bh-input {
    height: 40px;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    background: #fff;
    color: var(--bh-text);
    font-size: 13.5px;
    font-family: inherit;
    padding: 0 12px;
    outline: none;
}
.bh-select {
    padding-right: 30px;
    min-width: 132px;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2398a2b3'%3E%3Cpath d='M4.2 6.2 8 10l3.8-3.8-1.1-1.1L8 7.8 5.3 5.1z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 9px center;
    background-size: 15px;
}
.bh-select.bh-select-sm { min-width: 82px; }
.bh-select:focus, .bh-input:focus {
    border-color: #c4b5fd;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}
.bh-search { position: relative; }
.bh-search .bh-input { padding-right: 36px; min-width: 230px; }
.bh-search i {
    position: absolute;
    right: 12px; top: 50%;
    transform: translateY(-50%);
    color: var(--bh-muted);
    font-size: 13px;
    pointer-events: none;
}

/* ==========================================================================
   6. Buttons
   ========================================================================== */
.bh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--bh-radius-sm);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}
.bh-btn-primary { background: var(--bh-primary); color: #fff; }
.bh-btn-primary:hover { background: var(--bh-primary-dark); color: #fff; }
.bh-btn-outline { background: #fff; border-color: var(--bh-border); color: var(--bh-text-soft); }
.bh-btn-outline:hover { background: #f6f8fc; border-color: #cfd8e8; color: var(--bh-primary); }
.bh-btn-soft { background: var(--bh-primary-soft); color: var(--bh-primary); }
.bh-btn-soft:hover { background: #e7d8fd; color: var(--bh-primary-dark); }
.bh-btn-success { background: var(--bh-green); color: #fff; }
.bh-btn-success:hover { background: #039855; color: #fff; }
.bh-btn-danger { background: var(--bh-red); color: #fff; }
.bh-btn-danger:hover { background: #d92d20; color: #fff; }
.bh-btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.bh-btn-lg { height: 46px; padding: 0 22px; font-size: 15px; }
.bh-btn-block { width: 100%; }
.bh-btn[disabled], .bh-btn.bh-disabled { opacity: .55; pointer-events: none; }

.bh-link-action {
    color: var(--bh-primary);
    font-weight: 600;
    font-size: 13.5px;
    white-space: nowrap;
}
.bh-link-action:hover { text-decoration: underline; }

/* icon-only quick actions inside tables */
.bh-qa { display: inline-flex; gap: 6px; }
.bh-qa-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    border-radius: 7px;
    border: 1px solid transparent;
    background: #f7f4fe;
    color: var(--bh-primary);
    font-size: 13px;
}
.bh-qa-btn:hover { background: var(--bh-primary); color: #fff; }

/* ==========================================================================
   7. Tables
   ========================================================================== */
.bh-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.bh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.bh-table th, .bh-table td {
    padding: 15px 20px;
    text-align: left;
    vertical-align: middle;
    border-top: 1px solid var(--bh-border-soft);
    white-space: nowrap;
}
.bh-table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--bh-border);
    background: #fcfdff;
    color: var(--bh-text-soft);
    font-size: 13px;
    font-weight: 650;
}
.bh-table thead th[data-bh-sort] { cursor: pointer; user-select: none; }
.bh-table thead th[data-bh-sort]:hover { color: var(--bh-primary); }
.bh-table thead th .bh-sort-ico { margin-left: 6px; font-size: 11px; color: #b6c0d3; }
.bh-table thead th.bh-sorted-asc .bh-sort-ico,
.bh-table thead th.bh-sorted-desc .bh-sort-ico { color: var(--bh-primary); }
.bh-table tbody tr:hover { background: #fafcff; }
.bh-table td.bh-right, .bh-table th.bh-right { text-align: right; }
.bh-table td.bh-center, .bh-table th.bh-center { text-align: center; }
.bh-table .bh-td-strong { font-weight: 600; color: var(--bh-text); }
.bh-table .bh-td-muted { color: var(--bh-muted); }

.bh-cell-icon {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}
.bh-cell-icon > .bh-ci {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--bh-primary-soft);
    color: var(--bh-primary);
    font-size: 13px;
}
.bh-cell-icon small { display: block; color: var(--bh-muted); font-size: 12.5px; font-weight: 400; }

/* status pills */
.bh-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 600;
    color: var(--bh-text-soft);
}
.bh-status::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--bh-muted);
}
.bh-status--active::before, .bh-status--paid::before, .bh-status--completed::before,
.bh-status--open::before, .bh-status--answered::before { background: var(--bh-green); }
.bh-status--active, .bh-status--paid, .bh-status--completed { color: #039855; }
.bh-status--pending::before, .bh-status--unpaid::before, .bh-status--draft::before,
.bh-status--customer-reply::before, .bh-status--in-progress::before { background: var(--bh-amber); }
.bh-status--pending, .bh-status--unpaid, .bh-status--draft { color: #b54708; }
.bh-status--expired::before, .bh-status--cancelled::before, .bh-status--terminated::before,
.bh-status--suspended::before, .bh-status--fraud::before, .bh-status--overdue::before { background: var(--bh-red); }
.bh-status--expired, .bh-status--cancelled, .bh-status--terminated,
.bh-status--suspended, .bh-status--fraud, .bh-status--overdue { color: #b42318; }
.bh-status--transferred-away::before, .bh-status--closed::before, .bh-status--refunded::before { background: #98a2b3; }

.bh-pill {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: #f2f4f7;
    color: var(--bh-text-soft);
}
.bh-pill--on  { background: var(--bh-green-soft); color: #027a48; }
.bh-pill--off { background: var(--bh-red-soft);   color: #b42318; }

.bh-text-on  { color: #039855; font-weight: 600; }
.bh-text-off { color: var(--bh-red); font-weight: 600; }

/* table footer / pagination */
.bh-table-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--bh-border-soft);
    font-size: 13.5px;
    color: var(--bh-text-soft);
}
.bh-pager { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.bh-pager button {
    min-width: 36px; height: 36px;
    padding: 0 10px;
    border: 1px solid var(--bh-border);
    background: #fff;
    border-radius: var(--bh-radius-sm);
    color: var(--bh-text-soft);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}
.bh-pager button:hover:not([disabled]) { background: #f7f4fe; color: var(--bh-primary); border-color: #cfd8e8; }
.bh-pager button.bh-current { background: var(--bh-primary); border-color: var(--bh-primary); color: #fff; }
.bh-pager button[disabled] { opacity: .45; cursor: default; }

/* empty state */
.bh-empty { padding: 56px 24px; text-align: center; }
.bh-empty .bh-empty-ico {
    width: 62px; height: 62px;
    margin: 0 auto 16px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: #f2f5fb;
    color: #98a2b3;
    font-size: 24px;
}
.bh-empty h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 650; }
.bh-empty p { margin: 0 0 18px; color: var(--bh-muted); font-size: 13.5px; }

/* ==========================================================================
   8. Alerts / misc
   ========================================================================== */
.bh-alert {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--bh-radius);
    border: 1px solid transparent;
    margin-bottom: 18px;
    font-size: 14px;
}
.bh-alert > i { font-size: 15px; margin-top: 2px; }
.bh-alert-success { background: #ecfdf3; border-color: #a6f4c5; color: #05603a; }
.bh-alert-danger  { background: #fef3f2; border-color: #fecdca; color: #912018; }
.bh-alert-info    { background: #eff8ff; border-color: #b2ddff; color: #175cd3; }
.bh-alert-warning { background: #fffaeb; border-color: #fedf89; color: #93370d; }
.bh-alert .bh-alert-close {
    margin-left: auto;
    background: none; border: 0; cursor: pointer;
    color: inherit; opacity: .6; font-size: 15px;
}
.bh-alert .bh-alert-close:hover { opacity: 1; }

.bh-hr { border: 0; border-top: 1px solid var(--bh-border-soft); margin: 20px 0; }
.bh-muted { color: var(--bh-muted); }
.bh-nowrap { white-space: nowrap; }
.bh-hide { display: none !important; }

.bh-overlay {
    position: fixed;
    inset: 0;
    background: rgba(16, 24, 40, .45);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease;
}
body.bh-sidebar-open .bh-overlay { opacity: 1; visibility: visible; }

/* ==========================================================================
   9. Guest pages (login / register / homepage)
   ========================================================================== */
body.bh-guest .bh-main,
body.bh-guest .bh-topbar { margin-left: 0; }
body.bh-guest .bh-sidebar { display: none; }
.bh-guest-brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 18px; font-weight: 700; color: var(--bh-text);
}
.bh-guest-brand .bh-brand-mark { background: var(--bh-primary); }
.bh-guest-wrap { max-width: 480px; margin: 30px auto; }
.bh-guest-wide { max-width: 1100px; margin: 20px auto; }
.bh-hero {
    background: linear-gradient(135deg, #1a1033, #5b21b6 70%, #7c3aed);
    color: #fff;
    border-radius: 16px;
    padding: 46px 32px;
    text-align: center;
    margin-bottom: 24px;
}
.bh-hero h1 { margin: 0 0 10px; font-size: 30px; font-weight: 700; }
.bh-hero p { margin: 0 auto 24px; max-width: 620px; opacity: .85; }
.bh-hero form { display: flex; gap: 10px; max-width: 620px; margin: 0 auto; flex-wrap: wrap; }
.bh-hero .bh-input { flex: 1 1 260px; height: 46px; }

/* ==========================================================================
   10. Compatibility for inherited (stock) WHMCS templates
   Stock pages ship Bootstrap markup; keep them readable inside our shell.
   ========================================================================== */
.bh-page .container, .bh-page .container-fluid { width: auto; max-width: 100%; padding-left: 0; padding-right: 0; }
.bh-page .card, .bh-page .panel {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    margin-bottom: 18px;
}
.bh-page .panel-heading, .bh-page .card-header {
    background: #fcfdff;
    border-bottom: 1px solid var(--bh-border-soft);
    border-radius: var(--bh-radius) var(--bh-radius) 0 0;
    padding: 14px 18px;
    font-weight: 650;
}
.bh-page .panel-body, .bh-page .card-body { padding: 18px; }
.bh-page .table > thead > tr > th {
    background: #fcfdff;
    color: var(--bh-text-soft);
    font-size: 13px;
    border-bottom: 1px solid var(--bh-border);
}
.bh-page .table > tbody > tr > td { border-top: 1px solid var(--bh-border-soft); vertical-align: middle; }
.bh-page .btn { border-radius: var(--bh-radius-sm); font-weight: 600; }
.bh-page .btn-primary { background-color: var(--bh-primary); border-color: var(--bh-primary); }
.bh-page .btn-primary:hover { background-color: var(--bh-primary-dark); border-color: var(--bh-primary-dark); }
.bh-page .form-control, .bh-page .form-select {
    border-radius: var(--bh-radius-sm);
    border-color: var(--bh-border);
    min-height: 40px;
}
.bh-page .nav-tabs { border-bottom: 1px solid var(--bh-border); }
.bh-page .nav-tabs > li > a, .bh-page .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent;
    color: var(--bh-text-soft); font-weight: 600;
}
.bh-page .nav-tabs > li.active > a, .bh-page .nav-tabs .nav-link.active {
    border: 0; border-bottom: 2px solid var(--bh-primary);
    color: var(--bh-primary); background: transparent;
}
.bh-page .label, .bh-page .badge { border-radius: 999px; font-weight: 600; }
.bh-page h1, .bh-page h2 { font-size: 20px; font-weight: 650; }
.bh-page h3 { font-size: 17px; font-weight: 650; }

/* WHMCS contextual sidebars (rendered by header.tpl) */
.bh-with-aside { display: flex; align-items: flex-start; gap: 20px; }
.bh-with-aside > .bh-col-main { flex: 1 1 auto; min-width: 0; }
.bh-aside { flex: 0 0 288px; width: 288px; }
.bh-aside-panel {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    margin-bottom: 18px;
    overflow: hidden;
}
.bh-aside-panel > .bh-aside-title {
    display: flex; align-items: center; gap: 9px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--bh-border-soft);
    background: #fcfdff;
    font-size: 14px;
    font-weight: 650;
}
.bh-aside-panel > .bh-aside-title i { color: var(--bh-primary); }
.bh-aside-panel .bh-aside-body { padding: 14px 16px; font-size: 13.5px; color: var(--bh-text-soft); }
.bh-aside-list { list-style: none; margin: 0; padding: 6px; }
.bh-aside-list a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: var(--bh-radius-sm);
    color: var(--bh-text-soft);
    font-size: 13.5px;
    font-weight: 500;
}
.bh-aside-list a:hover { background: #f7f4fe; color: var(--bh-primary); }
.bh-aside-list a i { width: 16px; text-align: center; color: var(--bh-muted); }
.bh-aside-list a:hover i { color: var(--bh-primary); }
.bh-aside-list .bh-aside-badge {
    margin-left: auto;
    background: var(--bh-primary-soft); color: var(--bh-primary);
    border-radius: 999px; padding: 2px 8px; font-size: 11.5px; font-weight: 700;
}

/* ==========================================================================
   11. Responsive
   ========================================================================== */
@media (max-width: 1200px) {
    .bh-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 992px) {
    .bh-sidebar { transform: translateX(-100%); }
    body.bh-sidebar-open .bh-sidebar { transform: none; box-shadow: 8px 0 26px rgba(16, 24, 40, .2); }
    .bh-topbar, .bh-main { margin-left: 0 !important; }
    .bh-burger { display: grid; place-items: center; }
    .bh-collapse-btn { display: none; }
    .bh-with-aside { flex-direction: column; }
    .bh-aside { flex: 1 1 auto; width: 100%; }
    .bh-grid-3, .bh-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .bh-page { padding: 18px 14px 4px; }
    .bh-topbar { padding: 0 14px; }
    .bh-page-head h1 { font-size: 21px; }
    .bh-breadcrumb { margin-left: 0; width: 100%; }
    .bh-grid-4 { grid-template-columns: 1fr; }
    .bh-toolbar, .bh-tabs-bar { padding-left: 14px; padding-right: 14px; }
    .bh-toolbar-right { margin-left: 0; width: 100%; }
    .bh-search { flex: 1 1 100%; }
    .bh-search .bh-input { min-width: 0; width: 100%; }
    .bh-table th, .bh-table td { padding: 13px 14px; }
    .bh-user-btn .bh-user-name { display: none; }
    .bh-hero { padding: 32px 18px; }
    .bh-hero h1 { font-size: 23px; }
}
@media print {
    .bh-sidebar, .bh-topbar, .bh-toolbar, .bh-tabs-bar, .bh-footer, .bh-overlay { display: none !important; }
    .bh-main { margin: 0; padding: 0; }
    body.bh-body { background: #fff; }
}

/* ==========================================================================
   12. Order form (templates/orderforms/binduhost_cart)
   The order form renders inside this theme's header/footer, so these rules
   style both our custom products.tpl and the stock standard_cart pages that
   were left untouched (configure, cart, checkout, domain search).
   ========================================================================== */
.bh-of-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
    gap: 20px;
    margin-bottom: 22px;
}

.bh-of-card {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 26px 22px 22px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.bh-of-card:hover {
    transform: translateY(-3px);
    border-color: #dcccfb;
    box-shadow: var(--bh-shadow-lg);
}
.bh-of-card.bh-of-featured {
    border-color: var(--bh-primary);
    box-shadow: 0 10px 28px rgba(124, 58, 237, .16);
}
.bh-of-tag {
    position: absolute;
    top: 14px; right: 14px;
    background: var(--bh-primary);
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}

.bh-of-head h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--bh-text);
}

.bh-of-price-box {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
    padding: 16px 0;
    margin: 14px 0 4px;
    border-top: 1px solid var(--bh-border-soft);
    border-bottom: 1px solid var(--bh-border-soft);
}
.bh-of-price {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.6px;
    color: var(--bh-primary);
    line-height: 1.1;
}
.bh-of-cycle { font-size: 13.5px; color: var(--bh-muted); font-weight: 500; }
.bh-of-setup { flex: 1 1 100%; font-size: 12.5px; color: var(--bh-muted); }

.bh-of-desc {
    padding: 14px 0 2px;
    font-size: 13.5px;
    color: var(--bh-text-soft);
}
.bh-of-desc p { margin: 0 0 8px; }

.bh-of-features {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: 13.5px;
    color: var(--bh-text-soft);
}
.bh-of-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 6px 0;
}
.bh-of-features li i {
    margin-top: 3px;
    font-size: 11px;
    color: #039855;
    background: var(--bh-green-soft);
    width: 18px; height: 18px;
    flex: 0 0 18px;
    border-radius: 50%;
    display: grid; place-items: center;
}
.bh-of-features strong { color: var(--bh-text); font-weight: 650; }

.bh-of-foot { margin-top: auto; padding-top: 20px; }
.bh-of-stock { font-size: 12.5px; color: var(--bh-muted); margin-bottom: 8px; text-align: center; }

.bh-of-help {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 20px;
    background: #fff;
    border: 1px dashed #cfdbf3;
    border-radius: var(--bh-radius);
}
.bh-of-help > div { flex: 1 1 280px; display: flex; flex-direction: column; }
.bh-of-help strong { font-size: 14.5px; }
.bh-of-help span { font-size: 13px; }

/* --- stock standard_cart pages (configure / cart / checkout / domains) --- */
#order-standard_cart .header-lined,
#order-standard_cart .cart-header {
    border-bottom: 1px solid var(--bh-border);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
#order-standard_cart h1 { font-size: 22px; font-weight: 700; }
#order-standard_cart h2 { font-size: 18px; font-weight: 650; }
#order-standard_cart .summary-container,
#order-standard_cart #order-summary {
    position: sticky;
    top: calc(var(--bh-topbar-h) + 16px);
}
#order-standard_cart .product-info,
#order-standard_cart .cart-body,
#order-standard_cart .domain-checker-container,
#order-standard_cart .domain-selection-options {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    padding: 18px;
    margin-bottom: 18px;
}
#order-standard_cart .domain-checker-container input[type="text"] { min-height: 44px; }
#order-standard_cart .btn-checkout,
#order-standard_cart #btnCompleteOrder,
#order-standard_cart .checkout-button { width: 100%; min-height: 46px; font-weight: 700; }
#order-standard_cart .promotion-code,
#order-standard_cart .order-summary-total { font-weight: 650; }
#order-standard_cart .field-container { margin-bottom: 14px; }

@media (max-width: 768px) {
    .bh-of-grid { grid-template-columns: 1fr; }
    #order-standard_cart .summary-container,
    #order-standard_cart #order-summary { position: static; }
}

/* ==========================================================================
   13. Cart / domain checker pages (stock standard_cart markup)
   compat.css restores the Bootstrap grid these pages need; these rules make
   them look like the rest of the theme.
   ========================================================================== */
.bh-page .header-lined,
#order-standard_cart .header-lined {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid var(--bh-border);
    padding-bottom: 12px;
    margin: 0 0 20px;
}
.bh-page .header-lined h1,
.bh-page .header-lined h2,
#order-standard_cart h1 { margin: 0; font-size: 22px; font-weight: 700; color: #344054; }
#order-standard_cart p.lead,
#order-standard_cart .cart-intro { font-size: 14.5px; color: var(--bh-text-soft); }

/* domain search hero — dark overlay over WHMCS's stock background image */
.bh-page .domain-checker-container,
.bh-page .domain-checker,
.bh-page #domain-checker,
#order-standard_cart .domain-checker-container {
    background-color: #1a1033 !important;
    background-blend-mode: multiply;
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 16px;
    padding: 40px 24px !important;
    margin-bottom: 24px;
    color: #fff;
    text-align: center;
}
.bh-page .domain-checker-container h2,
.bh-page .domain-checker-container h3,
.bh-page .domain-checker-container p { color: #fff; }
.bh-page .domain-checker-container .form-control,
.bh-page .domain-checker-container input[type="text"] {
    min-height: 48px;
    font-size: 15px;
    border: 0;
}
.bh-page .domain-checker-container .btn,
.bh-page .domain-checker-container button[type="submit"] { min-height: 48px; padding: 0 26px; font-size: 15px; }

/* TLD / extension pricing lists */
.bh-page .tld-category,
.bh-page .tld-pricing,
.bh-page #premiumDomainsContainer {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    padding: 6px 0;
    margin-bottom: 18px;
}
.bh-page .tld-row,
.bh-page .tld-category .row {
    align-items: center;
    padding: 10px 16px;
    margin: 0;
    border-bottom: 1px solid var(--bh-border-soft);
}
.bh-page .tld-row:last-child,
.bh-page .tld-category .row:last-child { border-bottom: 0; }

/* domain results / cart line items */
.bh-page .domain-lookup-result,
.bh-page .domain-search-results .row {
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--bh-border-soft);
}
.bh-page .domain-lookup-result.unavailable { opacity: .6; }

/* order summary / totals */
.bh-page .summary-container .panel,
.bh-page #order-summary { box-shadow: var(--bh-shadow); }
.bh-page .order-summary-total,
.bh-page .cart-total { font-size: 16px; font-weight: 700; color: var(--bh-text); }

/* the stock sidebar panels the order form renders inside its own layout */
.bh-page .panel-sidebar .panel-title,
.bh-page .card-sidebar .card-title,
.bh-page .panel-heading h3 { font-size: 15px; font-weight: 650; }
.bh-page .panel-sidebar .list-group-item,
.bh-page .card-sidebar .list-group-item { font-size: 13.5px; }

/* ==========================================================================
   14. Guard rails — parent theme stylesheet on stock pages
   header.tpl loads the parent theme's CSS on pages this theme doesn't
   override. That CSS assumes the parent's own header/footer chrome, so these
   rules keep it from disturbing our shell. Loaded after it, always.
   ========================================================================== */
body.bh-body { padding-top: 0 !important; margin: 0 !important; }

/* stock wrappers must not re-add the parent's page gutters or max-widths */
.bh-page #main-body,
.bh-page .main-content { padding: 0 !important; margin: 0 !important; }
.bh-page .container,
.bh-page .container-fluid,
.bh-page .container-lg,
.bh-page .container-xl {
    width: auto !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* the parent theme's own navbar/footer must never show inside our shell */
.bh-page #header,
.bh-page #top-nav,
.bh-page #main-menu,
.bh-page .navbar-main,
.bh-page .footer-main,
.bh-page #footer { display: none !important; }

/* keep our shell immune to parent-theme resets */
.bh-sidebar, .bh-topbar, .bh-main, .bh-footer { box-sizing: border-box; }
.bh-topbar { background: #fff !important; }
.bh-sidebar { background: var(--bh-sidebar-grad) !important; }

/* ==========================================================================
   15. Checkout payment methods
   Applies once a gateway (e.g. shurjoPay) is active — the stock cart renders
   the choices as radios, sometimes with the gateway's logo.
   ========================================================================== */
.bh-page .payment-methods,
.bh-page #payment-methods,
.bh-page .payment-method-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 14px 0 20px;
}
.bh-page .payment-method,
.bh-page label.payment-method-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease;
}
.bh-page .payment-method:hover,
.bh-page label.payment-method-label:hover { border-color: #c4b5fd; }
.bh-page .payment-method input[type="radio"],
.bh-page label.payment-method-label input[type="radio"] { margin: 0; accent-color: var(--bh-primary); }
.bh-page .payment-method img { max-height: 26px; width: auto; margin-left: auto; }
.bh-page .payment-method.selected,
.bh-page .payment-method:has(input:checked) {
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

/* the pay button shurjopay_link() renders on an invoice */
.bh-page form .btn.bh-btn-primary { min-width: 190px; }

/* ==========================================================================
   16. Cart review & checkout — brand polish
   The stock cart ships a green checkout button, a navy table header and a
   grey summary bar. These rules put the Bindu Host purple on the parts a
   customer actually looks at, without touching semantic colours (a paid
   badge, a success alert and a danger warning all keep their own meaning).
   Href-based selectors are used where WHMCS's class names vary between
   versions — the cart's own links are stable.
   ========================================================================== */

/* --- headings ------------------------------------------------------------ */
.bh-page h1 { font-size: 24px; font-weight: 700; color: #344054; }
.bh-page h2 { font-size: 19px; font-weight: 650; }
#order-standard_cart > h1:first-child,
#order-standard_cart .header-lined h1 { margin-bottom: 18px; }

/* --- primary calls to action -------------------------------------------- */
.bh-page .btn-success,
.bh-page #btnCompleteOrder,
.bh-page .checkout-button,
.bh-page .btn-checkout,
#order-standard_cart a[href*="a=checkout"],
#order-standard_cart a[href*="checkout"].btn {
    background-color: var(--bh-primary);
    border-color: var(--bh-primary);
    color: #fff;
    font-weight: 700;
    letter-spacing: .2px;
    box-shadow: none;
}
.bh-page .btn-success:hover,
.bh-page #btnCompleteOrder:hover,
.bh-page .checkout-button:hover,
.bh-page .btn-checkout:hover,
#order-standard_cart a[href*="a=checkout"]:hover {
    background-color: var(--bh-primary-dark);
    border-color: var(--bh-primary-dark);
    color: #fff;
    box-shadow: none;
}

/* destructive actions stay quiet until hovered */
#order-standard_cart a[href*="a=empty"],
#order-standard_cart .btn-danger {
    background: #fff;
    border: 1px solid var(--bh-border);
    color: var(--bh-text-soft);
    box-shadow: none;
}
#order-standard_cart a[href*="a=empty"]:hover,
#order-standard_cart .btn-danger:hover {
    background: var(--bh-red-soft);
    border-color: #fecdca;
    color: #b42318;
}

/* --- panel headers: cart items + order summary --------------------------- */
#order-standard_cart .panel-heading,
#order-standard_cart .card-header,
#order-standard_cart .summary-container .panel-heading,
#order-standard_cart #order-summary .panel-heading,
.bh-page .order-summary-header,
.bh-page .cart-header-bar {
    background: var(--bh-primary) !important;
    border: 0 !important;
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
    padding: 14px 18px;
    border-radius: var(--bh-radius) var(--bh-radius) 0 0;
}
#order-standard_cart .panel-heading a,
#order-standard_cart .card-header a,
#order-standard_cart .panel-title { color: #fff; }

#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .summary-container > div {
    border-radius: var(--bh-radius);
    overflow: hidden;
    box-shadow: var(--bh-shadow);
}

/* --- cart line items ----------------------------------------------------- */
#order-standard_cart table thead th,
#order-standard_cart .cart-items thead th,
#order-standard_cart .table > thead > tr > th {
    background: var(--bh-primary);
    color: #fff;
    border: 0;
    font-size: 13.5px;
    font-weight: 650;
    padding: 14px 18px;
}
#order-standard_cart table tbody td,
#order-standard_cart .table > tbody > tr > td { padding: 16px 18px; }
#order-standard_cart .cart-item-name,
#order-standard_cart tbody td:first-child { font-weight: 650; color: var(--bh-text); }
#order-standard_cart .cart-item-price,
#order-standard_cart tbody td:last-child { font-size: 17px; font-weight: 700; color: var(--bh-text); }
#order-standard_cart .cart-item-cycle,
#order-standard_cart small { color: var(--bh-muted); font-weight: 400; }

/* inline Edit / Remove actions */
#order-standard_cart a[href*="a=confproduct"],
#order-standard_cart a[href*="a=remove"],
#order-standard_cart .cart-item-actions a {
    font-size: 13px;
    font-weight: 600;
    color: var(--bh-primary);
}
#order-standard_cart a[href*="a=remove"] { color: var(--bh-red); }
#order-standard_cart a[href*="a=remove"]:hover { color: #b42318; text-decoration: underline; }

/* --- order summary body -------------------------------------------------- */
#order-standard_cart .summary-container .panel-body,
#order-standard_cart #order-summary .panel-body { padding: 18px; font-size: 14px; }
#order-standard_cart .summary-container .panel-body .row,
#order-standard_cart #order-summary .row {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    margin: 0;
    color: var(--bh-text-soft);
}
#order-standard_cart .total-due-today,
#order-standard_cart .cart-total,
#order-standard_cart .order-summary-total {
    margin-top: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--bh-border-soft);
    font-size: 22px;
    font-weight: 700;
    color: var(--bh-primary);
}

/* --- promo code ---------------------------------------------------------- */
#order-standard_cart .promo-code,
#order-standard_cart #promo-code,
#order-standard_cart .apply-promo {
    background: #faf8ff;
    border: 1px dashed #d9caf9;
    border-radius: var(--bh-radius);
    padding: 16px 18px;
    margin-top: 18px;
}
#order-standard_cart .promo-code .btn,
#order-standard_cart input[name="promocode"] + .btn,
#order-standard_cart button[name="validatepromo"] {
    background: var(--bh-primary-soft);
    border-color: transparent;
    color: var(--bh-primary);
    font-weight: 650;
}
#order-standard_cart .promo-code .btn:hover,
#order-standard_cart button[name="validatepromo"]:hover {
    background: var(--bh-primary);
    color: #fff;
}

/* --- continue shopping / secondary links --------------------------------- */
/* :not(.bh-of-cta) matters here: this theme's own products.tpl wraps its
   pricing cards in the SAME #order-standard_cart id (to reuse this section's
   styling) and its "Order Now" button also links to a URL containing
   "a=add" (cart.php?a=add&pid=X) — without the exclusion this rule caught
   that button too and repainted it as a small grey inline link instead of
   the purple pill .bh-of-cta defines, exactly the bug reported here. */
#order-standard_cart a[href*="a=add"]:not(.btn):not(.bh-of-cta),
#order-standard_cart .continue-shopping {
    display: inline-block;
    margin-top: 10px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--bh-text-soft);
}
#order-standard_cart a[href*="a=add"]:not(.btn):not(.bh-of-cta):hover,
#order-standard_cart .continue-shopping:hover { color: var(--bh-primary); }

/* --- the "secure environment / IP logged" notice ------------------------- */
#order-standard_cart .secure-notice,
#order-standard_cart .alert-warning {
    background: #faf8ff;
    border-color: #e4d8fb;
    color: var(--bh-text-soft);
    border-radius: var(--bh-radius);
    font-size: 13px;
}

/* --- checkout page section titles (Choose Account, Payment Details, …) ---- */
#order-standard_cart legend,
.bh-page fieldset legend {
    border: 0;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bh-border-soft);
    color: var(--bh-primary);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .2px;
}
#order-standard_cart .field-container label,
.bh-page fieldset label { color: var(--bh-text-soft); font-size: 13.5px; }

/* ==========================================================================
   17. Checkout step (cart.php?a=checkout)
   The stock checkout is a long stack of bare fieldsets. These rules turn each
   section into its own card, make the account choice feel selectable, and put
   the amount and the final button where the eye lands last.
   body[data-action] comes from header.tpl, so nothing here leaks onto other
   pages that happen to use the same Bootstrap classes.
   ========================================================================== */
body[data-page="cart"] #order-standard_cart fieldset {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    padding: 20px 22px;
    margin: 0 0 18px;
}
body[data-page="cart"] #order-standard_cart legend {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none;
    width: auto;
    max-width: 100%;
    padding: 0 0 12px;
    margin: 0 0 16px;
    border: 0;
    border-bottom: 1px solid var(--bh-border-soft);
    text-align: left;
    font-size: 15.5px;
    font-weight: 700;
    color: var(--bh-text);
}
body[data-page="cart"] #order-standard_cart legend::before {
    content: "";
    flex: 0 0 4px;
    width: 4px;
    height: 18px;
    border-radius: 2px;
    background: var(--bh-primary);
}

/* --- selectable option rows (account choice, registrant, gateways) ------- */
body[data-page="cart"] #order-standard_cart .radio,
body[data-page="cart"] #order-standard_cart .form-check,
body[data-page="cart"] #order-standard_cart .existing-account,
body[data-page="cart"] #order-standard_cart .new-account {
    display: block;
    padding: 14px 16px;
    margin: 0 0 10px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    cursor: pointer;
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
body[data-page="cart"] #order-standard_cart .radio:hover,
body[data-page="cart"] #order-standard_cart .form-check:hover { border-color: #c4b5fd; background: #fdfcff; }
body[data-page="cart"] #order-standard_cart .radio:has(input:checked),
body[data-page="cart"] #order-standard_cart .form-check:has(input:checked) {
    border-color: var(--bh-primary);
    background: #faf8ff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}
body[data-page="cart"] #order-standard_cart input[type="radio"],
body[data-page="cart"] #order-standard_cart input[type="checkbox"] { accent-color: var(--bh-primary); }

/* --- amount due ----------------------------------------------------------
   This used to be a filled purple block. It sits directly under the Order
   Summary card's own purple header and just above the purple Checkout
   button, so three strong purple shapes stacked up and the button — the one
   thing to actually click — stopped standing out. It is now a quiet line
   with the figure itself carrying the emphasis. */
body[data-page="cart"][data-action="checkout"] #order-standard_cart .alert-success,
body[data-page="cart"] #order-standard_cart .total-due-today,
body[data-page="cart"] #order-standard_cart #totalDueToday {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    background: transparent;
    background-image: none;
    border: 0;
    border-radius: 0;
    padding: 14px 0;
    color: var(--bh-text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart .alert-success strong,
body[data-page="cart"] #order-standard_cart .total-due-today strong,
body[data-page="cart"] #order-standard_cart #totalDueToday strong {
    color: var(--bh-primary);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.4px;
    text-transform: none;
}

/* --- inputs & notes ------------------------------------------------------ */
body[data-page="cart"] #order-standard_cart textarea.form-control { min-height: 110px; resize: vertical; }
body[data-page="cart"] #order-standard_cart select.form-control,
body[data-page="cart"] #order-standard_cart .custom-select { max-width: 520px; }

/* --- the final button ---------------------------------------------------- */
body[data-page="cart"] #order-standard_cart #btnCompleteOrder,
body[data-page="cart"] #order-standard_cart input[type="submit"].btn-primary,
body[data-page="cart"] #order-standard_cart button[type="submit"].btn-primary {
    width: 100%;
    min-height: 54px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .3px;
    border-radius: 10px;
    background: var(--bh-primary);
    border: 0;
    box-shadow: none;
}
body[data-page="cart"] #order-standard_cart #btnCompleteOrder:hover,
body[data-page="cart"] #order-standard_cart input[type="submit"].btn-primary:hover {
    background: var(--bh-primary-dark);
    box-shadow: none;
}

/* --- trust notice at the bottom ----------------------------------------- */
body[data-page="cart"] #order-standard_cart .secure-notice,
body[data-page="cart"] #order-standard_cart .checkout-secure {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    background: #faf8ff;
    border: 1px solid #e4d8fb;
    border-radius: var(--bh-radius);
    color: var(--bh-text-soft);
    font-size: 12.5px;
}

@media (min-width: 992px) {
    /* keep the checkout column readable instead of stretching edge to edge */
    body[data-page="cart"][data-action="checkout"] #order-standard_cart { max-width: 860px; }
}

/* ==========================================================================
   18. Domain search hero — branded replacement
   The stock hero is a large stock globe photo that fights the theme and eats
   ~400px of height. Here it is replaced outright with a purple gradient, a
   soft light bloom and a faint dot grid, and the search field becomes a pill
   with the button sitting inside it.
   ========================================================================== */
.bh-page .domain-checker-container,
.bh-page .domain-checker,
.bh-page #domain-checker,
#order-standard_cart .domain-checker-container {
    position: relative;
    overflow: hidden;
    min-height: 0 !important;
    padding: 46px 24px !important;
    margin-bottom: 26px;
    border-radius: 18px;
    background-color: #1a1033 !important;
    background-image:
        radial-gradient(circle at 88% 30%, rgba(168, 85, 247, .40), transparent 58%),
        radial-gradient(circle at 8% 85%, rgba(91, 33, 182, .55), transparent 55%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='2' cy='2' r='1' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat, no-repeat, repeat !important;
    background-size: auto, auto, 28px 28px !important;
    background-blend-mode: normal !important;
    box-shadow: 0 18px 44px rgba(26, 16, 51, .35);
    text-align: center;
}

/* a soft bloom behind the search field */
.bh-page .domain-checker-container::before,
#order-standard_cart .domain-checker-container::before {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 620px; height: 620px;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(147, 51, 234, .32), transparent 62%);
    pointer-events: none;
}

.bh-page .domain-checker-container > *,
#order-standard_cart .domain-checker-container > * { position: relative; z-index: 1; }

.bh-page .domain-checker-container h1,
.bh-page .domain-checker-container h2,
.bh-page .domain-checker-container h3 {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 8px;
}
.bh-page .domain-checker-container p { color: rgba(255, 255, 255, .78); margin-bottom: 20px; }

/* --- the search field as one pill --------------------------------------- */
.bh-page .domain-checker-container form,
#order-standard_cart .domain-checker-container form { max-width: 720px; margin: 0 auto; }

.bh-page .domain-checker-container .input-group,
#order-standard_cart .domain-checker-container .input-group {
    max-width: 720px;
    margin: 0 auto;
    padding: 6px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(10, 5, 25, .38);
}
.bh-page .domain-checker-container .input-group .form-control,
.bh-page .domain-checker-container input[type="text"],
#order-standard_cart .domain-checker-container input[type="text"] {
    height: 50px;
    min-height: 50px;
    border: 0 !important;
    background: transparent;
    box-shadow: none !important;
    font-size: 15.5px;
    padding-left: 22px;
    border-radius: 999px;
}
.bh-page .domain-checker-container input[type="text"]::placeholder { color: #98a2b3; }

.bh-page .domain-checker-container .btn,
.bh-page .domain-checker-container button[type="submit"],
#order-standard_cart .domain-checker-container .btn {
    height: 50px;
    min-height: 50px;
    padding: 0 32px;
    border: 0;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .3px;
    background: var(--bh-primary);
    color: #fff;
    box-shadow: none;
}
.bh-page .domain-checker-container .btn:hover,
#order-standard_cart .domain-checker-container .btn:hover {
    background: var(--bh-primary-dark);
    color: #fff;
}

/* stand-alone (non input-group) markup: keep the pair on one line */
.bh-page .domain-checker-container form:not(:has(.input-group)) {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 999px;
    padding: 6px;
    box-shadow: 0 14px 34px rgba(10, 5, 25, .38);
}
.bh-page .domain-checker-container form:not(:has(.input-group)) input[type="text"] { flex: 1 1 320px; }

/* --- TLD pricing table under the hero ------------------------------------ */
.bh-page .tld-category .row,
.bh-page .tld-row,
#order-standard_cart .tld-category .row { border-bottom: 1px solid var(--bh-border-soft); }
#order-standard_cart .nav-tabs .nav-link,
.bh-page .tld-tabs a {
    padding: 8px 16px;
    border: 1px solid var(--bh-border);
    border-radius: 999px;
    font-size: 13px;
    font-weight: 650;
    color: var(--bh-text-soft);
    background: #fff;
}
#order-standard_cart .nav-tabs .nav-link.active,
.bh-page .tld-tabs a.active {
    background: var(--bh-primary-soft);
    border-color: #d9caf9;
    color: var(--bh-primary);
}

@media (max-width: 768px) {
    .bh-page .domain-checker-container,
    #order-standard_cart .domain-checker-container { padding: 32px 16px !important; border-radius: 14px; }
    .bh-page .domain-checker-container .input-group { border-radius: 16px; padding: 10px; }
    .bh-page .domain-checker-container input[type="text"],
    .bh-page .domain-checker-container .btn { width: 100%; border-radius: 12px; }
}

/* ==========================================================================
   19. Product cards — motion and the order button
   The CTA is its own component (.bh-of-cta) rather than a .bh-btn variant, so
   the pill shape, gradient and icon spacing cannot be flattened by the stock
   cart stylesheet that also loads on this page.
   ========================================================================== */

/* --- the order button ---------------------------------------------------- */
.bh-of-cta {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--bh-primary), #9333ea);
    color: #fff;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(124, 58, 237, .28);
    transition: transform .2s cubic-bezier(.22, .61, .36, 1),
                box-shadow .2s ease,
                background .2s ease;
}
.bh-of-cta:hover {
    background: linear-gradient(135deg, #6d28d9, #7e22ce);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(124, 58, 237, .40);
}
.bh-of-cta:active { transform: translateY(0); box-shadow: 0 6px 14px rgba(124, 58, 237, .32); }
.bh-of-cta i { font-size: 13px; }
.bh-of-cta .bh-of-cta-arrow {
    opacity: .85;
    transition: transform .22s cubic-bezier(.22, .61, .36, 1);
}
.bh-of-card:hover .bh-of-cta-arrow { transform: translateX(5px); }

/* light sweep across the button on hover */
.bh-of-cta::before {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 45%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .28), transparent);
    transform: skewX(-18deg);
    transition: left .55s ease;
}
.bh-of-cta:hover::before { left: 115%; }

/* sold out */
.bh-of-cta--out {
    background: #f2f4f7;
    color: var(--bh-muted);
    box-shadow: none;
    cursor: not-allowed;
}
.bh-of-cta--out:hover { background: #f2f4f7; color: var(--bh-muted); transform: none; box-shadow: none; }
.bh-of-cta--out::before { display: none; }

/* --- card entrance, staggered ------------------------------------------- */
@keyframes bhCardIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}
.bh-of-grid > .bh-of-card {
    animation: bhCardIn .5s cubic-bezier(.22, .61, .36, 1) both;
}
.bh-of-grid > .bh-of-card:nth-child(1) { animation-delay: .02s; }
.bh-of-grid > .bh-of-card:nth-child(2) { animation-delay: .10s; }
.bh-of-grid > .bh-of-card:nth-child(3) { animation-delay: .18s; }
.bh-of-grid > .bh-of-card:nth-child(4) { animation-delay: .26s; }
.bh-of-grid > .bh-of-card:nth-child(5) { animation-delay: .34s; }
.bh-of-grid > .bh-of-card:nth-child(6) { animation-delay: .42s; }
.bh-of-grid > .bh-of-card:nth-child(n+7) { animation-delay: .5s; }

/* --- card hover ---------------------------------------------------------- */
.bh-of-card {
    transition: transform .24s cubic-bezier(.22, .61, .36, 1),
                box-shadow .24s ease,
                border-color .24s ease;
}
.bh-of-card::after {
    content: "";
    position: absolute;
    top: 0; left: 50%;
    width: 0; height: 3px;
    border-radius: 0 0 3px 3px;
    background: linear-gradient(90deg, var(--bh-primary), #9333ea);
    transform: translateX(-50%);
    transition: width .28s cubic-bezier(.22, .61, .36, 1);
}
.bh-of-card:hover {
    transform: translateY(-6px);
    border-color: #d9caf9;
    box-shadow: 0 20px 40px rgba(26, 16, 51, .16);
}
.bh-of-card:hover::after { width: 72%; }

.bh-of-price { transition: transform .24s cubic-bezier(.22, .61, .36, 1); transform-origin: left center; }
.bh-of-card:hover .bh-of-price { transform: scale(1.04); }

/* feature ticks lift slightly with the card */
.bh-of-features li i { transition: transform .24s ease, background .24s ease; }
.bh-of-card:hover .bh-of-features li i { transform: scale(1.12); }

/* --- featured card ------------------------------------------------------- */
.bh-of-card.bh-of-featured { transform: translateY(-4px); }
.bh-of-card.bh-of-featured:hover { transform: translateY(-9px); }
@keyframes bhTagPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(124, 58, 237, .45); }
    50%      { box-shadow: 0 0 0 9px rgba(124, 58, 237, 0); }
}
.bh-of-featured .bh-of-tag { animation: bhTagPulse 2.6s ease-out infinite; }

/* --- help strip ---------------------------------------------------------- */
.bh-of-help { transition: border-color .2s ease, background .2s ease; }
.bh-of-help:hover { border-color: #c4b5fd; background: #fdfcff; }

/* --- respect the visitor's motion preference ----------------------------- */
@media (prefers-reduced-motion: reduce) {
    .bh-of-grid > .bh-of-card,
    .bh-of-featured .bh-of-tag { animation: none; }
    .bh-of-card,
    .bh-of-cta,
    .bh-of-cta::before,
    .bh-of-price,
    .bh-of-cta-arrow { transition: none; }
    .bh-of-card:hover { transform: none; }
}

/* ==========================================================================
   20. Guest auth pages (login, register, password reset)
   Selectors below are the CONFIRMED stock markup for this WHMCS install (read
   directly from the live templates/twenty-one/login.tpl, clientregister.tpl
   and clientareadetails.tpl — not guessed). Two structural facts drive this
   whole section:
     * The stock form is not itself the card — it WRAPS one or more .card
       elements (compat.css already makes .card a white, bordered, shadowed
       box). So the <form> only needs to be centred and width-capped; giving
       it its own background too would nest a second box inside the first.
     * Register and profile split a field into an icon + input pair using
       "prepend-icon" (a label.field-icon before the input), not Bootstrap's
       .input-group. That pattern gets its own rules further down.
   ========================================================================== */
body.bh-guest .bh-page { padding-top: 30px; }

/* the stock form already has its own heading, so the page title strip above
   it is redundant — theme.js tags <body> when it finds a login/register form */
body.bh-auth-page .bh-page-head { display: none !important; }
body.bh-auth-page .bh-page-inner { padding-top: 26px; }

/* small utilities the stock markup uses that compat.css does not define */
.mw-540 { max-width: 540px; }
@media (min-width: 768px) {
    .float-md-left  { float: left !important; }
    .float-md-right { float: right !important; }
    /* clientareadetails.tpl floats its two field columns instead of using
       flex at this breakpoint (.row.d-md-block turns off .row's flex
       display) — without a clearfix here the floats collapse their
       containing .card-body to zero height and the footer overlaps them. */
    .bh-page .row.d-md-block::after { content: ""; display: table; clear: both; }
}
.input-group-merge > .input-group-prepend > .input-group-text,
.input-group-merge > .form-control { border-right: 0; }
.input-group-merge > .input-group-append > .btn { border-left: 0; background: #fff; }

/* --- login.tpl: <form class="login-form"><div class="card mw-540">... ---- */
.bh-page .login-form { display: block; }
.bh-page .login-form .card { margin: 24px auto; }
.bh-page .login-form .card-body h6.h3 { font-size: 19px; font-weight: 700; margin: 0 0 4px; }
.bh-page .login-form .text-muted { color: var(--bh-muted) !important; }
.bh-page .login-form .btn-primary {
    min-height: 46px;
    padding: 0 26px;
    font-weight: 700;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-primary);
    border: 0;
    box-shadow: none;
}
.bh-page .login-form .btn-reveal-pw {
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-left: 0;
    color: var(--bh-muted);
}
.bh-page .login-form .card-footer { background: #faf8ff; text-align: center; }
.bh-page .login-form .card-footer a { font-weight: 700; }

/* --- clientregister.tpl: #registration > form#frmCheckout > .card.mb-4 --- */
.bh-page #registration { max-width: 880px; margin: 24px auto; }
.bh-page #registration .card-title { font-size: 16px; font-weight: 700; margin-bottom: 18px; }
.bh-page #registration input[type="submit"].btn-primary,
.bh-page #registration .btn-lg.btn-primary {
    width: 100%;
    min-height: 50px;
    font-size: 15.5px;
    font-weight: 700;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-primary);
    border: 0;
    box-shadow: none;
}
.bh-page #registration .generate-password { font-size: 12.5px; }
.bh-page #registration .password-strength-meter { padding-top: 4px; }
.bh-page #registration #passwordStrengthTextLabel { margin: 6px 0 0; }

/* --- profile ("My Details"): single .card, float-based two-column form --- */
.bh-page .col-form-label { font-weight: 600; color: var(--bh-text-soft); font-size: 13.5px; margin-bottom: 6px; display: inline-block; }
.bh-page .card-body .form-group:last-child { margin-bottom: 0; }
.bh-page input[name="save"].btn-primary {
    min-height: 46px;
    padding: 0 30px;
    border: 0;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-primary);
    box-shadow: none;
}
.bh-page input[type="reset"].btn-default {
    min-height: 46px;
    padding: 0 24px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
}

/* --- shared: the "prepend-icon" pattern (register + profile use plain
   .form-control instead, but a few fields still use this) --------------- */
.bh-page .form-group.prepend-icon { position: relative; }
.bh-page .form-group.prepend-icon .field-icon {
    position: absolute;
    top: 50%; left: 14px;
    transform: translateY(-50%);
    margin: 0;
    color: var(--bh-muted);
    font-size: 13px;
    pointer-events: none;
    z-index: 2;
}
.bh-page .form-group.prepend-icon .field-icon i { width: auto; }
.bh-page .form-group.prepend-icon input.field,
.bh-page .form-group.prepend-icon select.field {
    padding-left: 38px !important;
}
.bh-page input.field:not(.form-control),
.bh-page select.field:not(.form-control) {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 10px 14px;
    font-family: inherit;
    font-size: 14.5px;
    color: var(--bh-text);
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    outline: none;
}
.bh-page input.field:focus,
.bh-page select.field:focus {
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

body.bh-guest .bh-page label { font-weight: 600; color: var(--bh-text-soft); font-size: 13.5px; }
body.bh-guest .bh-page a { font-weight: 600; }

/* ==========================================================================
   21. Order button refinements
   Tighter proportions, guaranteed white label, and the hover sweep is kept
   behind the text (an absolutely positioned pseudo-element otherwise paints
   over in-flow content and dulls the label).
   ========================================================================== */
.bh-of-cta {
    height: 48px;
    gap: 9px;
    font-size: 15px;
    letter-spacing: .1px;
    color: #fff !important;
    box-shadow: 0 6px 16px rgba(124, 58, 237, .24);
}
.bh-of-cta > * { position: relative; z-index: 1; }
.bh-of-cta::before { z-index: 0; }
/* Font Awesome icons carry the surrounding text's line-height by default, so
   a plain flex row centres their box, not their glyph — the icon reads as
   sitting a couple of pixels above the "Order Now" label's optical centre.
   Making each icon its own centred flex box fixes that regardless of the
   icon font's internal metrics. */
.bh-of-cta span { display: inline-flex; align-items: center; line-height: 1; }
.bh-of-cta i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 12.5px;
    opacity: .95;
}
.bh-of-cta .bh-of-cta-arrow { font-size: 11.5px; }
.bh-of-cta:hover { box-shadow: 0 12px 24px rgba(124, 58, 237, .34); }
.bh-of-cta--out, .bh-of-cta--out:hover { color: var(--bh-muted) !important; }

/* a little more air between the feature list and the button */
.bh-of-foot { padding-top: 22px; }

/* ==========================================================================
   22. Order flow — step indicator, domain step, billing tiles
   The stepper and the billing tiles are injected by theme.js; everything
   else here restyles WHMCS's own cart markup. Minimal, high-contrast, and
   built so a failed script only costs the decoration, never the order.
   ========================================================================== */

/* --- 1 → 4 progress --------------------------------------------------- */
.bh-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
}
.bh-step {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--bh-muted);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}
.bh-step + .bh-step::before {
    content: "";
    width: 64px;
    height: 2px;
    margin: 0 16px;
    border-radius: 2px;
    background: var(--bh-border);
}
.bh-step-num {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #eceff5;
    color: var(--bh-muted);
    font-size: 14px;
    font-weight: 700;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.bh-step.is-done .bh-step-num,
.bh-step.is-active .bh-step-num { background: var(--bh-primary); color: #fff; }
.bh-step.is-active .bh-step-num { box-shadow: 0 0 0 5px rgba(124, 58, 237, .16); }
.bh-step.is-done .bh-step-num i { font-size: 12px; }
.bh-step.is-done, .bh-step.is-active { color: var(--bh-text); }
.bh-step.is-active { color: var(--bh-primary); }
.bh-step.is-done + .bh-step::before,
.bh-step.is-active + .bh-step::before { background: var(--bh-primary); }

@media (max-width: 640px) {
    .bh-steps { gap: 6px 0; }
    .bh-step-label { display: none; }
    .bh-step + .bh-step::before { width: 28px; margin: 0 8px; }
}

/* --- domain step: the three choices as cards ---------------------------- */
#order-standard_cart .domain-selection-options,
#order-standard_cart .domain-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    margin-bottom: 18px;
}
#order-standard_cart .domain-selection-options .radio,
#order-standard_cart .domain-selection-options label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
    padding: 15px 16px;
    text-align: center;
    font-weight: 600;
    font-size: 14px;
}

/* --- search row: field + TLD select + button on one line ---------------- */
#order-standard_cart .domain-search-row,
#order-standard_cart form[action*="domain"] .input-group { align-items: center; }

/* --- availability result -------------------------------------------------*/
#order-standard_cart .domain-lookup-result,
#order-standard_cart .domain-checker-result {
    text-align: center;
    padding: 26px 20px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    margin-bottom: 18px;
}
#order-standard_cart .domain-lookup-result .domain,
#order-standard_cart .domain-checker-result strong { color: var(--bh-primary); font-weight: 700; }

/* suggested TLD tiles */
#order-standard_cart .domain-suggestions,
#order-standard_cart .tld-suggestions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
#order-standard_cart .domain-suggestion,
#order-standard_cart .tld-suggestion {
    padding: 16px 14px;
    text-align: center;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#order-standard_cart .domain-suggestion:hover,
#order-standard_cart .tld-suggestion:hover {
    transform: translateY(-3px);
    border-color: #d9caf9;
    box-shadow: var(--bh-shadow-lg);
}

/* --- billing cycle tiles (from the stock <select>) ---------------------- */
.bh-hidden-field { display: none !important; }

.bh-cycles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
    margin: 6px 0 4px;
}
.bh-cycle {
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
    color: var(--bh-text);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.bh-cycle:hover { border-color: #c4b5fd; transform: translateY(-2px); }
.bh-cycle.is-active {
    border-color: var(--bh-primary);
    background: #faf8ff;
    color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
}

@media (prefers-reduced-motion: reduce) {
    .bh-cycle, .bh-step-num,
    #order-standard_cart .domain-suggestion { transition: none; }
    .bh-cycle:hover { transform: none; }
}

/* ==========================================================================
   23. "Choose a Domain" step — stop the overflow, keep it on one line
   The stock markup puts the whole search form (www. + field + TLD select +
   button) inside a one-third column. Flex children default to min-width:auto,
   so the button was pushed outside its card and clipped. Everything below
   makes those columns shrinkable and lets the form wrap instead of overflow.
   ========================================================================== */
body[data-page="cart"] #order-standard_cart .row > [class*="col-"],
body[data-page="cart"] #order-standard_cart [class*="col-"] > * { min-width: 0; }

body[data-page="cart"] #order-standard_cart input,
body[data-page="cart"] #order-standard_cart select { max-width: 100%; }

body[data-page="cart"] #order-standard_cart .btn { white-space: nowrap; }

/* The layout of the three choices used to live here. It now lives in
   section 32, which owns this step end to end; these rules were left over
   from an earlier attempt and, being written with a heavier selector
   (body[data-page] …), silently outranked the newer ones. Removed rather
   than out-specified, so there is one place that decides this layout.

   Only the field sizing below is kept — section 32 relies on it. */

/* the search row inside a choice: wraps instead of spilling over */
body[data-page="cart"] #order-standard_cart .domain-selection-options form,
body[data-page="cart"] #order-standard_cart .domain-selection-options .input-group,
body[data-page="cart"] #order-standard_cart .domain-options form,
body[data-page="cart"] #order-standard_cart .domain-options .input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}
body[data-page="cart"] #order-standard_cart .domain-selection-options input[type="text"],
body[data-page="cart"] #order-standard_cart .domain-options input[type="text"] {
    flex: 1 1 150px;
    min-width: 0;
    height: 42px;
    border: 1px solid var(--bh-border) !important;
    border-radius: var(--bh-radius-sm);
    background: #fff;
    padding: 0 12px;
}
body[data-page="cart"] #order-standard_cart .domain-selection-options select,
body[data-page="cart"] #order-standard_cart .domain-options select {
    flex: 0 1 auto;
    height: 42px;
    min-height: 42px;
    padding: 0 8px;
}
body[data-page="cart"] #order-standard_cart .domain-selection-options .btn,
body[data-page="cart"] #order-standard_cart .domain-options .btn {
    flex: 0 0 auto;
    height: 42px;
    min-height: 42px;
    padding: 0 20px;
    border-radius: var(--bh-radius-sm);
}
/* the "www." prefix WHMCS prints before the field */
body[data-page="cart"] #order-standard_cart .domain-selection-options .input-group-addon,
body[data-page="cart"] #order-standard_cart .domain-selection-options .input-group-text {
    flex: 0 0 auto;
    height: 42px;
    display: flex;
    align-items: center;
    border-radius: var(--bh-radius-sm);
}

@media (max-width: 720px) {
    body[data-page="cart"] #order-standard_cart .domain-selection-options,
    body[data-page="cart"] #order-standard_cart .domain-options { grid-template-columns: 1fr; }
}

/* ==========================================================================
   26. Minimal order flow — full width step content
   theme.js tags the stock "Categories / Actions" column so the checkout gets
   the whole width, the way a modern order flow reads. To bring the panels
   back, change the first rule to display: block.
   ========================================================================== */
.bh-hide-cart-side { display: none !important; }

.bh-cart-full {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}
.bh-cart-full #order-standard_cart {
    max-width: 1060px;
    margin: 0 auto;
}

/* the domain step, centred and roomy like a dedicated checkout screen */
.bh-cart-full #order-standard_cart .header-lined,
.bh-cart-full #order-standard_cart h1 { text-align: center; }
.bh-cart-full #order-standard_cart .header-lined { justify-content: center; border-bottom: 0; }

.bh-cart-full #order-standard_cart .domain-selection-options,
.bh-cart-full #order-standard_cart .domain-options {
    max-width: 940px;
    margin: 0 auto 18px;
}

/* one clean search row under the choices */
.bh-cart-full #order-standard_cart .domain-selection-options input[type="text"],
.bh-cart-full #order-standard_cart .domain-options input[type="text"] {
    height: 48px;
    font-size: 15px;
}
.bh-cart-full #order-standard_cart .domain-selection-options select,
.bh-cart-full #order-standard_cart .domain-selection-options .btn,
.bh-cart-full #order-standard_cart .domain-options select,
.bh-cart-full #order-standard_cart .domain-options .btn {
    height: 48px;
    min-height: 48px;
}
.bh-cart-full #order-standard_cart .domain-selection-options .btn,
.bh-cart-full #order-standard_cart .domain-options .btn {
    padding: 0 26px;
    font-size: 15px;
    background: var(--bh-primary);
    border: 0;
    color: #fff;
    box-shadow: none;
}

/* ==========================================================================
   27. (retired) Domain step "search row"
   An earlier version of theme.js lifted the search field out of the first
   choice and re-parented it under all three so it could be styled as one
   wide row. That move broke the Transfer choice, so the script was removed
   and the class it added (.bh-domain-search-row) is no longer produced by
   anything. Its rules are deleted here rather than left as dead weight —
   section 32 lays this step out with grid placement alone.
   ========================================================================== */

/* ==========================================================================
   28. Domain step — availability result and TLD suggestions
   Everything after the search row is the result area: the "checking…"
   message, the availability answer with its Continue button, and the grid
   of other extensions. Both the ids WHMCS uses and the generic sibling
   selectors are covered, so the layout lands whichever markup is rendered.
   ========================================================================== */
#order-standard_cart #searchResults,
#order-standard_cart #primaryLookupResult,
#order-standard_cart .domain-checker-result,
#order-standard_cart .domain-lookup-result {
    max-width: 1060px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* "Checking availability…" and the result headline */
#order-standard_cart #searchResults h2,
#order-standard_cart #primaryLookupResult h2,
#order-standard_cart .domain-checker-result h2,
#order-standard_cart .domain-lookup-result h2,
#order-standard_cart .domain-checker-result h3 {
    margin: 26px 0 6px;
    font-size: 22px;
    font-weight: 700;
    color: var(--bh-text);
}
#order-standard_cart .domain-checker-result .domain,
#order-standard_cart #primaryLookupResult strong,
#order-standard_cart .domain-lookup-result strong { color: var(--bh-primary); }
#order-standard_cart .domain-checker-available,
#order-standard_cart .available { color: #039855; }
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .unavailable { color: #b42318; }

/* the Continue button under the result */
#order-standard_cart #searchResults .btn,
#order-standard_cart #primaryLookupResult .btn {
    min-height: 46px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: var(--bh-primary);
    color: #fff;
    font-weight: 700;
    box-shadow: none;
}

/* --- other extensions: an even grid of tiles ---------------------------- */
#order-standard_cart .spotlight-tlds:not(.w-hidden),
#order-standard_cart #spotlightTlds:not(.w-hidden),
#order-standard_cart .tld-list:not(.w-hidden) {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    max-width: 1060px;
    margin: 26px auto 0;
    padding: 0;
    list-style: none;
    background: transparent;
    border: 0;
    box-shadow: none;
}
#order-standard_cart .spotlight-tlds > *,
#order-standard_cart #spotlightTlds > *,
#order-standard_cart .tld-list > *,
#order-standard_cart .domain-suggestion,
#order-standard_cart .tld-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 120px;
    padding: 18px 14px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    text-align: center;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#order-standard_cart .spotlight-tlds > *:hover,
#order-standard_cart #spotlightTlds > *:hover,
#order-standard_cart .domain-suggestion:hover,
#order-standard_cart .tld-item:hover {
    transform: translateY(-4px);
    border-color: #d9caf9;
    box-shadow: var(--bh-shadow-lg);
}
#order-standard_cart .domain-suggestion .tld,
#order-standard_cart .tld-item .tld,
#order-standard_cart #domainSuggestions strong {
    font-size: 17px;
    font-weight: 700;
    color: var(--bh-text);
}
#order-standard_cart .domain-suggestion .price,
#order-standard_cart .tld-item .price { font-size: 13.5px; font-weight: 650; color: var(--bh-primary); }
#order-standard_cart .domain-suggestion .btn,
#order-standard_cart .tld-item .btn,
#order-standard_cart #domainSuggestions .btn {
    width: 100%;
    min-height: 38px;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-primary-soft);
    border: 0;
    color: var(--bh-primary);
    font-weight: 700;
    box-shadow: none;
}
#order-standard_cart .domain-suggestion .btn:hover,
#order-standard_cart .tld-item .btn:hover,
#order-standard_cart #domainSuggestions .btn:hover {
    background: var(--bh-primary);
    color: #fff;
}

/* the small spinner WHMCS shows while checking */
#order-standard_cart .loader,
#order-standard_cart .fa-spinner,
#order-standard_cart .spinner { color: var(--bh-primary); }

/* ==========================================================================
   29. "Suggested Domains" — a list, not a tile grid
   WHMCS renders two different things after a search: the spotlight TLD tiles
   (section 28) and this list of alternative names. This block keeps the list
   a list, with the price right-aligned and a quiet outline add button.
   ========================================================================== */
#order-standard_cart #domainSuggestions:not(.w-hidden),
#order-standard_cart .domain-suggestions:not(.w-hidden) {
    display: block;
    max-width: 1060px;
    margin: 28px auto 0;
    padding: 0;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow);
    overflow: hidden;
    text-align: left;
}
#order-standard_cart #domainSuggestions > h2,
#order-standard_cart #domainSuggestions > h3,
#order-standard_cart .domain-suggestions > h2,
#order-standard_cart .domain-suggestions > h3,
#order-standard_cart .domain-suggestions .header,
#order-standard_cart .domain-suggestions-header {
    margin: 0;
    padding: 16px 20px;
    background: #faf8ff;
    border-bottom: 1px solid var(--bh-border-soft);
    font-size: 15px;
    font-weight: 700;
    color: var(--bh-text);
    text-align: left;
}

/* one suggestion row */
#order-standard_cart #domainSuggestions .domain-suggestion:not(.w-hidden),
#order-standard_cart .domain-suggestions .domain-suggestion:not(.w-hidden),
#order-standard_cart .domain-suggestions > ul > li,
#order-standard_cart .domain-suggestions > div:not(.header):not(.w-hidden) {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    min-height: 0;
    padding: 14px 20px !important;
    background: #fff;
    border: 0;
    border-bottom: 1px solid var(--bh-border-soft);
    border-radius: 0;
    box-shadow: none;
    text-align: left;
    transition: background .14s ease;
}
#order-standard_cart #domainSuggestions .domain-suggestion:last-child,
#order-standard_cart .domain-suggestions .domain-suggestion:last-child { border-bottom: 0; }
#order-standard_cart #domainSuggestions .domain-suggestion:hover,
#order-standard_cart .domain-suggestions .domain-suggestion:hover {
    background: #faf8ff;
    transform: none;
    box-shadow: none;
}

/* name · extension · price · button */
#order-standard_cart .domain-suggestions .domain,
#order-standard_cart .domain-suggestions .sld { font-weight: 600; color: var(--bh-text); }
#order-standard_cart .domain-suggestions .tld { font-weight: 700; color: var(--bh-primary); }
#order-standard_cart .domain-suggestions .price,
#order-standard_cart .domain-suggestions .domain-price {
    margin-left: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--bh-text);
}
#order-standard_cart .domain-suggestions .btn {
    width: auto;
    min-width: 120px;
    min-height: 38px;
    background: #fff;
    border: 1.5px solid var(--bh-primary) !important;
    color: var(--bh-primary);
    font-weight: 650;
    border-radius: var(--bh-radius-sm);
    box-shadow: none;
}
#order-standard_cart .domain-suggestions .btn:hover {
    background: var(--bh-primary);
    color: #fff;
}

@media (max-width: 640px) {
    #order-standard_cart .domain-suggestions .price { margin-left: 0; }
    #order-standard_cart .domain-suggestions .btn { width: 100%; }
}

/* ==========================================================================
   30. Billing step (cart.php?a=confproduct)
   The configuration column becomes a card, the cycle tiles sit two across,
   and the order summary keeps its own card beside them.
   ========================================================================== */
.bh-config-col {
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: 14px;
    padding: 24px;
}
.bh-config-col h2,
.bh-config-col h3 {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 700;
    color: var(--bh-text);
}
.bh-config-col label,
.bh-config-col legend {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--bh-text);
}

#order-standard_cart .bh-cycles { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
#order-standard_cart .bh-cycle { min-height: 56px; display: flex; align-items: center; justify-content: center; }

/* summary card on the right */
#order-standard_cart .summary-container,
#order-standard_cart #order-summary {
    border-radius: 14px;
    overflow: hidden;
}

/* the Continue button that ends this step */
#order-standard_cart .cart-buttons,
#order-standard_cart .btn-container {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 22px;
}
#order-standard_cart input[type="submit"].btn-primary,
#order-standard_cart button[type="submit"].btn-primary,
#order-standard_cart a.btn-primary {
    min-height: 50px;
    padding: 0 30px;
    border: 0;
    border-radius: 999px;
    background: var(--bh-primary);
    color: #fff;
    font-size: 15.5px;
    font-weight: 700;
    box-shadow: none;
}

/* ==========================================================================
   31. Brand override for the inherited cart chrome
   The parent theme paints its own blue/grey/amber over the order flow, and
   its selectors are more specific than the ones earlier in this file. This
   block re-states the brand colours with enough weight to win, and is scoped
   to cart pages so nothing else on the portal is affected.

   Semantic colours are deliberately left alone: alerts, status labels and
   validation states keep their own meaning.
   ========================================================================== */

/* --- panel and table headers: quiet, not filled -------------------------
   The parent theme paints these blue; this used to repaint them purple,
   which only swapped one heavy slab for another. A cart screen that fills
   the top of every panel AND the primary button with the same colour leaves
   nothing looking more important than anything else. The headers are now a
   pale tint with dark text, so the button underneath is the one coloured
   thing on the card — which is the thing to press.

   (background-image is reset to none rather than given a colour: an image
   property cannot take one, and the invalid declaration was simply dropped.) */
body[data-page="cart"] .panel-heading,
body[data-page="cart"] .card-header,
body[data-page="cart"] .panel-primary > .panel-heading,
body[data-page="cart"] .panel-default > .panel-heading,
body[data-page="cart"] .panel-info > .panel-heading,
body[data-page="cart"] #order-standard_cart table thead th,
body[data-page="cart"] #order-standard_cart .table > thead > tr > th,
body[data-page="cart"] #order-standard_cart .bg-primary,
body[data-page="cart"] #order-standard_cart .bg-info {
    background-image: none !important;
    background-color: #faf9fd !important;
    color: var(--bh-text) !important;
    border-color: var(--bh-border) !important;
}
body[data-page="cart"] .panel-heading a,
body[data-page="cart"] .panel-heading .panel-title,
body[data-page="cart"] .card-header a,
body[data-page="cart"] #order-standard_cart table thead th a { color: var(--bh-text) !important; }

/* --- buttons the parent theme colours its own way ----------------------- */
body[data-page="cart"] .btn-info,
body[data-page="cart"] .btn-warning,
body[data-page="cart"] #order-standard_cart .btn-success {
    background-image: none !important;
    background-color: var(--bh-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}
body[data-page="cart"] .btn-info:hover,
body[data-page="cart"] .btn-warning:hover,
body[data-page="cart"] #order-standard_cart .btn-success:hover {
    background-image: none !important;
    background-color: var(--bh-primary-dark) !important;
}

/* secondary / neutral buttons become quiet outlines */
body[data-page="cart"] #order-standard_cart .btn-default,
body[data-page="cart"] #order-standard_cart .btn-secondary,
body[data-page="cart"] #order-standard_cart button[name="validatepromo"],
body[data-page="cart"] #order-standard_cart .promo-code .btn {
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid var(--bh-primary) !important;
    color: var(--bh-primary) !important;
    box-shadow: none !important;
}
body[data-page="cart"] #order-standard_cart .btn-default:hover,
body[data-page="cart"] #order-standard_cart .btn-secondary:hover,
body[data-page="cart"] #order-standard_cart button[name="validatepromo"]:hover,
body[data-page="cart"] #order-standard_cart .promo-code .btn:hover {
    background: var(--bh-primary) !important;
    color: #fff !important;
}

/* emptying the cart is destructive — quiet until hovered */
body[data-page="cart"] #order-standard_cart .btn-danger,
body[data-page="cart"] #order-standard_cart a[href*="a=empty"],
body[data-page="cart"] #order-standard_cart button[name="empty"] {
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid var(--bh-border) !important;
    color: var(--bh-text-soft) !important;
    box-shadow: none !important;
}
body[data-page="cart"] #order-standard_cart .btn-danger:hover,
body[data-page="cart"] #order-standard_cart a[href*="a=empty"]:hover,
body[data-page="cart"] #order-standard_cart button[name="empty"]:hover {
    background: var(--bh-red-soft) !important;
    border-color: #fecdca !important;
    color: #b42318 !important;
}

/* --- section titles on the checkout form -------------------------------- */
body[data-page="cart"] legend,
body[data-page="cart"] fieldset > legend,
body[data-page="cart"] #order-standard_cart legend {
    color: var(--bh-primary) !important;
    border-color: var(--bh-border-soft) !important;
}

/* --- the stock globe artwork in the domain hero ------------------------- */
.bh-page .domain-checker-container img,
#order-standard_cart .domain-checker-container img,
.bh-page .domain-checker img { display: none !important; }

/* --- availability result card ------------------------------------------- */
body[data-page="cart"] #order-standard_cart .domain-checker-result,
body[data-page="cart"] #order-standard_cart #searchResults,
body[data-page="cart"] #order-standard_cart #primaryLookupResult {
    background: #fff !important;
    border: 1px solid var(--bh-border) !important;
    border-radius: var(--bh-radius) !important;
    box-shadow: var(--bh-shadow) !important;
    padding: 26px 20px !important;
}

/* --- the two promo boxes under the domain search ------------------------ */
body[data-page="cart"] #order-standard_cart .domain-promo,
body[data-page="cart"] #order-standard_cart .promo-box,
body[data-page="cart"] #order-standard_cart .panel-body {
    border-radius: 0 0 var(--bh-radius) var(--bh-radius);
}

/* ==========================================================================
   32. Domain step — styled, never scripted
   Confirmed markup (templates/orderforms/binduhost_cart/
   configureproductdomain.tpl): each choice is one
     <div class="option"><label><input type=radio name=domainoption>text</label>
       <div class="domain-input-group">…fields + submit…</div></div>
   all inside <form id="frmProductDomain">.

   WHMCS's own order-form script owns the showing/hiding of each option's
   .domain-input-group and the submit behaviour of every button in here.
   This theme therefore adds NO JavaScript to this step (see the note in
   theme.js) — everything below is presentation only, so the step keeps
   exactly the behaviour WHMCS ships and tests.
   ========================================================================== */
/* The three choices sit side by side on one row across the top, and the
   fields belonging to whichever one is selected open underneath at full
   width — one clear question, then one clear answer.

   This is grid placement only. `.option` becomes display:contents so its
   label and its .domain-input-group are laid out independently: labels are
   pinned to row 1, everything else to row 2. Nothing is moved in the DOM,
   and `display` is never set on .domain-input-group — WHMCS toggles those
   with inline styles, and leaving that alone is precisely what makes the
   Check / Transfer / use-existing buttons work. */
#order-standard_cart .domain-selection-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    max-width: 1060px;
    margin: 0 auto;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
}
#order-standard_cart .domain-selection-options .option { display: contents; }

/* row 1 — the three choices as pills */
/* Aligned from the left, not centred.

   Centred content overflows a flex row EQUALLY on both sides when it does not
   fit, and the choices whose wording wraps to two lines did not fit — so their
   radio button spilled past the pill's left border and was cut in half by it.
   Starting the row at the padding edge means there is no left overflow to
   clip, and the three pills line up with each other as a bonus. */
#order-standard_cart .domain-selection-options .option > label {
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    min-height: 64px;
    margin: 0;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
    text-align: left;
    font-size: 13.5px;
    font-weight: 650;
    line-height: 1.35;
    color: var(--bh-text);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
}
/* the wording must be free to shrink and wrap inside the pill */
#order-standard_cart .domain-selection-options .option > label > * { min-width: 0; }
#order-standard_cart .domain-selection-options .option > label:hover {
    border-color: #c4b5fd;
    background: #fdfcff;
}
#order-standard_cart .domain-selection-options .option > label:has(input:checked) {
    border-color: var(--bh-primary);
    background: #faf8ff;
    color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}
#order-standard_cart .domain-selection-options .option input[type="radio"] {
    position: static;      /* never pulled out of the row and placed by offset */
    left: auto;
    top: auto;
    width: 18px; height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: var(--bh-primary);
}

/* row 2 — whatever the selected choice reveals, full width under the pills.
   Matched as "every direct child of .option that is not the label" so an
   extra wrapper in the stock markup still lands on the right row. */
#order-standard_cart .domain-selection-options .option > *:not(label) {
    grid-row: 2;
    grid-column: 1 / -1;
}
#order-standard_cart .domain-selection-options .domain-input-group {
    margin: 0;
    padding: 18px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
}
#order-standard_cart .domain-input-group .domains-row { align-items: center; }

/* narrow screens: back to one choice per line, each above its own fields */
@media (max-width: 767px) {
    #order-standard_cart .domain-selection-options { grid-template-columns: 1fr; gap: 10px; }
    #order-standard_cart .domain-selection-options .option > label,
    #order-standard_cart .domain-selection-options .option > *:not(label) {
        grid-row: auto;
        grid-column: 1 / -1;
    }
    #order-standard_cart .domain-selection-options .option > label { min-height: 54px; }
}

#order-standard_cart .domain-selection-options .input-group-text {
    background: #f6f4fb;
    border: 1.5px solid var(--bh-border);
    border-right: 0;
    color: var(--bh-muted);
    font-size: 13.5px;
    font-weight: 600;
}
#order-standard_cart .domain-selection-options input.form-control,
#order-standard_cart .domain-selection-options select.form-control {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 15px;
    border: 1.5px solid var(--bh-border) !important;
    box-shadow: none !important;
}
#order-standard_cart .domain-selection-options .input-group input.form-control { border-left: 0 !important; }
#order-standard_cart .domain-selection-options input.form-control:focus,
#order-standard_cart .domain-selection-options select.form-control:focus {
    border-color: var(--bh-primary) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12) !important;
}
#order-standard_cart .domain-selection-options .btn.btn-primary {
    height: 48px;
    min-height: 48px;
    border: 0;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-primary);
    box-shadow: none;
    font-weight: 700;
}
#order-standard_cart .domain-selection-options .btn.btn-primary:hover {
    background: var(--bh-primary-dark);
}


/* ==========================================================================
   33. Domain search hero — smaller, and no stock artwork
   The globe is painted as a background on a child element, so replacing the
   container's own background never removed it. Clearing background images on
   descendants does, and the height comes down to something a checkout can
   carry.
   ========================================================================== */
.bh-page .domain-checker-container,
#order-standard_cart .domain-checker-container,
.bh-page .domain-checker,
.bh-page #domain-checker {
    padding: 30px 24px !important;
    min-height: 0 !important;
}
.bh-page .domain-checker-container *,
#order-standard_cart .domain-checker-container * {
    background-image: none !important;
}
.bh-page .domain-checker-container::before,
#order-standard_cart .domain-checker-container::before {
    width: 420px;
    height: 420px;
}
.bh-page .domain-checker-container .input-group,
#order-standard_cart .domain-checker-container .input-group {
    max-width: 640px;
    padding: 5px;
}
.bh-page .domain-checker-container input[type="text"],
#order-standard_cart .domain-checker-container input[type="text"] {
    height: 46px;
    min-height: 46px;
    background: transparent !important;
}
.bh-page .domain-checker-container .btn,
#order-standard_cart .domain-checker-container .btn {
    height: 46px;
    min-height: 46px;
    padding: 0 26px;
}

/* ==========================================================================
   34. The order form's own sidebar
   Confirmed markup: #order-standard_cart > .row > .cart-sidebar holds the
   "Categories" and "Actions" panels, and the step content is its next
   sibling. Hiding it here needs no JavaScript at all.
   ========================================================================== */
#order-standard_cart .cart-sidebar { display: none !important; }

/* .sidebar-collapsed (sidebar-categories-collapsed.tpl) is the stock theme's
   MOBILE stand-in for the same Categories/Actions panel, included separately
   on pages like configureproductdomain.tpl — outside .cart-sidebar entirely,
   so hiding .cart-sidebar never touched it. It showed at every width because
   nothing in this theme defines the show/hide breakpoint the parent theme's
   own stylesheet used to give it. Since the sidebar panel is intentionally
   gone from this design at every screen size, not just desktop, the mobile
   stand-in is redundant the same way and is hidden unconditionally too. */
#order-standard_cart .sidebar-collapsed { display: none !important; }

#order-standard_cart .row > .cart-sidebar + * {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* the panels themselves, in case a page places them outside .cart-sidebar */
#order-standard_cart .panel-sidebar,
#order-standard_cart .card-sidebar { display: none !important; }

/* ==========================================================================
   35. Checkout step — minimal and modern
   The stock checkout is a long stack of fieldsets with centred legends. Each
   section becomes a card, each choice a selectable tile, and the fields get
   the same treatment as the theme's own forms.
   ========================================================================== */
body[data-page="cart"][data-action="checkout"] #order-standard_cart {
    max-width: 880px;
    margin: 0 auto;
}

/* section blocks */
body[data-page="cart"][data-action="checkout"] #order-standard_cart fieldset {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: 14px;
    box-shadow: var(--bh-shadow);
    padding: 22px 24px;
    margin: 0 0 16px;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart legend {
    display: flex;
    align-items: center;
    gap: 10px;
    float: none;
    width: auto;
    max-width: 100%;
    padding: 0 0 12px;
    margin: 0 0 18px;
    border: 0;
    border-bottom: 1px solid var(--bh-border-soft);
    text-align: left;
    font-size: 15px;
    font-weight: 700;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart legend::before {
    content: "";
    flex: 0 0 4px;
    width: 4px; height: 18px;
    border-radius: 2px;
    background: var(--bh-primary);
}

/* fields */
body[data-page="cart"][data-action="checkout"] #order-standard_cart input[type="text"],
body[data-page="cart"][data-action="checkout"] #order-standard_cart input[type="email"],
body[data-page="cart"][data-action="checkout"] #order-standard_cart input[type="tel"],
body[data-page="cart"][data-action="checkout"] #order-standard_cart input[type="password"],
body[data-page="cart"][data-action="checkout"] #order-standard_cart select,
body[data-page="cart"][data-action="checkout"] #order-standard_cart textarea {
    min-height: 46px;
    padding: 10px 14px;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    background: #fff;
    font-size: 14.5px;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart input:focus,
body[data-page="cart"][data-action="checkout"] #order-standard_cart select:focus,
body[data-page="cart"][data-action="checkout"] #order-standard_cart textarea:focus {
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
    outline: none;
}

/* the account / credit / payment choices as tiles */
body[data-page="cart"][data-action="checkout"] #order-standard_cart .radio,
body[data-page="cart"][data-action="checkout"] #order-standard_cart .form-check,
body[data-page="cart"][data-action="checkout"] #order-standard_cart label:has(> input[type="radio"]) {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    margin: 0 0 10px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
    font-size: 13.5px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart .radio:has(input:checked),
body[data-page="cart"][data-action="checkout"] #order-standard_cart .form-check:has(input:checked),
body[data-page="cart"][data-action="checkout"] #order-standard_cart label:has(> input[type="radio"]:checked) {
    border-color: var(--bh-primary);
    background: #faf8ff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}

/* total + final button */
body[data-page="cart"][data-action="checkout"] #order-standard_cart .total-due-today,
body[data-page="cart"][data-action="checkout"] #order-standard_cart .alert-success { border-radius: 14px; }
body[data-page="cart"][data-action="checkout"] #order-standard_cart #btnCompleteOrder {
    border-radius: 12px;
    letter-spacing: .3px;
}

/* ==========================================================================
   36. Order summary card + product card footer alignment
   .bh-summary-head / .bh-summary-card are tagged by theme.js, which finds the
   heading by its text — the stock markup gives it no class to hook onto.
   ========================================================================== */
.bh-summary-card {
    border: 1px solid var(--bh-border) !important;
    border-radius: 14px !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: var(--bh-shadow) !important;
}
/* Left-aligned and unfilled, like every other card heading in the theme.
   The card's own border already says where it starts; it did not also need a
   solid purple bar to announce it. */
.bh-summary-head {
    display: block !important;
    margin: 0 !important;
    padding: 14px 18px !important;
    background: #faf9fd !important;
    color: var(--bh-text) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bh-border) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-align: left;
    letter-spacing: 0;
}

/* --- product cards: every Order button on the same line ------------------ */
.bh-of-grid { align-items: stretch; }
.bh-of-card {
    background: #fff;
    padding-bottom: 24px;
}
.bh-of-features { margin-bottom: 4px; }
.bh-of-foot {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--bh-border-soft);
}
.bh-of-card .bh-of-cta { margin-top: 4px; }

/* ==========================================================================
   38. Product cards — buttons pinned to one line, cards visibly bounded
   Relying on the grid to stretch the cards was not enough, so the feature
   list gets a floor height: the block above the button is then the same
   height in every card and the buttons cannot drift apart.
   ========================================================================== */
.bh-of-grid { align-items: stretch; }

.bh-of-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff !important;
    border: 1.5px solid var(--bh-border) !important;
    border-radius: 14px !important;
    padding: 26px 22px 22px !important;
    box-shadow: var(--bh-shadow);
}

.bh-of-features {
    min-height: 258px;          /* equalises the tallest realistic feature list */
    margin-bottom: 0;
}

.bh-of-foot {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--bh-border-soft);
}
.bh-of-foot .bh-of-cta { margin: 0; }

@media (max-width: 900px) {
    .bh-of-features { min-height: 0; }
}

/* ==========================================================================
   39. Checkout (templates/orderforms/binduhost_cart/checkout.tpl)
   Confirmed against the live stock markup — not guessed. Two facts drove
   every rule below:
     * Section titles are <div class="sub-heading"><span class="primary-bg-
       color">…</span></div>, not <legend> — a completely different pattern
       from login/register/profile, so it needs its own rules.
     * The clutter reported on this page was `.w-hidden` never being defined
       (fixed in compat.css) — once that class actually hides what WHMCS
       means it to hide, "Existing Customer Login", the account-creation
       fields (an account is already selected) and the credit-card fields
       (no CC gateway is active) all disappear on their own. The CSS below
       only styles what is actually left on screen after that fix.
   ========================================================================== */
/* .cart-body already gets its own card (background/border/shadow) from the
   generic stock-order-form rule earlier in this file — giving the form
   INSIDE it a second, nested card produced two boxes stacked on top of each
   other (visible as the cramped double-padding around "Existing Customer
   Login" in review). So this only widens/centres the shared outer card; the
   form itself stays plain and inherits that one box. */
#order-standard_cart .cart-body {
    max-width: none;      /* the outer card sets the width — see below */
    margin: 0;
    padding: 28px 30px !important;
}
#order-standard_cart .cart-body > form#frmCheckout { background: none; }

/* A logged-in customer never needs to "log in as an existing customer" —
   $loggedin already hides this with WHMCS's own `.w-hidden`, but that value
   depends on $custtype too; bh-auth (set by header.tpl straight off
   $loggedin, nothing else) hides it unconditionally as a second, independent
   guarantee. */
body.bh-auth #order-standard_cart #containerExistingUserSignin { display: none !important; }

/* the "enter personal details" intro line above Choose Account */
#order-standard_cart .already-registered p { color: var(--bh-text-soft); font-size: 13.5px; margin: 0 0 18px; }

/* --- section dividers: .sub-heading > .primary-bg-color ----------------- */
/* The parent centres these with flexbox, so the text-align this rule used to
   carry had no effect at all — the headings stayed in the middle of the form
   through three releases. justify-content is what actually moves them. */
#order-standard_cart .sub-heading {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 22px 0 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--bh-border-soft);
    text-align: left;
}
#order-standard_cart .sub-heading:first-child { margin-top: 0; }
#order-standard_cart .sub-heading:first-of-type { margin-top: 0; }
#order-standard_cart .sub-heading .primary-bg-color {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: none !important;
    color: var(--bh-primary);
    font-size: 15px;
    font-weight: 700;
}
#order-standard_cart .sub-heading .primary-bg-color::before {
    content: "";
    width: 4px; height: 16px;
    border-radius: 2px;
    background: var(--bh-primary);
}

/* --- form fields ---------------------------------------------------------
   WHMCS puts a small icon element next to each control inside the control's
   own wrapper and relies on the parent theme to pin it inside the box. That
   positioning is not part of this theme, so every icon dropped onto its own
   line and each field read as "icon, then a separate empty box" — the broken
   look reported on this page.

   The icon is matched structurally rather than by a wrapper class (WHMCS
   uses several across this form): a <div> that directly holds a form control
   becomes the positioning context, and an icon that is a direct child of
   that same div is pinned inside the field. Requiring a <div> keeps icons
   that live inside buttons and labels out of it. The matching padding rule
   only fires when an icon is genuinely present, so fields without one keep
   their normal indent. */
#order-standard_cart div:has(> .form-control) { position: relative; }
#order-standard_cart div:has(> .form-control) > i[class*="fa-"] {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    z-index: 2;
    width: 16px;
    color: #a99cc9;
    font-size: 13.5px;
    text-align: center;
    pointer-events: none;
}
#order-standard_cart div:has(> i[class*="fa-"]) > .form-control { padding-left: 44px; }
#order-standard_cart div:has(> .form-control:focus) > i[class*="fa-"] { color: var(--bh-primary); }

#order-standard_cart #frmCheckout .form-control,
#order-standard_cart #frmCheckout input.field,
#order-standard_cart #frmCheckout select,
#order-standard_cart #frmCheckout textarea {
    width: 100%;
    min-height: 50px;
    padding: 12px 16px;
    background: #fbfaff;
    border: 1.5px solid var(--bh-border);
    border-radius: 12px;
    font-size: 14.5px;
    color: var(--bh-text);
    box-shadow: none;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
#order-standard_cart #frmCheckout .form-control:hover { border-color: #cfc4ea; }
#order-standard_cart #frmCheckout .form-control:focus,
#order-standard_cart #frmCheckout select:focus,
#order-standard_cart #frmCheckout textarea:focus {
    background: #fff;
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 4px rgba(124, 58, 237, .10);
    outline: none;
}
#order-standard_cart #frmCheckout .form-control::placeholder { color: #9aa0ac; }
#order-standard_cart #frmCheckout .form-group { margin-bottom: 14px; }

/* --- Choose Account: selectable cards ------------------------------------ */
#order-standard_cart #containerExistingAccountSelect .account {
    height: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
#order-standard_cart #containerExistingAccountSelect .account:hover { border-color: #c4b5fd; }
#order-standard_cart #containerExistingAccountSelect .account.active {
    border-color: var(--bh-primary);
    background: #faf8ff;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}
#order-standard_cart #containerExistingAccountSelect .radio-inline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-weight: 400;
    cursor: pointer;
}
#order-standard_cart #containerExistingAccountSelect input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--bh-primary);
    flex: 0 0 auto;
}
#order-standard_cart #containerExistingAccountSelect .address strong { font-size: 14px; color: var(--bh-text); }
#order-standard_cart #containerExistingAccountSelect .address .small { color: var(--bh-muted); font-size: 12.5px; }
#order-standard_cart #containerExistingAccountSelect .label {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background: var(--bh-primary-soft);
    color: var(--bh-primary);
}

/* Login toggle inside "Existing Customer Login" (still reachable if the
   customer picks "Create a New Account" then changes their mind) */
#order-standard_cart #containerExistingUserSignin { margin-top: 18px; }
#order-standard_cart #btnExistingLogin,
#order-standard_cart .generate-password {
    min-height: 40px;
    padding: 0 22px;
    border-radius: var(--bh-radius-sm);
    font-weight: 650;
}
#order-standard_cart #btnExistingLogin {
    background: var(--bh-primary);
    border: 0;
    color: #fff;
}

/* --- domain registrant contact select ------------------------------------ */
#order-standard_cart .domainAlternativeContact,
#order-standard_cart p.text-muted { color: var(--bh-muted); font-size: 13px; }
#order-standard_cart .margin-bottom { margin-bottom: 16px; }

/* --- payment / total -----------------------------------------------------*/
/* #totalDueToday is styled once, in section 19 — a second rule here (with
   !important, no less) was what kept the figure wearing a dark pill after
   the summary card was quietened down. */

/* Payment methods as selectable cards, matching Choose Account higher up the
   same form. They were pills, centred: with a single gateway active that left
   one small lozenge floating in the middle of an empty band, reading as a
   status badge rather than as the choice the customer has to make. */
#order-standard_cart #paymentGatewaysContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
    /* one gateway must not stretch to the full width of the form — a card that
       wide stops looking like something you pick */
    max-width: 720px;
    margin: 4px 0 8px;
    text-align: left;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: 0;
    padding: 15px 17px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--bh-text);
    cursor: pointer;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:hover { border-color: #c4b5fd; }
#order-standard_cart #paymentGatewaysContainer input[type="radio"] {
    width: 18px; height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: var(--bh-primary);
}
#order-standard_cart #paymentGatewaysContainer .radio-inline:has(input:checked) {
    border-color: var(--bh-primary);
    background: #faf8ff;
    color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .10);
}
/* a gateway that ships a logo shows it; one that does not just shows its name */
#order-standard_cart #paymentGatewaysContainer .radio-inline img {
    max-height: 24px;
    width: auto;
    margin-left: auto;
}

/* the line introducing the choice, and the total above it */
#order-standard_cart #paymentGatewaysContainer + p,
#order-standard_cart p:has(+ #paymentGatewaysContainer) {
    margin: 0 0 10px;
    color: var(--bh-text-soft);
    font-size: 13.5px;
}

/* --- notes textarea -------------------------------------------------------*/
#order-standard_cart textarea.field.form-control { min-height: 100px; resize: vertical; }

/* --- final submit --------------------------------------------------------- */
#order-standard_cart #btnCompleteOrder {
    width: 100%;
    min-height: 52px;
    font-size: 15.5px;
    font-weight: 700;
    border: 0;
    border-radius: var(--bh-radius-sm);
    background: var(--bh-primary);
    box-shadow: none;
    margin-top: 10px;
}

/* the "your IP is being logged" line — informational, not an actual warning */
#order-standard_cart .checkout-security-msg {
    margin-top: 16px;
    background: #faf8ff !important;
    border-color: #e4d8fb !important;
    color: var(--bh-text-soft) !important;
    font-size: 12.5px;
    text-align: center;
}
#order-standard_cart .checkout-security-msg i { color: var(--bh-primary); margin-right: 6px; }

/* ==========================================================================
   40. Review & Checkout (cart.php?a=view) — minimal
   The heavy parts of this page were inherited chrome: a dark slab across the
   cart table's column header, and a large filled block for the total. Both
   are quietened here so the only strong colour left on the page is the one
   thing the customer is meant to act on — the Checkout button.

   The header row and the total band carry no class in the stock cart, so
   theme.js tags them by their text (.bh-cart-head / .bh-total-due). Every
   rule below is presentation only.
   ========================================================================== */

/* --- column header: a quiet label row, not a dark slab ------------------- */
body[data-page="cart"] #order-standard_cart .bh-cart-head,
body[data-page="cart"] #order-standard_cart .bh-cart-head > th,
body[data-page="cart"] #order-standard_cart .bh-cart-head > td,
body[data-page="cart"] #order-standard_cart .bh-cart-head > div,
body[data-page="cart"] #order-standard_cart .bh-cart-head-cell {
    background: #faf9fd !important;
    background-image: none !important;
    color: var(--bh-muted) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bh-border) !important;
    border-radius: 0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .7px;
    text-transform: uppercase;
    padding: 13px 16px !important;
}

/* --- the total band: a summary line, not a filled block ------------------ */
.bh-total-due {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #faf8ff !important;
    background-image: none !important;
    border: 0 !important;
    border-top: 1px solid var(--bh-border-soft) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
    color: var(--bh-text) !important;
}
/* order is set explicitly so the label reads first whichever way WHMCS
   happens to emit the two halves */
.bh-total-due > * { order: 2; }
.bh-total-due .bh-total-label {
    order: 1;
    background: none !important;
    color: var(--bh-text-soft) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    padding: 0 !important;
}
.bh-total-due > *:not(.bh-total-label) {
    background: none !important;
    border: 0 !important;
    padding: 0 !important;
    color: var(--bh-primary) !important;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
}

/* --- the cart's own buttons ---------------------------------------------- */
/* emptying the cart is destructive: quiet until the pointer is on it */
body[data-page="cart"] #order-standard_cart .bh-cart-empty {
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid var(--bh-border) !important;
    border-radius: var(--bh-radius-sm) !important;
    color: var(--bh-text-soft) !important;
    box-shadow: none !important;
    min-height: 40px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 600;
}
body[data-page="cart"] #order-standard_cart .bh-cart-empty:hover {
    background: var(--bh-red-soft) !important;
    border-color: #fecdca !important;
    color: #b42318 !important;
}

/* "Continue shopping" is the way back, not a second call to action */
body[data-page="cart"] #order-standard_cart .bh-cart-continue {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 10px 0;
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--bh-text-soft) !important;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}
body[data-page="cart"] #order-standard_cart .bh-cart-continue:hover {
    color: var(--bh-primary) !important;
    text-decoration: none;
}

/* promo code: one field, one button, both the same height */
body[data-page="cart"] #order-standard_cart .bh-cart-promo-toggle {
    background: none !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--bh-primary) !important;
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: underline;
    text-underline-offset: 3px;
}
body[data-page="cart"] #order-standard_cart .bh-cart-promo-go {
    min-height: 46px;
    padding: 0 24px;
    border-radius: var(--bh-radius-sm) !important;
    font-weight: 650;
}

/* ==========================================================================
   41. Cart pages — one heading, not three
   Every cart screen already announces itself twice over: the step indicator
   says which of the four steps you are on, and the order form prints its own
   heading ("Review & Checkout", "Choose a Domain", …). The theme's generic
   page head added a third — "Shopping Cart" plus a Home / Shopping Cart
   breadcrumb — saying less than either. It is dropped on the cart only; every
   other page keeps its heading and breadcrumb.
   ========================================================================== */
body[data-page="cart"] .bh-page-head { display: none; }

/* The dark slab behind the cart table's column header is painted on the
   element around the header row — a <thead>, or a wrapper div where WHMCS
   renders this as a grid — which is why clearing the row itself still left a
   dark bar above and below it. theme.js tags that wrapper (.bh-cart-head-wrap)
   so it can be cleared with the row, in one pass. */
body[data-page="cart"] #order-standard_cart .bh-cart-head-wrap {
    background: #faf9fd !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 1px solid var(--bh-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
body[data-page="cart"] #order-standard_cart .bh-cart-head { border-bottom: 0 !important; }

/* ==========================================================================
   42. Client-area polish — quieter chrome, and tables that work on a phone
   Companion to the flattening pass: the theme had grown a purple gradient on
   every filled surface, which left nothing looking more important than
   anything else. Purple is now spent on primary actions, active navigation
   and the one figure that costs money; everything else is white, grey and
   type.
   ========================================================================== */

/* Page headings were competing with the content under them. */
.bh-page-head h1 { font-size: 21px; letter-spacing: -.3px; }

/* --- tables become cards on a phone --------------------------------------
   theme.js copies each column's name onto its cells (data-bh-label) so the
   value still says what it is once the header row is hidden. Horizontal
   scrolling a five-column table on a 380px screen is not a layout. */
@media (max-width: 720px) {
    [data-bh-table] .bh-table thead { display: none; }
    [data-bh-table] .bh-table,
    [data-bh-table] .bh-table tbody,
    [data-bh-table] .bh-table tr,
    [data-bh-table] .bh-table td { display: block; width: 100%; }

    [data-bh-table] .bh-table tr {
        margin: 0 0 10px;
        border: 1px solid var(--bh-border);
        border-radius: var(--bh-radius);
        background: #fff;
        overflow: hidden;
    }
    [data-bh-table] .bh-table tr:hover { background: #fff; }

    [data-bh-table] .bh-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: 11px 15px;
        border: 0;
        border-top: 1px solid var(--bh-border-soft);
        text-align: right;
        white-space: normal;
    }
    [data-bh-table] .bh-table tr td:first-child { border-top: 0; }
    [data-bh-table] .bh-table td::before {
        content: attr(data-bh-label);
        flex: 0 0 auto;
        color: var(--bh-muted);
        font-size: 12.5px;
        font-weight: 600;
        text-align: left;
    }
    /* a cell that spans the table ("no records found") is not a field */
    [data-bh-table] .bh-table td[colspan]::before { content: none; }
    [data-bh-table] .bh-table td[colspan] { justify-content: center; text-align: center; }

    /* actions get the full width of the card rather than a squeezed corner */
    [data-bh-table] .bh-table td.bh-right { justify-content: space-between; }

    .bh-toolbar,
    .bh-toolbar-left,
    .bh-toolbar-right { flex-wrap: wrap; }
    .bh-toolbar-left,
    .bh-toolbar-right { width: 100%; }
    .bh-search { flex: 1 1 100%; }
}

/* Nothing in the client area may push the page sideways. */
body.bh-body { overflow-x: hidden; }
.bh-page-inner { min-width: 0; }

/* Blocks removed from stock WHMCS templates that this theme does not own, and
   so cannot edit — theme.js tags them, this hides them. Kept as one shared
   class so every such removal is visible in one place. */
.bh-hidden-block { display: none !important; }

/* ==========================================================================
   43. Domain add-ons ("Add to Cart") on cart.php?a=confdomains
   These arrived green: they are not .btn-success and not inside the container
   the cart's other button rules are scoped to, so nothing here reached them.
   theme.js tags them by their label instead (.bh-addon-cta).

   They are styled as secondary, not primary. Adding ID Protection is optional;
   continuing is the step. Three filled buttons above a filled Continue button
   gave four equal calls to action and no answer to "what do I press?".
   ========================================================================== */
body[data-page="cart"] .bh-addon-cta,
body[data-page="cart"] .bh-addon-cta:link,
body[data-page="cart"] .bh-addon-cta:visited {
    background: #fff !important;
    background-image: none !important;
    border: 1.5px solid var(--bh-border) !important;
    border-radius: var(--bh-radius-sm) !important;
    color: var(--bh-primary) !important;
    box-shadow: none !important;
    min-height: 42px;
    font-size: 13.5px;
    font-weight: 650;
    text-shadow: none !important;
}
body[data-page="cart"] .bh-addon-cta:hover,
body[data-page="cart"] .bh-addon-cta:focus {
    background: var(--bh-primary-soft) !important;
    border-color: var(--bh-primary) !important;
    color: var(--bh-primary-dark) !important;
}
body[data-page="cart"] .bh-addon-cta {
    display: block;
    width: 100%;
    padding: 11px 14px;
    text-align: center;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}
/* the price line sat under the button's top edge — give it room of its own,
   and drop the grey band it inherited so the card reads as one surface */
body[data-page="cart"] .bh-addon-price {
    display: block;
    margin: 0;
    padding: 9px 14px;
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    color: var(--bh-text-soft);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    text-align: center;
}

/* ==========================================================================
   44. Order Summary card — the body
   Section 36 gave the card its shell and section 43's sibling change quietened
   its header. What was left inside was a stack of rows in three different type
   sizes, with the running totals set in italics and pushed hard against the
   right edge. These rules only normalise rhythm and weight — no element is
   moved, hidden or re-ordered, so every figure WHMCS prints still prints.
   ========================================================================== */
.bh-summary-card { font-size: 13.5px; color: var(--bh-text); }

/* consistent gutters for every row of the card, whatever WHMCS wrapped it in */
.bh-summary-card > *:not(.bh-summary-head) { padding-left: 18px; padding-right: 18px; }

/* the running totals were italic, which read as a footnote rather than money */
.bh-summary-card em,
.bh-summary-card i:not([class*="fa-"]) {
    font-style: normal;
    color: var(--bh-text-soft);
    font-size: 12.5px;
}

.bh-summary-card b,
.bh-summary-card strong { font-weight: 650; }

/* the primary action: full width, one weight, no glow */
.bh-summary-card .btn-checkout,
.bh-summary-card #btnCheckout,
.bh-summary-card a[href*="checkout"].btn {
    width: 100%;
    min-height: 48px;
    border: 0 !important;
    border-radius: var(--bh-radius-sm) !important;
    background-image: none !important;
    background-color: var(--bh-primary) !important;
    color: #fff !important;
    box-shadow: none !important;
    font-size: 14.5px;
    font-weight: 650;
}
.bh-summary-card .btn-checkout:hover,
.bh-summary-card #btnCheckout:hover,
.bh-summary-card a[href*="checkout"].btn:hover {
    background-color: var(--bh-primary-dark) !important;
}

/* ==========================================================================
   45. "More" as a flyout when the sidebar is collapsed
   The sidebar now starts collapsed on the order flow, so icon-only mode is no
   longer a rare preference — it is where customers will spend the checkout.
   In that mode the group's links have no width to open into, so they open
   beside the sidebar instead of under the icon. Nothing about the markup
   changes between the two modes; only where the panel is drawn.
   ========================================================================== */
/* closed is closed, in either mode */
.bh-nav-more:not([open]) .bh-nav-more-list { display: none; }

@media (min-width: 993px) {
    body.bh-collapsed .bh-nav-more-item { position: relative; }
    body.bh-collapsed .bh-nav-more-list {
        position: absolute;
        top: 0;
        left: 100%;
        z-index: 60;
        min-width: 190px;
        padding: 6px 0;
        background: var(--bh-sidebar-bg-alt);
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: 0 var(--bh-radius) var(--bh-radius) 0;
        box-shadow: var(--bh-shadow-lg);
    }
    body.bh-collapsed .bh-nav-more-list > a { padding: 9px 18px; white-space: nowrap; }
}

/* ==========================================================================
   46. Brand gradient + motion on primary actions
   Applied to primary actions and a few accents only. The earlier revision
   flattened everything to solid purple, which read as plain; the revision
   before that put a gradient on every filled surface, which read as busy.
   The rule here is: the gradient marks the thing you press.

   Motion is kept to a 1px lift and a colour change over ~.18s. Anything more
   is noticeable on every click, which is the opposite of premium.
   ========================================================================== */
.bh-btn-primary,
.bh-btn-primary:link,
.bh-btn-primary:visited {
    background-image: var(--bh-grad);
    background-color: var(--bh-primary);
    border: 0;
    box-shadow: var(--bh-gloss), 0 1px 2px rgba(16, 24, 40, .08);
    transition: background-image .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bh-btn-primary:hover {
    background-image: var(--bh-grad-hover);
    box-shadow: var(--bh-gloss), var(--bh-lift);
    transform: translateY(-1px);
}
.bh-btn-primary:active {
    transform: translateY(0);
    box-shadow: inset 0 2px 4px rgba(49, 12, 110, .28);
}

/* the same treatment for the order flow's primary buttons, which are stock
   WHMCS markup and carry the parent theme's own colours */
body[data-page="cart"] #order-standard_cart .btn-primary,
body[data-page="cart"] #order-standard_cart button[type="submit"].btn-primary,
body[data-page="cart"] #order-standard_cart a.btn-primary,
body[data-page="cart"] #order-standard_cart #btnCompleteOrder,
.bh-summary-card .btn-checkout,
.bh-summary-card #btnCheckout,
.bh-summary-card a[href*="checkout"].btn {
    background-image: var(--bh-grad) !important;
    background-color: var(--bh-primary) !important;
    border: 0 !important;
    color: #fff !important;
    /* stated here rather than left to an earlier rule: section 44 sets
       box-shadow:none on the checkout button, and without restating it the
       gloss would be stripped from the one button that most needs it */
    box-shadow: var(--bh-gloss), 0 1px 2px rgba(16, 24, 40, .08) !important;
    transition: background-image .18s ease, box-shadow .18s ease, transform .18s ease;
}
body[data-page="cart"] #order-standard_cart .btn-primary:hover,
body[data-page="cart"] #order-standard_cart button[type="submit"].btn-primary:hover,
body[data-page="cart"] #order-standard_cart a.btn-primary:hover,
body[data-page="cart"] #order-standard_cart #btnCompleteOrder:hover,
.bh-summary-card .btn-checkout:hover,
.bh-summary-card #btnCheckout:hover,
.bh-summary-card a[href*="checkout"].btn:hover {
    background-image: var(--bh-grad-hover) !important;
    box-shadow: var(--bh-gloss), var(--bh-lift) !important;
    transform: translateY(-1px);
}

/* Card styling lives with the original .bh-card definition in section 4 —
   one place decides it. What follows is only what section 4 has no reason to
   know about: the figures, the tiles and the link list. */

/* --- stat cards ---------------------------------------------------------- */
.bh-stat {
    position: relative;
    overflow: hidden;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bh-stat::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: var(--bh-grad);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s ease;
}
.bh-stat:hover {
    border-color: #dcccfb;
    box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
    transform: translateY(-1px);
}
.bh-stat:hover::after { transform: scaleX(1); }
.bh-stat-due::after { transform: scaleX(1); }

.bh-stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
}
.bh-stat-label > i {
    width: 15px;
    color: var(--bh-accent);
    font-size: 12.5px;
    text-align: center;
}
.bh-stat-due .bh-stat-label > i { color: var(--bh-primary); }

/* --- quick action tiles: gradient chip, quiet card ------------------------ */
.bh-tile {
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bh-tile:hover {
    box-shadow: 0 4px 14px rgba(16, 24, 40, .07);
    transform: translateY(-1px);
}
.bh-tile > i:first-child { transition: background .18s ease, color .18s ease; }
.bh-tile:hover > i:first-child {
    background-image: var(--bh-grad);
    color: #fff;
}

/* --- a plain list of links, for the Help card ---------------------------- */
.bh-linklist { display: flex; flex-direction: column; }
.bh-linklist > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    color: var(--bh-text);
    font-size: 13.5px;
    font-weight: 550;
    border-bottom: 1px solid var(--bh-border-soft);
    transition: color .16s ease, padding-left .16s ease;
}
.bh-linklist > a:last-child { border-bottom: 0; }
.bh-linklist > a > i:first-child {
    width: 18px;
    color: var(--bh-accent);
    font-size: 14px;
    text-align: center;
}
.bh-linklist > a > span { flex: 1 1 auto; }
.bh-linklist > a > i:last-child { font-size: 11px; color: #c3cbd9; }
.bh-linklist > a:hover { color: var(--bh-primary); padding-left: 8px; }
.bh-linklist > a:hover > i { color: var(--bh-primary); }

/* Motion is a nicety, never the interface. Anyone who has asked their system
   to reduce it gets the colour changes and none of the movement. */
@media (prefers-reduced-motion: reduce) {
    .bh-btn-primary,
    .bh-stat,
    .bh-tile,
    .bh-linklist > a,
    .bh-stat::after,
    body[data-page="cart"] #order-standard_cart .btn-primary { transition: none; }
    .bh-btn-primary:hover,
    .bh-stat:hover,
    .bh-tile:hover { transform: none; }
}

/* ==========================================================================
   47. Submit a ticket (submitticket.php)
   supportticketsubmit.tpl is stock WHMCS markup this theme does not own, so
   the page is styled rather than rewritten.

   Note on the "No support departments found" message seen here: that is
   WHMCS's own string, printed when the department list it was given is empty.
   It is a configuration state, not a layout fault — no rule below can or
   should try to hide it.
   ========================================================================== */
body[data-page="submitticket"] .bh-page-inner > .bh-card,
body[data-page="submitticket"] #main-body > .card,
body[data-page="submitticket"] .card { border-radius: 14px; }

/* the heading leads; the explanatory line under it is support text, not a
   second heading */
body[data-page="submitticket"] h1,
body[data-page="submitticket"] h2,
body[data-page="submitticket"] .card-title {
    font-size: 17px;
    font-weight: 650;
    letter-spacing: -.2px;
    margin: 0 0 6px;
}
body[data-page="submitticket"] .card-title + p,
body[data-page="submitticket"] h2 + p,
body[data-page="submitticket"] .card-body > p:first-of-type {
    max-width: 62ch;
    margin: 0 0 20px;
    color: var(--bh-text-soft);
    font-size: 13.5px;
    line-height: 1.55;
}

/* Bootstrap's blue notice is the only blue left on the page — and this one is
   an empty state, not information the customer asked for. Neutral, centred,
   sized to its text rather than stretched across the card. */
body[data-page="submitticket"] .alert-info,
body[data-page="submitticket"] .alert-warning {
    max-width: 560px;
    margin: 8px auto 0;
    padding: 22px 24px;
    background: var(--bh-grad-soft) !important;
    border: 1px solid var(--bh-border) !important;
    border-radius: var(--bh-radius) !important;
    color: var(--bh-text-soft) !important;
    font-size: 13.5px;
    text-align: center;
}

/* The department chooser used to be styled here through .list-group-item —
   a class this page does not use, so the rules never matched anything. They
   are removed rather than left as dead weight; section 52 does the job with
   markers theme.js sets from WHMCS's own step-two links. */


/* ==========================================================================
   48. WHMCS's own DataTables
   Several stock pages (support tickets, email history, contacts) build their
   table with DataTables instead of printing rows in the template. The plugin
   is loaded in header.tpl from WHMCS's assets/ folder.

   Two things then have to be repaired, and both come from the same cause —
   DataTables' Bootstrap integration is written for Bootstrap 3, while this
   theme's compat.css is a Bootstrap 4/5 subset:

     * it wraps itself in .row / .col-sm-N. Those class names mean nothing
       here, so every control collapsed into one narrow column on the left.
     * its sort arrows and pagination are drawn with Glyphicons, a font this
       theme does not ship — which is why the column headers showed empty
       squares.

   Rather than pull in Bootstrap 3 or a glyph font for one plugin, the layout
   is rebuilt with flexbox and the arrows are drawn from characters every font
   already has. Behaviour is untouched: WHMCS owns that, and it works.
   ========================================================================== */
.dataTables_wrapper {
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: 14px;
    padding: 14px 18px 6px;
    box-shadow: var(--bh-shadow);
}

/* --- the layout ----------------------------------------------------------
   DataTables tags its wrapper with `form-inline`. This theme's Bootstrap
   subset defines that class as a wrapping flex row — so every direct child of
   the wrapper became a flex item on one line: the search box, the info text,
   the pagination, the length select AND the table itself, all jostling for
   space. One class name, two unrelated meanings.

   The wrapper is therefore re-declared as a two-column grid and each part is
   placed by name. This also covers the Bootstrap-integration DOM, where the
   parts are wrapped in .row instead of sitting directly in the wrapper. */
.dataTables_wrapper.form-inline,
.dataTables_wrapper {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 4px 16px;
}
.dataTables_wrapper > .dataTables_length   { grid-column: 1; justify-self: start; }
.dataTables_wrapper > .dataTables_filter   { grid-column: 2; justify-self: end; }
.dataTables_wrapper > .dataTables_info     { grid-column: 1; justify-self: start; }
.dataTables_wrapper > .dataTables_paginate { grid-column: 2; justify-self: end; }

/* the table — and anything wrapping it — always spans both columns */
.dataTables_wrapper > table,
.dataTables_wrapper > .table-responsive,
.dataTables_wrapper > .row,
.dataTables_wrapper > *:has(table) { grid-column: 1 / -1; justify-self: stretch; }

/* the Bootstrap-integration DOM, when WHMCS uses it */
.dataTables_wrapper .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin: 0;
    width: 100%;
}
.dataTables_wrapper [class*="col-"] {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    padding: 0;
}
.dataTables_wrapper [class*="col-"]:has(table) { flex: 1 1 100%; width: 100%; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    float: none;
    margin: 0;
    padding: 8px 0;
    font-size: 13px;
    color: var(--bh-text-soft);
    text-align: left;
}
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-weight: 500;
}
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    height: 38px;
    min-width: 160px;
    padding: 0 12px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    font-size: 13.5px;
    color: var(--bh-text);
    box-shadow: none;
}
.dataTables_wrapper .dataTables_length select { min-width: 72px; }
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
    outline: none;
}

/* --- the table ----------------------------------------------------------- */
.dataTables_wrapper table.dataTable {
    width: 100% !important;
    margin: 6px 0 !important;
    border-collapse: collapse;
    font-size: 14px;
}
.dataTables_wrapper table.dataTable thead th {
    position: relative;
    padding: 13px 26px 13px 16px;
    background: #faf9fd;
    border: 0;
    border-bottom: 1px solid var(--bh-border);
    color: var(--bh-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
}
.dataTables_wrapper table.dataTable tbody td {
    padding: 14px 16px;
    border-top: 1px solid var(--bh-border-soft);
    vertical-align: middle;
    color: var(--bh-text);
}
.dataTables_wrapper table.dataTable tbody tr:hover > td { background: #fafcff; }
.dataTables_wrapper table.dataTable tbody tr.odd > td,
.dataTables_wrapper table.dataTable tbody tr.even > td { background-color: transparent; }
.dataTables_wrapper table.dataTable tbody td.dataTables_empty {
    padding: 44px 16px;
    text-align: center;
    color: var(--bh-muted);
    font-size: 13.5px;
}

/* Sort arrows. The plugin's own rules ask for Glyphicons; these replace the
   glyph with a character that exists in every font, so no icon font has to be
   shipped for one table. */
.dataTables_wrapper table.dataTable thead th::before,
.dataTables_wrapper table.dataTable thead th::after {
    font-family: inherit !important;
    position: absolute;
    right: 10px;
    font-size: 9px;
    line-height: 1;
    opacity: .35;
    pointer-events: none;
}
.dataTables_wrapper table.dataTable thead th.sorting::after,
.dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after { content: none; }
.dataTables_wrapper table.dataTable thead th.sorting::before { content: "\2195"; top: 50%; transform: translateY(-50%); }
.dataTables_wrapper table.dataTable thead th.sorting_asc::before { content: "\25B2"; top: 50%; transform: translateY(-50%); opacity: .85; color: var(--bh-primary); }
.dataTables_wrapper table.dataTable thead th.sorting_desc::before { content: "\25BC"; top: 50%; transform: translateY(-50%); opacity: .85; color: var(--bh-primary); }
.dataTables_wrapper table.dataTable thead th:hover { color: var(--bh-primary); }

/* --- pagination: a <ul>, so the bullets have to go ----------------------- */
.dataTables_wrapper .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.dataTables_wrapper .pagination > li { list-style: none; }
.dataTables_wrapper .pagination > li > a,
.dataTables_wrapper .pagination > li > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 11px;
    background: #fff;
    border: 1px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-text-soft);
    font-size: 13px;
}
.dataTables_wrapper .pagination > li > a:hover {
    border-color: var(--bh-primary);
    color: var(--bh-primary);
    text-decoration: none;
}
.dataTables_wrapper .pagination > .active > a,
.dataTables_wrapper .pagination > .active > span,
.dataTables_wrapper .pagination > .active > a:hover {
    background-image: var(--bh-grad);
    background-color: var(--bh-primary);
    border-color: transparent;
    color: #fff;
}
.dataTables_wrapper .pagination > .disabled > a,
.dataTables_wrapper .pagination > .disabled > span { opacity: .4; pointer-events: none; }

/* --- phones -------------------------------------------------------------- */
@media (max-width: 720px) {
    .dataTables_wrapper { padding: 12px 14px 4px; }
    .dataTables_wrapper .row { justify-content: flex-start; }
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_filter label { width: 100%; }
    .dataTables_wrapper .dataTables_filter input { flex: 1 1 auto; min-width: 0; }
    .dataTables_wrapper table.dataTable { display: block; overflow-x: auto; }
}

/* ==========================================================================
   49. Sidebar surface — depth without an image
   A deep gradient, a few very low-contrast rings and hairlines catching light
   at the top, and a soft brand glow pooling at the foot. Every layer is a
   CSS gradient: no image file to ship, nothing extra to download, and it
   scales to any sidebar height.

   Two things are deliberate:
     * the decoration is drawn in ::before / ::after with pointer-events:none
       and z-index 0, and the real content is lifted to z-index 1 — so nothing
       here can intercept a click.
     * .bh-sidebar is NOT given overflow:hidden. The "More" flyout opens
       outside the sidebar's own box when it is collapsed, and clipping the
       decoration would clip that too.
   ========================================================================== */
.bh-sidebar::before,
.bh-sidebar::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
}

/* top: concentric rings anchored just off the top-right corner, plus a faint
   diagonal grain. Masked so both fade out before they reach the navigation. */
.bh-sidebar::before {
    top: 0;
    height: 420px;
    background:
        radial-gradient(circle at 108% -6%, transparent 96px, rgba(255,255,255,.055) 97px, rgba(255,255,255,.055) 98px, transparent 99px),
        radial-gradient(circle at 108% -6%, transparent 150px, rgba(255,255,255,.045) 151px, rgba(255,255,255,.045) 152px, transparent 153px),
        radial-gradient(circle at 108% -6%, transparent 212px, rgba(255,255,255,.035) 213px, rgba(255,255,255,.035) 214px, transparent 215px),
        radial-gradient(115% 80% at 100% 0%, rgba(167,139,250,.20), transparent 62%),
        repeating-linear-gradient(118deg, rgba(255,255,255,.035) 0 1px, transparent 1px 30px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 48%, transparent 100%);
    mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.55) 48%, transparent 100%);
}

/* foot: the brand colour pooling under the last nav item */
.bh-sidebar::after {
    bottom: 0;
    height: 260px;
    background: radial-gradient(90% 62% at 18% 100%, rgba(124,58,237,.26), transparent 72%);
}

/* everything real sits above the decoration */
.bh-sidebar-brand,
.bh-sidebar-nav { position: relative; z-index: 1; }

/* the brand row reads as glass over the gradient rather than a separate slab */
.bh-sidebar-brand {
    background: rgba(255, 255, 255, .04);
    border-bottom: 1px solid rgba(255, 255, 255, .07);
    backdrop-filter: blur(2px);
}

/* the active item: a lit panel, not a flat block of colour */
.bh-nav-item > a.bh-active {
    background-image: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,0) 58%), var(--bh-grad);
    box-shadow: 0 6px 18px rgba(88, 28, 178, .38), inset 0 1px 0 rgba(255,255,255,.22);
}
.bh-nav-item > a:not(.bh-active):hover { background: rgba(255, 255, 255, .07); }

/* Collapsed, the "More" panel opens beside the sidebar — but the nav scrolls,
   and a scroll container clips its children on both axes. Collapsed the menu
   is short enough not to need scrolling, so the clipping is lifted there. */
@media (min-width: 993px) {
    body.bh-collapsed .bh-sidebar-nav { overflow: visible; }
}

/* ==========================================================================
   50. Order confirmation (cart.php?a=complete)
   The last thing a customer sees, and it was the least finished page in the
   flow: a full-width card with the text pushed to the left edge, a short order
   number stretched across nine hundred pixels because the stock markup makes
   it a block-level alert, and the quietest button on the page as the only way
   onward.

   Everything here is presentation. The order number, the wording and the link
   are all WHMCS's; nothing is added, removed or rewritten.
   ========================================================================== */
body[data-action="complete"] #order-standard_cart {
    max-width: 620px;
    margin: 0 auto;
    padding: 8px 0 24px;
    text-align: center;
}

/* a check mark above the heading: decoration, so it is drawn rather than
   inserted into WHMCS's markup */
body[data-action="complete"] #order-standard_cart h1::before {
    content: "✓";
    display: block;
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--bh-grad);
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 58px;
    box-shadow: 0 8px 20px rgba(124, 58, 237, .28);
}
body[data-action="complete"] #order-standard_cart h1 {
    margin: 0 0 10px;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -.3px;
}
body[data-action="complete"] #order-standard_cart p {
    max-width: 46ch;
    margin: 0 auto 18px;
    color: var(--bh-text-soft);
    font-size: 14px;
    line-height: 1.6;
}

/* the order number: sized to what it holds, not to the card */
body[data-action="complete"] .bh-order-number,
body[data-action="complete"] #order-standard_cart .alert {
    display: inline-block;
    width: auto;
    max-width: 100%;
    margin: 4px auto 22px;
    padding: 14px 26px;
    background: #faf8ff !important;
    background-image: none !important;
    border: 1.5px solid #e4d8fb !important;
    border-radius: var(--bh-radius) !important;
    color: var(--bh-text-soft) !important;
    font-size: 13.5px;
    text-align: center;
}
body[data-action="complete"] .bh-order-number strong,
body[data-action="complete"] .bh-order-number b,
body[data-action="complete"] #order-standard_cart .alert strong {
    display: block;
    margin-top: 4px;
    color: var(--bh-primary);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .5px;
}

/* the way onward is the action here, so it looks like one */
body[data-action="complete"] #order-standard_cart a.btn,
body[data-action="complete"] #order-standard_cart .btn-default,
body[data-action="complete"] #order-standard_cart .btn-primary {
    min-height: 46px;
    padding: 0 26px;
    border: 0 !important;
    border-radius: var(--bh-radius-sm) !important;
    background-image: var(--bh-grad) !important;
    background-color: var(--bh-primary) !important;
    color: #fff !important;
    font-size: 14.5px;
    font-weight: 650;
    transition: box-shadow .18s ease, transform .18s ease;
}
body[data-action="complete"] #order-standard_cart a.btn {
    box-shadow: var(--bh-gloss), 0 1px 2px rgba(16, 24, 40, .08) !important;
}
body[data-action="complete"] #order-standard_cart a.btn:hover {
    background-image: var(--bh-grad-hover) !important;
    box-shadow: var(--bh-gloss), var(--bh-lift) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   51. Checkout, tightened
   The form was laid out inside two boxes of different widths — a full-width
   card with a 900px one inside it — which left an empty band running down
   both sides and made the page read as wider and emptier than it is. One box
   now, sized to the form, with the vertical rhythm pulled in to match.

   A checkout is a queue of small decisions: the less distance between them,
   the shorter the queue feels.
   ========================================================================== */
body[data-page="cart"][data-action="checkout"] #order-standard_cart {
    max-width: 760px !important;
    margin: 0 auto;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart h1 {
    margin: 0 0 4px;
    font-size: 21px;
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart .cart-body > p:first-of-type {
    margin: 0 0 4px;
    font-size: 13px;
    color: var(--bh-muted);
}

/* the account choice: two rows, not two blocks */
body[data-page="cart"][data-action="checkout"] #containerExistingAccountSelect .account { padding: 12px 14px; }
body[data-page="cart"][data-action="checkout"] #order-standard_cart .margin-bottom { margin-bottom: 10px; }

/* the amount and the method it will be paid by belong together */
body[data-page="cart"][data-action="checkout"] #order-standard_cart #totalDueToday {
    padding: 10px 0;
    border-bottom: 1px solid var(--bh-border-soft);
}
body[data-page="cart"][data-action="checkout"] #order-standard_cart #paymentGatewaysContainer {
    max-width: none;
    margin: 12px 0 4px;
}

/* the notes box is optional and almost always left empty — it should not be
   the tallest thing between the customer and the button */
body[data-page="cart"][data-action="checkout"] #order-standard_cart textarea.field.form-control,
body[data-page="cart"][data-action="checkout"] #order-standard_cart textarea {
    min-height: 76px;
}

body[data-page="cart"][data-action="checkout"] #order-standard_cart #btnCompleteOrder {
    min-height: 50px;
    margin-top: 6px;
}

/* the IP notice is a legal footnote, not a warning */
body[data-page="cart"][data-action="checkout"] #order-standard_cart .checkout-security-msg {
    margin-top: 12px;
    padding: 9px 12px;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ==========================================================================
   52. Submit a ticket — both steps
   Step one offered two departments as bare links with their descriptions
   underneath, which read as a table of contents rather than a choice. Step two
   then spread eight fields across the full width of the screen with a message
   box tall enough to lose the Submit button below the fold.

   theme.js marks each department (.bh-dept / .bh-dept-link) by following the
   step-two link WHMCS builds itself — no class names are assumed. If that
   marking does not happen, the link rules below still apply and the page is
   simply left tidier than before.
   ========================================================================== */

/* --- both steps: a form is easier to read narrow than wide ---------------- */
body[data-page="submitticket"] .bh-page-inner > .bh-card,
body[data-page="submitticket"] #main-body > .card,
body[data-page="submitticket"] .card {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

/* --- step one: departments as choices ------------------------------------ */
.bh-dept-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 12px;
    margin-top: 6px;
}
.bh-dept {
    position: relative;
    padding: 16px 18px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.bh-dept:hover {
    border-color: var(--bh-primary);
    box-shadow: 0 4px 14px rgba(16, 24, 40, .08);
    transform: translateY(-1px);
}
.bh-dept-link {
    display: block;
    color: var(--bh-text);
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
}
/* the whole card becomes the target, without moving anything in the DOM */
.bh-dept .bh-dept-link::after { content: ""; position: absolute; inset: 0; }
.bh-dept:hover .bh-dept-link { color: var(--bh-primary); }
.bh-dept-link i,
.bh-dept-link .fa,
.bh-dept-link [class*="fa-"] { margin-right: 9px; color: var(--bh-accent); font-size: 14px; }
.bh-dept:hover .bh-dept-link [class*="fa-"] { color: var(--bh-primary); }

/* the description WHMCS prints under the name */
.bh-dept > *:not(.bh-dept-link),
.bh-dept .bh-dept-link ~ * {
    margin: 5px 0 0;
    color: var(--bh-muted);
    font-size: 13px;
    line-height: 1.5;
}
/* the chooser as a plain list, if the card markers could not be placed */
body[data-page="submitticket"] .bh-dept-link:not(.bh-dept > .bh-dept-link) { font-weight: 650; }

/* --- step two: the form -------------------------------------------------- */
body[data-page="submitticket"] form label,
body[data-page="submitticket"] .control-label {
    display: block;
    margin: 0 0 5px;
    color: var(--bh-text-soft);
    font-size: 12.5px;
    font-weight: 600;
}
body[data-page="submitticket"] .form-group { margin-bottom: 14px; }

body[data-page="submitticket"] input[type="text"],
body[data-page="submitticket"] input[type="email"],
body[data-page="submitticket"] select,
body[data-page="submitticket"] textarea,
body[data-page="submitticket"] .form-control {
    width: 100%;
    min-height: 42px;
    padding: 9px 13px;
    background: #fbfaff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    font-size: 14px;
    color: var(--bh-text);
    box-shadow: none;
}
body[data-page="submitticket"] .form-control:focus,
body[data-page="submitticket"] textarea:focus,
body[data-page="submitticket"] select:focus {
    background: #fff;
    border-color: var(--bh-primary);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, .12);
    outline: none;
}

/* the message box was tall enough to push Submit off the screen; it can still
   be dragged taller by anyone who needs it */
body[data-page="submitticket"] textarea,
body[data-page="submitticket"] textarea.form-control {
    min-height: 150px;
    resize: vertical;
}

/* attachments: a quiet row, not a headline */
body[data-page="submitticket"] input[type="file"] {
    min-height: 0;
    padding: 8px 10px;
    background: #fff;
    font-size: 13px;
}
body[data-page="submitticket"] .attachment-note,
body[data-page="submitticket"] small,
body[data-page="submitticket"] .text-muted { color: var(--bh-muted); font-size: 11.5px; }

/* the actions sit together, and the one that sends the ticket leads */
body[data-page="submitticket"] input[type="submit"],
body[data-page="submitticket"] button[type="submit"],
body[data-page="submitticket"] .btn-primary {
    min-height: 44px;
    padding: 0 28px;
    border: 0;
    border-radius: var(--bh-radius-sm);
    background-image: var(--bh-grad);
    background-color: var(--bh-primary);
    color: #fff;
    font-size: 14.5px;
    font-weight: 650;
    box-shadow: var(--bh-gloss), 0 1px 2px rgba(16, 24, 40, .08);
}
body[data-page="submitticket"] .btn-default,
body[data-page="submitticket"] a.btn:not(.btn-primary) {
    min-height: 44px;
    padding: 0 22px;
    background: #fff;
    border: 1.5px solid var(--bh-border);
    border-radius: var(--bh-radius-sm);
    color: var(--bh-text-soft);
    font-weight: 600;
}