/* ============================================================================
   Author: N1CHO
   Made for LynxLayers
   ============================================================================ */
/* ============================================================================
   LynxThemeN1CHO - Client Area + Auth dark-theme override layer
   ----------------------------------------------------------------------------
   Loaded globally AFTER tokens.css + theme.css. WHMCS "six" (Bootstrap 3)
   hardcodes #fff / #f8f8f8 on many components at high specificity, so this
   file uses !important where needed to eliminate every white box across the
   client area, account/profile, support, domains and the login/register pages.

   Rules consume the semantic tokens from tokens.css (never raw hex) so the
   theme stays re-skinnable via the .theme-light / .theme-dark toggle.

   Coverage map:
     1. Global surfaces / headings / text
     2. Panels & cards (.panel, .card, headings, body, footer)
     3. Wells
     4. Tables (incl. DataTables list tables + striped/hover)
     5. List groups + client-area sidebar nav
     6. Tabs (nav-tabs / nav-pills / tab-content)
     7. Form controls (inputs, select, textarea, focus ring)
     8. Buttons (primary/success/default/info + groups)
     9. Labels / badges / status pills
    10. Progress bars
    11. Breadcrumbs + pagination
    12. Alerts (reinforce)
    13. Dashboard tiles / stat / highlight (clientareahome)
    14. Login / register / password-reset auth pages
   ============================================================================ */

/* -------------------------------------------------------------------------- */
/* 1. Global surfaces / headings / text                                       */
/* -------------------------------------------------------------------------- */
body,
#main-body,
.main-content,
#main-content {
    background-color: var(--bg-base) !important;
    color: var(--text-primary);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--text-primary);
}

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

hr {
    border-top-color: var(--border-color);
}

a {
    color: var(--primary-color);
}
a:hover,
a:focus {
    color: var(--primary-strong);
}

/* -------------------------------------------------------------------------- */
/* 2. Panels & cards                                                          */
/* -------------------------------------------------------------------------- */
.panel,
.card,
.panel-default,
.panel-sidebar {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    color: var(--text-primary);
}

.panel-heading,
.card-header {
    background-color: var(--bg-muted) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.panel-title,
.card-title {
    color: var(--text-primary) !important;
}
.panel-title a,
.card-title a {
    color: var(--text-primary);
}

.panel-body,
.card-body {
    background-color: transparent !important;
    color: var(--text-primary);
}

.panel-footer,
.card-footer {
    background-color: var(--bg-muted) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-secondary);
}

/* coloured accent panels on the dashboard keep their accent bar but dark body */
.panel-accent-blue,
.panel-accent-green,
.panel-accent-red,
.panel-accent-gold,
.panel-accent-grey {
    background-color: var(--bg-surface) !important;
}

/* -------------------------------------------------------------------------- */
/* 3. Wells                                                                   */
/* -------------------------------------------------------------------------- */
.well {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--text-primary);
}

/* -------------------------------------------------------------------------- */
/* 4. Tables (incl. DataTables list tables)                                   */
/* -------------------------------------------------------------------------- */
.table,
.table-list {
    background-color: transparent !important;
    color: var(--text-primary) !important;
}

.table > thead > tr > th,
.table > thead > tr > td,
.table-list thead th {
    background-color: var(--bg-muted) !important;
    border-bottom: 2px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    font-weight: 600;
}

.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
    background-color: var(--bg-surface) !important;
    border-top: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: var(--bg-muted) !important;
}

.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th,
.table > tbody > tr[onclick]:hover > td {
    background-color: var(--bg-muted) !important;
    color: var(--text-primary) !important;
}

.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th {
    border-color: var(--border-color) !important;
}

.table-container {
    background-color: transparent !important;
}

/* DataTables chrome (search box, length select, info, pagination wrapper) */
.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter {
    color: var(--text-secondary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: var(--text-secondary) !important;
    background: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: var(--primary-soft) !important;
    color: var(--primary-strong) !important;
    border-color: var(--border-color) !important;
}

/* six paints the DataTables control bars with hard-coded light colours:
   .dataTables_info #4f5360 (the grey top bar), .dataTables_length #f6f6f6 (the
   white footer), the search box #fff and sorted headers #f6f6f6. Override the
   lot to the theme tokens so the list tables (My Emails, etc.) flip dark/light. */
.dataTables_wrapper .dataTables_info {
    background-color: transparent !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-secondary) !important;
    border-radius: 0;
}
.dataTables_wrapper .dataTables_length {
    background-color: transparent !important;
    color: var(--text-secondary) !important;
}
.dataTables_wrapper .dataTables_length select {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
}
.dataTables_wrapper .dataTables_filter label .form-control,
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input {
    background-color: var(--bg-surface) !important;
    background-image: none !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm) !important;
    padding: 7px 12px !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder { color: var(--text-muted) !important; }
.dataTables_wrapper table.table-list thead th.sorting,
.dataTables_wrapper table.table-list thead th.sorting_asc,
.dataTables_wrapper table.table-list thead th.sorting_desc {
    background-color: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}
.dataTables_wrapper .listtable { background-color: transparent !important; }

/* Page title bar (six: .header-lined h1 is #058 blue with a #ccc rule) */
.header-lined h1 {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
}
.header-lined h1 small { color: var(--text-muted) !important; }

/* Marketing / "Join our mailing list" opt-in box (six leaves it white) */
.marketing-email-optin {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    padding: 20px 22px;
}
.marketing-email-optin h4 { color: var(--text-primary) !important; }
.marketing-email-optin p { color: var(--text-secondary) !important; }

/* -------------------------------------------------------------------------- */
/* 5. List groups + client-area sidebar nav                                   */
/* -------------------------------------------------------------------------- */
.list-group {
    background-color: transparent !important;
}

.list-group-item {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
    transition: background-color .2s var(--ease-out), color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}

a.list-group-item:hover,
a.list-group-item:focus,
.list-group-item-action:hover {
    background-color: color-mix(in oklch, var(--primary-color) 10%, var(--bg-surface)) !important;
    color: var(--primary-strong) !important;
}

.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    background-color: var(--primary-soft) !important;
    border-color: var(--border-color) !important;
    color: var(--primary-strong) !important;
}

.list-group-item.disabled,
.list-group-item.disabled:hover {
    background-color: var(--bg-inset) !important;
    color: var(--text-muted) !important;
}

/* sidebar panel + its current item accent */
.panel-sidebar .list-group-item .sidebar-menu-item-icon {
    color: var(--text-muted);
}
.panel-sidebar .list-group-item.active .sidebar-menu-item-icon {
    color: var(--primary-strong);
}
.panel-sidebar .panel-heading .panel-minimise {
    color: var(--text-muted);
}

