/* ==========================================================================
   Unlimited Next — design tokens & theme overrides
   Loaded automatically after theme.min.css via head.tpl {assetExists}.
   Token values sampled from the main marketing site (dev21 style.css):
   Nunito Sans 400/700, UWH blue family, btn-success CTA green, #181818 ink,
   #f4f6f9 ground, 15px "rounded-xxl" card radius, pill CTAs.
   ========================================================================== */

/* Nunito Sans — same two weights the main site ships; self-hosted inside the
   theme so the client area has no dependency on the marketing docroot. */
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/nunito-sans-400.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Nunito Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/nunito-sans-700.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --uwx-ink: #181818;          /* main site header/footer ink (--bg-black) */
    --uwx-ink-soft: #2b3036;
    --uwx-text: #212529;         /* main site body ink */
    --uwx-muted: #6c757d;        /* main site .text-muted */
    --uwx-faint: #9aa2aa;
    --uwx-bg: #f4f6f9;           /* main site --uwh-light ground */
    --uwx-card: #ffffff;
    --uwx-border: #e8eaef;
    --uwx-border-soft: #f0f1f4;
    --uwx-green: #28a745;        /* main site CTA green (btn-success) */
    --uwx-green-dark: #218838;
    --uwx-green-tint: #e8faec;   /* main site .bg-highlight */
    --uwx-green-tint-border: #cdeed8;
    --uwx-blue: #003f88;         /* main site --uwh-blue */
    --uwx-blue-dark: #002260;    /* main site --uwh-blue-darker */
    --uwx-link: #0056b8;         /* main site --uwh-link */
    --uwx-amber: #b45309;
    --uwx-amber-chip: #fcf2df;
    --uwx-amber-dot: #e6a23c;
    /* P2 attention-dot orange. The palette shipped for a 3-state system
       (red/amber/green) had no hue between the brick-red #c94f42 and the gold
       #e6a23c, so P1 and P2 dots read as the same warm brown. This is the one
       added token for the 4-level model — a clear pumpkin orange, distinct
       from both neighbours yet in the same muted family. */
    --uwx-orange: #e8722c;
    --uwx-red: #c94f42;
    --uwx-red-dark: #b03d31;
    --uwx-red-tint: #fbeeec;
    --uwx-amber-border: #f0dcb4;
    --uwx-amber-tint-hover: #f7e7c8;  /* amber button hover ground */
    --uwx-amber-border-mid: #e6ce9c;  /* amber button/banner action border */
    --uwx-info-tint: #eef1f6;   /* neutral info chip ground */
    --uwx-info-ink: #4a5468;
    --uwx-track: #edeff3;       /* ring / progress track */
    --uwx-border-mid: #d6dae2;  /* hover border, darker than --uwx-border */
    --uwx-ink-quiet: #55617a;   /* footer + breadcrumb links */
    --uwx-nav-ink: #f2f4f6;     /* dark-bar nav link ink */
    --uwx-topbar-ink: rgba(255, 255, 255, .85);  /* top marketing-bar link ink */
    --uwx-focus-ring: 0 0 0 3px rgba(40, 167, 69, .15);
    --uwx-radius: 15px;          /* main site .rounded-xxl */
    --uwx-radius-sm: 10px;
    --uwx-radius-pill: 999px;    /* main site .rounded-pill CTAs */
    --uwx-shadow: 0 1px 2px rgba(20, 23, 28, .05);
    --uwx-shadow-dropdown: 0 8px 24px rgba(20, 23, 28, .12);  /* dropdown-menu elevation */
    --uwx-nav-h: 52px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

body,
body.primary-bg-color {
    background: var(--uwx-bg) !important;
    color: var(--uwx-text);
    font-family: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
        Roboto, Arial, sans-serif;
    font-size: 15px;
}
/* the two stock surfaces that pin their own family */
.popover-user-notifications, .admin-masquerade-notice { font-family: inherit; }

/* main site link language: UWH link blue, underline affordance on hover
   (always-on underline is too loud in an anchor-heavy console UI) */
a { color: var(--uwx-link); }
a:hover { color: var(--uwx-blue); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 { color: var(--uwx-ink); }

#main-body {
    padding: 28px 0 48px;
    min-height: 55vh;
}

/* Main-site framing: the container widens to the site's 1500px at >=1440px
   (Bootstrap's responsive tiers apply below, same as the marketing pages). */
@media (min-width: 1440px) {
    .container { max-width: 1500px !important; }
}

/* Rails (actions / attention / health panels) sit LEFT of content on
   desktop and ABOVE content when the columns stack — action panes must not
   sink to the page bottom on phones. DOM keeps content first (tab order /
   screen readers read content first; the skip link covers keyboard users). */
.uwx-rail { order: -1; }

/* Resource Usage panels hide unless uwxShowUsage (header.tpl config) is on.
   The id rules stay separate from the :has() rules so a :has()-less browser
   only loses the fallback, not the whole feature. */
.uwx-hide-usage #cPanelUsagePanel { display: none !important; }
.uwx-hide-usage #wpSquaredUsagePanel { display: none !important; }
/* id-less modules (Plesk, future) */
.uwx-hide-usage .uwx-module-overview .card:has(input.usage-dial) { display: none !important; }
/* Module grids pair panels in col-md-6 halves; with usage hidden the
   surviving half would sit beside a blank column — stack the row instead
   (an emptied column collapses to zero height). */
.uwx-hide-usage .uwx-module-overview .row:has(input.usage-dial) > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* The status strip replaces module Billing Overview panels (Plesk's id-less
   panel is hidden by the header script). */
#cPanelBillingOverviewPanel,
#wpSquaredBillingOverviewPanel { display: none !important; }

/* cPanel's Package/Domain panel duplicates the pagehead (product name, domain,
   Visit Website); its one unique affordance — Manage domain — moved into the
   pagehead sub line (clientareaproductdetails.tpl). */
#cPanelPackagePanel { display: none !important; }

/* --------------------------------------------------------------------------
   Buttons — brand green primary, quiet outline secondary
   -------------------------------------------------------------------------- */

/* main site button language: pill, bold */
.btn { border-radius: var(--uwx-radius-pill); font-weight: 700; }

/* Base controls follow the theme's 15px body scale, so ANY stock or
   addon-emitted control inherits the style guide by default. */
.btn {
    font-size: 15px;
    line-height: 1.5;
    padding: 6px 12px;
}
/* navbar buttons participate in responsive collapse measurements — keep stock.
   ONE DELIBERATE EXCEPTION, declared here so the rule is not read as absolute:
   `.uwx-nav .btn-return-to-admin` (below) sizes the masquerade pill at 13px.
   That is safe ONLY because of where it sits — inside `.uwx-nav__account`,
   which is outside `#nav`, and autoCollapse (js/whmcs.js:1378-1380) measures
   `jQuery(menu)` = `#nav`. A `.uwx-nav .btn` placed INSIDE `#nav` at a
   non-stock size WOULD change the measured height and the collapse breakpoint
   with it, so keep stock there. Verified no functional effect today. */
.uwx-nav .btn {
    font-size: 1rem;
    padding: .375rem .75rem;
}
/* explicit size modifiers keep their intent */
.btn-sm, .btn-xs { font-size: 13px; line-height: 1.5; padding: 2px 8px; }
.btn-lg { font-size: 18px; line-height: 1.5; padding: 8px 18px; }

/* CTA buttons: green, mixed-case bold (owner verdict 2026-07-18 — the green
   carries the importance, block caps don't), .btn-custom's translucent edge
   with the heavier bottom rule. The bottom rule is an inset shadow, not a
   3px border, so CTA height stays identical to inputs/secondary buttons in
   input-groups (Codex finding #1). */
.btn-primary,
.btn-success {
    background-color: var(--uwx-green);
    border: 1px solid rgba(0, 0, 0, .05);
    box-shadow: inset 0 -2px rgba(0, 0, 0, .05);
    background-origin: border-box;
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-success:focus, .btn-success:active,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--uwx-green-dark);
    border-color: rgba(0, 0, 0, .05);
    color: #fff;
}
/* theme.css restores per-variant blue/tinted focus halos at higher
   specificity — kill them all; focus visibility is the green outline */
.btn:focus, .btn.focus,
.btn:not(:disabled):not(.disabled):active:focus,
.btn:not(:disabled):not(.disabled).active:focus {
    box-shadow: none !important;
}

.btn-default,
.btn-secondary {
    background: #fff;
    border: 1px solid var(--uwx-border);
    color: var(--uwx-text);
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--uwx-bg);
    border-color: var(--uwx-border-mid);
    color: var(--uwx-ink);
}

/* box-shadow suppression lives in the halo-killer block above (its selectors
   cover :focus-visible too — a focus-visible element is focused) */
.btn:focus, .btn:focus-visible {
    outline: 2px solid var(--uwx-green);
    outline-offset: 1px;
}

/* --------------------------------------------------------------------------
   Header — main-site bar (black, marketing nav) over the client bar
   (dark grey — the colour shift + "Client area" label segment the two).
   -------------------------------------------------------------------------- */

