/* ==========================================================================
   unlimited-neo — neobrutalism.com design language, ported to plain CSS.
   ==========================================================================

   Source of truth: the component recipes documented at neobrutalism.com
   (Base UI variants of Button / Card / Badge / Alert / Input), translated
   from their Tailwind v4 class strings into plain CSS so a WHMCS theme —
   which must stay jQuery + Bootstrap 4 — can wear the same look.

   THE RECIPE, in four rules. Every neo primitive below is built from them.

     1. border: 2px solid var(--neo-border)          (border-2 border-black)
     2. box-shadow: var(--neo-shadow)                (shadow-md, hard offset)
     3. :hover  → translate(-2px,-2px), shadow lg     (hover:-translate-x-0.5
        hover:-translate-y-0.5 hover:shadow-lg)
     4. :active → translate(2px,2px), shadow none     (active:translate-x-1
        active:translate-y-1 active:shadow-none)

   Colours follow the neobrutalism default palette: a near-black ink line, a
   cream paper background, and saturated flat fills (blue, pink, green,
   yellow, red, purple) used as *solids*, never gradients.

   Bootstrap 4 is loaded BEFORE this file (theme.min.css), so these rules sit
   late in the cascade. Specificity is kept low on purpose — one class deep
   for primitives — and !important is reserved for the handful of Bootstrap
   behaviours that must be overridden structurally (radius, soft shadows,
   focus halos).
*/

:root {
    /* core palette — neobrutalism defaults */
    --neo-bg: #f3f1e8;              /* paper cream */
    --neo-surface: #ffffff;
    --neo-border: #141414;          /* near-black ink */
    --neo-ink: #141414;
    --neo-muted: #6b6960;

    --neo-primary: #4d7cff;         /* blue */
    --neo-primary-ink: #141414;
    --neo-secondary: #ffe14d;       /* yellow */
    --neo-success: #59d98c;         /* green */
    --neo-danger: #ff5c5c;          /* red */
    --neo-warning: #ffb84d;         /* orange */
    --neo-info: #7ee0ff;            /* cyan */
    --neo-purple: #b794ff;

    /* hard offset shadows — the signature. sizes are the distance the
       element lifts on hover; md is the resting state. */
    --neo-shadow-sm: 3px 3px 0 var(--neo-border);
    --neo-shadow-md: 5px 5px 0 var(--neo-border);
    --neo-shadow-lg: 8px 8px 0 var(--neo-border);
    --neo-shadow-none: none;

    /* type — the system font stack with a mono fallback for numbers/labels,
       the way the source uses font-head for display weight */
    --neo-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
                "Helvetica Neue", Arial, sans-serif;
    --neo-font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo,
                     Consolas, monospace;

    /* geometry */
    --neo-radius: 0;                /* sharp corners by default */
    --neo-radius-sm: 4px;
    --neo-radius-lg: 12px;
    --neo-border-width: 2px;
    --neo-spacing: 1rem;
}

/* ------------------------------------------------------------- application */

html { scroll-behavior: smooth; }

body {
    font-family: var(--neo-font) !important;
    font-weight: 500;
    line-height: 1.6;
    font-size: 16px;
    color: var(--neo-ink);
    background-color: var(--neo-bg);
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    height: auto !important;
}

/* Keep the page shell stable: the main section fills spare viewport space,
   while long pages naturally grow and push the footer below their content. */
#main-body {
    flex: 0 0 auto !important;
    width: 100%;
    min-height: 0;
    height: auto !important;
    overflow: visible;
}

/* neobrutalism reads better with uppercase, tight, mono-tinged labels */
.neo-label {
    font-family: var(--neo-font-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--neo-muted);
}

/* ------------------------------------------------------------------ links */

a, a:hover, .btn-link {
    color: var(--neo-ink);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

a:hover { text-decoration: underline; }

/* ======================================================================
   1. PRIMITIVES
   ====================================================================== */

/* ---- buttons ------------------------------------------------------------- */

/* The recipe on .btn: thick border, hard shadow, lift on hover, press into
   the shadow on active. Bootstrap's .btn gives us padding and font-size; we
   replace its soft radius and gradient shadow entirely. */
.neo-btn,
.btn {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-md) !important;
    background-color: var(--neo-surface);
    color: var(--neo-ink);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    transition: transform .15s ease, box-shadow .15s ease,
                background-color .15s ease;
}

