/*!
 * 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;
}

/* 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);
}

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)
   ========================================================================== */

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

@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: 12px 8px 10px;
    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: 13px;
    font-weight: 700;
    line-height: 1.25;
}

body.page-configureproduct .location-tile-meta {
    font-size: 11px;
    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: player icons + per-slot value --- */
body.page-configureproduct .slots-visual {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

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

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 .slots-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

body.page-configureproduct .slots-note {
    font-size: 10px;
    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;
}

/* --- 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;
}

body.page-configureproduct .vip-queue {
    display: flex;
    gap: 3px;
}

body.page-configureproduct .ticket {
    width: 10px;
    height: 14px;
    border-radius: 2px;
    background: rgba(163, 198, 255, 0.22);
}

body.page-configureproduct .ticket-gold {
    background: linear-gradient(180deg, #ffd28a, #ff9d3c);
    box-shadow: 0 0 5px rgba(255, 160, 60, 0.5);
}

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;
}

/* --- 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 .option-card-vip.selected .ticket-gold {
        animation: gtxTicketJump 0.45s cubic-bezier(0.34, 1.2, 0.64, 1);
    }
}

@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); }
}

@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)); }
}

@keyframes gtxTicketJump {
    from { transform: translateX(52px); }
    to { transform: translateX(0); }
}

/* ==========================================================================
   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;
}

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

/* 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);
}