/*!
 * GTXGaming - Lagom order form restyle (update-safe custom CSS)
 * Deploy to: /templates/lagom2/core/styles/futuristic/assets/css/theme-custom.css
 *
 * Scope: product configure page only (body.page-configureproduct).
 * Uses the Futuristic style's own CSS variables so Style Manager
 * color changes keep working. Safe to remove at any time.
 */

/* ==========================================================================
   1. Page rhythm / section headers
   ========================================================================== */

body.page-configureproduct .main-content .section-header {
    margin-bottom: 12px;
}

body.page-configureproduct .main-content h2.section-title {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: inline-block;
    position: relative;
    padding-bottom: 6px;
}

body.page-configureproduct .main-content h2.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
}

/* ==========================================================================
   2. Billing cycle cards
   ========================================================================== */

/* All cycles on a single row (the stock 3-col grid wraps Yearly onto
   a second line). Falls back to 2x2, then 1 column, on small screens. */
body.page-configureproduct #sectionCycles .panel-check-group {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-left: 0;
    margin-right: 0;
}

body.page-configureproduct #sectionCycles .panel-check-group > [class*="col-"] {
    width: auto;
    max-width: none;
    flex: none;
    padding-left: 0;
    padding-right: 0;
}

body.page-configureproduct #sectionCycles .panel-check-group .panel-check {
    height: 100%;
    margin-bottom: 0;
}

@media (max-width: 991px) {
    body.page-configureproduct #sectionCycles .panel-check-group {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    body.page-configureproduct #sectionCycles .panel-check-group {
        grid-template-columns: 1fr;
    }
}

body.page-configureproduct #sectionCycles .panel-check {
    background: var(--gray-faded, rgba(163, 198, 255, 0.06));
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.16));
    border-radius: 12px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}

body.page-configureproduct #sectionCycles .panel-check:hover {
    border-color: var(--brand-primary-lighter, #009AFF);
    transform: translateY(-1px);
}

body.page-configureproduct #sectionCycles .panel-check.checked {
    border-color: var(--brand-primary, #1062fe);
    box-shadow: 0 0 0 1px var(--brand-primary, #1062fe),
                0 10px 28px -8px rgba(16, 98, 254, 0.45);
    background: linear-gradient(180deg, rgba(16, 98, 254, 0.14) 0%, rgba(16, 98, 254, 0.05) 100%);
}

body.page-configureproduct #sectionCycles .check-cycle {
    height: 100%;
}

body.page-configureproduct #sectionCycles .check-cycle label {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 12px 16px;
    margin: 0;
    cursor: pointer;
}

body.page-configureproduct #sectionCycles .check-cycle .check-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.55;
    margin: 0;
}

/* Selected tick in the corner of the active cycle card */
body.page-configureproduct #sectionCycles .panel-check {
    position: relative;
}

body.page-configureproduct #sectionCycles .panel-check.checked::after {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--brand-primary, #1062fe)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 10px 10px no-repeat;
    box-shadow: 0 2px 8px rgba(16, 98, 254, 0.5);
}

/* Discount badge added by the optional order form enhancement script.
   Always on its own line so the four narrow cards stay uniform. */
body.page-configureproduct .cycle-badge {
    display: table;
    margin-top: 5px;
    margin-left: 0;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: #fff;
    background: var(--brand-success, #24CC7D);
    vertical-align: middle;
}

/* ==========================================================================
   3. Configurable options - two column grid of option cards
   ========================================================================== */

@media (min-width: 992px) {
    body.page-configureproduct #productConfigurableOptions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px 20px;
        align-items: stretch;
    }

    body.page-configureproduct #productConfigurableOptions > .section {
        margin: 0;
    }
}

body.page-configureproduct #productConfigurableOptions > .section {
    background: var(--gray-faded, rgba(163, 198, 255, 0.05));
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.12));
    border-radius: 12px;
    padding: 18px 18px 16px;
    transition: border-color 0.18s ease;
}

body.page-configureproduct #productConfigurableOptions > .section:hover {
    border-color: var(--gray-lighter-3, rgba(163, 198, 255, 0.24));
}

body.page-configureproduct #productConfigurableOptions .section-header {
    margin-bottom: 10px;
}

body.page-configureproduct #productConfigurableOptions h2.section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.92;
}

body.page-configureproduct #productConfigurableOptions h2.section-title::after {
    width: 24px;
}

/* Flatten the inner panel so the section card is the only chrome */
body.page-configureproduct #productConfigurableOptions .panel-form {
    background: transparent;
    border: none;
    box-shadow: none;
    margin-bottom: 0;
}

body.page-configureproduct #productConfigurableOptions .panel-form .panel-body {
    padding: 0;
}

/* ==========================================================================
   4. Dropdown selects
   ========================================================================== */

body.page-configureproduct #productConfigurableOptions select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 46px;
    padding: 10px 42px 10px 14px;
    font-size: 14px;
    border-radius: 10px;
    color: var(--gray-base, hsla(220, 100%, 90%, 0.92));
    background-color: rgba(8, 20, 48, 0.5);
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.18));
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23639aff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    cursor: pointer;
}

body.page-configureproduct #productConfigurableOptions select.form-control:hover {
    border-color: var(--brand-primary-lighter, #009AFF);
}

body.page-configureproduct #productConfigurableOptions select.form-control:focus {
    outline: none;
    border-color: var(--brand-primary, #1062fe);
    box-shadow: 0 0 0 3px rgba(16, 98, 254, 0.25);
}

/* Quantity slider accents (ion.rangeSlider), if a product uses them */
body.page-configureproduct .irs-bar {
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
}

body.page-configureproduct .irs-from,
body.page-configureproduct .irs-to,
body.page-configureproduct .irs-single {
    background: var(--brand-primary, #1062fe);
}

/* ==========================================================================
   5. Option cards (rendered by the optional enhancement script)
   ========================================================================== */

body.page-configureproduct .option-cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

body.page-configureproduct .option-cards.option-cards-long {
    max-height: 320px;
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: rgba(99, 154, 255, 0.4) transparent;
}

/* Location: full-width section pinned to the top of the options grid */
body.page-configureproduct #productConfigurableOptions > .section.section-location {
    grid-column: 1 / -1;
    order: -1;
}

/* Slots & Memory: full-width sections with cards four across */
body.page-configureproduct #productConfigurableOptions > .section.section-full {
    grid-column: 1 / -1;
}

