/* =========================================================
   ApexNodes Modern — UI Kit Styles
   v0.1
   Bootstrap 5 + custom layer
   ========================================================= */

/* ---------- Design tokens ---------- */
:root {
    --apex-primary:        #10b981;
    --apex-primary-hover:  #059669;
    --apex-primary-light:  #ecfdf5;
    --apex-primary-rgb:    16, 185, 129;

    --apex-text:           #1f2937;
    --apex-text-muted:     #6b7280;
    --apex-text-subtle:    #9ca3af;

    --apex-bg:             #f9fafb;
    --apex-card:           #ffffff;
    --apex-surface-2:      #f3f4f6;

    --apex-border:         #e5e7eb;
    --apex-border-strong:  #d1d5db;

    --apex-info:    #3b82f6;
    --apex-success: #10b981;
    --apex-warning: #f59e0b;
    --apex-danger:  #ef4444;

    --apex-radius-sm: 6px;
    --apex-radius:    8px;
    --apex-radius-lg: 12px;
    --apex-radius-xl: 16px;

    /* Flat design — all theme shadow tokens disabled. Anything that
       references `var(--apex-shadow*)` resolves to `none`. Focus rings
       (`0 0 0 3px rgba(primary, 0.x)`) and decorative hover lifts that
       use literal box-shadow values are NOT affected by this — those
       can be killed individually if also unwanted. */
    --apex-shadow-sm: none;
    --apex-shadow:    none;
    --apex-shadow-md: none;
    --apex-shadow-lg: none;

    --apex-sidebar-w: 260px;
    --apex-header-h:  72px;

    /* Bootstrap overrides */
    --bs-primary: var(--apex-primary);
    --bs-primary-rgb: var(--apex-primary-rgb);
    --bs-link-color: var(--apex-primary);
    --bs-link-hover-color: var(--apex-primary-hover);
    --bs-body-color: var(--apex-text);
    --bs-body-bg: var(--apex-bg);
    --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --bs-border-color: var(--apex-border);
    --bs-border-radius: var(--apex-radius);
    --bs-border-radius-lg: var(--apex-radius-lg);
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--apex-bg);
    color: var(--apex-text);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--apex-text);
    font-weight: 700;
    letter-spacing: -0.01em;
}
h1 { font-size: 2rem; line-height: 1.2; }
h2 { font-size: 1.5rem; line-height: 1.3; }
h3 { font-size: 1.25rem; line-height: 1.4; font-weight: 600; }
h4 { font-size: 1.1rem; line-height: 1.4; font-weight: 600; }
h5 { font-size: 1rem;   line-height: 1.5; font-weight: 600; }
h6 { font-size: 0.875rem; line-height: 1.5; font-weight: 600; }

a { color: var(--apex-primary); text-decoration: none; }
a:hover { color: var(--apex-primary-hover); text-decoration: underline; }

code {
    background: var(--apex-surface-2);
    color: var(--apex-text);
    padding: 0.15em 0.4em;
    border-radius: var(--apex-radius-sm);
    font-size: 0.875em;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

.text-muted    { color: var(--apex-text-muted) !important; }
.text-primary  { color: var(--apex-primary)   !important; }
.text-success  { color: var(--apex-success)   !important; }
.text-warning  { color: var(--apex-warning)   !important; }
.text-danger   { color: var(--apex-danger)    !important; }
.text-info     { color: var(--apex-info)      !important; }

.bg-primary    { background-color: var(--apex-primary) !important; }
.bg-success    { background-color: var(--apex-success) !important; }
.bg-warning    { background-color: var(--apex-warning) !important; }
.bg-danger     { background-color: var(--apex-danger)  !important; }
.bg-info       { background-color: var(--apex-info)    !important; }

/* =========================================================
   KIT-SPECIFIC NAV (only for this preview page)
   ========================================================= */
.kit-topbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.85);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--apex-border);
}
.kit-topbar-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.kit-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.kit-brand:hover { text-decoration: none; }
.brand-mark {
    width: 32px; height: 32px;
    background: var(--apex-primary);
    color: white;
    border-radius: var(--apex-radius);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.95rem;
}
.brand-text { font-weight: 700; letter-spacing: -0.02em; color: var(--apex-text); font-size: 1.05rem; }
.brand-apex   { color: var(--apex-primary); }
.brand-nodes  { color: var(--apex-text); }
.brand-suffix { color: var(--apex-text-muted); font-weight: 500; margin-left: 6px; font-size: 0.85rem; }

.kit-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.kit-nav a {
    color: var(--apex-text-muted);
    text-decoration: none;
    font-weight: 500;
    font-size: 0.875rem;
    padding: 6px 12px;
    border-radius: var(--apex-radius);
    transition: all 0.15s;
}
.kit-nav a:hover {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    text-decoration: none;
}

.kit-main {
    max-width: 1280px;
    margin: 0 auto;
    padding: 32px 24px 96px;
}
.kit-section { padding: 56px 0; border-bottom: 1px solid var(--apex-border); }
.kit-section:last-child { border-bottom: 0; }
.kit-section-head { margin-bottom: 32px; }
.kit-section-tag {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--apex-primary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: var(--apex-primary-light);
    padding: 4px 10px;
    border-radius: 99px;
    margin-bottom: 12px;
}
.kit-section-head h2 { margin: 0 0 8px; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; }
.kit-section-head p { color: var(--apex-text-muted); margin: 0; font-size: 1rem; max-width: 720px; }
.kit-subhead { margin-top: 32px; margin-bottom: 16px; font-size: 0.875rem; font-weight: 700; color: var(--apex-text-muted); text-transform: uppercase; letter-spacing: 0.08em; }
.kit-demo-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.kit-demo-card { background: var(--apex-card); }
.kit-footer { padding: 32px 0; text-align: center; }

.swatch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}
.swatch {
    background: var(--apex-card);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.swatch-color { width: 44px; height: 44px; border-radius: var(--apex-radius); flex-shrink: 0; }
.swatch-meta strong { display: block; font-size: 0.875rem; }
.swatch-meta code { font-size: 0.75rem; padding: 0; background: transparent; color: var(--apex-text-muted); }

.radius-demo, .shadow-demo {
    background: var(--apex-card);
    border: 1px solid var(--apex-border);
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--apex-text-muted);
    font-weight: 600;
    font-size: 0.875rem;
}
.shadow-demo { background: var(--apex-card); border: none; border-radius: var(--apex-radius-lg); }

/* =========================================================
   LAYOUT — sidebar + header + content
   ========================================================= */
.layout-preview {
    background: var(--apex-bg);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    overflow: hidden;
    display: flex;
    min-height: 560px;
    box-shadow: var(--apex-shadow);
}

.preview-sidebar {
    width: var(--apex-sidebar-w);
    flex-shrink: 0;
    background: white;
    border-right: 1px solid var(--apex-border);
    display: flex;
    flex-direction: column;
    padding: 0;
}
.sidebar-logo {
    padding: 20px 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-bottom: 1px solid var(--apex-border);
    height: var(--apex-header-h);
}
.logo-text { font-weight: 800; font-size: 1.15rem; letter-spacing: -0.02em; line-height: 1; }
.logo-apex  { color: var(--apex-primary); }
.logo-nodes { color: var(--apex-text); }

.sidebar-nav {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}
.sidebar-nav .nav-item,
.preview-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--apex-text-muted);
    text-decoration: none;
    border-radius: var(--apex-radius);
    font-weight: 500;
    font-size: 0.925rem;
    transition: all 0.15s ease;
    margin-bottom: 2px;
}
.sidebar-nav .nav-item i,
.preview-sidebar .nav-item i {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.sidebar-nav .nav-item span,
.preview-sidebar .nav-item span { flex: 1; }
.sidebar-nav .nav-item:hover,
.preview-sidebar .nav-item:hover {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    text-decoration: none;
}
.sidebar-nav .nav-item.active,
.preview-sidebar .nav-item.active {
    background: var(--apex-primary);
    color: white;
    box-shadow: none;
}
.sidebar-nav .nav-item.active i,
.preview-sidebar .nav-item.active i { color: white; }
.menu-caret {
    margin-left: auto;
    font-size: 0.7rem !important;
    opacity: 0.5;
    transition: transform 0.2s;
}
.nav-badge {
    margin-left: auto;
    background: var(--apex-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}
.nav-item.active .nav-badge { background: white; color: var(--apex-primary); }

.nav-section-label {
    padding: 16px 16px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--apex-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--apex-border);
}
.nav-item-danger { color: var(--apex-danger) !important; }
.nav-item-danger:hover { background: #fef2f2 !important; color: var(--apex-danger) !important; }
.nav-item-danger i { color: var(--apex-danger) !important; }

.preview-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.preview-header {
    height: var(--apex-header-h);
    background: white;
    border-bottom: 1px solid var(--apex-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.header-left { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.header-right { display: flex; align-items: center; gap: 12px; }

.mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius);
    width: 40px;
    height: 40px;
    color: var(--apex-text-muted);
    cursor: pointer;
}
.mobile-toggle:hover { background: var(--apex-surface-2); }

.search-box {
    position: relative;
    width: 100%;
    max-width: 320px;
}
.search-box.static { max-width: none; }
.search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--apex-text-subtle);
    font-size: 0.875rem;
    pointer-events: none;
}
.search-box input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--apex-border);
    border-radius: 99px;
    background: var(--apex-bg);
    font-family: inherit;
    font-size: 0.925rem;
    outline: none;
    transition: all 0.15s;
}
.search-box input:focus {
    border-color: var(--apex-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
}

.header-icon-btn {
    background: transparent;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: var(--apex-radius);
    color: var(--apex-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 1rem;
    padding: 0 10px;
    transition: all 0.15s;
    text-decoration: none !important;
}
.header-icon-btn:hover,
.header-icon-btn:focus,
.header-icon-btn:active {
    background: var(--apex-surface-2);
    color: var(--apex-text);
    text-decoration: none !important;
}
.header-icon-btn i { text-decoration: none !important; }
.header-icon-btn span { font-size: 0.85rem; font-weight: 500; }
.header-icon-btn:has(span) { width: auto; min-width: 40px; }

.header-icon-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--apex-primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 99px;
    min-width: 16px;
    text-align: center;
    border: 2px solid white;
    line-height: 1.2;
}
.header-icon-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 8px;
    height: 8px;
    background: var(--apex-primary);
    border: 2px solid white;
    border-radius: 50%;
}

.user-profile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--apex-radius);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s;
}
.user-profile:hover { background: var(--apex-surface-2); text-decoration: none; }
.user-name {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--apex-text);
    line-height: 1.1;
}
.user-balance {
    font-size: 0.75rem;
    color: var(--apex-primary);
    font-weight: 500;
}
.user-info { line-height: 1.2; }

.preview-content {
    padding: 32px;
    flex: 1;
    overflow: auto;
}
.page-header { margin-bottom: 16px; }
.page-header h1 { font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 6px; }
.page-header p { color: var(--apex-text-muted); margin: 0; font-size: 1rem; }

/* Guest header */
.guest-header {
    height: var(--apex-header-h);
    background: white;
    border-bottom: 1px solid var(--apex-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.guest-brand {
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    text-decoration: none;
}
.guest-brand:hover { text-decoration: none; }
.guest-nav { gap: 24px; }
.guest-nav a {
    color: var(--apex-text);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.925rem;
}
.guest-nav a:hover { color: var(--apex-primary); }
.guest-actions { display: flex; align-items: center; gap: 12px; }

/* =========================================================
   MASTER BREADCRUMB
   ========================================================= */
.master-breadcrumb {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 10px 20px;
    margin-bottom: 16px;
}
.breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 0.875rem !important;
    border-radius: 0 !important;
    list-style: none;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    line-height: 1.4;
    overflow: hidden;
    min-width: 0;
}
.breadcrumb-item {
    display: inline-flex;
    align-items: center;
    line-height: 1.4;
    min-width: 0;
}
/* Truncate the LAST (active) breadcrumb item if it's too long — typical
   for announcement / KB article pages where the full title appears in
   the crumb. Cap at one line with ellipsis instead of wrapping. */
.breadcrumb-item.active {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60ch;
    display: inline-block;
    vertical-align: middle;
}
.breadcrumb-item + .breadcrumb-item { padding-left: 0 !important; }
.breadcrumb-item + .breadcrumb-item::before {
    /* plain unicode "›" — no dependency on a Font Awesome family name
       that may differ across WHMCS FA distributions (Free vs Pro) */
    content: "›" !important;
    font-family: inherit !important;
    font-weight: 600 !important;
    color: var(--apex-text-subtle) !important;
    padding: 0 10px !important;
    font-size: 1.1rem !important;
    display: inline-flex;
    align-items: center;
    line-height: 1;
}
.breadcrumb-item a { color: var(--apex-text-muted); font-weight: 500; text-decoration: none; }
.breadcrumb-item a:hover { color: var(--apex-primary); }
.breadcrumb-item.active { color: var(--apex-primary); font-weight: 600; }

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    font-family: inherit;
    font-weight: 500;
    border-radius: var(--apex-radius);
    border: 1px solid transparent;
    padding: 8px 18px;
    font-size: 0.925rem;
    line-height: 1.5;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    text-decoration: none;
}
.btn:focus, .btn:active { outline: none !important; box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.18) !important; }
.btn-lg { padding: 12px 24px; font-size: 1rem; border-radius: var(--apex-radius-lg); }
.btn-sm { padding: 6px 14px; font-size: 0.825rem; border-radius: var(--apex-radius-sm); }
.btn-xs { padding: 4px 10px; font-size: 0.75rem; border-radius: var(--apex-radius-sm); font-weight: 600; }
.btn-icon { padding: 8px; width: 38px; height: 38px; }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; }
.btn:not(:disabled):not(.disabled):active { transform: translateY(0); }
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }

.btn-primary,
a.btn-primary,
button.btn-primary,
input.btn-primary,
.btn.btn-primary {
    background: var(--apex-primary) !important;
    border-color: var(--apex-primary) !important;
    color: white !important;
    font-weight: 600;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background: var(--apex-primary-hover) !important;
    border-color: var(--apex-primary-hover) !important;
    color: white !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--apex-primary) !important;
    border-color: var(--apex-primary) !important;
    color: white !important;
    opacity: 0.55 !important;
}

.btn-default, .btn-secondary {
    background: white;
    border-color: var(--apex-border);
    color: var(--apex-text);
}
.btn-default:hover, .btn-secondary:hover {
    background: var(--apex-surface-2);
    border-color: var(--apex-border-strong);
    color: var(--apex-text);
}

.btn-outline-primary {
    background: transparent;
    border-color: var(--apex-primary);
    color: var(--apex-primary);
    font-weight: 600;
}
.btn-outline-primary:hover {
    background: var(--apex-primary);
    border-color: var(--apex-primary);
    color: white;
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--apex-text-muted);
}
.btn-ghost:hover {
    background: var(--apex-surface-2);
    color: var(--apex-text);
}

.btn-success { background: var(--apex-success); border-color: var(--apex-success); color: white; font-weight: 600; }
.btn-success:hover { background: #047857; border-color: #047857; color: white; }
.btn-warning { background: var(--apex-warning); border-color: var(--apex-warning); color: white; font-weight: 600; }
.btn-warning:hover { background: #d97706; border-color: #d97706; color: white; }
.btn-danger  { background: var(--apex-danger);  border-color: var(--apex-danger);  color: white; font-weight: 600; }
.btn-danger:hover  { background: #dc2626; border-color: #dc2626; color: white; }
.btn-info    { background: var(--apex-info);    border-color: var(--apex-info);    color: white; font-weight: 600; }
.btn-info:hover    { background: #2563eb; border-color: #2563eb; color: white; }
.btn-link    { background: transparent; border-color: transparent; color: var(--apex-primary); font-weight: 500; }
.btn-link:hover { background: var(--apex-primary-light); color: var(--apex-primary-hover); }

/* btn-group rounding follows BS4 logic: every direct child gets default
   radius from `.btn`, but interior edges (right edge of non-last, left
   edge of non-first) are flattened. This works for nested btn-groups
   too — e.g. `[btn][btn][btn-group > Ещё ▾]`: the inner button is
   `:first-child` of an inner group that is NOT first-child of the outer,
   so its left corners must stay flat to butt up against the previous
   button. The previous "add radius to first-child" logic broke that. */
.btn-group > .btn,
.btn-group > .btn-group > .btn {
    border-right-width: 0;
}
.btn-group > .btn:not(:first-child),
.btn-group > .btn-group:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
}
.btn-group > .btn:not(:last-child):not(.dropdown-toggle),
.btn-group > .btn-group:not(:last-child) > .btn:last-of-type {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
/* The right-most clickable element gets back its right border (we
   stripped border-right-width on every grouped btn above). */
.btn-group > .btn:last-child,
.btn-group > .btn-group:last-child > .btn:last-of-type,
.btn-group > .dropdown-toggle:last-child {
    border-right-width: 1px !important;
}
.btn-group .btn.active { background: var(--apex-primary-light); color: var(--apex-primary); border-color: var(--apex-primary); z-index: 1; }
.btn-group .btn-outline-primary.active { background: var(--apex-primary); color: white; }
/* dropdown-menu under btn-group: align our look with .card */
.dropdown-menu {
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    box-shadow: var(--apex-shadow-lg);
    padding: 6px;
    margin-top: 4px;
    font-size: 0.9rem;
}
.dropdown-menu .dropdown-item {
    border-radius: var(--apex-radius);
    padding: 8px 12px;
    color: var(--apex-text);
}
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
}
.dropdown-menu .dropdown-divider {
    border-top: 1px solid var(--apex-border);
    margin: 6px 0;
}

/* =========================================================
   FORMS
   ========================================================= */
.form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--apex-text);
    margin-bottom: 6px;
}
.form-text { font-size: 0.8rem; margin-top: 6px; }

.form-control,
.form-select {
    height: 44px;
    padding: 10px 14px;
    line-height: 1.5;
    border-radius: var(--apex-radius-lg);
    border: 1px solid var(--apex-border);
    font-family: inherit;
    font-size: 0.925rem;
    color: var(--apex-text);
    background-color: white;
    transition: all 0.15s ease;
    box-shadow: none;
}
/* Native <select> uses the same padding/line-height as <input>
   (.form-control: padding 10px 14px; line-height 1.5). No special
   override — earlier `line-height: 42px` worked for default 44px
   selects but broke 34px shorter ones (text drops below the box). */
.form-control:focus,
.form-select:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
    outline: none;
}
.form-control::placeholder { color: var(--apex-text-subtle); }
.form-control:disabled, .form-control[readonly] {
    background: var(--apex-surface-2);
    color: var(--apex-text-muted);
    cursor: not-allowed;
}
.form-control-sm { height: 36px; padding: 6px 10px; font-size: 0.825rem; border-radius: var(--apex-radius); }
.form-select-sm  { height: 36px; padding: 4px 28px 4px 10px; font-size: 0.825rem; border-radius: var(--apex-radius); background-position: right 8px center; }

textarea.form-control { height: auto; min-height: 100px; resize: vertical; }

.form-select {
    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='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    padding-right: 40px;
    appearance: none;
}

