/* ===========================================================================
   Webfort — client area
   GENERATED FILE. Do not edit.

   Built from templates/webfort/css/src/ by bin/wf-build-css.sh.
   Edit the partials there and re-run the script; anything written here
   directly is lost on the next build.
   =========================================================================== */


/*==========================================================================
   SOURCE: 00-tokens.css
  ==========================================================================*/

/* ===========================================================================
   Tokens + webfonts
   ---------------------------------------------------------------------------
   Copied from the marketing site's dist/styles.css :root block and the @theme
   block compiled into dist/tailwind.css. These values are the contract between
   the two properties: if a colour, radius or shadow changes on webfort.co.uk,
   it changes HERE and nowhere else in this theme.

   The site's rule applies unchanged: no raw px for radius, shadow or
   font-size anywhere in these partials. Reach for a token.
   =========================================================================== */

/* --- Webfonts ------------------------------------------------------------
   Self-hosted, same files the site ships. Paths are relative to the built
   stylesheet (templates/webfort/css/webfort.css) so the theme survives being
   moved, renamed or served from a subdirectory. */

@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fonts/outfit-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Outfit';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url(../fonts/outfit-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/space-mono-400-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/space-mono-400-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/space-mono-700-latin-ext.woff2) format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Space Mono';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/space-mono-700-latin.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    color-scheme: light;

    /* Elevation — three steps, never coloured. On a light ground depth comes
       from layered neutrals and hairlines; coloured glow reads as a smudge. */
    --wf-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --wf-shadow-md: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 24px -12px rgba(16, 24, 40, 0.10);
    --wf-shadow-lg: 0 2px 4px rgba(16, 24, 40, 0.05), 0 24px 48px -20px rgba(16, 24, 40, 0.16);

    /* Radius — five steps. */
    --wf-r-sm: 8px;      /* chips, inputs, small badges */
    --wf-r-md: 12px;     /* icon tiles, nested elements */
    --wf-r-lg: 16px;     /* cards — the default */
    --wf-r-xl: 24px;     /* large panels, feature blocks */
    --wf-r-full: 9999px; /* pills, buttons, avatars */

    /* The height of a default field, so controls that have to line up beside
       one can be tied to it instead of each guessing. It is the .form-control
       skin in 20-bootstrap.css resolved: 14px type at 1.5 line-height, 12px of
       padding top and bottom, 1px of border either side. Bootstrap computes its
       own equivalent as calc(1.5em + .75rem + 2px) = 38px and hard-codes that
       into several components, which is where the mismatches come from — change
       the field padding or type size here and this must move with it. */
    --wf-field-h: 47px;

    /* Type — content scale. 12px is the floor for anything a visitor reads. */
    --wf-t-micro: 12px;
    --wf-t-small: 14px;
    --wf-t-body: 16px;
    --wf-t-lead: 18px;

    --wf-font: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --wf-font-mono: 'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    --wf-hairline: #e4e9f2;
    --wf-ink: #0b1220;
    --wf-ink-soft: #475569;
    --wf-ink-muted: #5b6a7d;
    --wf-ink-faint: #94a3b8;

    /* Brand blue carries every action: buttons, links, primary emphasis.
       White on it is 5.17:1. */
    --wf-brand: #2563eb;
    --wf-brand-500: #3b82f6;
    --wf-brand-400: #60a5fa;
    --wf-brand-300: #93c5fd;
    /* Hover/active steps for filled brand surfaces. Not on the site (its
       buttons lift rather than darken) but Bootstrap needs :hover/:active/
       .disabled variants for every button, so they are derived here once. */
    --wf-brand-700: #1d4ed8;
    --wf-brand-800: #1e40af;

    /* The accent. A light tint of the brand rather than a separate hue.
       Area-capped: solid fills only on status dots, small badges and chips
       under ~40px tall. Never a button, never a panel. */
    --wf-accent: #93c5fd;
    --wf-accent-deep: #1e40af;

    /* Gold — the one warm note, and the only hue here that isn't blue. Its
       legibility flips between grounds, hence the pair: on navy the bright
       value reads as text; on white it drops to 3.19:1, which clears 3:1 for
       graphics but not 4.5:1 for copy. Gold text on a light ground must use
       --wf-gold-deep (5.05:1). */
    --wf-gold: #f59e0b;
    --wf-gold-deep: #b45309;

    /* Navy — the dark ground. Blue-leaning so it belongs to the brand family,
       but far enough from --wf-brand that the two never read as the same. */
    --wf-navy: #0b1a3a;
    --wf-navy-raised: #12244a;
    --wf-navy-sunken: #081530;

    /* Semantic colour. Anything outside these carries no meaning and should
       not appear in the client area. */
    --wf-positive: #009966;
    --wf-negative: #d42f2f;
    /* WHMCS distinguishes four states where the site only needs two, so
       warning and info are named here rather than invented at each call site. */
    --wf-warning: #b45309;
    --wf-info: #2563eb;

    --wf-surface: #ffffff;
    --wf-surface-alt: #f6f8fc;
    --wf-surface-sunken: #eef2f9;

    /* Chrome geometry. The site's nav and footer are max-w-7xl (1280px) with a
       32px gutter; Bootstrap's .container tops out at 1140px, so the chrome
       opts out of .container and uses these instead. */
    --wf-shell-max: 1280px;
    --wf-shell-gutter: 32px;

    --wf-ease: 0.18s ease-out;
}

/* --- Dark surface context -------------------------------------------------
   Ported from the site's .on-dark. Used by the footer and by any band that
   sits on navy. Redefining the tokens re-points a whole subtree without
   touching a single rule in the components below. Contrast against --wf-navy
   is noted per line; all clear AA. */
.wf-on-dark {
    --wf-surface: var(--wf-navy);
    --wf-surface-alt: var(--wf-navy-raised);
    --wf-surface-sunken: var(--wf-navy-sunken);

    --wf-ink: #ffffff;        /* 17.2:1 */
    --wf-ink-soft: #c3d0e8;   /* 11.1:1 */
    --wf-ink-muted: #93a4c4;  /*  6.8:1 */
    --wf-ink-faint: rgba(255, 255, 255, 0.35);
    --wf-hairline: rgba(255, 255, 255, 0.12);

    /* On a dark ground the "deep" and "light" ends of the accent swap roles:
       --wf-accent-deep is 1.97:1 on navy, so it inverts to a pale tint. */
    --wf-accent-deep: #bfdbfe;   /* 12.1:1 */

    /* Brand blue as *text* is 3.3:1 on navy — under AA for the footer's link
       lists. Lifted here; filled brand buttons are handled separately in the
       chrome partial, because a fill wants the opposite treatment. */
    --wf-brand: #7dabf8;         /* 7.4:1 */

    background-color: var(--wf-navy);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
    color: var(--wf-ink-soft);
}

/* Focus rings need to be visible on navy too — the brand-blue ring is only
   3.3:1 there, below what a focus indicator wants. */
.wf-on-dark :focus-visible {
    outline-color: var(--wf-gold);
}


/*==========================================================================
   SOURCE: 10-base.css
  ==========================================================================*/

/* ===========================================================================
   Base — page ground, typography, links, focus
   ---------------------------------------------------------------------------
   Everything here overrides Bootstrap 4.5.3 / the stock WHMCS theme, both of
   which are loaded before this file. Bootstrap compiles its colours into the
   selectors themselves (the :root --primary in theme.css is decorative and
   consumed by nothing), so overriding is the only route — there is no variable
   to re-point.
   =========================================================================== */

html {
    /* Stock custom.css sets 14px, which shrinks every rem in the theme.
       The site runs on a 16px root and the type scale below assumes it. */
    font-size: 16px;
}

body {
    font-family: var(--wf-font);
    font-size: var(--wf-t-body);
    line-height: 1.6;
    color: var(--wf-ink);
    background-color: var(--wf-surface);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* WHMCS puts .primary-bg-color on <body> and paints it #f1f1f1. The site's
   page ground is a very slightly cool white; content cards supply the
   contrast, not the backdrop. */
.primary-bg-color {
    background-color: var(--wf-surface-alt);
}

section#main-body {
    padding: 40px 0 72px;
}

/* --- Type ---------------------------------------------------------------- */

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

h1, .h1 { font-size: 2.25rem; }
h2, .h2 { font-size: 1.75rem; }
h3, .h3 { font-size: 1.375rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

@media (max-width: 767.98px) {
    h1, .h1 { font-size: 1.75rem; }
    h2, .h2 { font-size: 1.375rem; }
    h3, .h3 { font-size: 1.125rem; }
}

.lead {
    font-size: var(--wf-t-lead);
    font-weight: 400;
    color: var(--wf-ink-soft);
}

small, .small { font-size: var(--wf-t-small); }

code, kbd, pre, samp, .text-monospace {
    font-family: var(--wf-font-mono);
}

/* Mono kicker above a section heading. Deliberately quiet — it labels the
   section, it is not a second headline. */
.wf-kicker {
    display: block;
    margin-bottom: 8px;
    font-family: var(--wf-font-mono);
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wf-brand);
}

/* --- Links --------------------------------------------------------------- */

a {
    color: var(--wf-brand);
    text-decoration: none;
    transition: color var(--wf-ease);
}
a:hover,
a:focus {
    color: var(--wf-brand-700);
    text-decoration: none;
}

/* --- Colour utilities -----------------------------------------------------
   WHMCS templates use Bootstrap's contextual text classes for real semantics
   (invoice states, ticket states, validation), so they are re-pointed at the
   Webfort palette rather than left on Bootstrap's defaults. */

.text-primary  { color: var(--wf-brand)    !important; }
.text-success  { color: var(--wf-positive) !important; }
.text-danger   { color: var(--wf-negative) !important; }
.text-warning  { color: var(--wf-warning)  !important; }
.text-info     { color: var(--wf-info)     !important; }
.text-muted    { color: var(--wf-ink-muted)!important; }
.text-secondary{ color: var(--wf-ink-soft) !important; }
.text-dark     { color: var(--wf-ink)      !important; }
.text-body     { color: var(--wf-ink)      !important; }

.bg-primary { background-color: var(--wf-brand)    !important; }
.bg-success { background-color: var(--wf-positive) !important; }
.bg-danger  { background-color: var(--wf-negative) !important; }
.bg-warning { background-color: var(--wf-gold)     !important; }
.bg-info    { background-color: var(--wf-brand-500)!important; }
.bg-light   { background-color: var(--wf-surface-alt) !important; }
.bg-dark    { background-color: var(--wf-navy)     !important; }

hr,
.border, .border-top, .border-right, .border-bottom, .border-left {
    border-color: var(--wf-hairline) !important;
}

/* Bootstrap's shadow utilities are used across WHMCS templates; re-point them
   at the three-step neutral elevation scale rather than its blue-grey glow. */
.shadow-sm { box-shadow: var(--wf-shadow-sm) !important; }
.shadow    { box-shadow: var(--wf-shadow-md) !important; }
.shadow-lg { box-shadow: var(--wf-shadow-lg) !important; }

/* --- Focus ---------------------------------------------------------------
   One consistent ring across the whole client area. :focus-visible only, so
   mouse users never see it, keyboard users always do. */

:focus-visible {
    outline: 2px solid var(--wf-brand);
    outline-offset: 2px;
}
/* Bootstrap ships focus styling as a box-shadow on a dozen components; that
   ring is blue-grey and competes with the outline above. */
.btn:focus, .btn.focus,
.form-control:focus,
.custom-select:focus,
.page-link:focus,
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: none;
}

::selection {
    background: var(--wf-brand-300);
    color: var(--wf-ink);
}

/* --- Scrollbar ------------------------------------------------------------ */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--wf-surface-alt); }
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: var(--wf-r-full);
}
::-webkit-scrollbar-thumb:hover { background: var(--wf-ink-faint); }

/* --- Motion --------------------------------------------------------------
   The card lift and nav transitions below are short (180ms) and small (2px)
   by design, but honour the OS preference regardless. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/*==========================================================================
   SOURCE: 20-bootstrap.css
  ==========================================================================*/

/* ===========================================================================
   Bootstrap 4.5.3 -> Webfort
   ---------------------------------------------------------------------------
   WHMCS builds every page out of Bootstrap components, and Bootstrap's blue
   (#336699 as WHMCS ships it) is compiled straight into the selectors. This
   partial re-points the components customers actually see onto the site's
   tokens.

   Scope note: only variants that appear in the templates are covered. The
   inventory was taken with
       grep -rho "btn-[a-z-]*" templates/webfort templates/orderforms/standard_cart
   Re-run that after a WHMCS upgrade if something looks unstyled.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Buttons

   The site has exactly one button shape: a full pill, bold label, no border,
   lifting 2px on hover. Every Bootstrap variant is bent to that shape and
   differs only in fill.
   --------------------------------------------------------------------------- */

.btn {
    font-family: var(--wf-font);
    font-weight: 700;
    font-size: var(--wf-t-small);
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 11px 22px;
    border: 1px solid transparent;
    border-radius: var(--wf-r-full);
    transition: background-color var(--wf-ease),
                border-color var(--wf-ease),
                color var(--wf-ease),
                transform var(--wf-ease),
                box-shadow var(--wf-ease);
}

.btn:hover:not(:disabled):not(.disabled) {
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-md);
}
.btn:active:not(:disabled):not(.disabled) {
    transform: translateY(0);
    box-shadow: var(--wf-shadow-sm);
}
.btn:disabled,
.btn.disabled {
    opacity: 0.45;
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

.btn-lg, .btn-group-lg > .btn {
    padding: 15px 32px;
    font-size: var(--wf-t-body);
    border-radius: var(--wf-r-full);
}
.btn-sm, .btn-group-sm > .btn {
    padding: 8px 16px;
    font-size: var(--wf-t-micro);
    border-radius: var(--wf-r-full);
}
.btn-xs, .btn-group-xs > .btn {
    padding: 5px 12px;
    font-size: var(--wf-t-micro);
    border-radius: var(--wf-r-full);
}
.btn-block { display: block; width: 100%; }

/* Primary — the brand-blue pill. White on it is 5.17:1. */
.btn-primary,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle {
    color: #fff;
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}
.btn-primary:hover,
.btn-primary:focus {
    color: #fff;
    background-color: var(--wf-brand-700);
    border-color: var(--wf-brand-700);
}

/* Default / secondary / light — the quiet action. WHMCS uses .btn-default
   about 300 times, more than any other variant, so this is the one that sets
   the tone of the client area: a white pill on a hairline. */
.btn-default,
.btn-secondary,
.btn-light,
.btn-outline-secondary,
.btn-outline-light {
    color: var(--wf-ink);
    background-color: var(--wf-surface);
    border-color: var(--wf-hairline);
}
.btn-default:hover,
.btn-secondary:hover,
.btn-light:hover,
.btn-outline-secondary:hover,
.btn-outline-light:hover,
.btn-default:focus,
.btn-secondary:focus,
.btn-light:focus {
    color: var(--wf-brand);
    background-color: var(--wf-surface);
    border-color: #c7d7f5;
}

/* Success is deliberately NOT green here.
 *
 * WHMCS uses .btn-success for ordinary primary actions — "Update" in the
 * sidebar, "Register" on the domain search, "Add to Cart" — not for anything
 * that means "this succeeded". webfort.co.uk has exactly one action colour,
 * so a green button in the client area reads as a different product.
 *
 * Green stays meaningful, just not on buttons: it is reserved for status
 * labels (.label.status-active) and .alert-success, where it genuinely
 * carries information. Destructive actions keep red, so the one distinction
 * that matters for safety is untouched.
 */
.btn-success,
.btn-success:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}
.btn-success:hover, .btn-success:focus {
    color: #fff;
    background-color: var(--wf-brand-700);
    border-color: var(--wf-brand-700);
}