.uwx-topbar {
    background: var(--uwx-ink);
    min-height: 52px;
    display: flex;
    align-items: center;
}
.uwx-topbar .container {
    display: flex;
    align-items: center;
    gap: 28px;
    min-height: 52px;
}
.uwx-topbar__brand { display: flex; align-items: center; flex: none; }
.uwx-topbar__brand img { height: 28px; width: auto; display: block; }
.uwx-topbar__nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.uwx-topbar__nav a {
    /* stays on the marketing site's 14px — this bar is a 1:1 replica of the
       main-site header and is exempt from the console's 15px scale */
    font-size: 14px;
    color: var(--uwx-topbar-ink);
    padding: 15px 10px;
    white-space: nowrap;
}
.uwx-topbar__nav a:hover { color: #fff; text-decoration: none; }

.uwx-nav {
    background: var(--uwx-ink-soft);
    min-height: var(--uwx-nav-h);
    font-size: 15px;
}
.uwx-nav__context {
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-right: 20px;
    white-space: nowrap;
}
.uwx-nav .container {
    display: flex;
    align-items: center;
    min-height: var(--uwx-nav-h);
    flex-wrap: wrap;
}
.uwx-nav .navbar-nav { flex-direction: row; align-items: center; }
.uwx-nav .navbar-nav .nav-item { margin: 0; }
.uwx-nav .navbar-nav .nav-link,
.uwx-nav .nav-link {
    color: var(--uwx-nav-ink);
    padding: 14px;
    font-weight: 700;
    border-radius: 0;
}
.uwx-nav .navbar-nav .nav-link:hover,
.uwx-nav .nav-link:hover,
.uwx-nav .navbar-nav .nav-item.active .nav-link {
    color: #fff;
    background: transparent;
    box-shadow: inset 0 -2px 0 var(--uwx-green);
}
/* twenty-one sets `header.header .navbar a { color:#444 }`, which outranks
   class-only selectors — match its specificity to keep the dark bar legible */
header.header .uwx-nav a { color: var(--uwx-nav-ink); }
header.header .uwx-topbar a { color: var(--uwx-topbar-ink); }
header.header .uwx-topbar a:hover { color: #fff; text-decoration: none; }
header.header .uwx-nav .navbar-nav > li > a {
    display: block;
    padding: 14px;
    font-weight: 700;
}
header.header .uwx-nav .navbar-nav > li > a:hover,
header.header .uwx-nav .navbar-nav > li.active > a {
    color: #fff;
    text-decoration: none;
    box-shadow: inset 0 -2px 0 var(--uwx-green);
}
header.header .uwx-nav .toolbar .nav-link,
header.header .uwx-nav__account .nav-link,
header.header .uwx-nav__account .btn {
    border: 0;
    color: var(--uwx-nav-ink);
}
header.header .uwx-nav .dropdown-menu a,
header.header .uwx-nav .dropdown-menu .dropdown-item {
    color: var(--uwx-text);
    padding: 6px 16px;
}
header.header .uwx-nav .dropdown-menu a:hover,
header.header .uwx-nav .dropdown-menu .dropdown-item:hover {
    color: var(--uwx-ink);
    background: var(--uwx-bg);
    box-shadow: none;
}

.uwx-nav .dropdown-menu {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
    box-shadow: var(--uwx-shadow-dropdown);
    font-size: 15px;
}
.uwx-nav .dropdown-menu .dropdown-item { padding: 8px 16px; }
.uwx-nav .dropdown-menu .dropdown-item:hover { background: var(--uwx-bg); }

/* Stock autoCollapse un-hides the "More" overflow dropdown before discovering
   that every nav item is no-collapse, leaving an empty "More" on screen. An
   empty menu must not render: hide it whenever it holds no collapsed items
   (the JS prepends <li>s when it genuinely overflows, un-matching :has()). */
#nav > li.collapsable-dropdown:not(:has(li)) { display: none !important; }

/* right-hand account cluster */
.uwx-nav__account { display: flex; align-items: center; margin-left: auto; gap: 2px; }
.uwx-nav__account .btn,
.uwx-nav__account .nav-link {
    color: var(--uwx-nav-ink);
    font-weight: 700;
    background: transparent;
    border: 0;
}
.uwx-nav__account .btn:hover,
.uwx-nav__account .nav-link:hover { color: #fff; }
.uwx-nav__account .badge { background: var(--uwx-green); color: #fff; }

.uwx-nav .btn-return-to-admin {
    background: var(--uwx-red);
    color: #fff;
    border-radius: var(--uwx-radius-pill);
    padding: 4px 12px;
    font-size: 13px;
    margin-left: 10px;
}
.uwx-nav .btn-return-to-admin:hover { background: var(--uwx-red-dark); color: #fff; }

/* mobile collapse panel — stacking applies to the collapsed menu only; the
   always-visible toolbar (cart/burger) stays a row so the bar keeps one line */
.uwx-nav .navbar-collapse { width: 100%; }
@media (max-width: 1199.98px) {
    .uwx-nav .navbar-collapse .navbar-nav { flex-direction: column; align-items: stretch; width: 100%; }
    .uwx-nav .navbar-collapse .navbar-nav .nav-link { padding: 12px 8px; }
    .uwx-nav__account {
        margin-left: 0;
        width: 100%;
        flex-wrap: wrap;
        border-top: 1px solid rgba(255, 255, 255, .12);
        padding: 8px 0;
    }
    .uwx-nav__account .navbar-nav { width: auto; flex-direction: row; }
}

/* --------------------------------------------------------------------------
   Offer banner
   -------------------------------------------------------------------------- */

/* bounded card below the breadcrumb, in the page-entry eyeline */
.uwx-offercard {
    display: flex;
    align-items: center;
    gap: 14px;
    background: linear-gradient(90deg, var(--uwx-green-tint), #fff 55%);
    border: 1px solid var(--uwx-green-tint-border);
    border-left: 3px solid var(--uwx-green);
    border-radius: var(--uwx-radius);
    box-shadow: var(--uwx-shadow);
    padding: 12px 16px;
    margin: 14px 0 2px;
}
.uwx-offercard__tag {
    background: var(--uwx-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 8px;
    flex: none;
}
.uwx-offercard__body { min-width: 0; }
.uwx-offercard__headline {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--uwx-ink);
}
.uwx-offercard__sub {
    display: block;
    font-size: 13.5px;
    color: var(--uwx-muted);
    margin-top: 1px;
}
.uwx-offercard__cta {
    margin-left: auto;
    flex: none;
    font-size: 14px;
    padding: 6px 16px;
    white-space: nowrap;
}
.uwx-offercard__close {
    background: transparent;
    border: 0;
    color: var(--uwx-faint);
    font-size: 21px;
    line-height: 1;
    padding: 2px 6px;
    cursor: pointer;
    flex: none;
}
.uwx-offercard__close:hover { color: var(--uwx-ink); }
@media (max-width: 575.98px) {
    .uwx-offercard { flex-wrap: wrap; }
    .uwx-offercard__cta { margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Service-status card — the offer-card shape in warning colours; open
   incidents and scheduled maintenance list in ONE box, a segment per issue
   -------------------------------------------------------------------------- */

.uwx-netcard {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: linear-gradient(90deg, var(--uwx-amber-chip), #fff 55%);
    border: 1px solid var(--uwx-amber-border);
    border-left: 3px solid var(--uwx-amber-dot);
    border-radius: var(--uwx-radius);
    box-shadow: var(--uwx-shadow);
    padding: 10px 16px;
    margin: 14px 0 2px;
}
.uwx-netcard__tag {
    background: var(--uwx-amber-dot);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    border-radius: 4px;
    padding: 3px 8px;
    flex: none;
    margin-top: 5px;
    white-space: nowrap;
}
.uwx-netcard__items { flex: 1 1 auto; min-width: 0; }
.uwx-netcard__item {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 5px 0;
}
.uwx-netcard__item + .uwx-netcard__item { border-top: 1px solid var(--uwx-amber-border); }
.uwx-netcard__title { font-size: 14.5px; font-weight: 700; color: var(--uwx-ink); }
.uwx-netcard__meta { font-size: 13px; color: var(--uwx-muted); margin-left: 6px; }
.uwx-netcard__cta {
    margin-left: auto;
    margin-top: 2px;
    flex: none;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .uwx-netcard { flex-wrap: wrap; }
    .uwx-netcard__items { flex: 1 1 100%; order: 3; }
    .uwx-netcard__cta { margin-left: auto; }
    .uwx-netcard__meta { display: block; margin-left: 0; }
}

/* --------------------------------------------------------------------------
   Breadcrumb — quiet, no chrome
   -------------------------------------------------------------------------- */

.master-breadcrumb {
    background: transparent;
    border: 0;
    padding: 18px 0 0;
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 14px;
}
.master-breadcrumb .breadcrumb a { color: var(--uwx-ink-quiet); }
.master-breadcrumb .breadcrumb a:hover { color: var(--uwx-ink); }
.master-breadcrumb .breadcrumb .breadcrumb-item.active { color: var(--uwx-ink); font-weight: 700; }

/* --------------------------------------------------------------------------
   Page head — welcome / title row
   -------------------------------------------------------------------------- */

.uwx-pagehead {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.uwx-pagehead__title { font-size: 27px; font-weight: 700; margin: 0; }
.uwx-pagehead__sub { font-size: 14.5px; color: var(--uwx-muted); margin: 4px 0 0; }
.uwx-pagehead__actions { display: flex; gap: 10px; flex: none; padding-top: 4px; }
/* Phones: actions take the full row and share it (or stack) instead of
   overflowing the viewport (e.g. domain details' two wide CTAs). */
@media (max-width: 575.98px) {
    .uwx-pagehead__actions { width: 100%; flex-wrap: wrap; }
    .uwx-pagehead__actions .btn { flex: 1 1 auto; }
}

.uwx-empty { font-size: 14.5px; color: var(--uwx-muted); }

.uwx-panels { margin-top: 8px; }
.uwx-panels .card { margin-bottom: 20px; }

/* Calm the stock panel grid: urgency lives in the attention checklist, not
   in coloured card borders and loud header buttons. */
.uwx-panels .card[class*="card-accent-"] { border-color: var(--uwx-border); }
.uwx-panels .card .card-header .btn {
    background: transparent !important;
    border: 1px solid var(--uwx-border);
    color: var(--uwx-ink) !important;
    font-size: 12.5px;
    font-weight: 700;
    padding: 3px 10px;
    text-transform: none;
    letter-spacing: 0;
}
.uwx-panels .card .card-header .btn:hover,
.uwx-panels .card .card-header .btn:focus {
    background: var(--uwx-bg) !important;
    border-color: #d5dae3;
    color: var(--uwx-ink) !important;
}
.uwx-panels .card-footer:empty { display: none; }

/* Full-width domain search panel (colspan) — renders at the TOP of the
   dashboard, above the tabs (acquisition CTA in the page-entry eyeline). */
.uwx-panels--lead { margin-top: 0; }
.uwx-panels--lead .card { margin-bottom: 24px; }
.uwx-panels div[menuitemname="Register a New Domain" i] .card-body .input-group {
    padding: 8px 14px 14px;
}
/* Register / Transfer stay mixed-case (owner call: block caps read as
   shouting on a search control; the global CTA style is unchanged). */
.uwx-panels div[menuitemname="Register a New Domain" i] .input-group-append .btn {
    text-transform: none;
    letter-spacing: 0;
}
.uwx-panels div[menuitemname="Register a New Domain" i] input[name="domain"] {
    height: 44px;
    font-size: 16px;
}
/* Phones: search input full width, Register/Transfer share a row below it */
@media (max-width: 575.98px) {
    .uwx-panels div[menuitemname="Register a New Domain" i] .input-group { flex-wrap: wrap; }
    .uwx-panels div[menuitemname="Register a New Domain" i] input[name="domain"] {
        flex: 1 1 100%;
        border-radius: var(--uwx-radius-sm) !important;
        margin-bottom: 8px;
    }
    .uwx-panels div[menuitemname="Register a New Domain" i] .input-group-append { width: 100%; }
    .uwx-panels div[menuitemname="Register a New Domain" i] .input-group-append .btn {
        flex: 1 1 0;
        border-radius: var(--uwx-radius-pill) !important;
    }
    .uwx-panels div[menuitemname="Register a New Domain" i] .input-group-append .btn + .btn { margin-left: 8px; }
}
.uwx-panels div[menuitemname="Register a New Domain" i] .input-group-append .btn {
    padding-left: 22px;
    padding-right: 22px;
    font-weight: 700;
}

/* Addon-emitted email panel: containment only */
.uwx-panels div[menuitemname="SpamexpertsLogin" i] img { max-height: 30px; width: auto; }
.uwx-panels div[menuitemname="SpamexpertsLogin" i] .btn-service-sso { margin-top: 10px; }
.uwx-panels div[menuitemname="SpamexpertsLogin" i] small { color: var(--uwx-faint); }

/* --------------------------------------------------------------------------
   Cards — the core surface
   -------------------------------------------------------------------------- */

.card, .panel {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius);
    box-shadow: var(--uwx-shadow);
    background: var(--uwx-card);
}
.card .card-header {
    background: transparent;
    border-bottom: 1px solid var(--uwx-border-soft);
    padding: 14px 20px;
}
.card .card-header .card-title,
.card .card-header h3 {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uwx-muted);
}

.uwx-card {
    background: var(--uwx-card);
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius);
    box-shadow: var(--uwx-shadow);
    margin-bottom: 20px;
}
.uwx-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px 0;
}
.uwx-card__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uwx-muted);
}
.uwx-card__headlink { font-size: 14px; font-weight: 700; }
.uwx-card__body { padding: 16px 20px; }

/* rows inside cards (services / domains lists) */
.uwx-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 20px;
}
.uwx-row + .uwx-row { border-top: 1px solid var(--uwx-border-soft); }
.uwx-row__main { min-width: 0; flex: 1 1 auto; }
.uwx-row__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--uwx-ink);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.uwx-row__title a { color: inherit; }
/* Ticket with an unread client reply: emphasise the subject link. */
.uwx-row__unread { font-weight: 700; }
.uwx-row__meta { font-size: 13.5px; color: var(--uwx-muted); margin-top: 2px; }
/* Ticket status label in a row meta line — coloured inline from the admin
   status config (tblticketstatuses.color); this just sets weight/spacing. */
.uwx-ticket-status { font-weight: 700; }
.uwx-row__hint {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--uwx-green-dark);
    margin-top: 6px;
    display: inline-block;
}
.uwx-row__actions { display: flex; gap: 8px; flex: none; align-items: center; }
.uwx-row__actions .btn { font-size: 14px; padding: 5px 14px; }
/* Module quick action (SSO login) split button in list rows. Reuses the stock
   btn-custom-action shape; containment so the group reads as ONE pill control
   (pill outer corners, flat inner join) with the dropdown on the card system. */
.uwx-row__actions .uwx-qa { display: inline-flex; }
.uwx-row__actions .uwx-qa > .btn:first-child {
    border-top-right-radius: 0; border-bottom-right-radius: 0;
}
/* single-action group (no caret, e.g. Plesk): the lone button stays a full pill */
.uwx-row__actions .uwx-qa > .btn:last-child {
    border-top-right-radius: var(--uwx-radius-pill);
    border-bottom-right-radius: var(--uwx-radius-pill);
}
.uwx-row__actions .uwx-qa > .btn + .btn {
    border-top-left-radius: 0; border-bottom-left-radius: 0;
    margin-left: -1px; padding-left: 10px; padding-right: 10px;
}
.uwx-row__actions .uwx-qa .dropdown-menu {
    font-size: 14px; min-width: 170px;
    border: 1px solid var(--uwx-border); border-radius: 10px;
    box-shadow: 0 6px 18px rgba(24, 24, 24, 0.08);
}
.uwx-row__actions .uwx-qa .dropdown-item { padding: 6px 14px; cursor: pointer; }
.uwx-row__actions .uwx-qa .dropdown-item.disabled { color: var(--uwx-muted); cursor: default; }
.uwx-row__actions .btn-custom-action .loading { margin-right: 4px; }
/* Dismiss control: low-emphasis, secondary to the row's real CTA. The inline
   form must not add layout of its own (the actions row owns the gap). */
.uwx-row__dismiss { display: inline; margin: 0; }
.uwx-row__dismiss-btn {
    font-size: 14px; padding: 5px 12px;
    background: none; border: 1px solid transparent;
    color: var(--uwx-muted);
}
.uwx-row__dismiss-btn:hover,
.uwx-row__dismiss-btn:focus {
    color: var(--uwx-ink); border-color: var(--uwx-border); background: var(--uwx-bg);
}
/* On phones the actions drop below the text instead of crushing it sideways */
@media (max-width: 575.98px) {
    .uwx-row { flex-wrap: wrap; gap: 10px; }
    .uwx-row__main { flex: 1 1 100%; }
    .uwx-row__actions { width: 100%; }
    .uwx-row__actions .btn { flex: 1 1 0; padding-top: 8px; padding-bottom: 8px; }
    /* Quick-action group takes its own full-width line: three controls in one
       row crush the SSO label into a multi-line pill */
    .uwx-row__actions { flex-wrap: wrap; }
    .uwx-row__actions .uwx-qa { flex: 1 1 100%; display: flex; }
    .uwx-row__actions .uwx-qa > .btn:first-child { flex: 1 1 auto; white-space: nowrap; }
    .uwx-row__actions .uwx-qa > .btn.dropdown-toggle { flex: 0 0 auto; }
    .uwx-row__dismiss { flex: 1 1 0; display: flex; }
    .uwx-row__dismiss-btn { flex: 1 1 0; padding-top: 8px; padding-bottom: 8px; }
}

/* status dot + chip */
.uwx-dot {
    display: inline-block;
    width: 8px; height: 8px;
    border-radius: 50%;
    flex: none;
}
.uwx-dot--ok { background: var(--uwx-green); }
.uwx-dot--warn { background: var(--uwx-amber-dot); }
.uwx-dot--bad { background: var(--uwx-red); }
.uwx-dot--off { background: var(--uwx-faint); }
/* Attention-row P-levels (P1 red / P2 orange / P3 yellow / P4 grey). P1 = the
   red dot, P3 = the amber dot (the former 'warn' yellow), P4 = the faint grey
   (the former 'off'); P2 uses the added --uwx-orange because the burnt-amber
   #b45309 read as the same warm brown as the red dot at 8px. */
.uwx-dot--p1 { background: var(--uwx-red); }
.uwx-dot--p2 { background: var(--uwx-orange); }
.uwx-dot--p3 { background: var(--uwx-amber-dot); }
.uwx-dot--p4 { background: var(--uwx-faint); }

.uwx-chip {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 4px;
    padding: 2px 7px;
    vertical-align: middle;
}
.uwx-chip--warn { background: var(--uwx-amber-chip); color: var(--uwx-amber); }
.uwx-chip--ok { background: var(--uwx-green-tint); color: var(--uwx-green-dark); }
.uwx-chip--bad { background: var(--uwx-red-tint); color: var(--uwx-red); }
.uwx-chip--info { background: var(--uwx-info-tint); color: var(--uwx-muted); }

/* --------------------------------------------------------------------------
   Right rail — setup score / coming up / domain health
   -------------------------------------------------------------------------- */

.uwx-rail .uwx-card__body { padding-top: 12px; }

.uwx-score { display: flex; align-items: center; gap: 14px; padding: 16px 20px 4px; }
.uwx-score__ring {
    --pct: 65;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: conic-gradient(var(--uwx-amber-dot) calc(var(--pct) * 1%), var(--uwx-track) 0);
    display: flex; align-items: center; justify-content: center;
    flex: none;
}
.uwx-score__ring.uwx-score__ring--good {
    background: conic-gradient(var(--uwx-green) calc(var(--pct) * 1%), var(--uwx-track) 0);
}
.uwx-score__ring.uwx-score__ring--bad {
    background: conic-gradient(var(--uwx-red) calc(var(--pct) * 1%), var(--uwx-track) 0);
}
/* score card without a trailing checklist: restore the bottom padding */
.uwx-score.uwx-score--solo { padding-bottom: 16px; }
.uwx-score__ring span {
    background: #fff;
    width: 42px; height: 42px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; color: var(--uwx-ink);
}
.uwx-score__title { font-size: 15px; font-weight: 700; color: var(--uwx-ink); }
.uwx-score__sub { font-size: 13px; color: var(--uwx-muted); }

.uwx-upcoming { list-style: none; margin: 0; padding: 4px 0 8px; }
.uwx-upcoming li { display: flex; gap: 12px; padding: 9px 20px; align-items: baseline; }
.uwx-upcoming li + li { border-top: 1px solid var(--uwx-border-soft); }
.uwx-upcoming__when {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--uwx-faint);
    width: 34px; flex: none;
}
.uwx-upcoming__what { font-size: 14px; font-weight: 700; color: var(--uwx-ink); min-width: 0; }
.uwx-upcoming__sub { font-size: 13px; color: var(--uwx-muted); }