.form-control.is-valid {
    border-color: var(--apex-success);
    padding-right: 40px;
    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='%2310b981' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.form-control.is-invalid {
    border-color: var(--apex-danger);
    padding-right: 40px;
    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='%23ef4444' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='10'/%3e%3cline x1='12' y1='8' x2='12' y2='12'/%3e%3cline x1='12' y1='16' x2='12.01' y2='16'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
}
.valid-feedback   { color: var(--apex-success); font-size: 0.8rem; margin-top: 6px; display: block; }
.invalid-feedback { color: var(--apex-danger);  font-size: 0.8rem; margin-top: 6px; display: block; }
.form-control.is-valid ~ .valid-feedback,
.form-control.is-invalid ~ .invalid-feedback { display: block; }

/* Input groups */
.input-group {
    display: flex;
    align-items: stretch;
}
.input-group > .form-control,
.input-group > .form-select { flex: 1 1 auto; min-width: 0; height: 44px; }
.input-group-text {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: var(--apex-surface-2);
    border: 1px solid var(--apex-border);
    color: var(--apex-text-muted);
    font-size: 0.925rem;
    height: 44px;
}
.input-group > :not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -1px; }
.input-group > :not(:last-child)  { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > :first-child { border-top-left-radius: var(--apex-radius-lg); border-bottom-left-radius: var(--apex-radius-lg); }
.input-group > :last-child  { border-top-right-radius: var(--apex-radius-lg); border-bottom-right-radius: var(--apex-radius-lg); }
.input-group .btn { height: 44px; }

/* Checkboxes & switches.
   IMPORTANT: WHMCS uses .form-check both as:
   (a) ONE checkbox + label  (BS5-style — input.form-check-input + label.form-check-label as siblings)
   (b) a CONTAINER wrapping multiple <label><input ...>text</label> rows
       (legacy — see clientareadetails.tpl email_preferences)
   The previous flex layout broke (b). We use block layout that fits both. */
.form-check {
    margin-bottom: 8px;
    position: relative;
    display: block;
    /* BS4 default sets padding-left: 1.25rem assuming an absolute-positioned
       checkbox to the left — but our flex layout puts the checkbox inline,
       so the padding just shifts every label 20px to the right of the card
       edge. Reset it. */
    padding-left: 0;
}
.form-check > label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    margin-bottom: 12px;
    line-height: 1.5;
    color: var(--apex-text);
    font-size: 0.925rem;
    user-select: none;
}
.form-check > label:last-child { margin-bottom: 0; }
.form-check > label > input[type="checkbox"],
.form-check > label > input[type="radio"] {
    flex-shrink: 0;
    margin: 3px 0 0;
}
/* WHMCS uses <br> between checkbox labels for spacing — we use margin
   on labels instead, so suppress the line breaks. */
.form-check > br { display: none; }
/* BS5-style: input + label as siblings inside .form-check */
.form-check > .form-check-input {
    margin-left: 0;
    margin-right: 8px;
    vertical-align: middle;
}
.form-check > .form-check-label {
    cursor: pointer;
    font-size: 0.925rem;
    color: var(--apex-text);
    user-select: none;
    vertical-align: middle;
}

/* Native checkbox/radio styling — use accent-color so we don't fight the
   browser's renderer (works in all current browsers). */
.form-check-input,
input[type="checkbox"],
input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--apex-primary);
    cursor: pointer;
    vertical-align: middle;
}
.form-check-input:focus {
    outline: 2px solid var(--apex-primary);
    outline-offset: 1px;
}
/* CRITICAL OVERRIDE: BS4's reboot ships
       .form-check-input { position: absolute; margin-left: -1.25rem; }
   which floats the checkbox 20px to the LEFT of its flow position.
   Combined with our `.form-check { padding-left: 0 }` the checkbox
   ends up overlapping the first letter of every label. Force it back
   into the normal flow so our flex `.form-check > label` layout (input
   inline + gap + text) actually renders side-by-side. */
.form-check .form-check-input,
.form-check label .form-check-input,
.form-check label > input[type="checkbox"],
.form-check label > input[type="radio"] {
    position: static !important;
    margin-left: 0 !important;
}

/* Inline checkbox/radio (legacy BS3 still in WHMCS) */
.checkbox-inline,
.radio-inline {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    margin-right: 16px;
    margin-bottom: 8px;
    padding-left: 0;
    cursor: pointer;
    line-height: 1.4;
    font-size: 0.925rem;
}
.checkbox-inline input,
.radio-inline input { margin: 3px 0 0; flex-shrink: 0; }

.form-switch { padding-left: 44px; }
.form-switch .form-check-input {
    width: 36px;
    height: 20px;
    margin-left: -44px;
    border-radius: 99px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: left center;
    background-repeat: no-repeat;
    background-size: contain;
    transition: background-color 0.15s, background-position 0.15s;
}
.form-switch .form-check-input:checked {
    background-position: right center;
}

/* Custom file input (attachment) */
.custom-file {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: stretch;
    height: 44px;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    overflow: hidden;
    background: white;
}
.custom-file input[type="file"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.custom-file-label {
    flex: 1;
    display: flex;
    align-items: center;
    padding: 0 16px;
    color: var(--apex-text-muted);
    font-size: 0.925rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.custom-file-button {
    padding: 0 18px;
    background: var(--apex-surface-2);
    border-left: 1px solid var(--apex-border);
    color: var(--apex-text);
    font-weight: 500;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.attachment-group {
    display: flex !important;
    align-items: stretch !important;
    gap: 0;
    flex-wrap: nowrap;
}
.attachment-group .custom-file {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
}
.attachment-group .custom-file .custom-file-label {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: 0 !important;
    /* No room for the BS4 ::after Browse button — we hide it below
       and use the explicit "Add More" sibling button instead. */
    padding-right: 16px !important;
}
/* Hide the BS4 default Browse pseudo-button — Add More is the real
   action button on the right edge of attachment groups. */
.attachment-group .custom-file .custom-file-label::after {
    display: none !important;
    content: none !important;
}
/* "Add more" button: covers both our preview class and the real WHMCS
   `<div class="input-group-append"><button class="btn btn-default">…</button></div>`
   pattern that ticket / submitticket / clientareadetails render. */
.attachment-group .attachment-add,
.attachment-group .input-group-append > .btn,
.attachment-group > .input-group-append > .btn {
    height: 44px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: var(--apex-radius-lg) !important;
    border-bottom-right-radius: var(--apex-radius-lg) !important;
    border: 1px solid var(--apex-border) !important;
    border-left: 0 !important;
    flex-shrink: 0;
    white-space: nowrap;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
}
.attachment-group .input-group-append { margin-left: 0 !important; }

/* =========================================================
   CARDS
   ========================================================= */
.card {
    background: var(--apex-card);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    box-shadow: none;
    margin-bottom: 16px;
    /* `overflow: hidden` clips children to the card's rounded corners
       — without it the last row paints its bg over the rounded corner
       and we get a square edge. */
    overflow: hidden;
}
/* EXCEPT cards that host the intl-tel-input phone widget — its
   `.country-list` dropdown is absolute-positioned BELOW the input
   and would be clipped by `overflow: hidden`. Let those cards
   overflow visibly. */
.card:has(.intl-tel-input),
.card:has(.iti) {
    overflow: visible;
}
.card:last-child { margin-bottom: 0; }
/* Hard reset: kill ALL shadows on cards + their immediate children.
   Plus kill the LEFT/RIGHT borders on every row inside a card so the
   only visible vertical line is the card's own outer border. */
.card,
.card-sidebar,
.client-home-cards .card,
.client-home-cards .card .list-group-item,
.client-home-cards .card .div-service-item,
.apex-sidebar .card,
.apex-sidebar .card-sidebar {
    box-shadow: none !important;
}
.client-home-cards .card .list-group,
.client-home-cards .card .list-group-item,
.client-home-cards .card .div-service-item,
.client-home-cards .card .card-body,
.apex-sidebar .card .list-group-item,
.apex-sidebar .card .sidebar-item {
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

/* Horizontal dividers BETWEEN rows (not on the first one) — thin,
   muted, just enough to separate items visually. Higher specificity
   than the border-killing reset above so this rule wins. */
.client-home-cards .card .list-group .list-group-item + .list-group-item,
.client-home-cards .card .list-group + .list-group .list-group-item,
.client-home-cards .card .div-service-item + .div-service-item,
.client-home-cards .card .card-body > .div-service-item + .div-service-item,
.client-home-cards .card .list-group-item + .list-group-item,
.apex-sidebar .card .sidebar-item + .sidebar-item,
.apex-sidebar .card .list-group-item + .list-group-item,
.apex-sidebar .card .list-group .list-group-item + .list-group-item {
    border-top: 1px solid var(--apex-border) !important;
}

/* Card-footer separator (above buttons like "+ Новый контакт",
   "Обновить") — must be visible on EVERY card-footer regardless of
   context. The inline-style and apex-sidebar overrides earlier
   sometimes wiped this; force it. */
.card > .card-footer,
.card-sidebar > .card-footer,
.apex-sidebar .card .card-footer,
.apex-sidebar .card-sidebar .card-footer {
    border-top: 1px solid var(--apex-border) !important;
}
/* Round the inner edges of header/footer to match the card so they
   visually clip to the rounded corners even without overflow:hidden. */
.card > .card-header:first-child {
    border-top-left-radius: var(--apex-radius-lg);
    border-top-right-radius: var(--apex-radius-lg);
}
.card > .card-footer:last-child {
    border-bottom-left-radius: var(--apex-radius-lg);
    border-bottom-right-radius: var(--apex-radius-lg);
}
/* When card has no header but a body that's the first child, body
   itself needs the top corners. (Affects bg-tinted bodies — the rest
   inherit the card's own rounding fine.) */
.card > .card-body:first-child {
    border-top-left-radius: var(--apex-radius-lg);
    border-top-right-radius: var(--apex-radius-lg);
}
.card > .card-body:last-child {
    border-bottom-left-radius: var(--apex-radius-lg);
    border-bottom-right-radius: var(--apex-radius-lg);
}
.card-header {
    /* Soft gray strip — same treatment as the sidebar `Аккаунт` /
       `Контакты` headers so every card top reads consistently. */
    background: var(--apex-bg);
    border-bottom: 1px solid var(--apex-border);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-title { font-size: 1rem; font-weight: 600; color: var(--apex-text); margin: 0; display: flex; align-items: center; }

/* When a `.card-title` lives directly inside `.card-body` (NOT in a
   `.card-header`), it acts like a sub-header for a group of form
   fields — e.g. "Личные данные", "Настройки почты". Style it like
   the sidebar `.card-header`: full-bleed grey strip with separator,
   black title text, leading FA icon. */
.card-body > .card-title,
.card-body > h3.card-title,
.card-body > h4.card-title {
    /* Negative margin pulls the strip to the card-body's outer edge
       (card-body padding is 20px) so it spans the full card width. */
    margin: -20px -20px 20px;
    padding: 14px 20px;
    background: var(--apex-bg);
    border-bottom: 1px solid var(--apex-border);
    color: var(--apex-text);
    font-size: 0.95rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
    display: flex;
    align-items: center;
    gap: 10px;
}
/* When card-body uses a different padding (some templates pass `p-4`
   = 1.5rem = 24px), the negative margin needs to match. */
.card-body.p-4 > .card-title { margin: -24px -24px 24px; padding: 14px 24px; }
.card-body.p-3 > .card-title { margin: -16px -16px 16px; padding: 12px 16px; }
.card-body.p-5 > .card-title { margin: -48px -48px 32px; padding: 14px 48px; }

/* Fallback FA icon when the template didn't include one — generic
   info icon, dark like the title text. */
.card-body > .card-title:not(:has(i, .fa, .fas, .far, .fal, .fab))::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    content: "\f15c";  /* fa-file-alt */
    color: var(--apex-text);
    font-size: 1rem;
    width: 1.25em;
    text-align: center;
    flex-shrink: 0;
}
/* Sub-section titles need top spacing — but with full-bleed strip
   the row already has its own visual break, so just a small gap. */
.card-body > .card-title ~ .card-title {
    margin-top: 16px;
    border-top: 1px solid var(--apex-border);
}

/* When the section title is the FIRST element of a card with no
   header above it, give the strip rounded TOP corners so it doesn't
   square off the card's rounded top. */
.card > .card-body:first-child > .card-title:first-child {
    border-top-left-radius: var(--apex-radius-lg);
    border-top-right-radius: var(--apex-radius-lg);
}
.card-body { padding: 20px; }
.card-footer {
    background: var(--apex-bg);
    border-top: 1px solid var(--apex-border);
    padding: 14px 20px;
    color: var(--apex-text-muted);
    font-size: 0.875rem;
}

.card-text { color: var(--apex-text); margin: 0 0 16px; }
.card-text:last-child { margin-bottom: 0; }

.card-sidebar .card-header { background: var(--apex-bg); }
.card-sidebar .card-minimise { color: var(--apex-text-subtle); font-size: 0.75rem; cursor: pointer; }

/* List groups inside cards */
.list-group { display: flex; flex-direction: column; }
.list-group-flush .list-group-item {
    border-left: 0;
    border-right: 0;
    border-radius: 0;
}
.list-group-flush .list-group-item:first-child { border-top: 0; }
.list-group-flush .list-group-item:last-child { border-bottom: 0; }

.list-group-item {
    background: white;
    border: 1px solid var(--apex-border);
    padding: 14px 20px;
    color: var(--apex-text);
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: background 0.15s;
    box-shadow: none;
}
.list-group-item-action:hover {
    background: var(--apex-bg);
    text-decoration: none;
    color: var(--apex-text);
}
.list-item-main { flex: 1; min-width: 0; }
.list-item-title {
    font-weight: 500;
    color: var(--apex-text);
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.list-item-meta {
    font-size: 0.8rem;
    color: var(--apex-text-muted);
}
.list-group-item.active {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    border-color: var(--apex-border);
}
.list-group-item.active .list-item-title,
.list-group-item.active .list-item-meta { color: var(--apex-primary); }

/* Sidebar item (icon + label + optional badge) */
.sidebar-item {
    gap: 12px;
}
.sidebar-item i {
    width: 18px;
    text-align: center;
    color: var(--apex-text-muted);
    font-size: 0.95rem;
}
.sidebar-item.active i { color: var(--apex-primary); }

/* Stat tile */
.stat-tile {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--apex-card);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 18px;
    text-decoration: none;
    transition: all 0.15s;
    box-shadow: var(--apex-shadow-sm);
}
.stat-tile:hover {
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: var(--apex-shadow-md);
    border-color: var(--apex-border-strong);
}
.stat-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--apex-radius-lg);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.stat-info { line-height: 1.2; }
.stat-value { font-size: 1.625rem; font-weight: 800; color: var(--apex-text); letter-spacing: -0.02em; }
.stat-label { font-size: 0.825rem; color: var(--apex-text-muted); margin-top: 2px; font-weight: 500; }

/* Auth card */
.auth-card {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    box-shadow: var(--apex-shadow-lg);
    overflow: hidden;
    max-width: 480px;
}
.auth-card-body { padding: 36px 32px; }
.auth-card-footer {
    padding: 20px 32px;
    background: var(--apex-bg);
    border-top: 1px solid var(--apex-border);
    text-align: center;
    font-size: 0.875rem;
    color: var(--apex-text-muted);
}

/* Pricing card */
.pricing-card {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 28px;
    box-shadow: var(--apex-shadow);
    position: relative;
    transition: all 0.15s;
}
.pricing-card:hover { transform: translateY(-2px); box-shadow: var(--apex-shadow-lg); }
.pricing-card.highlighted {
    border: 2px solid var(--apex-primary);
    box-shadow: 0 0 0 4px rgba(var(--apex-primary-rgb), 0.08), var(--apex-shadow-lg);
}
.pricing-badge {
    position: absolute;
    top: -10px;
    right: 24px;
    background: var(--apex-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pricing-name { font-size: 1.25rem; font-weight: 700; margin-bottom: 4px; }
.pricing-desc { color: var(--apex-text-muted); font-size: 0.875rem; margin-bottom: 20px; }
.pricing-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--apex-border); }
.pricing-amount { font-size: 2.5rem; font-weight: 800; color: var(--apex-text); letter-spacing: -0.02em; }
.pricing-period { color: var(--apex-text-muted); font-size: 0.95rem; }
.pricing-features { list-style: none; padding: 0; margin: 0 0 24px; }
.pricing-features li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: 0.925rem;
    color: var(--apex-text);
}
.pricing-features li i { width: 16px; flex-shrink: 0; }

/* =========================================================
   ALERTS
   ========================================================= */
.alert {
    border-radius: var(--apex-radius-lg);
    border: 1px solid transparent;
    padding: 14px 18px;
    font-size: 0.925rem;
    font-weight: 500;
    margin-bottom: 14px;
    box-shadow: none;
    line-height: 1.5;
    /* default: block — keeps WHMCS plain `<div class="alert alert-info">`
       with a form / select / buttons inside laid out normally */
}
/* Switch to flex layout ONLY when our own structured alert.tpl is used
   (it includes an .alert-icon next to .alert-body). */
.alert:has(> .alert-icon) {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left !important;
}
.alert-icon { flex-shrink: 0; font-size: 1.25rem; }
.alert:has(> .alert-icon) > .alert-body { flex: 1; min-width: 0; text-align: left; }
.alert ul { margin-bottom: 0; }
/* Some legacy templates pass `textcenter=true` to alert.tpl which
   tags on `text-center`. With the icon present that produces a weird
   gap between icon and text. Force left alignment so all alerts read
   the same way: [icon] [text starting right after the icon]. */
.alert.text-center,
.alert.text-center .alert-body { text-align: left !important; }

/* Inject a FontAwesome icon via ::before for plain WHMCS alerts that
   come without one. The skip list MUST include `.w-hidden`, `.hidden`,
   `.d-none` — otherwise our high-specificity `:not()` chain would
   override BS4's display:none and surface alerts that WHMCS keeps
   hidden until validation triggers. */
.alert:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row)) {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}
.alert:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row))::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    font-size: 1.25rem;
    flex-shrink: 0;
    line-height: 1;
}
.alert.alert-info:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row))::before    { content: "\f05a"; color: #3b82f6; }
.alert.alert-success:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row))::before { content: "\f058"; color: var(--apex-success); }
.alert.alert-warning:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row))::before { content: "\f071"; color: var(--apex-warning); }
.alert.alert-danger:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row))::before,
.alert.alert-error:not(:empty):not(.w-hidden):not(.hidden):not(.d-none):not(:has(.alert-icon, .fa, .fas, .far, .fal, .fab, .fad, .fa-stack)):not(:has(form, .row))::before   { content: "\f057"; color: var(--apex-danger); }

/* Empty alerts: hide them outright. */
.alert:empty { display: none !important; }
/* `.w-hidden` is `display: none` defined elsewhere — but legacy WHMCS
   `all.min.css` and our higher-specificity rules can override it on
   alerts. Force-hide for ANY hidden modifier on .alert. */
.alert.w-hidden,
.alert.hidden,
.alert.d-none { display: none !important; }
/* Force left-aligned text on every alert — the legacy
   `#order-standard_cart .info-text-sm { text-align: center }` from
   all.min.css was overriding our themed-alert layout. */
.alert,
.alert.text-center,
.alert.info-text-sm,
.alert .alert-body,
.alert.text-center .alert-body { text-align: left !important; }

