/* /Components/Layout/BackgroundScene.razor.rz.scp.css */
/* ── Background scene ─────────────────────────────────────────────────────── */
.background-scene[b-r6ie2wk6gg] {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.scene-asset[b-r6ie2wk6gg] {
    position: absolute;
    image-rendering: pixelated;
    bottom: 0;
}

/* Mountains */
.mountain-double-1[b-r6ie2wk6gg] {
    left: 5%;
    bottom: 0;
    width: 600px;
    opacity: 1;
}

.mountain-single-1[b-r6ie2wk6gg] {
    left: 40%;
    bottom: 0;
    width: 300px;
    opacity: 1;
}

.mountain-single-2[b-r6ie2wk6gg] {
    left: 88%;
    bottom: 0;
    width: 400px;
    opacity: 1;
}

.mountain-single-3[b-r6ie2wk6gg] {
    left: -140px;
    bottom: 0;
    width: 350px;
    opacity: 1;
}

/* Pine x5 */
.pine-1[b-r6ie2wk6gg] {
    left: 36%;
    bottom: 0;
    width: 100px;
    opacity: 1;
}

.pine-2[b-r6ie2wk6gg] {
    left: 34%;
    bottom: 0;
    width: 64px;
    opacity: 1;
}

.pine-3[b-r6ie2wk6gg] {
    left: 56%;
    bottom: 0;
    width: 64px;
    opacity: 1;
}

.pine-4[b-r6ie2wk6gg] {
    left: 84.5%;
    bottom: -10px;
    width: 105px;
    opacity: 1;
}

.pine-5[b-r6ie2wk6gg] {
    left: 10%;
    bottom: 0;
    width: 90px;
    opacity: 1;
}

/* ── Pixel birds ──────────────────────────────────────────────────────────── */
@keyframes flap-up-b-r6ie2wk6gg {
    0%, 49.9% {
        opacity: 1;
    }

    50%, 100% {
        opacity: 0;
    }
}

@keyframes flap-down-b-r6ie2wk6gg {
    0%, 49.9% {
        opacity: 0;
    }

    50%, 100% {
        opacity: 1;
    }
}

@keyframes fly-right-b-r6ie2wk6gg {
    0% {
        transform: translateX(-10vw);
    }

    100% {
        transform: translateX(120vw);
    }
}

@keyframes bird-bob-b-r6ie2wk6gg {
    0%, 100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

.wing-up[b-r6ie2wk6gg] {
    animation: flap-up-b-r6ie2wk6gg 0.4s infinite;
}

.wing-down[b-r6ie2wk6gg] {
    animation: flap-down-b-r6ie2wk6gg 0.4s infinite;
}

.bird-wrapper[b-r6ie2wk6gg] {
    position: absolute;
    left: 0;
    image-rendering: pixelated;
    pointer-events: none;
}

    .bird-wrapper img[b-r6ie2wk6gg] {
        width: 100%;
        height: 100%;
        image-rendering: pixelated;
        filter: drop-shadow(0px 4px 2px rgba(0,0,0,0.08));
    }

/* Bird 1: largest, foreground, flies above the mountain peaks */
.bird-1[b-r6ie2wk6gg] {
    bottom: 40%;
    width: 64px;
    height: 64px;
    animation: fly-right-b-r6ie2wk6gg 12s linear infinite;
}

    .bird-1 svg[b-r6ie2wk6gg] {
        animation: bird-bob-b-r6ie2wk6gg 2.5s ease-in-out infinite;
    }

/* Bird 2: medium, midground, delayed */
.bird-2[b-r6ie2wk6gg] {
    top: 12%;
    width: 48px;
    height: 48px;
    animation: fly-right-b-r6ie2wk6gg 16s linear infinite 3s;
    animation-fill-mode: backwards;
}

    .bird-2 svg[b-r6ie2wk6gg] {
        animation: bird-bob-b-r6ie2wk6gg 3.2s ease-in-out infinite 1s;
    }

/* Bird 3: smallest, background depth, delayed */
.bird-3[b-r6ie2wk6gg] {
    top: 7%;
    width: 32px;
    height: 32px;
    animation: fly-right-b-r6ie2wk6gg 22s linear infinite 7s;
    animation-fill-mode: backwards;
}

    .bird-3 svg[b-r6ie2wk6gg] {
        animation: bird-bob-b-r6ie2wk6gg 4s ease-in-out infinite 2s;
    }

@media (max-width: 640px) {
    .bird-wrapper[b-r6ie2wk6gg] {
        display: none;
    }

    .mountain-double-1[b-r6ie2wk6gg] {
        width: 320px;
    }

    .mountain-single-1[b-r6ie2wk6gg] {
        width: 180px;
    }

    .mountain-single-2[b-r6ie2wk6gg] {
        width: 220px;
    }

    .mountain-single-3[b-r6ie2wk6gg] {
        width: 200px;
        left: -90px;
    }

    .pine-1[b-r6ie2wk6gg] { width: 60px; }
    .pine-2[b-r6ie2wk6gg] { width: 40px; }
    .pine-3[b-r6ie2wk6gg] { width: 40px; }
    .pine-4[b-r6ie2wk6gg] { width: 64px; }
    .pine-5[b-r6ie2wk6gg] { width: 56px; }
}
/* /Components/Layout/LandingLayout.razor.rz.scp.css */
.landing-page[b-q7wefh9l8t] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: transparent;
}
/* /Components/Layout/LoginLayout.razor.rz.scp.css */
.login-page[b-bx6jp831bx] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    padding-top: 1vh;
    justify-content: center;
}

.login-wrapper[b-bx6jp831bx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
    max-width: 960px;
}

.login-logo[b-bx6jp831bx] {
    width: 700px;
}

/* /Components/Layout/MainLayout.razor.rz.scp.css */

.page[b-3r65ik0813] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: transparent;
}

/* ── Full-width top bar ── */
.top-bar[b-3r65ik0813] {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.5rem;
    height: 4rem;
    background-color: var(--smw-sand-light, #f4eccc);
    overflow: visible;
}

.top-bar[b-3r65ik0813]::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 270px;
    right: 0;
    height: 2px;
    background-color: #111111;
    pointer-events: none;
}

.top-bar-brand[b-3r65ik0813] {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 300px;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.top-bar-brand:hover[b-3r65ik0813] {
    opacity: 0.8;
    filter: brightness(1.15);
    cursor: pointer;
}

.top-bar-auth[b-3r65ik0813] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    white-space: nowrap;
}

/* Centered slot in the top bar (currently holds the TierPill).
   Absolute positioning keeps it perfectly centered regardless of how
   wide the brand and auth groups grow. */
.top-bar-center[b-3r65ik0813] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* ── Sidebar + main below the top bar ── */
.layout-body[b-3r65ik0813] {
    display: flex;
    flex: 1;
}

.sidebar[b-3r65ik0813] {
    width: 270px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--smw-sand-light, #f4eccc);
    border-right: 3px solid #111111;
    position: sticky;
    top: 4rem;
    height: calc(100vh - 4rem);
    overflow-y: auto;
}

main[b-3r65ik0813] {
    flex: 1;
    background-color: transparent;
    height: calc(100vh - 4rem);
    overflow-y: auto;
}

.content[b-3r65ik0813] {
    padding-top: 1.5rem;
}