.btn-danger,
.btn-danger:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--wf-negative);
    border-color: var(--wf-negative);
}
.btn-danger:hover, .btn-danger:focus {
    color: #fff;
    background-color: #b02525;
    border-color: #b02525;
}

/* Warning uses --wf-gold-deep rather than --wf-gold: white on the bright gold
   is 2.1:1. The bright value is for graphics, not for button labels. */
.btn-warning,
.btn-warning:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--wf-gold-deep);
    border-color: var(--wf-gold-deep);
}
.btn-warning:hover, .btn-warning:focus {
    color: #fff;
    background-color: #92400e;
    border-color: #92400e;
}

.btn-info,
.btn-info:not(:disabled):not(.disabled):active {
    color: #fff;
    background-color: var(--wf-brand-500);
    border-color: var(--wf-brand-500);
}
.btn-info:hover, .btn-info:focus {
    color: #fff;
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}

.btn-dark {
    color: #fff;
    background-color: var(--wf-navy);
    border-color: var(--wf-navy);
}
.btn-dark:hover, .btn-dark:focus {
    color: #fff;
    background-color: var(--wf-navy-raised);
    border-color: var(--wf-navy-raised);
}

/* Outline variants. The site has no outline button, so these become the
   hairline pill with a coloured label — quiet, and consistent with
   .btn-default rather than a second visual language. */
.btn-outline-primary { color: var(--wf-brand);     border-color: var(--wf-brand); background-color: transparent; }
.btn-outline-success { color: var(--wf-positive);  border-color: var(--wf-positive); background-color: transparent; }
.btn-outline-danger  { color: var(--wf-negative);  border-color: var(--wf-negative); background-color: transparent; }
.btn-outline-warning { color: var(--wf-gold-deep); border-color: var(--wf-gold-deep); background-color: transparent; }
.btn-outline-info    { color: var(--wf-brand-500); border-color: var(--wf-brand-500); background-color: transparent; }
.btn-outline-dark    { color: var(--wf-ink);       border-color: var(--wf-ink); background-color: transparent; }

.btn-outline-primary:hover { color: #fff; background-color: var(--wf-brand);     border-color: var(--wf-brand); }
.btn-outline-success:hover { color: #fff; background-color: var(--wf-positive);  border-color: var(--wf-positive); }
.btn-outline-danger:hover  { color: #fff; background-color: var(--wf-negative);  border-color: var(--wf-negative); }
.btn-outline-warning:hover { color: #fff; background-color: var(--wf-gold-deep); border-color: var(--wf-gold-deep); }
.btn-outline-info:hover    { color: #fff; background-color: var(--wf-brand-500); border-color: var(--wf-brand-500); }
.btn-outline-dark:hover    { color: #fff; background-color: var(--wf-ink);       border-color: var(--wf-ink); }

/* Link buttons are text, not pills — no lift, no shadow. */
.btn-link {
    color: var(--wf-brand);
    font-weight: 600;
    border-radius: var(--wf-r-sm);
    background: none;
    border-color: transparent;
}
.btn-link:hover {
    color: var(--wf-brand-700);
    text-decoration: underline;
    transform: none;
    box-shadow: none;
}

/* Grouped buttons must not be pills at the join, or the segments overlap.
   Square the inner edges and keep the pill only on the outer ends. */
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.btn-group > .btn:hover {
    transform: none;
    box-shadow: none;
    z-index: 2;
}
.btn-group-vertical > .btn {
    border-radius: var(--wf-r-sm);
}
.btn-group-vertical > .btn:hover { transform: none; }

/* ---------------------------------------------------------------------------
   Cards

   One surface for the whole client area, matching the site's .card exactly:
   white fill, 1px hairline, --wf-shadow-md, lifting 2px in 180ms on hover.
   --------------------------------------------------------------------------- */

.card {
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-md);
    transition: transform var(--wf-ease),
                box-shadow var(--wf-ease),
                border-color var(--wf-ease);
}

/* The lift is for cards you can act on. A card that is just a container for a
   form or a table should not move under the cursor, so the hover response is
   opt-in via .wf-card-interactive rather than applied to every .card. */
.wf-card-interactive:hover {
    border-color: #c7d7f5;
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-lg);
}

.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--wf-hairline);
    padding: 18px 24px;
    font-weight: 700;
    font-size: var(--wf-t-body);
    color: var(--wf-ink);
    border-radius: var(--wf-r-lg) var(--wf-r-lg) 0 0;
}
.card-body { padding: 24px; }
.card-footer {
    background-color: var(--wf-surface-alt);
    border-top: 1px solid var(--wf-hairline);
    padding: 14px 24px;
    border-radius: 0 0 var(--wf-r-lg) var(--wf-r-lg);
}
.card-title {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wf-ink);
}

/* WHMCS overrides .primary-content .card-body to 20px and .card-title to 22px
   with a hard px font-size. Bring both back onto the scale. */
.primary-content .card-body { padding: 24px; }

/* The same stock rule (theme.css:9684) sets overflow: auto, which clips
   anything that has to escape the card — the country dropdown on the account
   details page opened inside the panel, gained its own scrollbars and slid
   under the card below it.

   It cannot simply be set back to visible. Several of these forms lay their
   columns out with .col-md-6.float-md-left, and the overflow is what
   establishes a block formatting context to contain those floats; without one
   the card collapses to the height of its heading. display: flow-root makes
   the same context, and is the only one of the clearfix options that does not
   also clip — but it does not undo the clipping on its own, so overflow has to
   be put back to visible alongside it. */
.primary-content .card-body {
    display: flow-root;
    overflow: visible;
}
.primary-content .card-title { font-size: 1.125rem; margin-bottom: 18px; }
.primary-content .card { margin-bottom: 20px; }

/* ---------------------------------------------------------------------------
   Forms

   Site spec, read off the contact form: bg-surface-alt fill, hairline border,
   12px radius, generous padding, brand focus ring at 30% alpha.
   --------------------------------------------------------------------------- */

.form-control,
.custom-select,
.custom-file-label {
    font-family: var(--wf-font);
    font-size: var(--wf-t-small);
    line-height: 1.5;
    height: auto;
    padding: 12px 16px;
    color: var(--wf-ink);
    background-color: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
    transition: border-color var(--wf-ease), box-shadow var(--wf-ease), background-color var(--wf-ease);
}
.form-control:focus,
.custom-select:focus {
    color: var(--wf-ink);
    background-color: var(--wf-surface);
    border-color: var(--wf-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}
.form-control::placeholder { color: var(--wf-ink-faint); opacity: 1; }
.form-control:disabled,
.form-control[readonly] {
    background-color: var(--wf-surface-sunken);
    color: var(--wf-ink-muted);
}
.form-control-sm { padding: 8px 12px; font-size: var(--wf-t-micro); border-radius: var(--wf-r-sm); }
.form-control-lg { padding: 15px 20px; font-size: var(--wf-t-body); }
textarea.form-control { min-height: 120px; }

/* A select's chevron is a background image with `appearance: none`, and the
   only thing keeping it off the value is Bootstrap's 1.75rem of right padding.
   Any `padding` shorthand applied afterwards throws that away — the browser
   sizes an auto-width select to its widest option and knows nothing about the
   arrow, so it lands straight on top of the text. Reserve the room explicitly,
   and never set padding on a select with the shorthand alone. */
/* The glyph goes with it. Bootstrap's is a near-black double triangle, and the
   cart already replaces the native arrow with the site's chevron
   (60-cart.css) — so the two halves of the install were drawing the same
   control differently. Same SVG, same stroke colour as --wf-ink-muted. */
.custom-select {
    padding-right: 42px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6a7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}
.custom-select-sm {
    padding-right: 34px;
    background-position: right 12px center;
    background-size: 14px 14px;
}

label,
.control-label {
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink);
    margin-bottom: 6px;
}
.form-group { margin-bottom: 20px; }
.form-text, small.form-text { color: var(--wf-ink-muted); font-size: var(--wf-t-micro); }

/* Chrome paints autofilled inputs a hard yellow that ignores background-color.
   The inset shadow trick is the only way to repaint it. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--wf-surface-alt) inset;
    -webkit-text-fill-color: var(--wf-ink);
}

/* Input groups: the addon has to read as part of the field, not a button
   bolted to it. */
.input-group-text {
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
    background-color: var(--wf-surface-sunken);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
}
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child),
.input-group-prepend > .btn,
.input-group-prepend > .input-group-text {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child),
.input-group-append > .btn,
.input-group-append > .input-group-text {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* A button welded to a field must not lift away from it. Descendant selector,
   not a child one: Bootstrap 4 wraps these in .input-group-prepend /
   .input-group-append, so `.input-group > .btn` never matches the button that
   is actually rendered — which left the knowledgebase search icon and the
   password-reveal eye rising 2px off their fields on hover. */
.input-group .btn:hover,
.input-group .btn:focus,
.input-group .btn:active {
    transform: none;
    box-shadow: none;
}

/* A button welded to a field also has to be the same height as it, and carry
   the field's corner rather than its own pill — a 9999px radius on one end of a
   12px-radius control reads as two unrelated things pushed together.

   Height is set rather than left to the flex stretch because the button is the
   taller item here: .btn is 14px at 1.4 plus 11px of padding, so it defines the
   row and the field sits inside it. The knowledgebase search pill is the one
   deliberate exception and puts its own values back in 30-chrome.css. */
.input-group-prepend > .btn,
.input-group-append > .btn {
    height: var(--wf-field-h);
    padding-top: 0;
    padding-bottom: 0;
}
.input-group-append > .btn {
    border-top-right-radius: var(--wf-r-md);
    border-bottom-right-radius: var(--wf-r-md);
}
.input-group-prepend > .btn {
    border-top-left-radius: var(--wf-r-md);
    border-bottom-left-radius: var(--wf-r-md);
}

/* ---------------------------------------------------------------------------
   File inputs

   Four controls stacked into one row, and Bootstrap sizes three of them from
   its own field metric while our skin lands on --wf-field-h. On the ticket
   attachment row that produced a 47px field, a 38px hit area, a 33px "Browse"
   and a 43.6px "Add More", all in the same box.

   .custom-file-label is the only one that looked right, and only by accident:
   it is absolutely positioned, so our padding grew it while its 38px parent
   stayed put. Everything below ties the set to the one variable.
   --------------------------------------------------------------------------- */

.custom-file,
.custom-file-input,
.custom-file-label {
    height: var(--wf-field-h);
}

/* The transparent file input is the click target for the whole control, so
   leaving it at Bootstrap's 38px makes the bottom 9px of the field dead. */
.custom-file-input { cursor: pointer; }

/* Not flex, however tempting: the label carries .text-truncate, and
   text-overflow needs a block container to put the ellipsis in. With
   border-box sizing the 12px padding already centres the line inside 47px. */
.custom-file-label { color: var(--wf-ink-muted); }
/* Bootstrap rings this with `.custom-file-input:focus ~ .custom-file-label`,
   which assumes its own markup order — input first, label after. WHMCS writes
   the label first in both ticket templates, and `~` only looks forward, so that
   rule has never matched and the field has had no focus indication at all.
   :has() reads the other way. Kept as its own rule, not folded into a list with
   the sibling form: a browser that does not know :has() throws out the entire
   selector list, taking the working half with it. */
.custom-file:has(.custom-file-input:focus) .custom-file-label {
    background-color: var(--wf-surface);
    border-color: var(--wf-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}

/* "Browse" is a pseudo-element, so it cannot be given the .btn skin — it just
   has to read as an inset segment of the field. height:auto lets top/bottom:0
   size it, which is what makes it exactly as tall as the field's padding box
   however the field is sized. Bootstrap's grey (#e9ecef) is off-palette.

   The radius is one pixel under the field's because it sits inside the border
   rather than on it. Squaring it off mid-group is left to Bootstrap, whose own
   rule for that is more specific than anything here. */
.custom-file-label::after {
    display: flex;
    align-items: center;
    height: auto;
    padding: 0 18px;
    font-weight: 600;
    color: var(--wf-ink-soft);
    background-color: var(--wf-surface-sunken);
    border-left: 1px solid var(--wf-hairline);
    border-radius: 0 calc(var(--wf-r-md) - 1px) calc(var(--wf-r-md) - 1px) 0;
}

/* Checkboxes and radios */
.custom-control-label::before {
    background-color: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
}
.custom-checkbox .custom-control-label::before { border-radius: 6px; }
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}
.custom-control-input:focus-visible ~ .custom-control-label::before {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}

/* Validation. WHMCS uses both Bootstrap's .is-invalid and its own .has-error. */
.was-validated .form-control:invalid,
.form-control.is-invalid,
.has-error .form-control {
    border-color: var(--wf-negative);
    background-image: none;
}
.was-validated .form-control:invalid:focus,
.form-control.is-invalid:focus,
.has-error .form-control:focus {
    box-shadow: 0 0 0 3px rgba(212, 47, 47, 0.25);
}
.invalid-feedback, .has-error .help-block { color: var(--wf-negative); font-size: var(--wf-t-micro); }
.was-validated .form-control:valid,
.form-control.is-valid {
    border-color: var(--wf-positive);
    background-image: none;
}

/* ---------------------------------------------------------------------------
   Tables
   --------------------------------------------------------------------------- */

.table {
    color: var(--wf-ink);
    font-size: var(--wf-t-small);
    margin-bottom: 0;
}
.table thead th {
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
    background-color: var(--wf-surface-alt);
    border-top: 0;
    border-bottom: 1px solid var(--wf-hairline);
    padding: 12px 16px;
    white-space: nowrap;
}
.table td,
.table tbody th {
    padding: 14px 16px;
    border-top: 1px solid var(--wf-hairline);
    vertical-align: middle;
}
.table-bordered,
.table-bordered td,
.table-bordered th { border-color: var(--wf-hairline); }

.table-striped tbody tr:nth-of-type(odd) { background-color: transparent; }
.table-striped tbody tr:nth-of-type(even) { background-color: var(--wf-surface-alt); }
.table-hover tbody tr { transition: background-color var(--wf-ease); }
.table-hover tbody tr:hover { background-color: #f4f7fd; color: var(--wf-ink); }

/* A table inside a card should meet the card's edges, not float inside a
   second border. */
.card > .table,
.card > .table-responsive > .table { margin-bottom: 0; }
.card > .table thead th:first-child,
.card > .table-responsive > .table thead th:first-child { padding-left: 24px; }
.card > .table td:first-child,
.card > .table-responsive > .table td:first-child { padding-left: 24px; }
.card > .table td:last-child,
.card > .table-responsive > .table td:last-child { padding-right: 24px; }

/* DataTables chrome — WHMCS wraps most listing tables in it. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
    background-color: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-sm);
    padding: 7px 12px;
    font-size: var(--wf-t-small);
}
/* DataTables hands the length menu four classes at once — custom-select,
   custom-select-sm, form-control and form-control-sm — so the rule above and
   two others all restate padding on the same element. It is the most specific
   of them, which made it the one that squashed the chevron onto the value.
   Restated here because .custom-select-sm cannot outrank it. */
.dataTables_wrapper .dataTables_length select {
    padding-right: 34px;
}
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { color: var(--wf-ink-muted); font-size: var(--wf-t-small); }

/* ---------------------------------------------------------------------------
   Alerts
   --------------------------------------------------------------------------- */

.alert {
    font-size: var(--wf-t-small);
    padding: 16px 20px;
    border: 1px solid;
    border-radius: var(--wf-r-md);
}
.alert-success { color: #04663f; background-color: rgba(0, 153, 102, 0.10); border-color: rgba(0, 153, 102, 0.28); }
.alert-danger  { color: #8f1f1f; background-color: rgba(212, 47, 47, 0.10); border-color: rgba(212, 47, 47, 0.28); }
.alert-warning { color: var(--wf-gold-deep); background-color: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.32); }
.alert-info    { color: var(--wf-accent-deep); background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.24); }
.alert-primary { color: var(--wf-accent-deep); background-color: rgba(37, 99, 235, 0.08); border-color: rgba(37, 99, 235, 0.24); }
.alert-secondary { color: var(--wf-ink-soft); background-color: var(--wf-surface-alt); border-color: var(--wf-hairline); }
/* `:not(.btn)` matters. This rule is for inline links in the alert's prose, and
   it is (0,1,1) — enough to beat .btn-primary's own (0,1,0) colour, so a button
   placed in an alert had its label repainted in the alert's ink and underlined.
   The secure-credentials CTA on the ticket confirmation page is exactly that, a
   .btn-primary inside .alert-warning, which rendered #b45309 on #2563eb: 1.9:1,
   effectively unreadable. A button in an alert keeps its own skin. */
.alert a:not(.btn) { font-weight: 600; text-decoration: underline; color: inherit; }
.alert .close { color: inherit; opacity: 0.5; text-shadow: none; }
.alert .close:hover { opacity: 1; }

/* ---------------------------------------------------------------------------
   Badges
   --------------------------------------------------------------------------- */

.badge {
    font-family: var(--wf-font);
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.02em;
    padding: 5px 10px;
    border-radius: var(--wf-r-full);
}
.badge-primary { color: #fff; background-color: var(--wf-brand); }
.badge-success { color: #fff; background-color: var(--wf-positive); }
.badge-danger  { color: #fff; background-color: var(--wf-negative); }
.badge-warning { color: #fff; background-color: var(--wf-gold-deep); }
.badge-info    { color: #fff; background-color: var(--wf-brand-500); }
.badge-light   { color: var(--wf-ink); background-color: var(--wf-surface-sunken); }
.badge-dark    { color: #fff; background-color: var(--wf-navy); }
.badge-secondary { color: var(--wf-ink-soft); background-color: var(--wf-surface-sunken); }

/* ---------------------------------------------------------------------------
   Tabs and pills
   --------------------------------------------------------------------------- */

.nav-tabs {
    border-bottom: 1px solid var(--wf-hairline);
}
.nav-tabs .nav-link {
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-muted);
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 12px 18px;
    transition: color var(--wf-ease), border-color var(--wf-ease);
}
.nav-tabs .nav-link:hover { color: var(--wf-ink); border-bottom-color: var(--wf-hairline); }
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--wf-brand);
    background-color: transparent;
    border-bottom-color: var(--wf-brand);
}

.nav-pills .nav-link {
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    border-radius: var(--wf-r-full);
    padding: 9px 18px;
}
.nav-pills .nav-link:hover { background-color: var(--wf-surface-alt); color: var(--wf-ink); }
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    color: #fff;
    background-color: var(--wf-brand);
}

/* ---------------------------------------------------------------------------
   List groups
   --------------------------------------------------------------------------- */

.list-group-item {
    font-size: var(--wf-t-small);
    color: var(--wf-ink);
    background-color: var(--wf-surface);
    border-color: var(--wf-hairline);
    padding: 14px 20px;
}
.list-group-item:first-child { border-top-left-radius: var(--wf-r-md); border-top-right-radius: var(--wf-r-md); }
.list-group-item:last-child  { border-bottom-left-radius: var(--wf-r-md); border-bottom-right-radius: var(--wf-r-md); }
.list-group-item-action:hover { background-color: #f4f7fd; color: var(--wf-brand); }
.list-group-item.active {
    color: #fff;
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}

/* ---------------------------------------------------------------------------
   Dropdowns
   --------------------------------------------------------------------------- */

.dropdown-menu {
    padding: 8px;
    font-size: var(--wf-t-small);
    color: var(--wf-ink);
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-lg);
}
.dropdown-item {
    padding: 10px 14px;
    font-weight: 600;
    color: var(--wf-ink);
    border-radius: var(--wf-r-sm);
    transition: background-color var(--wf-ease), color var(--wf-ease);
}
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #f4f7fd;
    color: var(--wf-brand);
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--wf-brand);
    color: #fff;
}
.dropdown-divider { border-top-color: var(--wf-hairline); margin: 6px 4px; }
.dropdown-header {
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
}

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

.modal-content {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-xl);
    box-shadow: var(--wf-shadow-lg);
}
/* The header needs the same top radius the footer gets at the bottom. Several
   of these modals fill it (`.modal-header bg-primary`), and .modal-content does
   not clip, so Bootstrap's own calc(.3rem - 1px) left the fill squaring off the
   24px corners it was sitting in. Clipping the content instead would be the
   shorter fix, but .modal-content is also what a dropdown inside a modal has to
   escape. */
.modal-header {
    padding: 22px 28px;
    border-bottom: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-xl) var(--wf-r-xl) 0 0;
}
/* The title is an h4, and the heading rule in 10-base.css sets a colour on it
   directly — which beats anything inherited, including the .text-white the
   template puts on the filled header. That left near-black type on brand blue.
   Inherit, so the header decides. */