/* --------------------------------------------------------------------------
   Domain manager — status strip, tabs, health rail
   -------------------------------------------------------------------------- */

/* The strip is a 1px-gap mosaic: the gap shows the card's hairline colour, so
   dividers are correct on every wrap (no dangling cells, no missing row
   rules). Cells grow to fill their row, the action keys right. */
.uwx-strip {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--uwx-border-soft);
    border-radius: calc(var(--uwx-radius) - 1px);
    overflow: hidden;
}
.uwx-strip__cell {
    background: var(--uwx-card);
    flex: 1 1 auto;
    padding: 15px 20px;
}
.uwx-strip__key {
    font-size: 11.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--uwx-faint);
}
.uwx-strip__val { font-size: 15px; font-weight: 700; color: var(--uwx-ink); margin-top: 2px; }
.uwx-strip__val small { font-weight: 700; color: var(--uwx-muted); }
.uwx-strip__action {
    background: var(--uwx-card);
    flex: 1 0 auto; /* fills its row even when wrapped alone (mosaic bg must not show) */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 12px 20px;
}
/* Phones: the strip becomes stacked key/value rows (the same idiom as the
   list-page card rows), action as a full-width footer row. */
@media (max-width: 767.98px) {
    .uwx-strip__cell {
        flex: 1 1 100%;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        padding: 11px 16px;
    }
    .uwx-strip__val { margin-top: 0; text-align: right; }
    .uwx-strip__action { flex: 1 1 100%; margin-left: 0; padding: 12px 16px; }
    .uwx-strip__action .btn { display: block; width: 100%; }
}