.neo-btn:hover,
.btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow-lg) !important;
}

.neo-btn:active,
.btn:active,
.neo-btn.active,
.btn.active {
    transform: translate(2px, 2px) !important;
    box-shadow: var(--neo-shadow-none) !important;
}

.neo-btn:disabled,
.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: var(--neo-shadow-sm) !important;
}

/* variants — flat saturated fills, ink text, same shadow for all */
.neo-btn-primary,
.btn-primary {
    background-color: var(--neo-primary) !important;
    color: var(--neo-primary-ink) !important;
}
.neo-btn-primary:hover,
.btn-primary:hover { background-color: #3d68e0 !important; }

.neo-btn-secondary,
.btn-secondary {
    background-color: var(--neo-secondary) !important;
    color: var(--neo-ink) !important;
}
.neo-btn-secondary:hover,
.btn-secondary:hover { background-color: #f2cf2b !important; }

.neo-btn-success,
.btn-success {
    background-color: var(--neo-success) !important;
    color: var(--neo-ink) !important;
}
.neo-btn-success:hover,
.btn-success:hover { background-color: #3ec577 !important; }

.neo-btn-danger,
.btn-danger {
    background-color: var(--neo-danger) !important;
    color: #ffffff !important;
}
.neo-btn-danger:hover,
.btn-danger:hover { background-color: #e84545 !important; }

.neo-btn-warning,
.btn-warning {
    background-color: var(--neo-warning) !important;
    color: var(--neo-ink) !important;
}
.neo-btn-warning:hover,
.btn-warning:hover { background-color: #f0a431 !important; }

.neo-btn-info,
.btn-info {
    background-color: var(--neo-info) !important;
    color: var(--neo-ink) !important;
}
.neo-btn-info:hover,
.btn-info:hover { background-color: #5fd4f2 !important; }

/* outline: transparent fill, the border does the work */
.neo-btn-outline-primary,
.btn-outline-primary {
    background-color: transparent !important;
    color: var(--neo-ink) !important;
}
.neo-btn-outline-primary:hover,
.btn-outline-primary:hover {
    background-color: var(--neo-primary) !important;
    color: var(--neo-ink) !important;
}

.neo-btn-outline-danger,
.btn-outline-danger {
    background-color: transparent !important;
    color: var(--neo-ink) !important;
}
.neo-btn-outline-danger:hover,
.btn-outline-danger:hover {
    background-color: var(--neo-danger) !important;
    color: #fff !important;
}

.btn-link,
.btn-link:hover {
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 700;
}

/* sizes — the source keeps padding tight and labels uppercase */
.btn-lg {
    font-size: 1rem;
    padding: .7rem 1.5rem;
}
.btn-sm {
    font-size: .75rem;
    padding: .35rem .8rem;
}

/* ---- cards --------------------------------------------------------------- */

/* Source Card: rounded border-2 bg-card shadow-md, footer gets a top border
   and a muted fill. WHMCS markup is not composed of Card parts, so the port
   targets the real structure: .card > .card-header/.card-body/.card-footer. */
.card,
.neo-card {
    background-color: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-md);
    margin-bottom: 1.4rem;
    overflow: hidden;
}

.card .card-header {
    background-color: var(--neo-bg) !important;
    border-bottom: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: 0 !important;
    padding: .85rem 1.1rem;
}

.card .card-header h3.card-title,
.card .card-header .card-title {
    font-weight: 800 !important;
    font-size: 1rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.card .card-body { padding: 1.1rem; }

.card .card-footer {
    background-color: var(--neo-bg) !important;
    border-top: var(--neo-border-width) solid var(--neo-border) !important;
    padding: .85rem 1.1rem;
}

/* hover-lift cards are opt-in: .neo-card--lift. used on link tiles and
   kb/announcement cards where the whole surface is a destination. */
.neo-card--lift {
    transition: transform .15s ease, box-shadow .15s ease;
}
.neo-card--lift:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow-lg);
}

/* ---- alert --------------------------------------------------------------- */

.alert,
.neo-alert {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-sm);
    background-color: var(--neo-surface) !important;
    color: var(--neo-ink) !important;
    font-weight: 600;
    padding: .85rem 1.1rem;
    margin-bottom: 1.2rem;
}

.alert.alert-success { background-color: var(--neo-success) !important; }
.alert.alert-danger,
.alert.alert-error { background-color: var(--neo-danger) !important; color: #fff !important; }
.alert.alert-warning { background-color: var(--neo-warning) !important; }
.alert.alert-info { background-color: var(--neo-info) !important; }

.alert a { color: inherit; }

/* ---- badge ---------------------------------------------------------------- */

.badge,
.neo-badge {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius-sm) !important;
    background-color: var(--neo-secondary) !important;
    color: var(--neo-ink) !important;
    font-weight: 800;
    font-size: .7rem;
    padding: .25rem .45rem;
    box-shadow: 2px 2px 0 var(--neo-border);
}

.badge.badge-pill {
    border-radius: 999px !important;
}

/* ---- forms ---------------------------------------------------------------- */

/* Source Input: border-2 border-black bg-background shadow-none, focus ring
   is a hard 2px outline, not a soft glow. Bootstrap 4's form-control ships
   a subtle border + radius + glow; all three go. */
.form-control,
.neo-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
select.form-control,
textarea.form-control,
textarea {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: none !important;
    background-color: var(--neo-surface) !important;
    color: var(--neo-ink) !important;
    padding: .6rem .75rem;
    font-weight: 500;
}

.form-control:focus,
.neo-input:focus,
.form-control:focus-visible,
input:focus,
select:focus,
textarea:focus {
    outline: 3px solid var(--neo-primary) !important;
    outline-offset: 1px !important;
    box-shadow: 4px 4px 0 var(--neo-border) !important;
    border-color: var(--neo-border) !important;
}

.form-control::placeholder { color: var(--neo-muted); }

/* invalid state: red border + hard red shadow */
.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--neo-danger) !important;
    box-shadow: 3px 3px 0 rgba(255, 92, 92, .5) !important;
}

.invalid-feedback { font-weight: 700; color: var(--neo-danger); }

/* input groups: the prepend/append reads as one neo box, so the inner
   button keeps its border and the group itself stays flat */
.input-group > .form-control,
.input-group > .custom-select,
.input-group > .input-group-prepend > .input-group-text,
.input-group > .input-group-append > .input-group-text {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--neo-shadow-md);
}