/* -------------------------------------------------------------------------- */
/* 6. Tabs                                                                    */
/* -------------------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--border-color) !important;
}
.nav-tabs > li > a {
    color: var(--text-secondary) !important;
    background-color: transparent !important;
    border-color: transparent !important;
}
.nav-tabs > li > a:hover,
.nav-tabs > li > a:focus {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-color) var(--border-color) var(--border-color) !important;
    color: var(--text-primary) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) var(--border-color) transparent !important;
    border-bottom: 2px solid var(--primary-color) !important;
    color: var(--primary-strong) !important;
}

.nav-pills > li > a {
    color: var(--text-secondary) !important;
}
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: var(--bg-muted) !important;
    color: var(--text-primary) !important;
}
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

.tab-content {
    background-color: transparent !important;
    color: var(--text-primary);
}

/* -------------------------------------------------------------------------- */
/* 7. Form controls                                                           */
/* -------------------------------------------------------------------------- */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
select,
textarea,
.input-group-addon {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-sm);
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--text-muted) !important;
}

.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control,
select[disabled],
input[disabled] {
    background-color: var(--bg-inset) !important;
    color: var(--text-muted) !important;
    cursor: not-allowed;
}

select option {
    background-color: var(--bg-surface);
    color: var(--text-primary);
}

label,
.control-label,
.col-form-label {
    color: var(--text-secondary);
}

.input-group-addon {
    background-color: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}

/* -------------------------------------------------------------------------- */
/* 8. Buttons                                                                 */
/* -------------------------------------------------------------------------- */
.btn-primary,
.btn-success,
.btn-info,
.btn-order {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-info:hover,
.btn-info:focus,
.btn-order:hover {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: var(--text-on-primary) !important;
}

.btn-default {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}
.btn-default:hover,
.btn-default:focus {
    background-color: var(--bg-muted) !important;
    border-color: var(--border-strong) !important;
    color: var(--text-primary) !important;
}

.btn-link {
    color: var(--primary-color) !important;
}
.btn-link:hover {
    color: var(--primary-strong) !important;
}

/* button groups (domains/services action rows) */
.btn-group > .btn-default,
.btn-group-secondary > .btn {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* 9. Labels / badges / status pills                                          */
/* -------------------------------------------------------------------------- */
.badge {
    background-color: var(--primary-soft) !important;
    color: var(--primary-strong) !important;
}

.label {
    color: var(--text-on-primary);
}
.label-default {
    background-color: var(--bg-muted) !important;
    color: var(--text-secondary) !important;
}
.label-primary,
.label-info {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}
.label-success {
    background-color: var(--color-success) !important;
    color: var(--bg-base) !important;
}
.label-warning {
    background-color: var(--color-warning) !important;
    color: var(--bg-base) !important;
}
.label-danger {
    background-color: var(--color-danger) !important;
    color: var(--bg-base) !important;
}

/* Status labels in list tables (invoices, services, tickets): six renders these
   as identical neutral full-width bars, which loses the paid/unpaid/active
   distinction. Make them compact, color-coded pills that read at a glance. */
.label.status {
    display: inline-block !important;
    width: auto !important;
    padding: 5px 14px !important;
    border-radius: var(--radius-pill) !important;
    font-size: var(--text-xs) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border: 1px solid transparent !important;
    background-color: var(--bg-muted) !important;
    color: var(--text-primary) !important;
}
.label.status.label-success,
.label.status.label-active {
    background-color: color-mix(in oklch, var(--color-success) 16%, transparent) !important;
    color: var(--color-success) !important;
    border-color: color-mix(in oklch, var(--color-success) 34%, transparent) !important;
}
.label.status.label-danger,
.label.status.label-cancelled,
.label.status.label-fraud {
    background-color: color-mix(in oklch, var(--color-danger) 16%, transparent) !important;
    color: var(--color-danger) !important;
    border-color: color-mix(in oklch, var(--color-danger) 34%, transparent) !important;
}
.label.status.label-warning,
.label.status.label-pending {
    background-color: color-mix(in oklch, var(--color-warning) 18%, transparent) !important;
    color: var(--color-warning) !important;
    border-color: color-mix(in oklch, var(--color-warning) 36%, transparent) !important;
}
.label.status.label-info {
    background-color: color-mix(in oklch, var(--color-info) 16%, transparent) !important;
    color: var(--color-info) !important;
    border-color: color-mix(in oklch, var(--color-info) 34%, transparent) !important;
}

/* -------------------------------------------------------------------------- */
/* 10. Progress bars                                                          */
/* -------------------------------------------------------------------------- */
.progress {
    background-color: var(--bg-inset) !important;
    border: 1px solid var(--border-color);
    box-shadow: none;
}
.progress-bar {
    background-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}
.progress-bar-success { background-color: var(--color-success) !important; }
.progress-bar-warning { background-color: var(--color-warning) !important; }
.progress-bar-danger  { background-color: var(--color-danger) !important; }

/* -------------------------------------------------------------------------- */
/* 11. Breadcrumbs + pagination                                               */
/* -------------------------------------------------------------------------- */
.breadcrumb {
    background-color: var(--bg-muted) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
}
.breadcrumb > li,
.breadcrumb > .active {
    color: var(--text-secondary);
}
.breadcrumb > li + li:before {
    color: var(--text-muted);
}
.breadcrumb a {
    color: var(--primary-color);
}

.pagination > li > a,
.pagination > li > span {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-secondary) !important;
}
.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--bg-muted) !important;
    color: var(--text-primary) !important;
}
.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--text-on-primary) !important;
}

/* -------------------------------------------------------------------------- */
/* 12. Alerts (reinforce on dark)                                             */
/* -------------------------------------------------------------------------- */
.alert {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
}
.alert-success { background-color: rgba(74, 222, 128, 0.12) !important; color: var(--color-success) !important; border-color: rgba(74, 222, 128, 0.30) !important; }
.alert-info    { background-color: rgba(96, 165, 250, 0.12) !important; color: var(--color-info) !important;    border-color: rgba(96, 165, 250, 0.30) !important; }
.alert-warning { background-color: rgba(251, 191, 36, 0.12) !important; color: var(--color-warning) !important; border-color: rgba(251, 191, 36, 0.30) !important; }
.alert-danger  { background-color: rgba(248, 113, 113, 0.12) !important; color: var(--color-danger) !important;  border-color: rgba(248, 113, 113, 0.30) !important; }
.alert a { color: inherit; text-decoration: underline; }

/* -------------------------------------------------------------------------- */
/* 13. Dashboard tiles / stat / highlight (clientareahome)                    */
/* -------------------------------------------------------------------------- */
/* The col (.tile) only provides the grid gutter + click target; the inner <a>
   is the actual card, so the dark base shows through as clean, even gaps.
   Matching the row's negative margin to the col padding keeps the strip's
   outer edges aligned with the search box / panels below. */
.tiles { margin: 0 0 var(--space-2); }
.tiles .row { margin-left: -8px; margin-right: -8px; }
.tiles .tile {
    padding: 0 8px !important;
    margin-bottom: 16px;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}
.tiles .tile:hover { background: transparent !important; }
.tiles .tile > a {
    /* Diagonal-balance KPI: icon badge pinned top-right, the value + label
       anchored bottom-left. Fills the card on the diagonal so it reads as a
       deliberate control-plane stat, not a half-empty box. */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;            /* containing block for icon + accent bar */
    overflow: hidden;              /* clip the bottom accent bar to the radius */
    min-height: 126px;
    padding: var(--space-5) var(--space-5) calc(var(--space-5) + 1px);
    background-color: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out);
}
.tiles .tile > a:hover {
    transform: translateY(-3px);
    border-color: color-mix(in oklch, var(--primary-color) 50%, var(--border-color));
    box-shadow: var(--shadow-glow);
}

