@import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap');

:root {
    --neon-cyan: #00d9ff;
    --neon-green: #00ff41;
    --neon-magenta: #ff00ff;
    --neon-yellow: #FFC700;

    --bg-card: #0f0f1e;
    --bg-darker: #1a1a2e;
    --bg-darkest: #0a0e27;

    --border-cyan: #00d9ff;

    /* Subtle translucent card surface shared with the /search console
       listings, so both pages read as the same dashboard. */
    --console-card: rgba(10, 10, 20, 0.55);
    --console-border: rgba(0, 255, 255, 0.25);

    --text-primary: #ffffff;
    --text-secondary: #a5b4fc;
    --text-muted: #B8B8C8;
}

#pricing-main-section {
    font-family: 'Electrolize', sans-serif;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1d35 100%);
    min-height: 100vh;
    padding: 20px 0 0 0;
    position: relative;
    overflow-x: hidden;
}

#pricing-main-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 217, 255, 0.025) 0px,
        transparent 2px,
        transparent 4px,
        rgba(0, 217, 255, 0.025) 6px
    );
    pointer-events: none;
    z-index: 0;
}

.container2 {
    max-width: 1600px;
    margin: 0 auto !important;
    padding: 0 20px 40px 20px !important;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Hero Section */
/* Results-state identity bar. This banner is display:none on the landing
   state (see below), so these values only ever apply once results show --
   kept slim so results sit near the top rather than below a full hero. */
.pricing-hero-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    border: 2px solid var(--neon-green);
    box-shadow:
        0 0 12px rgba(0, 255, 65, 0.25),
        inset 0 0 24px rgba(0, 255, 65, 0.08);
    position: relative;
    overflow: hidden;

    padding: 0.85rem 1.5rem;
    border-radius: 0;
    margin-bottom: 24px;
}

.hero-gradient {
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 65, 0.03) 0px,
        transparent 2px,
        transparent 4px,
        rgba(0, 255, 65, 0.03) 6px
    );
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}

.hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(0, 255, 65, 0.05) 50%, transparent 100%),
        repeating-linear-gradient(
            90deg,
            rgba(255, 0, 255, 0.02) 0px,
            transparent 2px,
            transparent 4px,
            rgba(255, 0, 255, 0.02) 6px
        );
    /* Animated scanline removed -- distracting motion on a thin bar; the
       static texture above is enough to keep the retro feel. */
}

@keyframes scanline {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100%); }
}

.hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.hero-headline {
    font-family: 'Electrolize', 'Courier New', monospace;
    font-size: 1.25rem;
    color: var(--neon-green);
    text-shadow:
        2px 2px 0px var(--neon-magenta),
        4px 4px 0px rgba(0, 0, 0, 0.5),
        0 0 10px rgba(0, 255, 65, 0.5);
    margin: 0;
    letter-spacing: 2px;
}