.input-group > .form-control:focus {
    box-shadow: var(--neo-shadow-md) !important;
}

.input-group .btn {
    box-shadow: var(--neo-shadow-none) !important;
    border-radius: 0 !important;
}

/* labels: mono caps labels, the source's field treatment */
label,
.form-control-label,
.col-form-label {
    font-family: var(--neo-font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neo-muted);
    margin-bottom: .35rem;
}

/* checkboxes / radios: keep them bordered and square */
.form-check-input {
    width: 1.1rem;
    height: 1.1rem;
    border: var(--neo-border-width) solid var(--neo-border) !important;
    box-shadow: 2px 2px 0 var(--neo-border);
    margin-top: .15rem;
}
.form-check-input:checked {
    background-color: var(--neo-primary) !important;
}
.form-check-label {
    font-family: var(--neo-font);
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0;
    color: var(--neo-ink);
    font-weight: 600;
}

/* ---- table ---------------------------------------------------------------- */

.table {
    border: var(--neo-border-width) solid var(--neo-border);
    background-color: var(--neo-surface);
}

.table thead th {
    border-bottom: var(--neo-border-width) solid var(--neo-border) !important;
    background-color: var(--neo-bg);
    font-family: var(--neo-font-mono);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--neo-muted);
    white-space: nowrap;
}

.table td,
.table th {
    border-top: 1px solid #ddd9cd !important;
    padding: .7rem .85rem;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--neo-bg);
}