.alert-info     { background: #eff6ff; border-color: #dbeafe; color: #1e40af; }
.alert-info     .alert-icon { color: #3b82f6; }
.alert-success  { background: #ecfdf5; border-color: #d1fae5; color: #065f46; }
.alert-success  .alert-icon { color: var(--apex-success); }
.alert-warning  { background: #fffbeb; border-color: #fef3c7; color: #92400e; }
.alert-warning  .alert-icon { color: var(--apex-warning); }
.alert-danger   { background: #fef2f2; border-color: #fee2e2; color: #991b1b; }
.alert-danger   .alert-icon { color: var(--apex-danger); }

.alert-dismissible { padding-right: 50px; position: relative; }
.alert-dismissible .btn-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: transparent;
    border: 0;
    width: 22px;
    height: 22px;
    opacity: 0.5;
    cursor: pointer;
}
.alert-dismissible .btn-close:hover { opacity: 1; }

.alert:empty { display: none !important; }

/* Forms placed inside alerts (e.g. the "Select contact" picker on
   account-contacts) — vertically center the label/select/button row
   so the button doesn't stick to the top. */
.alert form .row { align-items: center; }
.alert .col-form-label { padding-top: 0; padding-bottom: 0; margin-bottom: 0; }

/* Network issue (full-width banner) */
.network-issue-alert {
    background: #fffbeb;
    color: #92400e;
    padding: 12px 24px;
    text-align: center;
    border-bottom: 1px solid #fef3c7;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: 0;
    margin: 0 0 14px;
}

/* Callouts (in-content) */
.callout {
    border-left: 4px solid;
    padding: 14px 18px;
    border-radius: var(--apex-radius);
    background: var(--apex-bg);
    margin-bottom: 14px;
    font-size: 0.925rem;
}
.callout-primary { border-left-color: var(--apex-primary); background: var(--apex-primary-light); color: #065f46; }
.callout-warning { border-left-color: var(--apex-warning); background: #fffbeb; color: #92400e; }
.callout-danger  { border-left-color: var(--apex-danger);  background: #fef2f2; color: #991b1b; }

/* =========================================================
   TABLES
   ========================================================= */
.table {
    width: 100%;
    margin: 0;
    color: var(--apex-text);
    border-collapse: collapse;
}
.data-table thead th {
    background: var(--apex-bg);
    color: var(--apex-text-muted);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--apex-border);
    border-top: 0;
    text-align: left;
    white-space: nowrap;
}
.data-table tbody td {
    padding: 16px;
    vertical-align: middle;
    border-bottom: 1px solid var(--apex-border);
    font-size: 0.925rem;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover td { background: var(--apex-bg); }
.data-table tfoot td {
    padding: 12px 16px;
    border-top: 1px solid var(--apex-border);
    font-size: 0.925rem;
}

.datatable-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 16px;
    flex-wrap: wrap;
}
.datatable-toolbar:last-child { padding: 16px 0 0; }
.datatable-info { color: var(--apex-text-muted); font-size: 0.875rem; display: flex; align-items: center; gap: 8px; }
.datatable-info .form-select-sm { width: auto; min-width: 70px; }

.datatable-search {
    position: relative;
    width: 100%;
    max-width: 280px;
}
.datatable-search i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--apex-text-subtle);
    font-size: 0.875rem;
    pointer-events: none;
}
.datatable-search input {
    width: 100%;
    height: 40px;
    padding: 0 14px 0 38px;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    background: white;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: all 0.15s;
}
.datatable-search input:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
}

/* Mobile: convert tables into cards */
@media (max-width: 767.98px) {
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr {
        background: white;
        border: 1px solid var(--apex-border);
        border-radius: var(--apex-radius-lg);
        margin-bottom: 12px;
        padding: 8px 14px;
    }
    .data-table tbody td {
        padding: 10px 0;
        border-bottom: 1px solid var(--apex-border);
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        text-align: right;
    }
    .data-table tbody td:last-child { border-bottom: 0; }
    .data-table tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 500;
        color: var(--apex-text-muted);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        text-align: left;
    }
    .data-table tbody td:empty { display: none; }
    .datatable-search { max-width: none; }
    .datatable-toolbar { flex-direction: column; align-items: stretch; }
    .pagination { justify-content: center; }
}

/* =========================================================
   BADGES & STATUS
   ========================================================= */
.badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: var(--apex-radius-sm);
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    white-space: nowrap;
}
.status-pill::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Service / domain statuses — saturated backgrounds + dark text for
   stronger visual presence against the light card surfaces. */
.status-active,
.status-paid,
.status-answered,
.status-open       { background: #86efac; color: #14532d; }
.status-pending,
.status-in-progress,
.status-customer-reply { background: #fde047; color: #713f12; }
.status-suspended,
.status-on-hold,
.status-overdue    { background: #fdba74; color: #7c2d12; }
.status-terminated,
.status-cancelled,
.status-fraud,
.status-unpaid     { background: #fca5a5; color: #7f1d1d; }
.status-refunded   { background: #c4b5fd; color: #4c1d95; }
.status-closed     { background: #cbd5e1; color: #334155; }

/* Avatars */
.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--apex-surface-2);
    color: var(--apex-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
    overflow: hidden;
    user-select: none;
}
.avatar-sm { width: 28px; height: 28px; font-size: 0.75rem; }
.avatar-lg { width: 48px; height: 48px; font-size: 1rem; }
.avatar-xl { width: 64px; height: 64px; font-size: 1.25rem; }

/* =========================================================
   NAV — tabs, pills, pagination
   ========================================================= */
.nav-tabs {
    border-bottom: 1px solid var(--apex-border);
    gap: 0;
    margin-bottom: 0;
}
.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--apex-text-muted);
    font-weight: 500;
    padding: 12px 18px;
    border-radius: 0;
    background: transparent;
    transition: all 0.15s;
}
.nav-tabs .nav-link:hover { color: var(--apex-text); border-color: transparent; }
.nav-tabs .nav-link.active {
    color: var(--apex-primary);
    border-bottom-color: var(--apex-primary);
    background: transparent;
}
.nav-tabs .nav-link.disabled { color: var(--apex-text-subtle); cursor: not-allowed; opacity: 0.6; }

.nav-pills { gap: 6px; }
.nav-pills .nav-link {
    color: var(--apex-text-muted);
    border-radius: var(--apex-radius);
    padding: 8px 16px;
    font-weight: 500;
    background: transparent;
    border: 1px solid transparent;
}
.nav-pills .nav-link:hover { background: var(--apex-surface-2); color: var(--apex-text); }
.nav-pills .nav-link.active {
    background: var(--apex-primary);
    color: white;
}
.nav-pills .nav-link.active .badge { background: rgba(255,255,255,0.25) !important; color: white; }

.pagination { gap: 4px; }
.page-item .page-link {
    border: 1px solid var(--apex-border);
    color: var(--apex-text);
    border-radius: var(--apex-radius) !important;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    background: white;
    min-width: 36px;
    text-align: center;
    transition: all 0.15s;
}
.page-item .page-link:hover { background: var(--apex-surface-2); color: var(--apex-text); }
.page-item.active .page-link {
    background: var(--apex-primary);
    border-color: var(--apex-primary);
    color: white;
}
.page-item.disabled .page-link { color: var(--apex-text-subtle); background: white; cursor: not-allowed; }

/* Progress */
.progress {
    height: 6px;
    background: var(--apex-surface-2);
    border-radius: 99px;
    overflow: hidden;
}
.progress-bar {
    background: var(--apex-primary);
    border-radius: 99px;
    transition: width 0.3s;
}

/* =========================================================
   MODALS (preview boxes for design system)
   ========================================================= */
.modal-preview-wrap {
    background: rgba(17, 24, 39, 0.04);
    padding: 32px;
    border-radius: var(--apex-radius-lg);
    margin-bottom: 24px;
}
.modal-preview {
    background: white;
    border-radius: var(--apex-radius-lg);
    box-shadow: var(--apex-shadow-lg);
    max-width: 480px;
    margin: 0 auto;
    overflow: hidden;
}
.modal-preview-header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--apex-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-preview-header .btn-close {
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--apex-radius);
    color: var(--apex-text-muted);
    font-size: 1.25rem;
    cursor: pointer;
}
.modal-preview-header .btn-close:hover { background: var(--apex-surface-2); }
.modal-preview-body { padding: 24px; }
.modal-preview-footer {
    padding: 16px 24px;
    border-top: 1px solid var(--apex-border);
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background: var(--apex-bg);
}

/* =========================================================
   WHMCS-SPECIFIC
   ========================================================= */
/* Domain search */
.domain-search {
    background: linear-gradient(135deg, var(--apex-primary-light) 0%, white 100%);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-xl);
    padding: 40px 32px;
    text-align: center;
}
.domain-search h3 { margin: 0 0 6px; font-size: 1.5rem; font-weight: 800; }
.domain-search p { margin-bottom: 24px; }
.domain-search-form { max-width: 720px; margin: 0 auto; }
.domain-tlds {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 24px;
}
.domain-tld {
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    padding: 10px 18px;
    border-radius: 99px;
    border: 1px solid var(--apex-border);
    font-size: 0.875rem;
}
.domain-tld strong { color: var(--apex-primary); }
.domain-tld span { color: var(--apex-text-muted); }

/* Cart summary */
.cart-summary {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 24px;
    box-shadow: var(--apex-shadow);
    position: sticky;
    top: calc(var(--apex-header-h) + 24px);
}
.cart-summary-head { padding-bottom: 16px; border-bottom: 1px solid var(--apex-border); margin-bottom: 16px; }
.cart-summary-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 12px 0;
    border-bottom: 1px dashed var(--apex-border);
}
.cart-summary-line:last-of-type { border-bottom: 0; }
.cart-summary-price { font-weight: 600; color: var(--apex-text); white-space: nowrap; }
.cart-summary-promo { padding: 16px 0; border-top: 1px solid var(--apex-border); border-bottom: 1px solid var(--apex-border); margin: 4px 0 16px; }
.cart-summary-totals { padding-bottom: 16px; }
.cart-summary-totals > div { padding: 4px 0; }

/* Tickets */
.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--apex-border);
    flex-wrap: wrap;
}
.ticket-header h3 { font-weight: 700; }

.ticket-reply {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    margin-bottom: 16px;
    overflow: hidden;
}
.ticket-reply-staff { background: var(--apex-primary-light); border-color: #d1fae5; }
.ticket-reply-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--apex-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: rgba(255,255,255,0.6);
}
.ticket-reply-staff .ticket-reply-head { background: rgba(255,255,255,0.7); border-bottom-color: #d1fae5; }
.ticket-reply-body { padding: 18px; line-height: 1.6; }
.ticket-reply-body p:last-child { margin-bottom: 0; }
.ticket-reply-attachments {
    padding: 14px 18px;
    border-top: 1px solid var(--apex-border);
    background: var(--apex-bg);
}
.ticket-reply-staff .ticket-reply-attachments { border-top-color: #d1fae5; background: rgba(236, 253, 245, 0.5); }
.ticket-reply-attachments ul {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.ticket-reply-attachments li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius);
    font-size: 0.875rem;
}
.ticket-reply-attachments li small { color: var(--apex-text-muted); }
.staff-badge {
    background: var(--apex-primary);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 99px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ticket-reply-form {
    padding: 24px;
    background: var(--apex-bg);
    border-radius: var(--apex-radius-lg);
    margin-top: 20px;
    border: 1px solid var(--apex-border);
}
.ticket-reply-form h5 { margin-bottom: 12px; }

.ticket-rating { display: flex; gap: 4px; }
.ticket-rating i {
    font-size: 1.5rem;
    color: var(--apex-border-strong);
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
}
.ticket-rating i:hover { transform: scale(1.1); }
.ticket-rating i.active { color: var(--apex-warning); }

/* Empty / loading */
.empty-state, .loading-state {
    text-align: center;
    padding: 48px 24px;
}
.empty-icon, .loading-icon {
    font-size: 3rem;
    color: var(--apex-text-subtle);
    margin-bottom: 16px;
    display: block;
}
.empty-state h4 { margin-bottom: 8px; }
.empty-state p { color: var(--apex-text-muted); margin-bottom: 20px; }

/* Captcha */
.captcha-placeholder {
    background: var(--apex-bg);
    border: 1px dashed var(--apex-border-strong);
    border-radius: var(--apex-radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--apex-text-muted);
    font-size: 0.875rem;
    min-height: 80px;
}
.captcha-placeholder i { font-size: 1.5rem; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991.98px) {
    .preview-sidebar {
        position: absolute;
        left: -100%;
        height: 100%;
        z-index: 100;
        transition: left 0.3s;
    }
    .preview-sidebar.show { left: 0; }
    .preview-main { margin-left: 0 !important; }
    .mobile-toggle { display: inline-flex; }
    .search-box { display: none; }
    .user-info { display: none; }
}

@media (max-width: 575.98px) {
    .kit-main { padding: 16px; }
    .kit-section { padding: 32px 0; }
    .kit-section-head h2 { font-size: 1.5rem; }
    .preview-content { padding: 16px; }
    .auth-card-body, .auth-card-footer { padding-left: 24px; padding-right: 24px; }
    .layout-preview { min-height: 400px; }
}

/* =========================================================
   PRODUCT DETAILS PAGE — overview hero + stats grid + tabs.
   Replaces the legacy two-column "giant centred icon | stack
   of <h4>+value" layout with a modern card layout.
   ========================================================= */
.product-overview {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    box-shadow: var(--apex-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}

/* Hero strip — icon | name + group + status pill | actions */
.product-overview-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    background: var(--apex-bg);
    border-bottom: 1px solid var(--apex-border);
    flex-wrap: wrap;
}
.product-overview-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--apex-radius-lg);
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex-shrink: 0;
}
.product-overview-icon-suspended,
.product-overview-icon-on-hold,
.product-overview-icon-overdue { background: #fed7aa; color: #9a3412; }
.product-overview-icon-terminated,
.product-overview-icon-cancelled,
.product-overview-icon-fraud    { background: #fee2e2; color: #991b1b; }
.product-overview-icon-pending  { background: #fef9c3; color: #854d0e; }

.product-overview-info {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Bigger, more confident product name — primary line in the hero. */
.product-overview-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--apex-text);
    margin: 0;
    line-height: 1.15;
    word-break: break-word;
    order: 1;
}
.product-overview-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    order: 2;
}
.product-overview-group {
    color: var(--apex-text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}
/* Status pill in the hero — solid coloured background with white
   text (matches the table-cell badge treatment), bigger font so it
   reads as a header element. */
.product-overview-meta .status-pill {
    font-size: 0.78rem;
    padding: 5px 14px;
    letter-spacing: 0.06em;
    color: #fff !important;
}
.product-overview-meta .status-pill::before { background: rgba(255,255,255,0.85); }
.product-overview-meta .status-pill.status-active,
.product-overview-meta .status-pill.status-paid,
.product-overview-meta .status-pill.status-answered,
.product-overview-meta .status-pill.status-open       { background: var(--apex-primary); }
.product-overview-meta .status-pill.status-pending,
.product-overview-meta .status-pill.status-in-progress,
.product-overview-meta .status-pill.status-customer-reply { background: var(--apex-warning); }
.product-overview-meta .status-pill.status-suspended,
.product-overview-meta .status-pill.status-on-hold,
.product-overview-meta .status-pill.status-overdue    { background: #f97316; }
.product-overview-meta .status-pill.status-terminated,
.product-overview-meta .status-pill.status-cancelled,
.product-overview-meta .status-pill.status-fraud,
.product-overview-meta .status-pill.status-unpaid     { background: var(--apex-danger); }
.product-overview-meta .status-pill.status-refunded   { background: #8b5cf6; }
.product-overview-meta .status-pill.status-closed     { background: #6b7280; }
.product-overview-domain {
    color: var(--apex-text-muted);
    font-size: 0.875rem;
    order: 3;
    display: flex;
    align-items: center;
    gap: 6px;
}
.product-overview-domain .mr-2 { margin: 0 !important; }
.product-overview-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-left: auto;
}
.product-overview-actions .btn {
    font-size: 0.875rem;
    padding: 9px 18px;
}
/* SOLID red Cancel button — was outlined-on-white before. */
.product-overview-cancel {
    background: var(--apex-danger) !important;
    border-color: var(--apex-danger) !important;
    color: #fff !important;
    font-weight: 600 !important;
}
.product-overview-cancel:hover,
.product-overview-cancel:focus {
    background: #dc2626 !important;
    border-color: #dc2626 !important;
    color: #fff !important;
    box-shadow: none !important;
}
.product-overview-cancel.disabled,
.product-overview-cancel:disabled {
    background: #fca5a5 !important;
    border-color: #fca5a5 !important;
    cursor: not-allowed;
    box-shadow: none !important;
}

/* Stats grid — auto-fit responsive tiles. Each tile sits as its own
   row/column with a 1px divider grid effect (gap + bg trick). */
.product-overview-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--apex-border);
}
.product-overview-stats .stat-tile {
    background: white;
    padding: 18px 24px;
    border: 0;
    border-radius: 0;
    cursor: default;
    transform: none !important;
    transition: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 78px;
    justify-content: center;
}
.product-overview-stats .stat-tile:hover {
    background: white;
    transform: none;
    box-shadow: none;
}
.product-overview-stats .stat-tile-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--apex-text-muted);
    font-weight: 600;
    margin: 0;
    line-height: 1;
}
.product-overview-stats .stat-tile-value {
    font-size: 0.95rem;
    color: var(--apex-text);
    font-weight: 500;
    line-height: 1.35;
    word-break: break-word;
    margin: 0;
}
.product-overview-stats .stat-tile-wide { grid-column: 1 / -1; }
.product-overview-stats .stat-tile-warning {
    background: #fffbeb;
    border-left: 3px solid var(--apex-warning);
}
.product-overview-stats .stat-tile-warning:hover { background: #fffbeb; }

@media (max-width: 575.98px) {
    .product-overview-hero { padding: 18px; gap: 14px; }
    .product-overview-icon { width: 48px; height: 48px; font-size: 1.25rem; }
    .product-overview-name { font-size: 1.25rem; }
    .product-overview-actions { flex: 1 1 100%; }
    .product-overview-actions .btn { flex: 1; }
}

/* Tabs underneath the overview (Manage / Configurable Options /
   Metrics / etc.) — themed nav-tabs + container */
.product-details-tab-container {
    background: white !important;
    border: 1px solid var(--apex-border);
    border-top: 0;
    border-radius: 0 0 var(--apex-radius-lg) var(--apex-radius-lg);
    padding: 24px;
}
.product-details-tab-container .row {
    margin-bottom: 12px;
    align-items: center;
}
.product-details-tab-container .row:last-child { margin-bottom: 0; }
.product-details-tab-container .row > [class*="col-"] {
    color: var(--apex-text);
    font-size: 0.92rem;
}
.product-details-tab-container strong { color: var(--apex-text); font-weight: 600; }
.product-details-tab-container .module-client-area .btn {
    min-width: 200px;
}

/* Make the responsive nav-tabs sit visually attached to the tab pane */
.responsive-tabs-sm + .responsive-tabs-sm-connector + .product-details-tab-container,
.tab-content.bg-white.product-details-tab-container {
    margin-top: 0;
}
.responsive-tabs-sm-connector { display: none; }

/* =========================================================
   ============ APEX THEME LAYOUT (production) =============
   Real classes used by header.tpl / footer.tpl. Mirrors the
   .preview-* layout from the kit but with FIXED sidebar and
   real responsive drawer.
   ========================================================= */

.apex-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--apex-bg);
    color: var(--apex-text);
    margin: 0;
    line-height: 1.6;
}

.apex-shell { min-height: 100vh; }

