/* ==========================================================================
   FONHOST — WHMCS CLIENT AREA THEME
   --------------------------------------------------------------------------
   A complete re-skin of the WHMCS client area to match the Fonhost marketing
   website (fonhost.com): white surfaces, dark ink text, restrained red
   accents, soft borders, rounded cards, no large dark panels.

   HOW IT WORKS
     * CSS only. No template files are overridden, so WHMCS's own markup and
       any future WHMCS update stay intact.
     * Twenty-One loads this file automatically (it looks for css/custom.css in
       the active theme), after its own stylesheet, so equal-specificity rules
       here win.
     * Every colour lives in a token, defined for light mode in :root and
       redefined for dark mode, so the same rules work in both.

   PALETTE (same tokens as the marketing site — see BRANDING.md)
     brand    #dc2626 / #b91c1c / #991b1b / #fee2e2 / #fef2f2
     ink      #0f1115 / #16191f / #1f232b
     text     #101114   muted #6b7280   border #e7e7ea / #d1d2d6
     page     #f7f7f8   surface #ffffff
   ========================================================================== */


/* ==========================================================================
   1. TOKENS
   ========================================================================== */
:root {
    /* brand */
    --fh-brand: #dc2626;
    --fh-brand-dark: #b91c1c;
    --fh-brand-darker: #991b1b;
    --fh-brand-soft: #fef2f2;
    --fh-brand-soft-2: #fee2e2;
    --fh-accent: #ef4444;
    --fh-accent-light: #f87171;
    --fh-gradient-brand: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);

    /* ink + surfaces */
    --fh-ink: #0f1115;
    --fh-ink-2: #16191f;
    --fh-ink-3: #1f232b;
    --fh-text: #101114;
    --fh-muted: #6b7280;
    --fh-border: #e7e7ea;
    --fh-border-strong: #d1d2d6;
    --fh-page: #f7f7f8;
    --fh-surface: #ffffff;
    --fh-surface-2: #fbfbfc;

    /* semantic */
    --fh-success: #10b981;
    --fh-warning: #f59e0b;
    --fh-danger: #ef4444;
    --fh-info: #2563eb;

    /* shape */
    --fh-radius: 14px;
    --fh-radius-sm: 10px;
    --fh-radius-pill: 999px;
    --fh-shadow-sm: 0 1px 2px rgba(15, 17, 21, .06), 0 1px 3px rgba(15, 17, 21, .05);
    --fh-shadow-md: 0 10px 30px -12px rgba(15, 17, 21, .18);
    --fh-shadow-lg: 0 22px 48px -20px rgba(15, 17, 21, .28);
    --fh-ring: 0 0 0 3px rgba(220, 38, 38, .22);

    --fh-font: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --fh-radius-btn: var(--fh-radius-sm);
}

/* Dark mode — same structure, marketed palette. WHMCS sets data-theme="dark"
   on the document when the client switches theme. */
[data-theme="dark"],
html.dark,
body.dark,
body.theme-dark {
    --fh-text: #e9eaee;
    --fh-muted: #9aa1ae;
    --fh-border: #2a2f3a;
    --fh-border-strong: #3a4150;
    --fh-page: #0f1115;
    --fh-surface: #16191f;
    --fh-surface-2: #1f232b;
    --fh-brand-soft: rgba(220, 38, 38, .12);
    --fh-brand-soft-2: rgba(220, 38, 38, .2);
    --fh-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --fh-shadow-md: 0 10px 30px -12px rgba(0, 0, 0, .6);
    --fh-shadow-lg: 0 22px 48px -20px rgba(0, 0, 0, .7);
}


/* ==========================================================================
   2. BASE
   ========================================================================== */
body {
    background-color: var(--fh-page);
    color: var(--fh-text);
    font-family: var(--fh-font);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--fh-text);
    font-weight: 800;
    letter-spacing: -0.02em;
}

h1, .h1 { font-size: 2rem; }
h2, .h2 { font-size: 1.6rem; }
h3, .h3 { font-size: 1.3rem; }
h4, .h4 { font-size: 1.1rem; }

p, li, td, th, label, .form-control, .custom-select {
    color: var(--fh-text);
}

small, .small, .text-muted, .help-block, .form-text {
    color: var(--fh-muted) !important;
}

a {
    color: var(--fh-brand);
    text-decoration: none;
    transition: color .15s ease;
}

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

hr {
    border-top: 1px solid var(--fh-border);
}

::selection {
    background: var(--fh-brand-soft-2);
    color: var(--fh-brand-darker);
}

.container, .container-fluid {
    /* Twenty-One ships a wide container; keep it comfortable. */
    max-width: 1200px;
}


/* ==========================================================================
   3. HEADER, TOP BAR AND NAVIGATION
   ========================================================================== */
#header,
#header .navbar,
.navbar {
    background-color: var(--fh-surface);
}

#header {
    border-bottom: 1px solid var(--fh-border);
    box-shadow: none;
}

#header .navbar {
    padding-top: 14px;
    padding-bottom: 14px;
}

/* Thin dark utility strip (language / currency / account) */
#header .topbar,
#topbar {
    background-color: var(--fh-ink);
    color: #dcdee3;
    font-size: 13.5px;
}

#header .topbar a,
#topbar a {
    color: #dcdee3;
}

#header .topbar a:hover,
#topbar a:hover {
    color: #fff;
}

/* Brand lockup */
.navbar-brand {
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -0.02em;
    color: var(--fh-brand) !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Brand lockup. WHMCS's own logo setting is unreliable across builds - the field
   wants a path inside WHMCS, not a full URL, and silently prefixes its own
   system URL - so the theme draws the marketing logo itself and hides whatever
   WHMCS printed (its text fallback or an uploaded image). */
.navbar-brand img {
    max-height: 38px;
    width: auto;
}

#header .navbar-brand {
    display: inline-block;
    width: 186px;
    height: 40px;
    background-image: url("../img/logo.svg");
    background-repeat: no-repeat;
    background-position: left center;
    background-size: contain;
    text-indent: -9999px;
    color: transparent !important;
    overflow: hidden;
    vertical-align: middle;
}

#header .navbar-brand img {
    display: none;
}

[data-theme="dark"] #header .navbar-brand {
    background-image: url("../img/logo-light.svg");
}

@media (max-width: 991.98px) {
    #header .navbar-brand {
        width: 150px;
        height: 32px;
    }
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--fh-brand-dark) !important;
}

/* Primary navigation */
#header .navbar-nav .nav-link,
.navbar-nav .nav-link {
    color: var(--fh-text);
    font-weight: 600;
    font-size: 14.5px;
    border-radius: var(--fh-radius-sm);
    padding: 8px 14px;
}

#header .navbar-nav .nav-link:hover,
#header .navbar-nav .nav-link:focus,
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--fh-brand);
    background-color: var(--fh-brand-soft);
}

#header .navbar-nav .nav-link.active,
#header .navbar-nav .nav-item.active > .nav-link,
.navbar-nav .active > .nav-link {
    color: var(--fh-brand);
    background-color: var(--fh-brand-soft);
}

/* The header's search field */
#header .input-group .form-control,
#header .navbar .form-control {
    background-color: var(--fh-page);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);
    height: 42px;
}

/* Cart button */
#header .cart-btn,
#header .nav-link .fa-shopping-cart,
#header .badge {
    color: var(--fh-text);
}

#header .cart-btn .badge,
#header .navbar .badge {
    background: var(--fh-gradient-brand);
    color: #fff;
    border-radius: var(--fh-radius-pill);
    font-weight: 700;
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-md);
    padding: 8px;
    min-width: 210px;
}