.hero-subtext {
    font-family: 'Electrolize', 'Courier New', monospace;
    font-size: 0.85rem;
    color: var(--neon-cyan);
    text-shadow:
        1px 1px 0px var(--neon-magenta),
        0 0 8px rgba(0, 217, 255, 0.6);
    margin: 0;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.hero-subtext::before {
    content: '> ';
    color: var(--neon-magenta);
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Corner brackets, scaled down + pulled in so the slim padding doesn't
   clip them against the section's overflow:hidden. */
.hero-content::before,
.hero-content::after {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    border: 2px solid var(--neon-magenta);
}

.hero-content::before {
    top: -0.4rem;
    left: -0.4rem;
    border-right: none;
    border-bottom: none;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

.hero-content::after {
    bottom: -0.4rem;
    right: -0.4rem;
    border-left: none;
    border-top: none;
    box-shadow: 0 0 8px rgba(255, 0, 255, 0.5);
}

/* Search Section -- slim inline row matching /search (no heavy card) */
.search-section {
    width: 100%;
    margin-bottom: 40px;
}

.search-container {
    max-width: 800px;
    margin: 0 auto;
}

.search-row {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 25px;
    justify-content: center;
}

.search-wrapper {
    flex: 0 0 500px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--console-border);
    border-radius: 6px;
    padding: 0 12px;
    box-shadow: none;
    backdrop-filter: none;
    transition: none;
}

.search-wrapper:hover,
.search-wrapper:focus-within {
    border-color: var(--console-border);
    box-shadow: none;
    transform: none;
}

.search-input {
    font-family: 'Electrolize', sans-serif;
    width: 100%;
    border: none;
    outline: none;
    padding: 6px 0;
    font-size: 0.85rem;
    background: transparent;
    color: #00FFFF;
}

.search-input::placeholder {
    font-family: 'Electrolize', sans-serif;
    color: #B8B8C8;
    opacity: 1;
}

.search-button {
    display: inline-block;
    font-family: 'Electrolize', sans-serif;
    background: linear-gradient(135deg, #00d9ff 0%, #00ff41 100%);
    color: #0a0e27;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: filter 0.2s ease, box-shadow 0.2s ease;
    white-space: nowrap;
    box-shadow: 0 0 16px rgba(0, 217, 255, 0.25);
    flex: 0 0 130px;
}

.search-button:hover {
    filter: brightness(1.08);
    box-shadow: 0 0 22px rgba(0, 255, 65, 0.4);
}

.search-button:active {
    transform: translateY(0);
}

/* Landing state -- logo + copy + centered search, vertically centered,
   mirroring the /search landing. The `pricing-landing` class is removed
   on first search (see pricing.blade.php beforeSend). */
#pricing-main-section.pricing-landing {
    display: flex;
    align-items: center;
}

#pricing-main-section.pricing-landing .container2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-bottom: 40px;
    transform: translateY(40px);
}

/* Landing hides the results-state chrome... */
#pricing-main-section.pricing-landing .pricing-hero-section,
#pricing-main-section.pricing-landing .results-container,
#pricing-main-section.pricing-landing .footer-info {
    display: none;
}

/* ...and once searched, the landing intro is gone for good. */
#pricing-main-section:not(.pricing-landing) .pricing-landing-intro {
    display: none;
}

.pricing-landing-intro {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}

.pricing-landing-intro .pixel-logo {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.pricing-landing-intro .hero-subtitle,
.pricing-landing-intro .hero-description {
    width: 100%;
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

#pricing-main-section.pricing-landing .search-section {
    width: 100%;
    margin-bottom: 0;
}

#pricing-main-section.pricing-landing .search-container {
    max-width: 640px;
    margin: 0 auto;
}

/* Drop the row's results-state bottom gap on the landing so the stats line
   sits directly under the search box (matches the /search landing spacing). */
#pricing-main-section.pricing-landing .search-row {
    justify-content: flex-start;
    margin-bottom: 0;
}

/* The search box stays 640px in both states (see base .search-wrapper),
   so it doesn't change size when the landing collapses on first search. */

/* Landing stats line -- left-aligned beneath the search box (mirrors the
   /search landing). Shown only on the landing; once searched it's hidden
   along with the rest of the landing intro chrome. */
#pricing-main-section:not(.pricing-landing) .search-stats {
    display: none;
}
.search-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: flex-start;
    gap: 6px 11px;
    /* 645px = input (500) + gap (15) + button (130); auto margins center this
       block to match the search row, so flex-start aligns stats to the input's
       left edge. */
    width: 645px;
    max-width: 100%;
    margin: 10px auto 0;
    font-family: 'Electrolize', sans-serif;
}
.search-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
}
.search-stat-val {
    font-size: 0.78rem;
    font-weight: 700;
    color: #00d9ff;
    text-shadow: 0 0 12px rgba(0, 217, 255, 0.3);
}
.search-stat-label {
    font-size: 0.58rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: rgba(184, 184, 200, 0.6);
}
.search-stat-sep {
    color: rgba(0, 217, 255, 0.35);
}

/* Invisible spacer mirroring the /search browse-by-console link (omitted here)
   so the centered landing content has the same height -- and therefore the
   same top -- as /search. Dimensions copied from search/main.css; hidden once
   searched, like the rest of the landing intro. */
.search-browse-link {
    width: 645px;
    max-width: 100%;
    margin: 14px auto 0;
}
.search-browse-link a {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}
#pricing-main-section:not(.pricing-landing) .search-browse-link {
    display: none;
}