/* ----- Fixed sidebar (logged in) ----- */
.apex-logged-in .main-sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: var(--apex-sidebar-w) !important;
    height: 100vh !important;
    background: white !important;
    border-right: 1px solid var(--apex-border) !important;
    display: flex !important;
    flex-direction: column !important;
    z-index: 1030 !important;
    transition: transform 0.3s ease;
}
.apex-logged-in .main-sidebar .sidebar-logo {
    padding: 20px 24px;
    height: var(--apex-header-h);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    border-bottom: 1px solid var(--apex-border);
    flex-shrink: 0;
}
.apex-logged-in .main-sidebar .sidebar-logo-img { max-height: 32px; }
.apex-logged-in .main-sidebar .sidebar-nav {
    flex: 1;
    padding: 12px;
    overflow-y: auto;
}
.apex-logged-in .main-sidebar .nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 16px;
    color: var(--apex-text-muted);
    text-decoration: none;
    border-radius: var(--apex-radius);
    font-weight: 500;
    font-size: 0.94rem;
    line-height: 1.4;
    transition: all 0.15s ease;
    margin-bottom: 4px;
}
.apex-logged-in .main-sidebar .nav-item > i {
    width: 18px;
    text-align: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.apex-logged-in .main-sidebar .nav-item > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apex-logged-in .main-sidebar .nav-item:hover {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
}
.apex-logged-in .main-sidebar .nav-item.active {
    background: var(--apex-primary);
    color: white;
    box-shadow: none;
}
.apex-logged-in .main-sidebar .nav-item.active > i { color: white; }
.apex-logged-in .main-sidebar .menu-caret {
    margin-left: auto;
    font-size: 0.7rem !important;
    opacity: 0.5;
    transition: transform 0.2s;
    width: auto !important;
}
.apex-logged-in .main-sidebar .nav-item[aria-expanded="true"] .menu-caret {
    transform: rotate(-180deg);
}
.apex-logged-in .main-sidebar .nav-submenu {
    margin: 4px 0 8px 14px;
    padding-left: 14px;
    border-left: 2px solid var(--apex-border);
}
.apex-logged-in .main-sidebar .nav-subitem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    color: var(--apex-text-muted);
    text-decoration: none;
    border-radius: var(--apex-radius);
    font-size: 0.88rem;
    line-height: 1.4;
    margin-bottom: 2px;
    transition: all 0.15s;
}
.apex-logged-in .main-sidebar .nav-subitem > i {
    width: 14px;
    text-align: center;
    font-size: 0.8rem;
    flex-shrink: 0;
}
.apex-logged-in .main-sidebar .nav-subitem > span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apex-logged-in .main-sidebar .nav-subitem:hover {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
}
.apex-logged-in .main-sidebar .nav-subitem.active {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    font-weight: 600;
}
.apex-logged-in .main-sidebar .nav-section-label {
    padding: 16px 14px 6px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--apex-text-subtle);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.apex-logged-in .main-sidebar .nav-badge {
    margin-left: auto;
    background: var(--apex-surface-2);
    color: var(--apex-text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    min-width: 18px;
    text-align: center;
}
.apex-logged-in .main-sidebar .nav-item.active .nav-badge {
    background: rgba(255,255,255,0.25);
    color: white;
}
.apex-logged-in .main-sidebar .sidebar-footer {
    padding: 12px;
    border-top: 1px solid var(--apex-border);
    flex-shrink: 0;
}
.apex-logged-in .main-sidebar .nav-item-danger {
    color: var(--apex-danger) !important;
}
.apex-logged-in .main-sidebar .nav-item-danger:hover {
    background: #fef2f2 !important;
    color: var(--apex-danger) !important;
}
.apex-logged-in .main-sidebar .nav-item-danger > i { color: var(--apex-danger) !important; }

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 24, 39, 0.5);
    backdrop-filter: blur(2px);
    z-index: 1029;
    opacity: 0;
    transition: opacity 0.3s;
}
.sidebar-backdrop.show { display: block; opacity: 1; }

/* ----- Main column ----- */
.apex-logged-in .apex-main { margin-left: var(--apex-sidebar-w); min-height: 100vh; display: flex; flex-direction: column; }
.apex-main-guest { display: flex; flex-direction: column; min-height: 100vh; }

/* ----- Top header (logged in) ----- */
.top-header {
    height: var(--apex-header-h);
    background: white;
    border-bottom: 1px solid var(--apex-border);
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    position: sticky;
    top: 0;
    z-index: 1020;
}
.top-header-left { display: flex; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.top-header-right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.mobile-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius);
    width: 40px;
    height: 40px;
    color: var(--apex-text-muted);
    cursor: pointer;
    align-items: center;
    justify-content: center;
}
.mobile-toggle:hover { background: var(--apex-surface-2); }

/* Re-define search box for the production header (more specific selector wins) */
.top-header .search-box {
    position: relative;
    width: 100%;
    max-width: 360px;
    margin: 0;
}
.top-header .search-box i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--apex-text-subtle);
    font-size: 0.875rem;
    pointer-events: none;
}
.top-header .search-box input {
    width: 100%;
    height: 42px;
    padding: 0 16px 0 42px;
    border: 1px solid var(--apex-border);
    border-radius: 99px;
    background: var(--apex-bg);
    font-family: inherit;
    font-size: 0.925rem;
    outline: none;
    transition: all 0.15s;
}
.top-header .search-box input:focus {
    border-color: var(--apex-primary);
    background: white;
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
}

/* Guest header */
.guest-header {
    background: white;
    border-bottom: 1px solid var(--apex-border);
}
.guest-header-inner {
    height: var(--apex-header-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.guest-brand {
    text-decoration: none;
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}
.guest-brand-img { max-height: 32px; }
.guest-nav { display: flex; gap: 28px; }
.guest-nav a {
    color: var(--apex-text);
    font-weight: 500;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.15s;
}
.guest-nav a:hover { color: var(--apex-primary); }
.guest-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

/* Main content area */
.apex-content {
    flex: 1;
    padding: 32px 40px;
    width: 100%;
    margin: 0;
}
/* Logged-in: occupy the full apex-main width minus sidebar (no
   container constraint). For guest pages the .container class on
   apex-content does its job — DON'T override max-width here. */
.apex-logged-in .apex-content {
    max-width: none;
}
.apex-content-guest {
    padding: 40px 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
    /* Match the BS4 .container responsive max-widths (same as the
       guest header above) so body content lines up with the nav. */
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 540px;
}
@media (min-width: 768px)  { .apex-content-guest { max-width: 720px; } }
@media (min-width: 992px)  { .apex-content-guest { max-width: 960px; } }
@media (min-width: 1200px) { .apex-content-guest { max-width: 1140px; } }
.apex-grid > .row { margin-left: -8px; margin-right: -8px; align-items: flex-start; }
.apex-grid > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; }

.page-header { margin-bottom: 16px; }
.page-header h1 {
    font-size: 1.875rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    /* Long titles (e.g. announcement titles) are truncated to one line
       with ellipsis instead of dominating the entire viewport. The full
       title is still visible inside the article body below. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-header .page-subtitle, .page-header p {
    color: var(--apex-text-muted);
    margin: 0;
    font-size: 1rem;
}

/* Footer */
.apex-footer {
    padding: 24px 0;
    border-top: 1px solid var(--apex-border);
    background: white;
    margin-top: auto;
}
.apex-footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    padding: 0 32px;
    max-width: 1280px;
    margin: 0 auto;
    color: var(--apex-text-muted);
    font-size: 0.875rem;
}
.apex-logged-in .apex-footer-inner { padding: 0 32px; }
.apex-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.apex-footer-links a { color: var(--apex-text-muted); }
.apex-footer-links a:hover { color: var(--apex-primary); }

/* Loading overlay */
.apex-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.apex-overlay-inner {
    background: white;
    border-radius: var(--apex-radius-lg);
    padding: 32px 40px;
    box-shadow: var(--apex-shadow-lg);
    text-align: center;
}
.apex-overlay-inner i { font-size: 2rem; color: var(--apex-primary); display: block; margin-bottom: 12px; }
.apex-overlay-inner .msg { color: var(--apex-text-muted); }

/* Return-to-admin floating button */
.apex-return-to-admin {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1100;
    background: var(--apex-text);
    color: white;
    padding: 10px 18px;
    border-radius: 99px;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    box-shadow: var(--apex-shadow-lg);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.apex-return-to-admin:hover {
    background: var(--apex-primary);
    color: white;
    text-decoration: none;
}

/* ===== User profile in header (avatar + name + balance) =====
   NOTE: structure is <div.user-profile> wrapping THREE separate <a>:
   .avatar, .user-name, .user-balance.  No nested anchors. ===== */
.top-header .user-profile {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 4px 8px !important;
    border-radius: var(--apex-radius) !important;
    flex-shrink: 0 !important;
    max-width: 280px;
    min-width: 0;
}
.top-header .user-profile .avatar {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 50% !important;
    background: linear-gradient(135deg, var(--apex-primary) 0%, #047857 100%) !important;
    color: white !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    flex-shrink: 0 !important;
    text-decoration: none !important;
    text-transform: uppercase;
    line-height: 1;
    transition: transform 0.15s, box-shadow 0.15s;
}
.top-header .user-profile .avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.18);
    text-decoration: none !important;
}
.top-header .user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    gap: 1px;
}
.top-header .user-name {
    display: block;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--apex-text) !important;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    text-decoration: none !important;
}
.top-header .user-name:hover { color: var(--apex-primary) !important; text-decoration: none !important; }
.top-header .user-balance {
    display: block;
    font-size: 0.75rem;
    line-height: 1.2;
    color: var(--apex-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.top-header .user-balance:hover { color: var(--apex-primary-hover) !important; text-decoration: underline !important; }

/* ===== Sidebar cards inside content (right secondary sidebar) ===== */
.apex-sidebar .card-sidebar {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    box-shadow: none;
    margin-bottom: 16px !important;
    overflow: hidden;
}
.apex-sidebar .card-sidebar .card-header {
    background: var(--apex-bg);
    padding: 14px 18px;
    border-bottom: 1px solid var(--apex-border);
}
.apex-sidebar .card-sidebar .card-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0;
    color: var(--apex-text);
    /* Was `display: flex` here — that, together with `min-width: 0` from
       the generic .card-header rule, let single words like "Ярлыки"
       break mid-character ("Ярлык" + "ы") because the flex item could
       shrink below its natural width and BS4's inherited
       `word-wrap: break-word` then split the word. Block layout +
       explicit no-break wins. */
    display: block;
    overflow-wrap: normal;
    word-break: normal;
    word-wrap: normal;
}

/* Fallback icon — same trick as the auto-alert-icon: when a sidebar
   card header has no <i> child, render a generic folder glyph via
   ::before so every card visually starts with an icon. WHMCS's icon
   font-family is "Font Awesome 5 Pro". */
.apex-sidebar .card-sidebar .card-title:not(:has(i, .fa, .fas, .far, .fal, .fab, .fad))::before,
.card-header > .card-title:not(:has(i, .fa, .fas, .far, .fal, .fab, .fad)):not(:empty)::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    content: "\f07b";  /* fa-folder */
    color: var(--apex-text);
    margin-right: 8px;
    font-size: 1rem;
}

/* Fallback marker for sidebar list items without a real icon — only
   on CLICKABLE rows (anchors). Informational rows like "Контакты не
   найдены" are <div>s with no href, they shouldn't get a marker.
   The pseudo-element occupies the SAME horizontal slot as a real
   `.sidebar-item-icon` (1em wide) so spacing between dot and label
   matches spacing between real icon and label. */
.apex-sidebar a.sidebar-item:not(:has(i, .fa, .fas, .far, .fal, .fab, .fad))::before {
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free", "Font Awesome 6 Pro", "Font Awesome 6 Free", "FontAwesome";
    font-weight: 900;
    content: "\f111";  /* fa-circle */
    color: var(--apex-text-subtle);
    font-size: 0.45rem;
    /* Match a regular icon's footprint: same width, centred glyph. */
    width: 1em;
    min-width: 1em;
    height: 1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
/* Active row → recolour the fallback dot to match the active text.
   NOTE: deliberately NOT recolouring on :hover — the dot stays grey
   until the row is actually selected, otherwise it falsely signals
   the tab is active when the cursor just passes over. */
.apex-sidebar a.sidebar-item.active:not(:has(i, .fa, .fas, .far, .fal, .fab, .fad))::before {
    color: var(--apex-primary);
}
/* Same coverage for real icons when their parent row is active —
   they should turn green like the label. */
.apex-sidebar a.sidebar-item.active .sidebar-item-icon,
.apex-sidebar a.sidebar-item.active > i,
.apex-sidebar a.sidebar-item.active > .fa,
.apex-sidebar a.sidebar-item.active > .fas,
.apex-sidebar a.sidebar-item.active > .far,
.apex-sidebar a.sidebar-item.active > .fal,
.apex-sidebar a.sidebar-item.active > .fab {
    color: var(--apex-primary);
}
.apex-sidebar .sidebar-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    color: var(--apex-text);
    text-decoration: none;
    border: 0;
    border-bottom: 1px solid var(--apex-border);
    font-size: 0.9rem;
    transition: background 0.15s;
}
.apex-sidebar .sidebar-item:last-child { border-bottom: 0; }
.apex-sidebar .sidebar-item-icon {
    width: 16px;
    text-align: center;
    color: var(--apex-text-muted);
    font-size: 0.875rem;
    flex-shrink: 0;
}
.apex-sidebar .sidebar-item-label {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.apex-sidebar .sidebar-item:hover {
    background: var(--apex-bg);
    color: var(--apex-text);
    text-decoration: none;
}
.apex-sidebar .sidebar-item.active {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    font-weight: 600;
}
.apex-sidebar .sidebar-item.active .sidebar-item-icon { color: var(--apex-primary); }
.apex-sidebar .badge {
    margin-left: auto;
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 99px;
}
/* Active sidebar row already has a green-tinted background — flip the
   badge to a solid green for the contrast bump. */
.apex-sidebar .sidebar-item.active .badge,
.apex-sidebar .list-group-item.active .badge {
    background: var(--apex-primary);
    color: #fff;
}
/* Badge that shows a zero count — keep it muted so it doesn't fight
   for attention with the populated filters. */
.apex-sidebar .badge:empty,
.apex-sidebar .list-group-item:not(.active) .badge:where([data-count="0"]) {
    background: var(--apex-surface-2);
    color: var(--apex-text-muted);
}

/* =========================================================
   BS4 COMPATIBILITY SHIM
   Makes WHMCS .tpl shipped with BS4 classes look right.
   ========================================================= */

/* BS4 input-group-prepend / append (BS5 doesn't need them, but
   WHMCS .tpl uses them everywhere) */
.input-group-prepend, .input-group-append { display: flex; align-items: stretch; }
.input-group-prepend > .input-group-text,
.input-group-append > .input-group-text,
.input-group-prepend > .btn,
.input-group-append > .btn {
    border-radius: 0;
    height: 44px;
}
.input-group > .input-group-prepend > :first-child,
.input-group > :first-child {
    border-top-left-radius: var(--apex-radius-lg);
    border-bottom-left-radius: var(--apex-radius-lg);
}
.input-group > .input-group-append > :last-child,
.input-group > :last-child {
    border-top-right-radius: var(--apex-radius-lg);
    border-bottom-right-radius: var(--apex-radius-lg);
}
.input-group-prepend { margin-right: -1px; }
.input-group-append { margin-left: -1px; }

/* BS4 custom-file (file inputs) */
.custom-file {
    position: relative;
    display: inline-flex;
    width: 100%;
    height: 44px;
    margin: 0;
}
.custom-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: 2;
    cursor: pointer;
    margin: 0;
    width: 100%;
    height: 100%;
}
.custom-file-label {
    position: absolute;
    inset: 0;
    height: 44px;
    padding: 10px 100px 10px 16px;
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    color: var(--apex-text-muted);
    font-size: 0.925rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin: 0;
    z-index: 1;
    display: flex;
    align-items: center;
}
.custom-file-label::after {
    content: 'Browse';
    position: absolute;
    /* Extend 1px past the parent's content area on top/right/bottom
       so the Browse button visually meets (and covers) the parent's
       border edges. Without this, ::after sits INSIDE the border and
       leaves a 1px gap at the bottom (and top/right) of the input. */
    top: -1px;
    right: -1px;
    bottom: -1px;
    padding: 0 18px;
    background: var(--apex-surface-2);
    border-left: 1px solid var(--apex-border);
    border-top-right-radius: var(--apex-radius-lg);
    border-bottom-right-radius: var(--apex-radius-lg);
    color: var(--apex-text);
    font-weight: 500;
    display: flex;
    align-items: center;
    pointer-events: none;
}

/* BS4 custom-select / custom-control / custom-switch */
.custom-select {
    height: 44px;
    padding: 10px 40px 10px 14px;
    border-radius: var(--apex-radius-lg);
    border: 1px solid var(--apex-border);
    background: white 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='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e") right 14px center / 16px no-repeat;
    appearance: none;
    font-size: 0.925rem;
    color: var(--apex-text);
}
.custom-select:focus {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
    outline: none;
}

.custom-control {
    padding-left: 28px;
    min-height: 22px;
    position: relative;
    display: inline-block;
    margin-bottom: 0;
}
.custom-control-input {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    width: 18px;
    height: 18px;
    opacity: 0;
    margin: 0 !important;
}
.custom-control-label {
    cursor: pointer;
    font-size: 0.925rem;
    display: inline-block;
    margin-bottom: 0;
    padding-left: 0;
    line-height: 1.5;
    vertical-align: middle;
    /* Defensive: ensure label isn't styled by stray .form-check label
       rules that would force flex layout and pull it under the box. */
    position: static;
}
.custom-control-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background: white;
    border: 1.5px solid var(--apex-border-strong);
    border-radius: 4px;
    transition: all 0.15s;
}
.custom-control-label::after {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 12px;
}
.custom-radio .custom-control-label::before { border-radius: 50%; }
.custom-control-input:checked ~ .custom-control-label::before {
    background: var(--apex-primary);
    border-color: var(--apex-primary);
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3e%3cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z'/%3e%3c/svg%3e");
}
.custom-radio .custom-control-input:checked ~ .custom-control-label::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-switch { padding-left: 44px; }
.custom-switch .custom-control-label::before {
    width: 36px;
    height: 20px;
    border-radius: 99px;
    top: 1px;
}
.custom-switch .custom-control-label::after {
    width: 16px;
    height: 16px;
    background: white;
    border-radius: 50%;
    left: 2px;
    top: 3px;
    transition: transform 0.15s;
}
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    transform: translateX(16px);
    background-image: none;
    background-color: white;
}

/* BS4 close button → BS5 .btn-close style */
button.close, .modal-header .close {
    background: transparent;
    border: 0;
    width: 28px;
    height: 28px;
    border-radius: var(--apex-radius);
    color: var(--apex-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    transition: background 0.15s;
}
button.close:hover, .modal-header .close:hover { background: var(--apex-surface-2); color: var(--apex-text); opacity: 1; }

/* Modal */
.modal-content {
    border: 0;
    border-radius: var(--apex-radius-lg);
    box-shadow: var(--apex-shadow-lg);
}
.modal-header {
    border-bottom: 1px solid var(--apex-border);
    padding: 18px 24px;
}
.modal-title { font-weight: 700; font-size: 1.1rem; }
.modal-body { padding: 24px; }
.modal-footer {
    background: var(--apex-bg);
    border-top: 1px solid var(--apex-border);
    padding: 16px 24px;
    gap: 8px;
}

/* Localisation modal items */
.locale-item {
    display: block;
    text-align: center;
    padding: 12px 16px;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius);
    background: white;
    color: var(--apex-text);
    text-decoration: none;
    font-size: 0.925rem;
    font-weight: 500;
    transition: all 0.15s;
}
.locale-item:hover {
    border-color: var(--apex-primary);
    color: var(--apex-primary);
    text-decoration: none;
    background: var(--apex-primary-light);
}
.locale-item.active {
    background: var(--apex-primary);
    border-color: var(--apex-primary);
    color: white;
}

.apex-section-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--apex-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
}

/* ===== DataTables — used by clientareaproducts / domains / invoices /
   tickets / kb / etc. WHMCS includes/tablelist.tpl uses the custom dom:
       '<"listtable"fit>pl'
   So markup is roughly:
       .dataTables_wrapper
         .listtable
           .dataTables_filter   (search)
           .dataTables_info     (Showing X to Y)
           table.dataTable
         .dataTables_paginate
         .dataTables_length

   We lay it out with CSS grid so info+filter sit on one row above the
   table, length+pagination on one row below. ===== */

.dataTables_wrapper {
    position: relative;
    display: grid;
    grid-template-areas:
        "list   list"
        "length pagination";
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    row-gap: 16px;
    align-items: center;
    /* Contain wide tables horizontally so the page itself doesn't scroll. */
    max-width: 100%;
    min-width: 0;
}
.dataTables_wrapper > .listtable { grid-area: list; }
.dataTables_wrapper > .dataTables_length { grid-area: length; align-self: center; }
.dataTables_wrapper > .dataTables_paginate { grid-area: pagination; align-self: center; justify-self: end; }

.listtable {
    display: grid;
    grid-template-areas:
        "info filter"
        "table table";
    grid-template-columns: 1fr auto;
    column-gap: 16px;
    row-gap: 16px;
    align-items: center;
}
.listtable > .dataTables_filter { grid-area: filter; justify-self: end; }
.listtable > .dataTables_info   { grid-area: info; }
.listtable > table.dataTable    { grid-area: table; margin: 0 !important; }