.dropdown-item {
    border-radius: 9px;
    padding: 9px 12px;
    color: var(--fh-text);
    font-size: 14.5px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--fh-brand-soft);
    color: var(--fh-brand-dark);
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--fh-brand);
    color: #fff;
}

.dropdown-divider {
    border-top-color: var(--fh-border);
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-bottom: 0;
    font-size: 13.5px;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--fh-muted);
}

.breadcrumb a {
    color: var(--fh-muted);
}

.breadcrumb a:hover {
    color: var(--fh-brand);
}

.breadcrumb-item.active {
    color: var(--fh-text);
}

/* Page title band ("Portal Home", "My Invoices", ...) */
.header-lined {
    border-bottom: 1px solid var(--fh-border);
    padding-bottom: 14px;
    margin-bottom: 22px;
}

.header-lined h1 {
    margin: 0;
    font-size: 1.7rem;
}


/* ==========================================================================
   4. BUTTONS
   ========================================================================== */
.btn {
    border-radius: var(--fh-radius-btn);
    font-weight: 600;
    padding: 10px 18px;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-lg { padding: 14px 24px; font-size: 1rem; border-radius: var(--fh-radius-sm); }
.btn-sm { padding: 7px 13px; font-size: .85rem; border-radius: 8px; }

.btn:focus,
.btn.focus {
    box-shadow: var(--fh-ring);
}

/* Primary = brand red */
.btn-primary {
    background-color: var(--fh-brand);
    border-color: var(--fh-brand);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
    background-color: var(--fh-brand-dark);
    border-color: var(--fh-brand-dark);
    color: #fff;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--fh-brand);
    border-color: var(--fh-brand);
    opacity: .55;
}

/* Outline */
.btn-outline-primary,
.btn-default {
    background-color: transparent;
    border: 1px solid var(--fh-border-strong);
    color: var(--fh-text);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-default:hover,
.btn-default:focus {
    background-color: var(--fh-brand-soft);
    border-color: var(--fh-brand);
    color: var(--fh-brand-dark);
}

/* Semantic buttons are reserved for semantics, not decoration */
.btn-success { background-color: var(--fh-success); border-color: var(--fh-success); color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: #0e9f6e; border-color: #0e9f6e; color: #fff; }
.btn-danger  { background-color: var(--fh-danger);  border-color: var(--fh-danger);  color: #fff; }
.btn-danger:hover, .btn-danger:focus   { background-color: #dc2626; border-color: #dc2626; color: #fff; }
.btn-warning { background-color: var(--fh-warning); border-color: var(--fh-warning); color: #1f232b; }
.btn-warning:hover, .btn-warning:focus { background-color: #d97706; border-color: #d97706; color: #1f232b; }
.btn-info    { background-color: var(--fh-info);    border-color: var(--fh-info);    color: #fff; }
.btn-info:hover, .btn-info:focus       { background-color: #1d4ed8; border-color: #1d4ed8; color: #fff; }

.btn-link {
    color: var(--fh-brand);
    font-weight: 600;
}

.btn-link:hover,
.btn-link:focus {
    color: var(--fh-brand-dark);
    text-decoration: none;
}

.btn-block { width: 100%; }


/* ==========================================================================
   5. FORMS
   ========================================================================== */
.form-control,
.custom-select,
.input-group-text {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-btn);
    color: var(--fh-text);
    padding: 10px 13px;
    height: auto;
}

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

.form-control:focus,
.custom-select:focus {
    background-color: var(--fh-surface);
    border-color: var(--fh-brand);
    color: var(--fh-text);
    box-shadow: var(--fh-ring);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--fh-page);
    color: var(--fh-muted);
}

.input-group-text {
    background-color: var(--fh-page);
    color: var(--fh-muted);
}

label, .control-label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--fh-brand);
    border-color: var(--fh-brand);
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: var(--fh-ring);
}

.custom-control-label::before {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border-strong);
}

/* Validation */
.has-error .form-control,
.form-control.is-invalid {
    border-color: var(--fh-danger);
}

.invalid-feedback,
.text-danger {
    color: var(--fh-danger) !important;
}

.text-success { color: var(--fh-success) !important; }
.text-warning { color: var(--fh-warning) !important; }
.text-info    { color: var(--fh-info) !important; }
.text-primary { color: var(--fh-brand) !important; }


/* ==========================================================================
   6. CARDS AND PANELS
   ========================================================================== */
.card {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-sm);
    margin-bottom: 22px;
}

.card-header,
.card-footer {
    background-color: var(--fh-surface);
    border-color: var(--fh-border);
}

.card-header {
    font-weight: 700;
    border-bottom: 1px solid var(--fh-border);
    padding: 15px 20px;
    border-radius: var(--fh-radius) var(--fh-radius) 0 0 !important;
}

.card-body { padding: 20px; }

.card-title { font-weight: 700; }

/* Legacy Bootstrap panels that some WHMCS templates still use */
.panel {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-sm);
}

.panel-default > .panel-heading,
.panel-heading {
    background-color: var(--fh-surface);
    border-bottom: 1px solid var(--fh-border);
    color: var(--fh-text);
    font-weight: 700;
    border-radius: var(--fh-radius) var(--fh-radius) 0 0;
}

.panel-body { padding: 20px; }

.well {
    background-color: var(--fh-page);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: none;
    padding: 18px;
}

/* Statistic / info tiles on the dashboard */
.clientareahome .card,
.home-panel,
.info-tile {
    border-radius: var(--fh-radius);
}


/* ==========================================================================
   7. TABLES
   ========================================================================== */
.table {
    color: var(--fh-text);
    margin-bottom: 0;
}

.table thead th {
    border-top: 0;
    border-bottom: 1px solid var(--fh-border);
    background-color: var(--fh-surface-2);
    color: var(--fh-muted);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 12px 14px;
}

.table td,
.table th {
    border-top: 1px solid var(--fh-border);
    padding: 13px 14px;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--fh-surface-2);
}

.table-hover tbody tr:hover {
    background-color: var(--fh-brand-soft);
}

.table-responsive {
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
}

/* WHMCS puts many tables inside a card; avoid a double border */
.card > .table-responsive,
.card-body > .table-responsive {
    border: 0;
    border-radius: 0;
}


/* ==========================================================================
   8. BADGES, STATUS LABELS, PROGRESS
   ========================================================================== */
.badge {
    border-radius: var(--fh-radius-pill);
    font-weight: 700;
    font-size: 11.5px;
    letter-spacing: .02em;
    padding: 5px 11px;
}

.badge-primary,
.bg-primary,
.badge-info {
    background-color: var(--fh-brand) !important;
    color: #fff;
}

.badge-success, .bg-success { background-color: var(--fh-success) !important; color: #fff; }
.badge-warning, .bg-warning { background-color: var(--fh-warning) !important; color: #1f232b; }
.badge-danger,  .bg-danger  { background-color: var(--fh-danger) !important;  color: #fff; }
.badge-secondary, .bg-secondary { background-color: var(--fh-muted) !important; color: #fff; }

/* WHMCS status classes used across invoices, services and tickets */
.label { border-radius: var(--fh-radius-pill); font-weight: 700; padding: 5px 11px; }
.label-success, .label-active, .status-active   { background-color: var(--fh-success); color: #fff; }
.label-warning, .label-pending, .status-pending { background-color: var(--fh-warning); color: #1f232b; }
.label-danger,  .label-terminated, .status-terminated,
.label-overdue, .status-overdue                 { background-color: var(--fh-danger);  color: #fff; }
.label-info,    .label-default, .status-default { background-color: var(--fh-muted);   color: #fff; }

.progress {
    background-color: var(--fh-page);
    border-radius: var(--fh-radius-pill);
    height: 10px;
}

.progress-bar {
    background: var(--fh-gradient-brand);
    border-radius: var(--fh-radius-pill);
}


/* ==========================================================================
   9. ALERTS AND NOTICES
   ========================================================================== */
.alert {
    border: 1px solid var(--fh-border);
    border-left: 4px solid var(--fh-border-strong);
    border-radius: var(--fh-radius-btn);
    background-color: var(--fh-surface);
    color: var(--fh-text);
    padding: 14px 18px;
}

.alert-info    { border-left-color: var(--fh-info);    background-color: var(--fh-surface); }
.alert-success { border-left-color: var(--fh-success); background-color: var(--fh-surface); }
.alert-warning { border-left-color: var(--fh-warning); background-color: var(--fh-surface); }
.alert-danger  { border-left-color: var(--fh-danger);  background-color: var(--fh-surface); }

.alert a { font-weight: 600; }


/* ==========================================================================
   10. TABS, PILLS, PAGINATION, LISTS, MODALS
   ========================================================================== */
.nav-tabs {
    border-bottom: 1px solid var(--fh-border);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--fh-muted);
    font-weight: 600;
    background: transparent;
    padding: 11px 16px;
}

.nav-tabs .nav-link:hover {
    color: var(--fh-brand);
    border-bottom-color: var(--fh-brand-soft-2);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--fh-brand);
    border-bottom-color: var(--fh-brand);
    background: transparent;
}

.nav-pills .nav-link {
    border-radius: var(--fh-radius-pill);
    color: var(--fh-text);
    font-weight: 600;
}

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
    background-color: var(--fh-brand);
    color: #fff;
}

.pagination .page-link {
    color: var(--fh-brand);
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    margin: 0 3px;
    border-radius: var(--fh-radius-btn);
}

.pagination .page-link:hover {
    background-color: var(--fh-brand-soft);
    border-color: var(--fh-brand-soft-2);
    color: var(--fh-brand-dark);
}

.pagination .page-item.active .page-link {
    background-color: var(--fh-brand);
    border-color: var(--fh-brand);
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: var(--fh-muted);
    background-color: var(--fh-page);
}

.list-group-item {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    color: var(--fh-text);
}

.list-group-item.active {
    background-color: var(--fh-brand);
    border-color: var(--fh-brand);
    color: #fff;
}

.list-group-item-action:hover,
.list-group-item-action:focus {
    background-color: var(--fh-brand-soft);
    color: var(--fh-brand-dark);
}

/* Client area sidebars (Twenty-One uses list groups) */
.sidebar .list-group-item {
    border-left: 3px solid transparent;
    border-radius: 0;
    font-weight: 600;
}

.sidebar .list-group-item.active {
    background-color: var(--fh-brand-soft);
    color: var(--fh-brand-dark);
    border-left-color: var(--fh-brand);
    border-radius: 0;
}

.modal-content {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-lg);
}

.modal-header,
.modal-footer {
    border-color: var(--fh-border);
}

.modal-title { font-weight: 700; }

.close {
    color: var(--fh-muted);
    opacity: 1;
    text-shadow: none;
}

.close:hover { color: var(--fh-text); }


/* ==========================================================================
   11. CLIENT AREA SPECIFICS
   ========================================================================== */

/* Dashboard greeting / summary */
.clientareahome .header-lined { border-bottom: 0; }

/* The homepage "hero" WHMCS renders above the panels: keep it light and flat —
   this is what replaces the old dark slab. */
.home-hero,
.clientareahome .hero,
.jumbotron {
    background: var(--fh-surface) !important;
    background-image: none !important;
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-sm);
    color: var(--fh-text);
    padding: 28px;
}

.jumbotron h1, .jumbotron h2 { color: var(--fh-text); }

/* Domain / service search boxes */
.domain-checker,
.domain-search,
.input-group-lg > .form-control {
    border-radius: var(--fh-radius-btn);
}

/* Invoice and quote totals */
.invoice-total,
.total-row,
.amount-due {
    color: var(--fh-text);
    font-weight: 700;
}

.invoice-total .amount,
.text-large {
    color: var(--fh-brand);
    font-weight: 800;
}

/* Two-factor / security notices */
.security-tip {
    background-color: var(--fh-brand-soft);
    border: 1px solid var(--fh-brand-soft-2);
    border-radius: var(--fh-radius-btn);
    padding: 14px 16px;
}

/* Loading / ajax spinners use the brand colour */
.spinner-border,
.fa-spin {
    color: var(--fh-brand);
}


/* ==========================================================================
   12. FOOTER
   ========================================================================== */
#footer,
.footer {
    background-color: var(--fh-ink);
    color: #c8ccd4;
    border-top: 0;
    padding: 34px 0 26px;
    margin-top: 40px;
}

#footer a,
.footer a {
    color: #c8ccd4;
}

#footer a:hover,
.footer a:hover {
    color: #fff;
}

#footer .nav-link,
.footer .nav-link {
    color: #c8ccd4;
    padding: 4px 10px;
}

#footer .nav-link:hover,
.footer .nav-link:hover {
    color: #fff;
}

#footer small,
.footer small,
#footer .copyright {
    color: #8b919d;
}

#footer h1, #footer h2, #footer h3,
.footer h1, .footer h2, .footer h3 {
    color: #fff;
}

/* Back-to-top / floating helpers */
#back-to-top,
.fh-back-to-top {
    background: var(--fh-gradient-brand);
    color: #fff;
    border-radius: 50%;
    box-shadow: var(--fh-shadow-md);
}


/* ==========================================================================
   13. DARK MODE FINISHING TOUCHES
   (surfaces already come from the tokens above; these are the exceptions)
   ========================================================================== */
[data-theme="dark"] a,
body.dark a {
    color: var(--fh-accent-light);
}

[data-theme="dark"] a:hover,
[data-theme="dark"] a:focus,
body.dark a:hover,
body.dark a:focus {
    color: #fca5a5;
}

[data-theme="dark"] .navbar-brand,
body.dark .navbar-brand {
    color: var(--fh-accent-light) !important;
}

[data-theme="dark"] #header,
body.dark #header {
    border-bottom-color: var(--fh-border);
}

[data-theme="dark"] .table thead th,
body.dark .table thead th {
    background-color: var(--fh-surface-2);
    color: var(--fh-muted);
}

[data-theme="dark"] .btn-outline-primary,
[data-theme="dark"] .btn-default,
body.dark .btn-outline-primary,
body.dark .btn-default {
    border-color: var(--fh-border-strong);
    color: var(--fh-text);
}

[data-theme="dark"] .btn-outline-primary:hover,
[data-theme="dark"] .btn-default:hover,
body.dark .btn-outline-primary:hover,
body.dark .btn-default:hover {
    background-color: var(--fh-brand-soft);
    border-color: var(--fh-brand);
    color: var(--fh-accent-light);
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
body.dark .form-control,
body.dark .custom-select {
    background-color: var(--fh-surface-2);
    border-color: var(--fh-border);
    color: var(--fh-text);
}

[data-theme="dark"] .text-primary,
body.dark .text-primary {
    color: var(--fh-accent-light) !important;
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    #header .navbar {
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .navbar-brand img { max-height: 32px; }

    #header .navbar-nav .nav-link {
        padding: 11px 14px;
        border-radius: var(--fh-radius-btn);
    }

    .header-lined h1 { font-size: 1.4rem; }

    .card-body { padding: 16px; }

    .table td, .table th { padding: 11px 12px; }
}

@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }

    .btn { width: 100%; }
    .btn + .btn { margin-top: 8px; margin-left: 0 !important; }
    .btn-sm, .navbar .btn, .pagination .page-link, .btn-group .btn { width: auto; }
}