.uwx-tabs {
    display: flex;
    gap: 22px;
    border-bottom: 1px solid var(--uwx-border);
    margin-bottom: 22px;
    /* Scroll horizontally rather than wrap onto a second row when the tab set
       is wider than the viewport (e.g. 5+ tabs on a phone). Momentum scroll on
       touch; the scrollbar is hidden cosmetically (see below) but the strip
       stays swipeable/keyboard-scrollable, and the bottom border still reads
       as one continuous rule. */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.uwx-tabs::-webkit-scrollbar { display: none; } /* WebKit/Blink */
/* Arrow enhancement (uwx-tabs.js wraps .uwx-tabs in .uwx-tabs-scroller and
   injects the two buttons). Arrows appear only while the strip overflows and
   there is room to scroll that way; when JS is absent the strip still scrolls
   by touch/keyboard, so this is purely additive. */
.uwx-tabs-scroller {
    position: relative;
    /* The bottom rule belongs to the scroller so it spans the full width even
       while the inner strip scrolls; the strip drops its own border when wrapped. */
    border-bottom: 1px solid var(--uwx-border);
    margin-bottom: 22px;
}
.uwx-tabs-scroller .uwx-tabs {
    border-bottom: 0;
    margin-bottom: 0;
}
.uwx-tabs-arrow {
    position: absolute;
    top: 0;
    bottom: 1px; /* sit above the rule */
    width: 40px;
    display: none; /* shown via .is-shown */
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--uwx-ink);
    font-size: 13px;
    z-index: 2;
}
.uwx-tabs-arrow.is-shown { display: flex; }
.uwx-tabs-arrow--left {
    left: 0;
    /* Fade the strip out beneath the arrow so tabs don't hard-clip at the edge. */
    background: linear-gradient(to right, var(--uwh-light, #f4f6f9) 55%, rgba(244, 246, 249, 0));
    justify-content: flex-start;
    padding-left: 2px;
}
.uwx-tabs-arrow--right {
    right: 0;
    background: linear-gradient(to left, var(--uwh-light, #f4f6f9) 55%, rgba(244, 246, 249, 0));
    justify-content: flex-end;
    padding-right: 2px;
}
/* Navigation affordance, not an action — green is reserved (house style). */
.uwx-tabs-arrow:hover { color: var(--uwx-link); }
/* Cards sit on white — when a strip lives inside a .uwx-card the fade must
   match the card, not the page ground. */
.uwx-card .uwx-tabs-arrow--left { background: linear-gradient(to right, #fff 55%, rgba(255, 255, 255, 0)); }
.uwx-card .uwx-tabs-arrow--right { background: linear-gradient(to left, #fff 55%, rgba(255, 255, 255, 0)); }
/* Action bar at the top of a tab pane (e.g. Tickets tab: "Open a ticket"). */
.uwx-tabhead {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.uwx-tabs__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 2px;
    font-size: 15px;
    font-weight: 700;
    color: var(--uwx-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    /* Never squash a tab to fit — overflow scrolls instead. */
    flex: 0 0 auto;
    white-space: nowrap;
}
.uwx-tabs__tab:hover { color: var(--uwx-ink); text-decoration: none; }
.uwx-tabs__tab.active {
    color: var(--uwx-ink);
    border-bottom-color: var(--uwx-green);
}
/* count chip on a tab (dashboard: Services (6) / Tickets (1)) */
.uwx-tabs__count {
    background: var(--uwx-info-tint);
    color: var(--uwx-muted);
    font-size: 11.5px;
    font-weight: 700;
    border-radius: var(--uwx-radius-pill);
    padding: 1px 8px;
}
.uwx-tabs__tab.active .uwx-tabs__count {
    background: var(--uwx-green-tint);
    color: var(--uwx-green-dark);
}

.uwx-health { list-style: none; margin: 0; padding: 4px 0 8px; }
.uwx-health li { display: flex; gap: 10px; padding: 10px 20px; align-items: baseline; }
.uwx-health li + li { border-top: 1px solid var(--uwx-border-soft); }
.uwx-health__icon { flex: none; width: 16px; text-align: center; }
.uwx-health__icon .fa-check { color: var(--uwx-green); }
.uwx-health__icon .fa-exclamation { color: var(--uwx-amber-dot); }
.uwx-health__icon .fa-minus { color: var(--uwx-faint); }
.uwx-health__what { font-size: 14px; font-weight: 700; color: var(--uwx-ink); }
.uwx-health__why { font-size: 13px; color: var(--uwx-muted); }
.uwx-health__act { margin-left: auto; font-size: 13.5px; font-weight: 700; white-space: nowrap; }

/* a <button> that reads as a link (e.g. the health rail's "Turn on" submits
   the Overview auto-renew form via its form= attribute) */
.uwx-linkbtn {
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--uwx-link);
    font-family: inherit;
}
.uwx-linkbtn:hover { color: var(--uwx-blue); text-decoration: underline; }

.uwx-row--sub { padding-top: 8px; padding-bottom: 10px; }
.uwx-chip img { vertical-align: -1px; margin-right: 2px; }

/* settings list (nameservers / DNS / contacts / transfer) */
.uwx-settings { list-style: none; margin: 0; padding: 0; }
.uwx-settings li {
    display: flex; align-items: center; gap: 14px;
    padding: 14px 20px;
}
.uwx-settings li + li { border-top: 1px solid var(--uwx-border-soft); }
.uwx-settings__name { font-size: 15px; font-weight: 700; color: var(--uwx-ink); }
.uwx-settings__name .uwx-chip { margin-left: 6px; }
.uwx-settings__desc { font-size: 13.5px; color: var(--uwx-muted); }
/* a disabled safety setting (auto-renew off) warns in place */
.uwx-settings__desc--warn { color: var(--uwx-amber); }
.uwx-settings .btn { margin-left: auto; font-size: 14px; padding: 5px 14px; }
/* inline control row (the auto-renew switch form) keys right like the buttons */
.uwx-settings__control {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}
.uwx-settings__control .btn { margin-left: 0; }

/* key/value lists (service info, config options, custom fields).
   Rows are divs (not li) so WHMCS's $('#ssl-*').parent('div') row-hiding works. */
.uwx-kv { list-style: none; margin: 0; padding: 4px 0 8px; }
.uwx-kv .uwx-kv__row { display: flex; gap: 16px; padding: 9px 20px; align-items: baseline; }
.uwx-kv .uwx-kv__row + .uwx-kv__row { border-top: 1px solid var(--uwx-border-soft); }
.uwx-kv__key { flex: 0 0 38%; font-size: 13.5px; font-weight: 700; color: var(--uwx-muted); }
/* Dashboard "Your account" widget: longer labels (e.g. "SSL Certificates")
   get an even 50/50 split so they don't wrap against a narrow value column. */
.uwx-kv--balanced .uwx-kv__key { flex-basis: 50%; }
.uwx-kv__val { font-size: 14.5px; color: var(--uwx-ink); min-width: 0; overflow-wrap: anywhere; }
.uwx-usage__title {
    font-size: 13px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--uwx-muted);
}
/* module output inherits card ground */
.module-client-area { overflow-x: auto; }

/* A module whose entire client-area output is a single status alert (e.g. the
   KVM "not provisioned" notice) carries Bootstrap's default margin-bottom, so
   inside the card body (equal 16px top/bottom padding) the space below the
   alert doubles up (16px padding + 16px margin) and it sits high in the box.
   Drop the trailing margin so the card padding alone frames it symmetrically.
   Scoped to the SOLE child so it never touches a real management console
   (many elements, where inter-element margins are wanted). */
.module-client-area > .alert:only-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   uwhvz7 Manage box — the module emits a classless inline-styled table
   (border-spacing:10px, right-aligned bold 40% label cells). Normalise it to
   the KVM manage box's rendering (Bootstrap table-sm look: left-aligned label
   column, comfortable padding, hairline row borders). !important is needed to
   beat the inline styles. Scoped to the uwhvz7 module class (emitted by
   clientareaproductdetails.tpl from $uwxServiceModule) so other modules'
   bare tables are untouched.
   -------------------------------------------------------------------------- */
.uwx-module--uwhvz7 > table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 0;
}
.uwx-module--uwhvz7 > table:not([class]) td {
    text-align: left !important;
    width: auto !important;
    padding: 7px 12px !important;
    border-top: 1px solid var(--uwx-border-soft);
}
.uwx-module--uwhvz7 > table:not([class]) tr > td:first-child {
    width: 30% !important;
    color: var(--uwx-ink);
}
.uwx-module--uwhvz7 > table:not([class]) tr:first-child > td { border-top: 0; }

/* --------------------------------------------------------------------------
   cPanel "Addons and Extras" purchase panel (module-emitted): split row —
   addon picker left, purchase CTA right — instead of the stacked centred
   select + full-width small button. Class-level button styling (btn-primary
   swap) happens in clientareaproductdetails.tpl's enhancement script.
   -------------------------------------------------------------------------- */
#cPanelExtrasPurchasePanel .card-body { text-align: left; max-width: none; width: 100%; }
#cPanelExtrasPurchasePanel form.form-inline {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
#cPanelExtrasPurchasePanel form.form-inline .custom-select {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
}
#cPanelExtrasPurchasePanel form.form-inline .btn {
    flex: 0 0 auto;
    width: auto;
    margin: 0 !important;
    min-width: 200px;
}
@media (max-width: 575.98px) {
    #cPanelExtrasPurchasePanel form.form-inline .custom-select { flex: 1 1 100%; }
    #cPanelExtrasPurchasePanel form.form-inline .btn { flex: 1 1 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   Upgrade/downgrade — package picker: full-row title, deal row below
   (term/price control left, CTA right); hairline separators, no zebra
   -------------------------------------------------------------------------- */

.uwx-upgradelist { margin-top: 4px; }
.uwx-upgradelist__item { display: block; padding: 18px 0; margin: 0; }
.uwx-upgradelist__item + .uwx-upgradelist__item { border-top: 1px solid var(--uwx-border-soft); }
.uwx-upgradelist__name { font-size: 16px; font-weight: 700; color: var(--uwx-ink); }
.uwx-upgradelist__group { font-size: 13px; color: var(--uwx-muted); margin-top: 1px; }
.uwx-upgradelist__desc { font-size: 13.5px; color: var(--uwx-text); margin-top: 6px; }
.uwx-upgradelist__deal {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 12px;
}
.uwx-upgradelist__deal .custom-select {
    width: auto;
    min-width: 230px;
    flex: 0 1 auto;
}
.uwx-upgradelist__deal .btn { margin-left: auto; min-width: 200px; }
.uwx-upgradelist__price { font-size: 15px; font-weight: 700; color: var(--uwx-ink); }
/* Recommended block: a light highlight card that frames the engine-endorsed
   step up, with a small "Recommended" tag on each row. Green is reserved for
   the CTA/good-news accent (style intent); the tag uses the highlight tint. */
.uwx-upgradelist--recommended {
    background: var(--uwx-green-tint);
    border: 1px solid var(--uwx-green-tint-border);
    border-radius: var(--uwx-radius);
    padding: 4px 16px;
    margin-top: 8px;
}
.uwx-upgradelist--recommended .uwx-upgradelist__name::after {
    content: "Recommended";
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: var(--uwx-radius-pill);
    background: var(--uwx-green);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.uwx-upgrade-more { margin-top: 14px; }
.uwx-upgrade-more__summary {
    cursor: pointer;
    font-weight: 700;
    color: var(--uwx-link);
    padding: 6px 0;
    list-style: revert;
}
.uwx-upgrade-more__summary:hover { color: var(--uwx-blue); text-decoration: underline; }
.uwx-upgrade-more[open] .uwx-upgrade-more__summary { margin-bottom: 4px; }
@media (max-width: 575.98px) {
    .uwx-upgradelist__deal .custom-select { flex: 1 1 100%; min-width: 0; }
    .uwx-upgradelist__deal .btn { margin-left: 0; flex: 1 1 100%; }
}

/* stock sidebars relocated into page rails (registrar/module actions).
   Flex + display:contents flattens the .sidebar wrappers so individual
   panels can be reordered without touching the DOM the module JS binds to. */
.uwx-morepanels {
    margin-top: 4px;
    display: flex;
    flex-direction: column;
}
.uwx-morepanels .sidebar { display: contents; }
/* Fallback Actions card (uwx-morepanels.tpl): fills the rail when a service
   has no visible module actions (e.g. Pending), so the rail never collapses
   to zero height and push the footer up. Hidden when a REAL action panel is
   present — :has() so a supporting browser shows exactly one. A :has()-less
   browser keeps both (benign: an extra "no actions" note). */
.uwx-morepanels:has([menuitemname="Service Details Actions" i]) .uwx-rail-fallback { display: none; }
.uwx-rail-fallback .uwx-card__body { font-size: 14px; }
/* the module Actions panel (cPanel/webmail SSO, password, custom actions)
   is the #1 user task on a service page — it leads the rail */
.uwx-morepanels [menuitemname="Service Details Actions" i] { order: -2; }
/* "Your Info" (Client Details) heads the dashboard's relocated panels ahead
   of anything another hook injects (owner ruling 2026-07-28); genuine action
   panels still beat it via order:-2 above. */
.uwx-morepanels [menuitemname="Client Details" i] { order: -1; }
/* Rail dedupe: scripts tag entries that only repeat the page's own nav —
   positive evidence only (tab-bar matches, exact self-links, or a page
   template proving the replacement rendered) — and panels left with nothing
   else. Hidden, never removed (module JS bindings and capability stay). */
.uwx-morepanels .uwx-dup { display: none !important; }

/* Mobile copy of the secondary sidebar (footer.tpl, restored 2026-08-08 —
   audit console-templates/D-CT-1). It sits BELOW the page content rather than
   in a rail, so it needs separation the rail copy gets from the column gap.
   Everything else — card shell, list metrics, dedupe — is inherited from the
   .uwx-morepanels rules above, which is the point of reusing the class.
   `.d-lg-none` on the wrapper is Bootstrap's own breakpoint (<992px), the same
   one `d-none d-lg-block` uses in header.tpl, so exactly one copy is ever
   visible and nothing is duplicated on screen. */
.uwx-morepanels--mobile { margin-top: 24px; }
/* A wrapper whose only panel folded as a duplicate would otherwise leave the
   24px margin behind as a phantom gap above the footer. */
.uwx-morepanels--mobile:not(:has(.card:not(.uwx-dup))) { margin-top: 0; }

/* Match uwx-card exactly (owner report 2026-08-07: relocated stock panels —
   "Your Info", "Shortcuts" — read as a second visual language beside the
   theme's own rail cards). The .card shell already inherits uwx-card's
   border/radius/shadow/background from the .card rule at ~L596; what set
   these apart was the header divider, the tighter stock list metrics, and
   the header ornaments. Restyled, NOT restructured: the markup is stock
   sidebar.tpl that module JS binds to (house rule 1/2), so this is CSS-only
   and the collapse chevron stays functional — it is only made quiet, since
   hiding it would remove the real collapse capability. */
.uwx-morepanels .sidebar .card { margin-bottom: 20px; }
/* uwx-card__head has no rule beneath it; drop the stock divider and match
   its 14px 20px 0 padding so the label sits at the same optical height. */
.uwx-morepanels .card-sidebar > .card-header {
    border-bottom: 0;
    padding: 14px 20px 0;
}
/* The stock title is already 12px/700/uppercase/muted via the .card-header
   rule at ~L607 — it just needs uwx-card__label's letter-spacing. */
.uwx-morepanels .card-sidebar > .card-header .card-title { letter-spacing: .08em; }
/* Panel-header ornaments: uwx-card headings carry no leading icon, so the
   stock bookmark/user glyph is what makes these panels look foreign. Hide
   the decorative leading icon only — NOT the chevron (capability). */
.uwx-morepanels .card-sidebar > .card-header .card-title > i:not(.card-minimise) { display: none; }
/* Quieten the chevron to the label's muted tone and size; it stays clickable
   and still rotates via .minimised (theme.css ~L10414). */
.uwx-morepanels .card-sidebar > .card-header .card-title > .card-minimise {
    color: var(--uwx-muted);
    font-size: 11px;
    opacity: .65;
}
.uwx-morepanels .card-sidebar > .card-header .card-title > .card-minimise:hover { opacity: 1; }
/* Rows: match .uwx-card__body/.uwx-row metrics (15px, 14px 20px) instead of
   the tighter stock list-group ones. First row needs the separator the
   dropped header divider used to provide. */
/* .sidebar included: the stock-page-polish rule ".sidebar .list-group-item"
   further down (~L1202) is equal-specificity and later, so it would win the
   font-size otherwise. */
.uwx-morepanels .sidebar .list-group-item {
    padding: 14px 20px;
    font-size: 15px;
}
.uwx-morepanels .sidebar .collapsable-card-body > .list-group > .list-group-item:first-child {
    border-top: 1px solid var(--uwx-border-soft);
}

/* Row icon supports the label rather than competing with it: muted, slightly
   smaller, fixed gutter. The stock wrapper is a bare flex with no gap and a
   4px margin, so centre the pair and set real spacing. Colour is deliberately
   NOT changed here — rows keep the theme's default body ink, so a destructive
   entry ("Request Cancellation" in the service Actions panel) never picks up
   an affirmative tint. */
.uwx-morepanels .sidebar .sidebar-menu-item-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.uwx-morepanels .sidebar .sidebar-menu-item-icon-wrapper {
    margin-right: 0;
    flex: 0 0 auto;
    line-height: 1;
}
.uwx-morepanels .sidebar .sidebar-menu-item-icon {
    font-size: 13.5px;
    color: var(--uwx-muted);
    width: auto;
}
/* Badges sit at the row end (stock floats them). */
.uwx-morepanels .sidebar .sidebar-menu-item-badge { margin-left: auto; }

/* --------------------------------------------------------------------------
   Stock-page polish (pages not rebuilt still inherit the refresh)
   -------------------------------------------------------------------------- */

.sidebar .card, .sidebar .panel { border-radius: var(--uwx-radius); }
.sidebar .list-group-item { font-size: 14.5px; }
.sidebar .list-group-item.active {
    background: var(--uwx-green-tint);
    color: var(--uwx-green-dark);
    border-color: var(--uwx-border);
}

.table thead th {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--uwx-muted);
    border-top: 0;
}
.table td { vertical-align: middle; }

.label, .badge { border-radius: 4px; font-weight: 700; }

.alert { border-radius: var(--uwx-radius-sm); }

/* tiles on stock pages that keep them */
.tiles .tile { border-radius: var(--uwx-radius); box-shadow: var(--uwx-shadow); }

/* --------------------------------------------------------------------------
   Footer — slim
   -------------------------------------------------------------------------- */

.footer, #footer {
    background: transparent;
    border-top: 1px solid var(--uwx-border);
    color: var(--uwx-muted);
    font-size: 14px;
    padding: 22px 0 30px;
}
.footer a, #footer a { color: var(--uwx-ink-quiet); }
.footer a:hover, #footer a:hover { color: var(--uwx-ink); }
.footer .copyright { font-size: 13px; color: var(--uwx-faint); }

.uwx-footer {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.uwx-footer__links { gap: 4px; }
.uwx-footer__links .nav-link { padding: 4px 10px 4px 0; font-size: 14px; }
.uwx-footer__locale { font-size: 14px; color: var(--uwx-muted); }
.uwx-footer__locale:hover { color: var(--uwx-ink); }

/* --------------------------------------------------------------------------
   Forms — controls, focus, groups, validation (theme-wide)
   -------------------------------------------------------------------------- */

.form-control,
.custom-select,
select.form-control {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
    color: var(--uwx-text);
}
/* 15px scale for unqualified controls (37px computed height); explicit
   -sm/-lg variants keep their Bootstrap sizing */
.form-control:not(.form-control-sm):not(.form-control-lg),
.custom-select:not(.custom-select-sm):not(.custom-select-lg),
select.form-control:not(.form-control-sm):not(.form-control-lg) {
    font-size: 15px;
    line-height: 1.5;
}
.input-group:not(.input-group-sm):not(.input-group-lg) .input-group-text {
    font-size: 15px;
    line-height: 1.5;
    padding: 6px 12px;
}
.form-control:focus,
.custom-select:focus {
    border-color: var(--uwx-green);
    box-shadow: var(--uwx-focus-ring);
    outline: 0;
}
.form-control::placeholder { color: var(--uwx-faint); }
.form-control:disabled,
.form-control[readonly] { background: var(--uwx-bg); color: var(--uwx-muted); }
.form-control.is-invalid { border-color: var(--uwx-red); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(201, 79, 66, .15); }

.input-group-text {
    background: var(--uwx-bg);
    border: 1px solid var(--uwx-border);
    color: var(--uwx-muted);
    border-radius: var(--uwx-radius-sm);
}
.col-form-label, label { color: var(--uwx-ink-soft); font-weight: 700; font-size: 14.5px; }
.form-check-input, input[type="checkbox"], input[type="radio"] { accent-color: var(--uwx-green); }

/* --------------------------------------------------------------------------
   Semantic buttons — danger / warning / info / link
   -------------------------------------------------------------------------- */

.btn-danger {
    background-color: var(--uwx-red);
    border-color: var(--uwx-red);
    color: #fff;
}
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--uwx-red-dark);
    border-color: var(--uwx-red-dark);
    color: #fff;
}
.btn-warning {
    background-color: var(--uwx-amber-chip);
    border-color: var(--uwx-amber-border);
    color: var(--uwx-amber);
}
.btn-warning:hover, .btn-warning:focus {
    background-color: var(--uwx-amber-tint-hover);
    border-color: var(--uwx-amber-border-mid);
    color: var(--uwx-amber);
}
.btn-info {
    background-color: var(--uwx-ink-soft);
    border-color: var(--uwx-ink-soft);
    color: #fff;
}
.btn-info:hover, .btn-info:focus {
    background-color: var(--uwx-ink);
    border-color: var(--uwx-ink);
    color: #fff;
}
.btn-link { color: var(--uwx-link); font-weight: 700; text-decoration: none; }
.btn-link:hover { color: var(--uwx-blue); text-decoration: underline; }
.btn:disabled, .btn.disabled { opacity: .55; }

/* --------------------------------------------------------------------------
   Chips: legacy labels, badges, status-* classes
   -------------------------------------------------------------------------- */

.label {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    border-radius: 4px;
    padding: 3px 8px;
    text-transform: none;
}
.label-success, .status-active, .status-paid, .status-completed, .status-approved,
.status-delivered, .status-accepted,
.badge-success {
    background: var(--uwx-green-tint) !important;
    color: var(--uwx-green-dark) !important;
}
.label-warning, .status-pending, .status-unpaid, .status-suspended,
.status-pending-transfer, .status-transferred-away, .status-customer-reply,
.status-onhold, .status-payment-pending, .status-inprogress,
.badge-warning {
    background: var(--uwx-amber-chip) !important;
    color: var(--uwx-amber) !important;
}
.label-danger, .label-important, .status-overdue, .status-terminated,
.status-expired, .status-cancelled, .status-fraud, .status-closed,
.status-collections,
.badge-danger {
    background: var(--uwx-red-tint) !important;
    color: var(--uwx-red) !important;
}
.status-open {
    background: var(--uwx-green-tint) !important;
    color: var(--uwx-green-dark) !important;
}
.label-info, .label-default, .status-answered, .status-grace,
.status-redemption, .status-refunded, .badge-info {
    background: var(--uwx-info-tint) !important;
    color: var(--uwx-info-ink) !important;
}

/* remaining Bootstrap-blue accents */
.btn-outline-primary {
    color: var(--uwx-green-dark);
    border-color: var(--uwx-green);
    background: transparent;
}
.btn-outline-primary:hover, .btn-outline-primary:focus,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background: var(--uwx-green);
    border-color: var(--uwx-green);
    color: #fff;
}
.alert-info {
    background: var(--uwx-info-tint);
    border-color: #dde2ec;
    color: #3c4658;
}

/* --------------------------------------------------------------------------
   Tabs, pills, pagination, progress, password strength
   -------------------------------------------------------------------------- */

.nav-tabs { border-bottom: 1px solid var(--uwx-border); }
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--uwx-muted);
    font-weight: 700;
    margin-bottom: -1px;
    background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--uwx-ink); border-color: transparent transparent var(--uwx-border); }