/* Horizontal scroll for wide tables. The earlier attempt put
   `display: block` on the <table> with `display: table` on thead/tbody
   — that broke shared column widths between header and rows because
   each section became its own independent table-block.
   Correct approach: scroll on the grid item that wraps the table.
   The <table> stays a real <table> so thead/tbody share column widths. */
.listtable {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.listtable > table.dataTable {
    /* Force the table to its natural content width — the wrapper
       handles the horizontal scroll. */
    min-width: 100%;
    width: auto !important;
}

.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate {
    color: var(--apex-text-muted);
    font-size: 0.875rem;
    padding: 0 !important;
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .dataTables_wrapper {
        grid-template-areas:
            "list"
            "pagination"
            "length";
        grid-template-columns: 1fr;
    }
    .dataTables_wrapper > .dataTables_paginate { justify-self: center; }
    .dataTables_wrapper > .dataTables_length   { justify-self: center; }
    .listtable {
        grid-template-areas:
            "filter"
            "info"
            "table";
        grid-template-columns: 1fr;
    }
    .listtable > .dataTables_filter,
    .listtable > .dataTables_info { justify-self: stretch; }
    /* Stretch the input full-width and remove the 8px left margin that
       offsets it from sibling info text. Bump height a bit so it's
       comfortable on touch. */
    .listtable > .dataTables_filter label { display: block; width: 100%; }
    .listtable > .dataTables_filter input {
        width: 100% !important;
        margin-left: 0 !important;
        height: 42px;
    }
}
.dataTables_length label, .dataTables_filter label {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: var(--apex-text-muted);
}
.dataTables_length select {
    height: 34px;
    padding: 4px 24px 4px 10px;
    border-radius: var(--apex-radius);
    border: 1px solid var(--apex-border);
    background-color: white;
    font-size: 0.875rem;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.dataTables_filter input {
    height: 36px;
    padding: 0 14px 0 36px;
    border: 1px solid var(--apex-border) !important;
    border-radius: var(--apex-radius-lg) !important;
    background: white url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='11' cy='11' r='8'/%3e%3cline x1='21' y1='21' x2='16.65' y2='16.65'/%3e%3c/svg%3e") left 12px center / 14px no-repeat !important;
    font-size: 0.875rem;
    margin-left: 8px !important;
    width: 240px;
    max-width: 100%;
    outline: none;
}
.dataTables_filter input:focus {
    border-color: var(--apex-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12) !important;
}

table.dataTable {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    overflow: hidden;
    background: white;
}
table.dataTable thead th {
    background: var(--apex-bg) !important;
    color: var(--apex-text-muted) !important;
    font-weight: 600;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--apex-border) !important;
    border-top: 0 !important;
    white-space: nowrap;
    /* Align header to its column data — most WHMCS list cells visually
       center via inline content (badges, prices, dates), so centring
       the header label keeps each column reading top-to-bottom on the
       same vertical axis. The first column (usually a name/id) keeps
       left alignment via the override below. */
    text-align: center;
    vertical-align: middle;
}
table.dataTable thead th:first-child,
table.dataTable tbody td:first-child {
    text-align: left;
}
table.dataTable tbody td {
    text-align: center;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    background-position: right 14px center !important;
    padding-right: 30px !important;
}
table.dataTable tbody td {
    padding: 14px 16px !important;
    border-bottom: 1px solid var(--apex-border) !important;
    border-top: 0 !important;
    vertical-align: middle;
    font-size: 0.925rem;
}
table.dataTable tbody tr:last-child td { border-bottom: 0 !important; }
table.dataTable tbody tr:hover td { background: var(--apex-bg); }
table.dataTable.no-footer { border-bottom: 1px solid var(--apex-border) !important; }

.pagination .page-item .page-link {
    border: 1px solid var(--apex-border);
    color: var(--apex-text);
    border-radius: var(--apex-radius) !important;
    margin: 0 2px;
    padding: 6px 12px;
    font-size: 0.875rem;
    font-weight: 500;
    min-width: 36px;
    text-align: center;
}
.pagination .page-item.active .page-link {
    background: var(--apex-primary);
    border-color: var(--apex-primary);
    color: white;
}

/* WHMCS-specific tile (homepage stat tiles) — tiles is just a block,
   the .row inside handles the flex/grid layout.

   Visual: classic apex stat card — big number top-left, small label
   below, with a large faded FA icon rotated -10deg in the bottom-right
   corner as a watermark. Color of the icon matches the tile's category
   (services=blue, domains=green, tickets=red, invoices=gold). */
.tiles { display: block; margin-bottom: 16px; }
.tiles.mb-4 { margin-bottom: 16px !important; }  /* override Bootstrap mb-4 */
.tile {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
    background: linear-gradient(to bottom right, #ffffff, #fafbfc);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 22px 24px;
    min-height: 110px;
    text-decoration: none !important;
    transition: border-color 0.15s, transform 0.15s;
}
.tile:hover {
    text-decoration: none;
    transform: translateY(-2px);
    border-color: var(--apex-border-strong, #d1d5db);
}
/* Watermark icon — absolute, large, faded, rotated. Sits behind the
   number/title. */
.tile > i {
    position: absolute;
    right: -12px;
    bottom: -22px;
    font-size: 6.5rem;
    line-height: 1;
    opacity: 0.12;
    transform: rotate(-10deg);
    pointer-events: none;
    z-index: 1;
    /* Default colour — overridden per-tile via .bg-color-* below. */
    color: var(--apex-text-muted);
    /* Reset any inherited chip styling from earlier .tile > i rules. */
    width: auto;
    height: auto;
    background: transparent !important;
    border-radius: 0;
    display: inline;
    flex-shrink: initial;
}
.tile .stat {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--apex-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}
.tile .title {
    position: relative;
    z-index: 2;
    display: block;
    font-size: 0.875rem;
    color: var(--apex-text-muted);
    font-weight: 500;
}
.tile .highlight { display: none !important; }

/* Per-tile icon colour based on the .bg-color-* hint that WHMCS sets
   on the .highlight pixel. */
.tile:has(.bg-color-blue)     > i { color: #3b82f6 !important; }
.tile:has(.bg-color-green)    > i { color: #10b981 !important; }
.tile:has(.bg-color-red)      > i { color: #ef4444 !important; }
.tile:has(.bg-color-gold)     > i,
.tile:has(.bg-color-yellow)   > i { color: #f59e0b !important; }
.tile:has(.bg-color-asbestos) > i,
.tile:has(.bg-color-grey)     > i { color: #94a3b8 !important; }
.tile:has(.bg-color-emerald)  > i,
.tile:has(.bg-color-teal)     > i { color: #047857 !important; }

/* ===== card-accent-* — neutralize WHMCS coloured top borders ===== */
[class*="card-accent-"] {
    border: 1px solid var(--apex-border) !important;
}
.card > .list-group-flush {
    border-top: 0;
    border-bottom: 0;
}

/* WHMCS service status labels (colored span pills used in lists) */
.label.status,
.label[class*="status-"] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1.4;
    color: white;
}
.label.status::before,
.label[class*="status-"]::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* WHMCS network-issues bar wrapper */
.network-issue-alert,
.alert.network-issue {
    border-radius: 0 !important;
    margin: 0 !important;
}

/* ===== Mobile / responsive ===== */
@media (max-width: 991.98px) {
    .apex-logged-in .main-sidebar {
        transform: translateX(-100%);
    }
    .apex-logged-in .main-sidebar.show {
        transform: translateX(0);
        box-shadow: 4px 0 12px rgba(0,0,0,0.1);
    }
    .apex-logged-in .apex-main {
        margin-left: 0;
    }
    .top-header .mobile-toggle { display: inline-flex; }
    .top-header .search-box { display: none !important; }
    .top-header .user-info { display: none; }
    .top-header { padding: 0 16px; }
    .apex-content { padding: 24px 16px; }
    .apex-footer-inner { flex-direction: column; align-items: center; text-align: center; }

    /* Mobile: secondary sidebar (under content). No own top margin —
       the previous (last main content) card already has its own mb of
       16px, so we'd double-stack to 32px+ otherwise. */
    .apex-sidebar-mobile { margin-top: 0; }

    /* Guest header */
    .guest-header-inner { padding: 0 16px; }
    .guest-nav { display: none; }
}

@media (max-width: 575.98px) {
    .apex-content { padding: 20px 14px; }
    .page-header h1 { font-size: 1.5rem; }
    .top-header-right .header-icon-btn:not(.position-relative):not([data-target="#modalChooseLanguage"]) { display: none; }
}

/* =========================================================
   Active products/services panel (active-products-services-item.tpl)
   The template renders TWO labels per row — `.label-placeholder`
   (a ghost holding the WIDEST possible status text to reserve
   column space) plus `.label-{status}` (the actual coloured pill
   absolutely positioned on top). Without CSS both render as
   plain inline text, stack vertically, and look invisible/messy.
   ========================================================= */
.div-service-item {
    display: flex;
    align-items: center;
    gap: 14px;
    /* No padding — the row's outer wrapper (.list-group-item) already
       has `padding: 14px 20px`. Adding the same here would double-pad
       (40px from card edge instead of 20px) and push content inside
       the dotted grid line. */
    padding: 0;
    border: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.12s;
}
.div-service-item:hover { background: var(--apex-bg); }
/* When .div-service-item is rendered inside .card-body (default WHMCS
   layout), the body's own padding stacks on top of the row's padding —
   collapse the body padding so the row spans the full card width. */
.card-body:has(> .div-service-item),
.card-body:has(> div > .div-service-item) {
    padding: 0;
}

.div-service-status {
    position: relative;
    flex-shrink: 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
}
/* Ghost label — reserves column width, never visible. */
.div-service-status .label-placeholder {
    visibility: hidden;
    display: inline-block;
}
/* Real status label — overlay the placeholder so all rows have
   identical column widths regardless of the active status text. */
.div-service-status > .label:not(.label-placeholder) {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* Visual treatment: same pill style as our status-pill set. The
   `margin: 0 4px` on the global `.label` rule (used by inline ticket-
   status pills) would otherwise eat 4px on each side of the column —
   the absolute pill ends up 80px wide in an 88px column and its left
   edge no longer aligns with the card-header icon. Force margin 0. */
.div-service-status .label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 10px;
    border-radius: 99px;
    line-height: 1.4;
    white-space: nowrap;
    margin: 0 !important;
}
.div-service-status .label-active,
.div-service-status .label-success { background: #86efac; color: #14532d; }
.div-service-status .label-pending,
.div-service-status .label-warning { background: #fde047; color: #713f12; }
.div-service-status .label-suspended,
.div-service-status .label-on-hold,
.div-service-status .label-info     { background: #fdba74; color: #7c2d12; }
.div-service-status .label-terminated,
.div-service-status .label-cancelled,
.div-service-status .label-fraud,
.div-service-status .label-danger,
.div-service-status .label-error    { background: #fca5a5; color: #7f1d1d; }
.div-service-status .label-default,
.div-service-status .label-secondary { background: #cbd5e1; color: #334155; }

/* Service name + domain block — takes available row width. */
.div-service-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--apex-text);
    font-size: 0.92rem;
}
.div-service-name .font-weight-bold { font-weight: 600; }
.div-service-name .text-domain {
    color: var(--apex-text-muted);
    font-size: 0.85rem;
}

/* Action buttons on the right. */
.div-service-buttons {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.div-service-buttons .btn-view-details {
    border: 1px solid var(--apex-border);
    background: white;
    color: var(--apex-text-muted);
}
.div-service-buttons .btn-view-details:hover {
    border-color: var(--apex-primary);
    color: var(--apex-primary);
    background: var(--apex-primary-light);
}
.div-service-buttons .btn-view-details .sr-only { display: none; }

@media (max-width: 575.98px) {
    .div-service-item {
        flex-wrap: wrap;
        row-gap: 8px;
    }
    .div-service-name { flex: 1 1 100%; order: 2; }
    .div-service-status { order: 1; }
    .div-service-buttons { order: 3; flex: 1 1 100%; justify-content: flex-end; }
}

/* ===== Auth pages (login / register / pwreset / contact) — center the card ===== */
.apex-tpl-login .apex-content,
.apex-tpl-clientregister .apex-content,
.apex-tpl-contact .apex-content,
.apex-tpl-password-reset-email-prompt .apex-content,
.apex-tpl-password-reset-change-prompt .apex-content,
.apex-tpl-password-reset-security-prompt .apex-content,
.apex-tpl-password-reset-container .apex-content,
.apex-tpl-pwreset .apex-content,
.apex-tpl-two-factor-challenge .apex-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40px 16px;
}
.auth-card-wrap {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}
.auth-card-wrap .auth-card { box-shadow: var(--apex-shadow-lg); }
/* Register form has more fields (incl. side-by-side rows) — give it
   a bit more width so the 3-up city/state/postcode row breathes. */
.apex-tpl-clientregister .auth-card-wrap,
.apex-tpl-clientregister .auth-card { max-width: 560px; }
.apex-tpl-contact .auth-card-wrap,
.apex-tpl-contact .auth-card { max-width: 520px; }

/* BS4 btn-block (BS5 doesn't have this — replace with w-100) */
.btn-block { display: flex; width: 100%; }

/* Form group spacing (BS4 .form-group) */
.form-group { margin-bottom: 1rem; }
.form-control-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--apex-text); margin-bottom: 6px; }

/* =========================================================
   ============= WHMCS QUIRKS POLISH ========================
   Things WHMCS auto-injects that look ugly with our theme.
   ========================================================= */

/* ----- bg-color-* on buttons (View More / More Details on home cards):
   WHMCS adds these to btn-default to color-match panel accent. We want
   them all to look like our default outlined small buttons. ----- */
.btn[class*="bg-color-"] {
    background: white !important;
    color: var(--apex-text) !important;
    border: 1px solid var(--apex-border) !important;
    box-shadow: none !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: var(--apex-radius) !important;
}
.btn[class*="bg-color-"]:hover {
    background: var(--apex-surface-2) !important;
    color: var(--apex-text) !important;
    border-color: var(--apex-border-strong) !important;
}
.btn-xs {
    padding: 4px 12px !important;
    font-size: 0.75rem !important;
    border-radius: var(--apex-radius-sm) !important;
    font-weight: 600 !important;
}

/* ----- WHMCS labels (used inline as ticket-status pills with hex bg) ----- */
.label {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 3px 10px !important;
    border-radius: 99px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1.4 !important;
    color: white !important;
    vertical-align: middle;
    margin: 0 4px;
}

/* (Stat tile colours moved to the main .tile block above — watermark
   icon style with rotated angle, no chip background.) */

/* tiles row: kill no-gutters cramped look — give them gap */
.tiles {
    margin-bottom: 16px !important;
}
.tiles .row.no-gutters {
    margin-left: -8px !important;
    margin-right: -8px !important;
    display: flex;
    flex-wrap: wrap;
}
.tiles .row.no-gutters > [class*="col-"] {
    padding-left: 8px !important;
    padding-right: 8px !important;
    margin-bottom: 16px;
}
@media (min-width: 1200px) {
    .tiles .row.no-gutters > [class*="col-"] {
        margin-bottom: 0;
    }
}
.tile { width: 100%; }

/* ===== Client home cards: each card needs bottom space =====
   We DON'T reset :last-child because each card is inside its own
   column wrapper — :last-child would catch single-card columns and
   collapse the gap to zero. Bottom-of-page leftover margin is fine. */
.client-home-cards > .row {
    margin-left: -8px;
    margin-right: -8px;
}
.client-home-cards > .row > [class*="col-"] {
    padding-left: 8px;
    padding-right: 8px;
}
.client-home-cards .card {
    margin-bottom: 16px !important;
}
/* Sidebar (right column) cards: consistent gap. The wrapper itself has
   mb (.apex-sidebar.mb-4 → 16px) so the LAST card's own mb would double-
   stack to 32px between primary's last card and secondary's first card.
   Zero out the last-child so total gap stays 16px. Also covers the
   mobile-only secondary wrapper (`apex-sidebar-mobile`) — it lives in
   footer.tpl as `<div class="col-12 d-lg-none order-lg-3 apex-sidebar-mobile">`
   and was producing 60px+ gaps between announcement cards in mobile. */
.apex-sidebar .card,
.apex-sidebar .card-sidebar,
.apex-sidebar-mobile .card,
.apex-sidebar-mobile .card-sidebar {
    margin-bottom: 16px !important;
}
.apex-sidebar > .card:last-child,
.apex-sidebar > .card-sidebar:last-child,
.apex-sidebar-mobile > .card:last-child,
.apex-sidebar-mobile > .card-sidebar:last-child {
    margin-bottom: 0 !important;
}
/* Top-level alert above the cards (e.g. "Complete the captcha and try again") */
.apex-primary > .alert,
.apex-content > .alert {
    margin-bottom: 16px !important;
}

/* ----- Recent panels: list-group inside (no flush class added) -----
   Each row from WHMCS is roughly:
     <a class="list-group-item">
        <strong>#TID - Subject</strong>
        <span class="badge">STATUS</span>
        <small class="text-last-updated">Last update: ...</small>
     </a>
   Layout: 2-row grid — top row = subject (1fr) + badge (auto),
   bottom row = date right-aligned. Same shape regardless of column
   width, no fighting between subject and date for horizontal space. */
.client-home-cards .card .list-group .list-group-item {
    /* No borders, no shadows, no dividers — flat row. */
    border: 0 !important;
    border-radius: 0 !important;
    padding: 14px 20px !important;
    margin: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-size: 0.9rem;
    line-height: 1.5;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "subject badge"
        "date    date";
    column-gap: 12px;
    row-gap: 4px;
    align-items: center;
    box-shadow: none !important;
}
/* Active products rows: the inner `.div-service-item` is its own flex
   layout (status | name | buttons), so the outer `.list-group-item`
   shouldn't add extra horizontal padding — that creates a visible gap
   between the right-most button and the row's right edge. */
.client-home-cards .card .list-group-item:has(> .div-service-item) {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Cancel the `display: grid` from the more general
       `.list-group .list-group-item` rule above (used by Recent Tickets
       to get a 2-column "subject | badge" layout). For active products,
       the inner `.div-service-item` is its own flex layout — keeping
       the outer as grid forced it into a 1fr column that left ~30px
       of empty space on the right. */
    display: block !important;
    grid-template-columns: none !important;
    grid-template-areas: none !important;
}
.client-home-cards .card .list-group-item:has(> .div-service-item) > .div-service-item {
    padding: 14px 20px;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Make sure the parent list-group is fully contained — no negative
   margins, no horizontal overflow. */
.client-home-cards .card .list-group {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}
/* If WHMCS wraps the list in a .card-body, that body's own padding
   stacks on top of the row padding and shifts the rows inward. Kill
   it so the row's own padding (20px) is the only horizontal inset. */
.client-home-cards .card > .card-body:has(> .list-group),
.client-home-cards .card > .card-body:has(> #ClientAreaHomePagePanels-Active_Products_Services-0),
.client-home-cards .card > .card-body:has(.div-service-item) {
    padding: 0 !important;
}
.client-home-cards .card .list-group .list-group-item:first-child { border-top: 0 !important; }
.client-home-cards .card .list-group .list-group-item:last-child  { border-bottom: 0 !important; }
/* Last row's bottom corners follow the card's rounded corners — without
   this, since `.card` has `overflow: visible` and the row has its own
   bg, the row paints SQUARE corners over the card's rounded ones. */
.client-home-cards .card > .list-group:last-child > .list-group-item:last-child,
.client-home-cards .card > .list-group:only-child  > .list-group-item:last-child {
    border-bottom-left-radius: var(--apex-radius-lg) !important;
    border-bottom-right-radius: var(--apex-radius-lg) !important;
}
/* Same for the .div-service-item rows (active products card). */
.client-home-cards .card > .div-service-item:last-child,
.client-home-cards .card > .card-body:last-child > .div-service-item:last-child {
    border-bottom-left-radius: var(--apex-radius-lg);
    border-bottom-right-radius: var(--apex-radius-lg);
}
.client-home-cards .card .list-group .list-group-item > strong,
.client-home-cards .card .list-group .list-group-item > b {
    grid-area: subject;
    color: var(--apex-text);
    font-weight: 600;
    min-width: 0;
}
.client-home-cards .card .list-group .list-group-item > .badge,
.client-home-cards .card .list-group .list-group-item > .label {
    grid-area: badge;
    justify-self: end;
    align-self: center;
    white-space: nowrap;
}
.client-home-cards .card .list-group .list-group-item small,
.client-home-cards .card .list-group .list-group-item .text-last-updated,
.client-home-cards .card .list-group .list-group-item > .float-right {
    grid-area: date;
    margin: 0 !important;
    float: none !important;
    color: var(--apex-text-muted);
    font-size: 0.78rem;
    text-align: right;
    line-height: 1.35;
}

/* Normalise typography across ALL home-page panel bodies. WHMCS pre-
   renders each panel's body HTML server-side and the markup varies —
   some panels wrap in <p>, some in <h4>, some have no wrapper at all,
   so without explicit rules the partnership/affiliate card text
   visibly outsizes the rest. Force one font-size + line-height. */
.client-home-cards .card .card-body {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--apex-text);
}
.client-home-cards .card .card-body p,
.client-home-cards .card .card-body div {
    font-size: inherit;
    line-height: inherit;
    margin-bottom: 8px;
}
.client-home-cards .card .card-body p:last-child,
.client-home-cards .card .card-body div:last-child { margin-bottom: 0; }
.client-home-cards .card .card-body h1,
.client-home-cards .card .card-body h2,
.client-home-cards .card .card-body h3,
.client-home-cards .card .card-body h4,
.client-home-cards .card .card-body h5,
.client-home-cards .card .card-body h6 {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--apex-text);
}
.client-home-cards .card .card-body strong { color: var(--apex-text); font-weight: 600; }

/* Badges inside home cards: enforce identical size everywhere — some
   panels use `<span class="badge badge-success">`, some `.label`, and
   the default font-size differed enough to look uneven. */
.client-home-cards .card .badge,
.client-home-cards .card .label {
    font-size: 0.7rem !important;
    font-weight: 700;
    padding: 4px 8px;
    line-height: 1.2;
    border-radius: var(--apex-radius-sm);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

/* card-footer with view-more link aligned right */
.btn-view-more {
    color: var(--apex-primary) !important;
    font-weight: 500 !important;
    font-size: 0.85rem;
    text-decoration: none !important;
}
.btn-view-more:hover { color: var(--apex-primary-hover) !important; text-decoration: underline !important; }
.btn-view-more.disabled { color: var(--apex-text-subtle) !important; cursor: not-allowed; pointer-events: none; }

/* Empty card-footer (no content) — collapse it.
   WHMCS often outputs <div class="card-footer"></div> with only whitespace
   inside — :empty doesn't catch whitespace, so we also hide via JS at runtime
   (apex.js). Here, we at least catch the truly-empty ones. */
.card .card-footer:empty { display: none; }
.client-home-cards .card .card-footer {
    background: transparent;
    border-top: 1px solid var(--apex-border);
    padding: 12px 20px;
    text-align: right;
}
.client-home-cards .card .card-footer:has(.btn-view-more.disabled) {
    display: none;
}
/* Final guard: footer with only an invisible "View More..." disabled link */
.client-home-cards .card .card-footer .btn-view-more.disabled,
.client-home-cards .card .card-footer .btn-view-more.disabled + .clearfix {
    display: none;
}

/* ----- Domain register form inside home card: clean it up ----- */
.client-home-cards .card .input-group .input-group-btn,
.client-home-cards .card .input-group .input-group-append {
    margin: 0 !important;
}
.client-home-cards .card .input-group .btn {
    height: 44px;
}
.client-home-cards .card .input-group input[type="text"] {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.client-home-cards .card .input-group .btn-success {
    background: var(--apex-primary) !important;
    border-color: var(--apex-primary) !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.client-home-cards .card .input-group .btn-success:hover {
    background: var(--apex-primary-hover) !important;
    border-color: var(--apex-primary-hover) !important;
}
.client-home-cards .card .input-group .btn-default {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    /* This is the LAST button in the group ("Перенести") — give back its
       right rounding so the input+buttons row ends with a clean corner
       instead of a flat edge. */
    border-top-right-radius: var(--apex-radius-lg) !important;
    border-bottom-right-radius: var(--apex-radius-lg) !important;
}

/* ----- Sidebar update button (Update on Your Info card) ----- */
.apex-sidebar .btn-success {
    background: var(--apex-primary) !important;
    border-color: var(--apex-primary) !important;
    color: white !important;
    font-weight: 600 !important;
}
.apex-sidebar .btn-success:hover {
    background: var(--apex-primary-hover) !important;
    border-color: var(--apex-primary-hover) !important;
}
.apex-sidebar .btn-block {
    display: block;
    width: 100%;
}
.apex-sidebar .card-footer {
    background: white;
    padding: 14px 18px;
}

/* ----- Card header: action button on the right (was using float-right) ----- */
.card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px;
    flex-wrap: wrap;
}
.card-header .card-title {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    /* Flex layout — `align-items: center` lines up the icon's CENTRE
       with the text's CENTRE (no font-metric guessing needed). The
       earlier mid-word wrap problem is now blocked by the explicit
       overflow-wrap/word-break overrides below. */
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--apex-text);
    line-height: 1.4;
    overflow-wrap: normal;
    word-break: normal;
    word-wrap: normal;
}
/* `<div class="float-right">` action button placed BEFORE the icon/text
   in the WHMCS panel templates. With our flex .card-title (and the
   button being the first child), `float: right` doesn't work in flex —
   we have to push it with `margin-left: auto` and bump its `order` so
   it visually sits at the END of the row. */
.card-header .card-title .float-right,
.card-header .card-title .pull-right {
    float: none !important;
    margin-left: auto;
    order: 99;
    flex-shrink: 0;
}
.card-header .card-title > i,
.card-header .card-title .fas,
.card-header .card-title .far,
.card-header .card-title .fal,
.card-header .card-title .fab,
.panel-heading .panel-title > i,
.panel-heading .panel-title .fas,
.panel-heading .panel-title .far,
.panel-heading .panel-title .fal,
.panel-heading .panel-title .fab {
    color: var(--apex-text);
    font-size: 1rem;
    /* Spacing comes from card-title's `gap: 8px` (flex container).
       No explicit margin or vertical-align needed — `align-items: center`
       on the parent does the work. Width auto = glyph natural width. */
    margin: 0;
    display: inline-block;
    line-height: 1;
    flex-shrink: 0;
}
/* Override BS utility .mr-2 on header icons so spacing stays uniform
   even if some templates spell it `<i class="... mr-2"></i>`. */
.card-header .card-title > i.mr-2,
.card-header .card-title > .mr-2 { margin-right: 8px !important; }

/* Belt-and-suspenders: NO card-title or panel-title anywhere is allowed
   to break mid-word. BS4's reboot puts `word-wrap: break-word` on .card
   which inherits down — we have to explicitly cancel it on every title
   variant, otherwise a too-narrow column splits "Ярлыки" into "Ярлык/ы". */
.card-header .card-title,
.card-header h3,
.panel-heading .panel-title,
.apex-sidebar .card-title,
.apex-sidebar .card-sidebar .card-title {
    overflow-wrap: normal !important;
    word-break: normal !important;
    word-wrap: normal !important;
    hyphens: none !important;
}

/* If WHMCS shoves the action button INSIDE the title, pull it back out */
.card .card-header .card-title .btn,
.card .card-header h3 .btn {
    margin-left: auto;
    flex-shrink: 0;
    order: 99;
}

/* ----- ".card-accent-*" colored top stripe — already neutralized above,
   but re-state to be sure (specificity bump) ----- */
.card[class*="card-accent-"] {
    border: 1px solid var(--apex-border) !important;
    box-shadow: none !important;
}

/* ----- panel-style (legacy BS3 panels in modules) ----- */
.panel:not(.card) {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    box-shadow: var(--apex-shadow);
    margin-bottom: 16px;
    overflow: hidden;
}
.panel:not(.card) .panel-heading {
    padding: 16px 20px;
    background: var(--apex-bg);
    border-bottom: 1px solid var(--apex-border);
}
.panel:not(.card) .panel-title { margin: 0; font-size: 1rem; font-weight: 600; }
.panel:not(.card) .panel-body { padding: 20px; }
.panel:not(.card) .panel-footer {
    padding: 14px 20px;
    background: var(--apex-bg);
    border-top: 1px solid var(--apex-border);
}

/* When a panel ALSO has the .card class (cart sidebar uses
   `.panel.card.card-sidebar`), our .card rules style the box but
   .panel-title isn't .card-title, so flex/spacing isn't applied —
   the chevron-up icon (.pull-right.float-right) ends up inline next
   to the title text instead of right-aligned. Bridge that here. */
.panel.card .panel-title,
.card-header > .panel-title {
    flex: 1;
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--apex-text);
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
/* Floats don't behave as expected inside a flex item that auto-shrinks
   to its content. Convert legacy float utilities INSIDE a flex
   .card-header/.panel-title context into a margin-left:auto push. */
.card-header > .panel-title > .pull-right,
.card-header > .panel-title > .float-right,
.panel.card .panel-title > .pull-right,
.panel.card .panel-title > .float-right {
    margin-left: auto;
    float: none !important;
}
/* The collapse caret should be visually subdued and animate. */
.card-header .card-minimise,
.card-header .panel-minimise {
    color: var(--apex-text-subtle);
    cursor: pointer;
    transition: transform 0.2s, color 0.15s;
    font-size: 0.85rem;
}
.card-header .card-minimise:hover,
.card-header .panel-minimise:hover { color: var(--apex-primary); }
.card-header .card-minimise.minimised,
.card-header .panel-minimise.minimised { transform: rotate(180deg); }

/* =========================================================
   ============= CART / ORDER FORM ==========================
   The cart body comes from /templates/orderforms/standard_cart/
   which we don't ship — we can only restyle via CSS. This
   block neutralises BS3 panel-primary/info dark headers,
   tightens the view-cart-tabs and contains wide cart tables
   to prevent horizontal page overflow. ===================== */
.cart-body {
    max-width: 100%;
    min-width: 0;
}

/* "К оплате" / order summary block + similar accent panels.
   BS3 panel-primary/panel-info paint a hardcoded dark header —
   override to our brand colours. */
.cart-body .panel-primary,
.cart-body .panel-info,
.cart-body .panel-success,
#order-standard_cart .panel-primary,
#order-standard_cart .panel-info,
#order-standard_cart .panel-success {
    border-color: var(--apex-border) !important;
}
.cart-body .panel-primary > .panel-heading,
.cart-body .panel-info > .panel-heading,
.cart-body .panel-success > .panel-heading,
#order-standard_cart .panel-primary > .panel-heading,
#order-standard_cart .panel-info > .panel-heading,
#order-standard_cart .panel-success > .panel-heading {
    background: var(--apex-primary) !important;
    color: #fff !important;
    border-bottom: 0 !important;
}
.cart-body .panel-primary > .panel-heading .panel-title,
.cart-body .panel-info > .panel-heading .panel-title,
.cart-body .panel-success > .panel-heading .panel-title { color: #fff !important; }

/* Cart product/options table — WHMCS gives <thead> a dark navy via
   .bg-primary or inline style; pull it back to a soft surface so
   the dark band doesn't dominate the page. */
.cart-body .table thead,
.cart-body .table thead th,
.cart-body table.table-cart thead th,
#order-standard_cart .table thead th {
    background: var(--apex-bg) !important;
    color: var(--apex-text-muted) !important;
    font-weight: 600 !important;
    border-bottom: 1px solid var(--apex-border) !important;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
}

/* Promo-code tabs sit directly above an input — tabs need a soft
   border that flows into the tab-content panel below. */
.view-cart-tabs { margin-top: 16px; }
.view-cart-tabs .nav-tabs {
    border-bottom: 1px solid var(--apex-border);
    margin-bottom: 0;
    padding-left: 0;
    flex-wrap: wrap;
}
.view-cart-tabs .nav-tabs .nav-link {
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--apex-radius) var(--apex-radius) 0 0;
    color: var(--apex-text-muted);
    padding: 10px 18px;
    margin-bottom: -1px;
    background: transparent;
}
.view-cart-tabs .nav-tabs .nav-link.active {
    background: white;
    border-color: var(--apex-border);
    color: var(--apex-primary);
}
.view-cart-tabs .tab-content {
    border: 1px solid var(--apex-border);
    border-top: 0;
    border-radius: 0 0 var(--apex-radius-lg) var(--apex-radius-lg);
    background: white;
    padding: 16px 18px;
}
/* Defensive: the promo code input must not be white-on-white. */
.view-cart-tabs .tab-content input[type="text"],
.view-cart-tabs .tab-content input[type="search"],
#order-standard_cart input[name="promocode"] {
    background: white !important;
    color: var(--apex-text) !important;
    border: 1px solid var(--apex-border) !important;
    border-radius: var(--apex-radius) !important;
}
.view-cart-tabs .tab-content .btn {
    background: var(--apex-surface-2);
    color: var(--apex-text);
    border: 1px solid var(--apex-border);
}
.view-cart-tabs .tab-content .btn:hover {
    background: var(--apex-primary);
    color: #fff;
    border-color: var(--apex-primary);
}

/* Long category names in the cart sidebar wrap nicely instead of
   forcing the column wider than the viewport. */
.cart-sidebar .list-group-item,
.panel.card.panel-sidebar .list-group-item {
    white-space: normal;
    word-break: break-word;
}

/* =========================================================
   Captcha (hCaptcha / reCAPTCHA) widget container.
   The widget itself is a fixed-size iframe (~302×76 for hCaptcha,
   ~304×78 for reCAPTCHA). Without explicit centring rules the
   homepage `registerDomainPanel` card squeezed it against one edge.
   ========================================================= */
.h-captcha,
.g-recaptcha,
.domainchecker-homepage-captcha,
.recaptcha-container,
.google-recaptcha-align,
[data-sitekey] {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 12px auto !important;
    width: 100%;
}
.h-captcha iframe,
.g-recaptcha iframe,
.recaptcha-container iframe {
    background: transparent !important;
    border: 0 !important;
    margin: 0 auto;
}
/* The home register-domain card body needs to centre its children too —
   the captcha sits inside a `.google-recaptcha-align` div which is a
   regular block element by default. */
#registerDomainPanel .card-body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}
#registerDomainPanel .card-body > .google-recaptcha-align,
#registerDomainPanel .card-body > .h-captcha,
#registerDomainPanel .card-body > .g-recaptcha {
    align-self: center;
    width: auto;
    max-width: 100%;
}

/* =========================================================
   Final defence — never let a child component spawn a
   horizontal page scroll. apex-content is the outer scroll
   container; if anything inside overflows it, contain it. */
/* Default guard for logged-in apex-content (full-width). Don't apply
   `max-width: 100%` to guest pages — they need the BS4 .container
   responsive max-widths defined earlier (540/720/960/1140). */
.apex-logged-in .apex-content { max-width: 100%; min-width: 0; overflow-x: clip; }
.apex-content-guest { min-width: 0; overflow-x: clip; }
.apex-content .row,
.apex-content > .apex-grid,
.apex-content > .apex-grid > .row { min-width: 0; }
.apex-grid > .row > [class*="col-"] { min-width: 0; }

/* =========================================================
   ============= AFFILIATES PAGE ============================
   Custom layout for affiliates.tpl (we rewrote it).
   ========================================================= */
.affiliate-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 767.98px) {
    .affiliate-stats { grid-template-columns: 1fr; }
}
.affiliate-stats .stat-tile { cursor: default; }
.affiliate-stats .stat-tile:hover { transform: none; }

.affiliate-block-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--apex-text);
}
.affiliate-block-title i { font-size: 0.95rem; }

.affiliate-referral-card { margin-bottom: 24px; }
.affiliate-referral-card .form-control {
    background: var(--apex-bg) !important;
    color: var(--apex-text) !important;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 0.875rem !important;
    cursor: text;
}

.affiliate-commissions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}
@media (max-width: 767.98px) {
    .affiliate-commissions { grid-template-columns: 1fr; }
}

/* Balance grid INSIDE the affiliate balance card — three cells with
   1px dividers between them, last one (active balance) tinted green. */
.affiliate-balance-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--apex-border);
}
.affiliate-balance-cell {
    background: white;
    padding: 20px 22px;
    text-align: center;
}
.affiliate-balance-cell-primary {
    background: var(--apex-primary-light);
}
.affiliate-balance-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--apex-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.affiliate-balance-cell-primary .affiliate-balance-label { color: var(--apex-primary); }
.affiliate-balance-value {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--apex-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.affiliate-balance-cell-primary .affiliate-balance-value { color: var(--apex-primary); }
@media (max-width: 575.98px) {
    .affiliate-balance-grid { grid-template-columns: 1fr; }
}

/* ===== Add Funds page ===== */
.addfunds-limits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
    background: var(--apex-border);
    border-bottom: 1px solid var(--apex-border);
}
.addfunds-limit-cell {
    background: white;
    padding: 18px 22px;
    text-align: center;
}
.addfunds-limit-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--apex-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}
.addfunds-limit-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--apex-text);
}
.addfunds-card .card-body { padding: 28px 32px; }
.addfunds-card .form-group { margin-bottom: 20px; }
@media (max-width: 575.98px) {
    .addfunds-limits { grid-template-columns: 1fr; }
    .addfunds-card .card-body { padding: 20px; }
}
.commission-card {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 20px 22px;
    box-shadow: var(--apex-shadow-sm);
    transition: box-shadow 0.15s, transform 0.15s;
}
.commission-card:hover {
    box-shadow: var(--apex-shadow-md);
    transform: translateY(-1px);
}
.commission-card-primary {
    background: linear-gradient(135deg, var(--apex-primary) 0%, #047857 100%);
    border-color: transparent;
    color: white;
    box-shadow: none;
}
.commission-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--apex-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.commission-card-primary .commission-label { color: rgba(255, 255, 255, 0.85); }
.commission-value {
    font-size: 1.875rem;
    font-weight: 800;
    color: var(--apex-text);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 8px;
}
.commission-card-primary .commission-value { color: white; }
.commission-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    color: var(--apex-text-muted);
}
.commission-meta i { font-size: 0.75rem; }
.commission-card-primary .commission-meta { color: rgba(255, 255, 255, 0.85); }