/* icon -> tinted rounded badge pinned to the top-right corner */
.tiles .tile .icon {
    position: absolute;
    top: var(--space-4);
    right: var(--space-4);
    width: 44px;
    height: 44px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    color: var(--primary-strong) !important;
    background: var(--primary-soft);
    border: 1px solid color-mix(in oklch, var(--primary-color) 24%, transparent);
    border-radius: var(--radius);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--bg-surface) 60%, transparent);
    transition: transform var(--dur) var(--ease-out),
                background var(--dur) var(--ease-out),
                border-color var(--dur) var(--ease-out);
}
.tiles .tile > a:hover .icon {
    transform: translateY(-1px) scale(1.04);
    background: color-mix(in oklch, var(--primary-color) 16%, transparent);
    border-color: color-mix(in oklch, var(--primary-color) 42%, transparent);
}

/* the value — large, display face, anchored at the bottom-left */
.tiles .tile .stat {
    margin: 0;
    font-family: var(--font-display);
    font-size: clamp(34px, 2.6vw, 42px);
    font-weight: 800;
    line-height: 0.95;
    letter-spacing: -0.025em;
    color: var(--text-primary) !important;
    font-variant-numeric: tabular-nums;
}

/* the label, directly beneath the value */
.tiles .tile .title {
    margin: 9px 0 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}

/* accent strip pinned to the card's bottom edge; brightens on hover */
.tiles .tile .highlight {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    margin: 0;
    border-radius: 0;
    background-color: var(--primary-color);
    opacity: 0.55;
    transition: opacity var(--dur) var(--ease-out), height var(--dur) var(--ease-out);
}
.tiles .tile > a:hover .highlight { opacity: 1; height: 4px; }
/* Monochrome brand accent: drop WHMCS's blue/green/red/gold rainbow for one
   cohesive cyan strip (on-brand; keeps the dashboard free of warm orange/red). */
.tiles .tile .highlight.bg-color-blue,
.tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red,
.tiles .tile .highlight.bg-color-gold,
.tiles .tile .highlight.bg-color-grey { background-color: var(--primary-color) !important; }

/* Responsive: tiles are col-sm-3 (4-up) on desktop, col-xs-6 (2-up) on mobile.
   Tighten the card + value on narrow widths so two fit cleanly side by side. */
@media (max-width: 575px) {
    .tiles .row { margin-left: -5px; margin-right: -5px; }
    .tiles .tile { padding: 0 5px !important; margin-bottom: 10px; }
    .tiles .tile > a { min-height: 104px; padding: var(--space-4) var(--space-4) calc(var(--space-4) + 1px); }
    .tiles .tile .icon { width: 36px; height: 36px; font-size: 15px; top: 12px; right: 12px; border-radius: var(--radius-sm); }
    .tiles .tile .stat { font-size: 30px; }
    .tiles .tile .title { margin-top: 7px; font-size: 10.5px; letter-spacing: 0.08em; }
}
/* Very narrow phones: keep the icon from crowding the value. */
@media (max-width: 360px) {
    .tiles .tile .icon { width: 32px; height: 32px; font-size: 14px; }
    .tiles .tile .stat { font-size: 27px; }
}

/* home knowledgebase search -> rounded, prominent, theme-aware */
.home-kb-search { margin-bottom: var(--space-5); }
.home-kb-search .form-control {
    height: 58px;
    padding-left: 54px;
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--text-primary) !important;
    font-weight: 400;
    box-shadow: var(--shadow-sm);
}
.home-kb-search .form-control:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
}
.home-kb-search .form-control::placeholder { color: var(--text-muted) !important; }
.home-kb-search .fa-search {
    margin-top: -40px;
    margin-left: 24px;
    font-size: 16px;
    color: var(--primary-color);
}

/* -------------------------------------------------------------------------- */
/* 13b. Dashboard home panels -> richer content (news feed, empty states)     */
/* -------------------------------------------------------------------------- */
/* Clip footer hover fills to the panel radius + comfortable reading rhythm.   */
.client-home-panels .panel { overflow: hidden; }
.client-home-panels .panel-body { padding: var(--space-5); line-height: 1.6; color: var(--text-secondary); }
.client-home-panels .panel-body > :last-child { margin-bottom: 0; }
.client-home-panels .panel-body p { margin-bottom: 10px; color: var(--text-secondary); }
.client-home-panels .panel-body strong,
.client-home-panels .panel-body b { color: var(--text-primary); }

/* Inline CTAs inside empty states ("Place an order", "open a ticket") -> the
   one branded, obviously-clickable element in an otherwise muted sentence. */
.client-home-panels .panel-body a:not(.btn) {
    color: var(--primary-strong);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out);
}
.client-home-panels .panel-body a:not(.btn):hover {
    color: var(--primary-color);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Any list-style rows (recent items / services) -> a clean feed: full-width
   hairlines, soft hover wash, gentle nudge. No side stripes. */
.client-home-panels .list-group { margin: 0; }
.client-home-panels .list-group-item {
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    padding: 13px var(--space-5);
    color: var(--text-primary) !important;
}
.client-home-panels .list-group-item:last-child { border-bottom: 0 !important; }
.client-home-panels a.list-group-item {
    transition: background var(--dur-fast) var(--ease-out), padding-left var(--dur) var(--ease-out);
}
.client-home-panels a.list-group-item:hover {
    background: color-mix(in oklch, var(--primary-color) 8%, transparent) !important;
    padding-left: calc(var(--space-5) + 5px);
    color: var(--text-primary) !important;
}

/* Recent News -> headline reads as a headline, date drops to a quiet mono meta
   line. Targets the news/announcements panel by its menu name; harmless (just
   inherits the generic styling above) if the build names the panel otherwise. */
.client-home-panels [menuItemName*="news" i] .panel-body,
.client-home-panels [menuItemName*="announce" i] .panel-body { color: var(--text-primary); }
.client-home-panels [menuItemName*="news" i] .panel-body a:not(.btn),
.client-home-panels [menuItemName*="news" i] .panel-body h3,
.client-home-panels [menuItemName*="news" i] .panel-body h4,
.client-home-panels [menuItemName*="news" i] .panel-body strong,
.client-home-panels [menuItemName*="announce" i] .panel-body a:not(.btn),
.client-home-panels [menuItemName*="announce" i] .panel-body strong {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    text-decoration: none;
}
.client-home-panels [menuItemName*="news" i] .panel-body a:not(.btn):hover,
.client-home-panels [menuItemName*="announce" i] .panel-body a:not(.btn):hover {
    color: var(--primary-strong);
    text-decoration: none;
}
.client-home-panels [menuItemName*="news" i] .panel-body .text-muted,
.client-home-panels [menuItemName*="news" i] .panel-body small,
.client-home-panels [menuItemName*="news" i] .panel-body time,
.client-home-panels [menuItemName*="announce" i] .panel-body .text-muted,
.client-home-panels [menuItemName*="announce" i] .panel-body small {
    display: block;
    margin-top: 4px;
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}
/* Same headline treatment, but identifying the news panel by the announcement
   links it contains (robust even if the panel's menu name isn't "Recent News"). */
.client-home-panels .panel:has(.panel-body a[href*="announcement"]) .panel-body a:not(.btn) {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--text-primary);
    text-decoration: none;
}
.client-home-panels .panel:has(.panel-body a[href*="announcement"]) .panel-body a:not(.btn):hover {
    color: var(--primary-strong);
}