.nav-tabs .nav-link.active {
    color: var(--uwx-ink);
    background: transparent;
    border-color: transparent transparent var(--uwx-green);
}
/* main site sticky-nav language: pill links, active pill goes ink-black */
.nav-pills .nav-link { border-radius: var(--uwx-radius-pill); color: var(--uwx-muted); font-weight: 700; }
.nav-pills .nav-link.active { background: var(--uwx-ink); color: #fff; }

.pagination .page-link, .pagination a, .pagination span {
    color: var(--uwx-text);
    border-color: var(--uwx-border);
}
.pagination .page-item.active .page-link {
    background: var(--uwx-ink);
    border-color: var(--uwx-ink);
    color: #fff;
}
.pagination .page-link:hover { background: var(--uwx-bg); color: var(--uwx-ink); }

.progress { background: var(--uwx-track); border-radius: var(--uwx-radius-pill); height: 10px; }
.progress-bar { background-color: var(--uwx-green); }
.progress-bar.bg-warning, .progress-bar.progress-bar-warning { background-color: var(--uwx-amber-dot) !important; }
.progress-bar.bg-danger, .progress-bar.progress-bar-danger { background-color: var(--uwx-red) !important; }

/* --------------------------------------------------------------------------
   Modals
   -------------------------------------------------------------------------- */

.modal-content {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius);
    box-shadow: 0 16px 48px rgba(20, 23, 28, .18);
}
.modal-header {
    border-bottom: 1px solid var(--uwx-border-soft);
    padding: 14px 20px;
}
.modal-header .modal-title { font-size: 16px; font-weight: 700; color: var(--uwx-ink); }
/* WHMCS-blue modal headers go neutral; danger/warning headers keep their color */
.modal-header.bg-primary {
    background: var(--uwx-card) !important;
    color: var(--uwx-ink) !important;
}
.modal-header.bg-primary .modal-title { color: var(--uwx-ink); }
.modal-header.bg-primary .close { color: var(--uwx-muted); }
.modal-header .close { color: var(--uwx-muted); text-shadow: none; opacity: 1; }
.modal-footer { border-top: 1px solid var(--uwx-border-soft); }

/* --------------------------------------------------------------------------
   DataTables chrome (client lists: services, domains, invoices, tickets…)
   -------------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
    padding: 5px 10px;
}
.dataTables_wrapper .dataTables_filter input:focus {
    border-color: var(--uwx-green);
    box-shadow: var(--uwx-focus-ring);
    outline: 0;
}
.dataTables_wrapper .dataTables_info { color: var(--uwx-muted); font-size: 13.5px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: var(--uwx-ink);
    border-color: var(--uwx-ink);
    color: #fff !important;
    border-radius: var(--uwx-radius-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--uwx-bg);
    border-color: var(--uwx-border);
    color: var(--uwx-ink) !important;
    border-radius: var(--uwx-radius-sm);
}
.table-list tbody tr:hover { background: #fafbfd; }

/* theme.css paints table-list headers with a 4px translucent WHMCS-blue rule
   and corner radii at higher specificity — repaint on the system */
.dataTables_wrapper table.table-list thead th {
    border-bottom: 1px solid var(--uwx-border);
    font-weight: 700;
}
.dataTables_wrapper table.table-list thead th:first-child,
.dataTables_wrapper table.table-list tr:last-child td:first-child { border-radius: 0; }
/* its search input pins a .9rem size that outranks the generic rule */
.dataTables_wrapper .dataTables_filter label .form-control {
    font-size: 14.5px;
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
}

/* file inputs (ticket attachments) keep a stock blue focus halo */
.custom-file-input:focus ~ .custom-file-label {
    border-color: var(--uwx-green);
    box-shadow: var(--uwx-focus-ring);
}

/* --------------------------------------------------------------------------
   Legacy utility palette (tiles, accents, misc twenty-one classes)
   -------------------------------------------------------------------------- */