.table-hover tbody tr:hover {
    background-color: var(--neo-info);
}

/* ---- pagination ----------------------------------------------------------- */

.pagination {
    gap: .4rem;
}

.page-item .page-link {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-sm);
    color: var(--neo-ink) !important;
    font-weight: 700;
    padding: .4rem .7rem;
}
.page-item .page-link:hover {
    background-color: var(--neo-secondary);
}
.page-item.active .page-link {
    background-color: var(--neo-primary) !important;
    color: var(--neo-ink) !important;
    box-shadow: var(--neo-shadow-none);
}
.page-item.disabled .page-link {
    opacity: .45;
    box-shadow: none;
}

/* ---- misc bootstrap overrides --------------------------------------------- */

/* soft shadows and round corners are the antithesis of the look; remove them
   globally so third-party WHMCS markup cannot reintroduce them. */
.rounded,
.rounded-sm,
.rounded-lg,
.rounded-xl,
.rounded-xxl {
    border-radius: var(--neo-radius) !important;
}

.rounded-xxl,
.rounded-left-xxl,
.rounded-right-xxl,
.rounded-top-xxl,
.rounded-bottom-xxl {
    border-radius: var(--neo-radius-lg) !important;
}

.shadow-sm { box-shadow: var(--neo-shadow-sm) !important; }
.shadow,
.shadow-md { box-shadow: var(--neo-shadow-md) !important; }
.shadow-lg { box-shadow: var(--neo-shadow-lg) !important; }
.shadow-none { box-shadow: none !important; }

.breadcrumb {
    background-color: transparent;
    border: none;
    font-family: var(--neo-font-mono);
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.breadcrumb-item + .breadcrumb-item::before { content: ">"; }

/* dropdown: flat menu, hard border, hard shadow, no soft gradient */
.dropdown-menu {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-lg) !important;
    background-color: var(--neo-surface);
    padding: .35rem;
}
.dropdown-item {
    border-radius: var(--neo-radius-sm);
    font-weight: 600;
    color: var(--neo-ink);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--neo-secondary) !important;
    color: var(--neo-ink) !important;
}
.dropdown-divider {
    border-top: var(--neo-border-width) solid var(--neo-border);
    margin: .4rem 0;
}

/* modals: hard border + hard shadow, square corners */
.modal-content {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-lg) !important;
}
.modal-header,
.modal-footer {
    border-top: var(--neo-border-width) solid var(--neo-border);
    border-bottom: var(--neo-border-width) solid var(--neo-border);
    background-color: var(--neo-bg);
}
.modal-header { border-bottom: var(--neo-border-width) solid var(--neo-border); }
.modal-footer { border-top: var(--neo-border-width) solid var(--neo-border); }
.modal-title { font-weight: 800; text-transform: uppercase; }

/* nav pills (used by the domain option switcher in the cart) */
.nav-pills .nav-link {
    border: var(--neo-border-width) solid var(--neo-border);
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-sm);
    font-weight: 700;
    color: var(--neo-ink);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: .85rem;
}
.nav-pills .nav-link:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow-md);
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--neo-primary) !important;
    color: var(--neo-ink) !important;
    box-shadow: var(--neo-shadow-none);
}

/* list groups (sidebars, kb lists) */
.list-group-item {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    background-color: var(--neo-surface);
}
.list-group-item-action:hover {
    background-color: var(--neo-bg);
}

/* tabs */
.nav-tabs {
    border-bottom: var(--neo-border-width) solid var(--neo-border);
}
.nav-tabs .nav-link {
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-bottom: none !important;
    border-radius: var(--neo-radius) var(--neo-radius) 0 0 !important;
    background-color: var(--neo-bg);
    color: var(--neo-muted);
    font-weight: 700;
    text-transform: uppercase;
    font-size: .8rem;
}
.nav-tabs .nav-link.active {
    background-color: var(--neo-surface);
    color: var(--neo-ink);
    position: relative;
    top: 1px;
}

/* ======================================================================
   2. THEME COMPONENTS
   ====================================================================== */

/* ---- homepage hero -------------------------------------------------------- */