/* ==========================================================================
   15. MARKETING COMPONENTS
   Used by this theme's homepage.tpl. Light surfaces, dark ink, red accents —
   the same visual language as fonhost.com. Nothing here paints a large dark
   panel: the hero and every section is a white/soft card.
   ========================================================================== */
.fh-home {
    background-color: var(--fh-page);
    padding: 26px 0 0;
}

.fh-wrap {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 15px;
}

.fh-hero {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-sm);
    padding: 46px 40px;
    text-align: center;
}

.fh-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--fh-brand-soft);
    border: 1px solid var(--fh-brand-soft-2);
    color: var(--fh-brand-dark);
    border-radius: var(--fh-radius-pill);
    padding: 8px 16px;
    font-size: 13.5px;
    font-weight: 700;
}

.fh-hero h1 {
    font-size: 2.5rem;
    line-height: 1.12;
    margin: 18px 0 14px;
}

.fh-hero h1 em {
    color: var(--fh-brand);
    font-style: normal;
}

.fh-hero p {
    color: var(--fh-muted);
    font-size: 1.06rem;
    max-width: 660px;
    margin: 0 auto 24px;
}

.fh-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.fh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: var(--fh-radius-sm);
    font-weight: 700;
    padding: 13px 24px;
    border: 1px solid transparent;
}

