/* ==========================================================================
   GTX Dark Neon reskin for WHMCS Lagom2 (style "Futuristic")   LIVE 7 Oct 2026
   --------------------------------------------------------------------------
   Goal: the client area / store / checkout look like the Dark Neon pages on
   www.gtxgaming.co.uk (near-black, orange #ff6a00 + cyan #00e5ff accents,
   Inter 900 headings, Rajdhani uppercase nav, glow cards, dark-text orange
   buttons).
   Live: loaded by includes/hooks/gtx-dark-neon.php (fonts + this file, ?v=mtime),
   after theme-custom.css. Source: dark-neon-preview/dark-neon.css (minus @import).
   Part 1 = Lagom CSS variables (cascade into theme.css + the existing GTX
   order-form CSS, which uses var() with fallbacks).  Part 2 = targeted rules.
   Contrast: body text #d4d6e0 / muted #9b9db0 / footer #8e90a5 on #0e1016
   and on cards #171a22 all >= 4.5:1; orange buttons use dark text
   (#14161a on #ff6a00 = 6.9:1; white on that orange would fail AA).
   ========================================================================== */

/* ---------- Part 1: Lagom variables ---------- */
:root {
    /* GTX tokens */
    --dn-bg: #0e1016;
    --dn-bg-2: #12141b;
    --dn-card: #171a22;
    --dn-card-2: #1c1f29;
    --dn-line: rgba(255, 255, 255, 0.08);
    --dn-line-2: rgba(255, 255, 255, 0.14);
    --dn-orange: #ff6a00;
    --dn-orange-2: #ff9500;
    --dn-orange-text: #ff8c3a;
    --dn-orange-glow: rgba(255, 106, 0, 0.45);
    --dn-cyan: #00e5ff;
    --dn-ink: #14161a;
    --dn-text: #d4d6e0;
    --dn-muted: #9b9db0;

    --font-family-base: "Inter";

    /* greys (Futuristic uses blue-tinted hsla; make them neutral) */
    --gray-base: #d4d6e0;
    --gray-lighter: #b9bbc8;
    --gray-lighter-2: #9b9db0;
    --gray-lighter-3: rgba(255, 255, 255, 0.18);
    --gray-lighter-4: rgba(255, 255, 255, 0.10);
    --gray-faded: rgba(255, 255, 255, 0.045);
    --gray-darker: #ffffff;
    --gray-icons: #9b9db0;
    --gray-icons-hover: #ffffff;
    --gray-gradient-start: rgba(255, 255, 255, 0.06);
    --gray-gradient-end: rgba(255, 255, 255, 0.03);

    --body-bg: #0e1016;
    --futuristic-bg: none;

    /* brand: orange primary, cyan secondary/info */
    --brand-primary: #ff6a00;
    --brand-primary-lighter: #ff8a1f;
    --brand-primary-lighter-2: rgba(255, 106, 0, 0.26);
    --brand-primary-lighter-3: rgba(255, 106, 0, 0.15);
    --brand-primary-lighter-4: rgba(255, 106, 0, 0.08);
    --brand-primary-darker: #e05500;
    --brand-primary-gradient-start: #ff6a00;
    --brand-primary-gradient-end: #ff9500;
    --brand-secondary: #00e5ff;
    --brand-secondary-lighter: #66f0ff;
    --brand-secondary-darker: #00b8d4;
    --brand-secondary-gradient-start: #00b8d4;
    --brand-secondary-gradient-end: #00e5ff;
    --brand-info: #00c8e0;
    --brand-info-lighter: #66f0ff;
    --brand-info-darker: #0097b2;
    --brand-info-lighter-2: rgba(0, 229, 255, 0.24);
    --brand-info-lighter-3: rgba(0, 229, 255, 0.10);
    --brand-success-lighter-2: rgba(54, 192, 85, 0.24);
    --brand-success-lighter-3: rgba(54, 192, 85, 0.16);
    --brand-success-lighter-4: rgba(54, 192, 85, 0.10);
    --brand-warning-lighter-2: rgba(255, 170, 0, 0.26);
    --brand-warning-lighter-3: rgba(255, 170, 0, 0.16);
    --brand-warning-lighter-4: rgba(255, 170, 0, 0.10);
    --brand-danger-lighter-2: rgba(217, 38, 50, 0.28);
    --brand-danger-lighter-3: rgba(217, 38, 50, 0.18);
    --brand-danger-lighter-4: rgba(217, 38, 50, 0.12);

    /* blocks / cards */
    --ui-block-bg: linear-gradient(180deg, rgba(28, 31, 41, 0.96) 0%, rgba(22, 24, 32, 0.96) 100%);
    --ui-block-overlay-bg: #1a1d26;
    --ui-block-overlay-bg-2: #20232e;
    --ui-block-border-color: var(--dn-line);
    --ui-block-border: 1px solid var(--dn-line);
    --ui-block-border-radius: 12px;
    --ui-block-border-radius-lg: 14px;
    --ui-block-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    --ui-block-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --ui-block-divider-color: var(--dn-line);
    --ui-block-secondary-divider-border-color: var(--dn-line);
    --box-shadow-sm: 0 1px 6px rgba(0, 0, 0, 0.3);
    --box-shadow-base: 0 10px 30px rgba(0, 0, 0, 0.35);
    --box-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.45);
    --box-shadow-xlg: 0 24px 48px rgba(0, 0, 0, 0.55);

    /* text + links */
    --text-primary-color: var(--dn-orange-text);
    --text-success-color: #6fe08a;
    --text-warning-color: #ffc552;
    --text-danger-color: #ff8a92;
    --link-color: #ffffff;
    --link-hover-color: var(--dn-orange-text);

    /* buttons */
    --btn-primary-color: var(--dn-ink);
    --btn-primary-hover-color: var(--dn-ink);
    --btn-primary-hover-bg: #ff8a1f;
    --btn-primary-hover-border: #ff8a1f;
    --btn-primary-faded-color: var(--dn-orange-text);
    --btn-primary-faded-hover-color: #ffb27a;
    --btn-secondary-color: var(--dn-ink);
    --btn-secondary-hover-color: var(--dn-ink);
    --btn-default-border: rgba(255, 255, 255, 0.22);
    --btn-default-hover-border: var(--dn-orange);
    --btn-default-hover-bg: rgba(255, 106, 0, 0.08);
    --btn-base-border-radius: 8px;
    --btn-sm-border-radius: 6px;
    --btn-lg-border-radius: 8px;
    --btn-xlg-border-radius: 10px;
    --btn-light-bg: rgba(255, 255, 255, 0.06);
    --btn-light-border: rgba(255, 255, 255, 0.12);
    --btn-light-hover-bg: rgba(255, 255, 255, 0.12);
    --btn-light-hover-border: rgba(255, 255, 255, 0.2);

    /* inputs */
    --input-bg: #0b0d12;
    --input-focus-bg: #0b0d12;
    --input-border-color: rgba(255, 255, 255, 0.12);
    --input-focus-border-color: var(--dn-orange);
    --input-hover-border-color: rgba(255, 255, 255, 0.24);
    --input-color-placeholder: #8e90a5;

    /* states / labels (light tints -> dark tints with light text) */
    --state-success-text: #6fe08a;
    --state-info-text: #7cefff;
    --state-warning-text: #ffc552;
    --state-danger-text: #ff8a92;
    --label-success-color: #6fe08a;
    --label-info-color: #7cefff;
    --label-warning-color: #ffc552;
    --label-danger-color: #ff8a92;
    --label-primary-faded-color: var(--dn-orange-text);
    --label-savings-bg: rgba(255, 0, 128, 0.14);
    --label-savings-color: #ff7ab8;
    --label-savings-border: rgba(255, 0, 128, 0.4);
    --price-savings-color: #ff7ab8;
    --price-savings-background: rgba(255, 0, 128, 0.14);
    --main-header-banner-bg: linear-gradient(90deg, #1a1208 0%, #0e1016 100%);
    --main-header-banner-save-label-bg: rgba(255, 0, 128, 0.14);
    --main-header-banner-save-label-color: #ff7ab8;
    --main-header-banner-save-label-border: rgba(255, 0, 128, 0.4);
    --main-footer-bg: #12121a;
    --main-footer-border-top: 1px solid var(--dn-line);
    --main-footer-link-color: #8e90a5;
    --main-footer-link-hover-color: var(--dn-orange-text);
    --ui-nav-link-active-bg: rgba(255, 106, 0, 0.10);
    --ui-nav-link-icon-active-color: var(--dn-orange);
    --panel-accordion-hover-border-color: var(--dn-orange);
}