/* ── Auth link styles ── */
.top-bar-auth[b-3r65ik0813]  a,
.top-bar-auth[b-3r65ik0813]  .btn-link {
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    color: var(--smw-dark-grey, #3c4850);
    text-decoration: none;
}

.top-bar-auth[b-3r65ik0813]  a:hover,
.top-bar-auth[b-3r65ik0813]  .btn-link:hover {
    color: var(--smw-coin, #e8a800);
}

/* ── User settings link in top bar ── */
.top-bar-user-link[b-3r65ik0813] {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
    color: var(--smw-dark-grey);
    transition: color 0.1s, filter 0.1s;
}

.top-bar-user-link:hover[b-3r65ik0813] {
    color: var(--smw-coin);
    filter: none;
}

.top-bar-user-icon[b-3r65ik0813] {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3));
    transition: filter 0.1s;
}

.top-bar-user-link:hover .top-bar-user-icon[b-3r65ik0813] {
    filter: drop-shadow(1px 1px 2px rgba(232,168,0,0.5));
}

.top-bar-username[b-3r65ik0813] {
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

/* ── Sign out as plain text link with divider ── */
.top-bar-signout-form[b-3r65ik0813] {
    display: flex;
    align-items: center;
    padding-left: 0.75rem;
    border-left: 2px solid rgba(60, 72, 80, 0.2);
}

.top-bar-signout-btn[b-3r65ik0813] {
    background: none;
    border: none;
    padding: 0;
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    color: var(--smw-grey);
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.1s;
}

.top-bar-signout-btn:hover[b-3r65ik0813] {
    color: var(--smw-mario-red);
}

/* ── Mobile (≤640px): stack sidebar above main, shrink top bar ── */
@media (max-width: 640px) {
    .top-bar[b-3r65ik0813] {
        padding: 0 0.75rem;
    }

    .top-bar[b-3r65ik0813]::after {
        left: 0;
    }

    .top-bar-brand[b-3r65ik0813] {
        width: auto;
    }

    .top-bar-auth[b-3r65ik0813] {
        gap: 0.5rem;
    }

    .top-bar-username[b-3r65ik0813] {
        display: none;
    }

    .top-bar-signout-form[b-3r65ik0813] {
        padding-left: 0.5rem;
    }

    .layout-body[b-3r65ik0813] {
        flex-direction: column;
    }

    .sidebar[b-3r65ik0813] {
        width: 100%;
        height: auto;
        flex-shrink: 0;
        position: relative;
        top: auto;
        border-right: none;
        border-bottom: 3px solid #111111;
        min-height: 3.5rem;
    }

    main[b-3r65ik0813] {
        height: auto;
        min-height: calc(100vh - 7.5rem);
        overflow-y: visible;
    }

    .content[b-3r65ik0813] {
        padding-top: 1rem;
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-bltf498xjm] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: var(--smw-dark-grey, #3c4850);
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 2px solid rgba(90, 74, 40, 0.4);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2860%2C72%2C80%2C0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem transparent;
}

.navbar-toggler:checked[b-bltf498xjm] {
    background-color: rgba(200, 184, 120, 0.4);
}

.nav-icon[b-bltf498xjm] {
    display: inline-block;
    width: 2.6rem;
    height: 2.6rem;
    margin-right: 0.75rem;
    vertical-align: middle;
    flex-shrink: 0;
    filter: drop-shadow(1px 2px 2px rgba(0,0,0,0.3));
}

.nav-icon svg[b-bltf498xjm],
.nav-icon img[b-bltf498xjm] {
    width: 100%;
    height: 100%;
}

.nav-item[b-bltf498xjm] {
    font-size: 1.05rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-bltf498xjm] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-bltf498xjm] {
        padding-bottom: 1rem;
    }

    .nav-item[b-bltf498xjm]  a {
        font-family: 'Silkscreen', monospace;
        font-size: 1rem;
        color: #5a4a28;
        border-radius: 0;
        height: 4.5rem;
        display: flex;
        align-items: center;
        line-height: 4.5rem;
        letter-spacing: 0.05em;
        border-left: 3px solid transparent;
        transition: color 0.1s, border-color 0.1s, background-color 0.1s;
    }

.nav-item[b-bltf498xjm]  a.active {
    color: #7a5200;
    border-left-color: #e8a800;
    background-color: rgba(232, 168, 0, 0.18);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}

.nav-item[b-bltf498xjm]  a:hover {
    color: #267326;
    border-left-color: #3cb83c;
    background-color: rgba(60, 184, 60, 0.12);
    text-shadow: 1px 1px 0 rgba(255,255,255,0.4);
}

.nav-scrollable[b-bltf498xjm] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-bltf498xjm] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-bltf498xjm] {
        display: none;
    }

    .nav-scrollable[b-bltf498xjm] {
        display: flex;
        flex-direction: column;
        flex: 1;
        overflow-y: auto;
    }
}
/* /Components/Pages/Account/AccountSettings.razor.rz.scp.css */
/* ── Settings cards ──────────────────────────────────────────────────────── */

.settings-card[b-4hmzbo3ni1] {
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    max-width: 600px;
}