/* Console Filter Section -- sits between search and results, full container width */
.console-filter-section {
    padding-bottom: 10px;
    border-bottom: 2px solid #1a1a2e;
    margin-bottom: 14px;
}

/* ── Console multi-select dropdown (same control as /search) ─────────────── */
.console-dropdown {
    position: relative;
    flex: 0 0 auto;
    font-family: 'Electrolize', sans-serif;
}
.console-dropdown-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 220px;
    background: #1a1a2e;
    border: 1px solid rgba(0, 217, 255, 0.35);
    color: #00d9ff;
    padding: 6px 12px;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.console-dropdown-trigger:hover,
.console-dropdown.open .console-dropdown-trigger {
    border-color: #00d9ff;
    box-shadow: 0 0 10px rgba(0, 217, 255, 0.35);
}
.console-dropdown-caret {
    font-size: 0.7rem;
    transition: transform 0.2s ease;
}
.console-dropdown.open .console-dropdown-caret {
    transform: rotate(180deg);
}

.console-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 300px;
    max-width: 84vw;
    background: #12152b;
    border: 1px solid rgba(0, 217, 255, 0.4);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 14px rgba(0, 217, 255, 0.18);
    display: flex;
    flex-direction: column;
}
.console-dropdown-panel[hidden] {
    display: none;
}

.console-dropdown-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-bottom: 1px solid rgba(0, 217, 255, 0.18);
}
.console-dropdown-search-icon {
    color: rgba(0, 217, 255, 0.6);
    font-size: 0.95rem;
}
.console-dropdown-search-input {
    flex: 1 1 auto;
    min-width: 0;
    background: #1a1a2e;
    border: 1px solid rgba(0, 217, 255, 0.25);
    color: #cfeffd;
    padding: 5px 8px;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.78rem;
    outline: none;
}

.console-dropdown-groups {
    max-height: 320px;
    overflow-y: auto;
    padding: 4px 0;
}
.console-dropdown-group + .console-dropdown-group {
    border-top: 1px solid rgba(0, 217, 255, 0.1);
}
.console-dropdown-grouphead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px 4px;
}
.console-dropdown-brand {
    color: #00ff41;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.3);
}
.console-dropdown-selectall {
    background: transparent;
    border: none;
    padding: 0;
    color: #00d9ff;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.console-dropdown-selectall:hover {
    text-decoration: underline;
}
.console-dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    cursor: pointer;
    color: rgba(0, 217, 255, 0.85);
    font-size: 0.82rem;
    transition: background 0.15s ease;
}
.console-dropdown-option:hover {
    background: rgba(0, 217, 255, 0.08);
}
.console-dropdown-option.selected {
    background: rgba(0, 217, 255, 0.16);
    color: #00d9ff;
}
.console-dropdown-option input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: #00d9ff;
    cursor: pointer;
    flex: 0 0 auto;
}
.console-dropdown-optname {
    line-height: 1.2;
}
/* Sort dropdown options reuse the console-option styling (hover/selected) as
   full-width buttons with no checkbox. */
.console-sort-option {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    font-family: 'Electrolize', sans-serif;
}

/* ── Filters & Sort panel (merged Consoles + Sort, mirrors /search) ──────── */
.filters-sort {
    position: relative;
    display: inline-block;
}
.filters-sort-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #1a1a2e;
    border: 1px solid rgba(0, 217, 255, 0.4);
    color: #00d9ff;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.filters-sort-trigger:hover,