/* ---------- Part 2: targeted rules ---------- */

/* page background: near-black with the faint orange / cyan glows of the game pages */
body.lagom {
    background:
        radial-gradient(1100px 520px at 12% -6%, rgba(255, 106, 0, 0.10), transparent 62%),
        radial-gradient(900px 560px at 96% 4%, rgba(0, 229, 255, 0.06), transparent 60%),
        #0e1016 !important;
    background-attachment: fixed !important;
    color: var(--dn-text);
    font-family: "Inter", "Figtree", sans-serif;
}
body.lagom .app-main,
body.lagom .site,
body.lagom .main-body { background: transparent !important; }

/* headings: Inter black, tight tracking */
body.lagom h1, body.lagom h2, body.lagom h3, body.lagom .h1, body.lagom .h2, body.lagom .h3,
body.lagom .main-header-title, body.lagom .section-title, body.lagom .panel-title,
body.lagom .package-title, body.lagom .login-title {
    font-family: "Inter", sans-serif;
    color: #fff;
}
body.lagom .main-header-title, body.lagom h1 {
    font-weight: 900 !important;
    letter-spacing: -0.03em;
}
body.lagom .main-header-title { position: relative; padding-bottom: 14px; }
body.lagom .main-header-title::after {
    content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 2px;
    background: linear-gradient(90deg, #ff6a00, #ff9500);
    box-shadow: 0 0 14px rgba(255, 106, 0, 0.6);
}
body.lagom h2, body.lagom h3, body.lagom .section-title, body.lagom .panel-title { font-weight: 800; letter-spacing: -0.01em; }

/* ---------- header / navigation ---------- */
body.lagom .app-nav {
    background: rgba(10, 10, 15, 0.92) !important;
    border-bottom: 1px solid rgba(255, 106, 0, 0.22);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}
body.lagom .app-nav-header { border-bottom: 1px solid var(--dn-line) !important; background: transparent !important; }
body.lagom .app-nav-menu { background: transparent !important; border: 0 !important; }
body.lagom .app-nav-menu .menu-primary > li > a,
body.lagom .app-nav-menu .menu-primary > li > a .item-text {
    font-family: "Rajdhani", sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: #fff;
}
body.lagom .app-nav-menu .menu-primary > li > a { position: relative; }
body.lagom .app-nav-menu .menu-primary > li > a:hover,
body.lagom .app-nav-menu .menu-primary > li > a:hover .item-text,
body.lagom .app-nav-menu .menu-primary > li.active > a,
body.lagom .app-nav-menu .menu-primary > li.active > a .item-text,
body.lagom .app-nav-menu .menu-primary > li.open > a .item-text { color: var(--dn-orange) !important; }
@media (min-width: 1200px) {
    body.lagom .app-nav-menu .menu-primary > li > a::after {
        content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
        background: var(--dn-orange); box-shadow: 0 0 10px var(--dn-orange-glow);
        transform: scaleX(0); transition: transform .2s ease;
    }
    body.lagom .app-nav-menu .menu-primary > li > a:hover::after,
    body.lagom .app-nav-menu .menu-primary > li.active > a::after { transform: scaleX(1); }
}
body.lagom .top-nav > li > a, body.lagom .top-nav .item-text {
    font-family: "Rajdhani", sans-serif; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: #c9cbd6;
}
body.lagom .top-nav > li > a:hover .item-text { color: var(--dn-orange); }
body.lagom .dropdown-menu {
    background: #1a1d26 !important;
    border: 1px solid var(--dn-line-2) !important;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55) !important;
}
body.lagom .dropdown-menu > li > a:hover, body.lagom .dropdown-menu .dropdown-menu-item:hover { color: var(--dn-orange) !important; }