/* The source's hero: a bordered panel with a hard shadow and one flat
   saturated fill — no gradients. */
.neo-hero {
    background-color: var(--neo-primary);
    border: var(--neo-border-width) solid var(--neo-border);
    box-shadow: var(--neo-shadow-lg);
    padding: 2rem;
    color: var(--neo-ink);
    margin-bottom: 2rem;
}

.neo-hero h1 {
    font-weight: 900;
    font-size: clamp(1.75rem, 4vw, 3rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    margin-bottom: .5rem;
}

.neo-hero .lead {
    font-weight: 600;
    margin-bottom: 0;
    max-width: 60ch;
}

/* ---- client-area stat tiles ---------------------------------------------- */

/* WHMCS .tile markup, reskinned. The source's stat treatment: a bordered box,
   a big mono number, an uppercase label, and one coloured accent bar that
   spans the full width with no gap — done with an inset box-shadow so the
   padding does not need to change. */
.tiles .tile {
    position: relative;
    background-color: var(--neo-surface) !important;
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-md);
    text-align: left;
    padding: 1.25rem !important;
    padding-bottom: 1.5rem !important;
    display: block;
    color: var(--neo-ink);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
}
.tiles .tile:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--neo-shadow-lg);
    color: var(--neo-ink);
    text-decoration: none;
}
.tiles .tile i {
    position: static;
    font-size: 1.5rem;
    color: var(--neo-ink);
    margin-bottom: .5rem;
}
.tiles .tile .stat {
    font-family: var(--neo-font-mono);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    margin: .35rem 0 .25rem;
}
.tiles .tile .title {
    font-size: .75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--neo-muted);
    margin-top: 0;
}
.tiles .tile .highlight { display: none; }
.tiles .tile .highlight::after { content: none; }

/* coloured accent bar replaces stock's corner dot */
.tiles .tile::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 8px;
    background-color: var(--neo-primary);
    border-top: var(--neo-border-width) solid var(--neo-border);
}
.tiles .tile:nth-child(4n+2)::after { background-color: var(--neo-secondary); }
.tiles .tile:nth-child(4n+3)::after { background-color: var(--neo-success); }
.tiles .tile:nth-child(4n+4)::after { background-color: var(--neo-danger); }

/* product-group cards on the homepage keep the accent bar but lose the
   giant stat number */
.home .card .card-body { text-align: center; }

/* ---- sidebar (client-area nav) --------------------------------------------
   Panel: ink plate header (mono caps, yellow title), paper rows separated by
   hairlines, each destination row carrying a bordered icon tile that lifts on
   hover and inverts on the active row. Active state = blue fill + 5px inset
   ink bar, so the state reads in shape as well as colour. */

.sidebar .card,
.uwx-storenav__panel {
    background-color: var(--neo-surface) !important;
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-md) !important;
    margin-bottom: 1.25rem;
    overflow: hidden;
}

/* header plate: ink bar, yellow mono caps */
.sidebar .card .card-header,
.uwx-storenav__head {
    background-color: var(--neo-ink) !important;
    border-bottom: var(--neo-border-width) solid var(--neo-border) !important;
    padding: .7rem .85rem !important;
}
.sidebar .card .card-header .card-title,
.uwx-storenav__head .card-title {
    font-family: var(--neo-font-mono) !important;
    font-size: .68rem !important;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--neo-secondary) !important;
    display: flex;
    align-items: center;
    gap: .5rem;
}
/* plate marker: a yellow square in front of the title */
.sidebar .card .card-header .card-title::before,
.uwx-storenav__head .card-title::before {
    content: "";
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    background-color: var(--neo-primary);
    border: 1.5px solid #f3f1e8;
}
/* stock collapse chevron is not part of the design */
.sidebar .card-minimise { display: none; }

.sidebar .list-group-item,
.uwx-storenav__item {
    border: none !important;
    border-top: 1px solid #e3dfd2 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}
.sidebar .list-group-item:first-child,
.uwx-storenav__item:first-child { border-top: none !important; }

/* group labels (items without a URI): mono caps, no tile */
.uwx-storenav__item.neo-sidegroup {
    padding: .7rem .85rem .35rem !important;
    font-family: var(--neo-font-mono);
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--neo-muted);
}