.settings-card-header[b-4hmzbo3ni1] {
    background: var(--smw-sand);
    border-bottom: 3px solid var(--smw-sand-dark);
    padding: 0.55rem 1.25rem;
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.settings-card-body[b-4hmzbo3ni1] {
    padding: 1.25rem 1.5rem;
}

/* ── Danger zone variant ─────────────────────────────────────────────────── */

.settings-card--danger[b-4hmzbo3ni1] {
    border-color: var(--sfc-btn-a);
    box-shadow: 4px 4px 0 rgba(216, 40, 0, 0.2);
}

.settings-card--danger .settings-card-header[b-4hmzbo3ni1] {
    background: #fff0ee;
    border-bottom-color: var(--sfc-btn-a);
    color: #8b1a0a;
    text-shadow: none;
}

/* ── Current value hint ──────────────────────────────────────────────────── */

.settings-current-value[b-4hmzbo3ni1] {
    font-size: 0.65rem;
    color: var(--smw-grey);
    letter-spacing: 0.03em;
}

.settings-current-value strong[b-4hmzbo3ni1] {
    color: var(--smw-dark-grey);
    font-weight: 400;
}

/* ── Success alert override (pixel style) ────────────────────────────────── */

.alert-success[b-4hmzbo3ni1] {
    background: #f0fff4;
    border: 2px solid var(--smw-grass);
    color: var(--smw-grass-dark);
    font-size: 0.65rem;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Account/ConfirmEmail.razor.rz.scp.css */
.confirm-email-card[b-2sr1vybfbm] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
/* /Components/Pages/Account/ConfirmEmailChange.razor.rz.scp.css */
.confirm-email-change-card[b-yqhp2ly9dg] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

.alert-success[b-yqhp2ly9dg] {
    background: #f0fff4;
    border: 2px solid var(--smw-grass);
    color: var(--smw-grass-dark);
    font-size: 0.65rem;
    border-radius: 0;
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
}
/* /Components/Pages/Account/ForgotPassword.razor.rz.scp.css */
.forgot-password-card[b-77sw265tkb] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* Reserve Turnstile widget dimensions before it loads to prevent layout shift */
.forgot-password-card .cf-turnstile[b-77sw265tkb] {
    min-height: 65px;
    width: 300px;
    margin: 0 auto;
}
/* /Components/Pages/Account/Login.razor.rz.scp.css */
.login-card[b-8715hjo6tu] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
/* /Components/Pages/Account/Register.razor.rz.scp.css */
.register-card[b-jhtx29kbyl] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}

/* Reserve Turnstile widget dimensions before it loads to prevent layout shift */
.register-card .cf-turnstile[b-jhtx29kbyl] {
    min-height: 65px;
    width: 300px;
    margin: 0 auto;
}
/* /Components/Pages/Account/ResetPassword.razor.rz.scp.css */
.reset-password-card[b-lmn96wo2hu] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
/* /Components/Pages/Account/UnsubscribeEmail.razor.rz.scp.css */
.unsubscribe-card[b-14qhamjv86] {
    width: 100%;
    max-width: 420px;
    padding: 2rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    border-radius: 0;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
}
/* /Components/Pages/Billing.razor.rz.scp.css */
/* ── Billing card ─────────────────────────────────────────────────────────
   Matches the SMW theme used by .settings-card on AccountSettings:
   white surface, 3px sand-dark border, pixel drop shadow.
   ───────────────────────────────────────────────────────────────────────── */

.billing-card[b-pslmh0c71b] {
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
    color: var(--smw-dark-grey);
    border-radius: 0;
    overflow: hidden;
    max-width: 720px;
}

.billing-card-header[b-pslmh0c71b] {
    background: var(--smw-sand);
    border-bottom: 3px solid var(--smw-sand-dark);
    padding: 0.55rem 1.25rem;
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.billing-card-body[b-pslmh0c71b] {
    padding: 1.25rem 1.5rem;
    background: var(--smw-white);
}

/* ── Tier badge ───────────────────────────────────────────────────────────
   Pixel-style chip — square corners, drop shadow, Silkscreen text.
   ───────────────────────────────────────────────────────────────────────── */

.tier-badge[b-pslmh0c71b] {
    display: inline-block;
    padding: 0.35em 0.85em;
    border: 2px solid var(--smw-sand-dark);
    border-radius: 0;
    font-family: var(--pixel-font);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.tier-badge--free[b-pslmh0c71b] {
    background: var(--sfc-shell);
    color: var(--smw-white);
    border-color: var(--smw-grey);
}

.tier-badge--pro[b-pslmh0c71b] {
    background: var(--smw-grass);
    color: var(--smw-white);
    border-color: var(--smw-grass-dark);
}

.tier-badge--ultra[b-pslmh0c71b] {
    background: var(--smw-purple);
    color: var(--smw-white);
    border-color: var(--smw-purple-dark);
}

/* ── Progress bar — pixel-rounded, themed colours ─────────────────────── */

.billing-card[b-pslmh0c71b]  .progress {
    background-color: var(--smw-sand-light);
    border: 2px solid var(--smw-sand-dark);
    border-radius: 0;
    height: 12px !important;
    padding: 0;
    overflow: hidden;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.15);
}

.billing-card[b-pslmh0c71b]  .progress-bar.bg-success {
    background-color: var(--smw-grass) !important;
}

.billing-card[b-pslmh0c71b]  .progress-bar.bg-danger {
    background-color: var(--sfc-btn-a) !important;
}

/* ── Plan comparison grid ─────────────────────────────────────────────── */

.plan-grid[b-pslmh0c71b] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
}

.plan-card[b-pslmh0c71b] {
    display: flex;
    flex-direction: column;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1.25rem;
    border-radius: 0;
}

.plan-card--featured[b-pslmh0c71b] {
    border-color: var(--smw-grass-dark);
    box-shadow: 4px 4px 0 rgba(38, 115, 38, 0.35);
    position: relative;
}

.plan-card--featured[b-pslmh0c71b]::before {
    content: "★ Recommended";
    position: absolute;
    top: -0.7rem;
    left: 0.75rem;
    background: var(--smw-grass);
    color: var(--smw-white);
    border: 2px solid var(--smw-grass-dark);
    padding: 0.15rem 0.5rem;
    font-family: var(--pixel-font);
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
}

.plan-name[b-pslmh0c71b] {
    font-family: var(--pixel-font);
    font-size: 1.1rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
    margin-bottom: 0.5rem;
}

.plan-limit[b-pslmh0c71b] {
    font-family: var(--pixel-font);
    font-size: 1.6rem;
    line-height: 1.2;
    color: var(--smw-grass-dark);
    margin-bottom: 1.1rem;
    letter-spacing: 0.03em;
}

.plan-limit .plan-per[b-pslmh0c71b] {
    color: var(--smw-grey);
    font-size: 0.7rem;
    margin-left: 0.3rem;
    letter-spacing: 0.05em;
}

.plan-features[b-pslmh0c71b] {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    flex: 1;
}

.plan-features li[b-pslmh0c71b] {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    padding: 0.3rem 0;
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    line-height: 1.7;
    color: var(--smw-dark-grey);
}

.plan-features li[b-pslmh0c71b]  svg {
    color: var(--smw-grass-dark);
    flex-shrink: 0;
    margin-top: 0.35rem;
}

/* ── Renewal hint line ────────────────────────────────────────────────── */

.billing-card[b-pslmh0c71b]  .text-muted.small {
    color: var(--smw-grey) !important;
    font-size: 0.6rem;
    letter-spacing: 0.03em;
}

/* ── Redirect overlay (shown while a button is sending the user to Stripe) ── */

.redirect-overlay[b-pslmh0c71b] {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 30, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1050;
    backdrop-filter: blur(2px);
    animation: redirect-fade-in-b-pslmh0c71b 120ms ease-out;
}

@keyframes redirect-fade-in-b-pslmh0c71b {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.redirect-card[b-pslmh0c71b] {
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.35);
    padding: 1.5rem 2.25rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    max-width: 90vw;
}

.redirect-spinner[b-pslmh0c71b] {
    width: 32px;
    height: 32px;
    border: 4px solid var(--smw-sand-light);
    border-top-color: var(--smw-grass);
    border-radius: 50%;
    animation: redirect-spin-b-pslmh0c71b 0.8s linear infinite;
}

@keyframes redirect-spin-b-pslmh0c71b {
    to { transform: rotate(360deg); }
}

.redirect-text[b-pslmh0c71b] {
    font-family: var(--pixel-font);
    font-size: 0.8rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.redirect-subtext[b-pslmh0c71b] {
    font-size: 0.7rem;
    color: var(--smw-grey);
    margin: 0;
}

/* ── Pre-purchase disclosure ──────────────────────────────────────────────
   Clear-and-conspicuous text adjacent to the upgrade buttons. Body-weight
   so it satisfies ROSCA / CA ARL requirements.
   ───────────────────────────────────────────────────────────────────────── */

.billing-disclosure[b-pslmh0c71b] {
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--smw-dark-grey);
}

.billing-disclosure a[b-pslmh0c71b] {
    color: var(--smw-dark-grey);
    text-decoration: underline;
}
/* /Components/Pages/Blog/Blog.razor.rz.scp.css */
/* Blog styles are global (used by both Blog.razor and BlogPost.razor)
   and live in wwwroot/app.css under the `.blog-*` namespace.
   Blazor scoped CSS only applies to elements rendered by its companion
   component — and the post detail page is a different component — so
   keeping the styles here would silently break post pages. */
/* /Components/Pages/CreateProfile.razor.rz.scp.css */
/* Alternating row tint for the live preview listing rows */
[b-4yvhg6jwt0] .list-group-item:nth-child(even) {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Cap the preview card's height to match the form column on the left.
   Absolute positioning takes the card out of the column's content-size
   calculation, so the form column drives the row height and the card
   fills whatever space the column gets. The body scrolls internally
   and the footer stays pinned at the bottom.

   Only applied at lg+ where the two columns sit side-by-side. Below lg
   the columns stack and the preview card flows naturally below the form. */
.preview-card[b-4yvhg6jwt0] {
    display: flex;
    flex-direction: column;
}

.preview-body[b-4yvhg6jwt0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .preview-col[b-4yvhg6jwt0] {
        position: relative;
    }

    .preview-card[b-4yvhg6jwt0] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--bs-gutter-x) * 0.5);
        right: calc(var(--bs-gutter-x) * 0.5);
    }
}