/* Panel footers ("View More...") -> a tidy, centered, full-row link target. */
.client-home-panels .panel-footer {
    padding: 0 !important;
    text-align: center;
    background: transparent !important;
    border-top: 1px solid var(--border-color) !important;
}
.client-home-panels .panel-footer a {
    display: block;
    padding: 11px;
    color: var(--text-muted) !important;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.client-home-panels .panel-footer a:hover {
    color: var(--primary-strong) !important;
    background: color-mix(in oklch, var(--primary-color) 6%, transparent);
}

/* -------------------------------------------------------------------------- */
/* 14. Login / register / password-reset auth pages                          */
/* -------------------------------------------------------------------------- */
.logincontainer,
.logincontainer .panel,
.logincontainer .card,
#frmCheckout .panel,
.signup-container,
.password-reset-container {
    background-color: var(--bg-surface) !important;
    color: var(--text-primary);
}

.login-form .form-control,
.signup-container .form-control {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
    color: var(--text-primary) !important;
}

.logincontainer .checkbox label,
.signup-container .checkbox label {
    color: var(--text-secondary);
}

/* registration step containers / required-field markers */
.registration-section,
.signup-section {
    background-color: var(--bg-surface) !important;
    border-color: var(--border-color) !important;
}

/* -------------------------------------------------------------------------- */
/* 15. Page header + breadcrumb + panel chrome polish                         */
/* -------------------------------------------------------------------------- */
/* Page title -> display font, no hard underline (the breadcrumb rule below
   provides the separating line, so the header reads as one clean block). */
.header-lined h1,
.header-lined h2 {
    font-family: var(--font-display) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    border-bottom: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: var(--space-3);
}
.header-lined h1 small { color: var(--text-muted) !important; font-weight: 500; }

/* Breadcrumb path -> a refined pill (home glyph + chevrons + highlighted current),
   fully token-driven so it flips dark/light. */
.breadcrumb {
    display: inline-flex !important; align-items: center; flex-wrap: wrap;
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius-pill) !important;
    padding: 8px 18px !important;
    margin: 0 0 var(--space-5) !important;
    font-size: var(--text-sm); line-height: 1;
    box-shadow: var(--shadow-sm);
    list-style: none;
}
.breadcrumb > li,
.breadcrumb .breadcrumb-item { display: inline-flex !important; align-items: center; float: none; color: var(--text-secondary); }
.breadcrumb a { color: var(--text-secondary) !important; font-weight: 500; transition: color .18s var(--ease-out); }
.breadcrumb a:hover { color: var(--primary-strong) !important; }
.breadcrumb > .active,
.breadcrumb > li:last-child,
.breadcrumb .breadcrumb-item.active { color: var(--text-primary) !important; font-weight: 600; }
/* chevron separators (replace Bootstrap's "/") */
.breadcrumb > li + li:before,
.breadcrumb .breadcrumb-item + .breadcrumb-item:before {
    content: "\203A" !important; color: var(--text-muted) !important; opacity: .7;
    padding: 0 11px !important; font-weight: 400; font-size: 1.1em;
}
/* home glyph on the first crumb */
.breadcrumb > li:first-child > a:before,
.breadcrumb .breadcrumb-item:first-child > a:before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "FontAwesome"; font-weight: 900;
    content: "\f015"; margin-right: 8px; color: var(--primary-color); font-size: 0.92em;
}

/* WHMCS prints panel-footer even when empty -> blank muted bars. Hide them. */
.panel-footer:empty,
.panel-footer.clearfix:empty { display: none !important; }

/* Panel headings -> display-font title + brand-cyan leading icon */
.panel-heading .panel-title { font-family: var(--font-display); font-weight: 700; }
.panel-heading .panel-title > i { color: var(--primary-color); }
.panel-heading .panel-title .panel-minimise { color: var(--text-muted) !important; font-size: 0.78em; }
.panel-heading .panel-title .btn i { color: inherit; }

/* The "btn-default btn-xs" actions in panel headings -> quiet branded chips */
.panel-heading .panel-title .btn-xs {
    background: color-mix(in oklch, var(--primary-color) 10%, transparent) !important;
    border: 1px solid color-mix(in oklch, var(--primary-color) 24%, transparent) !important;
    color: var(--primary-strong) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
    padding: 3px 13px !important;
    transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.panel-heading .panel-title .btn-xs:hover {
    background: color-mix(in oklch, var(--primary-color) 20%, transparent) !important;
    color: var(--primary-strong) !important;
}

/* Sidebar "Your Info" address block -> tokenized + readable hierarchy */
.panel-sidebar .panel-body { color: var(--text-secondary); }
.panel-sidebar .panel-body strong { color: var(--text-primary); }
.panel-sidebar .panel-footer { background: transparent !important; border-top: 1px solid var(--border-color) !important; }

/* -------------------------------------------------------------------------- */
/* 16. Auth pages -> a centered, polished card (login has no panel of its own) */
/* -------------------------------------------------------------------------- */
.logincontainer {
    max-width: 480px;
    margin: clamp(24px, 5vw, 72px) auto;
    padding: clamp(26px, 4vw, 40px);
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.logincontainer.with-social { max-width: 840px; }
.logincontainer .header-lined h1 { font-size: var(--text-2xl); }
/* "Don't have an account? Create account" prompt below the login form */
.ll-login-alt {
    margin-top: 22px; padding-top: 20px; text-align: center; font-size: var(--text-sm);
    border-top: 1px solid var(--border-color); color: var(--text-muted);
}
.ll-login-alt a {
    color: var(--primary-strong) !important; font-weight: 600; margin-left: 6px;
    transition: color .18s var(--ease-out);
}
.ll-login-alt a:hover { color: var(--primary-hover) !important; text-decoration: underline; }
.logincontainer .header-lined { text-align: center; margin-bottom: var(--space-5); }
.logincontainer .breadcrumb { display: none; }
.login-form .form-control { height: 48px; }
.login-form .form-group { margin-bottom: var(--space-4); }
.login-form [align="center"],
.login-form div[align="center"] {
    display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-5);
}
.login-form #login { width: 100%; padding: 0.7em 1em; font-size: var(--text-base); }
.login-form .btn-default { background: transparent !important; border: 0 !important; color: var(--text-secondary) !important; }
.login-form .btn-default:hover { color: var(--primary-strong) !important; background: transparent !important; }

/* -------------------------------------------------------------------------- */
/* 17. List pages (services / domains / invoices / tickets) -> contained card  */
/* -------------------------------------------------------------------------- */
/* Pull the floating DataTables chrome (info / search / table / pagination)
   into one tidy surface card so the list reads as a single object. */
.table-container.clearfix {
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-5) var(--space-4);
}
/* inside the card, the header band + rows stay flush (no inner repaint) */
.table-container.clearfix .table > thead > tr > th { background: transparent !important; }
.table-container.clearfix .table > tbody > tr > td,
.table-container.clearfix .table-list > tbody > tr > td { background: transparent !important; }
.table-container.clearfix .table-striped > tbody > tr:nth-of-type(odd) > td {
    background: color-mix(in oklch, var(--text-primary) 4%, transparent) !important;
}

