/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ============================================================
   BIT01: Dark-theme override for client-area stat tiles
   Targets the 4 count cards (Services / Domains / Tickets / Invoices)
   rendered by clientareahome.tpl .tiles > .tile
   ============================================================ */
.tiles .tile {
    background-color: rgb(18, 22, 30) !important;      /* elevated dark surface */
    color: rgb(230, 232, 235) !important;              /* light body text */
    border: 1px solid rgb(45, 55, 72) !important;      /* subtle border */
    transition: background-color 120ms ease, transform 120ms ease;
}

.tiles .tile:hover {
    background-color: rgb(26, 32, 44) !important;
    transform: translateY(-1px);
    text-decoration: none;
}

.tiles .tile i.fas,
.tiles .tile i.fal,
.tiles .tile i.far {
    color: rgb(160, 174, 192) !important;              /* icons: muted light gray */
}

.tiles .tile .stat {
    color: rgb(16, 185, 129) !important;               /* keep the emerald accent for the big number */
}

.tiles .tile .title {
    color: rgb(160, 174, 192) !important;              /* label: muted light */
    letter-spacing: 0.02em;
}

/* Colored highlight underlines — keep the accent bars vivid on dark */
.tiles .tile .highlight {
    opacity: 1 !important;
}

/* ============================================================
   BIT01: Dark-theme override for DataTables (invoice list, etc.)
   Targets .dataTables_wrapper — search box, table borders,
   pagination buttons, length selector.
   ============================================================ */

/* Wrapper + table borders */
.dataTables_wrapper .table,
.dataTables_wrapper table.dataTable,
.dataTables_wrapper .table-responsive {
    border-color: rgb(45, 55, 72) !important;
    background-color: transparent !important;
    color: rgb(230, 232, 235) !important;
}

.dataTables_wrapper table.dataTable thead th,
.dataTables_wrapper table.dataTable thead td {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
    border-bottom-color: rgb(45, 55, 72) !important;
}

.dataTables_wrapper table.dataTable tbody tr {
    background-color: transparent !important;
    color: rgb(230, 232, 235) !important;
    border-color: rgb(45, 55, 72) !important;
}

.dataTables_wrapper table.dataTable tbody tr:hover {
    background-color: rgb(26, 32, 44) !important;
}

.dataTables_wrapper table.dataTable tbody td {
    border-top-color: rgb(45, 55, 72) !important;
}

/* Sort arrows (up/down triangles in header) */
.dataTables_wrapper table.dataTable thead .sorting:before,
.dataTables_wrapper table.dataTable thead .sorting:after,
.dataTables_wrapper table.dataTable thead .sorting_asc:before,
.dataTables_wrapper table.dataTable thead .sorting_asc:after,
.dataTables_wrapper table.dataTable thead .sorting_desc:before,
.dataTables_wrapper table.dataTable thead .sorting_desc:after {
    color: rgb(160, 174, 192) !important;
    opacity: 0.6;
}

/* Search box (top right) */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input[type="search"] {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-radius: 6px;
}

.dataTables_wrapper .dataTables_filter input::placeholder {
    color: rgb(120, 130, 148) !important;
}

/* Length menu (Show 10 entries dropdown) */
.dataTables_wrapper .dataTables_length select {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-radius: 6px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_info {
    color: rgb(160, 174, 192) !important;
}

/* Pagination — Previous / 1 / 2 / 3 / … / Next buttons */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background-color: rgb(18, 22, 30) !important;
    background-image: none !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background-color: rgb(16, 185, 129) !important;
    border-color: rgb(16, 185, 129) !important;
    color: rgb(10, 14, 20) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background-color: rgb(26, 32, 44) !important;
    background-image: none !important;
    color: rgb(230, 232, 235) !important;
    border-color: rgb(45, 55, 72) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(90, 100, 118) !important;
    border-color: rgb(45, 55, 72) !important;
}

/* ============================================================
   BIT01 v2: WHMCS 9.0 uses Bootstrap pagination (.page-link)
   and .form-control for the search box — target those.
   Also tone down the current-page pill.
   ============================================================ */