.filters-sort.open .filters-sort-trigger {
    border-color: #00d9ff;
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.3);
}
.filters-sort-hamburger { font-size: 1rem; line-height: 1; }
.filters-sort.open .console-dropdown-caret { transform: rotate(180deg); }
.filters-sort-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #00d9ff;
    color: #04122a;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0;
}
.filters-sort-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 60;
    width: 360px;
    max-width: 86vw;
    background: #12152b;
    border: 1px solid rgba(0, 217, 255, 0.4);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), 0 0 16px rgba(0, 217, 255, 0.18);
    display: flex;
    flex-direction: column;
    text-align: left;
}
.filters-sort-panel[hidden] { display: none; }
.filters-sort-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 14px;
    border-bottom: 1px solid #1f2547;
}
.filters-sort-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #00ff41;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.35);
}
.filters-sort-clearall {
    background: transparent;
    border: none;
    color: #00d9ff;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
}
.filters-sort-clearall:hover { text-decoration: underline; }
.filters-sort-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 14px;
}
.filters-sort-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.filters-sort-label {
    color: #8aa0c8;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}
/* Consoles + Sort dropdowns fill the section width inside the panel. */
.filters-sort-section .console-filter-bar { display: block; width: 100%; padding: 0; }
.filters-sort-section .console-dropdown { display: block; width: 100%; }
.filters-sort-section .console-dropdown-trigger { width: 100%; min-width: 0; }
.filters-sort-foot {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 12px 14px;
    border-top: 1px solid #1f2547;
}
.filters-sort-apply {
    padding: 9px 20px;
    background: #00d9ff;
    border: none;
    border-radius: 6px;
    color: #04122a;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: filter 0.12s ease;
}
.filters-sort-apply:hover { filter: brightness(1.1); }
.console-dropdown-empty {
    padding: 14px 12px;
    color: rgba(0, 217, 255, 0.45);
    font-size: 0.78rem;
}

.console-dropdown-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-top: 1px solid rgba(0, 217, 255, 0.2);
}
.console-dropdown-clear {
    background: transparent;
    border: none;
    padding: 4px 2px;
    color: rgba(0, 217, 255, 0.75);
    font-family: 'Electrolize', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
}
.console-dropdown-clear:hover {
    color: #00d9ff;
    text-decoration: underline;
}
.console-dropdown-apply {
    background: #00d9ff;
    border: 1px solid #00d9ff;
    color: #0a0e27;
    font-family: 'Electrolize', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 5px 16px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.console-dropdown-apply:hover {
    background: #00ff41;
    border-color: #00ff41;
    box-shadow: 0 0 12px rgba(0, 255, 65, 0.45);
}

.console-filter-bar {
    display: flex;
    align-items: center;
    gap: 8px 10px;
    flex-wrap: wrap;
}

.console-filter-label {
    font-family: 'Electrolize', sans-serif;
    color: var(--neon-cyan);
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-shadow: 0 0 6px rgba(0, 217, 255, 0.4);
    flex: 0 0 auto;
}

.console-filter-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.console-filter-action {
    font-family: 'Electrolize', sans-serif;
    background: transparent;
    border: none;
    padding: 0;
    color: var(--neon-green);
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    text-shadow: 0 0 6px rgba(0, 255, 65, 0.4);
    transition: color 0.2s ease, text-shadow 0.2s ease;
}

.console-filter-action:hover {
    color: var(--neon-cyan);
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.6);
    text-decoration: underline;
}

.console-filter-action-sep {
    color: rgba(0, 217, 255, 0.4);
    font-size: 0.8rem;
}

.console-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex: 1 1 100%;
}

.console-filter-pill {
    font-family: 'Electrolize', sans-serif;
    background: #1a1a2e;
    border: 1px solid rgba(0, 217, 255, 0.35);
    color: rgba(0, 217, 255, 0.55);
    padding: 3px 9px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 0;
}

.console-filter-pill:hover {
    border-color: var(--neon-cyan);
    color: var(--neon-cyan);
    transform: translateY(-1px);
}

.console-filter-pill.active {
    background: var(--neon-cyan);
    border-color: var(--neon-cyan);
    color: var(--bg-darker);
    box-shadow: 0 0 12px rgba(0, 217, 255, 0.5);
}

.console-filter-pill.active:hover {
    background: var(--neon-green);
    border-color: var(--neon-green);
    color: var(--bg-darker);
    box-shadow: 0 0 14px rgba(0, 255, 65, 0.5);
}

/* Leading "All" pill -- a small gap + faint divider sets the unfiltered
   default apart from the per-console pills that follow it. */
.console-filter-all {
    position: relative;
    margin-right: 11px;
}

.console-filter-all::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 65%;
    background: rgba(0, 217, 255, 0.3);
}

/* Results Section */
.results-container {
    margin-bottom: 1.5rem;
    min-height: 240px;
    display: flow-root;
}