.fh-btn-primary {
    background-color: var(--fh-brand);
    color: #fff !important;
}

.fh-btn-primary:hover,
.fh-btn-primary:focus {
    background-color: var(--fh-brand-dark);
    color: #fff !important;
}

.fh-btn-ghost {
    background-color: transparent;
    border-color: var(--fh-border-strong);
    color: var(--fh-text) !important;
}

.fh-btn-ghost:hover,
.fh-btn-ghost:focus {
    background-color: var(--fh-brand-soft);
    border-color: var(--fh-brand);
    color: var(--fh-brand-dark) !important;
}

.fh-trust {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 22px;
    justify-content: center;
    flex-wrap: wrap;
    color: var(--fh-muted);
    font-size: 14px;
}

.fh-trust i {
    color: var(--fh-success);
    margin-right: 6px;
}

.fh-section-head {
    text-align: center;
    margin: 40px 0 0;
}

.fh-section-head h2 { margin: 0 0 8px; }
.fh-section-head p { color: var(--fh-muted); margin: 0; }

.fh-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin-top: 26px;
}

.fh-card {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-sm);
    padding: 26px 24px;
    display: flex;
    flex-direction: column;
}

.fh-card h3 { margin: 0 0 8px; font-size: 1.2rem; }

.fh-card p {
    color: var(--fh-muted);
    font-size: .93rem;
    margin: 0 0 16px;
}

.fh-price {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--fh-brand);
    margin: 0 0 4px;
}

.fh-price small {
    font-size: .8rem;
    color: var(--fh-muted);
    font-weight: 600;
}

.fh-list {
    list-style: none;
    padding: 0;
    margin: 12px 0 20px;
    flex: 1;
}

.fh-list li {
    color: var(--fh-text);
    font-size: .9rem;
    margin-bottom: 9px;
    display: flex;
    gap: 9px;
}

.fh-list li i {
    color: var(--fh-success);
    margin-top: 4px;
}

.fh-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-top: 26px;
}

.fh-tile {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    padding: 20px;
    text-align: center;
}

.fh-tile strong {
    display: block;
    font-size: 1.3rem;
    color: var(--fh-brand);
}

.fh-tile small { color: var(--fh-muted); }

.fh-cta {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    box-shadow: var(--fh-shadow-sm);
    padding: 34px;
    text-align: center;
    margin: 30px 0 40px;
}

.fh-cta h2 { margin: 0 0 8px; }

.fh-cta p {
    color: var(--fh-muted);
    max-width: 620px;
    margin: 0 auto 20px;
}

@media (max-width: 991.98px) {
    .fh-cards { grid-template-columns: 1fr; }
    .fh-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fh-hero { padding: 32px 22px; }
    .fh-hero h1 { font-size: 1.95rem; }
}

@media (max-width: 575.98px) {
    .fh-strip { grid-template-columns: 1fr; }
    .fh-actions .fh-btn { width: 100%; }
}

/* ==========================================================================
   16. FOLLOW THE VISITOR'S CHOICE
   The toggle (includes/hooks/fonhost_theme_toggle.php) stamps data-theme on
   <html>. Until the visitor chooses explicitly, follow the operating system —
   the same rule the marketing site uses, so both properties agree.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --fh-text: #e9eaee;
        --fh-muted: #9aa1ae;
        --fh-border: #2a2f3a;
        --fh-border-strong: #3a4150;
        --fh-page: #0f1115;
        --fh-surface: #16191f;
        --fh-surface-2: #1f232b;
        --fh-brand-soft: rgba(220, 38, 38, .12);
        --fh-brand-soft-2: rgba(220, 38, 38, .2);
    }

    html:not([data-theme="light"]) a { color: #f87171; }
    html:not([data-theme="light"]) .navbar-brand { color: #f87171 !important; }
    html:not([data-theme="light"]) .table thead th {
        background-color: var(--fh-surface-2);
        color: var(--fh-muted);
    }
    html:not([data-theme="light"]) .form-control,
    html:not([data-theme="light"]) .custom-select {
        background-color: var(--fh-surface-2);
        border-color: var(--fh-border);
        color: var(--fh-text);
    }
}

/* ==========================================================================
   17. DARK MODE COMPLETENESS
   Twenty-One ships no dark palette of its own, so when the visitor chooses
   dark, EVERY layout surface must be set here. Without this, the parent's
   white wrappers show through: white page body, a white strip behind the
   breadcrumb, white gutters either side of the content, and page-title bars.
   !important is deliberate in this section - these rules must beat the
   parent theme's own background and colour declarations.
   ========================================================================== */

/* Document and every wrapper */
[data-theme="dark"],
html.dark,
body.dark {
    background-color: var(--fh-page) !important;
    color: var(--fh-text);
}

[data-theme="dark"] body,
[data-theme="dark"] #main-body,
[data-theme="dark"] .main-body,
[data-theme="dark"] #contentarea,
[data-theme="dark"] .content-area,
[data-theme="dark"] #content,
[data-theme="dark"] .content,
[data-theme="dark"] .main-content,
[data-theme="dark"] .page-content,
[data-theme="dark"] .website-wrapper,
[data-theme="dark"] .site-wrapper,
[data-theme="dark"] .clientarea-wrapper,
[data-theme="dark"] .container,
[data-theme="dark"] .container-fluid,
[data-theme="dark"] section,
[data-theme="dark"] .section {
    background-color: var(--fh-page) !important;
    color: var(--fh-text);
}

/* Breadcrumb and page-title strips */
[data-theme="dark"] .master-breadcrumb,
[data-theme="dark"] .breadcrumb,
[data-theme="dark"] .breadcrumb-bar,
[data-theme="dark"] .header-lined,
[data-theme="dark"] .page-header,
[data-theme="dark"] .title-bar {
    background-color: var(--fh-page) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text);
}

/* Surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .card-body,
[data-theme="dark"] .panel,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .well,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .table,
[data-theme="dark"] .table td,
[data-theme="dark"] .table th,
[data-theme="dark"] .table-responsive {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text);
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .panel-heading,
[data-theme="dark"] .panel-footer {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

[data-theme="dark"] .table thead th {
    background-color: var(--fh-surface-2) !important;
    color: var(--fh-muted) !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
    background-color: var(--fh-surface-2) !important;
}

/* Forms */
[data-theme="dark"] .form-control,
[data-theme="dark"] .custom-select,
[data-theme="dark"] .input-group-text,
[data-theme="dark"] .custom-control-label::before {
    background-color: var(--fh-surface-2) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

/* Alerts, tabs, pagination, dropdowns */
[data-theme="dark"] .alert {
    background-color: var(--fh-surface) !important;
    color: var(--fh-text);
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: var(--fh-border) !important;
}

[data-theme="dark"] .nav-tabs .nav-link { color: var(--fh-muted) !important; }
[data-theme="dark"] .nav-tabs .nav-link.active { color: var(--fh-accent-light) !important; }

[data-theme="dark"] .pagination .page-link {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-accent-light) !important;
}