.affiliate-withdraw {
    text-align: center;
    padding: 24px 0 32px;
    border-bottom: 1px solid var(--apex-border);
    margin-bottom: 32px;
}
.affiliate-withdraw .btn-lg {
    padding: 14px 32px;
    font-size: 1rem;
}
.affiliate-withdraw-note {
    margin: 14px 0 0;
    color: var(--apex-text-muted);
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.affiliate-withdraw-note i { color: var(--apex-info); }

.affiliate-referrals-section {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 24px;
    box-shadow: var(--apex-shadow);
}
.affiliate-referrals-section .affiliate-block-title { margin-bottom: 16px; }

.affiliate-banners-card .card-body img,
.affiliate-banners-card .card-body iframe { max-width: 100%; }
.affiliate-banners-card textarea {
    width: 100%;
    min-height: 80px;
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.825rem;
    background: var(--apex-bg);
}

/* =========================================================
   ============ TICKET CHAT (viewticket.tpl) ================
   Chat-style layout: bubbles, oldest at top, newest at bottom,
   composer pinned below, scrollable thread.
   ========================================================= */
.ticket-chat-page {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ticket-chat-header.card { margin-bottom: 0; }
.ticket-chat-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

/* Alerts inside the chat page: kill default margin-bottom — the
   parent .ticket-chat-page is a flex column with gap:16px, so any
   leftover margin compounds the gap and visually detaches the alert
   from the header card. */
.ticket-chat-page > .alert {
    margin: 0;
    width: 100%;
}
.ticket-chat-header-info { flex: 1; min-width: 0; }
.ticket-chat-id {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}
.ticket-id-tag {
    background: var(--apex-surface-2);
    color: var(--apex-text);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 4px 10px;
    border-radius: var(--apex-radius);
    font-family: 'JetBrains Mono', ui-monospace, monospace;
}
.ticket-chat-subject {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0;
    color: var(--apex-text);
    line-height: 1.3;
}
.ticket-chat-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

/* Thread (scrollable area with bubbles) */
.ticket-chat-thread {
    background: var(--apex-bg);
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 20px;
    max-height: 65vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    scroll-behavior: smooth;
}
.ticket-chat-thread::-webkit-scrollbar { width: 8px; }
.ticket-chat-thread::-webkit-scrollbar-thumb {
    background: var(--apex-border-strong);
    border-radius: 99px;
}
.ticket-chat-thread::-webkit-scrollbar-track { background: transparent; }

/* Single message row */
.chat-msg {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 80%;
}
.chat-msg.msg-client { align-self: flex-end; flex-direction: row-reverse; }
.chat-msg.msg-staff  { align-self: flex-start; }

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--apex-surface-2);
    color: var(--apex-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.85rem;
    flex-shrink: 0;
    text-transform: uppercase;
}
.chat-msg.msg-staff .chat-avatar {
    background: linear-gradient(135deg, var(--apex-primary) 0%, #047857 100%);
    color: white;
}

.chat-bubble-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.chat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.75rem;
    color: var(--apex-text-muted);
    flex-wrap: wrap;
}
.chat-msg.msg-client .chat-meta { justify-content: flex-end; }
.chat-name { font-weight: 600; color: var(--apex-text); }
.chat-role {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    padding: 2px 8px;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.chat-time { color: var(--apex-text-subtle); }

.chat-bubble {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: 14px;
    padding: 12px 16px;
    color: var(--apex-text);
    font-size: 0.925rem;
    line-height: 1.55;
    word-wrap: break-word;
    box-shadow: var(--apex-shadow-sm);
    position: relative;
}
.chat-msg.msg-client .chat-bubble {
    background: var(--apex-primary);
    border-color: var(--apex-primary);
    color: white;
    border-bottom-right-radius: 4px;
}
.chat-msg.msg-staff .chat-bubble {
    border-bottom-left-radius: 4px;
}
.chat-bubble p { margin-bottom: 8px; }
.chat-bubble p:last-child { margin-bottom: 0; }
.chat-bubble code {
    background: rgba(0,0,0,0.06);
    color: inherit;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}
.chat-msg.msg-client .chat-bubble code { background: rgba(255,255,255,0.18); }
.chat-bubble a {
    color: inherit;
    text-decoration: underline;
}
.chat-bubble pre {
    background: rgba(0,0,0,0.05);
    padding: 10px 12px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 0.85em;
    margin: 8px 0;
}
.chat-msg.msg-client .chat-bubble pre { background: rgba(255,255,255,0.15); }
.chat-bubble blockquote {
    border-left: 3px solid var(--apex-border-strong);
    padding-left: 12px;
    color: var(--apex-text-muted);
    margin: 8px 0;
}
.chat-msg.msg-client .chat-bubble blockquote { border-left-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.9); }

.chat-ip {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(0,0,0,0.08);
    font-size: 0.78rem;
    color: var(--apex-text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-msg.msg-client .chat-ip {
    border-top-color: rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.85);
}
.chat-msg.msg-client .chat-ip code { background: rgba(255,255,255,0.18); }

/* Attachments inside a chat message */
.chat-attachments {
    margin-top: 4px;
    background: rgba(255,255,255,0.7);
    border: 1px solid var(--apex-border);
    border-radius: 10px;
    padding: 10px 12px;
}
.chat-msg.msg-client .chat-attachments {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.25);
}
.chat-attachments-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--apex-text-muted);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.chat-msg.msg-client .chat-attachments-label { color: rgba(255,255,255,0.85); }
.chat-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.chat-attachment {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: 99px;
    font-size: 0.8rem;
    color: var(--apex-text);
    text-decoration: none !important;
    max-width: 100%;
    overflow: hidden;
    transition: all 0.15s;
}
.chat-attachment:hover {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    border-color: var(--apex-primary);
}
.chat-attachment span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.chat-attachment-removed { opacity: 0.5; cursor: not-allowed; }
.chat-msg.msg-client .chat-attachment {
    background: white;
    color: var(--apex-text);
}