/* top (info + search) and bottom (length + pagination) control rows */
.table-container .dataTables_wrapper > .row:first-child { padding-bottom: var(--space-3); }
.table-container .dataTables_wrapper > .row:last-child {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--border-color);
}

/* Search box -> magnifier glyph + comfortable width (it was a bare empty box).
   Needs the .dataTables_wrapper prefix to outrank section 4's background:none. */
.dataTables_wrapper .dataTables_filter input[type="search"],
.dataTables_wrapper .dataTables_filter input {
    padding-left: 36px !important;
    min-width: 220px;
    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='%238a99ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 12px center !important;
}

/* Empty state ("No Records Found") -> centered, breathing, muted */
td.dataTables_empty,
.dataTables_empty {
    padding: var(--space-8) var(--space-4) !important;
    text-align: center !important;
    color: var(--text-muted) !important;
    font-size: var(--text-base) !important;
    background: transparent !important;
    border: 0 !important;
}

/* DataTables sort arrows -> quiet, brighten on the active column */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc { cursor: pointer; }
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--text-muted); opacity: .6; }
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after { color: var(--primary-color); opacity: 1; }

/* -------------------------------------------------------------------------- */
/* 18. Register page -> one cohesive, branded multi-step card                 */
/*     Stock six renders the form bare on the page background with floating   */
/*     "white-chip" section labels. Here it becomes a single elevated surface */
/*     with numbered sections, pill inputs and an orchestrated load-in. Fully */
/*     token-driven, so it flips dark/light with the rest of the theme.       */
/* -------------------------------------------------------------------------- */
/* --- Register page: keep WHMCS's native two-column layout — the primary
   sidebar ("Already Registered?" / Login / Lost Password Reset) stays on the
   left, the form on the right — but hide the breadcrumb (redundant noise on the
   auth page) and let the form fill its column so it never looks stranded.
   Scoped via :has(#registration) so no other page is affected. */
@supports selector(:has(*)) {
  #main-body .row:has(#registration) .header-lined .breadcrumb,
  #main-body .row:has(#registration) ol.breadcrumb { display: none !important; }
}
/* On desktop the sidebar floats up at the page-title line; nudge it down so it
   sits beside the form card and reads as a balanced two-column. */
@media (min-width: 992px) {
  @supports selector(:has(*)) {
    #main-body .row:has(#registration) > .sidebar { margin-top: clamp(54px, 6vw, 92px); }
  }
}

#registration {
    counter-reset: regstep;
    max-width: 880px;
    margin: clamp(18px, 4vw, 44px) auto 0;
}
#registration #frmCheckout {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: clamp(22px, 4vw, 46px);
    overflow: hidden;
}
/* faint cyan aura along the card's top edge (atmosphere, not a flat slab) */
#registration #frmCheckout::before {
    content: "";
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
    opacity: .65;
}

/* --- numbered section headers (replace the floating white-chip labels) --- */
#registration .sub-heading {
    counter-increment: regstep;
    display: flex; align-items: center; gap: var(--space-3);
    margin: var(--space-6) 0 var(--space-5);
    border: 0 !important; text-align: left;
}
#registration #containerNewUserSignup > .sub-heading:first-child { margin-top: 0; }
#registration #containerNewUserSecurity > .sub-heading:first-child { margin-top: var(--space-5); }
/* the leading "01 / 02 / 03" chip */
#registration .sub-heading::before {
    content: counter(regstep, decimal-leading-zero);
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--text-sm); font-weight: 600; line-height: 1;
    color: var(--primary-color);
    background: var(--primary-soft);
    border: 1px solid color-mix(in oklch, var(--primary-color) 28%, transparent);
    border-radius: var(--radius-pill);
    padding: 6px 11px;
}
#registration .sub-heading span {
    background: transparent !important;
    color: var(--text-primary) !important;
    font-family: var(--font-display);
    font-weight: 700; font-size: var(--text-xl);
    letter-spacing: -0.01em;
    padding: 0 !important;
    line-height: 1;   /* hug the glyphs so the title centres on the rule */
}
#registration .sub-heading span small,
#registration .sub-heading span i {
    font-family: var(--font-sans); font-weight: 400;
    color: var(--text-muted);
}
/* hairline rule that fills the rest of the row. Nudge to the title's optical
   centre: caps sit above the line-box centre, so the rule reads slightly low
   without this small lift. */
#registration .sub-heading::after {
    content: ""; flex: 1 1 auto; height: 1px;
    background: linear-gradient(90deg, var(--border-strong), transparent);
    opacity: .55;
    transform: translateY(-1px);
}

/* --- fields: tokenized, comfortable, with a focus-aware leading icon --- */
#registration .form-group { margin-bottom: var(--space-4); }
#registration .form-group.prepend-icon { position: relative; }

#registration .field,
#registration .form-control {
    width: 100%;
    height: 52px;
    background-color: var(--bg-inset) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--radius) !important;
    color: var(--text-primary) !important;
    font-size: var(--text-base);
    padding: 0 16px;
    box-shadow: none !important;
    transition: border-color var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                background-color var(--dur) var(--ease-out);
}
#registration .form-group.prepend-icon .field,
#registration .form-group.prepend-icon .form-control { padding-left: 46px; }

#registration .field::placeholder,
#registration .form-control::placeholder { color: var(--text-muted) !important; opacity: 1; }

/* hover: lift the border so fields feel interactive before focus */
#registration .field:hover:not(:focus),
#registration .form-control:hover:not(:focus) { border-color: var(--border-strong) !important; }

#registration .field:focus,
#registration .form-control:focus {
    background-color: var(--bg-surface) !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important;
    outline: none;
}

/* Leading glyph — clean, centred in the field (no boxed slot). NB: six's
   all.css ships `#registration .prepend-icon .field-icon { height:36px; top:0 }`
   at higher specificity than a bare `.field-icon`, which top-anchored the glyph
   and pushed it above centre. These rules add the form-group class to outrank it
   and span the icon over the FULL field height so it sits dead-centre. */
#registration .form-group.prepend-icon .field-icon {
    position: absolute; top: 0; bottom: 0; left: 0;
    width: 46px; height: auto; margin: 0; padding: 0;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-muted); font-size: 15px; line-height: 1;
    background: none; border: 0;
    z-index: 4; pointer-events: none;
    transition: color var(--dur) var(--ease-out);
}
#registration .form-group.prepend-icon .field-icon i {
    color: inherit; font-size: 15px;
}
#registration .form-group.prepend-icon:focus-within .field-icon,
#registration .form-group.prepend-icon:focus-within .field-icon i {
    color: var(--primary-color);
}