.sidebar .list-group-item a,
.uwx-storenav__link {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem !important;
    font-weight: 700;
    font-size: .85rem;
    color: var(--neo-ink) !important;
    text-decoration: none;
    transition: background-color .12s ease;
}

/* bordered icon tile */
.neo-sideicon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    background-color: var(--neo-surface);
    border: 2px solid var(--neo-border);
    box-shadow: 2px 2px 0 var(--neo-border);
    color: var(--neo-ink);
    font-size: .78rem;
    transition: transform .15s ease, box-shadow .15s ease;
}

/* label takes the slack so badge + chevron settle on the right */
.sidebar .list-group-item a > span:not(.neo-sideicon):not(.badge),
.uwx-storenav__link > span:not(.neo-sideicon):not(.badge) {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar .list-group-item a:hover,
.uwx-storenav__link:hover {
    background-color: var(--neo-secondary);
    color: var(--neo-ink) !important;
    text-decoration: none;
}
.sidebar .list-group-item a:hover .neo-sideicon,
.uwx-storenav__link:hover .neo-sideicon {
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--neo-border);
}

/* active: blue fill + inset ink bar; icon tile inverts to ink */
.sidebar .list-group-item a.active,
.uwx-storenav__link.is-current {
    background-color: var(--neo-primary);
    box-shadow: inset 5px 0 0 var(--neo-border);
}
.uwx-storenav__link.is-current .neo-sideicon {
    background-color: var(--neo-ink);
    color: var(--neo-secondary);
}

/* badge + chevron */
.sidebar .list-group-item a .badge,
.uwx-storenav__badge {
    box-shadow: 2px 2px 0 var(--neo-border);
    font-size: .62rem;
    padding: .15rem .35rem;
}
.sidebar .list-group-item a .neo-sidechev,
.uwx-storenav__link .neo-sidechev {
    font-size: .65rem;
    color: var(--neo-muted);
    flex: 0 0 auto;
}
.uwx-storenav__link.is-current .neo-sidechev { color: var(--neo-ink); }

/* bare icons that arrive without our tile wrapper still read correctly */
.sidebar .list-group-item > i,
.uwx-storenav__item > i {
    color: var(--neo-ink);
    font-size: .8rem;
}

/* ==== uwx-cartsteps — order-progress rail ================================ */

/* Neo version of the unlimited-next step rail. Square numbered tiles joined
 * by a rule; done = filled green, current = filled blue with an inset bar,
 * upcoming = paper with an ink outline. The connectors are border segments,
 * not background bars, so they meet the tiles cleanly. */

.uwx-cartsteps { margin: 0 0 2rem; }

.uwx-cartsteps__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 0;
}

.uwx-cartsteps__step {
    display: flex;
    align-items: center;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--neo-muted);
}

.uwx-cartsteps__step + .uwx-cartsteps__step::before {
    content: "";
    width: 32px;
    height: 4px;
    background-color: var(--neo-border);
    margin: 0 10px;
}

.uwx-cartsteps__dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: var(--neo-radius);
    background-color: var(--neo-surface);
    border: var(--neo-border-width) solid var(--neo-border);
    box-shadow: var(--neo-shadow-sm);
    font-family: var(--neo-font-mono);
    font-size: .8rem;
    font-weight: 800;
    line-height: 1;
    margin-right: 10px;
    flex: 0 0 auto;
}

.uwx-cartsteps__step--current { color: var(--neo-ink); }

.uwx-cartsteps__step--current .uwx-cartsteps__dot {
    background-color: var(--neo-primary);
    color: var(--neo-ink);
    box-shadow: var(--neo-shadow-md);
}

.uwx-cartsteps__step--done { color: var(--neo-ink); }

.uwx-cartsteps__step--done .uwx-cartsteps__dot {
    background-color: var(--neo-success);
    color: var(--neo-ink);
}

.uwx-cartsteps__step--done .uwx-cartsteps__dot::before {
    content: "\2713";
    font-size: .9rem;
}