/* Rating in chat */
.chat-rating { margin-top: 4px; padding: 6px 0 0; font-size: 0.85rem; }
.chat-rating .rating-label {
    color: var(--apex-text-muted);
    margin-right: 8px;
    font-size: 0.78rem;
}
.chat-rating .fa-star {
    color: var(--apex-border-strong);
    cursor: pointer;
    font-size: 0.95rem;
    transition: color 0.15s, transform 0.15s;
}
.chat-rating .fa-star.active { color: var(--apex-warning); }

/* Pick widget: stars are rendered DOM-order 5..1, displayed visually 1..5
   via row-reverse — that lets the general sibling selector (~) light up
   stars positioned to the left of the hovered one. */
.chat-rating-pick {
    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 3px;
}
.chat-rating-pick .fa-star:hover,
.chat-rating-pick .fa-star:hover ~ .fa-star { color: var(--apex-warning); }

/* Our rating wrapper carries the `.ticket-reply` class to satisfy the
   WHMCS scripts.js click selector (.ticket-reply .rating span.star).
   But .ticket-reply elsewhere in this CSS is styled as a full card —
   undo that here so the rating sits inline without a white box. */
.chat-rating.ticket-reply {
    background: transparent;
    border: 0;
    padding: 0;
    margin: 4px 0 0;
    overflow: visible;
    border-radius: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.chat-rating .rating-done-label {
    margin-left: 8px;
    color: var(--apex-text-muted);
    font-size: 0.78rem;
}

/* Composer (reply form pinned below thread) */
.ticket-chat-composer.card { margin-bottom: 0; }
.composer-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--apex-text);
}
.composer-bottom {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.composer-attach {
    flex: 1;
    min-width: 0;
}
.composer-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.75rem;
}
.composer-submit { flex-shrink: 0; }
.composer-submit .btn { padding: 12px 24px; font-size: 1rem; }

@media (max-width: 575.98px) {
    .chat-msg { max-width: 95%; }
    .ticket-chat-thread { padding: 14px; max-height: 60vh; }
    .composer-bottom { flex-direction: column; }
    .composer-submit { width: 100%; }
    .composer-submit .btn { width: 100%; }
}

/* =========================================================
   bootstrap-markdown editor (WHMCS uses jQuery.markdown(),
   the bootstrap-markdown plugin) — wraps our textarea into:
     .md-editor
       .md-header.btn-toolbar
         .btn-group > button(s)
         .md-controls > a.md-control-fullscreen
       textarea.md-input.markdown-editor
       .md-footer > .markdown-editor-status
       .md-fullscreen-controls > a.exit-fullscreen
   The plugin ships no CSS in the WHMCS bundle, so we restyle
   it inline with the rest of the theme. */
.md-editor {
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    background: white;
    overflow: hidden;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.md-editor:focus-within {
    border-color: var(--apex-primary);
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
}
.md-editor.active { outline: 0; }

.md-editor .md-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 8px 10px;
    background: var(--apex-surface-2);
    border-bottom: 1px solid var(--apex-border);
    margin: 0;
}
.md-editor .md-header .btn-group {
    display: inline-flex;
    margin-right: 4px;
}
.md-editor .md-header .btn-group > .btn {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--apex-text-muted) !important;
    border-radius: var(--apex-radius) !important;
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    line-height: 1 !important;
    height: auto !important;
    min-width: 32px;
    box-shadow: none !important;
}
.md-editor .md-header .btn-group > .btn:hover,
.md-editor .md-header .btn-group > .btn.active {
    background: white !important;
    border-color: var(--apex-border) !important;
    color: var(--apex-primary) !important;
}
.md-editor .md-header .btn-group > .btn-primary,
.md-editor .md-header .btn-group > .btn-primary:hover {
    background: var(--apex-primary) !important;
    border-color: var(--apex-primary) !important;
    color: #fff !important;
}
.md-editor .md-header .btn-group > .btn .hidden,
.md-editor .md-header .btn.hidden { display: none !important; }

/* Fullscreen control on the toolbar — push to the right */
.md-editor .md-controls {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
}
.md-editor .md-controls .md-control {
    color: var(--apex-text-muted);
    padding: 6px 8px;
    border-radius: var(--apex-radius);
    line-height: 1;
    text-decoration: none;
}
.md-editor .md-controls .md-control:hover {
    color: var(--apex-primary);
    background: white;
}

/* Textarea inside the editor */
.md-editor > textarea.md-input,
.md-editor > textarea.markdown-editor {
    width: 100%;
    border: 0 !important;
    background: white !important;
    padding: 14px 16px !important;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--apex-text);
    outline: 0 !important;
    box-shadow: none !important;
    min-height: 160px;
    resize: vertical;
    display: block;
}

/* Preview pane (when Preview toggle is on) */
.md-editor > .md-preview {
    background: white;
    padding: 14px 16px !important;
    border-top: 1px solid var(--apex-border);
    min-height: 160px;
}

/* Status footer (lines/words/saved) */
.md-editor .md-footer {
    background: var(--apex-surface-2);
    border-top: 1px solid var(--apex-border);
    padding: 6px 12px;
}
.md-editor .markdown-editor-status,
.md-editor .markdown-editor-status .small-font {
    font-size: 0.75rem;
    color: var(--apex-text-muted);
    text-align: right;
    line-height: 1.4;
}
.md-editor .markdown-editor-status .markdown-save { color: var(--apex-success); }

/* Fullscreen mode helpers */
.md-editor .md-fullscreen-controls { display: none; }
.md-editor.md-fullscreen-mode { position: fixed; inset: 0; z-index: 9999; border-radius: 0; }
.md-editor.md-fullscreen-mode > textarea.md-input { min-height: calc(100vh - 130px); }
.md-editor.md-fullscreen-mode .md-fullscreen-controls {
    display: block;
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 10000;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls .exit-fullscreen {
    color: var(--apex-text-muted);
    font-size: 1.2rem;
    text-decoration: none;
}
.md-editor.md-fullscreen-mode .md-fullscreen-controls .exit-fullscreen:hover {
    color: var(--apex-primary);
}

/* =========================================================
   intl-tel-input phone widget (WHMCS bundles an OLDER version
   that uses `.intl-tel-input` / `.country-list` class names —
   newer versions use `.iti` / `.iti__country-list`. The CSS
   linked from /assets/js/intl-tel-input/build/css/intlTelInput.min.css
   may be missing or version-mismatched on some installs, in
   which case the country list renders inline as a raw <ul>
   and pushes the input below all 200+ countries. We ship a
   minimal subset that matches WHMCS's class names so the
   widget works regardless. */
.intl-tel-input { position: relative; display: block; width: 100%; }
.intl-tel-input * { box-sizing: border-box; }
.intl-tel-input .hide   { display: none !important; }
.intl-tel-input .v-hide { visibility: hidden; }

/* The country list is positioned-absolute and HIDDEN by default —
   only the JS toggles `.hide` off when the user clicks the flag. */
.intl-tel-input .country-list {
    position: absolute;
    z-index: 1060;
    top: 100%;
    left: 0;
    margin: 4px 0 0;
    padding: 4px 0;
    list-style: none;
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius);
    box-shadow: var(--apex-shadow-lg);
    min-width: 320px;
    max-width: min(420px, 90vw);
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    text-align: left;
    font-size: 0.875rem;
    display: none;
    /* Wrap long native names so the dropdown doesn't extend off-screen. */
    white-space: normal;
}
.intl-tel-input .country-list:not(.hide) { display: block; }
.intl-tel-input .country-list .country {
    padding: 6px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.intl-tel-input .country-list .country.highlight,
.intl-tel-input .country-list .country:hover {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
}
.intl-tel-input .country-list .country .dial-code { color: var(--apex-text-muted); margin-left: 6px; }
.intl-tel-input .country-list .country-name { flex: 1; }
.intl-tel-input .country-list .divider {
    border-bottom: 1px solid var(--apex-border);
    margin: 4px 0;
    padding: 0;
}
@media (max-width: 575.98px) {
    .intl-tel-input .country-list { white-space: normal; min-width: 100%; }
}

/* Flag-container button (left side of the input) */
.intl-tel-input .flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    padding: 0;
    display: flex;
    align-items: stretch;
}
.intl-tel-input .selected-flag {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 0 10px 0 14px;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    background: transparent;
    border: 0;
    outline: 0;
    transition: color 0.12s;
}
/* Subtle hover/active hint via colour change only — NO background or
   border. Painting a grey fill made the flag area look like a separate
   square button glued onto the input, which is what the user complained
   about (square on click, input also went square on the left edge). */
.intl-tel-input.allow-dropdown .flag-container:hover .selected-flag,
.intl-tel-input.separate-dial-code .selected-flag,
.intl-tel-input.separate-dial-code .flag-container:hover .selected-flag {
    background: transparent;
}
.intl-tel-input .flag-container:hover .selected-dial-code,
.intl-tel-input .flag-container:hover .iti-arrow {
    color: var(--apex-primary);
    border-top-color: var(--apex-primary);
}
.intl-tel-input .selected-flag .iti-arrow {
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid var(--apex-text-muted);
}
.intl-tel-input .selected-flag .iti-arrow.up {
    border-top: 0;
    border-bottom: 5px solid var(--apex-text-muted);
}
.intl-tel-input.separate-dial-code .selected-dial-code {
    color: var(--apex-text);
    font-weight: 500;
    font-size: 0.9rem;
}

/* The actual <input> needs left padding to clear the flag-container */
.intl-tel-input input,
.intl-tel-input input[type=tel],
.intl-tel-input input[type=text] {
    width: 100% !important;
    padding-left: 56px !important;
}
.intl-tel-input.separate-dial-code input,
.intl-tel-input.separate-dial-code input[type=tel] {
    padding-left: 88px !important;
}
.intl-tel-input.separate-dial-code.iti-sdc-2 input { padding-left: 76px !important; }
.intl-tel-input.separate-dial-code.iti-sdc-3 input { padding-left: 86px !important; }
.intl-tel-input.separate-dial-code.iti-sdc-4 input { padding-left: 96px !important; }
.intl-tel-input.separate-dial-code.iti-sdc-5 input { padding-left: 106px !important; }

/* Without the flag sprite image, the empty flag elements would
   render as ugly grey squares — collapse them to zero so the
   selected-flag area is just "+code ▾" and the dropdown rows
   are "Country (native) +code". The .iti-flag will become
   visible automatically if intlTelInput.min.css ever loads
   (its rules are more specific). */
.iti-flag,
.intl-tel-input .iti-flag,
.intl-tel-input .country-list .flag-box {
    width: 0;
    height: 0;
    display: none;
}

/* =========================================================
   Sidebar card body — fix the strange top gap on the CC
   recipients block (it has only an <input> + <button>, no
   content to fill the natural .card-body padding evenly).
   ========================================================= */
.apex-sidebar .card-body {
    padding: 14px 18px;
    /* Match the sidebar's default font scale — without explicit size,
       descriptive text inside cards (e.g. "Добавив деньги на кредитный
       баланс…") inherits the body 1rem and visibly outsizes the rest
       of the sidebar (links/headers/items at ~0.88-0.95rem). */
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--apex-text);
}
.apex-sidebar .card-body p,
.apex-sidebar .card-body div {
    font-size: inherit;
    line-height: inherit;
}
.apex-sidebar .card-body p { margin-bottom: 8px; }
.apex-sidebar .card-body p:last-child { margin-bottom: 0; }
.apex-sidebar .card-body > .input-group:first-child,
.apex-sidebar .card-body > .form-group:first-child,
.apex-sidebar .card-body > input:first-child,
.apex-sidebar .card-body > form:first-child {
    margin-top: 0;
}

/* =========================================================
   Knowledgebase / Downloads pages
   ========================================================= */
/* Search bar — input-group with input + button. Both 44px tall. */
.kb-search-form .input-group { max-width: 100%; }
.kb-search-form .form-control { height: 44px; font-size: 0.95rem; }
.kb-search-form .btn {
    height: 44px;
    padding: 0 22px;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Category cards — flex row with icon | name+desc | count badge */
.kb-category-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    margin-bottom: 16px;
    text-decoration: none !important;
    color: var(--apex-text);
    transition: border-color 0.15s, background 0.12s;
}
.kb-category-card:hover {
    border-color: var(--apex-primary);
    background: var(--apex-bg);
    color: var(--apex-text);
}
.kb-category-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--apex-radius);
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.kb-category-info { flex: 1 1 auto; min-width: 0; }
.kb-category-name { font-weight: 600; color: var(--apex-text); font-size: 0.95rem; }
.kb-category-desc { font-size: 0.8rem; color: var(--apex-text-muted); margin-top: 2px; }
.kb-category-meta {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.kb-category-meta .badge {
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 99px;
}

/* Popular articles list inside the bottom card */
.kb-article-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px;
    padding: 14px 18px !important;
    color: var(--apex-text) !important;
    text-decoration: none !important;
    transition: background 0.12s;
}
.kb-article-item:hover { background: var(--apex-bg) !important; }
.kb-article-icon {
    color: var(--apex-text-muted);
    font-size: 1rem;
    margin-top: 2px;
    flex-shrink: 0;
}
.kb-article-body { flex: 1 1 auto; min-width: 0; }
.kb-article-title {
    font-weight: 600;
    color: var(--apex-text);
    font-size: 0.92rem;
    margin-bottom: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kb-article-snippet {
    font-size: 0.82rem;
    color: var(--apex-text-muted);
    line-height: 1.45;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
/* Edit button (.show-on-card-hover, .show-on-hover) inside KB items
   should sit vertically centred regardless of the body's variable
   height. */
.kb-article-item .btn,
.kb-category-card .btn { align-self: center; flex-shrink: 0; }

/* =========================================================
   Announcements
   ========================================================= */
.announcements-list .announcement-item {
    padding: 20px 22px;
    border-top: 1px solid var(--apex-border);
}
.announcements-list .announcement-item:first-child { border-top: 0; }
.announcement-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 8px;
    line-height: 1.3;
    color: var(--apex-text);
    /* Truncate the linked title to a single line so news rows don't
       balloon to 4 lines on long titles. The user reads the full title
       on the article view page. */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.announcement-title a { color: var(--apex-text); text-decoration: none; }
.announcement-title a:hover { color: var(--apex-primary); }
.announcement-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--apex-text-muted);
    font-size: 0.85rem;
    margin-bottom: 10px;
}
.announcement-body {
    color: var(--apex-text);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 14px;
}
.announcement-body p:last-child { margin-bottom: 0; }
.announcement-body img { max-width: 100%; height: auto; border-radius: var(--apex-radius); }
.announcement-body h1,
.announcement-body h2,
.announcement-body h3,
.announcement-body h4 {
    color: var(--apex-text);
    margin-top: 16px;
    margin-bottom: 10px;
    font-weight: 600;
}
.announcement-body h1 { font-size: 1.4rem; }
.announcement-body h2 { font-size: 1.2rem; }
.announcement-body h3 { font-size: 1.05rem; }

/* =========================================================
   Knowledgebase article view — content typography
   ========================================================= */