/* selects (country / currency / state dropdown / security question) -> custom chevron */
#registration select.field,
#registration select.form-control {
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    padding-right: 42px; cursor: pointer;
    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='%238a99ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    background-size: 16px !important;
}
#registration select.field:focus,
#registration select.form-control:focus {
    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='%2322d3ee' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* phone field: the intl-tel-input plugin owns the left side, so drop our icon */
#registration label[for="inputPhone"].field-icon { display: none; }
#registration .form-group.prepend-icon .iti { display: block; width: 100%; }
/* intl-tel-input v17 runs with separateDialCode:true — it pads the input by
   measuring the flag width in JS, but that isn't landing here, so our 48px
   prepend padding wins and the "+1" dial code overlaps the placeholder. Pin a
   left padding that always clears the flag + dial code, and theme the prefix. */
#registration .form-group.prepend-icon input#inputPhone,
#registration .iti input#inputPhone { padding-left: 94px !important; }
#registration .iti__selected-dial-code,
#registration .iti .selected-dial-code { color: var(--text-secondary) !important; }
#registration .iti__selected-flag,
#registration .iti .selected-flag {
  border-right: 1px solid var(--border-color);
  border-radius: var(--radius) 0 0 var(--radius);
}
#registration .iti__selected-flag:hover,
#registration .iti .selected-flag:hover,
#registration .iti.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background: var(--bg-muted) !important;
}

/* custom-field / non-icon labels + help text */
#registration label:not(.field-icon) {
    color: var(--text-secondary);
    font-weight: 600; font-size: var(--text-sm);
    margin-bottom: var(--space-2);
}
#registration .field-help-text { color: var(--text-muted); font-size: var(--text-sm); }

/* --- account security: generate button + strength meter --- */
#registration .generate-password {
    height: 44px; padding: 0 20px; font-weight: 600;
    background: color-mix(in oklch, var(--primary-color) 12%, transparent) !important;
    border: 1px solid color-mix(in oklch, var(--primary-color) 28%, transparent) !important;
    color: var(--primary-strong) !important;
    border-radius: var(--radius-pill) !important;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
#registration .generate-password:hover {
    background: color-mix(in oklch, var(--primary-color) 22%, transparent) !important;
    color: var(--primary-strong) !important;
    transform: translateY(-1px);
}
#registration .password-strength-meter .progress {
    height: 8px; overflow: hidden; box-shadow: none;
    background: var(--bg-inset) !important;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-pill);
}
#registration .password-strength-meter .progress-bar { box-shadow: none; transition: width var(--dur) var(--ease-out); }
#registration .progress-bar-danger  { background-color: var(--color-danger) !important; }
#registration .progress-bar-warning { background-color: var(--color-warning) !important; }
#registration .progress-bar-success { background-color: var(--color-success) !important; }
#registration #passwordStrengthTextLabel { color: var(--text-muted) !important; margin-top: var(--space-2); }
#registration #passwdFeedback {
    background: var(--primary-soft) !important;
    border: 1px solid color-mix(in oklch, var(--primary-color) 24%, transparent) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius) !important;
}

/* marketing opt-in card (base styles in section 4) -> just add rhythm */
#registration .marketing-email-optin { margin-top: var(--space-5); }

/* --- terms-of-service panel -> warm-bordered token card, not Bootstrap red --- */
#registration .tospanel,
#registration .tospanel.panel-danger {
    background: var(--bg-inset) !important;
    border: 1px solid color-mix(in oklch, var(--color-warning) 35%, var(--border-color)) !important;
    border-radius: var(--radius) !important;
    box-shadow: none !important;
    margin-top: var(--space-5);
}
#registration .tospanel .panel-heading {
    background: transparent !important;
    border: 0 !important;
    color: var(--text-primary) !important;
}
#registration .tospanel .panel-title { color: var(--text-primary) !important; font-family: var(--font-display); }
#registration .tospanel .tosicon { color: var(--color-warning) !important; }
#registration .tospanel .panel-body,
#registration .tospanel .checkbox label { color: var(--text-secondary) !important; }
#registration .tospanel a { color: var(--primary-strong) !important; font-weight: 600; }

/* --- submit -> full-width brand CTA with cyan glow --- */
#registration p[align="center"] { margin: var(--space-6) 0 0; }
#registration input[type="submit"].btn-primary,
#registration .btn-large.btn-primary {
    width: 100%; height: 56px; border: 0;
    font-family: var(--font-display);
    font-weight: 700; font-size: var(--text-lg); letter-spacing: -0.01em;
    color: var(--text-on-primary) !important;
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover)) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-glow);
    transition: transform var(--dur) var(--ease-out),
                box-shadow var(--dur) var(--ease-out),
                filter var(--dur) var(--ease-out);
}
#registration input[type="submit"].btn-primary:hover,
#registration .btn-large.btn-primary:hover {
    transform: translateY(-2px); filter: brightness(1.05);
    box-shadow: 0 0 0 1px rgba(34, 211, 238, 0.30), 0 18px 50px -12px rgba(34, 211, 238, 0.60);
}
#registration input[type="submit"].btn-primary:active,
#registration .btn-large.btn-primary:active { transform: translateY(0); }

/* --- orchestrated, single page-load reveal (one staggered cascade) --- */
@media (prefers-reduced-motion: no-preference) {
    #registration #frmCheckout > div,
    #registration #frmCheckout > p {
        animation: regReveal 0.55s var(--ease-out) both;
    }
    #registration #frmCheckout > div:nth-of-type(1) { animation-delay: 0.05s; }
    #registration #frmCheckout > div:nth-of-type(2) { animation-delay: 0.13s; }
    #registration #frmCheckout > div:nth-of-type(3) { animation-delay: 0.21s; }
    #registration #frmCheckout > div:nth-of-type(4) { animation-delay: 0.29s; }
    #registration #frmCheckout > p  { animation-delay: 0.37s; }
}
@keyframes regReveal {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------- */
/* 19. Client dashboard (clientareahome) -> "control center" polish           */
/*     Scoped to body.page-clientareahome so it never bleeds to other pages.  */
/*     Adds: a welcome hero with atmosphere, depth on the stat tiles,         */
/*     friendlier empty states, and one orchestrated page-load cascade.       */
/* -------------------------------------------------------------------------- */

/* --- welcome hero: bigger greeting + a soft cyan aura behind it --- */
.page-clientareahome .main-content > .header-lined {
    position: relative;
    padding: var(--space-2) 0 var(--space-4);
    margin-bottom: var(--space-5);
    isolation: isolate;
}
.page-clientareahome .main-content > .header-lined::before {
    content: "";
    position: absolute; z-index: -1;
    top: -40px; left: -60px; width: 380px; height: 200px;
    background: radial-gradient(60% 60% at 30% 40%,
                color-mix(in oklch, var(--primary-color) 22%, transparent), transparent 70%);
    filter: blur(8px);
    pointer-events: none;
    opacity: 0.9;
}
.page-clientareahome .main-content > .header-lined h1 {
    font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl)) !important;
}

/* --- stat tiles: quiet depth — a soft aura anchored under the top-right icon,
   fully contained so it never reads as a cut-off smudge --- */