/* Loading modal -- fixed overlay that sits on top of the page (landing
   copy or existing results) and stays centered in the visible viewport
   until new results return. Placed outside .container2 so the landing
   state's transform doesn't trap this fixed element. */
.pricing-loader-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(2, 4, 16, 0.78);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: loaderOverlayIn 0.18s ease-out;
}

@keyframes loaderOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Loading indicator (CRT/terminal-style) */
.pricing-loader {
    position: relative;
    width: min(480px, 100%);
    padding: 24px 22px 20px;
    background: var(--bg-card);
    border: 2px solid var(--neon-cyan);
    box-shadow:
        0 0 25px rgba(0, 217, 255, 0.4),
        inset 0 0 30px rgba(0, 217, 255, 0.06);
    text-align: center;
    overflow: hidden;
    font-family: 'Electrolize', sans-serif;
    animation: loaderModalIn 0.22s ease-out;
}

@keyframes loaderModalIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)   scale(1); }
}

.pricing-loader::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 65, 0.05) 0px,
        transparent 2px,
        transparent 4px,
        rgba(0, 255, 65, 0.05) 6px
    );
    pointer-events: none;
    z-index: 1;
}

.pricing-loader::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    right: 0;
    height: 30%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(0, 255, 65, 0.06) 50%,
        transparent 100%
    );
    animation: loaderScan 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes loaderScan {
    0%   { transform: translateY(0%); }
    100% { transform: translateY(500%); }
}

.loader-text {
    position: relative;
    z-index: 2;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--neon-green);
    text-shadow:
        0 0 10px rgba(0, 255, 65, 0.7),
        2px 2px 0 var(--neon-magenta),
        4px 4px 0 rgba(0, 0, 0, 0.4);
    margin-bottom: 18px;
}

.loader-text::before {
    content: '> ';
    color: var(--neon-magenta);
    text-shadow: 0 0 8px rgba(255, 0, 255, 0.6);
}

.loader-dots {
    display: inline-block;
    width: 1.6em;
    text-align: left;
    margin-left: 2px;
}

.loader-dots .dot {
    display: inline-block;
    opacity: 0;
    animation: loaderDot 1.2s infinite;
}
.loader-dots .dot:nth-child(2) { animation-delay: 0.2s; }
.loader-dots .dot:nth-child(3) { animation-delay: 0.4s; }

@keyframes loaderDot {
    0%, 80%, 100% { opacity: 0; }
    40%           { opacity: 1; }
}

.loader-bar {
    position: relative;
    z-index: 2;
    height: 8px;
    background: rgba(10, 14, 39, 0.8);
    border: 1px solid rgba(0, 217, 255, 0.6);
    box-shadow: inset 0 0 8px rgba(0, 217, 255, 0.25);
    overflow: hidden;
}

.loader-bar-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 35%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--neon-cyan) 25%,
        var(--neon-green) 50%,
        var(--neon-cyan) 75%,
        transparent 100%
    );
    box-shadow:
        0 0 12px rgba(0, 217, 255, 0.8),
        0 0 18px rgba(0, 255, 65, 0.4);
    animation: loaderSweep 1.4s linear infinite;
}

@keyframes loaderSweep {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(385%); }
}

/* Game grid -- tighter than before, subtle cards matching /search */
.game-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}

/* The global main.css gives .game-card a perpetual `cardFloat` bob, a
   hover translate/scale lift, a drop shadow and a glitch ::after. Kill
   all of that here so the cards sit flat (parity with /search listings);
   keep only a static border/background color change on hover. */