.uwx-cartsteps__link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.uwx-cartsteps__link:hover .uwx-cartsteps__label,
.uwx-cartsteps__link:focus .uwx-cartsteps__label {
    color: var(--neo-ink);
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .uwx-cartsteps__step:not(.uwx-cartsteps__step--current) .uwx-cartsteps__label {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .uwx-cartsteps__step + .uwx-cartsteps__step::before {
        width: 16px;
        margin: 0 6px;
    }
    .uwx-cartsteps__dot { margin-right: 0; }
    .uwx-cartsteps__step--current .uwx-cartsteps__dot { margin-right: 10px; }
}


/* Results containment: a search must never render past the footer.
   flow-root makes main-body's height account for floated content inside it,
   so the footer cannot be pushed up over (or under) a stray float; the
   results stay in normal flow above the footer; the footer clears any float
   and sits above anything that strays via z-index. */
#main-body { position: relative; display: flow-root; }
#DomainSearchResults {
    position: relative;
    z-index: 1;
    clear: both;
    margin-top: 1.25rem;
}
#DomainSearchResults .card { position: relative; }
.suggested-domains { position: relative; clear: both; }
.neo-footer {
    position: relative !important;
    z-index: 5;
    clear: both;
    flex: 0 0 auto;
    width: 100%;
    height: auto;
    overflow: visible;
}

/* ---- verification banner --------------------------------------------------- */

.verification-banner {
    background-color: var(--neo-warning) !important;
    border: var(--neo-border-width) solid var(--neo-border) !important;
    border-radius: var(--neo-radius) !important;
    box-shadow: var(--neo-shadow-sm);
    margin-bottom: 1.2rem !important;
    font-weight: 700;
}

/* ---- flash / system messages --------------------------------------------- */

.domain-lookup-loader,
#primaryLookupSearching {
    font-family: var(--neo-font-mono);
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ---- footer --------------------------------------------------------------- */

.neo-footer {
    background-color: var(--neo-ink);
    color: #f3f1e8;
    border-top: var(--neo-border-width) solid var(--neo-border);
    padding: 1.5rem 0;
    margin-top: 0 !important;
}

/* Registration is a long, multi-card form.  Do not let the generic WHMCS
   card overflow/flex rules create a viewport-sized layer behind the footer. */
body:has(#registration) #main-body,
body:has(#registration) #registration,
body:has(#registration) #registration form,
body:has(#registration) #containerNewUserSignup,
body:has(#registration) #containerNewUserSecurity {
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
}

body:has(#registration) .primary-content .card-body {
    overflow: visible !important;
}
.neo-footer a {
    color: #f3f1e8;
    font-weight: 700;
}
.neo-footer a:hover { color: var(--neo-secondary); }
.neo-footer .nav-link { color: #f3f1e8 !important; }
.neo-footer .copyright { font-family: var(--neo-font-mono); font-size: .75rem; }

/* On the ink footer the ink shadow disappears, so buttons carry a yellow
   one instead — the lift stays visible on the dark surface. */
.neo-footer .btn { box-shadow: 3px 3px 0 var(--neo-secondary) !important; }
.neo-footer .btn:hover { box-shadow: 5px 5px 0 var(--neo-secondary) !important; }

/* ======================================================================
   3. RESPONSIVE
   ====================================================================== */

@media (max-width: 575.98px) {
    .neo-hero { padding: 1.25rem; }
    .neo-hero h1 { font-size: 1.5rem; }
    .tiles .tile { padding: 1rem !important; padding-bottom: 1.25rem !important; }
    .tiles .tile .stat { font-size: 1.5rem; }
}

/* ======================================================================
   4. MOTION PREFERENCES
   ====================================================================== */

/* The lift/press is the personality of the look, but it is motion; honour
   reduced-motion by keeping the shadow swap and dropping the translate. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
    .neo-btn:hover,
    .btn:hover,
    .neo-card--lift:hover,
    .nav-pills .nav-link:hover,
    .tiles .tile:hover,
    .neo-navbar .nav-link:hover {
        transform: none !important;
    }
}