.modal-header .modal-title { color: inherit; }
.modal-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; }
.modal-body { padding: 28px; }
.modal-footer {
    padding: 18px 28px;
    background-color: var(--wf-surface-alt);
    border-top: 1px solid var(--wf-hairline);
    border-radius: 0 0 var(--wf-r-xl) var(--wf-r-xl);
}
.modal-backdrop.show { background-color: var(--wf-navy); opacity: 0.55; }
.close { color: var(--wf-ink-muted); text-shadow: none; opacity: 0.8; }
.close:hover { color: var(--wf-ink); opacity: 1; }

/* ---------------------------------------------------------------------------
   Pagination, progress, breadcrumb, tooltips
   --------------------------------------------------------------------------- */

.page-link {
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    background-color: var(--wf-surface);
    border-color: var(--wf-hairline);
    padding: 9px 15px;
}
.page-link:hover { color: var(--wf-brand); background-color: var(--wf-surface-alt); border-color: var(--wf-hairline); }
.page-item.active .page-link {
    color: #fff;
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}
.page-item.disabled .page-link { color: var(--wf-ink-faint); background-color: var(--wf-surface-alt); }
.page-item:first-child .page-link { border-top-left-radius: var(--wf-r-sm); border-bottom-left-radius: var(--wf-r-sm); }
.page-item:last-child .page-link { border-top-right-radius: var(--wf-r-sm); border-bottom-right-radius: var(--wf-r-sm); }

.progress {
    height: 8px;
    background-color: var(--wf-surface-sunken);
    border-radius: var(--wf-r-full);
}
.progress-bar { background-color: var(--wf-brand); border-radius: var(--wf-r-full); }
.progress-bar.bg-success { background-color: var(--wf-positive) !important; }
.progress-bar.bg-danger  { background-color: var(--wf-negative) !important; }
.progress-bar.bg-warning { background-color: var(--wf-gold) !important; }

.breadcrumb {
    background-color: transparent;
    font-size: var(--wf-t-small);
    padding: 0;
    margin: 0;
}
.breadcrumb-item + .breadcrumb-item::before { color: var(--wf-ink-faint); }
.breadcrumb-item a { color: var(--wf-ink-muted); font-weight: 600; }
.breadcrumb-item a:hover { color: var(--wf-brand); }
.breadcrumb-item.active { color: var(--wf-ink); font-weight: 600; }

.tooltip-inner {
    font-size: var(--wf-t-micro);
    font-weight: 600;
    background-color: var(--wf-navy);
    border-radius: var(--wf-r-sm);
    padding: 7px 11px;
}
.tooltip .arrow::before { border-top-color: var(--wf-navy); border-bottom-color: var(--wf-navy); }

.popover {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-lg);
    font-family: var(--wf-font);
    font-size: var(--wf-t-small);
}
.popover-header {
    background-color: var(--wf-surface-alt);
    border-bottom-color: var(--wf-hairline);
    font-weight: 700;
    border-radius: var(--wf-r-lg) var(--wf-r-lg) 0 0;
}


/*==========================================================================
   SOURCE: 30-chrome.css
  ==========================================================================*/

/* ===========================================================================
   Site chrome — header, navigation, mobile menu, footer
   ---------------------------------------------------------------------------
   A reproduction of webfort.co.uk's header and footer, rebuilt with .wf-*
   class names instead of the site's Tailwind utilities.

   Why not just reuse the site's markup and ship Tailwind? Because Bootstrap
   4.5.3 and Tailwind v4 disagree on the spacing utilities (bs mb-3 = 1rem, tw
   mb-3 = 0.75rem) and on .shadow, .border and .rounded, and WHMCS's templates
   lean on the Bootstrap versions heavily. Loading Tailwind after Bootstrap
   silently reflows every page in the client area. Hand-written classes cost a
   little duplication and buy total isolation.

   The values below are the site's, not approximations: geometry read off
   dist/index.html, colours and elevation from the tokens in 00-tokens.css.
   =========================================================================== */

/* The site's content measure is max-w-7xl (1280px) with a 32px gutter.
   Bootstrap's .container tops out at 1140px, so the chrome and the main body
   use .wf-shell instead and the two properties line up. */
.wf-shell {
    width: 100%;
    max-width: var(--wf-shell-max);
    margin-inline: auto;
    padding-inline: var(--wf-shell-gutter);
}
@media (max-width: 575.98px) {
    .wf-shell { padding-inline: 16px; }
}

/* ---------------------------------------------------------------------------
   Logged-in topbar (stock markup)

   Stock paints this #404040, a warm grey that belongs to no palette on the
   site. It becomes the navy from the footer, so the page is bracketed by the
   same colour top and bottom.
   --------------------------------------------------------------------------- */

header.header { background-color: transparent; }

header.header .topbar {
    padding: 0;
    background-color: var(--wf-navy);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--wf-t-micro);
}
header.header .topbar .btn {
    padding: 9px 12px;
    font-size: var(--wf-t-micro);
    font-weight: 600;
    color: rgba(255, 255, 255, 0.72);
    border-radius: 0;
}
header.header .topbar .btn:hover {
    color: #fff;
    transform: none;
    box-shadow: none;
    background-color: rgba(255, 255, 255, 0.06);
}
header.header .topbar .active-client .input-group-text {
    font-size: var(--wf-t-micro);
    color: rgba(255, 255, 255, 0.55);
    background-color: transparent;
    border: 0;
    padding: 0 4px;
}
header.header .topbar .active-client .btn.btn-active-client span {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.45);
}

/* ---------------------------------------------------------------------------
   Marketing navigation bar
   --------------------------------------------------------------------------- */

.wf-nav-outer {
    position: sticky;
    top: 0;
    z-index: 1030;
    padding: 16px 0;
    background-color: transparent;
    transition: padding var(--wf-ease);
}
/* Set by webfort.js once the page has scrolled: the bar tightens and gains a
   shadow, so it reads as lifted off the content rather than floating. */
.wf-nav-outer.is-stuck { padding: 8px 0; }
.wf-nav-outer.is-stuck .wf-nav { box-shadow: var(--wf-shadow-md); }

/* The glass card. Translucent white so content reads underneath while
   scrolling — the site's exact values. */
.wf-nav {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
    transition: box-shadow var(--wf-ease);
}

.wf-nav-logo { display: flex; align-items: center; flex-shrink: 0; }
.wf-nav-logo img { height: 40px; width: auto; display: block; }

.wf-nav-links {
    display: none;
    align-items: center;
    gap: 4px;
    margin-right: auto;
}
.wf-nav-actions { display: none; align-items: center; gap: 14px; }

@media (min-width: 992px) {
    .wf-nav-links,
    .wf-nav-actions { display: flex; }
}

.wf-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-small);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--wf-ink);
    background: none;
    border: 0;
    border-radius: var(--wf-r-md);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--wf-ease), transform var(--wf-ease);
}
/* The hover wash is a pseudo-element that scales in, rather than a background
   transition — it keeps the label crisp while the tint animates. */
.wf-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0.22));
    border-radius: var(--wf-r-md);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity var(--wf-ease), transform var(--wf-ease);
}
.wf-nav-link:hover,
.wf-dropdown:hover .wf-nav-link {
    color: var(--wf-brand);
    transform: translateY(-2px);
}
.wf-nav-link:hover::before { opacity: 1; transform: scale(1); }
.wf-nav-link > svg { width: 16px; height: 16px; transition: transform 0.3s ease; }

/* "Switch to Webfort" keeps the accent as a chip — the one nav item that is a
   filled surface. Accent is area-capped, and a 36px-tall chip is well inside
   the cap. */
.wf-nav-link-accent {
    color: var(--wf-ink);
    background: var(--wf-accent);
}
.wf-nav-link-accent::before { display: none; }
.wf-nav-link-accent:hover { color: var(--wf-ink); background: #7db8fc; }

/* Dropdowns */
.wf-dropdown { position: relative; }
.wf-dropdown:hover .wf-dropdown-trigger > svg { transform: rotate(180deg); }

.wf-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 250px;
    padding: 12px;
    background: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--wf-ease), visibility var(--wf-ease), transform var(--wf-ease);
    z-index: 20;
}
.wf-dropdown:hover .wf-dropdown-menu,
.wf-dropdown.is-open .wf-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.wf-dropdown-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink);
    border-radius: var(--wf-r-md);
    white-space: nowrap;
    transition: background-color var(--wf-ease), color var(--wf-ease), transform var(--wf-ease);
}
.wf-dropdown-item:hover {
    background: #f4f7fd;
    color: var(--wf-brand);
    transform: translateX(4px);
}
.wf-dropdown-item svg {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    padding: 8px;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.22));
    border-radius: var(--wf-r-md);
    transition: background var(--wf-ease), transform var(--wf-ease);
}
.wf-dropdown-item:hover svg {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0.45));
    transform: scale(1.1);
}

/* Currency switcher */
.wf-currency {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    margin: 0;
    background: var(--wf-surface-sunken);
    border-radius: var(--wf-r-full);
}
.wf-currency-btn {
    min-width: 30px;
    padding: 5px 9px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-micro);
    font-weight: 700;
    color: var(--wf-ink-muted);
    background: transparent;
    border: 0;
    border-radius: var(--wf-r-full);
    cursor: pointer;
    transition: background-color var(--wf-ease), color var(--wf-ease);
}
.wf-currency-btn:hover { color: var(--wf-ink); }
.wf-currency-btn.active {
    color: var(--wf-ink);
    background: var(--wf-surface);
    box-shadow: var(--wf-shadow-sm);
}

.wf-nav-phone {
    display: none;
    align-items: center;
    gap: 8px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    white-space: nowrap;
}
.wf-nav-phone svg { width: 16px; height: 16px; color: var(--wf-brand); }
.wf-nav-phone:hover { color: var(--wf-brand); }
@media (min-width: 1200px) { .wf-nav-phone { display: flex; } }

.wf-nav-cart {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--wf-ink-soft);
    padding: 4px;
}
.wf-nav-cart:hover { color: var(--wf-brand); }
.wf-nav-cart svg { width: 22px; height: 22px; }
.wf-nav-cart-count {
    position: absolute;
    top: -4px;
    right: -6px;
    min-width: 18px;
    padding: 0 5px;
    font-size: 10px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    color: #fff;
    background: var(--wf-brand);
    border-radius: var(--wf-r-full);
}
/* scripts.js writes a plain number into this span over ajax, so "empty" has to
   be expressible without the template re-rendering. */
.wf-nav-cart-count.is-empty { display: none; }

