/* =====================================================================
   websitebuilder.co.za — client area theme (child of Nexus, WHMCS 9.1)
   Matches the "Fresh" website: Poppins, cobalt blue, sunshine yellow,
   warm off-white backgrounds, rounded cards and pill buttons.
   Colours: change the brand values in :root below.
   ===================================================================== */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

/* ---- Nexus base colour variables (copied from templates/nexus/css/custom.css, WHMCS 9.1).
   Needed because this theme's custom.css replaces Nexus's own. Do not delete. ---- */
: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%;
    --zinc-900: #18181b;
}

:root {
    /* Brand */
    --brand-blue: #1F4FE0;
    --brand-blue-dark: #163BAA;
    --brand-blue-deeper: #102C80;
    --brand-yellow: #FFC83D;
    --brand-yellow-soft: #FFE9A8;
    --brand-navy: #0E1530;
    --brand-cream: #F7F6F2;
    --brand-sand: #EFEDE6;
    --brand-line: #E4E2DA;
    --brand-line-strong: #CFCBBE;
    --brand-muted: #4A5170;

    /* Primary palette (Nexus reads these) */
    --primary-50: #EEF2FE;
    --primary-100: #E6ECFD;
    --primary-200: #C7D4FA;
    --primary-300: #9DB3F5;
    --primary-400: #5F84EC;
    --primary-500: #3A66E6;
    --primary-600: var(--brand-blue);
    --primary-700: var(--brand-blue-dark);
    --primary-800: var(--brand-blue-deeper);
    --primary-900: #0B1F5C;
    --primary-950: var(--brand-navy);

    --primary: var(--brand-blue);
    --primary-lifted: var(--brand-blue-dark);
    --primary-accented: var(--brand-blue-deeper);

    --secondary: var(--brand-muted);
    --secondary-lifted: #3A4160;
    --secondary-accented: var(--brand-navy);

    --info: var(--brand-blue);
    --info-lifted: var(--brand-blue-dark);
    --info-accented: var(--brand-blue-deeper);

    --success: #11803F;
    --success-lifted: #0C6A33;
    --success-accented: #095227;

    /* Neutrals: warm instead of cool grey */
    --grayscale: var(--brand-navy);
    --grayscale-lifted: #18214A;
    --grayscale-accented: #263063;

    --text: var(--brand-navy);
    --text-accented: #3A4160;
    --text-lifted: var(--brand-muted);
    --text-muted: #6B7090;

    --border-muted: var(--brand-line);
    --border: var(--brand-line-strong);
    --border-lifted: #B3AE9F;

    --bg: #FFFFFF;
    --bg-muted: var(--brand-cream);
    --bg-lifted: var(--brand-sand);
    --bg-accented: #E4E2DA;
    --bg-inverted: var(--brand-navy);

    /* Shape */
    --rounding-sm: 0.625rem;
    --rounding-md: 1rem;
    --rounding-lg: 1.375rem;

    --wb-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    --wb-shadow: 0 10px 30px rgba(14, 21, 48, 0.07);
}

/* ---------- Type ---------- */
body,
.btn, .form-control, .custom-select, .dropdown-menu, .tooltip, .popover, .table {
    font-family: var(--wb-font);
}
body { color: var(--text); background-color: var(--brand-navy); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5, .card-title {
    font-family: var(--wb-font);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text);
}
a { color: var(--brand-blue); }
a:hover { color: var(--brand-blue-dark); }
:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 2px; }