.page-clientareahome .tiles .tile > a {
    background-image: radial-gradient(80% 75% at 88% 8%,
        color-mix(in oklch, var(--primary-color) 9%, transparent) 0%,
        transparent 60%);
}
.page-clientareahome .tiles .tile > a:hover {
    background-image: radial-gradient(85% 80% at 88% 8%,
        color-mix(in oklch, var(--primary-color) 14%, transparent) 0%,
        transparent 62%);
}
/* (the value/label sit above the element's own background-image by default;
   the icon must keep its absolute top-right placement, so no position reset here) */

/* --- friendlier empty states (no products / no tickets / no contacts) --- */
.page-clientareahome .client-home-panels .panel-body {
    min-height: 84px;
}
/* turn the inline "Place an order" / "open a ticket" prompt links into chips */
.page-clientareahome .client-home-panels .panel-body > p:only-child {
    display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3);
    color: var(--text-secondary);
}
.page-clientareahome .client-home-panels .panel-body > p:only-child a:not(.btn) {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px;
    background: var(--primary-soft) !important;
    border: 1px solid color-mix(in oklch, var(--primary-color) 28%, transparent) !important;
    color: var(--primary-strong) !important;
    border-radius: var(--radius-pill) !important;
    font-weight: 600; text-decoration: none !important;
    transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.page-clientareahome .client-home-panels .panel-body > p:only-child a:not(.btn):hover {
    background: color-mix(in oklch, var(--primary-color) 18%, transparent) !important;
    transform: translateY(-1px);
}

/* --- sidebar "Update" / "New Contact" CTAs -> consistent brand treatment --- */
.page-clientareahome .panel-sidebar .btn-block {
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
}

/* --- domain register/transfer tab toggle inside the home panel --- */
.page-clientareahome .client-home-panels .nav-tabs > li > a,
.page-clientareahome .client-home-panels .btn-group .btn {
    border-radius: var(--radius-pill) !important;
}

/* --- one orchestrated dashboard load-in (respects reduced motion) --- */
@media (prefers-reduced-motion: no-preference) {
    .page-clientareahome .tiles .tile,
    .page-clientareahome .home-kb-search,
    .page-clientareahome .client-home-panels .panel {
        animation: dashReveal 0.5s var(--ease-out) both;
    }
    .page-clientareahome .tiles .tile:nth-child(1) { animation-delay: 0.04s; }
    .page-clientareahome .tiles .tile:nth-child(2) { animation-delay: 0.10s; }
    .page-clientareahome .tiles .tile:nth-child(3) { animation-delay: 0.16s; }
    .page-clientareahome .tiles .tile:nth-child(4) { animation-delay: 0.22s; }
    .page-clientareahome .home-kb-search { animation-delay: 0.28s; }
    .page-clientareahome .client-home-panels .panel { animation-delay: 0.34s; }
}
@keyframes dashReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------------------------------- */
/* 20. Manage Product (clientareaproductdetails) -> kill the white boxes      */
/*     six hardcodes .product-icon #efefef + .product-details-tab-container    */
/*     #fff/#ddd and a flat status bar. Rebuild as token-driven cards: a hero  */
/*     service panel with a status pill + a clean meta definition list.        */
/* -------------------------------------------------------------------------- */
.product-details { margin-bottom: var(--space-5); }

/* --- service hero card (icon + name + status) --- */
.product-details .product-status {
    margin: 0 0 var(--space-4);
    border-radius: var(--radius-lg);
    background: transparent !important;   /* kill six's flat green/blue status bar */
}
.product-details .product-status-active,
.product-details .product-status-pending,
.product-details .product-status-suspended,
.product-details .product-status-cancelled,
.product-details .product-status-terminated,
.product-details .product-status-fraud { background-color: transparent !important; }
.product-details .product-icon {
    position: relative;
    margin: 0;
    padding: var(--space-8) var(--space-5) var(--space-6) !important;
    background-color: transparent !important;
    background-image:
        radial-gradient(120% 90% at 50% -10%,
            color-mix(in oklch, var(--primary-color) 16%, transparent), transparent 60%),
        linear-gradient(180deg, var(--bg-muted), var(--bg-inset));
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    font-size: inherit;
}
/* the stacked FA icon -> a tinted brand badge, not a faded white blob */
.product-details .product-icon .fa-stack {
    font-size: 1.4em;
    margin-bottom: var(--space-3);
}
.product-details .product-icon .fa-stack .fa-circle {
    color: var(--primary-soft) !important;
}
.product-details .product-icon .fa-stack .fa-inverse {
    color: var(--primary-color) !important;
}
.product-details .product-icon h3 {
    margin: var(--space-2) 0 2px;
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-2xl);
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;
}
.product-details .product-icon h4 {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-muted) !important;
}

/* status -> a centered pill with a leading dot (replaces the flat colour bar) */
.product-details .product-status-text {
    margin-top: calc(-1 * var(--space-4));
    padding: 0;
    background: transparent !important;
    text-align: center;
    position: relative; z-index: 2;
}
.product-details .product-status-text::before { content: ""; }
.product-details .product-status .product-status-text {
    display: block;
}
.product-details .product-status-text > * ,
.product-details .product-status-text {
    color: inherit;
}
/* render the status string itself as the pill */
.product-details .product-status-active .product-status-text,
.product-details .product-status-pending .product-status-text,
.product-details .product-status-suspended .product-status-text,
.product-details .product-status-cancelled .product-status-text,
.product-details .product-status-terminated .product-status-text,
.product-details .product-status-fraud .product-status-text {
    text-transform: uppercase;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
}
/* status pill skin (applied via a wrapper span we can't add, so style the band
   text into an inline pill using box styling on the block, centered) */
.product-details .product-status-text {
    width: max-content;
    margin-left: auto; margin-right: auto;
    padding: 6px 16px 6px 30px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--border-color);
    background: var(--bg-surface) !important;
    box-shadow: var(--shadow-sm);
}
.product-details .product-status-text::after {
    content: "";
    position: absolute;
    left: 14px; top: 50%; transform: translateY(-50%);
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--text-muted);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--text-muted) 22%, transparent);
}
.product-details .product-status-active   .product-status-text { color: var(--color-success) !important; }
.product-details .product-status-active   .product-status-text::after { background: var(--color-success); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-success) 24%, transparent); }
.product-details .product-status-pending  .product-status-text { color: var(--color-warning) !important; }
.product-details .product-status-pending  .product-status-text::after { background: var(--color-warning); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-warning) 24%, transparent); }
.product-details .product-status-suspended .product-status-text { color: var(--color-info) !important; }
.product-details .product-status-suspended .product-status-text::after { background: var(--color-info); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-info) 24%, transparent); }
.product-details .product-status-cancelled .product-status-text,
.product-details .product-status-terminated .product-status-text,
.product-details .product-status-fraud      .product-status-text { color: var(--color-danger) !important; }
.product-details .product-status-cancelled .product-status-text::after,
.product-details .product-status-terminated .product-status-text::after,
.product-details .product-status-fraud      .product-status-text::after { background: var(--color-danger); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-danger) 24%, transparent); }