/* The one filled CTA in the chrome. Same shape as .btn-primary but declared
   here so the chrome does not depend on Bootstrap being present. */
.wf-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 26px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-small);
    font-weight: 700;
    color: #fff;
    background: var(--wf-brand);
    border: 0;
    border-radius: var(--wf-r-full);
    box-shadow: var(--wf-shadow-sm);
    white-space: nowrap;
    transition: background-color var(--wf-ease), transform var(--wf-ease), box-shadow var(--wf-ease);
}
.wf-btn-primary:hover {
    color: #fff;
    background: var(--wf-brand-700);
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-md);
}
.wf-btn-block { display: flex; width: 100%; padding: 15px 26px; font-size: var(--wf-t-body); }

/* Scoped to a max-width query rather than being hidden by a min-width one:
   this rule sits after the breakpoint block near the top of the file, and at
   equal specificity the later rule wins whether or not it is in a media
   query. */
.wf-nav-burger { display: none; }
@media (max-width: 991.98px) {
    .wf-nav-burger {
        display: flex;
        align-items: center;
        margin-left: auto;
        padding: 8px;
        color: var(--wf-ink);
        background: none;
        border: 0;
        cursor: pointer;
    }
}
.wf-nav-burger svg { width: 24px; height: 24px; }

/* ---------------------------------------------------------------------------
   Mobile menu
   --------------------------------------------------------------------------- */

.wf-mobile {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: var(--wf-surface);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wf-mobile.is-open { transform: translateX(0); }
/* [hidden] is removed by JS before the transform animates, so the panel is
   genuinely out of the accessibility tree while closed. */
.wf-mobile[hidden] { display: none; }
@media (min-width: 992px) { .wf-mobile { display: none !important; } }

.wf-mobile-inner {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 24px;
}
.wf-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 40px;
}
.wf-mobile-head img { height: 36px; width: auto; }
.wf-mobile-close {
    padding: 8px;
    color: var(--wf-ink);
    background: none;
    border: 0;
    cursor: pointer;
}
.wf-mobile-close svg { width: 24px; height: 24px; }

.wf-mobile-nav { display: flex; flex-direction: column; gap: 22px; }
.wf-mobile-heading {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
}
a.wf-mobile-heading:hover { color: var(--wf-brand); }
.wf-mobile-heading-accent {
    align-self: flex-start;
    padding: 4px 14px;
    background: var(--wf-accent);
    border-radius: var(--wf-r-md);
}
.wf-mobile-sub {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 16px 0 0 16px;
}
.wf-mobile-sub a {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: var(--wf-t-lead);
    color: var(--wf-ink-soft);
}
.wf-mobile-sub a:hover { color: var(--wf-brand); }
.wf-mobile-sub svg { width: 20px; height: 20px; flex-shrink: 0; }

.wf-mobile-foot {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: auto;
    padding-top: 40px;
}
.wf-mobile-phone {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: var(--wf-t-lead);
    font-weight: 600;
    color: var(--wf-brand);
}
.wf-mobile-phone svg { width: 20px; height: 20px; }

/* Stops the page behind the overlay from scrolling. Set by webfort.js. */
body.wf-menu-open { overflow: hidden; }

/* ---------------------------------------------------------------------------
   WHMCS sub-navigation bar

   Deliberately quiet: the marketing bar above owns the brand, this one owns
   wayfinding inside the account.
   --------------------------------------------------------------------------- */

.main-navbar-wrapper {
    padding: 0;
    background-color: transparent;
    border-bottom: 1px solid var(--wf-hairline);
}
.main-navbar-wrapper > .wf-shell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
.main-navbar-wrapper .navbar-nav .nav-item > a,
.main-navbar-wrapper .navbar-nav > li > a {
    display: block;
    padding: 14px 16px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    border-bottom: 2px solid transparent;
    transition: color var(--wf-ease), border-color var(--wf-ease);
}
.main-navbar-wrapper .navbar-nav > li > a:hover {
    color: var(--wf-brand);
    border-bottom-color: var(--wf-brand-300);
}
.main-navbar-wrapper .navbar-nav > li.active > a {
    color: var(--wf-brand);
    border-bottom-color: var(--wf-brand);
}
.main-navbar-wrapper .navbar-nav > li > a i { margin-right: 6px; color: var(--wf-ink-faint); }
.main-navbar-wrapper .navbar-nav > li > a:hover i,
.main-navbar-wrapper .navbar-nav > li.active > a i { color: inherit; }

.wf-subnav-toggle {
    padding: 12px 0;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    background: none;
    border: 0;
    border-radius: 0;
}
.wf-subnav-toggle:hover { transform: none; box-shadow: none; color: var(--wf-brand); }

/* One pill, not a field with a button bolted to it.
   The submit button inherits .btn-default — a white fill and a hairline border
   — which read as a separate boxed control sitting next to the input. Instead
   the .input-group carries the whole pill (fill, border, focus ring) and both
   children go transparent and borderless, leaving the magnifier as an icon
   inside the field. */
/* Selectors here are qualified with `header.header` to outrank the stock block
   at theme.css:9630, which styles this same control as `header.header .search`
   — (0,2,1), so a bare `.wf-kb-search .input-group` loses to it however late it
   loads. Stock's approach is the same as ours (border on the group, children
   transparent); only its values need replacing. Same pattern as
   footer.wf-footer. */
.wf-kb-search { margin-left: 20px; padding: 8px 0; }

header.header .wf-kb-search .input-group {
    width: auto;
    background: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
    transition: border-color var(--wf-ease), box-shadow var(--wf-ease), background-color var(--wf-ease);
}
/* :focus-within, so the ring belongs to the pill rather than to the bare
   input — otherwise it would appear around only part of the control. */
header.header .wf-kb-search .input-group:focus-within {
    background: var(--wf-surface);
    border-color: var(--wf-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}

header.header .wf-kb-search .form-control,
header.header .wf-kb-search .form-control:focus {
    min-width: 200px;
    padding: 8px 4px 8px 16px;
    font-size: var(--wf-t-small);
    background: transparent;
    border: 0;
    border-radius: var(--wf-r-full) 0 0 var(--wf-r-full);
    box-shadow: none;
}

header.header .wf-kb-search .btn,
header.header .wf-kb-search .btn:hover,
header.header .wf-kb-search .btn:focus,
header.header .wf-kb-search .btn:active {
    /* This is the exception to the field-height rule in 20-bootstrap.css: the
       nav pill is deliberately more compact than a form field, and its own
       padding sizes it. */
    height: auto;
    padding: 8px 16px 8px 8px;
    color: var(--wf-ink-muted);
    background: transparent;
    border: 0;
    border-radius: 0 var(--wf-r-full) var(--wf-r-full) 0;
    box-shadow: none;
    transform: none;
}
header.header .wf-kb-search .btn:hover { color: var(--wf-brand); }
@media (max-width: 1199.98px) {
    .wf-kb-search { width: 100%; margin: 0 0 12px; }
    .main-navbar-wrapper .navbar-nav > li > a { padding: 10px 0; border-bottom: 0; }
    .main-navbar-wrapper .navbar-nav > li.active > a { border-bottom: 0; }
}

/* ---------------------------------------------------------------------------
   Footer

   The site's navy band, five columns down to two on mobile. .wf-on-dark in
   00-tokens.css re-points the ink and hairline tokens for this whole subtree,
   so the rules below never name a light-or-dark colour directly.
   --------------------------------------------------------------------------- */

/* Selector is `footer.wf-footer`, not `.wf-footer`: the stock rule it has to
   beat is `footer.footer` (0,1,1), so a bare class would lose on specificity
   no matter how late it loads. The same applies to any other rule in this
   theme that targets an element WHMCS styles with a tag+class selector. */
footer.wf-footer {
    position: relative;
    margin: 80px 0 0;
    padding: 64px 0 40px;
    background-color: var(--wf-navy);
    color: var(--wf-ink-soft);
    font-size: var(--wf-t-small);
}

/* The seam. A hard edge between the white page and the navy band reads as two
   pages stitched together; this fades the page down into it over 96px. */
footer.wf-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 96px;
    pointer-events: none;
    background: linear-gradient(to bottom, var(--wf-surface-alt), transparent);
    opacity: 0.10;
}

.wf-footer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
}
@media (min-width: 768px)  { .wf-footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px)  { .wf-footer-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 48px; } }

.wf-footer-brand { grid-column: span 2; }
@media (min-width: 992px) { .wf-footer-brand { grid-column: span 1; } }
.wf-footer-logo { display: inline-block; margin-bottom: 24px; }
.wf-footer-logo img { height: 40px; width: auto; }
.wf-footer-brand p {
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
    margin-bottom: 16px;
}

.wf-region-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}
.wf-region-badge {
    padding: 2px 10px;
    font-family: var(--wf-font-mono);
    font-size: var(--wf-t-micro);
    color: var(--wf-ink-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
}
.wf-region-badge-live {
    color: var(--wf-accent-deep);
    background: rgba(59, 130, 246, 0.25);
    border-color: rgba(59, 130, 246, 0.60);
}

.wf-social { display: flex; gap: 12px; }
.wf-social a { color: var(--wf-ink-muted); }
.wf-social a:hover { color: var(--wf-ink); }
.wf-social svg { width: 20px; height: 20px; display: block; }

.wf-footer-col h4 {
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink);
    margin-bottom: 16px;
}
.wf-footer-col ul { list-style: none; margin: 0; padding: 0; }
.wf-footer-col li + li { margin-top: 12px; }
.wf-footer-col a {
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
}
.wf-footer-col a:hover { color: var(--wf-brand); }

.wf-footer-climate {
    margin-top: 56px;
    padding-top: 32px;
    border-top: 1px solid var(--wf-hairline);
    text-align: center;
}
.wf-footer-climate a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    max-width: 34rem;
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
    text-align: left;
}
.wf-footer-climate a:hover { color: var(--wf-ink); }
.wf-footer-climate strong { color: var(--wf-accent-deep); font-weight: 500; }
.wf-climate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: var(--wf-accent-deep);
    background: rgba(59, 130, 246, 0.25);
    border: 1px solid rgba(59, 130, 246, 0.60);
    border-radius: var(--wf-r-full);
}
.wf-climate-icon svg { width: 14px; height: 14px; }
.wf-climate-link {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-color: rgba(255, 255, 255, 0.3);
}
.wf-footer-climate a:hover .wf-climate-link { text-decoration-color: var(--wf-brand); }

.wf-footer-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid var(--wf-hairline);
}
@media (min-width: 768px) {
    .wf-footer-bottom { flex-direction: row; justify-content: space-between; }
    .wf-footer-legal { text-align: left; }
}
.wf-footer-legal { text-align: center; }
.wf-footer-legal p {
    margin: 0;
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
}
.wf-footer-address { font-size: var(--wf-t-micro) !important; margin-top: 4px !important; }

.wf-footer-meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 24px;
}
.wf-footer-meta a {
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
}
.wf-footer-meta a:hover { color: var(--wf-ink); }
.wf-footer-locale {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-micro);
    font-weight: 600;
    color: var(--wf-ink-muted);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
    cursor: pointer;
    transition: color var(--wf-ease), background-color var(--wf-ease);
}
.wf-footer-locale:hover { color: var(--wf-ink); background: rgba(255, 255, 255, 0.12); }


/*==========================================================================
   SOURCE: 40-whmcs.css
  ==========================================================================*/

/* ===========================================================================
   WHMCS component overrides
   ---------------------------------------------------------------------------
   Classes that belong to WHMCS rather than Bootstrap. The list was taken from
   the WHMCS-specific half of templates/webfort/css/theme.css (everything past
   the Bootstrap block, roughly line 7000 on):

       awk 'NR>7000' css/theme.css | grep -o "^[.#][a-zA-Z0-9_-]*" | sort -u

   Re-run that after a WHMCS upgrade to catch new components.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Breadcrumb bar

   Stock paints a #e9ecef strip edge to edge, which reads as a third piece of
   chrome under the two navigation bars. It becomes a hairline rule instead.
   --------------------------------------------------------------------------- */

.master-breadcrumb {
    background-color: transparent;
    border-bottom: 1px solid var(--wf-hairline);
}
.master-breadcrumb .breadcrumb {
    padding: 14px 0;
    font-size: var(--wf-t-small);
}
/* Pages outside the client area (login, register, password reset) render the
   breadcrumb nav with nothing in it, leaving an empty ruled strip under the
   navigation. :has() lets the wrapper collapse without touching the template
   — and where it is unsupported the result is the stock empty bar, not a
   broken layout. */
.master-breadcrumb:not(:has(.breadcrumb-item)) {
    display: none;
}

/* ---------------------------------------------------------------------------
   Status labels

   WHMCS ships ~35 states across six saturated fills. The severity mapping is
   WHMCS's — only the colour is changed, so a state that meant "bad" still
   means "bad". Solid saturated fills become tinted pills: a tint plus deep
   text reads as a status chip rather than a warning light, and matches the
   site's badge treatment.
   --------------------------------------------------------------------------- */

.label {
    display: inline-block;
    padding: 5px 11px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-micro);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.02em;
    border-radius: var(--wf-r-full);
    border: 1px solid transparent;
    white-space: nowrap;
    vertical-align: middle;
}

/* Stock green — the healthy states. */
.label.status-active,
.label.status-open,
.label.status-completed,
.label.status-paid,
.label.status-accepted,
.label.requestor-type-owner,
.label-success {
    color: #04663f;
    background-color: rgba(0, 153, 102, 0.12);
    border-color: rgba(0, 153, 102, 0.30);
}

/* Stock red — needs action or has failed. */
.label.status-pending,
.label.status-unpaid,
.label.status-inprogress,
.label-danger {
    color: #8f1f1f;
    background-color: rgba(212, 47, 47, 0.10);
    border-color: rgba(212, 47, 47, 0.30);
}

/* Stock orange — in flight, or waiting on someone. */
.label.status-pending-transfer,
.label.status-pending-registration,
.label.status-suspended,
.label.status-customer-reply,
.label.status-redemption,
.label.status-grace,
.label.status-refunded,
.label.requestor-type-registereduser,
.label-warning {
    color: var(--wf-gold-deep);
    background-color: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.36);
}

/* Stock blue — informational, in progress on our side. */
.label.status-onhold,
.label.status-payment-pending,
.label.status-delivered,
.label.status-answered,
.label.requestor-type-operator,
.label-info,
.label-primary {
    color: var(--wf-accent-deep);
    background-color: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.28);
}

/* Stock grey/black — terminal states. Nothing more will happen to these, so
   they are the quietest thing in the row. */
.label.status-closed,
.label.status-cancelled,
.label.status-terminated,
.label.status-expired,
.label.status-transferred-away,
.label.status-fraud,
.label.status-lost,
.label.status-dead,
.label.status-collections,
.label.requestor-type-authorizeduser,
.label.requestor-type-subaccount,
.label-default {
    color: var(--wf-ink-muted);
    background-color: var(--wf-surface-sunken);
    border-color: var(--wf-hairline);
}

/* ---------------------------------------------------------------------------
   Legacy "field" form skin

   The registration form and the cart checkout do not use plain Bootstrap
   inputs. They use an older WHMCS pattern — .prepend-icon wrapping a
   .field-icon label and a .field.form-control — and theme.css skins it under
   `#registration`, an ID selector that outranks anything in 20-bootstrap.css
   no matter how late it loads. Left alone, the two most important forms in the
   client area (sign up, and pay us money) are the only ones still wearing
   stock WHMCS.

   The icon column is absolutely positioned and stock gives it a fixed 36px
   height to match the old input height, so the height and line-height have to
   move together with the field or the icons float above the text.
   --------------------------------------------------------------------------- */