/* ---------- Header ---------- */
#header.header { background: #fff; border-bottom: 1px solid var(--brand-line); }
#header .navbar-brand .logo-img { max-height: 44px; width: auto; }
#header .main-navbar-wrapper { background: #fff; }
#header #nav > li > a,
#header .main-navbar-wrapper .navbar-nav > li > a {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--brand-navy);
    border-radius: var(--rounding-sm);
}
#header #nav > li > a:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:hover { color: var(--brand-blue); background: var(--primary-50); }
#header .search .form-control { border-radius: 999px 0 0 999px; background: var(--brand-cream); }
#header .search .btn,
#header .search .input-group-prepend .btn { border-radius: 999px 0 0 999px; background: var(--brand-cream); }
#header .cart-btn .badge { background: var(--brand-yellow); color: var(--brand-navy); font-weight: 700; }
.dropdown-menu { border: 1px solid var(--brand-line); border-radius: var(--rounding-md); box-shadow: var(--wb-shadow); padding: 0.5rem; }
.dropdown-item { border-radius: var(--rounding-sm); font-weight: 500; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--primary-50); color: var(--brand-blue); }
.dropdown-item.active, .dropdown-item:active { background: var(--brand-blue); color: #fff; }

/* ---------- Breadcrumb bar ---------- */
.master-breadcrumb { background: var(--brand-sand); border: 0; }
.master-breadcrumb .breadcrumb { background: transparent; font-size: 0.8125rem; }
.master-breadcrumb .breadcrumb a { color: var(--brand-muted); }

/* ---------- Page body ---------- */
#main-body { background: var(--brand-cream); padding-bottom: 4rem; }
.primary-content > h2.text-center { font-size: 2rem; margin-top: 3rem !important; }

/* Homepage domain search: turn it into a hero */
.home-domain-search {
    background: var(--brand-navy) !important;
    color: #fff;
    padding: 4rem 0 !important;
}
.home-domain-search h2 { color: #fff; font-size: clamp(1.75rem, 3.5vw, 2.75rem); font-weight: 800; }
.home-domain-search h2::after {
    content: "Free .co.za with every website plan";
    display: block; width: max-content; max-width: 100%;
    margin: 0.875rem auto 0; padding: 0.375rem 0.875rem;
    font-size: 0.875rem; font-weight: 700; letter-spacing: 0;
    color: var(--brand-navy); background: var(--brand-yellow); border-radius: 999px;
}
.home-domain-search .input-group-box,
.home-domain-search .input-group {
    background: #fff; border-radius: 1.125rem; padding: 0.4rem; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.home-domain-search .form-control { border: 0; font-size: 1.125rem; height: auto; padding: 0.75rem 1rem; }
.home-domain-search .form-control:focus { box-shadow: none; }
.home-domain-search .btn:not(.btn-link) { min-height: 48px; }
.home-domain-search .btn-link { color: #C7D4FA; background: none; border: 0; text-decoration: underline; padding-right: 0; }
.home-domain-search .btn-link:hover { color: #fff; transform: none; }

/* ---------- Buttons ---------- */
.btn { border-radius: 999px; font-weight: 600; padding: 0.55rem 1.25rem; transition: transform .15s ease, background-color .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-sm { padding: 0.375rem 0.875rem; }
.btn-lg { padding: 0.8rem 1.75rem; }
.btn-primary, .btn-success, .btn-info,
#btnDomainSearch, #btnDomainSearch2, #btnCompleteOrder, #checkout {
    background: var(--brand-blue); border-color: var(--brand-blue); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-success:hover, .btn-info:hover,
#btnDomainSearch:hover, #btnDomainSearch2:hover, #btnCompleteOrder:hover, #checkout:hover {
    background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); color: #fff;
}
#btnTransfer, #btnTransfer2, .btn-warning {
    background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-navy);
}
#btnTransfer:hover, #btnTransfer2:hover, .btn-warning:hover { background: #F5B70F; border-color: #F5B70F; color: var(--brand-navy); }
.btn-default, .btn-outline-primary, .btn-outline-secondary, .card .btn-default {
    background: #fff; border: 1.5px solid var(--brand-line-strong); color: var(--brand-navy);
}
.btn-default:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover {
    border-color: var(--brand-navy); background: #fff; color: var(--brand-navy);
}
#header .btn.nav-link, #header .search .btn { transform: none; }

/* Homepage search buttons (beat Nexus's #frmDomainHomepage rules) */
html body #frmDomainHomepage #btnDomainSearch, html body #frmDomainHomepage #btnDomainSearch2 { background: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
html body #frmDomainHomepage #btnDomainSearch:hover, html body #frmDomainHomepage #btnDomainSearch2:hover { background: var(--brand-blue-dark); border-color: var(--brand-blue-dark); }
html body #frmDomainHomepage #btnTransfer, html body #frmDomainHomepage #btnTransfer2 { background: var(--brand-yellow); border-color: var(--brand-yellow); color: var(--brand-navy); }
html body #frmDomainHomepage #btnTransfer:hover, html body #frmDomainHomepage #btnTransfer2:hover,
html body #frmDomainHomepage #btnTransfer:focus { background: #F5B70F; border-color: #F5B70F; color: var(--brand-navy); }

/* ---------- Cards & panels ---------- */
.card {
    border: 1px solid var(--brand-line);
    border-radius: var(--rounding-lg);
    box-shadow: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.card-columns.home .card:hover, .action-icon-btns a:hover .card, .product:hover { transform: translateY(-2px); box-shadow: var(--wb-shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--brand-line); font-weight: 700; }
.card-header:first-child { border-radius: var(--rounding-lg) var(--rounding-lg) 0 0; }
.card-footer { background: var(--brand-cream); border-top: 1px solid var(--brand-line); }
.card-footer:last-child { border-radius: 0 0 var(--rounding-lg) var(--rounding-lg); }
.card-columns.home .card-title, .card-columns.home h3 { font-size: 1.25rem; }

/* Icon tiles on the homepage ("How can we help" / "Your account") */
.action-icon-btns a { color: var(--brand-navy); font-weight: 600; }
.action-icon-btns .ico-container, .action-icon-btns i { color: var(--brand-blue); }
.action-icon-btns a:hover { text-decoration: none; color: var(--brand-blue); }

/* Sidebar (client area) */
.sidebar .card, .sidebar .panel { border-radius: var(--rounding-lg); overflow: hidden; }
.sidebar .list-group-item { border-color: var(--brand-line); font-weight: 500; }
.sidebar .list-group-item.active, .list-group-item.active { background: var(--primary-50); border-color: var(--brand-line); color: var(--brand-blue); font-weight: 600; }
.sidebar .list-group-item:hover { background: var(--brand-cream); }

/* Client area home tiles */
.tiles .tile { border-radius: var(--rounding-lg); border: 1px solid var(--brand-line); background: #fff; }
.tiles .tile .stat { font-weight: 800; letter-spacing: -0.03em; color: var(--brand-navy); }
.tiles .tile i { color: var(--primary-200); }
.tiles .tile .highlight { height: 4px; border-radius: 4px; }
.tiles .tile .highlight.bg-color-blue { background: var(--brand-blue) !important; }
.tiles .tile .highlight.bg-color-green { background: #11803F !important; }
.tiles .tile .highlight.bg-color-red { background: #E04F2B !important; }
.tiles .tile .highlight.bg-color-gold { background: var(--brand-yellow) !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select {
    border: 1.5px solid var(--brand-line-strong);
    border-radius: var(--rounding-sm);
    min-height: 44px;
}
.form-control:focus, .custom-select:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(31, 79, 224, 0.18);
}
.input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group-text { background: var(--brand-cream); border: 1.5px solid var(--brand-line-strong); }
label { font-weight: 600; }
.custom-control-input:checked ~ .custom-control-label::before { background: var(--brand-blue); border-color: var(--brand-blue); }

/* Login / register box */
.card.mw-540 { border-radius: var(--rounding-lg); box-shadow: var(--wb-shadow); }

/* ---------- Tables & labels ---------- */
.table thead th { border-bottom: 1px solid var(--brand-line); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-muted); }
.table td, .table th { border-top-color: var(--brand-line); }
.table-hover tbody tr:hover, table.dataTable tbody tr:hover { background: var(--brand-cream); }
.label, .badge, .status { border-radius: 999px; font-weight: 600; }
.status-active, .label-success, .badge-success { background: #DDF5E6 !important; color: #0C6A33 !important; }
.status-pending, .label-warning, .badge-warning { background: var(--brand-yellow-soft) !important; color: #5A3E00 !important; }
.status-suspended, .status-terminated, .status-cancelled, .label-danger, .badge-danger { background: #FDE2DA !important; color: #9A2F14 !important; }
.badge-info, .label-info { background: var(--primary-100) !important; color: var(--brand-blue-dark) !important; }

/* Invoice / quote / ticket status pills (soft colours, readable text) */
.label.status, span.status { color: #fff; }
.status-paid, .status-active, .status-completed, .status-accepted, .status-answered { background-color: #DDF5E6 !important; color: #0C6A33 !important; }
.status-unpaid, .status-overdue, .status-collections, .status-dead, .status-delivered.status-expired { background-color: #FDE2DA !important; color: #9A2F14 !important; }
.status-pending, .status-draft, .status-customer-reply, .status-in-progress, .status-on-hold { background-color: var(--brand-yellow-soft) !important; color: #5A3E00 !important; }
.status-cancelled, .status-refunded, .status-terminated, .status-closed, .status-fraud, .status-expired { background-color: #ECEAE3 !important; color: #3A4160 !important; }
.status-open { background-color: var(--primary-100) !important; color: var(--brand-blue-dark) !important; }

/* Alerts */
.alert { border-radius: var(--rounding-md); border: 1px solid transparent; }
.alert-info { background: var(--primary-50); border-color: var(--primary-200); color: var(--brand-blue-deeper); }
.alert-warning { background: #FFF6D6; border-color: var(--brand-yellow-soft); color: #5A3E00; }
.alert-success { background: #E9F8EF; border-color: #BFE8CF; color: #0C6A33; }

/* Pagination */
.page-item.active .page-link { background: var(--brand-blue); border-color: var(--brand-blue); }
.page-link { color: var(--brand-blue); border-color: var(--brand-line); }

/* ---------- Footer ---------- */
#footer.footer { background: var(--brand-navy); color: #B9C0DA; padding: 2.5rem 0; }
#footer .nav-link { color: #B9C0DA; font-weight: 500; }
#footer .nav-link:hover { color: #fff; }
#footer .copyright { color: #8E96B8; }
#footer .btn-outline-light { border-color: #3A4570; color: #fff; }
#footer .btn-outline-light:hover { background: #18214A; }

/* Keep the admin "return to admin area" tab out of the way of design */
.btn-return-to-admin { font-family: var(--wb-font); }

/* ---------- Product group pages ("premium_comparison" order form) ---------- */
body #order-premium_comparison { color: var(--brand-muted); font-family: var(--wb-font); }
body #order-premium_comparison #headline { font-family: var(--wb-font); font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; font-weight: 700; color: var(--brand-navy); letter-spacing: -0.02em; }
body #order-premium_comparison #tagline { font-size: 1.0625rem; color: var(--brand-muted); }
body #order-premium_comparison .price-table-container ul li { background: none; vertical-align: top; }
body #order-premium_comparison .price-table-container .price-table {
    background: #fff; border: 1px solid var(--brand-line); border-radius: var(--rounding-lg);
    box-shadow: none; overflow: hidden; margin-top: 0 !important;
}
body #order-premium_comparison .price-table-container .price-table .top-head {
    background: #fff; border: 0; padding: 0; box-shadow: none;
}
body #order-premium_comparison .price-table-container .price-table .top-head .top-area {
    background: none; padding: 1.75rem 1.5rem 0.25rem; border: 0;
}
body #order-premium_comparison .price-table-container .price-table .top-head .top-area h4 {
    font-family: var(--wb-font); font-weight: 700; font-size: 1.5rem; color: var(--brand-navy); text-transform: none; letter-spacing: -0.01em;
}
body #order-premium_comparison .price-table-container .price-table .top-head .price-area {
    background: none; padding: 0.5rem 1.5rem 1.5rem; border: 0;
}
body #order-premium_comparison .price-table-container .price-table .top-head .price-area .price {
    font-family: var(--wb-font); font-weight: 800; font-size: 2.25rem; line-height: 1.1; letter-spacing: -0.03em; color: var(--brand-navy);
}
body #order-premium_comparison .price-table-container .order-button,
body #order-premium_comparison .price-table-container .order-button:hover {
    display: block; margin: 1rem 0 0; padding: 0.75rem 1rem; border: 0; border-radius: 999px;
    background: var(--brand-blue); color: #fff; font-family: var(--wb-font); font-weight: 600; font-size: 1rem;
    text-shadow: none; box-shadow: none; text-transform: none;
}
body #order-premium_comparison .price-table-container .order-button:hover { background: var(--brand-blue-dark); }
body #order-premium_comparison .price-table-container .price-table ul li {
    padding: 1.25rem 1.5rem 1.5rem; border-top: 1px solid var(--brand-line); text-align: left;
    color: var(--brand-muted); font-size: 0.875rem; line-height: 1.25; display: block;
}
body #order-premium_comparison .price-table-container .price-table ul li strong { color: var(--brand-navy); }
body #order-premium_comparison .price-table-container .price-table .popular-plan {
    display: inline-block; margin: 0 1.5rem; padding: 0.25rem 0.75rem; border-radius: 999px;
    background: var(--brand-yellow); color: var(--brand-navy); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.02em;
}
/* Featured ("Most popular") plan */
body #order-premium_comparison .price-table:has(.popular-plan) { background: var(--brand-blue); border-color: var(--brand-blue); box-shadow: 0 24px 50px rgba(31, 79, 224, 0.28); }
body #order-premium_comparison .price-table:has(.popular-plan) .top-head { background: transparent; }
body #order-premium_comparison .price-table:has(.popular-plan) h4,
body #order-premium_comparison .price-table:has(.popular-plan) .price,
body #order-premium_comparison .price-table:has(.popular-plan) ul li strong { color: #fff !important; }
body #order-premium_comparison .price-table:has(.popular-plan) ul li { color: #DCE4FF; border-top-color: rgba(255,255,255,.18); }
body #order-premium_comparison .price-table:has(.popular-plan) .order-button { background: #fff; color: var(--brand-blue); }
body #order-premium_comparison .price-table:has(.popular-plan) .order-button:hover { background: var(--brand-yellow); color: var(--brand-navy); }
body #order-premium_comparison .includes-features .head-area span { font-family: var(--wb-font); background: var(--brand-cream); color: var(--brand-navy); }

/* ---------- Readability fixes (found by contrast check across all client pages) ---------- */
/* Nexus greys (#888) are too light to read on white */
.tiles .tile .title,
.client-home-cards small,
.list-group-item small, .list-group-item-action small,
#registration .field-help-text,
.store-order-container .domain-validation,
.view-ticket .posted-by,
small > span, .small-font, .markdown-editor-status, .markdown-save { color: var(--brand-muted) !important; }
.home-domain-search .tld-logos { color: #C7D4FA; }
/* Knowledgebase / downloads: Nexus colours these descriptions with a background colour (nearly invisible) */
.kb-article-item small, .kb-article-item small strong, .list-group-item small strong { color: var(--brand-muted) !important; }
/* Ticket status colours set in admin (e.g. Closed = #888888): keep readable */
.label[style*="888888"], .label[style*="#888"] { background-color: #ECEAE3 !important; color: #3A4160 !important; }
/* Switches (e.g. email preferences) */
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-success { background-color: #11803F; border-color: #11803F; color: #fff; }
.bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
.bootstrap-switch .bootstrap-switch-handle-off.bootstrap-switch-primary { background-color: var(--brand-blue); border-color: var(--brand-blue); color: #fff; }
/* Inline code (password rules) */
code { color: #B02A5B; background: transparent; }
/* Bootstrap "info" backgrounds (#17a2b8) are too light for white text */
.bg-info { background-color: var(--brand-blue) !important; }
.text-info { color: var(--brand-blue-dark) !important; }

/* ---------- Invoice page (viewinvoice.php) ---------- */
body:has(.invoice-container) { background-color: var(--brand-cream); }
.invoice-container { border-radius: var(--rounding-lg); border: 1px solid var(--brand-line); box-shadow: var(--wb-shadow); }
.invoice-container + p a, .d-print-none > a:not(.btn) { color: var(--brand-blue); font-weight: 600; }
body:has(.invoice-container) > p a, body:has(.invoice-container) .text-center.d-print-none a:not(.btn) { color: var(--brand-blue); }
.payment-btn-container input[type="submit"], .payment-btn-container input[type="image"] + input[type="submit"],
.payment-btn-container button, .payment-btn-container .btn {
    display: inline-block; margin-top: 0.5rem; padding: 0.6rem 1.4rem; border: 0; border-radius: 999px;
    background: var(--brand-blue); color: #fff; font-family: var(--wb-font); font-weight: 600; font-size: 0.9375rem; cursor: pointer;
}
.payment-btn-container input[type="submit"]:hover, .payment-btn-container button:hover { background: var(--brand-blue-dark); }
.invoice-container .unpaid, .invoice-status .unpaid { color: #C0341D; }
.invoice-container .paid, .invoice-status .paid { color: #11803F; }

@media (prefers-reduced-motion: reduce) { .btn, .card { transition: none; } .btn:hover, .card:hover { transform: none; } }