/* ---- Search box (DataTables filter uses .form-control in twenty-one) ---- */
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_filter input.form-control,
.dataTables_wrapper .dataTables_filter .form-control,
.dataTables_filter input[type="search"] {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    box-shadow: none !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: rgb(16, 185, 129) !important;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* ---- Bootstrap pagination (Previous / 1 / 2 / … / Next) ---- */
.pagination .page-link,
.dataTables_wrapper .pagination .page-link {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
}

.pagination .page-link:hover,
.dataTables_wrapper .pagination .page-link:hover {
    background-color: rgb(26, 32, 44) !important;
    color: rgb(230, 232, 235) !important;
    border-color: rgb(45, 55, 72) !important;
    text-decoration: none;
}

/* Current page — muted so it does not scream */
.pagination .page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: rgb(45, 55, 72) !important;
    color: rgb(230, 232, 235) !important;
    border-color: rgb(45, 55, 72) !important;
    font-weight: 600;
}

/* Disabled (Previous when on page 1) */
.pagination .page-item.disabled .page-link,
.dataTables_wrapper .pagination .page-item.disabled .page-link {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(90, 100, 118) !important;
    border-color: rgb(45, 55, 72) !important;
}

/* ============================================================
   BIT01 v3: sidebar count badges + search input icon
   ============================================================ */

/* Sidebar count badges (Bootstrap .badge inside sidebar-menu-item) */
.sidebar-menu-item-badge .badge,
.sidebar .badge,
.sidebar-menu-item .badge,
.side-menu .badge,
.sidebar-menu .badge {
    background-color: rgb(45, 55, 72) !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    box-shadow: none !important;
    font-weight: 600;
}

/* Remove native browser search input decoration (the little magnifying glass square) */
.dataTables_filter input[type="search"]::-webkit-search-decoration,
.dataTables_filter input[type="search"]::-webkit-search-cancel-button,
.dataTables_filter input[type="search"]::-webkit-search-results-button,
.dataTables_filter input[type="search"]::-webkit-search-results-decoration {
    -webkit-appearance: none;
    appearance: none;
    display: none;
}

/* Some browsers show a magnifying-glass background image on search inputs — kill it */
.dataTables_filter input[type="search"] {
    background-image: none !important;
}

/* BIT01 v4: hide "View Available Addons" sidebar item (Option B fallback) */
.sidebar-menu-item a[href*="cart.php?gid=addons"],
.sidebar-menu-item a[href*="cart.php?a=add&aid="],
.sidebar-menu-item a[href*="cart.php?a=addons"],
.sidebar-menu-item a[href*="cart.php?a=addon"],
.sidebar-menu-item a[href*="upgrade.php?type=configoptions"],
.side-menu a[href*="cart.php?gid=addons"],
.side-menu a[href*="cart.php?a=addon"],
a[href*="cart.php?gid=addons"].list-group-item,
a[href*="cart.php?a=addon"].list-group-item {
    display: none !important;
}

/* ============================================================
   BIT01 v5: distinguish the WHMCS client-area primary nav from
   the embedded tomotechi.com marketing header above it.
   Approach: slightly lighter background + subtle emerald top rule.
   ============================================================ */
.main-navbar-wrapper {
    background-color: rgb(22, 27, 38) !important;      /* one step lighter than #0a0e14 body */
    border-top: 1px solid rgba(16, 185, 129, 0.35) !important;   /* thin emerald seam */
    border-bottom: 1px solid rgb(45, 55, 72) !important;
}

/* Slightly brighten the primary nav link labels so they pop against the lighter bg */
.main-navbar-wrapper .navbar-nav .nav-link,
.main-navbar-wrapper .navbar-nav > li > a {
    color: rgb(230, 232, 235) !important;
}

.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav > li > a:hover {
    color: rgb(16, 185, 129) !important;               /* emerald hover matches Client Login link on top nav */
}

/* Active/current section — subtle emerald underline */
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li > a.active {
    color: rgb(16, 185, 129) !important;
    box-shadow: inset 0 -2px 0 rgb(16, 185, 129);
}

/* ============================================================
   BIT01 v6: FIX — navbar background + non-purple seam
   Bootstraps

/* BIT01 v6 - navbar bg + solid seam */
.navbar.main-navbar-wrapper,
div.main-navbar-wrapper,
.main-navbar-wrapper.navbar {
    background-color: rgb(22, 27, 38) !important;
    background-image: none !important;
    border-top: 2px solid rgb(16, 185, 129) !important;
    border-bottom: 1px solid rgb(45, 55, 72) !important;
}

.main-navbar-wrapper > .container,
.main-navbar-wrapper > .container-fluid {
    background-color: transparent !important;
}

/* BIT01 v7 - stronger navbar selectors + emerald active buttons */