/* Note the missing padding-left. The phone field is wrapped by intl-tel-input,
   which computes its own left padding from the width of the dial-code chip
   (.iti-sdc-2 -> 76px, -sdc-3 -> 84px, and so on). Those rules are only
   (0,4,1) specific, so anything of ours prefixed with #registration outranks
   them and drops the text under the flag. Left padding is therefore set below
   with a child combinator, which the phone input — a grandchild, nested inside
   the plugin's wrapper — does not match. */
#registration .field,
#registration .form-control,
.prepend-icon .field,
.prepend-icon .form-control {
    height: auto;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-right: 16px;
    font-size: var(--wf-t-small);
    color: var(--wf-ink);
    background-color: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
}
#registration .field:focus,
#registration .form-control:focus,
.prepend-icon .field:focus {
    background-color: var(--wf-surface);
    border-color: var(--wf-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}
#registration .field[disabled],
#registration .field[readonly],
#registration .form-control[disabled],
#registration .form-control[readonly] {
    background-color: var(--wf-surface-sunken);
    color: var(--wf-ink-muted);
}

/* Room for the icon column, and the icon centred against the taller field.
   Child combinator on purpose — see the note above. */
.prepend-icon > .field,
.prepend-icon > .form-control { padding-left: 44px; }

/* Wherever a phone field appears — registration, checkout, the contact forms —
   intl-tel-input replaces our icon column with its own flag-and-dial-code chip.
   The chip ships square, so its two left corners printed outside the 12px curve
   of the field underneath. It sits inset by the width of the border, which puts
   its matching inner radius one pixel tighter than the field's. */
.intl-tel-input .selected-flag {
    border-radius: calc(var(--wf-r-md) - 1px) 0 0 calc(var(--wf-r-md) - 1px);
}

#registration .prepend-icon .field-icon,
.prepend-icon .field-icon {
    width: 44px;
    height: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
#registration .field-icon i,
.prepend-icon .field-icon i {
    font-size: 14px;
    color: var(--wf-ink-faint);
}

#registration label,
.prepend-icon label:not(.field-icon) {
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink);
}
#registration .sub-heading {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wf-ink);
}
#registration .input-group-lg > .form-control {
    height: auto;
    padding: 14px 18px;
    font-size: var(--wf-t-body);
    border-radius: var(--wf-r-md) 0 0 var(--wf-r-md);
}

/* ---------------------------------------------------------------------------
   Toggle switches (bootstrap-switch)

   Used for the marketing opt-in on registration and for several account
   settings. Stock renders them in Bootstrap's green/red.
   --------------------------------------------------------------------------- */

.bootstrap-switch {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
    overflow: hidden;
}
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success {
    background: var(--wf-brand);
    color: #fff;
}
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-default {
    background: var(--wf-surface-sunken);
    color: var(--wf-ink-muted);
}
.bootstrap-switch .bootstrap-switch-label {
    background: var(--wf-surface);
}

/* ---------------------------------------------------------------------------
   Sidebar
   --------------------------------------------------------------------------- */

.sidebar .card,
.sidebar .panel {
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
    margin-bottom: 16px;
}
.sidebar .card-title,
.sidebar .panel-heading {
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
    margin: 0;
    padding: 16px 20px;
}
.sidebar .list-group { border-radius: 0; }
.sidebar .list-group-item {
    padding: 11px 20px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    border: 0;
    border-top: 1px solid var(--wf-hairline);
    border-radius: 0;
    background-color: transparent;
    transition: background-color var(--wf-ease), color var(--wf-ease), box-shadow var(--wf-ease);
}
.sidebar .list-group-item:hover {
    background-color: #f4f7fd;
    color: var(--wf-brand);
}
/* The :hover and :focus variants are not redundant. Stock declares this as
   `.active, .active:hover, .active:focus` (theme.css:10439) to fill the row
   with #666, and while the bare selector is the same (0,2,0) as ours and loses
   on load order, the other two are (0,3,0) and win. A clicked link keeps focus
   after the pointer leaves, so the row stayed dark grey until you clicked
   somewhere else. */
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover,
.sidebar .list-group-item.active:focus {
    color: var(--wf-brand);
    background-color: rgba(37, 99, 235, 0.08);
    /* Same rule sets border-color: #666, which would otherwise survive as a
       dark hairline above the active row once the fill was gone. */
    border-color: var(--wf-hairline);
    /* An inset bar rather than a fill: the sidebar is navigation, and a solid
       brand block there competes with the page's primary action. */
    box-shadow: inset 3px 0 0 var(--wf-brand);
}

/* Stock pills these counts in white on a fixed 28px (theme.css:10432), which is
   invisible against a white panel — so every row reads as a bare numeral except
   the active one, where the dark fill made a white lozenge appear from nowhere.
   Bare everywhere is the consistent answer. */
.sidebar .list-group-item .badge {
    width: auto;
    min-width: 20px;
    padding: 0;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    color: var(--wf-ink-faint);
    background-color: transparent;
}
.sidebar .list-group-item:hover .badge,
.sidebar .list-group-item.active .badge { color: var(--wf-brand); }
.sidebar .list-group-item i,
.sidebar .list-group-item .fa-fw { color: var(--wf-ink-faint); }
.sidebar .list-group-item:hover i,
.sidebar .list-group-item.active i { color: var(--wf-brand); }

/* Recent Tickets renders each title inside a `.truncate` div, and theme.css:9863
   gives that the right nowrap/ellipsis treatment — but it never fires, because
   the wrapper above it is `display: flex` (theme.css:10455) and a flex item
   defaults to `min-width: auto`, i.e. it refuses to shrink below its own
   min-content. For nowrap text min-content is the whole string, so the label
   sizes to the full title and the ellipsis has nothing to clip against; the
   name just runs out past the panel. Unlocking the shrink is what makes the
   truncation stock already asked for actually happen. */
.sidebar .sidebar-menu-item-label {
    flex: 1 1 auto;
    min-width: 0;
}

/* ---------------------------------------------------------------------------
   Client area home — stat tiles

   Stock renders these as a flat #f8f8f8 strip with a 55px light-grey Font
   Awesome glyph floated behind the number, growing to 70px on hover. Rebuilt
   as four cards on the site's surface, with the icon demoted to a small
   brand-tinted tile so the number is the thing you read.
   --------------------------------------------------------------------------- */

/* The columns are .col-6.col-xl-3 inside a .row.no-gutters, so they already
   total exactly 100%. Spacing has to come from padding inside the columns —
   a `gap` on the row pushes the fourth tile onto its own line. */
.tiles .row { margin: 0 -8px; }
.tiles .row > div { padding: 0 8px; margin-bottom: 16px; }
.tiles .tile {
    position: relative;
    height: 100%;
    padding: 20px 22px;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-right: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
    transition: transform var(--wf-ease), box-shadow var(--wf-ease), border-color var(--wf-ease);
}
.tiles .row > div:last-child .tile { border: 1px solid var(--wf-hairline); }
.tiles .tile:hover {
    background-color: var(--wf-surface);
    border-color: #c7d7f5;
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-md);
}
.tiles .tile .stat {
    margin-top: 14px;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--wf-ink);
}
.tiles .tile .title {
    margin-top: 4px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
}
.tiles .tile i,
.tiles .tile:hover i {
    position: absolute;
    top: 18px;
    right: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    font-size: 16px;
    line-height: 1;
    color: var(--wf-brand);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.22));
    border-radius: var(--wf-r-md);
}
/* The stock "highlight" underline carried the per-tile accent colour. The
   palette it drew from does not exist here, so it goes. */
.tiles .tile .highlight { display: none; }

/* ---------------------------------------------------------------------------
   Client area home — panels
   --------------------------------------------------------------------------- */

.client-home-cards .card {
    font-size: var(--wf-t-small);
    border-radius: var(--wf-r-lg);
}
.client-home-cards .card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--wf-hairline);
    font-weight: 700;
    padding: 18px 20px;
}
.client-home-cards .card-title { font-size: var(--wf-t-body); }
.client-home-cards .list-group {
    border-top: 0 !important;
    border-bottom: 0 !important;
}
.client-home-cards .list-group .list-group-item {
    padding: 11px 20px;
    border-bottom: 1px solid var(--wf-hairline);
}
.client-home-cards small { color: var(--wf-ink-muted); }

/* Active products/services rows */
.div-service-item {
    padding: 12px 0;
    border-radius: var(--wf-r-md);
    transition: background-color var(--wf-ease);
}
.div-service-item:hover { background-color: var(--wf-surface-alt); }
.div-service-name > span:first-child {
    font-weight: 600;
    color: var(--wf-ink);
}
.div-service-name > span + span {
    font-size: var(--wf-t-micro);
    color: var(--wf-ink-muted);
}
/* Stock forces .label to white text inside service rows, which erases the
   tinted pills above. */
.div-service-status .label { color: inherit; }

/* WHMCS colour-codes panels with .card-accent-* (a coloured edge) and fills
   with .bg-color-*, drawing on a 20-hue palette that has no equivalent here.
   Both collapse onto the brand tint.
   An inset shadow rather than a border, so the bar is clipped by the card's
   16px radius instead of sitting square against the rounded corner. */
[class*="card-accent-"] {
    border-top: 0;
    border-left: 0;
    box-shadow: var(--wf-shadow-md), inset 3px 0 0 var(--wf-brand);
}
[class*="bg-color-"] {
    background-color: rgba(37, 99, 235, 0.08) !important;
    color: var(--wf-accent-deep) !important;
}

/* ---------------------------------------------------------------------------
   Invoices, quotes, tickets
   --------------------------------------------------------------------------- */

.invoice-summary-table th { color: var(--wf-ink-muted); font-weight: 600; }
.invoice-summary-table td { font-weight: 600; }

.view-ticket .ticket-reply {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    background-color: var(--wf-surface);
    margin-bottom: 16px;
    overflow: hidden;
}
/* The customer's own replies are tinted so a thread scans as a conversation
   rather than a stack of identical boxes. */
.view-ticket .ticket-reply.reply-client,
.view-ticket .ticket-reply.client {
    background-color: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.22);
}
.view-ticket .ticket-subject { font-weight: 700; letter-spacing: -0.01em; }

/* ---------------------------------------------------------------------------
   Domain search and TLD pricing
   --------------------------------------------------------------------------- */

.home-domain-search,
.domain-checker-bg {
    background-color: var(--wf-surface-alt);
    border-bottom: 1px solid var(--wf-hairline);
}
.featured-tld,
.spotlight-tld {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
    background-color: var(--wf-surface);
    box-shadow: var(--wf-shadow-sm);
}
.tld-sale-group-hot,
.tld-sale-group-new,
.tld-sale-group-sale,
.spotlight-tld-hot,
.spotlight-tld-new,
.spotlight-tld-sale {
    /* Gold is the site's scarcity signal — a promoted TLD is exactly the sort
       of thing it is reserved for. */
    color: var(--wf-gold-deep);
    background-color: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.36);
}

/* ---------------------------------------------------------------------------
   Long-form content

   Both knowledgebasearticle.tpl and announcements.tpl wrap their body in a
   bare <article>. The HTML inside comes from whatever staff typed into the
   admin editor, so it carries no classes — a table is a <table>, not a
   .table, and code is a bare <pre>. Everything a normal editor can produce
   needs to look right without help.
   --------------------------------------------------------------------------- */

.card-body > article {
    font-size: var(--wf-t-body);
    line-height: 1.65;
    color: var(--wf-ink-soft);
}
.card-body > article > *:first-child { margin-top: 0; }
.card-body > article > *:last-child { margin-bottom: 0; }

.card-body > article h2,
.card-body > article h3,
.card-body > article h4 {
    margin: 32px 0 12px;
    color: var(--wf-ink);
}
.card-body > article h2 { font-size: 1.5rem; }
.card-body > article h3 { font-size: 1.25rem; }
.card-body > article h4 { font-size: 1.0625rem; }

.card-body > article p { margin-bottom: 16px; }
.card-body > article ul,
.card-body > article ol { margin: 0 0 16px; padding-left: 22px; }
.card-body > article li { margin-bottom: 8px; }
.card-body > article strong { color: var(--wf-ink); font-weight: 700; }
.card-body > article a { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* Code. `overflow-x: auto` matters: a long command with no spaces would
   otherwise stretch the card and give the whole page a horizontal scrollbar. */
.card-body > article pre {
    margin: 0 0 16px;
    padding: 16px 18px;
    overflow-x: auto;
    font-size: var(--wf-t-small);
    line-height: 1.55;
    color: var(--wf-ink);
    background-color: var(--wf-surface-sunken);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
}
.card-body > article pre code {
    padding: 0;
    background: none;
    border: 0;
    font-size: inherit;
}
/* Inline code, as distinct from a block. */
.card-body > article code {
    padding: 2px 6px;
    font-size: 0.9em;
    color: var(--wf-accent-deep);
    background-color: rgba(37, 99, 235, 0.08);
    border-radius: 6px;
}

.card-body > article blockquote {
    margin: 0 0 16px;
    padding: 4px 0 4px 18px;
    color: var(--wf-ink-muted);
    border-left: 3px solid var(--wf-brand-300);
}

/* Tables written in the editor arrive without Bootstrap's .table class. */
.card-body > article table {
    width: 100%;
    margin-bottom: 20px;
    font-size: var(--wf-t-small);
    border-collapse: collapse;
}
.card-body > article table th {
    padding: 12px 14px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--wf-ink-muted);
    background-color: var(--wf-surface-alt);
    border-bottom: 1px solid var(--wf-hairline);
}
.card-body > article table td {
    padding: 12px 14px;
    border-top: 1px solid var(--wf-hairline);
    vertical-align: top;
}
.card-body > article img { max-width: 100%; height: auto; border-radius: var(--wf-r-md); }

/* ---------------------------------------------------------------------------
   Knowledgebase and announcements
   --------------------------------------------------------------------------- */

.kb-article-item {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    padding: 20px 24px;
    margin-bottom: 12px;
    background-color: var(--wf-surface);
    transition: border-color var(--wf-ease), transform var(--wf-ease), box-shadow var(--wf-ease);
}
.kb-article-item:hover {
    border-color: #c7d7f5;
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-md);
}

/* ---------------------------------------------------------------------------
   Misc chrome
   --------------------------------------------------------------------------- */

.verification-banner {
    background-color: rgba(245, 158, 11, 0.12);
    border-bottom: 1px solid rgba(245, 158, 11, 0.36);
    color: var(--wf-gold-deep);
}

#fullpage-overlay {
    background-color: rgba(11, 26, 58, 0.72);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
#fullpage-overlay .msg { font-family: var(--wf-font); font-weight: 600; color: #fff; }