@media (min-width: 992px) {
    body.page-configureproduct .section-full .option-cards {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

body.page-configureproduct .option-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    text-align: left;
    font-size: 14px;
    line-height: 1.4;
    border-radius: 10px;
    color: var(--gray-base, hsla(220, 100%, 90%, 0.92));
    background: rgba(8, 20, 48, 0.4);
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.14));
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.page-configureproduct .option-card:hover {
    border-color: var(--brand-primary-lighter, #009AFF);
}

body.page-configureproduct .option-card.selected {
    border-color: var(--brand-primary, #1062fe);
    background: linear-gradient(180deg, rgba(16, 98, 254, 0.18) 0%, rgba(16, 98, 254, 0.06) 100%);
    box-shadow: 0 0 0 1px var(--brand-primary, #1062fe);
}

body.page-configureproduct .option-card-name {
    flex: 1 1 auto;
    font-weight: 500;
    min-width: 0; /* overlong content ellipsizes instead of clipping the price */
}

/* Extreme flyout cards: city / spec / badge stacked, price on the right */
body.page-configureproduct .option-card-extreme .option-card-badge-extreme {
    display: inline-block;
    margin: 4px 0 0;
    cursor: help;
}

/* Location cards: city + compact spec line */
body.page-configureproduct .option-card-city {
    display: block;
    font-weight: 700;
    font-size: 14px;
    line-height: 1.3;
}

body.page-configureproduct .option-card-spec {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-configureproduct .option-card-badge-extreme {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    vertical-align: 1px;
    color: #ffb35c;
    background: rgba(255, 140, 30, 0.14);
    border: 1px solid rgba(255, 150, 40, 0.45);
}

/* Extreme hardware tooltip (element appended to <body> by the script) */
body.page-configureproduct .gtx-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: 280px;
    padding: 12px 14px;
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--gray-base, hsla(220, 100%, 90%, 0.92));
    background: rgba(10, 24, 56, 0.97);
    border: 1px solid rgba(255, 150, 40, 0.45);
    box-shadow: 0 14px 34px -10px rgba(0, 0, 0, 0.6);
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

body.page-configureproduct .gtx-tooltip.visible {
    opacity: 1;
    transform: translateY(0);
}

body.page-configureproduct .gtx-tooltip-title {
    display: block;
    margin-bottom: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #ffb35c;
}

body.page-configureproduct .gtx-tooltip-body {
    display: block;
}

body.page-configureproduct .gtx-tooltip-note {
    display: block;
    margin-top: 10px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .gtx-tooltip-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

body.page-configureproduct .gtx-tooltip-included {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: #7fe0a0;
    background: rgba(46, 204, 113, 0.12);
    border: 1px solid rgba(46, 204, 113, 0.4);
}

body.page-configureproduct .gtx-tooltip-arrow {
    position: absolute;
    bottom: -6px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    transform: rotate(45deg);
    background: rgba(10, 24, 56, 0.97);
    border-right: 1px solid rgba(255, 150, 40, 0.45);
    border-bottom: 1px solid rgba(255, 150, 40, 0.45);
}

body.page-configureproduct .gtx-tooltip.below .gtx-tooltip-arrow {
    bottom: auto;
    top: -6px;
    border: none;
    border-left: 1px solid rgba(255, 150, 40, 0.45);
    border-top: 1px solid rgba(255, 150, 40, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    body.page-configureproduct .gtx-tooltip {
        transition: none;
    }
}

body.page-configureproduct .option-card-price {
    flex: 0 0 auto;
    font-weight: 700;
    font-size: 13px;
    color: var(--brand-primary-lighter, #009AFF);
    white-space: nowrap;
}

body.page-configureproduct .option-card-price.option-card-included {
    color: var(--brand-success, #24CC7D);
    font-weight: 600;
}

/* Hide the original select when cards are active (kept in DOM for WHMCS) */
body.page-configureproduct .panel-form.has-option-cards {
    display: none;
}

/* ==========================================================================
   5b. Location picker - country tiles + expansion panel
   (rendered by the optional enhancement script)
   ========================================================================== */

/* 7 across on desktop: the full 13-country set fits on two rows (7 + 6) */
body.page-configureproduct .location-tiles {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 7px;
}

@media (max-width: 1199px) {
    body.page-configureproduct .location-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    body.page-configureproduct .location-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

body.page-configureproduct .location-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 11px 6px 9px;
    text-align: center;
    border-radius: 10px;
    color: var(--gray-base, hsla(220, 100%, 90%, 0.92));
    background: rgba(8, 20, 48, 0.4);
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.14));
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease,
                background 0.15s ease, transform 0.15s ease;
}

body.page-configureproduct .location-tile:hover,
body.page-configureproduct .location-tile.active {
    border-color: var(--brand-primary-lighter, #009AFF);
    transform: translateY(-1px);
}

body.page-configureproduct .location-tile:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(16, 98, 254, 0.25);
}

body.page-configureproduct .location-tile.selected {
    border-color: var(--brand-primary, #1062fe);
    background: linear-gradient(180deg, rgba(16, 98, 254, 0.18) 0%, rgba(16, 98, 254, 0.06) 100%);
    box-shadow: 0 0 0 1px var(--brand-primary, #1062fe);
}

body.page-configureproduct .location-tile.selected::after {
    content: "";
    position: absolute;
    top: 6px;
    right: 6px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-primary, #1062fe)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 9px 9px no-repeat;
    box-shadow: 0 2px 8px rgba(16, 98, 254, 0.5);
}

body.page-configureproduct .location-tile-flag {
    width: 32px;
    height: 24px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}

body.page-configureproduct .location-tile-globe {
    box-shadow: none;
    font-size: 20px;
    line-height: 24px;
    text-align: center;
}

body.page-configureproduct .location-tile-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

body.page-configureproduct .location-tile-meta {
    font-size: 10.5px;
    line-height: 1.3;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .location-tile.selected .location-tile-meta {
    color: var(--brand-primary-lighter, #009AFF);
    font-weight: 600;
}

/* Expansion panel - a full-width row inserted directly below the
   hovered tile's own row inside the tile grid */
body.page-configureproduct .location-flyout {
    grid-column: 1 / -1;
    position: relative;
    margin-top: 2px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(8, 20, 48, 0.55);
    border: 1px solid var(--brand-primary-lighter, rgba(0, 154, 255, 0.55));
    box-shadow: 0 14px 34px -12px rgba(16, 98, 254, 0.4);
}

body.page-configureproduct .location-flyout.open {
    animation: locFlyoutIn 0.18s ease;
}

/* Transform-only so the panel stays visible even if animations are
   disabled (reduced motion, some webviews) */
@keyframes locFlyoutIn {
    from {
        transform: translateY(-6px);
    }
    to {
        transform: translateY(0);
    }
}

/* Arrow pointing at the active country tile (x set by the script) */
body.page-configureproduct .location-flyout-arrow {
    position: absolute;
    top: -7px;
    left: var(--loc-arrow-x, 32px);
    width: 12px;
    height: 12px;
    margin-left: -6px;
    transform: rotate(45deg);
    background: rgba(8, 20, 48, 1);
    border-top: 1px solid var(--brand-primary-lighter, rgba(0, 154, 255, 0.55));
    border-left: 1px solid var(--brand-primary-lighter, rgba(0, 154, 255, 0.55));
    transition: left 0.15s ease;
}

body.page-configureproduct .location-flyout-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px;
}

/* ==========================================================================
   5c. In-card visuals (rendered by the enhancement script)
   ========================================================================== */

/* Cards that carry a visual stack their content vertically */
body.page-configureproduct .option-card {
    position: relative;
    overflow: hidden;
}

body.page-configureproduct .option-card-stacked {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

body.page-configureproduct .option-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.page-configureproduct .option-card-visual {
    display: block;
}

/* --- NVMe throughput bar --- */
body.page-configureproduct .nvme-bar {
    display: block;
    height: 6px;
    border-radius: 4px;
    background: rgba(163, 198, 255, 0.12);
    overflow: hidden;
}

body.page-configureproduct .nvme-bar-fill {
    position: relative;
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
}

body.page-configureproduct .nvme-bar-fill.nvme-bar-max {
    background: linear-gradient(90deg, #0a7ae0, #00c8ff);
    box-shadow: 0 0 8px rgba(0, 180, 255, 0.45);
}

body.page-configureproduct .nvme-bar-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 20%, rgba(255, 255, 255, 0.45) 50%, transparent 80%);
    transform: translateX(-100%);
}

/* --- NVMe data streams flying across the card --- */
body.page-configureproduct .option-card-streams {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

body.page-configureproduct .stream {
    position: absolute;
    left: -25%;
    width: 36px;
    height: 2px;
    border-radius: 2px;
    opacity: 0;
    background: linear-gradient(90deg, transparent, rgba(0, 154, 255, 0.4), transparent);
}

body.page-configureproduct .streams-fast .stream {
    background: linear-gradient(90deg, transparent, rgba(0, 200, 255, 0.65), transparent);
}

/* --- Tickrate demo: same duration, smooth vs stepped --- */
body.page-configureproduct .tick-visual {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-configureproduct .tick-track {
    position: relative;
    flex: 1 1 auto;
    height: 12px;
    border-radius: 6px;
    background: rgba(163, 198, 255, 0.08);
    border: 1px solid rgba(163, 198, 255, 0.1);
}

body.page-configureproduct .tick-dot {
    position: absolute;
    top: 1px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--brand-primary-lighter, #009AFF);
    box-shadow: 0 0 6px rgba(0, 154, 255, 0.7);
}

body.page-configureproduct .tick-note {
    flex: 0 0 auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
    white-space: nowrap;
}

/* --- RAM gauge: 10 segments, lit proportionally to capacity --- */
body.page-configureproduct .ram-visual {
    display: flex;
    gap: 3px;
}

body.page-configureproduct .ram-seg {
    flex: 1 1 0;
    height: 7px;
    border-radius: 2px;
    background: rgba(163, 198, 255, 0.1);
    transition: background 0.25s ease, box-shadow 0.25s ease;
}

body.page-configureproduct .ram-seg.lit {
    background: rgba(16, 98, 254, 0.45);
}

body.page-configureproduct .option-card.selected .ram-seg.lit {
    background: var(--brand-primary-lighter, #009AFF);
    box-shadow: 0 0 5px rgba(0, 154, 255, 0.55);
}

/* --- Slots: one-row value cards ---
   The section spans the full options grid; on desktop every option shares
   a single row (N equal columns, set by the script via --option-count).
   Each card is a size container that progressively sheds detail (icons,
   per-slot price, text badges) as it narrows, so games with many slot
   options stay readable. Wraps into a normal grid on small screens. */
body.page-configureproduct .section-slots .option-cards {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}

@media (min-width: 992px) {
    body.page-configureproduct .section-slots .option-cards {
        grid-template-columns: repeat(var(--option-count, 4), minmax(0, 1fr));
        gap: clamp(5px, 0.7vw, 12px);
    }
}

body.page-configureproduct .slot-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    padding: 13px 6px 11px;
    text-align: center;
    overflow: hidden;
    container-type: inline-size;
}

body.page-configureproduct .slot-count {
    display: block;
    font-size: clamp(16px, 18cqw, 24px);
    font-weight: 800;
    line-height: 1;
}

body.page-configureproduct .slot-count small {
    display: block;
    margin-top: 2px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

/* Optional qualifier from the option name, e.g. "24 (Requires Valheim+)" */
body.page-configureproduct .slot-note {
    display: block;
    margin-top: 4px;
    max-width: 100%;
    font-size: 10px;
    line-height: 1.3;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-configureproduct .slot-card .option-card-price {
    flex: 0 0 auto;
    font-size: clamp(11px, 11cqw, 13.5px);
}

body.page-configureproduct .slot-per {
    display: block;
    margin-top: 3px;
    font-size: 10.5px;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
    white-space: nowrap;
}

body.page-configureproduct .slot-card .value-badge {
    margin-top: 7px;
}

body.page-configureproduct .value-badge.rec-badge {
    color: var(--brand-primary-lighter, #009AFF);
    background: rgba(0, 154, 255, 0.12);
    border-color: rgba(0, 154, 255, 0.45);
}

/* Corner dot stands in for the badge on very narrow cards */
body.page-configureproduct .value-dot {
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

body.page-configureproduct .value-dot-best {
    background: var(--brand-success, #24CC7D);
}

body.page-configureproduct .value-dot-rec {
    background: var(--brand-primary-lighter, #009AFF);
}

@container (max-width: 118px) {
    body.page-configureproduct .slot-card .slots-icons {
        display: none;
    }
    body.page-configureproduct .slot-card .slot-note {
        display: none;
    }
}

@container (max-width: 96px) {
    body.page-configureproduct .slot-card .slot-per {
        display: none;
    }
    body.page-configureproduct .slot-card .value-badge {
        font-size: 8px;
        padding: 2px 4px;
        letter-spacing: 0.4px;
    }
}

@container (max-width: 72px) {
    body.page-configureproduct .slot-card .value-badge {
        display: none;
    }
    body.page-configureproduct .slot-card .slot-count small {
        display: none;
    }
    body.page-configureproduct .slot-card .value-dot {
        display: block;
    }
}

/* Narrowest cards: keep long prices like "£141.99" from clipping */
@container (max-width: 64px) {
    body.page-configureproduct .slot-card .option-card-price {
        font-size: 9.5px;
    }
}

body.page-configureproduct .slots-icons {
    display: flex;
    align-items: center;
    gap: 2px;
}

body.page-configureproduct .slot-card .slots-icons {
    justify-content: center;
    margin: 9px 0 7px;
    max-width: 100%;
    overflow: hidden;
}

body.page-configureproduct .slot-icon {
    width: 9px;
    height: 11px;
    background: var(--brand-primary-lighter, #009AFF);
    opacity: 0.85;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.5'/%3E%3Cpath d='M3 21c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4.5'/%3E%3Cpath d='M3 21c0-5 4-8 9-8s9 3 9 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.page-configureproduct .slots-more {
    margin-left: 4px;
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .value-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    color: #3ee6a0;
    background: rgba(36, 204, 125, 0.14);
    border: 1px solid rgba(36, 204, 125, 0.45);
    white-space: nowrap;
}

/* --- Memory Allocation: snap slider with GB readout --- */
body.page-configureproduct .memory-slider {
    padding: 4px 6px 0;
}

body.page-configureproduct .mem-readout {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

body.page-configureproduct .mem-gb {
    font-size: 17px;
    font-weight: 700;
    color: var(--brand-primary-lighter, #009AFF);
}

body.page-configureproduct .mem-gb b {
    font-size: 36px;
    font-weight: 800;
    line-height: 1;
}

body.page-configureproduct .mem-lbl {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .mem-price {
    margin-left: auto;
}

body.page-configureproduct .mem-price .option-card-price {
    font-size: 18px;
}

body.page-configureproduct .mem-track {
    position: relative;
    /* bottom padding must clear the two-line tick labels (value + FREE /
       RECOMMENDED tag) hanging below the track */
    padding: 8px 0 44px;
}

body.page-configureproduct input.mem-range {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    width: 100%;
    height: 8px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    background: linear-gradient(90deg,
        var(--brand-primary, #1062fe) 0%,
        var(--brand-primary-lighter, #009AFF) var(--fill, 0%),
        rgba(163, 198, 255, 0.15) var(--fill, 0%));
}

body.page-configureproduct input.mem-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--brand-primary-lighter, #009AFF);
    box-shadow: 0 2px 12px rgba(0, 120, 255, 0.55);
    transition: transform 0.12s ease;
}

body.page-configureproduct input.mem-range:active::-webkit-slider-thumb {
    transform: scale(1.15);
}

body.page-configureproduct input.mem-range::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 5px solid var(--brand-primary-lighter, #009AFF);
    box-shadow: 0 2px 12px rgba(0, 120, 255, 0.55);
}

body.page-configureproduct .mem-ticks {
    position: absolute;
    left: 0;
    right: 0;
    top: 28px;
    height: 32px;
    pointer-events: none;
}

body.page-configureproduct .mem-tick {
    position: absolute;
    transform: translateX(-50%);
    font-size: 11.5px;
    font-weight: 700;
    opacity: 0.55;
    text-align: center;
    transition: opacity 0.15s ease;
}

body.page-configureproduct .mem-tick.active {
    opacity: 1;
}

body.page-configureproduct .mem-tick em {
    display: block;
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

body.page-configureproduct .mem-tick em.mem-tick-free {
    color: #2ecc71;
}

body.page-configureproduct .mem-tick em.mem-tick-rec {
    color: var(--brand-primary-lighter, #009AFF);
}

/* "?" help bubble beside the section title (opens the RAM tooltip) */
body.page-configureproduct .section-title .gtx-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    margin-left: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    vertical-align: 1px;
    color: var(--brand-primary-lighter, #009AFF);
    background: rgba(0, 154, 255, 0.10);
    border: 1px solid rgba(0, 154, 255, 0.45);
    cursor: help;
}

body.page-configureproduct .section-title .gtx-help:hover {
    background: rgba(0, 154, 255, 0.22);
}

/* ==========================================================================
   Hard Disk: boot console race + drive cards with flying data bits
   Two mini server consoles boot the same world; the upgraded drive prints
   its green "[ OK ]" line while the standard one is still streaming.
   Timings are illustrative. Built by buildHardDiskConsole() in
   option-cards.js; the real <select> stays hidden underneath.
   ========================================================================== */

/* "Rerun simulation" button, top right of the box on the title row */
body.page-configureproduct .section-header.hd-header {
    position: relative;
}

body.page-configureproduct .hd-replay {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
    border-radius: 999px;
    color: var(--brand-primary-lighter, #009AFF);
    background: rgba(0, 154, 255, 0.08);
    border: 1px solid rgba(0, 154, 255, 0.4);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

body.page-configureproduct .hd-replay:hover {
    background: rgba(0, 154, 255, 0.22);
    color: #fff;
}

/* fallback placement when the theme markup has no .section-header */
body.page-configureproduct .hd-replay-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}

body.page-configureproduct .hd-replay-row .hd-replay {
    position: static;
    transform: none;
}

body.page-configureproduct .hd-console-duo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

@media (max-width: 480px) {
    body.page-configureproduct .hd-console-duo {
        grid-template-columns: 1fr;
    }
}

body.page-configureproduct .hd-lane-cap {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

body.page-configureproduct .hd-lane-name {
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--gray-base, hsla(220, 100%, 90%, 0.92));
}

body.page-configureproduct .hd-lane-stat {
    margin-left: auto;
    font-size: 10.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .hd-lane-stat.hd-stat-done {
    color: var(--brand-success, #24CC7D);
}

body.page-configureproduct .hd-console {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 88px;
    padding: 7px 10px;
    overflow: hidden;
    background: #071120;
    border: 1px solid rgba(163, 198, 255, 0.16);
    border-radius: 8px;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 10px;
    line-height: 1.55;
}

body.page-configureproduct .hd-console-line {
    flex-shrink: 0; /* overflow clips at the top like a real terminal */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.7;
    color: var(--gray-base, hsla(220, 100%, 90%, 0.92));
}

body.page-configureproduct .hd-console-line::before {
    content: "> ";
    opacity: 0.45;
}

body.page-configureproduct .hd-console-line.hd-console-ok {
    opacity: 1;
    font-weight: 700;
    color: var(--brand-success, #24CC7D);
}

body.page-configureproduct .hd-card .option-card-name,
body.page-configureproduct .hd-card .option-card-price {
    position: relative;
    z-index: 1; /* above the bit field */
}

/* Narrow half-width cards: slightly smaller title so "NVMe 7500MB/s"
   fits without ugly wrapping */
body.page-configureproduct .hd-card .option-card-city {
    font-size: 13px;
}

body.page-configureproduct .hd-gen-badge {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    vertical-align: 1px;
    color: #ffb46b;
    background: rgba(255, 140, 40, 0.12);
    border: 1px solid rgba(255, 140, 40, 0.45);
}

/* Matrix-style bits flying left-to-right across the card face: a slow
   grey trickle on the standard drive, a fast glowing stream on the
   upgrade. Positions/speeds are randomised inline by option-cards.js. */
body.page-configureproduct .hd-bit-field {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

body.page-configureproduct .hd-bit {
    position: absolute;
    left: -28px;
    font-family: ui-monospace, Consolas, "Courier New", monospace;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1px;
    white-space: nowrap;
    color: rgba(125, 156, 201, 0.5);
    animation: gtxBitFly linear infinite;
}

body.page-configureproduct .hd-bits-fast .hd-bit {
    color: rgba(0, 170, 255, 0.75);
    text-shadow: 0 0 6px rgba(0, 154, 255, 0.7);
}

@keyframes gtxBitFly {
    0% { transform: translateX(0); opacity: 0; }
    8% { opacity: 1; }
    92% { opacity: 1; }
    100% { transform: translateX(var(--fly, 340px)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    body.page-configureproduct .hd-bit {
        animation: none;
        display: none;
    }
}

/* --- Disk Space: teal capacity bar (reuses the NVMe bar) --- */
body.page-configureproduct .nvme-bar-fill.disk-bar-fill {
    background: linear-gradient(90deg, #0c8f7d, #2fe0b0);
    box-shadow: none;
}

/* --- CPU Priority: chip glyph tiers --- */
body.page-configureproduct .cpu-visual {
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-configureproduct .cpu-chip {
    width: 18px;
    height: 18px;
    background: #8fa3c8;
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath stroke='%23000' stroke-width='2' d='M9 1v4M15 1v4M9 19v4M15 19v4M1 9h4M1 15h4M19 9h4M19 15h4'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath stroke='%23000' stroke-width='2' d='M9 1v4M15 1v4M9 19v4M15 19v4M1 9h4M1 15h4M19 9h4M19 15h4'/%3E%3C/svg%3E") center / contain no-repeat;
}

body.page-configureproduct .cpu-chip-high {
    background: var(--brand-primary-lighter, #009AFF);
}

body.page-configureproduct .cpu-chip-realtime {
    background: #ffb35c;
}

body.page-configureproduct .cpu-tier-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .cpu-chip-high + .cpu-tier-label {
    color: var(--brand-primary-lighter, #009AFF);
}

body.page-configureproduct .cpu-chip-realtime + .cpu-tier-label {
    color: #ffb35c;
}

/* --- VIP Support: ticket queue + gold card treatment --- */
body.page-configureproduct .vip-visual {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Queue of little people; fixed width so the standard queue doesn't
   collapse while people are served and removed from it */
body.page-configureproduct .vip-queue {
    display: flex;
    gap: 3px;
    width: 67px;
    flex: 0 0 auto;
    transition: opacity 0.3s ease;
}

body.page-configureproduct .vip-queue.q-reset {
    opacity: 0;
}

body.page-configureproduct .q-person {
    width: 11px;
    height: 14px;
    flex: 0 0 auto;
    background: rgba(163, 198, 255, 0.35);
    -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4.5'/%3E%3Cpath d='M3 21c0-5 4-9 9-9s9 4 9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='6.5' r='4.5'/%3E%3Cpath d='M3 21c0-5 4-9 9-9s9 4 9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform 0.4s ease, opacity 0.35s ease;
}

body.page-configureproduct .q-gold {
    background: linear-gradient(180deg, #ffd28a, #ff9d3c);
}

/* Front of the standard queue getting answered: floats up and fades */
body.page-configureproduct .q-person.q-served {
    opacity: 0;
    transform: translateY(-7px) scale(0.8);
}

body.page-configureproduct .vip-note {
    font-size: 10px;
    font-weight: 600;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .option-card-vip .vip-note {
    color: #ffb35c;
}

body.page-configureproduct .option-card-vip {
    border-color: rgba(255, 150, 40, 0.4);
}

body.page-configureproduct .option-card-vip:hover {
    border-color: #ffb35c;
}

body.page-configureproduct .option-card-vip.selected {
    border-color: #ff9d3c;
    box-shadow: 0 0 0 1px #ff9d3c;
    background: linear-gradient(180deg, rgba(255, 150, 40, 0.16) 0%, rgba(255, 150, 40, 0.05) 100%);
}

/* --- Selection checkmark before the price --- */
body.page-configureproduct .option-card.selected .option-card-price::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 50%;
    background: var(--brand-primary, #1062fe)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 8px 8px no-repeat;
}

/* Half-width section cards: the tick's space is reserved from first
   paint (invisible until selected) so selecting never resizes or
   re-wraps the card - the tick pops into a gap that was always there */
body.page-configureproduct .cpub-card .option-card-price::before,
body.page-configureproduct .dsk-readout .option-card-price::before,
body.page-configureproduct .cpuq-card .option-card-price::before,
body.page-configureproduct .vip-card .option-card-price::before,
body.page-configureproduct .tkr-card .option-card-price::before,
body.page-configureproduct .hd-card .option-card-price::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    vertical-align: -2px;
    border-radius: 50%;
    background: var(--brand-primary, #1062fe)
        url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center / 8px 8px no-repeat;
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

body.page-configureproduct .cpub-card.selected .option-card-price::before,
body.page-configureproduct .cpuq-card.selected .option-card-price::before,
body.page-configureproduct .vip-card.selected .option-card-price::before,
body.page-configureproduct .tkr-card.selected .option-card-price::before,
body.page-configureproduct .hd-card.selected .option-card-price::before {
    opacity: 1;
    transform: scale(1);
}

/* --- CPU Clock Boost: tachometer cards ---
   Half-donut rev gauge per tier. The arc fill and needle angle come from
   the script (--sweep in degrees, --ang, --gcolor heat colour); needles
   park at the left stop and sweep up on load, and flick to the redline
   (cpub-rev) when a card is picked. */
body.page-configureproduct .cpub-card {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 12px 10px 10px;
    text-align: center;
}

body.page-configureproduct .cpub-card .option-card-name {
    flex: 0 0 auto;
}

body.page-configureproduct .cpub-pct {
    display: block;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

body.page-configureproduct .cpub-card .option-card-spec {
    margin-top: 1px;
}

body.page-configureproduct .cpub-gauge {
    position: relative;
    display: block;
    width: 76px;
    height: 38px;
    overflow: hidden;
}

body.page-configureproduct .cpub-gauge::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: conic-gradient(from -90deg at 50% 50%,
        var(--gcolor, #009AFF) 0deg calc(var(--sweep, 8) * 1deg),
        rgba(163, 198, 255, 0.16) calc(var(--sweep, 8) * 1deg) 180deg,
        transparent 180deg 360deg);
    -webkit-mask: radial-gradient(circle at 50% 50%, transparent 0 26px, #000 27px);
    mask: radial-gradient(circle at 50% 50%, transparent 0 26px, #000 27px);
}

body.page-configureproduct .cpub-needle {
    position: absolute;
    left: calc(50% - 1.5px);
    bottom: 0;
    width: 3px;
    height: 32px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--gcolor, #009AFF), rgba(255, 255, 255, 0.9));
    box-shadow: 0 0 6px rgba(0, 154, 255, 0.35);
    transform-origin: 50% 100%;
    transform: rotate(var(--ang, -82deg));
}

body.page-configureproduct .cpub-hub {
    position: absolute;
    left: calc(50% - 5px);
    bottom: -5px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #dfe9ff;
    box-shadow: 0 0 0 2px rgba(8, 20, 48, 0.8);
}

/* --- Disk Space: one segmented drive bar ---
   Slim partition-style bar (one clickable segment per GB tier). Segments
   fill left-to-right up to the choice; the tip (.head) gets crawling
   write-stripes. A readout above shows selected GB + price. Designed to
   sit level with the half-width CPU Priority section beside it. */
body.page-configureproduct .dsk-drive {
    padding: 2px 0 0;
}

body.page-configureproduct .dsk-readout {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

body.page-configureproduct .dsk-gb {
    font-size: 16px;
    font-weight: 800;
    line-height: 1.2;
    color: #2fe0b0;
}

body.page-configureproduct .dsk-lbl {
    font-size: 12px;
    font-weight: 600;
    color: var(--gray-lighter-2, hsla(220, 100%, 90%, 0.56));
}

body.page-configureproduct .dsk-price {
    margin-left: auto;
}

body.page-configureproduct .dsk-price .option-card-price {
    font-size: 13.5px;
}

/* Tick next to the readout price is always visible (one tier is always
   selected); the reserved-space rule above already sizes the ::before */
body.page-configureproduct .dsk-readout .option-card-price::before {
    opacity: 1;
    transform: scale(1);
}

body.page-configureproduct .dsk-bar {
    display: grid;
    grid-template-columns: repeat(var(--option-count, 6), minmax(0, 1fr));
    gap: 3px;
    height: 30px;
}

body.page-configureproduct .dsk-seg {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 1px solid rgba(163, 198, 255, 0.18);
    background: rgba(163, 198, 255, 0.07);
    cursor: pointer;
    overflow: hidden;
    color: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.page-configureproduct .dsk-seg:first-child {
    border-radius: 6px 0 0 6px;
}

body.page-configureproduct .dsk-seg:last-child {
    border-radius: 0 6px 6px 0;
}

body.page-configureproduct .dsk-seg:hover {
    border-color: #2fe0b0;
}

body.page-configureproduct .dsk-seg-gb {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.4px;
    color: rgba(223, 233, 255, 0.6);
    z-index: 1;
    transition: color 0.2s ease;
    pointer-events: none;
}

body.page-configureproduct .dsk-seg::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0c8f7d, #17b892);
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.35s ease;
}

body.page-configureproduct .dsk-seg.on::before {
    transform: scaleX(1);
}

body.page-configureproduct .dsk-seg.on .dsk-seg-gb {
    color: #04231b;
}

body.page-configureproduct .dsk-seg.head {
    border-color: #2fe0b0;
    box-shadow: 0 0 10px rgba(47, 224, 176, 0.35);
}

body.page-configureproduct .dsk-seg.head::before {
    background-image: repeating-linear-gradient(-55deg,
            rgba(255, 255, 255, 0.22) 0 5px, transparent 5px 10px),
        linear-gradient(90deg, #0c8f7d, #17b892);
    background-size: 200% 100%, 100% 100%;
}

/* --- CPU Priority: activity cards ---
   Mini equaliser of CPU load bars per tier - slow grey flicker on
   Normal, quicker blue on High, fast glowing orange on Realtime (bar
   speeds/heights set inline by the script). Without animation the bars
   sit at their heights like a static bar chart. */
body.page-configureproduct .cpuq-cards {
    grid-template-columns: repeat(var(--option-count, 3), minmax(0, 1fr));
}

body.page-configureproduct .cpuq-card {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 12px 8px 10px;
    text-align: center;
}

body.page-configureproduct .cpuq-card .option-card-name {
    flex: 0 0 auto;
}

body.page-configureproduct .cpuq-eq {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 26px;
}

body.page-configureproduct .cpuq-bar {
    width: 5px;
    height: 100%;
    border-radius: 2px;
    background: #8fa3c8;
    transform: scaleY(var(--amp, 0.7));
    transform-origin: 50% 100%;
}

/* Heat ramp matches the clock boost gauges: grey -> orange -> red hot
   (hardcoded because this theme's --brand-primary-lighter is orange,
   which made the middle and top tiers look the same) */
body.page-configureproduct .cpuq-high .cpuq-bar {
    background: linear-gradient(180deg, #ffd28a, #ffb35c);
}

body.page-configureproduct .cpuq-realtime .cpuq-bar {
    background: linear-gradient(180deg, #ff8a5c, #ff5636);
    box-shadow: 0 0 6px rgba(255, 90, 50, 0.5);
}

body.page-configureproduct .cpuq-tier {
    display: block;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.6px;
    line-height: 1.25;
    color: #8fa3c8;
}

body.page-configureproduct .cpuq-high .cpuq-tier {
    color: #ffb35c;
}

body.page-configureproduct .cpuq-realtime .cpuq-tier {
    color: #ff6a3d;
}

/* --- VIP cards: sub-line under the title, gold glow on the ticket --- */
body.page-configureproduct .vip-card .option-card-city {
    font-size: 13px;
}

/* --- Tickrate: smoothness demo cards ---
   A dot sweeps each track over the same duration; low tickrates get a
   stepped timing function (set inline by the script) so the dot
   judders, the top rate glides smoothly with a glow. */
body.page-configureproduct .tkr-cards {
    grid-template-columns: repeat(var(--option-count, 2), minmax(0, 1fr));
}

body.page-configureproduct .tkr-card {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 14px 12px 10px;
    text-align: center;
}

body.page-configureproduct .tkr-card .option-card-name {
    flex: 0 0 auto;
}

body.page-configureproduct .tkr-track {
    position: relative;
    display: block;
    height: 8px;
    border-radius: 5px;
    background: rgba(163, 198, 255, 0.14);
}

body.page-configureproduct .tkr-dot {
    position: absolute;
    top: -1px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #8fa3c8;
}

body.page-configureproduct .tkr-smooth .tkr-dot {
    background: linear-gradient(180deg, #ffd28a, #ff9d3c);
    box-shadow: 0 0 8px rgba(255, 160, 60, 0.7);
}

body.page-configureproduct .tkr-rate {
    display: block;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.5px;
    line-height: 1.25;
    color: #8fa3c8;
}

body.page-configureproduct .tkr-smooth .tkr-rate {
    color: #ffb35c;
}

/* --- Animations (skipped for users who prefer reduced motion) --- */
@media (prefers-reduced-motion: no-preference) {
    body.page-configureproduct .nvme-bar-fill::after {
        animation: gtxSheen 2.2s ease-in-out infinite;
    }

    body.page-configureproduct .stream {
        animation: gtxStreamFly 2.6s linear infinite;
    }

    body.page-configureproduct .streams-fast .stream {
        animation-duration: 1.1s;
    }

    body.page-configureproduct .tick-dot {
        animation: gtxTickBounce 1.4s ease-in-out infinite alternate;
    }

    body.page-configureproduct .tick-dot.tick-stepped {
        animation-timing-function: steps(4, jump-none);
    }

    body.page-configureproduct .option-card.selected {
        animation: gtxCardPop 0.25s ease;
    }

    body.page-configureproduct .option-card.selected::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.12) 50%, transparent 70%);
        transform: translateX(-100%);
        animation: gtxSheenOnce 0.55s ease 0.05s forwards;
    }

    body.page-configureproduct .option-card.selected .option-card-price::before,
    body.page-configureproduct .location-tile.selected::after {
        animation: gtxCheckPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    body.page-configureproduct .cpu-chip-realtime {
        animation: gtxAuraPulse 2.2s ease-in-out infinite;
    }

    body.page-configureproduct .cpub-needle {
        transition: transform 1s cubic-bezier(0.34, 1.35, 0.45, 1);
    }

    body.page-configureproduct .cpub-needle.cpub-rev {
        animation: gtxCpubRev 0.9s cubic-bezier(0.35, 0.05, 0.3, 1);
    }

    body.page-configureproduct .vip-queue-vip .q-gold {
        animation: gtxVipCycle 4.5s ease-in-out infinite;
    }

    /* Same duration on every tickrate card; the stepped cards get
       their steps() timing inline from the script */
    body.page-configureproduct .tkr-dot {
        animation: gtxTkrSweep 1.5s ease-in-out infinite alternate;
    }

    body.page-configureproduct .dsk-seg.head::before {
        animation: gtxDskStripes 1.4s linear infinite;
    }

    body.page-configureproduct .cpuq-bar {
        animation: gtxEq 1s ease-in-out infinite;
    }

}

@keyframes gtxSheen {
    0% { transform: translateX(-100%); }
    55% { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

@keyframes gtxSheenOnce {
    to { transform: translateX(100%); }
}

@keyframes gtxStreamFly {
    0% { left: -25%; opacity: 0; }
    12% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 105%; opacity: 0; }
}

@keyframes gtxTickBounce {
    from { left: 2px; }
    to { left: calc(100% - 11px); }
}

@keyframes gtxCardPop {
    0% { transform: scale(0.98); }
    55% { transform: scale(1.015); }
    100% { transform: scale(1); }
}

@keyframes gtxCheckPop {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Engine-rev flick: up to the redline, then settle back on the tier */
@keyframes gtxCpubRev {
    0% { transform: rotate(var(--ang, -82deg)); }
    45% { transform: rotate(84deg); }
    100% { transform: rotate(var(--ang, -82deg)); }
}

/* Disk fill stripes crawl (data being written). Two-layer version keeps
   the teal fill parked while the hatch marches across the tip segment. */
@keyframes gtxStripes {
    from { background-position: 0 0; }
    to { background-position: 28px 0; }
}

@keyframes gtxDskStripes {
    from { background-position: 0 0, 0 0; }
    to { background-position: 28px 0, 0 0; }
}

/* Tickrate demo dot: one sweep across the track (alternate reverses) */
@keyframes gtxTkrSweep {
    from { left: 2px; }
    to { left: calc(100% - 12px); }
}

/* CPU load equaliser: each bar bounces to its own --amp height */
@keyframes gtxEq {
    0%, 100% { transform: scaleY(0.25); }
    50% { transform: scaleY(var(--amp, 0.7)); }
}

/* VIP queue loop: you appear behind the queue, walk straight past it
   to the front (small overshoot), wait there, then the cycle repeats.
   14px per queue space; 70px = arriving one space behind the last
   person. 0% and 100% match so the loop is seamless. */
@keyframes gtxVipCycle {
    0% { transform: translateX(70px); opacity: 1; }
    6% { transform: translateX(70px); }
    17% { transform: translateX(-3px); }
    21% { transform: translateX(0); }
    88% { transform: translateX(0); opacity: 1; }
    92% { transform: translateX(0); opacity: 0; }
    93% { transform: translateX(70px); opacity: 0; }
    100% { transform: translateX(70px); opacity: 1; }
}

@keyframes gtxAuraPulse {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(255, 179, 92, 0.4)); }
    50% { filter: drop-shadow(0 0 6px rgba(255, 179, 92, 0.9)); }
}

/* ==========================================================================
   6. Order summary sidebar
   ========================================================================== */

body.page-configureproduct .panel-summary {
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.16));
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(16, 98, 254, 0.08) 0%, rgba(8, 20, 48, 0.2) 45%);
    overflow: hidden;
}

body.page-configureproduct .panel-summary .panel-heading {
    border-bottom: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.12));
}

body.page-configureproduct .panel-summary .panel-title {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

body.page-configureproduct .panel-summary .summary-list > li {
    padding: 9px 0;
    border-bottom: 1px dashed var(--gray-lighter-4, rgba(163, 198, 255, 0.12));
}

body.page-configureproduct .panel-summary .summary-list > li:last-child {
    border-bottom: none;
}

body.page-configureproduct .panel-summary .item-value-free {
    color: var(--brand-success, #24CC7D);
    font-weight: 600;
}

/* The chosen value of each option ("Slots: 8" -> the "8") in green so
   buyers can scan their selections at a glance */
body.page-configureproduct .panel-summary .item-name .item-optionname {
    color: var(--brand-success, #24CC7D);
    font-weight: 600;
}

body.page-configureproduct .panel-summary .price-amount {
    font-size: 26px;
    font-weight: 700;
    color: var(--gray-darker, #fff);
}

/* Total Due Today: while the enhancement script rolls the number the
   amount grows and glows, holding the larger size for most of the roll
   (~600ms) before settling back */
@keyframes gtx-price-pop {
    0% {
        transform: scale(1);
        text-shadow: none;
    }
    18% {
        transform: scale(1.22);
        text-shadow: 0 0 22px rgba(0, 154, 255, 0.85);
    }
    75% {
        transform: scale(1.22);
        text-shadow: 0 0 18px rgba(0, 154, 255, 0.6);
    }
    100% {
        transform: scale(1);
        text-shadow: none;
    }
}

body.page-configureproduct .panel-summary .price-amount.price-updated {
    display: inline-block; /* transforms don't apply to inline text */
    transform-origin: left center;
    animation: gtx-price-pop 0.7s ease;
}

@media (prefers-reduced-motion: reduce) {
    body.page-configureproduct .panel-summary .price-amount.price-updated {
        animation: none;
    }
}

/* Checkout CTA - gradient + glow */
body.page-configureproduct .btn-checkout {
    width: 100%;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
    color: #fff;
    box-shadow: 0 8px 24px -6px rgba(16, 98, 254, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

body.page-configureproduct .btn-checkout:hover,
body.page-configureproduct .btn-checkout:focus {
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -6px rgba(16, 98, 254, 0.65);
}

/* ==========================================================================
   7. Product header panel (compact hero)
   ========================================================================== */

/* The big "Configure Options" band is redundant next to the product
   hero below it - reclaim its vertical space. */
body.page-configureproduct .main-header {
    display: none;
}

body.page-configureproduct .main-body {
    padding-top: 28px;
}

body.page-configureproduct .product-config-info {
    position: relative;
    border: 1px solid var(--gray-lighter-4, rgba(163, 198, 255, 0.14));
    border-radius: 12px;
    background: linear-gradient(90deg, rgba(16, 98, 254, 0.12) 0%, rgba(8, 20, 48, 0.1) 60%);
    overflow: hidden;
}

/* Gradient accent along the left edge */
body.page-configureproduct .product-config-info::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-primary-gradient-h, linear-gradient(180deg, #003CB2, #1062fe));
}

body.page-configureproduct .product-config-info .panel-body {
    padding: 14px 20px;
}

body.page-configureproduct .product-config-info h2 {
    margin: 0;
}

/* Split by the enhancement script: category eyebrow + product headline */
body.page-configureproduct .product-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-primary-lighter, #009AFF);
    margin-bottom: 3px;
}

body.page-configureproduct .product-title {
    display: block;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--gray-darker, #fff);
}

/* ====================================================================
   GTX store restyle (product group listing, e.g. /store/most-popular-
   game-servers). Scoped to body.page-products so nothing else changes.

   Goal (Matthew, 26 Jul 2026): the stock listing shows 3 huge uneven
   cards per row (584px tall, 32px padding, 26px titles) because some
   products carry long warning descriptions. Descriptions are hidden
   here (they still show on the product configure page), cards are
   compact and uniform, and 4 fit per row on desktop.
   ==================================================================== */

/* ---- grid: 4-up on desktop, stepping down responsively ---- */
body.page-products .row.row-eq-height > .col {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (max-width: 1399.98px) {
    body.page-products .row.row-eq-height > .col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (max-width: 991.98px) {
    body.page-products .row.row-eq-height > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    body.page-products .row.row-eq-height > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- card: compact, uniform, footer pinned to the bottom ---- */
body.page-products .package {
    padding: 20px 16px 16px;
    display: flex;
    flex-direction: column;
}

body.page-products .package .package-side-left {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* the description is noise at this level - hide it */
body.page-products .package .package-body {
    display: none;
}

/* title takes the flexible space so the price + button rows line up
   across every card in a row, however many lines the name wraps to */
body.page-products .package .package-header {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

body.page-products .package .package-title {
    flex: 1 1 auto;
    font-size: 15px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* price block */
body.page-products .package .price-starting-from {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.65;
}

body.page-products .package .price-amount {
    font-size: 24px;
    line-height: 1.25;
}

body.page-products .package .price-cycle {
    font-size: 11px;
    opacity: 0.65;
}

/* footer: compact full-width button at the bottom of every card */
body.page-products .package .package-footer {
    margin-top: 14px;
}

body.page-products .package .btn-order-now {
    width: 100%;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 8px;
}

/* subtle lift on hover so the grid feels alive */
body.page-products .package {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.page-products .package:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    body.page-products .package {
        transition: none;
    }

    body.page-products .package:hover {
        transform: none;
    }
}

/* ====================================================================
   GTX upgrade page restyle (upgrade.php?type=package - the product
   up/downgrade picker). Scoped to body.page-upgrade.

   Goal (Matthew, 26 Jul 2026): stock cards are huge with full
   "Group - Product" titles and descriptions; hide the descriptions,
   compact the cards to a 4-up grid, and support the live search box
   + title split that upgrade-cards.js adds (group as a small muted
   label above the product name).
   ==================================================================== */

/* ---- grid: 4-up on desktop, stepping down responsively ---- */
body.page-upgrade .row.row-eq-height > .col {
    flex: 0 0 25%;
    max-width: 25%;
}

@media (max-width: 1399.98px) {
    body.page-upgrade .row.row-eq-height > .col {
        flex: 0 0 33.3333%;
        max-width: 33.3333%;
    }
}

@media (max-width: 991.98px) {
    body.page-upgrade .row.row-eq-height > .col {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (max-width: 575.98px) {
    body.page-upgrade .row.row-eq-height > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* ---- card: compact, uniform, button pinned to the bottom ---- */
body.page-upgrade form.package {
    padding: 18px 16px 16px;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.page-upgrade form.package:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.45);
}

/* descriptions are noise at this level */
body.page-upgrade form.package .package-features {
    display: none;
}

/* title: flexes so the select + button align across each row */
body.page-upgrade form.package .package-title {
    flex: 1 1 auto;
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 12px;
}

/* group label injected by upgrade-cards.js above the product name */
body.page-upgrade form.package .gtx-pkg-group {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.55;
    margin-bottom: 4px;
}

body.page-upgrade form.package .package-content {
    display: flex;
    flex-direction: column;
}

body.page-upgrade form.package .package-content .form-group {
    margin-bottom: 12px;
}

/* the billing cycle select is input-lg stock - slim it down */
body.page-upgrade form.package .package-content select.form-control {
    height: 38px;
    font-size: 12.5px;
    padding-top: 0;
    padding-bottom: 0;
}

body.page-upgrade form.package .package-footer .btn {
    width: 100%;
    font-size: 13px;
    padding: 9px 12px;
    border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    body.page-upgrade form.package {
        transition: none;
    }

    body.page-upgrade form.package:hover {
        transform: none;
    }
}

/* ---- filter box injected by upgrade-cards.js above the grid ----
   also used on the store listings (body.page-products), where the same
   script is injected */
body.page-upgrade .gtx-upgrade-search,
body.page-products .gtx-upgrade-search {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

body.page-upgrade .gtx-upgrade-search input,
body.page-products .gtx-upgrade-search input {
    flex: 1 1 auto;
    max-width: 380px;
    height: 42px;
    padding: 0 16px;
    font-size: 13px;
    color: inherit;
    background: var(--gray-faded, rgba(163, 198, 255, 0.06));
    border: 1px solid var(--gray-lighter-3, rgba(163, 198, 255, 0.28));
    border-radius: 10px;
    outline: none;
}

body.page-upgrade .gtx-upgrade-search input:focus,
body.page-products .gtx-upgrade-search input:focus {
    border-color: var(--brand-primary, #e87a2c);
    box-shadow: 0 0 0 3px rgba(232, 122, 44, 0.18);
}

body.page-upgrade .gtx-upgrade-search .gtx-upgrade-count,
body.page-products .gtx-upgrade-search .gtx-upgrade-count {
    font-size: 12px;
    opacity: 0.6;
    white-space: nowrap;
}

/* "no matches" note shown when the filter hides everything */
body.page-upgrade .gtx-upgrade-empty,
body.page-products .gtx-upgrade-empty {
    padding: 26px;
    text-align: center;
    font-size: 13.5px;
    opacity: 0.7;
    border: 1px dashed var(--gray-lighter-3, rgba(163, 198, 255, 0.28));
    border-radius: 10px;
}

/* ====================================================================
   GTX support tickets list restyle (supporttickets.php). Scoped to
   body.page-supportticketslist.

   Goal (Matthew, 26 Jul 2026): the stock DataTable stacks the ticket ID
   above the subject so rows are twice as tall as needed, "Requires
   Client Attention" doesn't stand out, and there's a big gap between
   the View filter and the table. tickets-list.js merges ID + subject
   onto one line (.gtx-oneline), hides the Department column, tags
   attention rows (tr.gtx-attention) and converts dates to "x ago".
   ==================================================================== */

/* ---- kill the gap between the filter row and the table header ----
   stock .table-top has NO margin; the space comes from what DataTables
   renders between it and the table (the hidden search row carries
   margin-top:30px stock, .listtable padding is var-driven and can be
   set by Lagom style settings). Neutralize every source, !important
   because theme-custom.css loads before the skin CSS on live. ---- */
body.page-supportticketslist .ticket-table .table-top {
    margin-bottom: 0;
}

body.page-supportticketslist .ticket-table .dataTables_wrapper {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

body.page-supportticketslist .ticket-table .dataTables_filter {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
}

body.page-supportticketslist .ticket-table .listtable {
    padding-top: 0 !important;
}

body.page-supportticketslist .ticket-table table.dataTable,
body.page-supportticketslist .ticket-table .table-list {
    margin-top: 0 !important;
}

/* ---- pre-init department hide: tickets-list.js adds .gtx-predept the
   moment the page loads so the column never flashes, then swaps it for
   the DataTables API hide (which removes the cells) once the table is
   initialised ---- */
body.page-supportticketslist #tableTicketsList.gtx-predept thead th:nth-child(2),
body.page-supportticketslist #tableTicketsList.gtx-predept tbody td:nth-child(2) {
    display: none;
}

/* ---- header row: small uppercase labels, tight padding ---- */
body.page-supportticketslist #tableTicketsList thead th {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}

/* ---- compact one-line rows ---- */
body.page-supportticketslist #tableTicketsList tbody td {
    padding-top: 9px;
    padding-bottom: 9px;
    font-size: 13px;
    vertical-align: middle;
}

/* the JS moves the subject span into the ID div and adds this class */
body.page-supportticketslist #tableTicketsList .gtx-oneline {
    align-items: baseline;
    margin-bottom: 0;
}

body.page-supportticketslist #tableTicketsList .gtx-oneline .gtx-sep {
    margin: 0 8px;
    opacity: 0.35;
    font-weight: 400;
}

body.page-supportticketslist #tableTicketsList .gtx-oneline .p-sm {
    font-weight: 400;
}

/* ---- status pills (color comes from the stock --status-color var) ---- */
body.page-supportticketslist #tableTicketsList .status-col .status {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--status-color, inherit);
    background: color-mix(in srgb, var(--status-color, #8aa) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-color, #8aa) 35%, transparent);
}

/* ---- "Requires Client Attention": the one status the customer must
   act on - tinted row + red left edge (tr.gtx-attention set by JS) ---- */
body.page-supportticketslist #tableTicketsList tr.gtx-attention > td {
    background: rgba(221, 74, 74, 0.07);
}

body.page-supportticketslist #tableTicketsList tr.gtx-attention > td:first-child {
    box-shadow: inset 3px 0 0 rgba(221, 74, 74, 0.85);
}

/* ---- rows are links (data-url): make that obvious ---- */
body.page-supportticketslist #tableTicketsList tbody tr[data-url] {
    cursor: pointer;
}

body.page-supportticketslist #tableTicketsList tbody tr[data-url]:hover > td {
    background: rgba(163, 198, 255, 0.06);
}

body.page-supportticketslist #tableTicketsList tr.gtx-attention[data-url]:hover > td {
    background: rgba(221, 74, 74, 0.12);
}

/* ---- date column: quieter (the JS swaps in "x ago" with the full
   date kept as a tooltip) ---- */
body.page-supportticketslist #tableTicketsList tbody td.text-nowrap {
    font-size: 12.5px;
    opacity: 0.75;
}

/* ---- footer: compact "Show N entries" + pagination ---- */
body.page-supportticketslist .ticket-table .dataTables_length,
body.page-supportticketslist .ticket-table .dataTables_paginate {
    font-size: 12px;
    margin-top: 10px;
}

body.page-supportticketslist .ticket-table .dataTables_paginate .paginate_button {
    padding: 4px 9px;
}

body.page-supportticketslist .ticket-table .dataTables_length select {
    width: auto;
    display: inline-block;
}

/* ====================================================================
   GTX view ticket restyle (viewticket.php). Scoped to
   body.page-viewticket.

   Goal (Matthew, 27 Jul 2026): same treatment as the tickets list
   (compact header, status pills, relative dates via ticket-view.js)
   plus a comfort pass on the reply editor so replying feels nice:
   bigger friendlier textarea, orange focus ring, better toolbar
   targets, gradient Send button, drop-zone style attachments row.
   ==================================================================== */

/* ---- page header: same compact treatment as the checkout page ---- */
body.page-viewticket .main-header {
    padding-top: 18px;
}

body.page-viewticket h1.main-header-title {
    font-size: 24px;
}

body.page-viewticket .main-body {
    padding-top: 22px;
}

/* ==================== reply editor ==================== */

/* the WHMCS markdown editor renders a mono font at a cramped height;
   customers write prose, not code - body font, roomier, resizable */
body.page-viewticket .md-editor > textarea.markdown-editor {
    min-height: 170px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    padding: 16px !important;
    resize: vertical;
}

body.page-viewticket .md-editor {
    border-radius: 10px;
    overflow: hidden;
}

/* focus: clear "you are typing here" ring (.gtx-focus is toggled by
   ticket-view.js since the theme's own .active is unreliable) */
body.page-viewticket .md-editor.active,
body.page-viewticket .md-editor.gtx-focus {
    border-color: var(--brand-primary, #e87a2c);
    box-shadow: 0 0 0 3px rgba(232, 122, 44, 0.15);
}

/* toolbar buttons: bigger hit targets with a rounded hover */
body.page-viewticket .md-editor > .btn-toolbar > .btn-group .btn:not(.btn-primary) {
    width: 34px;
    height: 30px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

body.page-viewticket .md-editor > .btn-toolbar > .btn-group .btn:not(.btn-primary):hover {
    background: rgba(163, 198, 255, 0.08);
}

/* footer: word count left, "Ctrl+Enter to send" hint (ticket-view.js)
   pushed right */
body.page-viewticket .md-editor .md-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-viewticket .gtx-send-hint {
    margin-left: auto;
    font-size: 11px;
    letter-spacing: 0.02em;
    opacity: 0.55;
    white-space: nowrap;
}

body.page-viewticket .gtx-send-hint kbd {
    padding: 1px 5px;
    font-size: 10px;
    border: 1px solid rgba(163, 198, 255, 0.35);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: rgba(163, 198, 255, 0.08);
    color: inherit;
}

@media (max-width: 767.98px) {
    body.page-viewticket .gtx-send-hint {
        display: none;
    }
}

/* attachments row: read as a drop-in zone, not a dead line of text */
body.page-viewticket .attachements-container .add {
    border: 1px dashed rgba(163, 198, 255, 0.35);
    border-radius: 8px;
    padding: 10px 14px;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-viewticket .attachements-container .add:hover {
    border-color: var(--brand-primary, #e87a2c);
    background: rgba(232, 122, 44, 0.06);
}

/* Send Message: the page's one real action - gradient CTA */
body.page-viewticket .tab-actions .btn-primary {
    background: linear-gradient(135deg, #f0913a, #e2601c);
    border: none;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 8px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.page-viewticket .tab-actions .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(232, 122, 44, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    body.page-viewticket .tab-actions .btn-primary {
        transition: none;
    }

    body.page-viewticket .tab-actions .btn-primary:hover {
        transform: none;
    }
}

/* ==================== ticket messages ==================== */

/* dates are swapped to "x ago" by ticket-view.js (tooltip keeps the
   full date) - render them quiet */
body.page-viewticket .ticket-reply .date {
    font-size: 12px;
    opacity: 0.7;
}

body.page-viewticket .ticket-reply-message {
    font-size: 13.5px;
    line-height: 1.65;
}

/* ==================== ticket information sidebar ==================== */

/* same status pill as the tickets list (inert if the .status span with
   --status-color is absent) */
body.page-viewticket .panel-sidebar .status {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    white-space: nowrap;
    color: var(--status-color, inherit);
    background: color-mix(in srgb, var(--status-color, #8aa) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-color, #8aa) 35%, transparent);
}

/* ==================== new-reply toast ==================== */

/* shown by ticket-view.js when its 45s background check finds a new
   .ticket-reply on the page. Bottom-LEFT: bottom-right belongs to the
   live chat widget, and the site header is too tall for a top corner */
body.page-viewticket .gtx-reply-toast {
    position: fixed;
    left: 22px;
    bottom: 22px;
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 44px);
    padding: 14px 16px;
    border-radius: 10px;
    background: var(--panel-bg, #16233d);
    border: 1px solid rgba(163, 198, 255, 0.18);
    border-left: 3px solid var(--brand-primary, #e87a2c);
    box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.65);
    animation: gtx-toast-in 0.25s ease-out;
}

@keyframes gtx-toast-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-viewticket .gtx-reply-toast {
        animation: none;
    }
}

body.page-viewticket .gtx-reply-toast-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

body.page-viewticket .gtx-reply-toast-text strong {
    font-size: 13.5px;
}

body.page-viewticket .gtx-reply-toast-text span {
    font-size: 12px;
    opacity: 0.65;
}

body.page-viewticket .gtx-reply-toast-view {
    flex-shrink: 0;
    padding: 8px 16px;
    border: none;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(135deg, #f0913a, #e2601c);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.page-viewticket .gtx-reply-toast-view:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px -8px rgba(232, 122, 44, 0.7);
}

@media (prefers-reduced-motion: reduce) {
    body.page-viewticket .gtx-reply-toast-view {
        transition: none;
    }

    body.page-viewticket .gtx-reply-toast-view:hover {
        transform: none;
    }
}

body.page-viewticket .gtx-reply-toast-close,
body.page-viewticket .gtx-reply-toast-mute {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

body.page-viewticket .gtx-reply-toast-mute {
    font-size: 13px;
}

body.page-viewticket .gtx-reply-toast-close:hover,
body.page-viewticket .gtx-reply-toast-mute:hover {
    opacity: 1;
    background: rgba(163, 198, 255, 0.1);
}

/* ==================== collapsible reply box ==================== */

/* chevron in the reply panel's top corner (added by ticket-view.js) */
body.page-viewticket .panel-ticket-reply {
    position: relative;
}

body.page-viewticket .gtx-reply-collapse {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    opacity: 0.5;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.15s ease, background 0.15s ease;
}

body.page-viewticket .gtx-reply-collapse:hover {
    opacity: 1;
    background: rgba(163, 198, 255, 0.1);
}

/* the collapsed state: a full-width, obviously-clickable bar */
body.page-viewticket .gtx-reply-collapsed-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 15px 20px;
    border: 1px dashed rgba(232, 122, 44, 0.55);
    border-radius: 10px;
    background: rgba(232, 122, 44, 0.06);
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

body.page-viewticket .gtx-reply-collapsed-bar:hover {
    border-color: var(--brand-primary, #e87a2c);
    border-style: solid;
    background: rgba(232, 122, 44, 0.12);
}

body.page-viewticket .gtx-reply-collapsed-bar .gtx-rcb-icon {
    font-size: 16px;
    color: var(--brand-primary, #e87a2c);
}

body.page-viewticket .gtx-reply-collapsed-bar .gtx-rcb-chevron {
    margin-left: auto;
    opacity: 0.6;
}

/* ====================================================================
   GTX cancellation request restyle (clientarea.php?action=cancel).
   Scoped to body.page-clientareacancelrequest.

   Companion to cancel-guard.js (Matthew, 27 Jul 2026): the guard adds
   the hint under the reason box (.gtx-cancel-hint) and the live
   explanation under the type dropdown (.gtx-cancel-note). This block
   styles those plus a general comfort pass: compact header, roomier
   reason box with the same orange focus ring as the ticket pages, and
   an unmistakably locked submit button.
   ==================================================================== */

/* ---- page header: same compact treatment as the other pages ---- */
body.page-clientareacancelrequest .main-header {
    padding-top: 18px;
}

body.page-clientareacancelrequest h1.main-header-title {
    font-size: 24px;
}

body.page-clientareacancelrequest .main-body {
    padding-top: 22px;
}

/* ---- product card: compact, with the huge h4 split by
   cancel-guard.js into a small group label + normal-sized name ---- */
body.page-clientareacancelrequest .gtx-cancel-product {
    padding: 14px 18px;
    border-left: 3px solid var(--brand-primary, #e87a2c);
    border-radius: 8px;
}

body.page-clientareacancelrequest .gtx-cancel-product h4 {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

body.page-clientareacancelrequest .gtx-cancel-product .gtx-cp-group {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    opacity: 0.55;
}

body.page-clientareacancelrequest .gtx-cancel-product .gtx-cp-name {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
}

/* the domain / IP line under the name */
body.page-clientareacancelrequest .gtx-cancel-product .text-small {
    display: inline-block;
    margin-top: 5px;
    font-size: 12px;
    opacity: 0.65;
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

/* ---- reason box: comfortable to type in ---- */
body.page-clientareacancelrequest #cancellationreason {
    min-height: 140px;
    font-size: 14px;
    line-height: 1.6;
    padding: 14px 16px;
    resize: vertical;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

body.page-clientareacancelrequest #cancellationreason:focus {
    border-color: var(--brand-primary, #e87a2c);
    box-shadow: 0 0 0 3px rgba(232, 122, 44, 0.15);
}

/* ---- hint under the reason box (added by cancel-guard.js) ---- */
body.page-clientareacancelrequest .gtx-cancel-hint {
    margin: 8px 0 0;
    font-size: 12.5px;
    opacity: 0.65;
}

body.page-clientareacancelrequest .gtx-cancel-hint-ok {
    display: none;
}

body.page-clientareacancelrequest .gtx-cancel-hint-error {
    color: #ff6b6b;
    opacity: 1;
    font-weight: 600;
}

/* ---- live note under the cancellation type dropdown ---- */
body.page-clientareacancelrequest .gtx-cancel-note {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.55;
}

body.page-clientareacancelrequest .gtx-cancel-note strong {
    display: block;
    margin-bottom: 2px;
}

body.page-clientareacancelrequest .gtx-cancel-note-danger {
    background: rgba(221, 74, 74, 0.1);
    border: 1px solid rgba(221, 74, 74, 0.4);
    box-shadow: inset 3px 0 0 rgba(221, 74, 74, 0.85);
}

body.page-clientareacancelrequest .gtx-cancel-note-info {
    background: rgba(36, 204, 125, 0.08);
    border: 1px solid rgba(36, 204, 125, 0.35);
    box-shadow: inset 3px 0 0 rgba(36, 204, 125, 0.8);
}

/* ---- locked submit: make the disabled state unmistakable ---- */
body.page-clientareacancelrequest .panel-footer .btn-danger[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: saturate(0.6);
}

/* ---- "Submit a Ticket" retention button (added by cancel-guard.js) ---- */
body.page-clientareacancelrequest .panel-footer .gtx-cancel-ticket {
    margin-left: 6px;
}

body.page-clientareacancelrequest .panel-footer .gtx-cancel-ticket i {
    margin-right: 6px;
}

/* ====================================================================
   GTX checkout restyle (scoped to the checkout page only)
   Goal: cleaner, less scrolling. CSS only - nothing inside the payment
   iframes' containers is moved, hidden, resized or transformed, so
   Stripe / PayPal / Apple Pay / Google Pay behave exactly as stock.
   Spacing note: Lagom spaces checkout blocks with inner margins (e.g.
   m-b-40 on the promo box), NOT margins on .section - so we shrink
   those inner spacers instead of touching section boxes.
   ==================================================================== */

/* ---- Section titles: same compact uppercase treatment as the
   configure page, with numbered chips on the two real steps ---- */
body.page-viewcart .main-content h2.section-title,
body.page-viewcart .main-sidebar h2.section-title,
body.page-viewcart .main-content .section-heading h3.section-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.92;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    position: relative;
    padding-bottom: 6px;
}

body.page-viewcart .main-content h2.section-title::after,
body.page-viewcart .main-sidebar h2.section-title::after,
body.page-viewcart .main-content .section-heading h3.section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
}

body.page-viewcart .main-content .section-header {
    margin-bottom: 10px;
}

/* Step chips: 1 Billing Details, 2 Payment Method (the order review at
   the top is self-evidently first) */
body.page-viewcart #frmCheckout > .section:first-of-type h2.section-title::before,
body.page-viewcart #paymentGatewaysDetails h2.section-title::before {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
    flex: 0 0 auto;
}

body.page-viewcart #frmCheckout > .section:first-of-type h2.section-title::before {
    content: "1";
}

body.page-viewcart #paymentGatewaysDetails h2.section-title::before {
    content: "2";
}

/* ---- Cart review: compact chrome + 2-col option breakdown ---- */
body.page-viewcart .panel-cart .panel-heading.cart-heading {
    padding: 9px 18px;
}

body.page-viewcart .panel-cart .panel-body.cart-item {
    padding: 13px 18px 11px;
}

body.page-viewcart .panel-cart .cart-item-title-main {
    font-size: 14.5px;
    font-weight: 700;
}

body.page-viewcart .panel-cart .panel-footer {
    padding: 12px 18px;
}

/* the per-option breakdown: same rows, half the vertical size
   (bootstrap's column layout is kept so long values wrap naturally) */
body.page-viewcart .panel-cart .prod-addons-container {
    margin-top: 4px;
}

body.page-viewcart .panel-cart .addon-item.row {
    font-size: 12px;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
    padding: 1px 0;
}

body.page-viewcart .panel-cart .addon-item .addon-name {
    flex: 1 1 auto;
    max-width: none;
}

body.page-viewcart .panel-cart .addon-item .item-name {
    opacity: 0.6;
}

/* the CHOSEN value ("CPU Priority: Normal CPU Priority" -> the value) in
   green, same brand-success as the configure-page summary values */
body.page-viewcart .panel-cart .addon-item .item-value {
    color: var(--brand-success, #24CC7D);
    font-weight: 600;
}

/* the lone "-" quantity cells say nothing - drop the noise */
body.page-viewcart .panel-cart .addon-item .addon-qty-empty {
    display: none;
}

body.page-viewcart .panel-cart .addon-item .addon-price {
    font-size: 12px;
    opacity: 0.75;
}

/* ---- Page header: smaller title, kill the 96px of dead space between
   "Review & Checkout" and Billing Details (48px .main-body padding +
   48px .billing-details-form margin) ---- */
body.page-viewcart .main-header {
    padding-top: 18px;
}

body.page-viewcart h1.main-header-title {
    font-size: 24px;
}

body.page-viewcart .main-body {
    padding-top: 22px;
}

body.page-viewcart .main-body .billing-details-form {
    margin-top: 0;
}

/* ---- Edit pencil: the only way back to reconfigure the product, so
   pull it out of the gray icon row with the brand orange (tooltip text
   is swapped to "Change Configuration" by checkout-layout.js) ---- */
body.page-viewcart .panel-cart .cart-item-actions a[href*="confproduct"] {
    color: var(--brand-primary, #e87a2c);
    /* !important: stock .btn-icon forces a transparent background and
       theme-custom.css loads before the skin CSS on the live site */
    background: rgba(232, 122, 44, 0.12) !important;
    border: 1px solid rgba(232, 122, 44, 0.45);
    border-radius: 8px;
    animation: gtx-edit-pulse 2.4s ease-out 0.8s 1;
}

body.page-viewcart .panel-cart .cart-item-actions a[href*="confproduct"]:hover,
body.page-viewcart .panel-cart .cart-item-actions a[href*="confproduct"]:focus {
    color: #fff !important;
    background: var(--brand-primary, #e87a2c) !important;
    border-color: var(--brand-primary, #e87a2c);
}

/* one-off double glow on load to catch the eye, then it stays quiet */
@keyframes gtx-edit-pulse {
    0%, 40%, 80%, 100% {
        box-shadow: 0 0 0 0 rgba(232, 122, 44, 0);
    }
    20%, 60% {
        box-shadow: 0 0 0 6px rgba(232, 122, 44, 0.28);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.page-viewcart .panel-cart .cart-item-actions a[href*="confproduct"] {
        animation: none;
    }
}

/* ---- Promotion: loud full-width panel -> slim quiet line ---- */
body.page-viewcart .search-box.search-box-primary {
    background: var(--gray-faded, rgba(163, 198, 255, 0.05));
    border: 1px dashed var(--gray-lighter-3, rgba(163, 198, 255, 0.28));
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 26px;
}

body.page-viewcart .search-box.search-box-primary .form-control {
    height: 40px;
}

/* button flush with the 40px input (stock is 44px) */
body.page-viewcart .search-box.search-box-primary .btn {
    height: 40px;
    padding-top: 0;
    padding-bottom: 0;
}

/* Lagom reuses its search component here; a promo field is not a search,
   so swap the magnifying glass for a price-tag */
body.page-viewcart .search-box-primary .search-field-icon .lm-search {
    display: none;
}

body.page-viewcart .search-box-primary .search-field-icon::before {
    content: "\1F3F7\FE0F";
    font-size: 15px;
    line-height: 1;
}

/* ---- Billing Details: denser account + address fields ---- */
body.page-viewcart #frmCheckout > .section:first-of-type .panel-body {
    padding: 18px 20px 14px;
}

body.page-viewcart #frmCheckout > .section:first-of-type .form-group {
    margin-bottom: 10px;
}

body.page-viewcart #frmCheckout > .section:first-of-type .control-label {
    font-size: 12px;
    margin-bottom: 4px;
}

body.page-viewcart #frmCheckout > .section:first-of-type .form-control {
    height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* social sign-in block: tighter text + button row */
body.page-viewcart .panel-body.social-wide > div:first-child {
    font-size: 12px;
}

body.page-viewcart .panel-body.social-wide > div:first-child p {
    margin-bottom: 6px;
}

body.page-viewcart .panel-body.social-wide > div:first-child .btn {
    padding-top: 6px;
    padding-bottom: 6px;
}

/* sub-headings inside the account panel (Personal Information, Billing
   Address, Account Security): small uppercase markers, tighter gaps */
body.page-viewcart #frmCheckout > .section:first-of-type .panel-body h6 {
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--brand-primary-lighter, #009AFF);
    margin-bottom: 10px;
}

body.page-viewcart #frmCheckout > .section:first-of-type .panel-body h6.m-t-2x {
    margin-top: 18px;
}

/* ---- Payment Method + Payment Details: deliberately left stock ---- */

/* ---- Page header: a little less air above "Review & Checkout" ---- */
body.page-viewcart .main-header {
    padding-top: 28px;
}

/* ---- Fraud/IP notice: quiet one-liner instead of a tall banner ---- */
body.page-viewcart .alert.checkout-security-msg {
    padding: 10px 16px;
    font-size: 12px;
}

/* ---- News + notes: compact tail ---- */
body.page-viewcart .main-content .section .section-header p {
    opacity: 0.75;
    margin-bottom: 6px;
}

body.page-viewcart .panel-switch {
    margin-bottom: 16px;
}

body.page-viewcart #frmCheckout textarea.form-control {
    min-height: 64px;
    height: 64px;
}

/* ====================================================================
   Cart review inside the sidebar (checkout-layout.js adds
   .gtx-cart-in-sidebar to <body> after moving the cart section; every
   rule below is inert unless that move actually happened)
   ==================================================================== */

/* Lagom's sticky wrapper is a viewport-height flex column that lets the
   summary shrink (to 0px on smaller screens once anything sits above it).
   Instead: the summary and promo always keep their natural height, and
   the CART is the flexible block - when the screen is too short, its
   option list scrolls inside the panel while the product row, footer
   buttons, totals and Checkout button all stay visible. */
body.page-viewcart.gtx-cart-in-sidebar .main-sidebar .sidebar-sticky {
    overflow-y: auto; /* last-resort scroll on very short screens */
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky > #orderSummary,
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky > .section:has(.search-box-primary) {
    flex-shrink: 0;
}

/* pass the flexible height down the chain to the cart item body */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky > .section:has(.panel-cart) {
    flex: 0 1 auto;
    min-height: 250px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky > .section:has(.panel-cart) > .section-body,
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky > .section:has(.panel-cart) > .section-body > form {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .panel-body.cart-item {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 14px 8px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .panel-footer {
    flex-shrink: 0;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .section {
    margin-bottom: 14px;
}

/* ---- Compact Order Summary (sidebar-cart mode): stock card wastes
   ~110px on padding and a stacked total; reclaim it for the cart ---- */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .panel-heading {
    padding: 14px 18px 12px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .panel-title {
    font-size: 18px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .panel-body {
    padding: 0 18px 12px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary #recurring {
    padding-top: 10px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .summary-list .list-item {
    padding: 2px 0;
    font-size: 12.5px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .panel-footer {
    padding: 12px 18px 16px;
}

/* "Total Due Today" label and price on one line instead of stacked */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .price.price-left-h {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .price-total {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky #orderSummary .price-amount {
    font-size: 26px;
    line-height: 1.2;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart {
    margin-bottom: 0;
}

/* "Your Order" header, styled like the Order Summary heading */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart::before {
    content: "Your Order";
    display: block;
    padding: 10px 14px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-heading-color, #fff);
    border-bottom: 1px solid var(--gray-lighter-3, rgba(163, 198, 255, 0.15));
}

/* the column-caption bar means nothing once stacked */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .panel-heading.cart-heading {
    display: none;
}

/* stack the product row for a ~340px column */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .cart-item > .row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-name {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 6px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .cart-item-title-main {
    font-size: 13px;
    line-height: 1.4;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-qty {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-qty .input-number {
    max-width: 88px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-qty,
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-price,
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-actions {
    padding-left: 4px;
    padding-right: 4px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-price {
    flex: 0 1 auto;
    width: auto;
    max-width: none;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-price .cart-item-pricing {
    width: auto;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-price .cart-item-pricing .btn {
    width: auto;
    white-space: nowrap;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-actions {
    flex: 0 0 auto;
    width: auto;
    margin-left: auto;
}

/* option breakdown + qty/price stay on their own full-width line */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-addons {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: 6px;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .prod-addons-container {
    margin: 2px 0 4px;
}

/* addon rows: stack name above right-aligned price is overkill at this
   width; keep name left, price right on one 11.5px line */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .addon-item.row {
    font-size: 11.5px;
    line-height: 1.45;
}

/* slim footer buttons side by side */
body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .panel-footer {
    padding: 10px 14px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

body.page-viewcart.gtx-cart-in-sidebar .sidebar-sticky .panel-cart .panel-footer .btn {
    font-size: 11px;
    padding: 5px 8px;
}

/* ---- Promotion box under Order Summary (gtx-promo-in-sidebar) ---- */
/* the stock section header is replaced by a small uppercase label on the
   box itself (the JS also renames the stock title for narrower layouts) */
body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .section:has(.search-box-primary) .section-header {
    display: none;
}

body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .search-box.search-box-primary {
    margin-bottom: 0;
    padding: 10px 12px 12px;
}

body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .search-box.search-box-primary::before {
    content: "Promotion Code";
    display: block;
    margin: 0 2px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, rgba(255, 255, 255, 0.55));
}

/* the sidebar is ~340px: keep input + button on one comfortable line */
body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .search-box-primary form,
body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .search-box-primary .input-group {
    align-items: center;
}

body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .search-box-primary .form-control {
    height: 40px;
    font-size: 12.5px;
}

body.page-viewcart.gtx-promo-in-sidebar .sidebar-sticky .search-box-primary .btn {
    font-size: 12px;
    height: 40px;
    padding: 0 12px;
    white-space: nowrap;
}

/* ---- Sticky sidebar CTA: same gradient treatment as configure ---- */
body.page-viewcart .btn-checkout {
    width: 100%;
    border: none;
    border-radius: 10px;
    font-weight: 700;
    background: var(--brand-primary-gradient-h, linear-gradient(90deg, #003CB2, #1062fe));
    box-shadow: 0 8px 24px -6px rgba(16, 98, 254, 0.55);
    transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

body.page-viewcart .btn-checkout:hover,
body.page-viewcart .btn-checkout:focus {
    color: #fff;
    filter: brightness(1.12);
    transform: translateY(-1px);
    box-shadow: 0 12px 30px -6px rgba(16, 98, 254, 0.65);
}