/* ---------- buttons ---------- */
body.lagom .btn { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: 0.3px; }
body.lagom .btn-primary,
body.lagom .btn-checkout,
body.lagom .btn-success.btn-checkout {
    background: var(--dn-orange) !important;
    border-color: var(--dn-orange) !important;
    color: var(--dn-ink) !important;
    box-shadow: 0 6px 22px -6px var(--dn-orange-glow) !important;
}
body.lagom .btn-primary .ls, body.lagom .btn-primary i, body.lagom .btn-checkout i { color: var(--dn-ink) !important; }
body.lagom .btn-primary:hover, body.lagom .btn-primary:focus,
body.lagom .btn-checkout:hover, body.lagom .btn-checkout:focus {
    background: #ff8a1f !important; border-color: #ff8a1f !important; color: var(--dn-ink) !important;
    box-shadow: 0 0 0 1px rgba(255, 138, 31, 0.6), 0 0 28px rgba(255, 106, 0, 0.55) !important;
}
body.lagom .btn-default, body.lagom .btn-outline {
    background: transparent; color: #fff !important; border-color: rgba(255, 255, 255, 0.24) !important;
}
body.lagom .btn-default:hover, body.lagom .btn-outline:hover {
    border-color: var(--dn-orange) !important; color: #fff !important; background: rgba(255, 106, 0, 0.08) !important;
}
body.lagom .btn:focus-visible, body.lagom a:focus-visible, body.lagom .form-control:focus {
    outline: none; box-shadow: 0 0 0 3px rgba(255, 106, 0, 0.35) !important;
}