.kb-article-content,
.knowledgebase-article-body {
    color: var(--apex-text);
    font-size: 0.95rem;
    line-height: 1.65;
}
.kb-article-content h1,
.kb-article-content h2,
.kb-article-content h3,
.kb-article-content h4 {
    color: var(--apex-text);
    font-weight: 700;
    margin-top: 18px;
    margin-bottom: 10px;
}
.kb-article-content h1 { font-size: 1.4rem; }
.kb-article-content h2 { font-size: 1.2rem; }
.kb-article-content h3 { font-size: 1.05rem; }
.kb-article-content p { margin-bottom: 12px; }
.kb-article-content ul,
.kb-article-content ol { padding-left: 22px; margin-bottom: 12px; }

/* Network issue alert ABOVE the apex-content — it sits in
   `apex-main > network-issues-notifications` which is full-width.
   Without explicit styling it might display oddly when the user has
   the apex-grid layout below. Make it span full width edge-to-edge. */
.apex-main > .network-issue-alert,
.network-issues-notifications,
.network-issues-notifications .alert {
    margin: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* =========================================================
   Sidebar wrapper alignment — make sure the right column lines
   up with the top of the primary column. The wrapper had .mb-4
   from header.tpl which is fine for bottom, but some pages add
   a top gap visually because the first card is .card-sidebar.mb-3
   and the wrapper itself collapses margins differently than the
   primary column's first .card.
   ========================================================= */
.apex-sidebar { margin-top: 0 !important; padding-top: 0 !important; }
.apex-sidebar.mb-4 { margin-bottom: 16px !important; }
.apex-sidebar > .card:first-child,
.apex-sidebar > .card-sidebar:first-child {
    margin-top: 0 !important;
}
/* Match the right column's top to the primary column. The breadcrumb +
   page-header live ABOVE the .row, so both columns inside the row start
   from the same y. Anything that drifts the sidebar down is from .row
   align-items — already flex-start in our .apex-grid > .row rule. */
.apex-grid > .row { align-items: flex-start !important; }
.apex-grid > .row > .col-lg-4,
.apex-grid > .row > .col-xl-3 {
    padding-top: 0 !important;
}

/* =========================================================
   EasyMDE markdown editor (used in viewticket reply, support
   ticket submit, contact form, etc.) — restyle to match theme
   ========================================================= */
.EasyMDEContainer { width: 100%; }
.EasyMDEContainer .editor-toolbar {
    border: 1px solid var(--apex-border);
    border-bottom: 0;
    border-top-left-radius: var(--apex-radius-lg);
    border-top-right-radius: var(--apex-radius-lg);
    background: var(--apex-bg);
    padding: 8px 10px;
    opacity: 1;
}
.EasyMDEContainer .editor-toolbar.fullscreen { background: white; }
.EasyMDEContainer .editor-toolbar a {
    color: var(--apex-text-muted) !important;
    border-radius: var(--apex-radius);
    border: 1px solid transparent !important;
    width: 32px;
    height: 32px;
    margin: 0 1px;
    padding: 0;
    line-height: 32px;
    text-align: center;
    font-size: 0.95rem;
    transition: all 0.15s;
}
.EasyMDEContainer .editor-toolbar a:hover,
.EasyMDEContainer .editor-toolbar a.active {
    background: white !important;
    border-color: var(--apex-border) !important;
    color: var(--apex-primary) !important;
}
.EasyMDEContainer .editor-toolbar i.separator {
    border-left: 1px solid var(--apex-border);
    margin: 4px 6px;
}
.EasyMDEContainer .CodeMirror {
    border: 1px solid var(--apex-border);
    border-radius: 0 0 var(--apex-radius-lg) var(--apex-radius-lg);
    background: white;
    color: var(--apex-text);
    font-family: 'JetBrains Mono', ui-monospace, 'Consolas', monospace;
    font-size: 0.9rem;
    padding: 8px 4px;
    min-height: 160px;
}
.EasyMDEContainer .CodeMirror-cursor { border-left-color: var(--apex-primary); }
.EasyMDEContainer .editor-statusbar {
    background: var(--apex-bg);
    border: 1px solid var(--apex-border);
    border-top: 0;
    border-bottom-left-radius: var(--apex-radius-lg);
    border-bottom-right-radius: var(--apex-radius-lg);
    color: var(--apex-text-muted);
    font-size: 0.75rem;
    padding: 4px 12px;
}
.EasyMDEContainer .CodeMirror-focused {
    box-shadow: 0 0 0 3px rgba(var(--apex-primary-rgb), 0.12);
}
/* Hide the giant fullscreen icon "X" rendered as fallback when the
   action's icon font is missing. */
.editor-toolbar .fa-arrows-alt::before { content: "\f31e"; }
.editor-preview { background: white; padding: 16px; }
.editor-preview-active { background: white; }

/* ----- Misc utilities WHMCS expects ----- */
/* w-hidden: WHMCS uses this to hide DataTables before they initialize, then
   removes/overrides it via jQuery .show() (inline `display: table`). We MUST
   NOT use !important here, or .show() can't override us and the table stays
   invisible. Use plain `display: none` so any inline style wins. */
.w-hidden { display: none; }
/* But for the same reason, after DataTable init the table will be visible
   even without WHMCS removing the class — if a page never runs the init
   script (e.g. empty result set), the table simply isn't shown, which is
   fine. */

/* Sidebar list-group rows declare `display: flex` (specificity 0,2,0),
   which would otherwise beat plain `.w-hidden` (0,1,0) and leave WHMCS's
   placeholder rows like #Secondary_Sidebar-CC_Recipients-emptyTicketCCRow
   visible as empty 24px-tall flex boxes. WHMCS never calls .show() on
   sidebar items, so it's safe to bump specificity here. */
.apex-sidebar .list-group-item.w-hidden,
.apex-sidebar .sidebar-item.w-hidden { display: none; }

.text-last-updated { color: var(--apex-text-muted); font-size: 0.8rem; }
.pull-right { float: right; }
.pull-left { float: left; }

/* =========================================================
   ============== HOMEPAGE (landing) =======================
   Full-bleed sections with our theme colours/typography.
   ========================================================= */

/* On the homepage, kill the guest container constraints so sections
   can run edge-to-edge while their inner wrapper centres content. */
.apex-tpl-homepage .apex-content,
.apex-tpl-homepage .apex-content-guest {
    padding: 0 !important;
    max-width: none !important;
    width: 100% !important;
}
.apex-tpl-homepage .apex-content > .apex-grid { display: contents; }

/* Each section is a full-bleed strip; the inner wrapper centres at 1200px. */
.hp-section,
.hp-hero,
.hp-domain-section {
    width: 100%;
    padding: 72px 24px;
    background: white;
}
.hp-section-alt { background: var(--apex-bg); }
.hp-section-inner {
    /* Match the BS4 .container responsive max-widths so body content
       lines up with the guest header above (which uses .container). */
    max-width: 540px;
    margin: 0 auto;
    width: 100%;
}
@media (min-width: 768px)  { .hp-section-inner { max-width: 720px; } }
@media (min-width: 992px)  { .hp-section-inner { max-width: 960px; } }
@media (min-width: 1200px) { .hp-section-inner { max-width: 1140px; } }
.hp-section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--apex-text);
    margin: 0 0 40px;
}
.hp-section-head { text-align: center; max-width: 700px; margin: 0 auto 40px; }
.hp-section-head .hp-section-title { margin-bottom: 12px; }
.hp-section-sub { color: var(--apex-text-muted); font-size: 1.05rem; line-height: 1.6; margin: 0; }

/* ===== HERO ===== */
.hp-hero {
    padding: 80px 24px 100px;
    position: relative;
    overflow: hidden;
}
.hp-hero-inner {
    /* Match the BS4 .container responsive max-widths so the hero text
       starts on the same vertical axis as the header logo above. */
    max-width: 540px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
}
@media (min-width: 768px)  { .hp-hero-inner { max-width: 720px; } }
@media (min-width: 992px)  { .hp-hero-inner { max-width: 960px; } }
@media (min-width: 1200px) { .hp-hero-inner { max-width: 1140px; } }
.hp-hero-text { flex: 0 0 60%; max-width: 60%; min-width: 0; }
.hp-hero-map {
    position: absolute;
    right: -8%;
    top: 50%;
    transform: translateY(-50%);
    width: 60%;
    height: auto;
    opacity: 0.55;
    filter: brightness(0.4) sepia(1) hue-rotate(90deg) saturate(5) brightness(1.5);
    pointer-events: none;
    z-index: 0;
    -webkit-mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,1) 70%);
    mask-image: linear-gradient(to right, transparent 15%, rgba(0,0,0,1) 70%);
}
.hp-trustpilot {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: white;
    padding: 8px 18px;
    border-radius: 99px;
    border: 1px solid var(--apex-border);
    margin-bottom: 24px;
    text-decoration: none !important;
    transition: transform 0.15s;
}
.hp-trustpilot:hover { transform: translateY(-1px); }
.hp-trustpilot-stars { color: #00b67a; font-size: 0.95rem; }
.hp-trustpilot-text { color: var(--apex-text); font-weight: 600; font-size: 0.875rem; }
.hp-hero-title {
    font-size: 3.75rem;
    font-weight: 800;
    color: var(--apex-text);
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
}
.hp-hero-sub {
    font-size: 1.15rem;
    color: var(--apex-text-muted);
    line-height: 1.65;
    max-width: 540px;
    margin: 0 0 32px;
}
.hp-hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; }
.hp-hero-buttons .btn { padding: 14px 28px; font-size: 1rem; }

/* ===== DOMAIN SEARCH ===== */
.hp-domain-section { padding: 0 24px 32px; background: white; }
.hp-domain-card {
    max-width: 900px;
    margin: -50px auto 0;
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 32px 36px;
    position: relative;
    z-index: 5;
}
.hp-domain-title {
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 20px;
    color: var(--apex-text);
}
.hp-domain-form .form-control { height: 50px; font-size: 1rem; }
.hp-domain-form .btn { height: 50px; padding: 0 22px; font-weight: 600; }

/* ===== STATS ===== */
.hp-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 48px 32px;
}
.hp-stat { text-align: center; padding: 0 24px; position: relative; }
.hp-stat:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: var(--apex-border);
}
.hp-stat-num {
    font-size: 3rem;
    font-weight: 800;
    color: var(--apex-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    margin-bottom: 10px;
}
.hp-stat-desc {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--apex-text-muted);
    font-weight: 600;
}

/* ===== SHOWCASE (network / DC / hardware) ===== */
.hp-showcase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}
.hp-showcase-reverse { direction: rtl; }
.hp-showcase-reverse > * { direction: ltr; }
.hp-showcase-img {
    border-radius: var(--apex-radius-lg);
    overflow: hidden;
    border: 1px solid var(--apex-border);
}
.hp-showcase-img img { width: 100%; height: auto; display: block; min-height: 320px; object-fit: cover; }
.hp-showcase-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 6px 14px;
    border-radius: var(--apex-radius);
    margin-bottom: 14px;
}
.hp-showcase-title {
    font-size: 2rem;
    font-weight: 800;
    color: var(--apex-text);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.hp-showcase-desc { color: var(--apex-text-muted); font-size: 1rem; line-height: 1.7; margin: 0 0 18px; }
.hp-showcase-list { list-style: none; padding: 0; margin: 0 0 24px; }
.hp-showcase-list li {
    padding: 6px 0;
    color: var(--apex-text);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.hp-showcase-list li i { color: var(--apex-primary); font-size: 0.8rem; flex-shrink: 0; }
.hp-showcase-link {
    display: inline-flex;
    align-items: center;
    color: var(--apex-primary) !important;
    font-weight: 600;
    text-decoration: none !important;
}
.hp-showcase-link:hover { color: var(--apex-primary-hover) !important; }

/* ===== PRODUCTS ===== */
.hp-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}
.hp-product-card {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 28px 26px;
    text-decoration: none !important;
    color: var(--apex-text);
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, transform 0.15s;
}
.hp-product-card:hover {
    border-color: var(--apex-primary);
    transform: translateY(-3px);
    color: var(--apex-text);
}
.hp-product-icon {
    width: 52px;
    height: 52px;
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    border-radius: var(--apex-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 18px;
}
.hp-product-title { font-size: 1.2rem; font-weight: 700; margin: 0 0 8px; color: var(--apex-text); }
.hp-product-tagline { color: var(--apex-text-muted); font-size: 0.92rem; line-height: 1.55; margin: 0 0 20px; flex: 1; }
.hp-product-link { color: var(--apex-primary); font-weight: 600; font-size: 0.9rem; }

/* Wide domain-search tile inside the products grid — spans 2 columns
   on desktop to fill the empty grid cells. Drops to 1 column on mobile. */
.hp-domain-tile {
    grid-column: span 2;
    background: linear-gradient(135deg, var(--apex-primary-light) 0%, white 70%);
    border-color: var(--apex-primary);
    cursor: default;
}
.hp-domain-tile:hover { transform: none; }
.hp-domain-tile .hp-product-icon { background: var(--apex-primary); color: white; }
.hp-domain-tile .hp-domain-form { margin-top: 0; }
.hp-domain-tile .hp-domain-form .input-group { max-width: 100%; }
.hp-domain-tile .hp-domain-form .form-control { height: 48px; font-size: 1rem; }
.hp-domain-tile .hp-domain-form .btn { height: 48px; padding: 0 22px; font-weight: 600; }
.hp-domain-tile .hp-domain-captcha { display: flex; justify-content: center; }
@media (max-width: 991.98px) {
    .hp-domain-tile { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .hp-domain-tile .hp-domain-form .input-group {
        flex-direction: column;
        gap: 8px;
    }
    .hp-domain-tile .hp-domain-form .form-control {
        width: 100% !important;
        flex: 1 1 100% !important;
        min-width: 0 !important;
        border-radius: var(--apex-radius-lg) !important;
        margin-left: 0 !important;
    }
    .hp-domain-tile .hp-domain-form .input-group-append {
        width: 100%;
        margin-left: 0 !important;
    }
    .hp-domain-tile .hp-domain-form .input-group-append .btn {
        width: 100%;
        border-radius: var(--apex-radius-lg) !important;
        margin-left: 0 !important;
    }
}

/* ===== PANELS ===== */
.hp-panels {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.hp-panel-card {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    overflow: hidden;
    transition: transform 0.15s, border-color 0.15s;
}
.hp-panel-card:hover { transform: translateY(-4px); border-color: var(--apex-primary); }
.hp-panel-img {
    aspect-ratio: 16/10;
    background: var(--apex-surface-2);
    overflow: hidden;
    border-bottom: 1px solid var(--apex-border);
}
.hp-panel-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.hp-panel-card:hover .hp-panel-img img { transform: scale(1.04); }
.hp-panel-info { padding: 20px; text-align: center; }
.hp-panel-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--apex-primary-light);
    color: var(--apex-primary);
    border-radius: var(--apex-radius-sm);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 10px;
}
.hp-panel-title { font-size: 1.1rem; font-weight: 700; color: var(--apex-text); margin: 0; }

/* ===== FAQ ===== */
.hp-faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.hp-faq-item {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    overflow: hidden;
    transition: border-color 0.15s;
}
.hp-faq-item[open] { border-color: var(--apex-primary); }
.hp-faq-item summary {
    padding: 18px 22px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--apex-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    user-select: none;
}
.hp-faq-item summary::-webkit-details-marker { display: none; }
.hp-faq-item summary::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--apex-text-muted);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.hp-faq-item[open] summary::after { transform: rotate(45deg); color: var(--apex-primary); }
.hp-faq-item[open] summary { color: var(--apex-primary); }
.hp-faq-answer { padding: 0 22px 18px; color: var(--apex-text-muted); line-height: 1.65; font-size: 0.95rem; }

/* ===== CTA ===== */
.hp-cta {
    background: white;
    border: 1px solid var(--apex-border);
    border-radius: var(--apex-radius-lg);
    padding: 56px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hp-cta::after {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(var(--apex-primary-rgb), 0.06) 0%, transparent 70%);
    pointer-events: none;
}
.hp-cta-label {
    color: var(--apex-primary);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: 14px;
}
.hp-cta-title {
    color: var(--apex-text);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0 auto 32px;
    max-width: 700px;
    letter-spacing: -0.02em;
}
.hp-cta-buttons { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; }

/* ===== Responsive ===== */
@media (max-width: 991.98px) {
    .hp-hero-title { font-size: 2.75rem; }
    .hp-hero-text { flex: 0 0 100%; max-width: 100%; }
    .hp-hero-map { display: none; }
    .hp-stats { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
    .hp-stat:not(:last-child)::after { width: 80%; height: 1px; right: 10%; top: auto; bottom: -16px; }
    .hp-showcase { grid-template-columns: 1fr; gap: 28px; }
    .hp-showcase-reverse { direction: ltr; }
    .hp-showcase-img img { min-height: 240px; }
    .hp-showcase-title { font-size: 1.6rem; }
    .hp-panels { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
    .hp-cta-title { font-size: 1.5rem; }
    .hp-section,
    .hp-hero { padding-top: 48px; padding-bottom: 48px; }
}
@media (max-width: 575.98px) {
    .hp-hero-title { font-size: 2.2rem; }
    .hp-hero-buttons .btn { width: 100%; }
    .hp-hero-buttons { flex-direction: column; }
    .hp-domain-card { padding: 22px 18px; margin-top: -30px; }
    .hp-domain-form .input-group { flex-direction: column; }
    .hp-domain-form .input-group-append { width: 100%; }
    .hp-domain-form .btn { width: 100%; border-radius: var(--apex-radius-lg) !important; }
    .hp-cta-buttons .btn { width: 100%; }
}

/* =========================================================
   Public footer (guest pages — landing + KB + downloads + ...)
   ========================================================= */
.apex-public-footer {
    background: white;
    border-top: 1px solid var(--apex-border);
    padding: 56px 0 24px;
    margin-top: auto;
}
.apex-public-footer-inner {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 24px;
}
.apex-public-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
    padding-bottom: 40px;
}

/* Brand column */
.apex-pf-col { min-width: 0; }
.apex-pf-brand .apex-pf-logo {
    display: inline-block;
    margin-bottom: 18px;
    text-decoration: none !important;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.apex-pf-brand .apex-pf-logo img { max-height: 32px; display: block; }
.apex-pf-brand .apex-pf-logo .logo-apex { color: var(--apex-primary); }
.apex-pf-brand .apex-pf-logo .logo-nodes { color: var(--apex-text); }
.apex-pf-desc {
    color: var(--apex-text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 320px;
    margin: 0 0 18px;
}

/* Locale toggle button */
.apex-pf-locale {
    display: inline-flex;
    align-items: center;
    background: var(--apex-surface-2);
    color: var(--apex-text-muted);
    border: 0;
    border-radius: var(--apex-radius);
    padding: 8px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.apex-pf-locale:not([disabled]):hover {
    background: var(--apex-primary);
    color: white;
}
.apex-pf-locale[disabled] { cursor: default; opacity: 0.7; }

/* Socials row */
.apex-pf-socials {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}
.apex-pf-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--apex-surface-2);
    color: var(--apex-text-muted);
    border-radius: var(--apex-radius);
    font-size: 1rem;
    text-decoration: none !important;
    transition: background 0.12s, color 0.12s;
}
.apex-pf-social:hover {
    background: var(--apex-primary);
    color: white;
}

/* Heading + link list */
.apex-pf-heading {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--apex-text);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 18px;
}
.apex-pf-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.apex-pf-links li { line-height: 1.4; }
.apex-pf-links a {
    color: var(--apex-text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.12s;
}
.apex-pf-links a:hover { color: var(--apex-primary); }

/* Bottom bar */
.apex-public-footer-bottom {
    border-top: 1px solid var(--apex-border);
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: var(--apex-text-subtle);
    font-size: 0.8rem;
}
.apex-public-footer-bottom p { margin: 0; }

/* Responsive */
@media (max-width: 991.98px) {
    .apex-public-footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
    .apex-pf-brand { grid-column: 1 / -1; }
}
@media (max-width: 575.98px) {
    .apex-public-footer-grid { grid-template-columns: 1fr; }
    .apex-public-footer { padding-top: 40px; }
    .apex-public-footer-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
}