[data-theme="dark"] .pagination .page-item.active .page-link {
    background-color: var(--fh-brand) !important;
    border-color: var(--fh-brand) !important;
    color: #fff !important;
}

[data-theme="dark"] .dropdown-item { color: var(--fh-text) !important; }
[data-theme="dark"] .dropdown-item:hover,
[data-theme="dark"] .dropdown-item:focus {
    background-color: var(--fh-surface-2) !important;
    color: var(--fh-accent-light) !important;
}

[data-theme="dark"] .text-muted,
[data-theme="dark"] small,
[data-theme="dark"] .small {
    color: var(--fh-muted) !important;
}

[data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3,
[data-theme="dark"] h4, [data-theme="dark"] h5, [data-theme="dark"] h6 {
    color: var(--fh-text) !important;
}

[data-theme="dark"] hr { border-top-color: var(--fh-border) !important; }

/* The keyboard "skip to main content" link was a white bar */
[data-theme="dark"] .skip-to-content,
[data-theme="dark"] .skip-link,
[data-theme="dark"] .sr-only-focusable:focus {
    background-color: var(--fh-surface) !important;
    color: var(--fh-accent-light) !important;
}

/* ---- Navigation: the parent's link colour is too dim on the dark bar ---- */
[data-theme="dark"] .navbar,
[data-theme="dark"] #header,
[data-theme="dark"] #header .navbar {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
}

[data-theme="dark"] #header .navbar-nav .nav-link,
[data-theme="dark"] .navbar-nav .nav-link,
[data-theme="dark"] #header .nav-link,
[data-theme="dark"] .navbar .nav-link {
    color: var(--fh-text) !important;
}

[data-theme="dark"] #header .navbar-nav .nav-link:hover,
[data-theme="dark"] #header .navbar-nav .nav-link:focus,
[data-theme="dark"] .navbar-nav .nav-link:hover,
[data-theme="dark"] .navbar-nav .nav-link:focus {
    color: var(--fh-accent-light) !important;
    background-color: rgba(255, 255, 255, .06) !important;
}

[data-theme="dark"] .navbar-brand,
[data-theme="dark"] #header .navbar-brand {
    color: var(--fh-accent-light) !important;
}

/* ---- This theme's homepage components ---- */
[data-theme="dark"] .fh-hero,
[data-theme="dark"] .fh-card,
[data-theme="dark"] .fh-tile,
[data-theme="dark"] .fh-cta {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
}

/* ==========================================================================
   18. CHROME DETAILS
   Skip link removal, the header theme switch, the login page, and dark
   coverage for the pages that still showed a white surface (announcements,
   news, knowledgebase articles, list groups, media blocks).
   ========================================================================== */

/* ---- 18.1 Remove the "Skip to main content" link ------------------------ */
.skip-to-content,
.skip-link,
.skip-nav,
#skip-to-content,
a[href="#main-body"].sr-only,
a[href="#main-body"].sr-only-focusable,
.sr-only-focusable:not(:focus) {
    display: none !important;
}

/* ---- 18.2 Header theme switch (injected by the hook) -------------------- */
.fh-theme-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0 !important;
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius-sm);
    background-color: var(--fh-surface);
    color: var(--fh-text);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}

.fh-theme-btn:hover,
.fh-theme-btn:focus {
    background-color: var(--fh-brand-soft);
    border-color: var(--fh-brand);
    color: var(--fh-brand);
}

.fh-theme-item {
    display: flex;
    align-items: center;
    margin-right: 12px;
}

/* ---- Domain finder on the home pages ------------------------------------
   The hook removes the block outright (matched by its heading, because the
   wrapper class moves between WHMCS versions); this is the stylesheet's
   fallback for the class names it uses, scoped to the home page so the cart's
   domain registration step is never touched. */
.fh-home-page .domain-search,
.fh-home-page #domain-search,
.fh-home-page .domain-checker,
.fh-home-page .home-domain-search,
.fh-home-page .domain-search-box,
.fh-home-page .domains-search,
.fh-home-page .domain-lookup {
    display: none !important;
}

/* Variant used inside the menu bar, left of "Account": matches the nav links */
.fh-theme-btn-nav {
    width: 38px;
    height: 38px;
    background-color: transparent;
    border-color: transparent;
    font-size: 15px;
}

.fh-theme-btn-nav:hover,
.fh-theme-btn-nav:focus {
    background-color: var(--fh-brand-soft);
    border-color: transparent;
    color: var(--fh-brand);
}

[data-theme="dark"] .fh-theme-btn-nav {
    background-color: transparent !important;
    border-color: transparent !important;
    color: var(--fh-text) !important;
}

[data-theme="dark"] .fh-theme-btn-nav:hover,
[data-theme="dark"] .fh-theme-btn-nav:focus {
    background-color: rgba(255, 255, 255, .06) !important;
    color: var(--fh-accent-light) !important;
}

/* ---- Company logo in dark mode ------------------------------------------
   WHMCS shows the same Company Logo image in both modes, and the Fonhost
   wordmark is dark ink, so it would vanish on the dark header. Swap in the
   light variant that ships next to this stylesheet. */
[data-theme="dark"] .navbar-brand img,
[data-theme="dark"] #header .navbar-brand img {
    content: url("../img/logo-light.svg");
}

/* Fallback position, used only if the header nav is not found */
.fh-theme-floating {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 1080;
    box-shadow: var(--fh-shadow-md);
}

[data-theme="dark"] .fh-theme-btn {
    background-color: var(--fh-surface-2) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

[data-theme="dark"] .fh-theme-btn:hover,
[data-theme="dark"] .fh-theme-btn:focus {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
    color: var(--fh-accent-light) !important;
}

/* ---- 18.3 Login page ---------------------------------------------------- */
.login-page,
.login-wrapper,
.login-container,
.login-form {
    background-color: transparent;
}

.login-page .card,
.login-wrapper .card,
.login-container .card,
.login-form .card,
.login-page .panel,
.login-wrapper .panel {
    max-width: 460px;
    margin: 36px auto;
    border-radius: var(--fh-radius);
}

.login-page h1, .login-page h2,
.login-wrapper h1, .login-wrapper h2,
.login-container h1, .login-container h2 {
    text-align: center;
}

.login-page .btn-primary,
.login-wrapper .btn-primary,
.login-container .btn-primary,
.login-form .btn-primary {
    width: 100%;
    padding: 12px 18px;
}

.login-page a,
.login-wrapper a,
.login-container a {
    font-weight: 600;
}

.login-page .form-group,
.login-wrapper .form-group {
    margin-bottom: 16px;
}

/* ---- 18.4 Dark coverage for pages that still showed white -------------- */
[data-theme="dark"] .announcement,
[data-theme="dark"] .announcements,
[data-theme="dark"] .announcement-list,
[data-theme="dark"] .announcement-item,
[data-theme="dark"] .news,
[data-theme="dark"] .news-item,
[data-theme="dark"] .article,
[data-theme="dark"] .article-body,
[data-theme="dark"] .kb-article,
[data-theme="dark"] .block,
[data-theme="dark"] .content-block,
[data-theme="dark"] .well,
[data-theme="dark"] .list-group,
[data-theme="dark"] .list-group-item,
[data-theme="dark"] .media,
[data-theme="dark"] .media-body,
[data-theme="dark"] .jumbotron,
[data-theme="dark"] .card-body,
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer,
[data-theme="dark"] .panel-body,
[data-theme="dark"] .panel-heading {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

[data-theme="dark"] blockquote {
    background-color: var(--fh-surface) !important;
    border-left: 4px solid var(--fh-brand) !important;
    color: var(--fh-muted) !important;
}

[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--fh-surface-2) !important;
}

[data-theme="dark"] .list-group-item a,
[data-theme="dark"] .announcement a,
[data-theme="dark"] .news-item a {
    color: var(--fh-accent-light) !important;
}

/* ==========================================================================
   19. HEADER CHROME, AUTOFILL, LOGIN, LEFTOVER DARK SURFACES
   ========================================================================== */

/* ---- 19.1 Skip link: hide every form of it ------------------------------ */
a[href^="#main"],
a[href="#content"],
.skip-to-content,
.skip-link,
.skip-nav,
#skip-to-content,
.sr-only-focusable,
[class*="skip" i],
[id*="skip" i] {
    display: none !important;
}

/* ---- 19.2 Knowledgebase search bar in the header ----------------------- */
#header .input-group.search,
#header .navbar .input-group,
#header .navbar form[role="search"],
#header .kb-search,
#header .search-bar,
#header .navbar-search {
    display: none !important;
}