/* ---------- cards / panels ---------- */
body.lagom .panel, body.lagom .package, body.lagom .ui-block, body.lagom .kb-article-item, body.lagom .list-group,
body.lagom .announcement, body.lagom .panel-summary, body.lagom .panel-cart, body.lagom .tile {
    background: var(--ui-block-bg) !important;
    border: 1px solid var(--dn-line) !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
body.lagom .package { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
body.lagom .package:hover {
    border-color: var(--dn-orange) !important;
    box-shadow: 0 0 40px rgba(255, 106, 0, 0.20), inset 0 0 40px rgba(255, 106, 0, 0.04) !important;
    transform: translateY(-2px);
}
body.lagom .package .package-title, body.lagom .package .package-name { font-weight: 800; color: #fff; }
body.lagom .package .price, body.lagom .package-price .price {
    font-family: "Inter", sans-serif; font-weight: 900; color: var(--dn-orange) !important; letter-spacing: -0.02em;
    text-shadow: 0 0 18px rgba(255, 106, 0, 0.35);
}
body.lagom .package-starting-from, body.lagom .price-cycle { color: var(--dn-muted) !important; }
body.lagom .panel-heading { border-color: var(--dn-line) !important; background: transparent !important; }
body.lagom .panel-summary .panel-heading .panel-title,
body.lagom .panel-summary h3 { font-family: "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700; }

/* the order summary / cart sidebar gets the "featured plan" glow */
body.lagom .panel-summary, body.lagom.page-viewcart .panel-cart {
    border-color: rgba(255, 106, 0, 0.55) !important;
    box-shadow: 0 0 46px rgba(255, 106, 0, 0.16), inset 0 0 40px rgba(255, 106, 0, 0.03) !important;
}
body.lagom .panel-summary .summary-total .price, body.lagom #totalDueToday,
body.lagom .order-summary .total-due-today .amt, body.lagom #producttotal .price {
    color: #fff; font-weight: 900;
}

/* sidebar navigation (store categories, KB categories, actions) */
body.lagom .main-sidebar .panel-sidebar, body.lagom .main-sidebar .panel-sidebar .list-group { background: transparent !important; box-shadow: none !important; border: 0 !important; }
body.lagom .main-sidebar .panel-title, body.lagom .main-sidebar h3 {
    font-family: "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: 1.6px; font-size: 15px; font-weight: 700; color: #fff;
}
body.lagom .main-sidebar .list-group-item, body.lagom .main-sidebar .nav > li > a { color: var(--dn-text) !important; border-radius: 8px; }
body.lagom .main-sidebar .list-group-item:hover, body.lagom .main-sidebar .nav > li > a:hover { color: var(--dn-orange) !important; }
body.lagom .main-sidebar .list-group-item.active, body.lagom .main-sidebar .nav > li.active > a {
    color: #fff !important; background: rgba(255, 106, 0, 0.10) !important; box-shadow: inset 3px 0 0 var(--dn-orange);
}

/* ---------- forms ---------- */
body.lagom .form-control, body.lagom select.form-control, body.lagom .bootstrap-select .btn,
body.lagom .input-group-addon, body.lagom textarea {
    background-color: #0b0d12 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #fff !important;
}
body.lagom .form-control:hover { border-color: rgba(255, 255, 255, 0.24) !important; }
body.lagom .form-control:focus { border-color: var(--dn-orange) !important; }
body.lagom .form-control::placeholder { color: #8e90a5 !important; opacity: 1; }
body.lagom label, body.lagom .control-label { color: #c9cbd6; }
body.lagom .checkbox-styled .checkbox-icon, body.lagom .radio-styled .radio-icon,
body.lagom .icheckbox_square-blue, body.lagom .iradio_square-blue { border-color: rgba(255, 255, 255, 0.28) !important; }
body.lagom .form-group h4, body.lagom .sub-heading, body.lagom .section-subtitle { color: var(--dn-orange-text); }

/* ---------- alerts / labels ---------- */
body.lagom .alert { border-radius: 10px; }
body.lagom .alert-info { background: rgba(0, 229, 255, 0.08) !important; border-color: rgba(0, 229, 255, 0.3) !important; color: #bdf7ff !important; }
body.lagom .alert-warning { background: rgba(255, 170, 0, 0.08) !important; border-color: rgba(255, 170, 0, 0.35) !important; color: #ffe2a8 !important; }
body.lagom .alert-danger { background: rgba(217, 38, 50, 0.10) !important; border-color: rgba(217, 38, 50, 0.4) !important; color: #ffc2c6 !important; }
body.lagom .alert-success { background: rgba(54, 192, 85, 0.08) !important; border-color: rgba(54, 192, 85, 0.35) !important; color: #bff0cb !important; }
body.lagom .label-primary, body.lagom .badge-primary { color: var(--dn-ink) !important; }

/* ---------- tables (tickets, invoices, domains lists) ---------- */
body.lagom .table > thead > tr > th {
    font-family: "Rajdhani", sans-serif; text-transform: uppercase; letter-spacing: 1.2px; color: var(--dn-muted) !important;
    border-color: var(--dn-line) !important;
}
body.lagom .table > tbody > tr > td { border-color: var(--dn-line) !important; }
body.lagom .table-hover > tbody > tr:hover > td { background: rgba(255, 106, 0, 0.05) !important; }

/* ---------- knowledgebase / announcements ---------- */
body.lagom .kb-category .kb-category-title, body.lagom .kb-article-item .kb-article-title,
body.lagom .announcement-title, body.lagom .announcement h3 a { color: #fff !important; font-weight: 800; }
body.lagom .kb-category:hover .kb-category-title, body.lagom .kb-article-item:hover .kb-article-title,
body.lagom .announcement h3 a:hover { color: var(--dn-orange) !important; }
body.lagom .search-box, body.lagom .search-group .form-control { border-radius: 10px; }
body.lagom .search-box-primary, body.lagom .main-header .search-box {
    background: #0b0d12 !important; border: 1px solid rgba(255, 106, 0, 0.35) !important;
    box-shadow: 0 0 24px rgba(255, 106, 0, 0.10) !important;
}
body.lagom .article-content, body.lagom .kb-article-content, body.lagom .announcement-content { color: var(--dn-text); line-height: 1.75; }
body.lagom .article-content h2, body.lagom .article-content h3, body.lagom .article-content h4,
body.lagom .kb-article-content h2, body.lagom .kb-article-content h3, body.lagom .kb-article-content h4 {
    font-weight: 700 !important; letter-spacing: -0.01em; margin-top: 1.4em;
}
body.lagom .article-content h3, body.lagom .kb-article-content h3 { font-size: 20px; }
body.lagom .article-content a,body.lagom .kb-article-content a, body.lagom .announcement-content a { color: var(--dn-orange-text); }
body.lagom .article-content code, body.lagom .kb-article-content code {
    background: #0b0d12; color: var(--dn-cyan); border: 1px solid var(--dn-line); border-radius: 6px; padding: 1px 6px;
}

/* ---------- footer ---------- */
body.lagom .main-footer {
    background: #12121a !important; border-top: 1px solid var(--dn-line) !important; color: #8e90a5;
}
body.lagom .main-footer a { color: #8e90a5 !important; }
body.lagom .main-footer a:hover { color: var(--dn-orange) !important; }
body.lagom .footer-copyright { color: #8e90a5 !important; }

/* ---------- existing GTX order-form CSS: swap its hard-coded blues ---------- */
body.page-configureproduct .option-card,
body.page-configureproduct .location-tile { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 255, 255, 0.10) !important; }
body.page-configureproduct .option-card:hover,
body.page-configureproduct .location-tile:hover { border-color: rgba(255, 106, 0, 0.6) !important; }
body.page-configureproduct .option-card.selected,
body.page-configureproduct .location-tile.selected,
body.page-configureproduct #sectionCycles .panel-check.checked {
    background: linear-gradient(180deg, rgba(255, 106, 0, 0.16) 0%, rgba(255, 106, 0, 0.04) 100%) !important;
    border-color: var(--dn-orange) !important;
    box-shadow: 0 0 0 1px var(--dn-orange), 0 0 26px rgba(255, 106, 0, 0.25) !important;
}
body.page-configureproduct #productConfigurableOptions > .section,
body.page-configureproduct .product-config-info {
    background: var(--ui-block-bg) !important; border: 1px solid var(--dn-line) !important; border-radius: 14px !important;
}
body.page-configureproduct .product-config-info { border-left: 3px solid var(--dn-orange) !important; }
body.page-configureproduct .main-content h2.section-title::after,
body.page-viewcart .main-content h2.section-title::after,
body.page-viewcart .main-sidebar h2.section-title::after { background: var(--dn-orange) !important; box-shadow: 0 0 10px var(--dn-orange-glow) !important; }
body.page-configureproduct #productConfigurableOptions .section-title,
body.page-configureproduct .section-title,
body.page-viewcart .section-title {
    font-family: "Rajdhani", sans-serif !important; text-transform: uppercase; letter-spacing: 1.6px; font-weight: 700 !important;
}
body.page-configureproduct .irs-bar, body.page-configureproduct .irs-from,
body.page-configureproduct .irs-to, body.page-configureproduct .irs-single { background: var(--dn-orange) !important; color: var(--dn-ink) !important; }
body.page-configureproduct .gtx-tooltip { background: #1a1d26 !important; border: 1px solid var(--dn-line-2) !important; }
body.page-configureproduct .ram-seg.lit, body.page-configureproduct .nvme-bar-fill { background: var(--dn-orange) !important; }
/* "Save x%" badges: white on green was 2.4:1, dark ink passes AA */
body.page-configureproduct .cycle-badge { color: var(--dn-ink) !important; font-weight: 800; }
body.page-viewcart .search-box.search-box-primary { background: rgba(255, 255, 255, 0.03) !important; border-color: rgba(255, 106, 0, 0.35) !important; }
body.page-viewcart .panel-cart .prod-actions .btn, body.page-viewcart .order-summary .btn-default { color: #fff !important; }

/* ---------- logged-in pages (checked 7 Oct 2026 in Matthew's session) ---------- */
/* Rajdhani capitals are wider than Figtree: the logged-in menu (9 items + Open Support Ticket)
   wrapped the button onto a second row. Narrower link padding keeps it on one row from 992 px. */
@media (min-width: 1366px) {
    body.lagom .app-nav-menu .menu-primary > li > a { padding-left: 16px !important; padding-right: 16px !important; letter-spacing: 1.1px; font-size: 16px !important; }
    body.lagom .app-nav-menu .menu-primary > li > a::after { left: 16px; right: 16px; }
}
@media (min-width: 992px) and (max-width: 1365px) {
    body.lagom .app-nav-menu .menu-primary > li > a { padding-left: 12px !important; padding-right: 12px !important; letter-spacing: 0.8px; font-size: 15px !important; }
    body.lagom .app-nav-menu .menu-primary > li > a::after { left: 12px; right: 12px; }
}
/* sidebar panels with content (not link lists) stay cards: dashboard "Your Info", upgrade summary */
body.lagom .main-sidebar .panel-sidebar.panel-client-details,
body.lagom.page-upgrade .main-sidebar .panel-sidebar {
    background: var(--ui-block-bg) !important; border: 1px solid var(--dn-line) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
/* service detail hero card: white 24px on the orange gradient was 2.1:1, now the featured-card glow */
body.lagom .product-icon {
    background: radial-gradient(120% 80% at 50% 0%, rgba(255, 106, 0, 0.30), transparent 70%), linear-gradient(180deg, #22160e 0%, #171a22 100%) !important;
    border: 1px solid rgba(255, 106, 0, 0.55); box-shadow: 0 0 46px rgba(255, 106, 0, 0.16), inset 0 0 40px rgba(255, 106, 0, 0.04);
}
/* "Unpaid" (#d92632 on near-black was 3.9:1) */
body.lagom .textred, body.lagom .text-danger { color: #ff8a92 !important; }
/* GTX ticket-view.js / tickets-list.js styling (theme-custom.css) used blue tints and white-on-orange */
body.page-viewticket .gtx-reply-toast { background: #1a1d26 !important; border-color: rgba(255, 106, 0, 0.35) !important; }
body.page-viewticket .gtx-reply-toast-view { background: var(--dn-orange) !important; color: var(--dn-ink) !important; }
body.page-viewticket .gtx-send-hint kbd { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.22) !important; }
body.page-viewticket .attachements-container .add { border-color: rgba(255, 255, 255, 0.22) !important; }
body.page-viewticket .md-editor > .btn-toolbar > .btn-group .btn:not(.btn-primary):hover,
body.page-viewticket .gtx-reply-toast-mute:hover, body.page-viewticket .gtx-reply-collapse:hover,
body.page-supportticketslist #tableTicketsList tbody tr[data-url]:hover > td { background: rgba(255, 106, 0, 0.07) !important; }

/* printing (the HTML invoice page uses header.tpl, so it gets this skin): print on white, no glows.
   Browsers drop backgrounds when printing, so every text colour is forced to black. */
@media print {
    body.lagom, body.lagom * { color: #000 !important; text-shadow: none !important; box-shadow: none !important; }
    body.lagom .main-sidebar .panel-sidebar, body.lagom .panel-summary, body.lagom .app-nav, body.lagom .main-footer, body.lagom .label { background: #fff !important; border-color: #ccc !important; }
    body.lagom { background: #fff !important; color: #000 !important; }
    body.lagom .panel, body.lagom .ui-block, body.lagom .invoice, body.lagom .table > tbody > tr > td {
        background: #fff !important; color: #000 !important; box-shadow: none !important; border-color: #ccc !important;
    }
    body.lagom h1, body.lagom h2, body.lagom h3, body.lagom .main-header-title, body.lagom label, body.lagom a { color: #000 !important; text-shadow: none !important; }
    body.lagom .main-header-title::after { display: none; }
}

/* phones: keep the glow light, nav readable */
@media (max-width: 767px) {
    body.lagom { background-attachment: scroll !important; }
    body.lagom .main-header-title { font-size: 30px; }
    body.lagom .package:hover { transform: none; }
}