.client-alerts li a {
    display: flex;
    gap: 10px;
    padding: 10px 14px;
    border-radius: var(--wf-r-sm);
    font-size: var(--wf-t-small);
    color: var(--wf-ink);
}
.client-alerts li a:hover { background-color: #f4f7fd; }

/* WHMCS renders an empty .card-footer on cards with no actions, leaving a
   stray 44px grey bar under otherwise clean cards. */
.card-footer:empty { display: none; }


/*==========================================================================
   SOURCE: 60-cart.css
  ==========================================================================*/

/* ===========================================================================
   Order form / cart
   ---------------------------------------------------------------------------
   WHY EVERY SELECTOR STARTS WITH `body`

   This used to live at templates/orderforms/webfort_cart/css/custom.css, where
   the inherited standard_cart/common.tpl picked it up automatically. That was
   tidy, but the link it generates is:

       <link href="{$__assetPath__}?v={$versionHash}">

   and $versionHash only changes when WHMCS itself is upgraded. Editing the
   cart styles produced a byte-different file at a byte-identical URL, so
   anything holding a cached copy — a browser mid-session, or Cloudflare, which
   sits in front of this site — kept serving the old one. It cost an hour of
   "my CSS isn't applying" before the cause was clear.

   So the cart styles moved into the client theme's build, where they get the
   content hash from bin/wf-build-css.sh and a changed file always means a
   changed URL.

   The catch: webfort.css loads from <head>, while standard_cart's own bundle
   loads from the <body> (common.tpl is included by the cart page templates).
   Stock therefore comes LAST, and 37 of the selectors below are byte-identical
   to one in standard_cart/css/style.css — every one of them would have flipped
   back to WHMCS's styling.

   Prefixing with `body` adds one element to the specificity and settles all 37
   without touching load order. Keep it on anything new here: without it, a new
   rule that happens to collide with stock loses silently.

   Tokens (--wf-*) come from 00-tokens.css, earlier in the same bundle.
   ---------------------------------------------------------------------------
   The wrapper id stays #order-standard_cart. templates/orderforms/webfort_cart
   is a child theme with no templates of its own, so the markup is
   standard_cart's — and that directory must not be renamed to `webfort`, since
   assetPath resolves bare filenames by theme name and the client theme would
   win. See UPGRADING.md.
   =========================================================================== */

/* The wrapper id stays #order-standard_cart: this is a child theme, so the
   markup is standard_cart's and renaming it would mean copying all ten
   templates that hardcode it. */

body #order-standard_cart {
    font-family: var(--wf-font);
    color: var(--wf-ink);
}

body #order-standard_cart h1,
body #order-standard_cart h2,
body #order-standard_cart h3 {
    font-family: var(--wf-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
}

/* ---------------------------------------------------------------------------
   Form controls, cart-wide

   standard_cart re-skins every field under its own id:

       #order-standard_cart .field,
       #order-standard_cart .form-control { border-radius: 3px; border: 1px solid #ddd }

   That is (1,2,0) and beats the `.form-control` rule in 20-bootstrap.css, so
   until this block existed every input, select and textarea in the cart — the
   promo code box, the checkout fields, the domain transfer row — wore stock's
   3px corners and grey border while the rest of the client area wore ours.
   --------------------------------------------------------------------------- */

body #order-standard_cart .field,
body #order-standard_cart .form-control {
    height: auto;
    padding: 12px 16px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-small);
    line-height: 1.5;
    color: var(--wf-ink);
    background-color: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
    transition: border-color var(--wf-ease), box-shadow var(--wf-ease), background-color var(--wf-ease);
}
body #order-standard_cart .field:focus,
body #order-standard_cart .form-control:focus {
    outline: none;
    background-color: var(--wf-surface);
    border-color: var(--wf-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}
body #order-standard_cart .form-control::placeholder {
    color: var(--wf-ink-faint);
}

/* The two phone fields on checkout — the account one and the domain contact
   one — are wrapped by intl-tel-input, which lays a flag-and-dial-code chip
   over the left end of the input and keeps the text clear of it with its own
   padding-left (76px at .iti-sdc-2, 84px at -sdc-3, and up from there as the
   dial code gets longer). Those rules top out at (0,5,1), so the `padding`
   shorthand above — carrying an id — was resetting the left value to 16px and
   the number typed itself underneath the flag. Restated here at id strength.
   Same trap the registration form sidesteps with a child combinator; that
   dodge is not available here because this rule is not scoped to a wrapper. */
body #order-standard_cart .intl-tel-input.allow-dropdown input[type=tel],
body #order-standard_cart .intl-tel-input.separate-dial-code input[type=tel] { padding-left: 52px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-2 input[type=tel] { padding-left: 66px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-3 input[type=tel] { padding-left: 74px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-4 input[type=tel] { padding-left: 82px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.iti-sdc-5 input[type=tel] { padding-left: 90px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-2 input[type=tel] { padding-left: 76px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-3 input[type=tel] { padding-left: 84px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-4 input[type=tel] { padding-left: 92px; }
body #order-standard_cart .intl-tel-input.separate-dial-code.allow-dropdown.iti-sdc-5 input[type=tel] { padding-left: 100px; }

/* Native selects keep the OS arrow, which reads as a different toolkit next to
   everything else. Replaced with the same chevron the marketing nav uses, and
   the extra right padding keeps the value clear of it. */
body #order-standard_cart select.form-control {
    padding-right: 38px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235b6a7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

body #order-standard_cart .header-lined {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--wf-hairline);
}
body #order-standard_cart .header-lined h1 { font-size: 2rem; margin: 0; }
body #order-standard_cart .header-lined p {
    margin: 8px 0 0;
    color: var(--wf-ink-muted);
    font-size: var(--wf-t-lead);
}

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

/* Stock lays a product card out with floats: div.product-desc floats left at
   60%, footer floats right at 40%, so the price and button sit beside the
   feature list. The site's plan cards are a single column with the price and
   CTA pinned to the bottom, so the float model is replaced with flex.
   Everything here therefore has to (a) match stock's
   `#order-standard_cart .products .product ...` specificity, and (b) unset
   float and width explicitly — changing the parent to flex is not enough on
   its own, since the widths would survive as flex-basis hints. */

body #order-standard_cart .products { margin: 0; }

body #order-standard_cart .products .product {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    margin: 0 0 24px;
    background: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-md);
    overflow: hidden;
    transition: transform var(--wf-ease), box-shadow var(--wf-ease), border-color var(--wf-ease);
}
body #order-standard_cart .products .product:hover {
    border-color: #c7d7f5;
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-lg);
}

body #order-standard_cart .products .product header {
    padding: 20px 24px;
    margin: 0;
    background: transparent;
    border-bottom: 1px solid var(--wf-hairline);
    border-radius: 0;
}
body #order-standard_cart .products .product header span {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wf-ink);
}
body #order-standard_cart .products .product header .qty {
    font-size: var(--wf-t-micro);
    font-style: normal;
    color: var(--wf-ink-muted);
}

body #order-standard_cart .products .product div.product-desc {
    float: none;
    width: auto;
    flex: 1 1 auto;
    padding: 18px 24px;
    font-size: var(--wf-t-small);
    color: var(--wf-ink-soft);
}
body #order-standard_cart .products .product div.product-desc ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
body #order-standard_cart .products .product div.product-desc li { padding: 4px 0; }
/* Products with no feature list still render an empty <ul>, which would leave
   a band of dead space between the name and the price. */
body #order-standard_cart .products .product div.product-desc:not(:has(li)) {
    padding: 0;
}
/* ...and with it collapsed, the header rule and the footer rule would sit a
   few pixels apart with nothing between them. */
body #order-standard_cart .products .product div.product-desc:not(:has(li)) + footer {
    border-top: 0;
}
body #order-standard_cart .products .product span.feature-value {
    font-weight: 700;
    color: var(--wf-ink);
}

body #order-standard_cart .products .product footer {
    float: none;
    width: auto;
    margin: 0;
    padding: 18px 24px 22px;
    font-size: var(--wf-t-small);
    text-align: left;
    border-top: 1px solid var(--wf-hairline);
}
body #order-standard_cart .products .product footer .btn { width: 100%; }

/* The markup is:
       <div class="product-pricing"><span class="price">$1.00 USD</span><br>
       Monthly<br></div>
   The billing cycle is a bare text node with no element to hook, so the
   container carries the small muted style and .price overrides it — rather
   than the other way round, which would leave "Monthly" set at 28px. */
body #order-standard_cart .products .product div.product-pricing {
    margin-bottom: 16px;
    font-size: var(--wf-t-small);
    font-weight: 500;
    color: var(--wf-ink-muted);
}
body #order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
}
/* .price is block-level now, so the <br> after it would add a blank line. */
body #order-standard_cart .products .product div.product-pricing br { display: none; }

/* ---------------------------------------------------------------------------
   Cart sidebar
   --------------------------------------------------------------------------- */

body #order-standard_cart .cart-sidebar .panel,
body #order-standard_cart .cart-sidebar .card {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
    margin-bottom: 16px;
}
body #order-standard_cart .cart-sidebar .panel-heading,
body #order-standard_cart .cart-sidebar .card-header {
    padding: 16px 20px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
    background: transparent;
    border-bottom: 1px solid var(--wf-hairline);
}
body #order-standard_cart .cart-sidebar .list-group-item {
    padding: 11px 20px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    border: 0;
    border-top: 1px solid var(--wf-hairline);
    border-radius: 0;
}
body #order-standard_cart .cart-sidebar .list-group-item:hover {
    background: #f4f7fd;
    color: var(--wf-brand);
}
body #order-standard_cart .cart-sidebar .list-group-item.active {
    color: var(--wf-brand);
    background: rgba(37, 99, 235, 0.08);
    box-shadow: inset 3px 0 0 var(--wf-brand);
}

/* ---------------------------------------------------------------------------
   Review & checkout item list

   standard_cart's accent throughout this area is #058 (#005588) — a teal-blue
   that belongs to no Webfort palette. It appears on the item list header, the
   list's bottom rule, the sub-heading text and the Empty Cart button.
   --------------------------------------------------------------------------- */

body #order-standard_cart .view-cart-items-header {
    padding: 12px 16px;
    background-color: var(--wf-surface-alt);
    color: var(--wf-ink-muted);
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 1px solid var(--wf-hairline);
    border-bottom: 0;
    border-radius: var(--wf-r-lg) var(--wf-r-lg) 0 0;
}
body #order-standard_cart .view-cart-items {
    margin-bottom: 20px;
    border: 1px solid var(--wf-hairline);
    border-radius: 0 0 var(--wf-r-lg) var(--wf-r-lg);
}
/* The last row's fill has to be rounded off itself rather than clipped by the
   container. `overflow: hidden` here is the shorter way to do it and was what
   this used, but it also clips the billing-cycle dropdown a domain row opens —
   the menu is 188px tall and the box ended 35px below the toggle. */
body #order-standard_cart .view-cart-items .item:last-child {
    border-radius: 0 0 calc(var(--wf-r-lg) - 1px) calc(var(--wf-r-lg) - 1px);
}
body #order-standard_cart .view-cart-items .item {
    padding: 16px;
    font-size: var(--wf-t-small);
    background-color: var(--wf-surface);
    border-top: 1px solid var(--wf-hairline);
}
body #order-standard_cart .view-cart-items .item:first-child { border-top: 0; }
/* Stock zebra-stripes with #eee and pulls the row up with a negative margin,
   which overlaps the row above it. Both go. */
body #order-standard_cart .view-cart-items .item:nth-child(even) {
    margin: 0;
    line-height: inherit;
    background-color: var(--wf-surface-alt);
}

/* Stock pulls the wrapper up with `margin-top: -20px` so the link tucks into
   the gap under the items box, and insets it 20px from the right. That works
   for a text link; a real button ends up with nothing above or below it and
   short of the box's own right edge. Give it room and let it line up. */
body #order-standard_cart .empty-cart {
    margin: 0 0 24px;
    padding: 0;
}

/* Stock ships this as .btn-link.btn-xs, so it rendered as bare underlined text
   with a bin next to it. It is a destructive action sitting directly under the
   cart contents — it needs to read as a button you have to aim at, not as a
   caption. Outlined rather than filled, because it is not the action anyone
   came here for. */
body #order-standard_cart .empty-cart .btn {
    padding: 8px 18px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-muted);
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
    text-decoration: none;
}
body #order-standard_cart .empty-cart .btn:hover,
body #order-standard_cart .empty-cart .btn:focus {
    color: var(--wf-negative);
    background-color: rgba(212, 47, 47, 0.06);
    border-color: rgba(212, 47, 47, 0.32);
    text-decoration: none;
    transform: none;
    box-shadow: none;
}
body #order-standard_cart .empty-cart .btn i { margin-right: 6px; }

/* Stock draws a section heading as a 1px rule with the label sitting on top of
   it: the div is `height: 0` with a border-top, and the span is pulled up 11px
   and given the page background so it punches a hole in the line
   (style.css:156). It reads as a divider that happens to have words in it, and
   the centred blue label belongs to a different design. Left-aligned heading,
   no rule — the cards below it already do the dividing. */
body #order-standard_cart .sub-heading,
body #order-standard_cart .sub-heading-borderless {
    height: auto;
    margin: 32px 0 14px;
    text-align: left;
    border-top: 0;
}
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    display: block;
    position: static;
    top: auto;
    padding: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
    background: transparent;
}

/* ---------------------------------------------------------------------------
   Domains Configuration

   Every group on this page is a bare .row on the page background, so the
   registration details, the nameservers and any domain addons all run together
   with nothing to separate them but those rules. One card per group.
   --------------------------------------------------------------------------- */

body #order-standard_cart #frmConfigureDomains > .row {
    /* .row carries negative side margins; they have to go before it can hold a
       background without the fill bleeding past the column it sits in. */
    margin: 0 0 20px;
    /* 4px, not 24px: each .form-group inside already contributes 20px below. */
    padding: 24px 24px 4px;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
}
body #order-standard_cart #frmConfigureDomains > p {
    margin-bottom: 20px;
    color: var(--wf-ink-muted);
}
/* A label with no `for` is a caption over a value, not a field label — the
   registration period and hosting pairs. Field labels keep the form styling. */
body #order-standard_cart #frmConfigureDomains .form-group > label:not([for]) {
    display: block;
    margin-bottom: 4px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
}
/* The markup separates caption from value with a <br>, which the block label
   has already done — leaving an empty line between the two. */
body #order-standard_cart #frmConfigureDomains .form-group > label:not([for]) + br { display: none; }
/* The value is a bare text node, so it can only be reached through the group. */
body #order-standard_cart #frmConfigureDomains .form-group:has(> label:not([for])) {
    font-size: var(--wf-t-body);
    color: var(--wf-ink);
}
/* The "no hosting" prompt is an upsell link, and stock hard-codes it to #cc0000
   with an inline style — nothing has gone wrong, so it should not be using the
   error colour. Inline styles need !important to beat. */
body #order-standard_cart #frmConfigureDomains a[style*="cc0000"] {
    color: var(--wf-brand) !important;
    font-weight: 600;
}

body #order-standard_cart .btn-checkout { padding: 15px 34px; }

/* ---------------------------------------------------------------------------
   Order summary
   --------------------------------------------------------------------------- */

body #order-standard_cart .order-summary {
    background: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-md);
    padding: 24px;
}
/* The h2 is in this list because stock fills the panel with #666 and sets the
   heading to #fff (style.css:450,458). We replaced the fill with the site's
   white card and left the heading white on white — it has been invisible on
   every cart page. `text-align: center` comes from the same stock rule and has
   to be undone here for the same reason. */
body #order-standard_cart .order-summary h2,
body #order-standard_cart .order-summary h3,
body #order-standard_cart .order-summary .summary-title {
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-align: left;
    color: var(--wf-ink-muted);
    padding: 0;
    margin: 0 0 16px;
}
body #order-standard_cart .order-summary hr { border-color: var(--wf-hairline); }
body #order-standard_cart .order-summary .total,
body #order-standard_cart .order-summary .cart-total {
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
}

/* The grey box inside the summary. It is a second surface nested in what is
   already a card, from a design where the card itself was dark grey — so it
   just needs to disappear and let the card be the panel. */
body #order-standard_cart .summary-container {
    padding: 0;
    min-height: 0;
    font-size: var(--wf-t-small);
    background-color: transparent;
    border-radius: 0;
}
body #order-standard_cart .order-summary .product-name {
    font-size: var(--wf-t-body);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--wf-ink);
}
/* Stock italicises this. Italic is not in the type system anywhere on the
   site, and it reads as emphasis on what is only a category label. */