.bg-color-blue, .bg-color-light-blue { background-color: var(--uwx-ink) !important; }
.bg-color-green, .bg-color-emerald { background-color: var(--uwx-green) !important; }
.bg-color-red, .bg-color-pomegranate { background-color: var(--uwx-red) !important; }
.bg-color-gold, .bg-color-orange { background-color: var(--uwx-amber-dot) !important; }
/* home-panel action buttons pair btn-default with bg-color-*: keep text legible */
.btn[class*="bg-color-"] { color: #fff !important; border-color: transparent; }
.btn[class*="bg-color-"]:hover { opacity: .9; color: #fff !important; }
.card[class*="card-accent-"] { border-top: 2px solid var(--uwx-green); }
.card.card-accent-red, .card.card-accent-pomegranate { border-top-color: var(--uwx-red); }
.card.card-accent-gold, .card.card-accent-orange { border-top-color: var(--uwx-amber-dot); }

.text-primary { color: var(--uwx-link) !important; }
.text-info { color: var(--uwx-ink-soft) !important; }

/* --------------------------------------------------------------------------
   Auth surfaces (login / register / reset / 2FA)
   -------------------------------------------------------------------------- */

.login-form .input-group-text { background: var(--uwx-bg); }
.login-form .btn-primary { min-width: 110px; }
.mw-540 { padding-top: 24px; }
.using-password-strength .progress { margin-top: 6px; }

/* --------------------------------------------------------------------------
   Affiliates / KB / downloads / announcements
   -------------------------------------------------------------------------- */

.affiliates-stats .alert, .affiliate-bal { border-radius: var(--uwx-radius); }
.list-group-item { border-color: var(--uwx-border-soft); }
.list-group-item.active {
    background: var(--uwx-green-tint);
    border-color: var(--uwx-border);
    color: var(--uwx-green-dark);
}

/* --------------------------------------------------------------------------
   Containment: PHP-emitted HTML (home panels, addon output, hook output)
   Covers bare <button>/<select>/<input> that carry no Bootstrap classes.
   -------------------------------------------------------------------------- */

.client-home-cards .card :is(button, input[type="submit"], input[type="button"]):not([class*="btn-"]),
.client-home-addons :is(button, input[type="submit"], input[type="button"]):not([class*="btn-"]),
.client-hook-output :is(button, input[type="submit"], input[type="button"]):not([class*="btn-"]) {
    background: #fff;
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
    color: var(--uwx-text);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    padding: 6px 12px;
}
:is(.client-home-cards .card-body, .client-home-addons, .client-hook-output)
:is(select, textarea, input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"])):not(.form-control):not(.custom-select) {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
    font-size: 15px;
    line-height: 1.5;
    padding: 6px 10px;
    color: var(--uwx-text);
}

/* --------------------------------------------------------------------------
   De-stocking pass: Bootstrap sizes type in rem against the 16px root, so
   anything not explicitly restyled renders on a visibly bigger scale than
   the 15px body — the giveaway that a page is a reskin. Pin the whole
   heading/control scale in px and repaint the remaining BS4-blue widgets.
   -------------------------------------------------------------------------- */

/* global heading scale (stock pages, KB articles, module output).
   The logged-out marketing homepage keeps Bootstrap's large display
   hierarchy — it's an acquisition page, not a console. */
body:not(.uwx-page-homepage) h1, body:not(.uwx-page-homepage) .h1 { font-size: 27px; font-weight: 700; }
body:not(.uwx-page-homepage) h2, body:not(.uwx-page-homepage) .h2 { font-size: 22px; font-weight: 700; }
body:not(.uwx-page-homepage) h3, body:not(.uwx-page-homepage) .h3 { font-size: 19px; font-weight: 700; }
body:not(.uwx-page-homepage) h4, body:not(.uwx-page-homepage) .h4 { font-size: 17px; font-weight: 700; }
body:not(.uwx-page-homepage) h5, body:not(.uwx-page-homepage) .h5 { font-size: 16px; font-weight: 700; }
body:not(.uwx-page-homepage) h6, body:not(.uwx-page-homepage) .h6 { font-size: 14px; font-weight: 700; }
.lead { font-size: 17px; }
legend { font-size: 15px; font-weight: 700; color: var(--uwx-ink); }
hr { border-top-color: var(--uwx-border-soft); }
::selection { background: rgba(40, 167, 69, .18); }

/* card titles that sit in card BODIES (view ticket, KB popular, misc stock
   pages) — section titles, not the 11px header labels. Pricing cards on
   marketing pages keep their display size. */
.card .card-body .card-title:not(.pricing-card-title),
.card > .card-body > h3.card-title:not(.pricing-card-title) {
    font-size: 16px;
    font-weight: 700;
    color: var(--uwx-ink);
}
.kb-category .h5 { font-size: 16px; }

/* legacy page titles some stock/system pages still emit */
.header-lined { border: 0; padding: 0; margin-bottom: 18px; }
.header-lined h1, .header-lined .h1 {
    font-size: 27px;
    font-weight: 700;
    color: var(--uwx-ink);
    border: 0;
    padding: 0;
}

/* dropdown menus everywhere (only the navbar's were branded before) */
.dropdown-menu {
    font-size: 14.5px;
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius-sm);
    box-shadow: var(--uwx-shadow-dropdown);
}
.dropdown-item { padding: 7px 16px; color: var(--uwx-text); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--uwx-bg); color: var(--uwx-ink); }
.dropdown-item.active, .dropdown-item:active {
    background: var(--uwx-green-tint);
    color: var(--uwx-green-dark);
}
.dropdown-divider { border-top-color: var(--uwx-border-soft); }

/* popovers (account notifications flag) + tooltips */
.popover {
    border: 1px solid var(--uwx-border);
    border-radius: var(--uwx-radius);
    box-shadow: 0 12px 32px rgba(20, 23, 28, .14);
    font-size: 14px;
}
.popover-header {
    background: transparent;
    border-bottom: 1px solid var(--uwx-border-soft);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--uwx-muted);
    border-radius: var(--uwx-radius) var(--uwx-radius) 0 0;
}
.popover-body { color: var(--uwx-text); }
.tooltip-inner { background: var(--uwx-ink); border-radius: 6px; font-size: 13px; }

/* BS4 custom checkboxes / radios / switches ship blue */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--uwx-green);
    border-color: var(--uwx-green);
}
.custom-control-input:not(:disabled):active ~ .custom-control-label::before {
    background-color: var(--uwx-green-tint);
    border-color: var(--uwx-green-tint);
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--uwx-focus-ring);
}
.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
    border-color: var(--uwx-green);
}
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--uwx-green);
    border-color: var(--uwx-green);
}
/* disabled-but-on states otherwise keep translucent stock blue */
.custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:disabled:indeterminate ~ .custom-control-label::before,
.custom-radio .custom-control-input:disabled:checked ~ .custom-control-label::before,
.custom-switch .custom-control-input:disabled:checked ~ .custom-control-label::before {
    background-color: rgba(40, 167, 69, .5);
    border-color: transparent;
}