/* ---- 19.3 Autofill: browsers paint filled inputs beige/yellow ---------- */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
select:-webkit-autofill {
    -webkit-text-fill-color: var(--fh-text) !important;
    -webkit-box-shadow: 0 0 0 1000px var(--fh-surface-2) inset !important;
    box-shadow: 0 0 0 1000px var(--fh-surface-2) inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: #e9eaee !important;
    -webkit-box-shadow: 0 0 0 1000px #1f232b inset !important;
    box-shadow: 0 0 0 1000px #1f232b inset !important;
}

/* ---- 19.4 Login / logged-out layout ------------------------------------ */
.login-page,
.login-wrapper,
.login-container,
#login {
    background-color: transparent !important;
}

.login-page .card,
.login-wrapper .card,
.login-container .card,
#login .card {
    max-width: 460px;
    margin: 30px auto;
    border-radius: var(--fh-radius);
}

/* The welcome panel WHMCS prints above the login form */
.login-page .welcome,
.login-page .welcome-panel,
.login-page .panel,
.login-wrapper .welcome,
.login-wrapper .panel,
#login .welcome,
#login .panel {
    max-width: 460px;
    margin: 30px auto 0;
    border-radius: var(--fh-radius);
}

.login-page .row,
.login-wrapper .row {
    justify-content: center;
}

/* ---- 19.5 Dark mode: any light surface still left in the content area --- */
[data-theme="dark"] [class*="announcement" i],
[data-theme="dark"] [class*="article" i],
[data-theme="dark"] [class*="news" i],
[data-theme="dark"] [class*="content-block" i] {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

/* Inline backgrounds baked into WHMCS markup (e.g. a white announcement body) */
[data-theme="dark"] #main-body [style*="background"],
[data-theme="dark"] #main-body [style*="background-color"],
[data-theme="dark"] #contentarea [style*="background"] {
    background-color: var(--fh-surface) !important;
}

[data-theme="dark"] #main-body [style*="color"],
[data-theme="dark"] #main-body [style*="color: #"],
[data-theme="dark"] #main-body [style*="color:#"] {
    color: var(--fh-text) !important;
}

/* ---- 19.6 The bare <article> element -----------------------------------
   WHMCS renders announcement bodies (and other long content) inside a plain
   <article> tag, which carries no theme styling of its own — so in dark mode
   the text sat on the browser's default white background. Style the element. */
article {
    background-color: var(--fh-surface);
    border: 1px solid var(--fh-border);
    border-radius: var(--fh-radius);
    padding: 22px 24px;
    color: var(--fh-text);
}

article h1, article h2, article h3, article h4 {
    color: var(--fh-text);
}

article a {
    color: var(--fh-brand);
}