/* Layer up specificity on the primary nav wrapper. */
body .main-navbar-wrapper,
body div.main-navbar-wrapper,
body nav.main-navbar-wrapper,
body .navbar.navbar-expand-xl.main-navbar-wrapper,
html body .main-navbar-wrapper {
    background-color: rgb(22, 27, 38) !important;
    background-image: none !important;
    border-top: 2px solid rgb(16, 185, 129) !important;
    border-bottom: 1px solid rgb(45, 55, 72) !important;
}

/* Active page in pagination - match Update button emerald */
.pagination .page-item.active .page-link,
.dataTables_wrapper .pagination .page-item.active .page-link {
    background-color: rgb(16, 185, 129) !important;
    color: rgb(10, 14, 20) !important;
    border-color: rgb(16, 185, 129) !important;
    font-weight: 700;
}

/* Currently-selected sidebar nav item / active tab / current link state - emerald */
.main-navbar-wrapper .navbar-nav > li.active > a,
.main-navbar-wrapper .navbar-nav > li > a.active,
.list-group-item.active,
.nav-tabs .nav-link.active,
.nav-pills .nav-link.active {
    background-color: rgb(16, 185, 129) !important;
    color: rgb(10, 14, 20) !important;
    border-color: rgb(16, 185, 129) !important;
    box-shadow: none;
}