/* --- action buttons (renew / upgrade / cancel) --- */
.product-details .product-actions-wrapper { margin-top: var(--space-4); }
.product-details .product-actions-wrapper .btn-block { margin-bottom: var(--space-3); border-radius: var(--radius) !important; font-weight: 600; }
.product-details .product-actions-wrapper .btn-danger {
    background: transparent !important;
    border: 1px solid color-mix(in oklch, var(--color-danger) 55%, transparent) !important;
    color: var(--color-danger) !important;
    transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.product-details .product-actions-wrapper .btn-danger:hover {
    background: var(--color-danger) !important;
    color: #fff !important;
}

/* --- meta definition list (Registration / Recurring / Billing / etc.) --- */
.product-meta {
    margin: 0;
    background: var(--bg-surface);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-2) var(--space-5);
    overflow: hidden;
}
.product-meta .product-meta-row {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-color);
}
.product-meta .product-meta-row:last-child { border-bottom: 0; }
.product-meta dt {
    margin: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    white-space: nowrap;
}
.product-meta dd {
    margin: 0;
    text-align: right;
    font-weight: 600;
    color: var(--text-primary);
}

/* --- info tabs + tab body (six paints these white) --- */
.product-details-tab-container {
    background-color: var(--bg-surface) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: var(--space-5) !important;
    color: var(--text-primary);
}
.product-details-tab-container .row { margin-bottom: var(--space-2); }
.product-details-tab-container strong { color: var(--text-primary); }
.nav-tabs-overflow { border-bottom: 1px solid var(--border-color); }
.module-client-area { color: var(--text-secondary); }

/* unpaid-invoice alert "Pay Invoice" -> brand chip */
#alertUnpaidInvoice .btn,
#alertOverdueInvoice .btn {
    border-radius: var(--radius-pill) !important;
    font-weight: 600;
}

/* ==========================================================================
   LynxLayers Feedback System  (modules/addons/lynxlayers_feedback client page)
   Token-driven -> flips dark/light. Verified-purchase review submission.
   ========================================================================== */
.ll-feedback { max-width: 980px; }
.ll-feedback .ll-fb-flash { display: flex; align-items: center; gap: 10px; border-radius: var(--radius); }
.ll-feedback .ll-fb-intro p {
    color: var(--text-secondary); font-size: .98rem; line-height: 1.6;
    margin: 0 0 22px; max-width: 70ch;
}
.ll-feedback .ll-fb-h {
    font-family: var(--font-display); font-weight: 700; color: var(--text-primary);
    font-size: 1.15rem; margin: 0 0 16px;
}
.ll-feedback .ll-fb-h-mine {
    margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--border-color);
}

/* Eligible-service review cards */
.ll-feedback .ll-fb-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 18px;
}
.ll-feedback .ll-fb-card {
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius-lg); padding: 20px; margin: 0;
    transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.ll-feedback .ll-fb-card:hover {
    border-color: color-mix(in oklch, var(--primary-color) 35%, var(--border-color));
    box-shadow: var(--shadow-md);
}
.ll-feedback .ll-fb-card-head {
    display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px;
}
.ll-feedback .ll-fb-prod {
    display: block; font-family: var(--font-display); font-weight: 600;
    font-size: 1.02rem; color: var(--text-primary); line-height: 1.25;
}
.ll-feedback .ll-fb-dom {
    display: block; margin-top: 2px; font-family: var(--font-mono);
    font-size: .78rem; color: var(--text-muted);
}
.ll-feedback .ll-fb-paid {
    flex-shrink: 0; font-size: .72rem; font-weight: 600; white-space: nowrap;
    color: var(--color-success);
    background: color-mix(in oklch, var(--color-success) 12%, transparent);
    border: 1px solid color-mix(in oklch, var(--color-success) 28%, transparent);
    padding: 4px 9px; border-radius: var(--radius-pill);
}
.ll-feedback .ll-fb-paid i { margin-right: 3px; }

/* CSS-only star rating (row-reverse so :checked fills leftward) */
.ll-feedback .ll-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; margin: 4px 0 14px; }
.ll-feedback .ll-stars input { position: absolute; opacity: 0; width: 0; height: 0; }
.ll-feedback .ll-stars label {
    color: var(--bg-inset); font-size: 26px; padding: 0 3px; cursor: pointer;
    line-height: 1; transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.theme-light .ll-feedback .ll-stars label { color: #cbd6e2; }
.ll-feedback .ll-stars label:hover,
.ll-feedback .ll-stars label:hover ~ label,
.ll-feedback .ll-stars input:checked ~ label { color: var(--primary-color); }
.ll-feedback .ll-stars label:hover { transform: scale(1.12); }
.ll-feedback .ll-stars input:focus-visible + label { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }

.ll-feedback .ll-fb-text {
    width: 100%; resize: vertical; min-height: 84px;
    background: var(--bg-inset) !important; border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important; border-radius: var(--radius-sm) !important;
    padding: 11px 13px; font-size: .92rem;
}
.ll-feedback .ll-fb-text:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px var(--primary-soft) !important; outline: none;
}
.ll-feedback .ll-fb-text::placeholder { color: var(--text-muted); }
.ll-feedback .ll-fb-submit { margin-top: 12px; width: 100%; font-weight: 600; }
.ll-feedback .ll-fb-submit i { margin-right: 6px; }

/* Empty state */
.ll-feedback .ll-fb-empty {
    text-align: center; padding: 48px 24px;
    background: var(--bg-surface); border: 1px dashed var(--border-strong);
    border-radius: var(--radius-lg); color: var(--text-secondary);
}
.ll-feedback .ll-fb-empty > i { font-size: 34px; color: var(--primary-color); opacity: .85; }
/* Button glyphs must inherit the button's OWN text colour, never the cyan
   accent above — otherwise the icon is cyan-on-cyan (invisible) on the filled
   primary button. Holds in both dark and light themes. */
.ll-feedback .btn i { color: inherit; opacity: 1; font-size: inherit; }
.ll-feedback .ll-fb-empty h3 { font-family: var(--font-display); color: var(--text-primary); margin: 14px 0 6px; }
.ll-feedback .ll-fb-empty p { max-width: 46ch; margin: 0 auto 18px; }

/* Your-reviews history */
.ll-feedback .ll-fb-mine { display: flex; flex-direction: column; gap: 12px; }
.ll-feedback .ll-fb-mine-row {
    display: flex; gap: 16px; align-items: flex-start;
    background: var(--bg-surface); border: 1px solid var(--border-color);
    border-radius: var(--radius); padding: 16px 18px;
}
.ll-feedback .ll-fb-mine-stars { flex-shrink: 0; white-space: nowrap; }
.ll-feedback .ll-fb-mine-stars i { color: var(--bg-inset); font-size: 14px; }
.theme-light .ll-feedback .ll-fb-mine-stars i { color: #cbd6e2; }
.ll-feedback .ll-fb-mine-stars i.on { color: var(--primary-color); }
.ll-feedback .ll-fb-mine-quote { color: var(--text-primary); margin: 0 0 4px; line-height: 1.5; }
.ll-feedback .ll-fb-mine-meta { font-size: .8rem; color: var(--text-muted); }
.ll-feedback .ll-fb-mine-meta em { color: var(--color-warning); font-style: normal; }