[data-theme="dark"] article {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

[data-theme="dark"] article h1,
[data-theme="dark"] article h2,
[data-theme="dark"] article h3,
[data-theme="dark"] article h4,
[data-theme="dark"] article p,
[data-theme="dark"] article li,
[data-theme="dark"] article span,
[data-theme="dark"] article div {
    color: var(--fh-text) !important;
}

[data-theme="dark"] article a {
    color: var(--fh-accent-light) !important;
}

/* ==========================================================================
   20. CLIENT AREA REVAMP — dashboard, sidebar actions, cart & checkout
   --------------------------------------------------------------------------
   WHMCS's own palette survives wherever markup does not use our tokens: the
   dashboard tiles and their accent bars, the sidebar action buttons, and the
   whole order funnel (table headers, order summary, totals, checkout). This
   section puts them on the brand palette in both modes. The class names come
   from the shipped templates (clientareahome.tpl, standard_cart), not guesses.
   ========================================================================== */

/* ---- 20.1 Dashboard tiles ------------------------------------------------ */
.client-home-cards .card,
.tiles .tile,
.tile,
.client-home-cards .tile {
    background-color: var(--fh-surface) !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: var(--fh-radius) !important;
    box-shadow: var(--fh-shadow-sm) !important;
    color: var(--fh-text) !important;
}

.client-home-cards .card-header,
.client-home-cards .card-body,
.client-home-cards .card-footer,
.tiles .tile .body {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.tile .stat,
.client-home-cards .stat {
    color: var(--fh-text) !important;
    font-weight: 800;
}

.tile .title,
.client-home-cards .title {
    color: var(--fh-muted) !important;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.tile i,
.tile .fas,
.tile .far,
.client-home-cards .tile i {
    color: var(--fh-muted) !important;
}

/* The four accent bars are WHMCS defaults (blue / gold / green / red). Unify
   them on the brand accent instead of four unrelated colours. */
.highlight,
.highlight.bg-color-blue,
.highlight.bg-color-green,
.highlight.bg-color-gold,
.highlight.bg-color-red {
    background-color: var(--fh-brand) !important;
    background-image: none !important;
}

/* ---- 20.2 Sidebar panels and their action buttons ----------------------- */
.list-group-item,
.list-group-item-action {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.list-group-item.active,
.list-group-item-action.active {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand-soft-2) !important;
    color: var(--fh-brand-dark) !important;
    font-weight: 700;
}

/* Sidebar action buttons carry a colour class (bg-color-green etc.) */
.btn.bg-color-blue,
.btn.bg-color-green,
.btn.bg-color-gold,
.btn.bg-color-red,
.btn[class*="bg-color-"] {
    background-color: var(--fh-brand) !important;
    border-color: var(--fh-brand) !important;
    color: #fff !important;
}

.btn.bg-color-blue:hover,
.btn.bg-color-green:hover,
.btn.bg-color-gold:hover,
.btn.bg-color-red:hover,
.btn[class*="bg-color-"]:hover {
    background-color: var(--fh-brand-dark) !important;
    border-color: var(--fh-brand-dark) !important;
    color: #fff !important;
}

/* ---- 20.3 Buttons: WHMCS's primary actions are Bootstrap green ---------- */
.btn-success,
.btn-success:focus,
.btn-success.focus {
    background-color: var(--fh-brand) !important;
    border-color: var(--fh-brand) !important;
    color: #fff !important;
}

.btn-success:hover,
.btn-success:active,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active {
    background-color: var(--fh-brand-dark) !important;
    border-color: var(--fh-brand-dark) !important;
    color: #fff !important;
}

.btn-info {
    background-color: var(--fh-surface-2) !important;
    border-color: var(--fh-border-strong) !important;
    color: var(--fh-text) !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
    color: var(--fh-brand-dark) !important;
}

/* ---- 20.4 Order funnel: cart, configure, checkout ----------------------- */
.card-header,
.panel-heading,
.cart-table-heading,
.table thead th,
thead th {
    background-color: var(--fh-surface-2) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.bordered-totals,
.order-summary,
.summary-panel,
.bg-white {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.bordered-totals .row,
.bordered-totals td,
.bordered-totals th,
.order-summary td,
.order-summary th {
    color: var(--fh-text) !important;
    border-color: var(--fh-border) !important;
}

.price,
.breakdown-price,
.amt,
.total,
.order-total,
.amount-due {
    color: var(--fh-text) !important;
    font-weight: 700;
}

.price small,
.bordered-totals small {
    color: var(--fh-muted) !important;
}

/* Order funnel form fields, including the promo-code box */
.order-form-container .form-control,
.order-form-container .input-group-text,
#order-standard_cart .form-control,
#order-standard_cart .input-group-text,
.cart-body .form-control {
    background-color: var(--fh-surface-2) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.order-form-container input::placeholder,
#order-standard_cart input::placeholder,
.cart-body input::placeholder {
    color: var(--fh-muted) !important;
}

/* The main call to action in the funnel */
.btn-checkout,
.btn-order-now,
.btn-add-to-cart,
.btn-continue-shopping {
    border-radius: var(--fh-radius-btn) !important;
    font-weight: 700;
}

.btn-checkout,
.btn-order-now,
.btn-add-to-cart {
    background-color: var(--fh-brand) !important;
    border-color: var(--fh-brand) !important;
    color: #fff !important;
}

.btn-checkout:hover,
.btn-order-now:hover,
.btn-add-to-cart:hover {
    background-color: var(--fh-brand-dark) !important;
    border-color: var(--fh-brand-dark) !important;
    color: #fff !important;
}

.btn-continue-shopping {
    background-color: transparent !important;
    border: 1px solid var(--fh-border-strong) !important;
    color: var(--fh-text) !important;
}

.btn-continue-shopping:hover {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
    color: var(--fh-brand-dark) !important;
}

/* Payment-method and account selectors in checkout */
.account {
    background-color: var(--fh-surface) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.account.active,
.account-select.active {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
}

/* Kill leftover blue rules and dividers in the funnel */
.order-form-container hr,
#order-standard_cart hr,
.bordered-totals,
.cart-table-heading {
    border-color: var(--fh-border) !important;
}

/* ==========================================================================
   21. CART TABLE, ORDER SUMMARY AND TOTALS
   Class names lifted from templates/orderforms/standard_cart: the blue band is
   .view-cart-items-header, the Order Summary panel is .order-summary and its
   figures live in .summary-totals / .bordered-totals / .subtotal /
   .total-due-today. That is why the earlier generic .card/.table rules did not
   reach them.
   ========================================================================== */

/* The blue "Product/Options | Price/Cycle" band */
.view-cart-items-header,
.view-cart-items-header .price,
.view-cart-items-header span,
.view-cart-items-header th {
    background-color: var(--fh-surface-2) !important;
    background-image: none !important;
    color: var(--fh-text) !important;
    border-color: var(--fh-border) !important;
}

.view-cart-items-header {
    font-weight: 700;
    border-radius: var(--fh-radius-btn) var(--fh-radius-btn) 0 0;
}

/* Order summary and every totals block */
.order-summary,
.summary-container,
.summary-totals,
.bordered-totals,
.recurring-totals,
.subtotal,
.total-due-today,
.addon-renewals {
    background-color: var(--fh-surface) !important;
    background-image: none !important;
    color: var(--fh-text) !important;
    border-color: var(--fh-border) !important;
}

.order-summary .panel-heading,
.order-summary .card-header,
.summary-container .panel-heading,
.summary-container .card-header {
    background-color: var(--fh-surface-2) !important;
    background-image: none !important;
    color: var(--fh-text) !important;
    border-color: var(--fh-border) !important;
    font-weight: 700;
}

/* Separators between the total rows */
.bordered-totals .row + .row,
.summary-totals .row + .row,
.subtotal,
.recurring-totals,
.total-due-today {
    border-top: 1px solid var(--fh-border) !important;
}

/* Figures: totals in ink, the amount due today in brand red */
.total-due-today,
.total-due-today .amt,
.total-due-today .price,
.total-due-today .amount {
    color: var(--fh-brand) !important;
    font-weight: 800;
}

.subtotal .amt,
.subtotal .price,
.summary-totals .price,
.bordered-totals .price,
.bordered-totals .amt {
    color: var(--fh-text) !important;
    font-weight: 700;
}

.summary-totals small,
.bordered-totals small,
.subtotal small,
.total-due-today small {
    color: var(--fh-muted) !important;
}

/* Section headings inside the funnel */
.sub-heading,
.sub-heading-borderless,
.header-lined,
.tld-pricing-header,
.view-cart-items-header + * {
    background-color: transparent !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.sub-heading,
.sub-heading-borderless {
    font-weight: 700;
}

/* Some cart markup ships bg-white to force a light block */
.bg-white,
.card.bg-white,
.card-body.bg-white {
    background-color: var(--fh-surface) !important;
    color: var(--fh-text) !important;
}

/* ==========================================================================
   22. PROMO CODE BLOCK, CONTINUE SHOPPING, SUMMARY SPACING
   ========================================================================== */

/* ---- 22.1 Promo code block ---------------------------------------------- */
.view-cart-promotion-code,
.tab-pane.promo,
.promo,
.promo-code,
.promo-code-container,
.promo-code-box,
.promo-code-form,
.promo-code-wrapper,
.apply-promo-code,
.apply-promo-code-container,
#promo-code,
#promoCode,
#applyPromoCode,
.fh-promo-moved {
    background-color: var(--fh-surface) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.promo-code .card-header,
.promo-code .panel-heading,
.promo-code-heading,
.promo-code-container .card-header,
.apply-promo-code,
.apply-promo-code-container .card-header {
    background-color: var(--fh-brand-soft) !important;
    background-image: none !important;
    border-color: var(--fh-brand-soft-2) !important;
    color: var(--fh-brand-dark) !important;
    border-radius: var(--fh-radius-btn) var(--fh-radius-btn) 0 0 !important;
    font-weight: 700;
}

.promo-code .form-control,
.promo-code input,
.promo-code-container input,
input[name="promocode"],
#promoCode,
#promo-code {
    background-color: var(--fh-surface-2) !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.promo-code .btn,
.promo-code button,
.btn-validate-promo,
.validate-promo-code,
#validatePromoCode,
#validate-promo-code,
button[onclick*="promo" i] {
    background-color: var(--fh-brand) !important;
    background-image: none !important;
    border-color: var(--fh-brand) !important;
    color: #fff !important;
    border-radius: var(--fh-radius-btn) !important;
    font-weight: 700;
}

.promo-code .btn:hover,
.btn-validate-promo:hover,
.validate-promo-code:hover,
#validatePromoCode:hover,
button[onclick*="promo" i]:hover {
    background-color: var(--fh-brand-dark) !important;
    border-color: var(--fh-brand-dark) !important;
    color: #fff !important;
}

/* The promo block is a TAB GROUP in the cart: its tab sits in .nav-tabs and its
   panel in .tab-content / .tab-pane.promo. Once the hook moves the box into the
   Order Summary those wrappers are empty but still painted, which is the white
   bar. Hide a promo shell that holds no input, hide the promo tab bar itself,
   and put anything that survives on the theme surface so it can never be white.
   :has() is supported by current Chrome, Edge, Safari and Firefox. */
.view-cart-promotion-code:not(:has(input)),
.tab-pane.promo:not(:has(input)),
.promo:not(:has(input)):not(:has(button)) {
    display: none !important;
}

.nav-tabs:has(a[href*="promo" i]),
.tab-content:has(.promo),
.tab-content:has(.view-cart-promotion-code),
.view-cart-promotion-code,
.tab-pane.promo,
.tab-pane.active.promo {
    background-color: var(--fh-surface) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

/* The promo tab bar is only a trigger once the box has moved: hide it. */
.nav-tabs:has(a[href*="promo" i]),
.nav-tabs:has(.view-cart-promotion-code) {
    display: none !important;
}

.tab-content:has(.promo),
.tab-content:has(.view-cart-promotion-code) {
    border: 0 !important;
}

/* THE WHITE BAR.
   WHMCS's own cart CSS contains:
       #order-standard_cart .view-cart-tabs .tab-content { background-color: #f8f8f8; padding: 15px; }
   .view-cart-tabs is the tab group that wraps the promo box (viewcart.tpl:
   <ul class="nav nav-tabs"> + <div class="tab-content">). The hook moves the
   promo box into the Order Summary, so that group is left as an empty shell
   still painting #f8f8f8 with 15px of padding - the white bar. Hide the group
   when it no longer contains an input, and neutralise its background either way.
   The :has(input) guard means that with JavaScript disabled - when the box is
   still inside - the group stays visible and usable. */
.view-cart-tabs:not(:has(input)) {
    display: none !important;
}

.view-cart-tabs .tab-content,
.view-cart-tabs .nav-tabs,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .nav-tabs {
    background-color: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    border: 0 !important;
}

.view-cart-tabs .nav-tabs a[aria-expanded="true"],
.view-cart-tabs .nav-tabs a[aria-selected="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-expanded="true"],
#order-standard_cart .view-cart-tabs .nav-tabs a[aria-selected="true"] {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand-soft-2) !important;
    color: var(--fh-brand-dark) !important;
}

/* ---- 22.2 "Continue Shopping" as a quiet text link, not a button -------- */
.btn-continue-shopping,
.btn-link.btn-continue-shopping {
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 10px 0 !important;
    color: var(--fh-muted) !important;
    font-weight: 600;
    text-decoration: none;
}

.btn-continue-shopping:hover,
.btn-continue-shopping:focus {
    background-color: transparent !important;
    color: var(--fh-brand) !important;
    text-decoration: underline;
}

/* ---- 22.3 Breathing room around the amount due and the CTA -------------- */
.total-due-today,
.summary-totals .total-due-today,
.bordered-totals .total-due-today {
    margin-top: 20px !important;
    padding-top: 20px !important;
}

.order-summary .btn-checkout,
.summary-container .btn-checkout,
.order-summary .btn-order-now {
    margin-top: 18px !important;
}

/* ==========================================================================
   23. SUBMIT TICKET — ATTACHMENTS AND THE RICH TEXT EDITOR
   ========================================================================== */

/* ---- 23.1 File inputs (attachments) ------------------------------------- */
input[type="file"],
input[type="file"].form-control,
input[type="file"].field,
.form-control-file,
.custom-file-input,
.custom-file-label {
    background-color: var(--fh-surface-2) !important;
    background-image: none !important;
    border: 1px solid var(--fh-border) !important;
    border-radius: var(--fh-radius-btn) !important;
    color: var(--fh-text) !important;
    padding: 8px 12px;
}

.custom-file-label::after,
.btn-file {
    background-color: var(--fh-brand) !important;
    border-color: var(--fh-brand) !important;
    color: #fff !important;
}

::-webkit-file-upload-button {
    background-color: var(--fh-surface) !important;
    border: 1px solid var(--fh-border-strong) !important;
    border-radius: 8px;
    color: var(--fh-text) !important;
    padding: 6px 12px;
    margin-right: 10px;
    cursor: pointer;
}

::-webkit-file-upload-button:hover {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
    color: var(--fh-brand-dark) !important;
}

/* The "Add More" attachment button */
.btn-add-more,
.btn-add-attachment,
.add-more,
#addMore,
a.btn-add-more {
    background-color: transparent !important;
    border: 1px solid var(--fh-border-strong) !important;
    border-radius: var(--fh-radius-btn) !important;
    color: var(--fh-text) !important;
    font-weight: 600;
}

.btn-add-more:hover,
.btn-add-attachment:hover,
.add-more:hover,
#addMore:hover {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
    color: var(--fh-brand-dark) !important;
}

/* ---- 23.2 Rich text editor chrome (TinyMCE) ----------------------------- */
.mce-tinymce,
.mce-panel,
.mce-container,
.mce-toolbar-grp,
.mce-menubar,
.mce-statusbar,
.mce-edit-area,
.mce-flow-layout,
.mce-toolbar {
    background-color: var(--fh-surface) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.mce-btn,
.mce-btn button,
.mce-btn i,
.mce-ico {
    background-color: transparent !important;
    background-image: none !important;
    color: var(--fh-text) !important;
}

.mce-btn:hover,
.mce-btn:focus,
.mce-active .mce-btn,
.mce-btn.mce-active {
    background-color: var(--fh-brand-soft) !important;
    color: var(--fh-brand-dark) !important;
}

.mce-path,
.mce-wordcount,
.mce-statusbar *,
.mce-resizehandle {
    color: var(--fh-muted) !important;
}

.mce-edit-area iframe,
.mce-edit-area iframe body {
    background-color: var(--fh-surface) !important;
    color: var(--fh-text) !important;
}

/* Editors that render inline (no iframe): TinyMCE inline mode, CKEditor,
   Summernote, or any plain contenteditable block. These are reachable from a
   stylesheet, unlike an iframe's contents. */
[contenteditable="true"],
[contenteditable=""],
.mce-content-body,
.mce-edit-area,
.tox-edit-area,
.tox-tinymce,
.cke_editable,
.cke_contents,
.note-editable,
.note-frame,
.redactor-editor,
.editor-content,
.message-editor {
    background-color: var(--fh-surface) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

[contenteditable="true"]:focus,
.mce-content-body:focus {
    outline: none !important;
    box-shadow: var(--fh-ring) !important;
}

/* Placeholder text inside the editor */
[contenteditable="true"]:empty::before,
.mce-content-body:empty::before {
    color: var(--fh-muted) !important;
}

/* The message field itself. WHMCS's ticket form builds the editor on top of a
   plain <textarea>, and none of the editor-class rules above match it. */
textarea,
textarea.form-control,
textarea.field,
#message,
#inputMessage,
#ticketMessage,
.message-editor,
.editor,
.editor-area {
    background-color: var(--fh-surface) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

textarea::placeholder,
#message::placeholder,
#inputMessage::placeholder {
    color: var(--fh-muted) !important;
}

textarea:focus,
#message:focus,
#inputMessage:focus {
    border-color: var(--fh-brand) !important;
    box-shadow: var(--fh-ring) !important;
}

/* Toolbar strips drawn above the message box by the editor script */
.editor-toolbar,
.editor-toolbar *,
.wysihtml5-toolbar,
.wysihtml5-toolbar *,
.btn-toolbar .btn,
.editor-toolbar .btn {
    background-color: var(--fh-surface-2) !important;
    background-image: none !important;
    border-color: var(--fh-border) !important;
    color: var(--fh-text) !important;
}

.editor-toolbar .btn:hover,
.btn-toolbar .btn:hover {
    background-color: var(--fh-brand-soft) !important;
    border-color: var(--fh-brand) !important;
    color: var(--fh-brand-dark) !important;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        transition: none !important;
        animation: none !important;
    }
}