.game-card {
    font-family: 'Electrolize', sans-serif;
    background: var(--console-card);
    border: 1px solid var(--console-border);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    animation: none !important;
    transform: none !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.game-card:hover {
    border-color: var(--neon-cyan);
    background: rgba(0, 255, 255, 0.05);
    box-shadow: none !important;
    transform: none !important;
    animation: none !important;
}

.game-card::after {
    display: none !important;
}

.game-info {
    padding: 12px;
    position: relative;
}

.game-title {
    font-family: 'Electrolize', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    margin-top: 0;
    line-height: 1.25;
    min-height: 2.5em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.game-title a {
    color: var(--neon-cyan);
    text-decoration: none;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.35);
}

.game-card:hover .game-title a {
    color: #fff;
}

/* Console and Rarity Row */
.console-rarity-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    margin-bottom: 10px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.console-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.6rem;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
    letter-spacing: 0.5px;
    flex-shrink: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Rarity Box Styles */
.rarity-box {
    padding: 2px 6px;
    border-radius: 0;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    flex-shrink: 0;
    white-space: nowrap;
}

.rarity-common {
    background: linear-gradient(135deg, #6b7280, #4b5563);
    color: white;
    box-shadow: 0 0 10px rgba(107, 114, 128, 0.5);
}

.rarity-uncommon {
    background: linear-gradient(135deg, #10b981, #059669);
    color: white;
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
}

.rarity-rare {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
}

.rarity-epic {
    background: linear-gradient(135deg, #a855f7, #9333ea);
    color: white;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

.rarity-legendary {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.5);
}

.rarity-in-ranking {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    color: white;
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}

.prices-container {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid;
}

.price-row.loose {
    background: rgba(0, 255, 65, 0.08);
    border-color: rgba(0, 255, 65, 0.45);
}

.price-row.cib {
    background: rgba(0, 217, 255, 0.08);
    border-color: rgba(0, 217, 255, 0.45);
}

.price-row.new {
    background: rgba(255, 199, 0, 0.08);
    border-color: rgba(255, 199, 0, 0.45);
}

.price-label {
    font-family: 'Electrolize', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.price-row.loose .price-label { color: var(--neon-green); }
.price-row.cib .price-label { color: var(--neon-cyan); }
.price-row.new .price-label { color: var(--neon-yellow); }

.price-value {
    font-family: 'Electrolize', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.price-row.loose .price-value {
    color: var(--neon-green);
    text-shadow: 0 0 10px rgba(0, 255, 65, 0.6);
}
.price-row.cib .price-value {
    color: var(--neon-cyan);
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.6);
}
.price-row.new .price-value {
    color: var(--neon-yellow);
    text-shadow: 0 0 10px rgba(255, 199, 0, 0.6);
}

/* No Results -- subtle, matching /search empty state */
.no-results {
    text-align: center;
    padding: 40px 20px;
    background: var(--console-card);
    border: 1px solid var(--console-border);
    border-radius: 8px;
}

.no-results h2 {
    font-family: 'Electrolize', sans-serif;
    font-size: 1.4rem;
    color: var(--neon-cyan);
    margin-bottom: 8px;
    text-shadow: 0 0 10px rgba(0, 217, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 2px;
}

.no-results p {
    font-family: 'Electrolize', sans-serif;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Footer Info -- slimmed */
.footer-info {
    text-align: center;
    padding: 24px 20px 8px;
    color: var(--text-muted);
    font-size: 0.85rem;
    border-top: 1px solid var(--console-border);
    margin-top: 28px;
}

.footer-info p {
    margin-bottom: 6px;
}

.result-count {
    font-family: 'Electrolize', sans-serif;
    color: var(--neon-cyan);
    font-weight: 600;
    text-shadow: 0 0 8px rgba(0, 217, 255, 0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .pricing-hero-section {
        padding: 0.7rem 1rem;
    }

    .hero-content {
        flex-direction: column;
        gap: 0.35rem;
        align-items: flex-start;
    }

    .hero-headline {
        font-size: 1.05rem;
    }

    .hero-subtext {
        font-size: 0.8rem;
    }

    .search-row {
        flex-direction: column;
    }

    .search-wrapper {
        max-width: 100%;
    }

    .console-filter-pills {
        gap: 5px;
    }

    .game-grid {
        grid-template-columns: 1fr;
    }
}

/* Scrollbar */
#pricing-main-section::-webkit-scrollbar {
    width: 10px;
}

#pricing-main-section::-webkit-scrollbar-track {
    background: var(--bg-darker);
    border-radius: 0;
}

#pricing-main-section::-webkit-scrollbar-thumb {
    background: var(--neon-cyan);
    border-radius: 0;
}

#pricing-main-section::-webkit-scrollbar-thumb:hover {
    background: var(--neon-green);
}