body #order-standard_cart .order-summary .product-group {
    margin: 2px 0 14px;
    font-style: normal;
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
}
body #order-standard_cart .order-summary .summary-totals,
body #order-standard_cart .order-summary .subtotal,
body #order-standard_cart .order-summary .bordered-totals {
    border-color: var(--wf-hairline);
}
body #order-standard_cart .order-summary .summary-totals {
    margin: 12px 0;
    padding: 12px 0;
    color: var(--wf-ink-soft);
}
/* The one number the page is about. Same treatment as the stat tiles. */
body #order-standard_cart .order-summary .total-due-today .amt {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--wf-ink);
}
body #order-standard_cart .order-summary .total-due-today span:not(.amt) {
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
}
body #order-standard_cart .order-summary .recurring-charges {
    font-style: normal;
    font-size: var(--wf-t-small);
    color: var(--wf-ink-muted);
}
body #order-standard_cart .order-summary .btn-continue-shopping { color: var(--wf-ink-soft); }

/* ---------------------------------------------------------------------------
   Product description

   Stock renders this as a #f8f8f8 band with a hairline above and below and no
   corners (style.css:437) — a grey strip laid across the page rather than a
   surface on it. Same card as everything else instead.
   --------------------------------------------------------------------------- */

body #order-standard_cart .product-info {
    margin: 0 0 24px;
    padding: 24px;
    font-size: var(--wf-t-small);
    color: var(--wf-ink-soft);
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
}
body #order-standard_cart .product-info .product-title {
    margin: 0 0 10px;
    font-size: 1.375rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
}
body #order-standard_cart .product-info p:last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Promo / tax panel on the review page

   Stock draws this as a folder tab attached to a #f8f8f8 slab
   (style.css:816-831). Rebuilt as one card with the tabs along the top, so it
   is the same object as the rest of the page.
   --------------------------------------------------------------------------- */

body #order-standard_cart .view-cart-tabs {
    margin: 0 0 24px;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
}
body #order-standard_cart .view-cart-tabs .nav-tabs {
    padding: 0 16px;
    font-size: var(--wf-t-small);
    border-bottom: 1px solid var(--wf-hairline);
}
/* Stock selects the active tab by aria attribute, which outranks the
   `.nav-tabs .nav-link.active` rule in 20-bootstrap.css several times over — so
   it kept the grey fill, and because it sets `border-color` as a shorthand
   over our `border-bottom: 2px solid transparent`, it was also repainting the
   brand underline in #f8f8f8. Both are restated here. */
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"],
body #order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"] {
    color: var(--wf-brand);
    background-color: transparent;
    border-color: transparent transparent var(--wf-brand);
}
body #order-standard_cart .view-cart-tabs .tab-content {
    padding: 24px;
    background-color: transparent;
}

/* The promo field's icon column is absolutely positioned and standard_cart
   pins it to a 36px height and line-height (style.css:660) — the height of the
   field WHMCS designed it against. Ours is 47px, so the icon sat 5.5px above
   the centre of the box it is in. Full height and flex centring instead, so it
   tracks the field whatever the field is.

   This repeats the rule in 40-whmcs.css because standard_cart's version is
   id-qualified with #order-standard_cart and outranks it. */
body #order-standard_cart .prepend-icon .field-icon {
    width: 44px;
    height: 100%;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}
body #order-standard_cart .prepend-icon .field { padding-left: 44px; }
/* Same story for the glyph's colour — standard_cart hard-codes #bbb at
   `#order-standard_cart .field-icon i` (style.css:676). */
body #order-standard_cart .field-icon i { color: var(--wf-ink-faint); }

/* ---------------------------------------------------------------------------
   Domain checker

   The one part of the cart a visitor meets before anything else, so it gets
   the search treatment from the site rather than the stock grey band.
   --------------------------------------------------------------------------- */

body #order-standard_cart body .domain-checker-bg,
body .domain-checker-bg {
    background: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-xl);
    padding: 32px;
}
body #order-standard_cart .domain-checker-container .form-control {
    font-size: var(--wf-t-lead);
    padding: 16px 20px;
}
body #order-standard_cart .domain-checker-available {
    color: #04663f;
    background: rgba(0, 153, 102, 0.10);
    border: 1px solid rgba(0, 153, 102, 0.28);
    border-radius: var(--wf-r-md);
}
body #order-standard_cart .domain-checker-unavailable,
body #order-standard_cart .domain-checker-invalid {
    color: #8f1f1f;
    background: rgba(212, 47, 47, 0.10);
    border: 1px solid rgba(212, 47, 47, 0.28);
    border-radius: var(--wf-r-md);
}
body #order-standard_cart .domain-checker-result-headline {
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Promoted TLD chips. Gold is the site's scarcity signal and a promoted TLD is
   exactly what it is reserved for — but it stays on small chips only. */
body #order-standard_cart .spotlight-tld,
body #order-standard_cart .featured-tld {
    background: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
    box-shadow: var(--wf-shadow-sm);
}
body #order-standard_cart .spotlight-tld-hot,
body #order-standard_cart .spotlight-tld-new,
body #order-standard_cart .spotlight-tld-sale {
    color: var(--wf-gold-deep);
    background: rgba(245, 158, 11, 0.14);
    border-color: rgba(245, 158, 11, 0.36);
}

body #order-standard_cart .suggested-domains,
body #order-standard_cart .domain-suggestions-warning {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
}

/* ---------------------------------------------------------------------------
   Search results

   Both of the add-to-cart buttons here sit in a container whose height ignores
   them, so each one ends up flush against — or clipped by — the bottom edge of
   the thing holding it.
   --------------------------------------------------------------------------- */

/* The spotlight card is a hard 112px with overflow hidden (style.css:1183).
   That fits the TLD name alone; once a price and a button arrive the button is
   cropped by the card's bottom border. */
body #order-standard_cart .spotlight-tld {
    height: auto;
    min-height: 112px;
    padding: 18px;
}
body #order-standard_cart .spotlight-tld .price {
    margin: 6px 0 14px;
    padding: 0;
    font-size: var(--wf-t-body);
    color: var(--wf-ink);
}
/* `.spotlight-tld span { display: block }` also catches the label spans inside
   the button, stretching it to an arbitrary width — 334px of a 431px card. The
   button's own display is written as an inline style by the cart's JS, so it
   cannot be re-typed from here; making it a full-width card action is both
   achievable and deliberate-looking. */
body #order-standard_cart .spotlight-tld .btn { width: 100%; }

/* .suggested-domains .actions is floated (style.css:1331) and nothing clears
   it, so each row is only as tall as its domain name and the price and button
   hang 14px out of the bottom. Lay the row out rather than floating. */
body #order-standard_cart .suggested-domains .list-group-item {
    display: flex;
    align-items: center;
    gap: 12px;
}
body #order-standard_cart .suggested-domains .actions {
    display: flex;
    align-items: center;
    gap: 16px;
    float: none;
    margin-left: auto;
}
body #order-standard_cart .suggested-domains .price { padding: 0; white-space: nowrap; }
@media (max-width: 767.98px) {
    /* Stock un-floats these below 767px and makes the button full width, which
       the flex row has to allow for rather than fight. */
    body #order-standard_cart .suggested-domains .list-group-item { flex-wrap: wrap; }
    body #order-standard_cart .suggested-domains .actions {
        width: 100%;
        margin-left: 0;
        justify-content: space-between;
    }
    body #order-standard_cart .suggested-domains .list-group-item .btn { width: auto; }
}

/* ---------------------------------------------------------------------------
   Register Domain page

   Stock assembles this out of five unrelated visual languages: a gold gradient
   frame round the search, registry-coloured logo cards, grey badge chips, a
   pricing table ruled in #97b5d2 and #336699, and two grey promo boxes with
   orange text. Rebuilt as one page of cards on the site's ground.
   --------------------------------------------------------------------------- */

/* The gold frame is a background gradient on the outer container showing
   around the inner panel — not a border, so no amount of border resetting
   touches it. It has to be removed as a background-image. */
body #order-standard_cart .domain-checker-container {
    background-image: none;
    background-color: transparent;
    border-radius: 0;
}

/* One surface for the search, not three nested ones. The panel is the card;
   the box that held the textarea goes transparent inside it. */
body #order-standard_cart .domain-checker-container .domain-checker-bg {
    background: var(--wf-surface);
    box-shadow: var(--wf-shadow-md);
}
body #order-standard_cart .domain-checker-container .input-group-box {
    padding: 0;
    background: transparent;
    border-radius: 0;
    /* Already a flex container in stock; wrapping and a gap are what let the
       submit stop being an overlay — see below. */
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
/* Stock pins the submit absolutely inside this box, anchored to the bottom
   right, which lands it half over the textarea's bottom-right corner. Nothing
   about it needs to be absolute: the box is a flex container, so the field can
   take the first line on its own and the filter chips and the submit can share
   the second, with the submit pushed to the far end of it. */
body #order-standard_cart .domain-checker-container .input-group-box > textarea {
    flex: 0 0 100%;
    margin-bottom: 0;
}
body #order-standard_cart .domain-checker-container #btnCheckAvailability {
    position: static;
    order: 1;
    margin-left: auto;
}

@media (max-width: 767.98px) {
    body #order-standard_cart .domain-checker-container .domain-checker-bg { padding: 20px; }
    /* Stock insets the search a further 1/12 either side (col-10 offset-1) on
       top of the panel's own padding, leaving the field 230px of a 348px
       panel. On a phone the panel is the inset. */
    body #order-standard_cart .domain-checker-advanced form > .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        margin-left: 0;
        padding: 0;
    }
    /* There is no room for the submit beside the filter chips on a phone, so
       it takes a line of its own under them. */
    body #order-standard_cart .domain-checker-container #btnCheckAvailability {
        flex: 0 0 100%;
        margin-left: 0;
    }
}

/* Featured TLDs. The registry logos stay — they are the recognisable thing —
   but the price bar drops the registry's own colour (#3aa4da for .com,
   #efc00e for .net, one per TLD in theme.css) for the site's own. */
body #order-standard_cart .featured-tld {
    overflow: hidden;
    border-radius: var(--wf-r-lg);
    transition: transform var(--wf-ease), box-shadow var(--wf-ease), border-color var(--wf-ease);
}
body #order-standard_cart .featured-tld:hover {
    border-color: #c7d7f5;
    transform: translateY(-2px);
    box-shadow: var(--wf-shadow-md);
}
body #order-standard_cart .featured-tld .img-container { height: 92px; padding: 20px 0 12px; }
body #order-standard_cart .featured-tld .img-container img { max-width: 55%; }
body #order-standard_cart .featured-tld .price,
body #order-standard_cart .featured-tld .price[class] {
    padding: 12px;
    font-size: var(--wf-t-small);
    font-weight: 700;
    line-height: 1.4;
    color: var(--wf-brand);
    background-color: var(--wf-surface-alt);
    border-top: 1px solid var(--wf-hairline);
    border-radius: 0;
}

/* Category filters. Stock ships them as .badge-secondary, with the active one
   marked .badge-success — a green "success" pill for "this filter is on". */
body #order-standard_cart .tld-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
body #order-standard_cart .tld-filters a.badge {
    padding: 7px 16px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink-soft);
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
    transition: color var(--wf-ease), border-color var(--wf-ease), background-color var(--wf-ease);
}
body #order-standard_cart .tld-filters a.badge:hover {
    color: var(--wf-brand);
    border-color: #c7d7f5;
}
body #order-standard_cart .tld-filters a.badge.badge-success {
    color: #fff;
    background-color: var(--wf-brand);
    border-color: var(--wf-brand);
}

/* Pricing table. It is a grid of .rows rather than a <table>, so the card has
   to be built on the .bg-white wrapper that holds them. */
body #order-standard_cart .domain-pricing .bg-white {
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
    overflow: hidden;
}
body #order-standard_cart .domain-pricing .tld-pricing-header .tld-column,
body #order-standard_cart .domain-pricing .tld-pricing-header .col-4 {
    height: auto;
    /* 15px matches Bootstrap's column padding on the value cells below, so the
       headings sit over their own numbers. */
    padding: 14px 15px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
    background-color: var(--wf-surface-alt);
    border-bottom: 1px solid var(--wf-hairline);
    border-radius: 0;
}
body #order-standard_cart .domain-pricing .tld-row {
    padding: 14px 0;
    font-size: var(--wf-t-small);
    border-bottom: 1px solid var(--wf-hairline);
    transition: background-color var(--wf-ease);
}
/* The header's inner row is .no-gutters and the body's is a plain .row, so the
   values sat 23px to the left of the headings they belong to and the last
   column overhung the card by 14px. Match the header. */
body #order-standard_cart .domain-pricing .tld-row .row { margin: 0; }
/* Stock styles the header cells as `div:nth-child(odd)`, and the wrapper that
   holds the three price columns is itself an only child — so that rule paints
   and pads the row wrapper as though it were a cell, shrinking the columns
   inside it out of line with the values below. Put the wrapper back. */
body #order-standard_cart .domain-pricing .tld-pricing-header .col-md-8,
body #order-standard_cart .domain-pricing .tld-pricing-header .col-md-8 > .row {
    height: auto;
    padding: 0;
    background-color: transparent;
    border: 0;
    border-radius: 0;
}
body #order-standard_cart .domain-pricing .tld-row:hover { background-color: var(--wf-surface-alt); }
body #order-standard_cart .domain-pricing .tld-row.highlighted { background-color: rgba(37, 99, 235, 0.05); }
body #order-standard_cart .domain-pricing .tld-row strong {
    font-size: var(--wf-t-body);
    font-weight: 700;
    color: var(--wf-ink);
}
body #order-standard_cart .domain-pricing .tld-row small { color: var(--wf-ink-muted); }
/* Stock rules this column off with a 2px #c7d7e6 line. One hairline is enough
   to separate a name from its prices. */
body #order-standard_cart .domain-pricing .two-row-center {
    margin: 0;
    border-right: 1px solid var(--wf-hairline);
}

/* Promo boxes. Same card as everything else, with the 4x floated glyph pulled
   into the brand-tinted tile the stat tiles use. */
body #order-standard_cart .domain-promo-box {
    position: relative;
    height: 100%;
    margin: 24px 0 0;
    padding: 24px 88px 24px 24px;
    color: var(--wf-ink-soft);
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
}
body #order-standard_cart .domain-promo-box h3 {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--wf-ink);
}
body #order-standard_cart .domain-promo-box i {
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    float: none;
    width: 48px;
    height: 48px;
    font-size: 20px;
    line-height: 1;
    color: var(--wf-brand);
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.10), rgba(37, 99, 235, 0.22));
    border-radius: var(--wf-r-md);
}
body #order-standard_cart .domain-promo-box p { margin: 0 0 12px; font-size: var(--wf-t-small); }
/* .text-warning on a white card is 2.2:1. These are subheadings, not warnings. */
body #order-standard_cart .domain-promo-box .text-warning,
body #order-standard_cart .domain-promo-box .text-primary { color: var(--wf-ink-muted) !important; }
body #order-standard_cart .domain-promo-box .small { margin: 12px 0 0; color: var(--wf-ink-faint); }
/* Stock puts a gold button on one box and a brand one on the other, which
   reads as two competing primary actions. Both are secondary to the search. */
body #order-standard_cart .domain-promo-box .btn-warning,
body #order-standard_cart .domain-promo-box .btn-warning:hover,
body #order-standard_cart .domain-promo-box .btn-warning:focus {
    color: var(--wf-brand);
    background-color: transparent;
    border-color: #c7d7f5;
}