/* BIT01 v8 - widen the WHMCS nav container to match tomotechi.com nav width */
.main-navbar-wrapper .container,
.main-navbar-wrapper > .container {
    max-width: none !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* BIT01 v9 - more aggressive nav width match */
body .navbar.main-navbar-wrapper,
body .navbar.navbar-expand-xl.main-navbar-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

body .navbar.main-navbar-wrapper > .container,
body .navbar.main-navbar-wrapper > div.container,
body .navbar.navbar-expand-xl.main-navbar-wrapper > .container,
html body .main-navbar-wrapper > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Also match the top strip (with logo/cart) so both WHMCS navbars line up */
body .navbar.navbar-light > .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

/* BIT01 v10 - EXACT match to tomotechi.com marketing header container */
body .navbar.main-navbar-wrapper > .container,
body .navbar.navbar-expand-xl.main-navbar-wrapper > .container,
body .navbar.navbar-light > .container,
html body .main-navbar-wrapper > .container {
    max-width: 1200px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
}

body .navbar.main-navbar-wrapper,
body .navbar.navbar-light {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* BIT01 v11 - Make ALL client-area containers use marketing 1200px column */
body .container,
body main .container,
body .navbar .container,
body div.container,
html body .container {
    max-width: 1200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* BIT01 v12 - three fixes: nav left align, matching greens, smaller product image */

/* 1) Zero out padding on the inner nav elements so Home aligns exactly to container left edge */
body #mainNavbar,
body .main-navbar-wrapper .navbar-collapse,
body .main-navbar-wrapper #nav,
body .main-navbar-wrapper .navbar-nav {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
}
body .main-navbar-wrapper .navbar-nav > li:first-child > a,
body .main-navbar-wrapper #nav > li:first-child > a {
    padding-left: 0 !important;
}

/* 2) ACTIVE bar / btn-success / bg-success - normalize all green states to emerald */
.bg-success,
.badge-success,
.btn-success,
.alert-success,
.text-success,
.progress-bar-success {
    background-color: rgb(16, 185, 129) !important;
    border-color: rgb(16, 185, 129) !important;
    color: rgb(10, 14, 20) !important;
}
.text-success {
    background-color: transparent !important;
    color: rgb(16, 185, 129) !important;
}
.btn-success:hover,
.btn-success:focus {
    background-color: rgb(6, 148, 100) !important;
    border-color: rgb(6, 148, 100) !important;
}

/* 3) Halve the giant product-image circle on service detail page */
.product-image,
.product-hero-image,
.product-details .product-image,
.card-product img,
.product-image-container,
.icon-container.product,
.service-hero .icon-container {
    max-width: 50% !important;
    max-height: 50% !important;
    width: auto !important;
    height: auto !important;
}
.product-image i,
.product-image-container i {
    font-size: 4rem !important;
}
/* Also shrink oversized circles by wrapper */
.card > .card-body > .icon-container,
.product-icon-large {
    transform: scale(0.5);
    transform-origin: center;
}

/* BIT01 v13 - shrink giant product-status icon (fa-stack in product-icon) by ~half */
.product-icon .fa-stack,
.product-status .product-icon .fa-stack,
.product-status .fa-stack {
    font-size: 3.5rem !important;
    width: auto !important;
    height: auto !important;
    line-height: 1 !important;
}

/* If the theme forces a larger dimension via specific rules, blanket-cap the icon area */
.product-status,
.product-status-active,
.product-status .product-icon {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}

.product-icon h3,
.product-icon h4 {
    margin-top: 0.5rem !important;
}

/* BIT01 v14 - condense product-details layout: one-row card header, pill status, dense right column */

/* --- LEFT column: compact product-status card --- */
.product-status {
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    padding: 0.75rem 1rem !important;
    background-color: rgb(18, 22, 30) !important;
    border-radius: 6px;
    border-left: 4px solid rgb(16, 185, 129);
    margin-bottom: 0.75rem !important;
}
.product-status-active     { border-left-color: rgb(16, 185, 129); }
.product-status-suspended  { border-left-color: rgb(234, 179, 8); }
.product-status-terminated,
.product-status-cancelled  { border-left-color: rgb(220, 38, 38); }
.product-status-pending    { border-left-color: rgb(59, 130, 246); }

.product-status .product-icon {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    flex: 1 1 auto !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

.product-icon .fa-stack {
    font-size: 1rem !important;
    width: 2em !important;
    height: 2em !important;
    line-height: 2em !important;
    flex: 0 0 auto !important;
}
.product-icon .fa-stack .fa-stack-2x {
    color: rgb(45, 55, 72);
}
.product-icon .fa-stack .fa-stack-1x {
    color: rgb(230, 232, 235) !important;
}

.product-icon h3 {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}
.product-icon h4 {
    font-size: 0.8rem !important;
    color: rgb(160, 174, 192) !important;
    font-weight: 400 !important;
    margin: 0 !important;
    display: block !important;
    line-height: 1.2 !important;
}

/* Status text becomes a small right-aligned pill instead of a full bar */
.product-status-text {
    background-color: rgb(16, 185, 129) !important;
    color: rgb(10, 14, 20) !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
.product-status-suspended .product-status-text  { background-color: rgb(234, 179, 8) !important; }
.product-status-terminated .product-status-text,
.product-status-cancelled .product-status-text  { background-color: rgb(220, 38, 38) !important; color: rgb(255,255,255) !important; }
.product-status-pending .product-status-text    { background-color: rgb(59, 130, 246) !important; color: rgb(255,255,255) !important; }

/* --- Action buttons: horizontal, compact, not full-width --- */
.product-actions-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    margin: 0 0 0.75rem 0 !important;
}
.product-actions-wrapper > [class*='col-'] {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.product-actions-wrapper .btn,
.product-actions-wrapper .btn.btn-block {
    display: inline-flex !important;
    width: auto !important;
    padding: 0.35rem 0.9rem !important;
    font-size: 0.85rem !important;
    align-items: center !important;
    gap: 0.4rem !important;
}

/* --- RIGHT column: label/value pairs made dense --- */
.product-details .col-md-6.text-center {
    text-align: left !important;
    padding-left: 1.5rem !important;
    border-left: 1px solid rgb(45, 55, 72);
}
.product-details .col-md-6.text-center h4 {
    font-size: 0.72rem !important;
    color: rgb(160, 174, 192) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
    font-weight: 500 !important;
    margin: 0.5rem 0 0.1rem 0 !important;
    line-height: 1.2 !important;
}
.product-details .col-md-6.text-center h4:first-of-type {
    margin-top: 0 !important;
}
/* The value text is a bare text node right after each h4 — style its container line-height */
.product-details .col-md-6.text-center {
    line-height: 1.4 !important;
    font-size: 0.95rem !important;
}

/* BIT01 v15 - kill the icon circle entirely, tighten remaining layout */
.product-icon .fa-stack,
.product-status .product-icon .fa-stack,
.product-status .fa-stack {
    display: none !important;
}

/* Now that icon is gone, name/group can flex normally with the status pill */
.product-status {
    padding: 0.6rem 0.9rem !important;
}
.product-icon h3 {
    font-size: 1rem !important;
    display: inline !important;
    margin-right: 0.5rem !important;
}
.product-icon h4 {
    font-size: 0.85rem !important;
    display: inline !important;
    color: rgb(160, 174, 192) !important;
    font-weight: 400 !important;
}

/* BIT01 v16 - Nuke the icon circle for ALL service types + style verify alert if it appears */

/* Aggressive fa-stack hide - many possible parent contexts */
.card-body .product-details .fa-stack,
.card-body .product-status .fa-stack,
.card-body .product-status .product-icon .fa-stack,
.card .product-icon .fa-stack,
.card .product-icon span.fa-stack,
.tab-pane .product-icon .fa-stack,
.product-details .fa-stack {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    font-size: 0 !important;
}

/* Verify-email alert (Please check your email and follow the link to verify) */
.email-verify-notice,
.email-verification-alert,
.alert-email-verify,
.alert-verify-email,
#emailVerificationAlert,
.emailVerifyRequired {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(234, 179, 8) !important;
    color: rgb(230, 232, 235) !important;
    border-radius: 6px;
}
.email-verify-notice .btn,
.email-verification-alert .btn,
#emailVerificationAlert .btn {
    background-color: rgb(234, 179, 8) !important;
    color: rgb(10, 14, 20) !important;
    border-color: rgb(234, 179, 8) !important;
}

/* BIT01 v17 - correct verify-email banner styling */
.verification-banner,
.verification-banner.email-verification {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(234, 179, 8) !important;
    border-left: 4px solid rgb(234, 179, 8) !important;
    color: rgb(230, 232, 235) !important;
    border-radius: 6px;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1rem;
}
.verification-banner .fa-exclamation-triangle {
    color: rgb(234, 179, 8) !important;
    margin-right: 0.5rem;
}
.verification-banner .btn,
.verification-banner .btn.btn-default {
    background-color: rgb(234, 179, 8) !important;
    color: rgb(10, 14, 20) !important;
    border-color: rgb(234, 179, 8) !important;
    font-weight: 600;
}
.verification-banner .btn:hover {
    background-color: rgb(202, 138, 4) !important;
    border-color: rgb(202, 138, 4) !important;
}
.verification-banner .close,
.verification-banner button.close {
    color: rgb(160, 174, 192) !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}
.verification-banner .close:hover {
    color: rgb(230, 232, 235) !important;
    opacity: 1 !important;
}

/* BIT01 v18 - hide My Quotes sidebar item */
.sidebar-menu-item a[href*="clientarea.php?action=quotes"],
.sidebar-menu-item a[href*="quotes.php"],
.side-menu a[href*="action=quotes"],
a[href*="clientarea.php?action=quotes"].list-group-item,
li a[href*="action=quotes"] {
    display: none !important;
}
/* Also hide the parent li if it wraps only that link */
.sidebar-menu-item:has(> a[href*="action=quotes"]) {
    display: none !important;
}

/* BIT01 v19 - kill gradients on ALL status badges/labels, flat emerald + solid red */
.label,
.label-success, .label-danger, .label-warning, .label-info, .label-default,
.badge, .badge-success, .badge-danger, .badge-warning, .badge-info, .badge-secondary,
span.label, span.badge, .table .label, .table .badge,
.dataTables_wrapper .label, .dataTables_wrapper .badge {
    background-image: none !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.2rem 0.6rem !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
}
.label-success, .badge-success,
.badge.badge-success, span.label-success, .table span.label-success {
    background-color: rgb(16, 185, 129) !important;
    color: rgb(10, 14, 20) !important;
}
.label-danger, .badge-danger,
.badge.badge-danger, span.label-danger, .table span.label-danger {
    background-color: rgb(220, 38, 38) !important;
    color: rgb(255, 255, 255) !important;
}
.label-warning, .badge-warning,
.badge.badge-warning, span.label-warning {
    background-color: rgb(234, 179, 8) !important;
    color: rgb(10, 14, 20) !important;
}
.label-info, .badge-info,
.badge.badge-info, span.label-info {
    background-color: rgb(59, 130, 246) !important;
    color: rgb(255, 255, 255) !important;
}
.label-default, .badge-secondary,
.badge.badge-secondary, span.label-default {
    background-color: rgb(45, 55, 72) !important;
    color: rgb(230, 232, 235) !important;
}

/* BIT01 v20 - WHMCS-specific .status-Xxx classes on invoice/service tables */
.label.status,
span.label.status,
.status-label {
    background-image: none !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    text-shadow: none !important;
    border: none !important;
    border-radius: 4px !important;
    padding: 0.25rem 0.65rem !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
    display: inline-block !important;
}

/* Paid / Active / Completed - emerald */
.label.status.status-Paid,
.label.status.status-Active,
.label.status.status-Completed,
.status-label.status-Paid,
.status-label.status-Active,
span.label.status-Paid,
span.label.status-Active {
    background-color: rgb(16, 185, 129) !important;
    background-image: none !important;
    color: rgb(10, 14, 20) !important;
}

/* Unpaid / Overdue / Terminated / Failed / Cancelled - red */
.label.status.status-Unpaid,
.label.status.status-Overdue,
.label.status.status-Terminated,
.label.status.status-Failed,
.label.status.status-Cancelled,
.status-label.status-Unpaid,
span.label.status-Unpaid,
span.label.status-Overdue,
span.label.status-Terminated {
    background-color: rgb(220, 38, 38) !important;
    background-image: none !important;
    color: rgb(255, 255, 255) !important;
}

/* Pending / Draft - blue */
.label.status.status-Pending,
.label.status.status-Draft,
.status-label.status-Pending,
span.label.status-Pending {
    background-color: rgb(59, 130, 246) !important;
    background-image: none !important;
    color: rgb(255, 255, 255) !important;
}

/* Refunded / Suspended / Collections - gold */
.label.status.status-Refunded,
.label.status.status-Suspended,
.label.status.status-Collections,
.status-label.status-Refunded,
.status-label.status-Suspended,
span.label.status-Refunded,
span.label.status-Suspended {
    background-color: rgb(234, 179, 8) !important;
    background-image: none !important;
    color: rgb(10, 14, 20) !important;
}

/* BIT01 v21 - contacts page blue accent bar + form focus ring */

/* Any highlight/accent panel/well with blue border - retint to slate */
.panel.panel-primary,
.card.border-primary,
.well.well-primary,
.panel-info,
.card.border-info,
.alert-primary,
.alert-info {
    border-color: rgb(45, 55, 72) !important;
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
}

/* Highlighted top action bar on Contacts page - looks like a well/card with a blue outline */
.contact-choose,
.choose-contact,
.form-group.highlight,
.card.card-primary,
.form-primary {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-radius: 6px;
}

/* Any generic blue border (5px solid rgb(59,130,246), or Bootstrap primary) - retint */
[style*='border-color: rgb(59, 130, 246)'],
[style*='border-color: #3b82f6'],
[style*='border: 1px solid #3b82f6'],
[style*='border: 1px solid rgb(59, 130, 246)'] {
    border-color: rgb(45, 55, 72) !important;
}

/* All form inputs on client-area pages - consistent dark theme */
.form-control,
input.form-control,
select.form-control,
textarea.form-control,
input[type='text'],
input[type='email'],
input[type='tel'],
input[type='number'],
select {
    background-color: rgb(18, 22, 30) !important;
    color: rgb(230, 232, 235) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    box-shadow: none !important;
}
.form-control:focus,
input.form-control:focus,
select.form-control:focus,
textarea.form-control:focus {
    background-color: rgb(18, 22, 30) !important;
    border-color: rgb(16, 185, 129) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    color: rgb(230, 232, 235) !important;
}
.form-control::placeholder {
    color: rgb(120, 130, 148) !important;
}
label,
.form-group label,
.control-label {
    color: rgb(160, 174, 192) !important;
    font-weight: 500 !important;
}

/* BIT01 v22 - .alert.alert-block.alert-info wrapper on Contacts page */
.alert.alert-info,
.alert.alert-block.alert-info,
div.alert.alert-info,
body .alert-info {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-left: 4px solid rgb(16, 185, 129) !important;
    color: rgb(230, 232, 235) !important;
}
.alert.alert-info .form-control,
.alert.alert-info label,
.alert.alert-info .col-form-label {
    color: rgb(230, 232, 235) !important;
}
.alert.alert-warning,
.alert.alert-block.alert-warning {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-left: 4px solid rgb(234, 179, 8) !important;
    color: rgb(230, 232, 235) !important;
}
.alert.alert-danger,
.alert.alert-block.alert-danger {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-left: 4px solid rgb(220, 38, 38) !important;
    color: rgb(230, 232, 235) !important;
}
.alert.alert-success,
.alert.alert-block.alert-success {
    background-color: rgb(18, 22, 30) !important;
    border: 1px solid rgb(45, 55, 72) !important;
    border-left: 4px solid rgb(16, 185, 129) !important;
    color: rgb(230, 232, 235) !important;
}

/* BIT01 v23 - hide home page Recent Support Tickets + Recent News panels */
.client-home-cards [menuItemName='Recent Support Tickets'],
.client-home-cards [menuItemName='Recent News'],
.client-home-cards [menuItemName='Recent Announcements'],
.client-home-cards div[menuItemName='Recent Support Tickets'],
.client-home-cards div[menuItemName='Recent News'] {
    display: none !important;
}