/* alerts on our tints instead of BS4 pastels */
.alert-success { background: var(--uwx-green-tint); border-color: var(--uwx-green-tint-border); color: var(--uwx-green-dark); }
.alert-warning { background: var(--uwx-amber-chip); border-color: var(--uwx-amber-border); color: var(--uwx-amber); }
.alert-danger { background: var(--uwx-red-tint); border-color: #f3d5d1; color: var(--uwx-red); }
/* links inside the tinted variants inherit the tint ink (BS darkens them
   toward the stock palette); scoped so module-emitted alert content with
   its own link styling is left alone elsewhere */
.alert-success a:not(.btn), .alert-warning a:not(.btn), .alert-danger a:not(.btn),
.alert .alert-link { color: inherit; text-decoration: underline; }

/* text + badge utilities still on the BS palette */
.text-success { color: var(--uwx-green-dark) !important; }
.text-danger { color: var(--uwx-red) !important; }
.text-warning { color: var(--uwx-amber) !important; }
.text-muted { color: var(--uwx-muted) !important; }
.badge-primary { background: var(--uwx-ink); color: #fff; }
/* unqualified count badges (sidebar menus, list items) — quiet neutral chip */
.card-sidebar .badge:not([class*="badge-"]),
.list-group-item .badge:not([class*="badge-"]) {
    background: var(--uwx-info-tint);
    color: var(--uwx-info-ink);
}

/* outline button variants beyond -primary */
.btn-outline-secondary, .btn-outline-dark, .btn-outline-info {
    color: var(--uwx-text);
    border-color: var(--uwx-border);
    background: transparent;
}
.btn-outline-secondary:hover, .btn-outline-dark:hover, .btn-outline-info:hover {
    background: var(--uwx-bg);
    border-color: var(--uwx-border-mid);
    color: var(--uwx-ink);
}
.btn-outline-danger { color: var(--uwx-red); border-color: var(--uwx-red); background: transparent; }
.btn-outline-danger:hover { background: var(--uwx-red); border-color: var(--uwx-red); color: #fff; }
/* BS restores its own fills on :active/.active/.show at higher specificity */
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle,
.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show > .btn-outline-dark.dropdown-toggle,
.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show > .btn-outline-info.dropdown-toggle {
    background: var(--uwx-bg);
    border-color: var(--uwx-border-mid);
    color: var(--uwx-ink);
}
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show > .btn-outline-danger.dropdown-toggle {
    background: var(--uwx-red);
    border-color: var(--uwx-red);
    color: #fff;
}

/* table + list-group ground details (dark-variant tables keep their scheme) */
.table:not(.table-dark) { color: var(--uwx-text); }
.table:not(.table-dark) td, .table:not(.table-dark) th { border-top-color: var(--uwx-border-soft); }
.table:not(.table-dark) thead th { border-bottom: 1px solid var(--uwx-border); }
.list-group-item, .list-group-item-action { color: var(--uwx-text); }
.card-footer {
    background: transparent;
    border-top: 1px solid var(--uwx-border-soft);
}
.page-link:focus { box-shadow: var(--uwx-focus-ring); }

/* DataTables chrome labels sat on the 16px root scale */
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    font-size: 14px;
    font-weight: 700;
    color: var(--uwx-muted);
}
.dataTables_wrapper .dataTables_length select { font-size: 14px; }
.dataTables_wrapper .dataTables_filter input { font-size: 14.5px; }

/* bootstrap-switch (profile marketing opt-in etc.) ships BS3 palette.
   Pill the outer frame only and clip; inner pieces stay square so the
   plugin's sliding seams don't scallop. !important beats the plugin's
   own hover/focus/active/disabled variant rules (Codex finding #1c). */
.bootstrap-switch {
    border-color: var(--uwx-border);
    border-radius: var(--uwx-radius-pill);
    overflow: hidden;
}
.bootstrap-switch .bootstrap-switch-container,
.bootstrap-switch .bootstrap-switch-handle-on,
.bootstrap-switch .bootstrap-switch-handle-off,
.bootstrap-switch .bootstrap-switch-label { border-radius: 0 !important; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-info,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-info {
    background: var(--uwx-green) !important;
    border-color: var(--uwx-green) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-danger,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-danger {
    background: var(--uwx-red) !important;
    border-color: var(--uwx-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}
.bootstrap-switch.bootstrap-switch-focused {
    border-color: var(--uwx-green);
    box-shadow: var(--uwx-focus-ring);
}

/* support ticket thread */
.ticket-reply .posted-by { font-size: 13.5px; color: var(--uwx-muted); }
.ticket-reply .message { border-radius: var(--uwx-radius-sm); font-size: 14.5px; }

/* email/phone verification banner — amber notice, not slate grey.
   Compact single line: stock floats a 36px poster icon (md+) and pads the
   button 9px/25px, which sets the whole row tall and leaves dead space
   under the icon and text — keep everything on the text's scale and
   centre the row instead. */
.verification-banner {
    background: var(--uwx-amber-chip);
    border-bottom: 1px solid var(--uwx-amber-border);
    color: var(--uwx-ink-soft);
    padding: 6px 0;
}
.verification-banner .row { align-items: center; }
.verification-banner .text { font-size: 14.5px; padding: 0; display: inline; }
.verification-banner i.fas,
.verification-banner i.fal,
.verification-banner i.far {
    color: var(--uwx-amber-dot);
    float: none;
    font-size: 24px;
    padding: 0 10px 0 0;
    vertical-align: middle;
}
/* the stock 24/36px triangle sizes are right — it was the float + slab
   paddings that made the bar tall, and those stay gone */
@media (min-width: 768px) {
    .verification-banner i.fas,
    .verification-banner i.fal,
    .verification-banner i.far { font-size: 36px; }
}
/* match theme.css's 4-class selector so the slate fill loses */
.verification-banner.email-verification .btn.btn-action,
.verification-banner.email-verification .btn.btn-action:active,
.verification-banner.email-verification .btn.btn-action[disabled]:hover,
.verification-banner .btn.btn-action {
    background: #fff;
    border: 1px solid var(--uwx-amber-border-mid);
    color: var(--uwx-amber);
    font-weight: 700;
    font-size: 14px;
    padding: 5px 16px; /* stock pads 9px/25px at md+, which tallens the bar */
    border-radius: var(--uwx-radius-sm);
}
.verification-banner.email-verification .btn.btn-action:hover,
.verification-banner .btn.btn-action:hover {
    background: var(--uwx-amber-tint-hover);
    border-color: var(--uwx-amber-border-mid);
    color: var(--uwx-amber);
}
.verification-banner .btn.close {
    color: var(--uwx-amber);
    opacity: .6;
    text-shadow: none;
    padding: 2px 8px;
    margin: 0 0 0 10px;
}

/* uwxHiddenNavItems side effect (header.tpl config): with Open Ticket disabled,
   hide the NAV / SIDEBAR menu entry that points at ticket creation — but NOT
   the intentional action buttons on the tickets surfaces (owner call
   2026-07-20). The distinction is concrete in the DOM: menu entries are
   .list-group-item / .nav-link / .dropdown-item; action CTAs always carry .btn
   (the dashboard Tickets-tab "Open a ticket", the panel-header "Open New
   Ticket", the supporttickets.php page-head button). So we scope to the menu
   markup and exempt .btn.
   :not(.uwh-site-header a) still exempts the shared storefront navbar, whose
   Support dropdown deliberately links straight to ticket creation (2026-07-18).
   :not([href*="subject="]) exempts PRE-FILLED action tickets (e.g. the KVM/VPS
   "Upgrade/Downgrade" rail action, addon Cancel/Change) — those are specific,
   context-bound CTAs, not the generic "open a ticket" nav this hides.
   Routes stay reachable by URL regardless (WHMCS admin config, not the theme). */
body.uwx-hide-openticket :is(.list-group-item, .nav-link, .dropdown-item)[href*="submitticket"]:not(.btn):not(.uwh-site-header a):not([href*="subject="]) { display: none !important; }
body.uwx-hide-kb a[href*="knowledgebase"] { display: none !important; }
/* Negative-SSL backstop for the ASYNC path (uwxShowSslWarnings off).
   The templates gate on the SERVER-side status, but whmcs.js:760 re-checks every
   .ssl-state.ssl-sync padlock over AJAX and replaceWith()es it with whatever
   came back — so a "checking…" padlock can become a grey ssl-inactive one AFTER
   render, behind the template's back. The lists wrap those triggers in .d-none
   so the replacement inherits the hiding, but that relies on the wrapper
   surviving; this makes it structural instead.
   Scoped to body.uwx-hide-ssl-negatives (header.tpl, set from the same
   uwxShowSslWarnings value) so flipping the switch to Shown restores stock
   behaviour exactly. Not display:none on the img itself in the template,
   because the resync JS needs it in the DOM to read data-type/data-domain and
   to keep the WHMCS certificate cache warm (house rule 2).
   ssl-inactive only — active/positive certificate indicators are never hidden. */
body.uwx-hide-ssl-negatives .ssl-state.ssl-inactive { display: none !important; }
/* Suppress the stock Sitejet Builder surfaces in the client area.
   Originally (2026-07-31) this hid only the "Upgrade to Sitejet Builder" upsell
   card, on the ground that site building is already part of our service. WIDENED
   2026-08-27 (owner) to hide EVERY Sitejet surface, because the client-area
   builder does not work on this install: Sitejet is not configured in WHMCS
   (tblconfiguration carries zero sitejet settings), so the "Edit Website" SSO
   button calls get_sso_link against an unconfigured endpoint and errors. A
   button that renders and then fails is worse than absent — that was the owner's
   original complaint. So the ACTIVE panel is now hidden too, reversing the
   earlier "hide the offer, keep the product" stance: there is no working product
   to keep (house rule 1 is not engaged — no reachable capability is lost).
   NB "active" here means isSitejetActive() is true, which is a WHM-SERVER package
   match (SitejetServerAdapter::hasSitejetForPackage on tblservers_remote), NOT a
   WHMCS product/addon — so it renders on real services today even with zero
   Sitejet catalogue rows. The key name is still hide_sitejet_upsell (widened in
   place, no rename) to avoid a migration + contract bump for a semantics change.

   CSS is the lever for the module-rendered surfaces (upsell + active panel), per
   house rule 4 and by elimination: cpanel_ClientArea() output is rendered to an
   HTML STRING at clientarea.php:1020 before ClientAreaPage fires, so no hook can
   reach it, and a theme override of the ~700-line stock overview.tpl is rejected
   as upgrade drift (house rule 8). The dashboard panel and the quick-action
   dropdown ARE hook-reachable and are handled in unlimited_next.php instead; the
   sidebar action is hidden by the [data-identifier] rule below.

   All scoped to body.uwx-hide-sitejet-upsell (header.tpl, from the admin addon's
   hide_sitejet_upsell switch, default ON). NB the cart's cart-page.css keeps its
   own UNSCOPED copy of the two *upsell* ids: that sheet loads only in cart/login
   mode, where no service page exists, so it does not defeat this switch and is
   left as-is. */

/* (1) Upsell offer cards. Both ids: stock reuses #cPanelGetSitejet across the
   addon-offer and product-upgrade branches (overview.tpl:143/:162); plesk mirrors
   as #pleskGetSitejet. */
body.uwx-hide-sitejet-upsell #cPanelGetSitejet,
body.uwx-hide-sitejet-upsell #pleskGetSitejet { display: none; }

/* (2) Active Sitejet panel on the service page. The panel wrapper has NO
   Sitejet-specific id — its id is #cPanelPackagePanel / #PleskPackagePanel.
   cPanel REUSES #cPanelPackagePanel for the ordinary Package/Domain panel on
   non-Sitejet services (overview.tpl:7 vs :91), so selecting that id blindly
   would delete the package panel from every non-Sitejet service. (Plesk's
   non-Sitejet panel has no id, so :has() is strictly safer there.)
   We match the wrapper ONLY when it contains #sitejetPublishPreview — the
   Sitejet preview image, which is directly under {if $isSitejetActive}
   (cpanel overview.tpl:15 / plesk :18), ABOVE the {if $isSitejetSsoAvailable}
   sub-gate. Anchoring on #sitejetEditBtn was WRONG (Luna-max A, 2026-08-27):
   that button is only emitted when the client also holds the `productsso`
   permission (isSitejetSsoAvailable = isSitejetActive && hasPermission), so a
   permission-less client's active Plesk panel would have leaked past the rule.
   #sitejetPublishPreview is present for the whole active panel regardless of
   permission and is Sitejet-specific, so it cannot match the ordinary panel.
   NB cPanel's #cPanelPackagePanel is ALSO hidden unconditionally at line 138
   (the theme's cPanel reskin — the panel duplicates the pagehead), so this rule
   is a belt on the cPanel side and the sole lever on the Plesk side. Hiding the
   whole wrapper (not inner ids) avoids the empty-titled-card remnant. */
body.uwx-hide-sitejet-upsell #cPanelPackagePanel:has(#sitejetPublishPreview),
body.uwx-hide-sitejet-upsell #PleskPackagePanel:has(#sitejetPublishPreview) { display: none; }

/* (3) Dashboard "Sitejet Builder" panel — belt to unlimited_next.php's
   removeChild('Sitejet Builder'). The hook is the primary hide; this closes the
   hook's fail-open (an upstream rename would let the panel reappear at the grid's
   order-1 lead slot). The panel carries a stable id, core clientarea.php:204. */
body.uwx-hide-sitejet-upsell #sitejetPromoPanel { display: none; }

/* (4) Service-page sidebar action "Edit with Sitejet Builder". Rendered by
   sidebar.tpl with data-identifier="sitejet" (the module CustomAction identifier,
   cpanel.php:2158 / plesk.php:1034). Not reachable via hidden_sidebar_items (that
   is a closed operator enum keyed by menu NAME); one switch governs all Sitejet
   surfaces, so it is hidden here by the same body class. */
body.uwx-hide-sitejet-upsell .list-group-item-action[data-identifier="sitejet"] { display: none; }
/* Stock markup gives the resend-button column no xs order, so it renders
   BEFORE the message on phones; put it last (message + close on the first
   row, full-width button below). */
@media (max-width: 575.98px) {
    .verification-banner .col-12.col-sm-4 { order: 4; }
}
/* From sm up, size the button column to its content so the label never
   ellipsizes (stock col-md-3 truncates "Resend Verification Email"), and
   let the message column shrink so button + close never wrap off the row. */
@media (min-width: 576px) {
    .verification-banner .col-12.col-sm-4 {
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        margin-left: auto;
    }
    .verification-banner .col-10.col-sm-7 {
        flex: 1 1 0;
        width: auto;
        max-width: none;
    }
}

/* DataTables length <select> ships a fixed width that clips its value */
.dataTables_wrapper .dataTables_length select {
    width: auto;
    min-width: 64px;
    height: 33px;
}

/* --------------------------------------------------------------------------
   List pages — services / domains / invoices / tickets
   Desktop: dominant identity column + trailing action. Mobile: CSS card rows
   keyed on data-label (DataTables responsive is off for these tables).
   -------------------------------------------------------------------------- */

/* With DataTables responsive off, wide tables scroll inside their own
   container at intermediate widths (col-lg-8 beside the sidebar). */
.uwx-listpage .table-container { overflow-x: auto; }
.uwx-listpage .table-list td { vertical-align: middle; }
.uwx-cell-id { overflow-wrap: break-word; }
.uwx-cell-id__name {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--uwx-ink);
}
.uwx-cell-id__name:hover { color: var(--uwx-green-dark); text-decoration: none; }
.uwx-cell-id__meta {
    display: block;
    font-size: 13.5px;
    color: var(--uwx-muted);
    margin-top: 1px;
}
.uwx-cell-id__meta a { color: var(--uwx-muted); }
.uwx-cell-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.uwx-cell-action .btn { white-space: nowrap; }

/* Empty states — title, one sentence, at most two actions */
.uwx-empty-state { padding: 26px 8px; text-align: center; }
.uwx-empty-state__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--uwx-ink);
    margin: 0 0 4px;
}
.uwx-empty-state__text { font-size: 14.5px; color: var(--uwx-muted); margin: 0 0 14px; }
.uwx-empty-state__actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.uwx-empty-state__link { font-size: 14px; font-weight: 700; }
.table-list td.dataTables_empty { cursor: default; }

@media (max-width: 767.98px) {
    .uwx-listpage .table-list thead { display: none; }
    .uwx-listpage .table-list tbody tr {
        display: block;
        background: var(--uwx-card);
        border: 1px solid var(--uwx-border);
        border-radius: var(--uwx-radius-sm);
        margin-bottom: 10px;
        padding: 10px 14px;
    }
    .uwx-listpage .table-list tbody td {
        display: flex;
        justify-content: flex-start;
        align-items: baseline;
        gap: 12px;
        border: 0;
        padding: 5px 0;
        text-align: left !important;
    }
    .uwx-listpage .table-list tbody td[data-label]::before {
        content: attr(data-label);
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: var(--uwx-faint);
        flex: none;
        /* label left, everything else grouped right — cells with two value
           nodes (amount + cycle) must not scatter across the row */
        margin-right: auto;
    }
    .uwx-listpage .table-list tbody td.uwx-cell-id { display: block; padding: 2px 0 6px; }
    .uwx-listpage .uwx-cell-id__name { font-size: 16px; }
    .uwx-listpage .table-list tbody td.uwx-cell-icon,
    .uwx-listpage .table-list tbody td.uwx-cell-sec { display: none; }
    .uwx-listpage .table-list tbody td.uwx-cell-check {
        display: block;
        float: right;
        padding: 2px 0;
    }
    .uwx-listpage .table-list tbody td.uwx-cell-action { display: block; padding-top: 8px; }
    .uwx-listpage .uwx-cell-action .btn {
        display: block;
        width: 100%;
        padding-top: 9px;
        padding-bottom: 9px;
    }
    .uwx-listpage .table-list tbody td.dataTables_empty { display: block; }
    .uwx-listpage .uwx-pagehead .btn { width: 100%; }
    .uwx-listpage .uwx-pagehead__actions { width: 100%; }
    /* Bulk-action group (domains) must wrap instead of overflowing the viewport */
    .uwx-listpage .btn-group { display: flex; flex-wrap: wrap; }
    .uwx-listpage .btn-group .btn { flex: 1 1 auto; }
}

/* --------------------------------------------------------------------------
   Module output containment — wraps $tplOverviewTabOutput until per-module
   template overrides land (plan item 3). Contain, don't reorder.
   -------------------------------------------------------------------------- */

/* Malformed module overview HTML (see clientareaproductdetails.tpl
   .uwx-module-row) can eject trailing nodes — e.g. WHMCS's unbranded
   "Powered by" <p> — out of the content column into the flex .row, where they
   float beside the columns (the reported "Powered by in the wrong place").
   CSS can't reparent a parse-time break, so force any DIRECT child that is NOT
   a Bootstrap column full-width and last: the stray node drops cleanly below
   the columns; real columns (content + .uwx-rail) are untouched. A bare
   <script> child has no box, so this is harmless for it. */
.uwx-module-row > :not([class*="col-"]) {
    flex: 0 0 100%;
    max-width: 100%;
    order: 99;
}
.uwx-module-overview { min-width: 0; overflow-wrap: anywhere; }
.uwx-module-overview img { max-width: 100%; height: auto; }
.uwx-module-overview .card { margin-bottom: 20px; }
.uwx-module-overview .table-responsive { overflow-x: auto; }
.uwx-module-overview table { max-width: 100%; }
.uwx-module-overview pre { overflow-x: auto; max-width: 100%; }
.uwx-module-overview iframe { max-width: 100%; }

/* --------------------------------------------------------------------------
   Accessibility & motion
   -------------------------------------------------------------------------- */

/* Skip link — first tab stop; the marketing bar adds 8 stops before the
   client nav, and rails are visually left but follow content in tab order
   (deliberate: content-first focus), so keyboard users get a shortcut. */
.uwx-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 3000;
    background: #fff;
    color: var(--uwx-ink);
    font-weight: 700;
    font-size: 15px;
    padding: 10px 18px;
    border-radius: 0 0 var(--uwx-radius-sm) 0;
    box-shadow: 0 8px 24px rgba(20, 23, 28, .18);
}
.uwx-skip:focus { left: 0; }

a:focus-visible {
    outline: 2px solid var(--uwx-green);
    outline-offset: 2px;
    border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}

@media print {
    /* display:contents on rail sidebars would otherwise beat twenty-one's
       print-hide of .sidebar */
    .uwx-morepanels .sidebar { display: none; }
}

/* ==========================================================================
   store/order.tpl — the "Configure Product" step (RESKIN 2026-07-30)

   This page is the DESTINATION of every Engine 1/Engine 2 cart card click:
   cart.php?a=add&pid=N redirects to the product's store route (cart.php:596-608).
   It shipped byte-identical to stock twenty-one, so a customer left the themed
   cart and landed somewhere that looked unrelated. It is NOT the cart order form
   — that is a separate template set with its own CSS scoped to
   #order-standard_cart — so this needs its own scope and cannot inherit any of it.

   Approach is CSS-first (house rule 4): the template gained a .uwx-store-order
   wrapper and two .uwx-store-card containers, nothing else structural. Every
   selector the inline JS uses is untouched (house rule 2) — see the comment at
   the head of order.tpl for the full list.

   Visual target = unlimited-next-cart/configureproduct.tpl: white cards on the
   #f4f6f9 ground, 12px radius, 1px #e8eaef border, soft shadow, bold section
   headings, green primary CTA. Tokens come from :root above, so a token change
   propagates here too.
   ========================================================================== */
.uwx-store-order {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}
/* Stock store.css zeroes section#main-body margin/padding; the cart pages get
   their breathing room from the page shell, so restore it for this route only. */
.uwx-store-order .store-order-container {
    margin-bottom: 0 !important;
}
.uwx-store-card {
    background: var(--uwx-card);
    border: 1px solid var(--uwx-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}
.uwx-store-order .store-order-container p {
    color: var(--uwx-muted);
    margin-bottom: 0;
}
/* "Choose Payment Term" / "Choose Domain" — match the cart's section headings
   (bold, 15px, ink) rather than stock's larger light h4. */
.uwx-store-order .payment-term h4,
.uwx-store-order__legend {
    font-size: 15px;
    font-weight: 700;
    color: var(--uwx-text);
    margin: 0 0 .6rem;
}
.uwx-store-order .form-control,
.uwx-store-order .custom-select {
    border: 1px solid var(--uwx-border);
    border-radius: 8px;
    color: var(--uwx-text);
    box-shadow: none;
}
.uwx-store-order .form-control:focus,
.uwx-store-order .custom-select:focus {
    border-color: var(--uwx-green);
    box-shadow: 0 0 0 3px var(--uwx-green-tint);
}

/* TILES — billing cycle and domain choice. Deliberately the SAME language as the
   cart order form (unlimited-next-cart/css/custom.css L1-13 plus the
   .uwx-cycle-price rule): rounded-xxl bordered cards in a nav-pills row, grey
   wash + 2px ring when active, price line in bold. Reproduced here rather than
   shared because the cart's rules are all scoped to #order-standard_cart, an id
   this store route never emits.

   The raw radios are hidden — the whole tile is the click target via
   .stretched-link. The cart hides them through icheck's .iradio_square-blue skin,
   which this page does not load, so they are hidden directly here. The tile's
   anchor stays focusable and Enter activates it, so there is a keyboard path to
   every option. */
.uwx-store-order #billingcycle .nav-item {
    background: #fff;
    /* rounded-xxl = 15px (--uwx-radius). Bootstrap's .nav-pills would otherwise
       leave the pill radius on the <li>, which reads as a circular/lozenge tile
       rather than the cart's rounded card. */
    border-radius: var(--uwx-radius) !important;
    border-color: var(--uwx-border) !important;
    cursor: pointer;
}
.uwx-store-order #billingcycle .nav-item:hover {
    background: #f8f9fa;
}
.uwx-store-order #billingcycle .nav-item.active,
.uwx-store-order #billingcycle .nav-item.active:hover {
    box-shadow: 0 0 0 2px #dee2e6;
    background: #f8f9fa;
}
.uwx-store-order #billingcycle input[type="radio"] {
    display: none !important;
}
/* Bootstrap/theme paint .nav-link.active dark (var(--uwx-ink) for real nav pills,
   stock's #369 underneath). Inside a tile the <li> carries the selected look, so
   neutralise the anchor. */