/* ---------------------------------------------------------------------------
   "Choose a Domain" step (configureproductdomain.tpl)

   The weakest screen in the stock cart, and one every customer buying hosting
   has to pass through. Stock leaves the search box with NO class at all, so it
   renders as a raw browser textarea — square corners, a 1px #767676 border and
   2px of padding — sitting next to a pill button. The rest of the controls are
   stripped back to bare text.

   Selectors carry the #order-standard_cart prefix because that is what stock
   uses; a plain class cannot outrank it.
   --------------------------------------------------------------------------- */

/* The three choices become selectable cards rather than #f8f8f8 strips. */
body #order-standard_cart .domain-selection-options .option {
    margin-bottom: 10px;
    padding: 18px 22px;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    transition: border-color var(--wf-ease), background-color var(--wf-ease);
}
body #order-standard_cart .domain-selection-options .option:hover {
    border-color: #c7d7f5;
}
/* Both selectors on purpose. WHMCS adds .option-selected only when the
   customer clicks, so on first paint the active choice is indistinguishable
   from the other two — the radio is the only clue. :has() reads the real
   checked state, which is correct on load and stays correct afterwards;
   .option-selected is kept as the fallback for anything without :has(). */
/* Note `> label` in the :has() arguments. Without it the selector reaches any
   checked radio ANYWHERE inside the card — and the "Register a new domain"
   card contains the Maximum Length dropdown, whose radio list always has one
   checked. That lit up the register card permanently, so two options looked
   selected at once. The option's own radio is the one inside its direct
   label; everything else lives in the .domain-input-group sibling. */
body #order-standard_cart .domain-selection-options .option-selected,
body #order-standard_cart .domain-selection-options .option:has(> label .iradio_square-blue.checked),
body #order-standard_cart .domain-selection-options .option:has(> label input[type="radio"]:checked) {
    background-color: rgba(37, 99, 235, 0.05);
    border-color: rgba(37, 99, 235, 0.35);
}
body #order-standard_cart .domain-selection-options .option > label {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: var(--wf-t-body);
    font-weight: 600;
    color: var(--wf-ink);
    cursor: pointer;
}
body #order-standard_cart .domain-selection-options .option-selected > label,
body #order-standard_cart .domain-selection-options .option:has(> label .iradio_square-blue.checked) > label,
body #order-standard_cart .domain-selection-options .option:has(> label input[type="radio"]:checked) > label {
    font-weight: 700;
}

/* iCheck draws these radios from a sprite (css/blue.png) in a blue that is not
   ours. The real <input> is inside, at opacity 0, so the wrapper can simply be
   redrawn in CSS — no sprite, no extra asset, and it tracks the .checked class
   iCheck already maintains. */
body #order-standard_cart .domain-selection-options .option .iradio_square-blue {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-right: 12px;
    background-image: none;
    background-color: var(--wf-surface);
    border: 2px solid #c3ccda;
    border-radius: 50%;
    transition: border-color var(--wf-ease);
}
body #order-standard_cart .domain-selection-options .option .iradio_square-blue.checked {
    border-color: var(--wf-brand);
}
body #order-standard_cart .domain-selection-options .option .iradio_square-blue.checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background-color: var(--wf-brand);
    border-radius: 50%;
}

/* Search field + Check button.

   Stock puts the field in .col-sm-8.offset-sm-1 and the button in .col-sm-2 —
   eleven columns with a leading offset, which indents the whole control and
   strands the button out to the right with a gap in between. Replaced with a
   flex row: the field takes the space, the button sits against it at its
   natural size, top-aligned so it lines up with the first line of the field
   rather than floating in the middle of a 120px column. */
body #order-standard_cart .domain-checker-advanced > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 12px;
}
body #order-standard_cart .domain-checker-advanced > .row > [class*="col-sm-8"] {
    flex: 1 1 320px;
    max-width: none;
    margin-left: 0;
    padding: 0;
}
body #order-standard_cart .domain-checker-advanced > .row > .col-sm-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
/* The advanced panel has two of these: one wrapping the textarea, one holding
   the TLD / length / safe-search filters. Both must be free to wrap — with
   nowrap the "Safe Search" checkbox ran 40px past the edge of the card on a
   phone. The field+TLD row of the other two options is the one that has to
   stay on a single line, and it is told so below by its column children. */
body #order-standard_cart .domain-checker-advanced .domains-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
}
body #order-standard_cart .domain-checker-advanced .domains-row:first-child {
    display: block;
}

body #order-standard_cart .domain-checker-advanced textarea {
    width: 100%;
    height: 96px;
    min-height: 96px;
    padding: 13px 16px;
    resize: vertical;
    font-family: var(--wf-font);
    font-size: var(--wf-t-small);
    line-height: 1.5;
    color: var(--wf-ink);
    background-color: var(--wf-surface-alt);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
    transition: border-color var(--wf-ease), box-shadow var(--wf-ease), background-color var(--wf-ease);
}
body #order-standard_cart .domain-checker-advanced textarea::placeholder {
    color: var(--wf-ink-faint);
}
body #order-standard_cart .domain-checker-advanced textarea:focus {
    outline: none;
    background-color: var(--wf-surface);
    border-color: var(--wf-brand-500);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.30);
}

body #order-standard_cart #btnCheckAvailability {
    width: auto;
    min-width: 120px;
    padding: 13px 26px;
}

/* Filter row. Stock zeroes the border and background on .multiselect, leaving
   two bold 12px labels and a caret floating under the field. They become the
   quiet pill the rest of the theme uses for a secondary control. */
/* Spacing comes from the row's gap now. */
body #order-standard_cart .domain-checker-advanced .domains-row .btn-group {
    margin: 0;
}
body #order-standard_cart .domain-checker-advanced .multiselect {
    margin: 0;
    padding: 7px 14px;
    font-family: var(--wf-font);
    font-size: var(--wf-t-micro);
    font-weight: 600;
    color: var(--wf-ink-soft);
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-full);
}
body #order-standard_cart .domain-checker-advanced .multiselect:hover {
    color: var(--wf-brand);
    border-color: #c7d7f5;
    transform: none;
    box-shadow: none;
}
body #order-standard_cart .domain-checker-advanced .multiselect .caret {
    margin-left: 6px;
}

body #order-standard_cart .domain-checker-advanced .multiselect-container {
    padding: 8px;
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-lg);
}
body #order-standard_cart .domain-checker-advanced .multiselect-container > li > a {
    display: block;
    padding: 7px 10px;
    border-radius: var(--wf-r-sm);
}
body #order-standard_cart .domain-checker-advanced .multiselect-container > li > a:hover {
    background-color: #f4f7fd;
}
body #order-standard_cart .domain-checker-advanced .multiselect-container li.active a {
    background-color: rgba(37, 99, 235, 0.08);
}
body #order-standard_cart .domain-checker-advanced .multiselect-container label {
    margin: 0;
    padding: 0 0 0 6px;
    font-size: var(--wf-t-small);
    font-weight: 600;
    color: var(--wf-ink);
    cursor: pointer;
}
body #order-standard_cart .domain-checker-advanced .multiselect-item.filter {
    width: 100%;
    padding: 0 4px 6px;
}
/* The plugin ships Bootstrap 3 markup for its own search box. */
body #order-standard_cart .domain-checker-advanced .multiselect-item.filter .input-group-addon {
    display: none;
}
body #order-standard_cart .domain-checker-advanced .multiselect-search {
    padding: 8px 12px;
    font-size: var(--wf-t-small);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-sm);
}

/* --- Transfer / "use my existing domain" rows ------------------------------
   These two options use the classic markup, not the AI prompt box: a www.
   prefix, an .input-group holding the domain, then a SEPARATE .col-3 holding
   the TLD select, then the submit button.

   Because the select sits outside the input-group, Bootstrap does not join it
   to the field — and at col-xs-3 it is a quarter of the row, which is about
   90px on a laptop and narrower still on a phone: too tight for ".com" plus a
   dropdown arrow, which is what made it look tiny.

   Rebuilt as one flex row so the three parts read as a single control, with
   the select sized to its content instead of to a grid fraction.
   --------------------------------------------------------------------------- */

body #order-standard_cart .domain-input-group > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}
body #order-standard_cart .domain-input-group > .row > [class*="col-sm-8"] {
    flex: 1 1 320px;
    max-width: none;
    margin-left: 0;
    padding: 0;
}
body #order-standard_cart .domain-input-group > .row > .col-sm-2 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
/* Only the row that actually holds grid columns — the domain field plus the
   TLD control — is kept on one line. Selecting on the children rather than on
   a panel id means the advanced search's filter row keeps its wrapping. */
body #order-standard_cart .domain-input-group .domains-row:has(> [class*="col-"]) {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
}
body #order-standard_cart .domain-input-group .domains-row > [class*="col-9"] {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
    padding: 0;
}
body #order-standard_cart .domain-input-group .domains-row > [class*="col-3"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding: 0;
}

/* Square the joins so the three pieces read as one field: rounded on the
   outside edges only, and the select pulled over the input's border so there
   is a single hairline between them rather than two. */
body #order-standard_cart .domain-input-group .input-group > .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* The TLD control is a <select> on the transfer option but a plain text input
   on "use my existing domain", so this matches the column's child rather than
   the element. */
/* A definite width, not `auto`. On the transfer option this control is a
   <select>, which sizes to its content, but on "use my existing domain" it is
   a text input — and an unsized text input reports an intrinsic width of about
   twenty characters (~180px), so it grew larger than the domain field beside
   it and pushed that down to a stub. */
body #order-standard_cart .domain-input-group .domains-row > [class*="col-3"] > .form-control {
    flex: 0 0 auto;
    width: 116px;
    min-width: 0;
    margin-left: -1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
/* While focused it has to sit above its neighbour's border, or the ring is
   clipped along the shared edge. */
body #order-standard_cart .domain-input-group .domains-row > [class*="col-3"] > .form-control:focus {
    position: relative;
    z-index: 2;
}

/* Phones.
   Two problems at 390px: the submit buttons sat at their natural width on
   their own line, left-aligned under a full-width field, and the domain field
   ended up 128px against a 116px TLD control — near enough the same size, when
   the domain is the part being typed into. The button goes full width, and the
   TLD control gives its space back to the field. */
@media (max-width: 575.98px) {
    body #order-standard_cart .domain-input-group > .row > .col-sm-2,
    body #order-standard_cart .domain-checker-advanced > .row > .col-sm-2 {
        flex: 1 1 100%;
        width: 100%;
    }
    /* #btnCheckAvailability is matched by an id above, so widening it needs an
       id here too — a class selector loses to it however late it appears. */
    body #order-standard_cart .domain-input-group > .row > .col-sm-2 > .btn,
    body #order-standard_cart #btnCheckAvailability {
        width: 100%;
    }

    /* 92px fits ".com" plus the chevron; longer TLDs truncate rather than cost
       every phone screen the width. The domain field takes what is left, which
       lands near 2:1 in its favour. */
    body #order-standard_cart .domain-input-group .domains-row > [class*="col-3"] > .form-control {
        width: 92px;
    }
    body #order-standard_cart .domain-input-group .input-group-text {
        padding-left: 10px;
        padding-right: 10px;
    }
    body #order-standard_cart .domain-input-group .form-control,
    body #order-standard_cart .domain-input-group .input-group-text {
        font-size: var(--wf-t-small);
    }
}

/* --- Search results ------------------------------------------------------
   The half of this screen the customer actually spends time on. Stock accents
   it with #62cb31 (a lime green that appears nowhere else on the site) and
   paints every Add button #555 charcoal with a 3px radius.
   --------------------------------------------------------------------------- */

body #order-standard_cart #DomainSearchResults .primary-domain-header,
body #order-standard_cart .suggested-domains .panel-heading,
body #order-standard_cart .suggested-domains .card-header {
    padding: 16px 20px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wf-ink-muted);
    background-color: transparent;
    border-bottom: 1px solid var(--wf-hairline);
}

/* Add / Add to Cart, in the exact-match card, the spotlight TLDs and every
   suggestion row. */
body #order-standard_cart .suggested-domains .btn:not(.domain-contact-support),
body #order-standard_cart #DomainSearchResults .btn:not(.domain-contact-support),
body #order-standard_cart .spotlight-tld .btn {
    padding: 9px 20px;
    font-size: var(--wf-t-micro);
    font-weight: 700;
    color: #fff;
    background-color: var(--wf-brand);
    border: 1px solid var(--wf-brand);
    border-radius: var(--wf-r-full);
}
body #order-standard_cart .suggested-domains .btn:not(.domain-contact-support):hover,
body #order-standard_cart #DomainSearchResults .btn:not(.domain-contact-support):hover,
body #order-standard_cart .spotlight-tld .btn:hover {
    color: #fff;
    background-color: var(--wf-brand-700);
    border-color: var(--wf-brand-700);
}

/* Suggestion rows. The domain is the thing being chosen, so it gets the
   emphasis; the TLD stays bold as stock has it, since that is the part that
   differs down the list. */
body #order-standard_cart .suggested-domains .domain-suggestion,
body #order-standard_cart .suggested-domains tr {
    transition: background-color var(--wf-ease);
}
body #order-standard_cart .suggested-domains .domain-suggestion:hover,
body #order-standard_cart .suggested-domains tr:hover {
    background-color: #f4f7fd;
}
body #order-standard_cart .suggested-domains .domain-lookup-suggestions-message,
body #order-standard_cart .suggested-domains .domain-lookup-suggestions-loader {
    background-color: var(--wf-surface-alt);
    color: var(--wf-ink-muted);
    font-size: var(--wf-t-small);
}

/* The .com / .net cards above the suggestions. */
body #order-standard_cart .spotlight-tld {
    padding: 18px;
    background-color: var(--wf-surface);
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-sm);
    font-weight: 700;
    color: var(--wf-ink);
}

/* "Safe Search" — a raw 13px browser checkbox next to the pills. */
body #order-standard_cart .domain-checker-advanced label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: var(--wf-t-micro);
    font-weight: 600;
    color: var(--wf-ink-soft);
    cursor: pointer;
}
body #order-standard_cart .domain-checker-advanced input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    accent-color: var(--wf-brand);
    background: none;
}

body #order-standard_cart .slim-alert {
    border-radius: var(--wf-r-md);
    font-size: var(--wf-t-small);
}

/* The "Total Due Today" banner on checkout ships as .alert-success, so it
   arrives green. It is not a success message — it is the amount the customer
   is about to pay, and green there reads as "done" before anything has
   happened. Re-tinted to the brand, with the figure in full-strength ink. */
body #order-standard_cart .alert-success.large-text {
    color: var(--wf-ink);
    background-color: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.24);
    font-size: var(--wf-t-lead);
    border-radius: var(--wf-r-lg);
    padding: 20px;
}
body #order-standard_cart .alert-success.large-text strong,
body #order-standard_cart .alert-success.large-text b {
    font-weight: 700;
    color: var(--wf-ink);
}

/* ---------------------------------------------------------------------------
   Checkout
   --------------------------------------------------------------------------- */

body #order-standard_cart .checkout-panel,
body #order-standard_cart .panel {
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-lg);
    box-shadow: var(--wf-shadow-md);
    background: var(--wf-surface);
}

/* The payment method radios are the last decision before paying, so they get
   a real selected state rather than a bare radio button. */
body #order-standard_cart .payment-methods label,
body #order-standard_cart #frmCheckout .paymentmethod label {
    display: block;
    padding: 14px 18px;
    border: 1px solid var(--wf-hairline);
    border-radius: var(--wf-r-md);
    cursor: pointer;
    transition: border-color var(--wf-ease), background-color var(--wf-ease);
}
body #order-standard_cart .payment-methods input:checked + label,
body #order-standard_cart .payment-methods label:hover {
    border-color: var(--wf-brand-500);
    background: rgba(37, 99, 235, 0.06);
}