/* Advanced filters: collapsible section that holds Conditions, Include/Exclude
   keywords, and Seller reputation. Hidden by default; the EditProfile page
   opens it automatically when any of those fields are already populated. */
.advanced-toggle[b-4yvhg6jwt0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.advanced-toggle:hover[b-4yvhg6jwt0] {
    background-color: var(--smw-sand-light, #f4eccc);
}

.advanced-chevron[b-4yvhg6jwt0] {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    color: inherit;
    transition: transform 0.15s ease;
}

.advanced-toggle.open .advanced-chevron[b-4yvhg6jwt0] {
    transform: rotate(90deg);
}

.advanced-count[b-4yvhg6jwt0] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--smw-grey, #6c757d);
}

.advanced-body[b-4yvhg6jwt0] {
    display: none;
    padding-top: 0.85rem;
}

.advanced-body.open[b-4yvhg6jwt0] {
    display: block;
}

/* Notification caveat shown below the preview results */
.preview-notice[b-4yvhg6jwt0] {
    font-size: 0.58rem;
    color: var(--smw-grey);
    background-color: var(--smw-sand-light);
    border-top: 2px solid var(--smw-sand-dark);
    padding: 0.5rem 0.85rem;
    line-height: 1.7;
}
/* /Components/Pages/Deals/GameDealsPage.razor.rz.scp.css */
/* Deal-page scoped styles. The whole article renders as one big pixel-card
   over the sky background so editorial + stats + feed read as a single
   document, not a stack of floating sections. */

.game-deals-page[b-tsf24r0y5b] {
    /* --deal-accent gets overridden per data-console below; everything that wants
       to pick up the console's signature colour reads from this single var. */
    --deal-accent: var(--smw-mario-red, #d82800);

    max-width: 920px;
    margin: 2rem auto 3rem;
    padding: 2.5rem 2.5rem 3rem;
    background: var(--smw-white, #ffffff);
    border: 3px solid var(--smw-sand-dark, #111111);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.22);
    color: var(--smw-sand-dark, #111111);
}

/* Console-themed accent — one custom property override per console slug.
   Keep these saturated enough to register as the "this console's page" cue
   but not loud enough to overpower the editorial body. */
.game-deals-page[data-console="nes"][b-tsf24r0y5b]       { --deal-accent: #d82800; } /* NES red */
.game-deals-page[data-console="snes"][b-tsf24r0y5b]      { --deal-accent: #8b46c8; } /* SNES purple */
.game-deals-page[data-console="n64"][b-tsf24r0y5b]       { --deal-accent: #1f7a1f; } /* N64 green */
.game-deals-page[data-console="gamecube"][b-tsf24r0y5b]  { --deal-accent: #4090d8; } /* GC indigo */
.game-deals-page[data-console="gameboy"][b-tsf24r0y5b]   { --deal-accent: #7a9a3c; } /* DMG olive */
.game-deals-page[data-console="gba"][b-tsf24r0y5b]       { --deal-accent: #8b46c8; } /* GBA violet */
.game-deals-page[data-console="ds"][b-tsf24r0y5b]        { --deal-accent: #b32d2d; } /* DS crimson */
.game-deals-page[data-console="ps1"][b-tsf24r0y5b]       { --deal-accent: #3c4850; } /* PS1 slate */
.game-deals-page[data-console="ps2"][b-tsf24r0y5b]       { --deal-accent: #1c2030; } /* PS2 deep navy */
.game-deals-page[data-console="genesis"][b-tsf24r0y5b]   { --deal-accent: #1c1c1c; } /* Sega obsidian */
.game-deals-page[data-console="saturn"][b-tsf24r0y5b]    { --deal-accent: #4a4a4a; } /* Saturn grey */
.game-deals-page[data-console="dreamcast"][b-tsf24r0y5b] { --deal-accent: #d8771c; } /* Dreamcast orange */

@media (max-width: 640px) {
    .game-deals-page[b-tsf24r0y5b] {
        margin: 1rem 0.75rem 2rem;
        padding: 1.5rem 1.25rem 2rem;
        box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    }
}

.deals-breadcrumb[b-tsf24r0y5b] {
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
    color: var(--bs-secondary-color, #6c757d);
}

.deals-breadcrumb a[b-tsf24r0y5b] {
    color: inherit;
    text-decoration: none;
}

.deals-breadcrumb a:hover[b-tsf24r0y5b] {
    text-decoration: underline;
}

.deals-breadcrumb span[b-tsf24r0y5b] {
    margin: 0 0.35rem;
    color: var(--deal-accent);
}

.game-deals-hero[b-tsf24r0y5b] {
    margin-bottom: 2.5rem;
}

.game-deals-hero h1[b-tsf24r0y5b] {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 4px solid var(--deal-accent);
    display: inline-block;
}

.game-deals-hero-sub[b-tsf24r0y5b] {
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 0.75rem;
}

.game-deals-verdict[b-tsf24r0y5b] {
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.04);
    border-left: 4px solid var(--deal-accent);
    border-radius: 0;
}

.game-deals-section[b-tsf24r0y5b] {
    margin: 2.5rem 0;
}

.game-deals-section > h2[b-tsf24r0y5b] {
    margin-bottom: 1rem;
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--deal-accent);
}

/* ── Scoreboard HUD ─────────────────────────────────────────────────────────
   Three-tile pixel scoreboard sitting under the hero. Reads at a glance:
   median ask · listings now · 90d trend. Tiles share the page-card vocabulary
   but use sand-light as their fill so they read as recessed inserts, not
   floating sub-cards. */
.game-deals-hud[b-tsf24r0y5b] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: 1.5rem 0 2.5rem;
}

.game-deals-hud-tile[b-tsf24r0y5b] {
    padding: 1rem 1.1rem 1.1rem;
    background: var(--smw-sand-light, #f4eccc);
    border: 3px solid var(--smw-sand-dark, #111111);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
    color: var(--smw-sand-dark, #111111);
    text-align: left;
}

.game-deals-hud-label[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
    margin-bottom: 0.4rem;
}

.game-deals-hud-value[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 1.65rem;
    line-height: 1.15;
    margin-bottom: 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    word-break: break-word;
}

.game-deals-hud-arrow[b-tsf24r0y5b] {
    font-size: 1.2rem;
    line-height: 1;
}

.game-deals-hud-sub[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    opacity: 0.65;
}

/* Trend tile colour-codes the value/arrow only — keeps the label & sub neutral
   so the tile doesn't shout at the reader. */
.game-deals-hud-tile.trend-up   .game-deals-hud-value[b-tsf24r0y5b] { color: #b32d2d; }
.game-deals-hud-tile.trend-down .game-deals-hud-value[b-tsf24r0y5b] { color: #1f7a1f; }
.game-deals-hud-tile.trend-flat .game-deals-hud-value[b-tsf24r0y5b] { color: var(--smw-sand-dark, #111111); }

@media (max-width: 640px) {
    .game-deals-hud[b-tsf24r0y5b] {
        grid-template-columns: 1fr;
        gap: 0.75rem;
        margin: 1rem 0 2rem;
    }

    .game-deals-hud-value[b-tsf24r0y5b] {
        font-size: 1.4rem;
    }
}

/* Editorial body is rendered from MarkupString, so its descendants don't get
   the Blazor scope attribute — typography rules must use ::deep to apply.
   No own background/border: the page card now wraps everything, so a second
   card here would read as a card-in-a-card. A thin top divider separates it
   from the curation block above. */
.game-deals-editorial[b-tsf24r0y5b] {
    margin: 2.5rem 0;
    padding-top: 2rem;
    border-top: 2px solid var(--smw-sand-dark, #111111);
    color: inherit;
}

.game-deals-editorial[b-tsf24r0y5b]  > *:first-child {
    margin-top: 0;
}

.game-deals-editorial[b-tsf24r0y5b]  > *:last-child {
    margin-bottom: 0;
}

.game-deals-editorial[b-tsf24r0y5b]  h1 {
    font-size: 1.6rem;
    line-height: 1.25;
    margin: 0 0 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--deal-accent);
}

.game-deals-editorial[b-tsf24r0y5b]  h2 {
    font-size: 1.3rem;
    line-height: 1.3;
    margin: 2.25rem 0 0.75rem;
}

.game-deals-editorial[b-tsf24r0y5b]  h3 {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 1.5rem 0 0.5rem;
}

.game-deals-editorial[b-tsf24r0y5b]  p {
    line-height: 1.7;
    margin: 0 0 1rem;
}

.game-deals-editorial[b-tsf24r0y5b]  ul,
.game-deals-editorial[b-tsf24r0y5b]  ol {
    line-height: 1.7;
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.game-deals-editorial[b-tsf24r0y5b]  li {
    margin-bottom: 0.4rem;
}

.game-deals-editorial[b-tsf24r0y5b]  li > p {
    margin-bottom: 0.4rem;
}

.game-deals-editorial[b-tsf24r0y5b]  strong {
    color: var(--smw-sand-dark, #111111);
}

.game-deals-editorial[b-tsf24r0y5b]  code {
    background: rgba(0, 0, 0, 0.06);
    padding: 0.1em 0.35em;
    border-radius: 3px;
    font-size: 0.92em;
}

.game-deals-editorial[b-tsf24r0y5b]  a {
    color: var(--smw-water, #4090d8);
    text-decoration: underline;
}

.game-deals-editorial[b-tsf24r0y5b]  a:hover {
    color: var(--smw-mario-red, #d82800);
}

@media (max-width: 640px) {
    .game-deals-editorial[b-tsf24r0y5b] {
        padding-top: 1.5rem;
    }

    .game-deals-editorial[b-tsf24r0y5b]  h1 {
        font-size: 1.35rem;
    }

    .game-deals-editorial[b-tsf24r0y5b]  h2 {
        font-size: 1.15rem;
        margin-top: 1.75rem;
    }
}

/* ── 90-day trend block ────────────────────────────────────────────────────
   Side-by-side: big delta numerals on the left, sparkline filling the right.
   On narrow screens it stacks. The whole block is its own pixel card so the
   trend reads as a deliberate data callout, not a quiet aside. */
.game-deals-trend[b-tsf24r0y5b] {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: minmax(170px, 1fr) 2fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.25rem 1.5rem;
    background: var(--smw-sand-light, #f4eccc);
    border: 3px solid var(--smw-sand-dark, #111111);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
}

.game-deals-trend-figure[b-tsf24r0y5b] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.game-deals-trend-label[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.7;
}

.game-deals-trend-delta[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 2.6rem;
    line-height: 1.05;
    color: currentColor;
}

.game-deals-trend-caption[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    letter-spacing: 0.04em;
    opacity: 0.65;
    color: var(--smw-sand-dark, #111111);
}

.game-deals-trend-sparkline[b-tsf24r0y5b] {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

@media (max-width: 640px) {
    .game-deals-trend[b-tsf24r0y5b] {
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 1rem 1.25rem;
    }

    .game-deals-trend-delta[b-tsf24r0y5b] {
        font-size: 2rem;
    }

    .game-deals-trend-sparkline[b-tsf24r0y5b] {
        justify-content: flex-start;
    }
}

/* Trend direction colours — applied to the trend block via .trend-up/down/flat
   modifier classes. Only the delta numerals + sparkline (currentColor) pick
   up the tint; labels stay neutral. The HUD tiles also use these modifiers,
   so the colour assignment is shared via the existing HUD trend-up/down/flat
   rules above — but the .trend-* classes themselves only set `color`, which
   the HUD value rules then override to their own value selectors. */
.trend-up[b-tsf24r0y5b]   { color: #b32d2d; } /* climbing prices = "bad for buyers" red */
.trend-down[b-tsf24r0y5b] { color: #1f7a1f; } /* easing prices  = "good for buyers" green */
.trend-flat[b-tsf24r0y5b] { color: var(--smw-sand-dark, #111111); }

.game-deals-frequency-list[b-tsf24r0y5b] {
    list-style: none;
    padding: 0;
}

.game-deals-frequency-list li[b-tsf24r0y5b] {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.game-deals-frequency-list li:last-child[b-tsf24r0y5b] {
    border-bottom: none;
}

.game-deals-cta[b-tsf24r0y5b] {
    margin: 3rem 0;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 6px;
    text-align: center;
}

.game-deals-cta h2[b-tsf24r0y5b] {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

.game-deals-cta p[b-tsf24r0y5b] {
    color: var(--bs-secondary-color, #6c757d);
    margin-bottom: 1rem;
}

/* Compact in-feed variant — sits between the section heading and the chips so
   the upsell is in view when visitors are looking at deals, not buried below. */
.game-deals-cta-feed[b-tsf24r0y5b] {
    margin: 0.5rem 0 1.5rem;
    padding: 1.1rem 1.25rem;
    background: var(--smw-white, #fcfcfc);
    border: 3px solid var(--smw-sand-dark, #111111);
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    text-align: left;
}

.game-deals-cta-headline[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--smw-dark-grey, #3c4850);
    margin: 0 0 0.4rem;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.5);
}

.game-deals-cta-sub[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    line-height: 1.85;
    color: var(--smw-dark-grey, #3c4850);
    margin: 0 0 0.85rem;
}

.game-deals-cta-feed .btn[b-tsf24r0y5b] {
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.game-deals-empty[b-tsf24r0y5b] {
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.025);
    border-radius: 6px;
    color: var(--bs-secondary-color, #6c757d);
}

.game-deals-related-list[b-tsf24r0y5b] {
    list-style: none;
    padding: 0;
}

.game-deals-related-list li[b-tsf24r0y5b] {
    padding: 0.4rem 0;
}

/* Index + hub pages share a few utility classes — colocated here because
   they're all under /deals and the rest of the styles live in this file. */

.deals-index[b-tsf24r0y5b] {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

.deals-console-list[b-tsf24r0y5b],
.deals-game-list[b-tsf24r0y5b] {
    list-style: none;
    padding: 0;
}

.deals-console-list li[b-tsf24r0y5b],
.deals-game-list li[b-tsf24r0y5b] {
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.deals-console-list a[b-tsf24r0y5b],
.deals-game-list a[b-tsf24r0y5b] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}

.deals-console-list a:hover[b-tsf24r0y5b],
.deals-game-list a:hover strong[b-tsf24r0y5b] {
    text-decoration: underline;
}

.deals-console-hub[b-tsf24r0y5b] {
    max-width: 880px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
}

/* Trend sparkline currentColor inherits from .game-deals-trend so it picks
   up the trend-direction tint above when nested under it. Default ink. */
.trend-sparkline[b-tsf24r0y5b] {
    margin: 0;
    color: currentColor;
}

.trend-sparkline svg[b-tsf24r0y5b] {
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* ── Floating "Get alerts" CTA ─────────────────────────────────────────────
   Fixed bottom-right pill. Hidden by default; the inline IntersectionObserver
   on the page adds .visible once the sentinel near the top scrolls offscreen
   so the pill only shows up while the user is engaged with the feed. */
.game-deals-cta-sentinel[b-tsf24r0y5b] {
    height: 1px;
    width: 100%;
    margin: 0;
    pointer-events: none;
}

.game-deals-floating-cta[b-tsf24r0y5b] {
    position: fixed;
    bottom: 1.25rem;
    right: 1.25rem;
    z-index: 20;

    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1.1rem;

    background: var(--smw-coin, #e8a800);
    border: 3px solid var(--smw-sand-dark, #111111);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.3);
    color: var(--smw-sand-dark, #111111);
    text-decoration: none;

    font-family: var(--pixel-font);
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    opacity: 0;
    pointer-events: none;
    transform: translateY(0.5rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.game-deals-floating-cta.visible[b-tsf24r0y5b] {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.game-deals-floating-cta:hover[b-tsf24r0y5b] {
    background: var(--smw-coin-bright, #ffd84e);
    transform: translateY(-1px);
}

.game-deals-floating-cta-icon[b-tsf24r0y5b] {
    font-size: 0.95rem;
    line-height: 1;
}

@media (max-width: 640px) {
    .game-deals-floating-cta[b-tsf24r0y5b] {
        bottom: 0.75rem;
        right: 0.75rem;
        padding: 0.6rem 0.9rem;
        font-size: 0.6rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .game-deals-floating-cta[b-tsf24r0y5b] {
        transition: opacity 0.2s ease;
        transform: none;
    }

    .game-deals-floating-cta.visible[b-tsf24r0y5b] {
        transform: none;
    }

    .game-deals-floating-cta:hover[b-tsf24r0y5b] {
        transform: none;
    }
}
/* /Components/Pages/EditProfile.razor.rz.scp.css */
/* Alternating row tint for the live preview listing rows */
[b-pt69ijzby0] .list-group-item:nth-child(even) {
    background-color: var(--bs-tertiary-bg, #f8f9fa);
}

/* Cap the preview card's height to match the form column on the left.
   Absolute positioning takes the card out of the column's content-size
   calculation, so the form column drives the row height and the card
   fills whatever space the column gets. The body scrolls internally.

   Only applied at lg+ where the two columns sit side-by-side. Below lg
   the columns stack and the preview card flows naturally below the form. */
.preview-card[b-pt69ijzby0] {
    display: flex;
    flex-direction: column;
}

.preview-body[b-pt69ijzby0] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .preview-col[b-pt69ijzby0] {
        position: relative;
    }

    .preview-card[b-pt69ijzby0] {
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--bs-gutter-x) * 0.5);
        right: calc(var(--bs-gutter-x) * 0.5);
    }
}

/* Advanced filters: collapsible section that holds Conditions, Include/Exclude
   keywords, and Seller reputation. Auto-expanded when editing a profile that
   already has any of those fields populated. */
.advanced-toggle[b-pt69ijzby0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.55rem 0.5rem;
    background: transparent;
    border: none;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.advanced-toggle:hover[b-pt69ijzby0] {
    background-color: var(--smw-sand-light, #f4eccc);
}

.advanced-chevron[b-pt69ijzby0] {
    display: inline-block;
    font-size: 1rem;
    line-height: 1;
    font-weight: 700;
    color: inherit;
    transition: transform 0.15s ease;
}

.advanced-toggle.open .advanced-chevron[b-pt69ijzby0] {
    transform: rotate(90deg);
}

.advanced-count[b-pt69ijzby0] {
    margin-left: auto;
    font-size: 0.7rem;
    color: var(--smw-grey, #6c757d);
}

.advanced-body[b-pt69ijzby0] {
    display: none;
    padding-top: 0.85rem;
}

.advanced-body.open[b-pt69ijzby0] {
    display: block;
}
/* /Components/Pages/Landing.razor.rz.scp.css */
/* Landing page styles are shared with /video-game-alerts and /pc-parts-alerts
   and live in wwwroot/app.css under the `.landing-*` namespace. */
/* /Components/Pages/Matches.razor.rz.scp.css */
/* ── Filter / sort toolbar ─────────────────────────────────────────────── */

.matches-toolbar[b-78rpg3dc7u] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
}

.toolbar-group[b-78rpg3dc7u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.toolbar-label[b-78rpg3dc7u] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--bs-secondary-color, #6c757d);
    white-space: nowrap;
    flex-shrink: 0;
    margin-bottom: 0;
}

.sort-buttons[b-78rpg3dc7u] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.sort-buttons .btn:focus[b-78rpg3dc7u],
.sort-buttons .btn:active:focus[b-78rpg3dc7u] {
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.5);
}

.sort-separator[b-78rpg3dc7u] {
    width: 1px;
    height: 1.4rem;
    background: var(--bs-border-color, #dee2e6);
    margin: 0 0.35rem;
    flex-shrink: 0;
}

.sort-dir-btn[b-78rpg3dc7u] {
    width: 4.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
}

.sort-arrow[b-78rpg3dc7u] {
    position: relative;
    top: -1px;
    line-height: 1;
}

@media (max-width: 640px) {
    .matches-toolbar[b-78rpg3dc7u] {
        gap: 0.75rem;
        padding: 0.6rem 0.75rem;
    }

    .toolbar-group[b-78rpg3dc7u] {
        flex-wrap: wrap;
    }

    .sort-buttons[b-78rpg3dc7u] {
        flex-wrap: wrap;
        row-gap: 0.4rem;
    }

    .sort-separator[b-78rpg3dc7u] {
        display: none;
    }
}

/* ── Matches list ──────────────────────────────────────────────────────── */

.matches-list[b-78rpg3dc7u] {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    overflow: hidden;
    margin-bottom: 1rem;
}

.match-card[b-78rpg3dc7u] {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    background: var(--bs-body-bg, #fff);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    transition: background 0.1s ease;
}

.match-card:last-child[b-78rpg3dc7u] {
    border-bottom: none;
}

.match-card:nth-child(even)[b-78rpg3dc7u] {
    background: var(--bs-tertiary-bg, #f8f9fa);
}

.match-card:hover[b-78rpg3dc7u] {
    background: color-mix(in srgb, var(--bs-tertiary-bg, #f8f9fa) 60%, var(--bs-emphasis-color, #000) 4%);
}

.match-thumb-link[b-78rpg3dc7u] {
    flex-shrink: 0;
    display: block;
    border-radius: 0.375rem;
    overflow: hidden;
}

.match-thumb[b-78rpg3dc7u] {
    width: 56px;
    height: 56px;
    object-fit: cover;
    display: block;
    border-radius: 0.375rem;
}

.match-thumb-placeholder[b-78rpg3dc7u] {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 0.375rem;
    background: var(--bs-secondary-bg, #e9ecef);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
}

.match-body[b-78rpg3dc7u] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.match-title[b-78rpg3dc7u] {
    display: block;
    color: var(--smw-water, #4090d8);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.match-title:hover[b-78rpg3dc7u] {
    color: var(--smw-grass-dark, #267326);
    text-decoration: none;
}

.match-meta[b-78rpg3dc7u] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.match-price[b-78rpg3dc7u] {
    font-family: var(--pixel-font);
    font-size: 1rem;
    color: var(--smw-grass-dark, #267326);
    letter-spacing: 0.03em;
}

.match-sub[b-78rpg3dc7u] {
    font-size: 0.78rem;
    color: var(--bs-secondary-color, #6c757d);
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.separator[b-78rpg3dc7u] {
    opacity: 0.5;
}
/* /Components/Pages/Profiles.razor.rz.scp.css */
/* In-alert "Upgrade to …" link — blue, underlined, with a hover lift. */
.upgrade-link[b-3ogi9hmym2] {
    color: var(--smw-water);
    text-decoration: underline;
    font-weight: 600;
    transition: color 100ms ease-out, text-shadow 100ms ease-out;
}

.upgrade-link:hover[b-3ogi9hmym2],
.upgrade-link:focus[b-3ogi9hmym2] {
    color: var(--smw-sky-bright, var(--smw-water));
    text-shadow: 1px 1px 0 rgba(64, 144, 216, 0.25);
}
/* /Components/Shared/ConditionPicker.razor.rz.scp.css */
/* ── ConditionPicker ──────────────────────────────────────────────────────── */

.condition-picker[b-qvao6puxi2] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-height: 2.5rem;
    padding: 0.35rem 0.5rem;
    border: 2px solid var(--smw-sand-dark);
    background: var(--smw-white);
}

.condition-chip[b-qvao6puxi2] {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    background: transparent;
    border: 2px solid var(--smw-grey);
    color: var(--smw-dark-grey);
    font-family: var(--pixel-font);
    font-size: 0.58rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    border-radius: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.15);
    transition: background-color .1s, border-color .1s, color .1s, box-shadow .1s;
}

.condition-chip:hover[b-qvao6puxi2] {
    border-color: var(--smw-water);
    color: var(--smw-water);
    background: rgba(64, 144, 216, 0.08);
}

.condition-chip.active[b-qvao6puxi2] {
    background-color: var(--smw-water);
    border-color: var(--smw-water);
    color: var(--smw-white);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.condition-chip.active:hover[b-qvao6puxi2] {
    background-color: var(--smw-dark-grey);
    border-color: var(--smw-dark-grey);
    color: var(--smw-white);
}

.condition-any-hint[b-qvao6puxi2] {
    font-family: var(--pixel-font);
    font-size: 0.6rem;
    color: var(--smw-grey);
    padding: 0.1rem 0.25rem;
    font-style: italic;
}
/* /Components/Shared/DealsFeed.razor.rz.scp.css */
.deals-feed-chips[b-xy1ggnyt2j] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin: 0 0 1.25rem;
    /* Stick under the landing-nav (height: 4rem) so the condition filter is
       always reachable while scrolling the listings. Padding gives the chip
       shadows breathing room; the negative margin lets the strip span the
       container's gutter and the matching background hides whatever scrolls
       past underneath. */
    position: sticky;
    top: 4rem;
    z-index: 5;
    padding: 0.75rem 0;
    background: var(--smw-white);
    border-bottom: 2px solid var(--smw-sand-dark);
}

@media (max-width: 640px) {
    .deals-feed-chips[b-xy1ggnyt2j] {
        top: 3.5rem;
        padding: 0.5rem 0;
    }
}

.deals-feed-chip[b-xy1ggnyt2j] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--smw-dark-grey);
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.1s, background-color 0.1s;
}

.deals-feed-chip:hover[b-xy1ggnyt2j] {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.25);
}

.deals-feed-chip.active[b-xy1ggnyt2j] {
    background: var(--smw-coin);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3) inset, 3px 3px 0 rgba(0, 0, 0, 0.25);
    color: var(--smw-dark-grey);
}

.deals-feed-chip:disabled[b-xy1ggnyt2j],
.deals-feed-chip[aria-disabled="true"][b-xy1ggnyt2j] {
    opacity: 0.5;
    cursor: not-allowed;
}

.deals-feed-chip-count[b-xy1ggnyt2j] {
    display: inline-block;
    min-width: 1.6em;
    padding: 0 0.4em;
    background: var(--smw-sand-light);
    border: 2px solid var(--smw-sand-dark);
    font-size: 0.6rem;
    line-height: 1.4;
    text-align: center;
}

.deals-feed-chip.active .deals-feed-chip-count[b-xy1ggnyt2j] {
    background: var(--smw-white);
}

.deals-feed-empty[b-xy1ggnyt2j] {
    font-family: var(--pixel-font);
    font-size: 0.75rem;
    line-height: 1.85;
    color: var(--smw-grey);
    background: var(--smw-white);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.2);
    padding: 1.5rem 1.25rem;
    margin: 0;
}

.deals-feed-empty strong[b-xy1ggnyt2j] {
    color: var(--smw-dark-grey);
}

/* "Scanning eBay…" empty-state with a CSS-drawn pixel radar mascot — three
   bouncing dots in a CRT-style enclosure. Shown when the feed has zero
   listings (vs the in-feed "no chip matches" empty, which keeps the plain
   paragraph treatment). */
.deals-feed-empty-scanning[b-xy1ggnyt2j] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 1.5rem;
    align-items: center;
    padding: 1.75rem 1.5rem;
}

.deals-feed-empty-mascot[b-xy1ggnyt2j] {
    display: flex;
    gap: 0.45rem;
    padding: 1rem 0.85rem;
    background: var(--smw-sand-dark);
    border: 3px solid var(--smw-sand-dark);
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, 0.08);
}

.deals-feed-empty-dot[b-xy1ggnyt2j] {
    width: 0.7rem;
    height: 0.7rem;
    background: var(--smw-coin);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.4);
    animation: deals-feed-empty-bounce-b-xy1ggnyt2j 1.2s infinite ease-in-out;
}

.deals-feed-empty-dot:nth-child(2)[b-xy1ggnyt2j] { animation-delay: 0.18s; background: var(--smw-coin-bright); }
.deals-feed-empty-dot:nth-child(3)[b-xy1ggnyt2j] { animation-delay: 0.36s; }

@keyframes deals-feed-empty-bounce-b-xy1ggnyt2j {
    0%, 80%, 100% { transform: translateY(0); opacity: 0.55; }
    40%           { transform: translateY(-0.5rem); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .deals-feed-empty-dot[b-xy1ggnyt2j] {
        animation: none;
        opacity: 1;
    }
}

.deals-feed-empty-body[b-xy1ggnyt2j] {
    color: var(--smw-dark-grey);
}

.deals-feed-empty-headline[b-xy1ggnyt2j] {
    font-family: var(--pixel-font);
    font-size: 1rem;
    margin: 0 0 0.5rem;
    color: var(--smw-sand-dark);
    letter-spacing: 0.04em;
}

.deals-feed-empty-sub[b-xy1ggnyt2j] {
    margin: 0 0 1rem;
    font-size: 0.7rem;
    line-height: 1.7;
}

.deals-feed-empty-cta[b-xy1ggnyt2j] {
    font-family: var(--pixel-font);
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

@media (max-width: 640px) {
    .deals-feed-empty-scanning[b-xy1ggnyt2j] {
        grid-template-columns: 1fr;
        gap: 1rem;
        justify-items: center;
        text-align: center;
    }
}

@media (max-width: 640px) {
    .deals-feed-chip[b-xy1ggnyt2j] {
        font-size: 0.55rem;
        padding: 0.45rem 0.75rem;
    }
}
/* /Components/Shared/FaqList.razor.rz.scp.css */
/* FAQ as native <details> accordion. Each item is its own pixel-card so the
   list reads like a stack of cartridge labels. The chevron is a CSS-drawn
   triangle (rotates 90deg when open) — no SVG asset, no JS. */

.faq-list[b-kftw3tdm96] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq-list-item[b-kftw3tdm96] {
    background: var(--smw-white, #fcfcfc);
    border: 3px solid var(--smw-sand-dark, #111111);
    box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.18);
    color: var(--smw-sand-dark, #111111);
}

/* Strip the browser default ▶ marker so we can render our own pixel chevron. */
.faq-list-question[b-kftw3tdm96] {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    font-family: var(--pixel-font);
    font-size: 0.8rem;
    line-height: 1.4;
    letter-spacing: 0.02em;
}

.faq-list-question[b-kftw3tdm96]::-webkit-details-marker {
    display: none;
}

/* CSS-drawn pixel chevron — a square rotated 45deg with two sides hidden.
   Sits to the left of the question text. Rotates when the item opens. */
.faq-list-question[b-kftw3tdm96]::before {
    content: "";
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-right: 3px solid var(--smw-sand-dark, #111111);
    border-bottom: 3px solid var(--smw-sand-dark, #111111);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
}

.faq-list-item[open] > .faq-list-question[b-kftw3tdm96]::before {
    transform: rotate(45deg);
}

.faq-list-question:hover[b-kftw3tdm96] {
    background: var(--smw-sand-light, #f4eccc);
}

.faq-list-answer[b-kftw3tdm96] {
    padding: 0 1rem 1rem 2.4rem;
    font-family: var(--pixel-font);
    font-size: 0.72rem;
    line-height: 1.85;
    color: var(--smw-dark-grey, #3c4850);
}

@media (max-width: 640px) {
    .faq-list-question[b-kftw3tdm96] {
        font-size: 0.72rem;
        padding: 0.7rem 0.85rem;
    }

    .faq-list-answer[b-kftw3tdm96] {
        padding: 0 0.85rem 0.85rem 2.1rem;
        font-size: 0.65rem;
    }
}
/* /Components/Shared/LoadingState.razor.rz.scp.css */
.ls-fadein[b-wrkvknn3di] {
    animation: ls-fade-in-b-wrkvknn3di 0.18s ease-out both;
}

@keyframes ls-fade-in-b-wrkvknn3di {
    from { opacity: 0; }
    to   { opacity: 1; }
}
/* /Components/Shared/StatCard.razor.rz.scp.css */
/* Compact body — main area is the number, not whitespace */
.stat-body[b-ayy7x3nqun] {
    padding: 0.7rem 0.9rem 0.6rem;
}

/* Small all-caps label above the number */
.stat-label[b-ayy7x3nqun] {
    font-size: 0.55rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.1rem;
}

/* The hero number */
.stat-value[b-ayy7x3nqun] {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-bottom: 0.2rem;
}

/* Secondary context line below the number */
.stat-subtext[b-ayy7x3nqun] {
    font-size: 0.55rem;
    opacity: 0.65;
    margin-bottom: 0.35rem;
    line-height: 1.4;
}

/* Quick-action link — inherits card text colour */
.stat-action[b-ayy7x3nqun] {
    display: inline-block;
    font-size: 0.55rem;
    letter-spacing: 0.05em;
    color: inherit !important;
    text-decoration: none !important;
    opacity: 0.8;
    transition: opacity 0.1s;
}

.stat-action:hover[b-ayy7x3nqun] {
    opacity: 1;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.55);
    color: inherit !important;
}
/* /Components/Shared/TierPill.razor.rz.scp.css */
/* ── Tier block: external "Plan" label + separator + colored pill ──────
   Sits in the center of the top bar; the pill links to /billing.
   ──────────────────────────────────────────────────────────────────── */

.tier-block[b-vc92dqphmg] {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    white-space: nowrap;
}

.tier-block-label[b-vc92dqphmg] {
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    color: var(--smw-dark-grey);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.tier-block-sep[b-vc92dqphmg] {
    color: var(--smw-grey);
    font-size: 0.8rem;
    line-height: 1;
    user-select: none;
}

/* ── The pill itself ──────────────────────────────────────────────── */

.tier-pill[b-vc92dqphmg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.35em 0.85em;
    border: 2px solid var(--smw-sand-dark);
    border-radius: 0;
    font-family: 'Silkscreen', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    color: var(--smw-white);
    box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.3);
    transition: transform 80ms ease-out, box-shadow 80ms ease-out;
    line-height: 1;
}

.tier-pill:hover[b-vc92dqphmg],
.tier-pill:focus[b-vc92dqphmg] {
    color: var(--smw-white);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.35);
}

.tier-pill:active[b-vc92dqphmg] {
    transform: translate(1px, 1px);
    box-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
}

.tier-pill-label[b-vc92dqphmg] {
    font-weight: bold;
}

/* ── Tier color variants — match the .btn-* palette in app.css ─────── */

.tier-pill--free[b-vc92dqphmg] {
    background-color: var(--sfc-shell);
    border-color: var(--smw-grey);
}

.tier-pill--free:hover[b-vc92dqphmg],
.tier-pill--free:focus[b-vc92dqphmg] {
    background-color: var(--smw-dark-grey);
    border-color: var(--smw-grey);
}

.tier-pill--pro[b-vc92dqphmg] {
    background-color: var(--smw-grass);
    border-color: var(--smw-grass-dark);
}

.tier-pill--pro:hover[b-vc92dqphmg],
.tier-pill--pro:focus[b-vc92dqphmg] {
    background-color: var(--smw-grass-dark);
    border-color: var(--smw-grass-dark);
}

.tier-pill--ultra[b-vc92dqphmg] {
    background-color: var(--smw-purple);
    border-color: var(--smw-purple-dark);
}

.tier-pill--ultra:hover[b-vc92dqphmg],
.tier-pill--ultra:focus[b-vc92dqphmg] {
    background-color: var(--smw-purple-dark);
    border-color: var(--smw-purple-dark);
}

/* ── Pulsing Upgrade chip embedded in the Free tier pill ───────────── */

.tier-pill-inner-sep[b-vc92dqphmg] {
    width: 1px;
    height: 1em;
    background-color: rgba(255, 255, 255, 0.55);
    user-select: none;
}

.tier-pill-cta[b-vc92dqphmg] {
    background: var(--smw-coin, #fcc419);
    color: var(--smw-dark-grey);
    padding: 0.2em 0.5em;
    border-radius: 0;
    animation: tier-pill-pulse-b-vc92dqphmg 2s ease-in-out infinite;
}

@keyframes tier-pill-pulse-b-vc92dqphmg {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.55; }
}

/* ── Warning chip when a cancellation is scheduled ───────────────── */

.tier-pill-warn[b-vc92dqphmg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1em;
    height: 1.1em;
    background: var(--smw-mario-red, #d62828);
    color: var(--smw-white);
    border: 1px solid rgba(0, 0, 0, 0.4);
    font-weight: bold;
    font-size: 0.6rem;
}