.uwx-store-order #billingcycle .nav-link,
.uwx-store-order #billingcycle .nav-link.active,
.uwx-store-order #billingcycle .show > .nav-link {
    background: none !important;
    background-color: transparent !important;
    color: inherit !important;
    border-radius: 0;
    box-shadow: none;
}
.uwx-store-order #billingcycle .nav-item .uwx-cycle-price {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: .25rem;
}
/* Product name bar — the cart renders the title on a grey band inside the card
   (.product-info > .product-title), which is the "header is different" gap. */
.uwx-store-order .product-info {
    background: var(--uwx-bg);
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-top: .75rem;
}
.uwx-store-order .product-title { margin: 0; }
/* "Best Value" pill on the annual tile — same offset as the cart's inline style. */
.uwx-store-order .uwx-store-order__bestvalue {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%, -33%);
}
/* Domain choice stays a NAV-TAB strip (owner ruling 2026-07-30 — the tile
   treatment was reverted here; only the billing cycle uses tiles). Flattened to sit
   inside our card: no connector graphic, no nested white panel, green underline on
   the active tab which is the theme's "current" signal elsewhere. */
.uwx-store-order .responsive-tabs-sm-connector.store { display: none; }
.uwx-store-order .store-domain-tabs {
    border-bottom: 1px solid var(--uwx-border);
    margin-bottom: 0;
    flex-wrap: wrap;
}
.uwx-store-order .store-domain-tabs .nav-link {
    padding: .6rem 1rem !important;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--uwx-muted);
    font-weight: 700;
    font-size: 14px;
    background: none !important;
}
.uwx-store-order .store-domain-tabs .nav-link:hover {
    color: var(--uwx-text);
    border-bottom-color: var(--uwx-border);
}
.uwx-store-order .store-domain-tabs .nav-item.active > .nav-link,
.uwx-store-order .store-domain-tabs .nav-link.active {
    color: var(--uwx-text) !important;
    border-bottom-color: var(--uwx-green);
    background: none !important;
}
.uwx-store-order .store-domain-tab-content {
    background: none !important;
    border: 0;
    padding: 1rem 0 0;
}
/* Eligibility / validation text: green when OK, muted otherwise. Stock relies on
   .ok being added by the JS — keep that contract, just retoken the colours. */
.uwx-store-order .domain-validation {
    display: inline-block;
    padding-top: .5rem;
    font-size: 14px;
    font-weight: 700;
    color: var(--uwx-muted);
}
.uwx-store-order .domain-validation.ok { color: var(--uwx-green-dark); }

/* Action row: Back on the left, Continue Shopping + Checkout on the right.
   .btn-primary IS green in this theme (retokened at ~L168), so Checkout needs no
   colour here — unlike the cart order form, which has its own stylesheet and
   requires .btn-success. */
.uwx-store-order .uwx-store-actions {
    align-items: center;
    row-gap: .6rem;
}
/* Match the cart's action-row metrics: its Continue button is btn-lg
   (18px/8px per the theme's .btn-lg rule), not the 14px secondary size. */
.uwx-store-order .uwx-store-actions .btn { font-weight: 700; }
/* Phones: stack the action row and let the buttons fill the width, matching the
   .uwx-row__actions behaviour in the client area and the cart chip CTA. */
@media (max-width: 575.98px) {
    .uwx-store-order .uwx-store-actions > div { width: 100%; text-align: left !important; }
    .uwx-store-order .uwx-store-actions .btn { display: block; width: 100%; }
    .uwx-store-order .uwx-store-actions .btn + .btn { margin-top: .5rem; }
    .uwx-store-order .uwx-store-actions__back { margin-bottom: .5rem; }
    .uwx-store-order .store-domain-tabs .nav-link { padding: .55rem .75rem !important; }
}

/* MarketConnect upsell card at the foot (renders only when $upsellProduct &&
   $promotion). Bring it onto the same card language instead of stock's p-5 slab. */
.uwx-store-order .store-promoted-product {
    padding: 1.25rem 1.5rem !important;
}
.uwx-store-order .card {
    border: 1px solid var(--uwx-border);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
    margin-top: 1rem !important;
}

/* Masquerade pill in the always-visible toolbar below 1200px (audit
   console-templates/D-CT-4). Icon-only there — the label lives in the tooltip
   and the sr-only span — so the bar keeps one line. It inherits the red pill
   chrome from .uwx-nav .btn-return-to-admin above; only the spacing differs. */
.uwx-nav .uwx-nav__masq-compact {
    margin-left: auto;
    margin-right: 8px;
    align-self: center;
    flex: 0 0 auto;
}

/* Active-client indicator restored to the navbar (audit
   console-templates/D-CT-3) — stock's .active-client group named the account
   you are acting on, and the reskin dropped it. Sits beside Switch Account,
   the control it explains.

   The name is the load-bearing part, so it stays at every width while the
   "Logged in as:" label hides below md (stock's own rule, in the markup). A
   company name can be long and this bar is already crowded, so the name is
   capped and ellipsised rather than allowed to wrap the toolbar onto a second
   line — the full value stays reachable via the link target and the title
   attribute. */
.uwx-nav .uwx-nav__client {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 260px;
    min-width: 0;
    flex: 0 1 auto;
    color: var(--uwx-text);
    font-weight: 500;
}
.uwx-nav .uwx-nav__client-label {
    color: var(--uwx-muted);
    font-weight: 400;
    flex: 0 0 auto;
}
.uwx-nav .uwx-nav__client-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
@media (max-width: 575.98px) {
    /* Phone: the toolbar carries the logo, cart, account menu and possibly the
       masquerade pill. Cap harder so the name shortens instead of pushing a
       control off the row. */
    .uwx-nav .uwx-nav__client {
        max-width: 120px;
    }
}