@import 'AthleteX.Web.Client.zlq9vrxqrb.bundle.scp.css';

/* /Components/Layout/AdminLayout.razor.rz.scp.css */
/* ============================================================================
   ADMIN LAYOUT — Premium Admin Panel Design
   Sidebar + Topbar + Content layout system
   ============================================================================ */

/* === Layout Grid === */
.admin-layout[b-kus8hpccge] {
    display: grid;
    grid-template-columns: 260px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
        "sidebar content";
    min-height: 100vh;
    background: var(--bg-primary);
}

/* === Sidebar === */
.admin-sidebar[b-kus8hpccge] {
    grid-area: sidebar;
    display: flex;
    flex-direction: column;
    background: var(--color-primary);
    color: var(--color-text-inverse);
    height: 100vh;
    position: sticky;
    top: 0;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: var(--z-sticky);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.admin-sidebar[b-kus8hpccge]::-webkit-scrollbar {
    width: 4px;
}

.admin-sidebar[b-kus8hpccge]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
}

/* Sidebar Header */
.sidebar-header[b-kus8hpccge] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.sidebar-logo[b-kus8hpccge] {
    display: flex;
    align-items: center;
}

.sidebar-logo img[b-kus8hpccge] {
    opacity: 0.9;
    transition: opacity var(--transition-fast);
}

[data-theme="dark"] .sidebar-logo img[b-kus8hpccge] {
    filter: brightness(0) invert(1);
}

.sidebar-logo:hover img[b-kus8hpccge] {
    opacity: 1;
}

.sidebar-badge[b-kus8hpccge] {
    font-size: 0.65rem;
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    line-height: 1.3;
}

.sidebar-close-btn[b-kus8hpccge] {
    display: none;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: var(--text-lg);
    cursor: pointer;
    margin-left: auto;
    padding: var(--space-xs);
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.sidebar-close-btn:hover[b-kus8hpccge] {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
}

/* Sidebar Navigation */
.sidebar-nav[b-kus8hpccge] {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-sm) 0;
}

.nav-group[b-kus8hpccge] {
    margin-bottom: var(--space-xs);
}

.nav-group-label[b-kus8hpccge] {
    font-size: 0.65rem;
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.35);
    padding: var(--space-md) var(--space-lg) var(--space-xs);
}

.nav-item[b-kus8hpccge] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.45rem var(--space-lg);
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
    line-height: 1.4;
}

.nav-item:hover[b-kus8hpccge] {
    color: #fff;
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.nav-item.active[b-kus8hpccge] {
    color: var(--color-accent);
    background: rgba(255, 215, 0, 0.08);
    border-left-color: var(--color-accent);
    font-weight: var(--weight-medium);
}

.nav-item i[b-kus8hpccge] {
    width: 20px;
    text-align: center;
    font-size: 1rem;
    flex-shrink: 0;
    opacity: 0.8;
}

.nav-item:hover i[b-kus8hpccge],
.nav-item.active i[b-kus8hpccge] {
    opacity: 1;
}

/* Sidebar Footer */
.sidebar-footer[b-kus8hpccge] {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: var(--space-md) var(--space-lg);
    flex-shrink: 0;
}

.sidebar-utilities[b-kus8hpccge] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.sidebar-back-link[b-kus8hpccge] {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.45);
    text-decoration: none;
    font-size: var(--text-sm);
    padding: var(--space-xs) 0;
    transition: color var(--transition-fast);
}

.sidebar-back-link:hover[b-kus8hpccge] {
    color: var(--color-accent);
    text-decoration: none;
}

/* === Topbar (mobile only) === */
.admin-topbar[b-kus8hpccge] {
    grid-area: topbar;
    display: none;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    position: sticky;
    top: 0;
    z-index: var(--z-dropdown);
}

.topbar-toggle[b-kus8hpccge] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-xl);
    color: var(--color-text-primary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.topbar-toggle:hover[b-kus8hpccge] {
    background: var(--color-surface-hover);
}

.topbar-title[b-kus8hpccge] {
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.topbar-site-link[b-kus8hpccge] {
    margin-left: auto;
    color: var(--color-text-muted);
    font-size: var(--text-lg);
    padding: var(--space-xs);
    transition: color var(--transition-fast);
}

.topbar-site-link:hover[b-kus8hpccge] {
    color: var(--color-accent);
}

/* === Main Content Area === */
.admin-content[b-kus8hpccge] {
    grid-area: content;
    padding: var(--space-xl) var(--space-lg);
    min-width: 0;
    max-width: 100%;
}

/* === Overlay (mobile) === */
.admin-overlay[b-kus8hpccge] {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: calc(var(--z-drawer) - 1);
    backdrop-filter: blur(2px);
}

/* === Dark Mode Adjustments === */
:global([data-theme="dark"]) .admin-sidebar[b-kus8hpccge] {
    background: #0d0d1a;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

/* === Responsive: Mobile (<992px) === */
@media (max-width: 991.98px) {
    .admin-layout[b-kus8hpccge] {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "topbar"
            "content";
    }

    .admin-sidebar[b-kus8hpccge] {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 280px;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        z-index: var(--z-drawer);
    }

    :global(.sidebar-open) .admin-sidebar[b-kus8hpccge] {
        transform: translateX(0);
    }

    .admin-topbar[b-kus8hpccge] {
        display: flex;
    }

    .sidebar-close-btn[b-kus8hpccge] {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .admin-overlay[b-kus8hpccge] {
        z-index: calc(var(--z-drawer) - 1);
    }

    :global(.sidebar-open) .admin-overlay[b-kus8hpccge] {
        display: block;
    }

    .admin-content[b-kus8hpccge] {
        padding: var(--space-md);
    }
}

/* === Responsive: Tablet (992-1199px) === */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .admin-layout[b-kus8hpccge] {
        grid-template-columns: 220px 1fr;
    }

    .nav-item[b-kus8hpccge] {
        font-size: 0.8125rem;
        padding: 0.4rem var(--space-md);
    }

    .nav-group-label[b-kus8hpccge] {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .sidebar-header[b-kus8hpccge] {
        padding: var(--space-md);
    }

    .sidebar-footer[b-kus8hpccge] {
        padding: var(--space-md);
    }
}

/* === Responsive: Large (>=1200px) === */
@media (min-width: 1200px) {
    .admin-content[b-kus8hpccge] {
        padding: var(--space-xl) var(--space-2xl);
    }
}
/* /Components/Layout/BuilderLayout.razor.rz.scp.css */
.builder-layout[b-bvqklvd1ac] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.builder-header[b-bvqklvd1ac] {
    background-color: var(--color-accent);
    color: var(--color-primary);
    padding: var(--space-sm) 0;
}

.builder-header[b-bvqklvd1ac]  .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.back-link[b-bvqklvd1ac] {
    font-size: var(--text-sm);
    color: var(--color-primary) !important;
    opacity: 0.7;
    transition: all var(--transition-base);
    text-decoration: none;
}

.back-link:hover[b-bvqklvd1ac] {
    opacity: 1;
    color: var(--color-primary) !important;
}

.step-indicator[b-bvqklvd1ac] {
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-sm);
}

.builder-content[b-bvqklvd1ac] {
    flex: 1;
    display: flex;
    flex-direction: column;
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* ── Skip Nav ─────────────────────────────────────── */
.skip-nav[b-3169w9mrrq] {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-accent);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-lg);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    font-weight: var(--weight-semibold);
    z-index: var(--z-tooltip, 1090);
    transition: top var(--transition-fast);
    text-decoration: none;
}

.skip-nav:focus[b-3169w9mrrq] {
    top: 0;
}

/* ── Page Wrapper ─────────────────────────────────── */
.page[b-3169w9mrrq] {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Header ───────────────────────────────────────── */
.site-header[b-3169w9mrrq] {
    background-color: var(--bg-card);
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    transition: padding var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-slow);
}

.header-inner[b-3169w9mrrq] {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.site-header.scrolled .header-inner[b-3169w9mrrq] {
    padding-top: var(--space-sm);
    padding-bottom: var(--space-sm);
}

.site-header.scrolled[b-3169w9mrrq] {
    box-shadow: var(--shadow-md);
}

/* ── Logo ─────────────────────────────────────────── */
.logo[b-3169w9mrrq] {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.logo-image[b-3169w9mrrq] {
    height: 40px;
    width: auto;
    display: block;
    transition: height var(--transition-base);
}

.site-header.scrolled .logo-image[b-3169w9mrrq] {
    height: 32px;
}

/* ── Main Content ─────────────────────────────────── */
main[b-3169w9mrrq] {
    flex: 1;
}

/* ── Footer ───────────────────────────────────────── */
.site-footer[b-3169w9mrrq] {
    background-color: var(--bg-dark);
    color: var(--color-text-inverse);
    margin-top: auto;
}

.footer-inner[b-3169w9mrrq] {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-3xl) var(--space-xl) var(--space-2xl);
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
}

@media (max-width: 768px) {
    .footer-inner[b-3169w9mrrq] {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-xl);
    }
}

@media (max-width: 480px) {
    .footer-inner[b-3169w9mrrq] {
        grid-template-columns: 1fr;
    }
}

.footer-brand[b-3169w9mrrq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.footer-logo[b-3169w9mrrq] {
    height: 33px;
    width: auto;
}

.footer-tagline[b-3169w9mrrq] {
    color: rgba(255, 255, 255, 0.6);
    font-size: var(--text-sm);
    margin: 0;
}

.footer-col[b-3169w9mrrq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer-heading[b-3169w9mrrq] {
    color: var(--color-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wider);
    margin-bottom: var(--space-sm);
}

.footer-col a[b-3169w9mrrq] {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: var(--text-sm);
    transition: color var(--transition-base);
}

.footer-col a:hover[b-3169w9mrrq] {
    color: var(--color-accent);
}

.footer-bottom[b-3169w9mrrq] {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.footer-bottom p[b-3169w9mrrq] {
    color: rgba(255, 255, 255, 0.4);
    font-size: var(--text-xs);
    margin: 0;
}

/* ── Footer utilities (theme + language) ──────────── */
.footer-utilities[b-3169w9mrrq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--space-md) var(--space-xl) 0;
}
/* /Components/Layout/MobileBottomBar.razor.rz.scp.css */
/* ── Hidden on desktop ─────────────────────────────── */
.mobile-bottom-bar[b-vgzn0yvilt] {
    display: none;
}

/* ════════════════════════════════════════════════════
   MOBILE (≤ 768px)
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mobile-bottom-bar[b-vgzn0yvilt] {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: var(--z-sticky, 100);
        background-color: var(--color-surface, #fff);
        border-top: 1px solid var(--border-subtle);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        height: calc(60px + env(safe-area-inset-bottom, 0px));
        align-items: center;
        justify-content: space-around;
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
    }

    .bottom-bar-item[b-vgzn0yvilt] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        flex: 1;
        height: 100%;
        text-decoration: none;
        color: var(--color-text-muted);
        font-size: 0.625rem;
        transition: color var(--transition-fast, 0.15s);
        -webkit-tap-highlight-color: transparent;
        padding: 6px 0;
    }

    .bottom-bar-item:hover[b-vgzn0yvilt],
    .bottom-bar-item:active[b-vgzn0yvilt] {
        color: var(--color-text-primary);
    }

    .bottom-bar-label[b-vgzn0yvilt] {
        display: block;
        line-height: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 64px;
    }

    /* ── CTA circle — elevated gold button ─────────── */
    .bottom-bar-cta[b-vgzn0yvilt] {
        position: relative;
    }

    .bottom-bar-cta-circle[b-vgzn0yvilt] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background-color: var(--color-accent);
        color: var(--color-primary);
        box-shadow: 0 4px 12px rgba(255, 215, 0, 0.35);
        margin-top: -18px;
        transition: transform var(--transition-base), box-shadow var(--transition-base);
    }

    .bottom-bar-cta:active .bottom-bar-cta-circle[b-vgzn0yvilt] {
        transform: scale(0.92);
    }

    /* Ensure nested interactive icon buttons fit the bar */
    [b-vgzn0yvilt] .nav-icon-btn {
        width: 36px;
        height: 36px;
    }

    [b-vgzn0yvilt] .cart-count {
        top: -4px;
        right: -6px;
        min-width: 16px;
        height: 16px;
        line-height: 16px;
        font-size: 0.6rem;
    }
}
/* /Components/Layout/MobileHeaderBar.razor.rz.scp.css */
/* ══════════════════════════════════════════════════
   MobileHeaderBar — Hidden on desktop
   ══════════════════════════════════════════════════ */
.mobile-header-icons[b-6hmfc1ov1e] {
    display: none;
}

/* ══════════════════════════════════════════════════
   MOBILE (≤ 768px)
   ══════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Header icon row ──────────────────────────── */
    .mobile-header-icons[b-6hmfc1ov1e] {
        display: flex;
        align-items: center;
        gap: var(--space-xs, 4px);
    }

    .hamburger-btn[b-6hmfc1ov1e] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--radius-full, 50%);
        color: var(--color-text-body);
        cursor: pointer;
        transition: color var(--transition-base), background-color var(--transition-base);
        -webkit-tap-highlight-color: transparent;
    }

    .hamburger-btn:hover[b-6hmfc1ov1e],
    .hamburger-btn:focus-visible[b-6hmfc1ov1e] {
        color: var(--color-accent-text, var(--color-accent));
        background-color: var(--color-surface-hover, rgba(0, 0, 0, 0.05));
    }

    /* ── Backdrop ─────────────────────────────────── */
    .drawer-backdrop[b-6hmfc1ov1e] {
        position: fixed;
        inset: 0;
        z-index: var(--z-drawer, 1050);
        background: rgba(0, 0, 0, 0.5);
        animation: drawer-fade-in-b-6hmfc1ov1e 0.25s ease-out;
    }

    /* ── Drawer panel ─────────────────────────────── */
    .drawer-panel[b-6hmfc1ov1e] {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: calc(var(--z-drawer, 1050) + 1);
        width: min(320px, 85vw);
        background-color: var(--color-surface, #fff);
        box-shadow: -4px 0 24px rgba(0, 0, 0, 0.18);
        display: flex;
        flex-direction: column;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: drawer-slide-in-b-6hmfc1ov1e 0.3s cubic-bezier(0.32, 0.72, 0, 1);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }

    /* ── Drawer header ────────────────────────────── */
    .drawer-header[b-6hmfc1ov1e] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--space-md, 16px);
        border-bottom: 1px solid var(--border-subtle, #eee);
        min-height: 56px;
    }

    .drawer-logo[b-6hmfc1ov1e] {
        height: 28px;
        width: auto;
    }

    .close-btn[b-6hmfc1ov1e] {
        width: 36px;
        height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        background: transparent;
        border: none;
        border-radius: var(--radius-full, 50%);
        color: var(--color-text-body);
        cursor: pointer;
        transition: color var(--transition-base), background-color var(--transition-base);
        -webkit-tap-highlight-color: transparent;
    }

    .close-btn:hover[b-6hmfc1ov1e],
    .close-btn:focus-visible[b-6hmfc1ov1e] {
        color: var(--color-accent-text, var(--color-accent));
        background-color: var(--color-surface-hover, rgba(0, 0, 0, 0.05));
    }

    /* ── Drawer sections ──────────────────────────── */
    .drawer-section[b-6hmfc1ov1e] {
        padding: var(--space-sm, 8px) 0;
        border-bottom: 1px solid var(--border-subtle, #eee);
    }

    .drawer-section-label[b-6hmfc1ov1e] {
        display: block;
        padding: var(--space-xs, 4px) var(--space-md, 16px);
        font-size: var(--text-xs, 0.75rem);
        font-weight: var(--weight-semibold, 600);
        color: var(--color-text-muted);
        text-transform: uppercase;
        letter-spacing: var(--tracking-wide, 0.05em);
    }

    .drawer-user-name[b-6hmfc1ov1e] {
        padding: var(--space-xs, 4px) var(--space-md, 16px) var(--space-sm, 8px);
        font-size: var(--text-sm, 0.875rem);
        font-weight: var(--weight-semibold, 600);
        color: var(--color-text-primary);
    }

    /* ── CTA button ───────────────────────────────── */
    .drawer-cta[b-6hmfc1ov1e] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-sm, 8px);
        margin: var(--space-sm, 8px) var(--space-md, 16px);
        padding: var(--space-sm, 10px) var(--space-lg, 20px);
        background-color: var(--color-accent, #FFD700);
        color: var(--color-primary, #1a1a2e);
        border-radius: var(--radius-md, 8px);
        font-weight: var(--weight-semibold, 600);
        font-size: var(--text-base, 1rem);
        text-decoration: none;
        text-align: center;
        transition: transform var(--transition-fast), box-shadow var(--transition-fast);
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.3);
    }

    .drawer-cta:active[b-6hmfc1ov1e] {
        transform: scale(0.97);
    }

    /* ── Nav links ────────────────────────────────── */
    .drawer-link[b-6hmfc1ov1e] {
        display: flex;
        align-items: center;
        gap: var(--space-sm, 10px);
        padding: var(--space-sm, 10px) var(--space-md, 16px);
        color: var(--color-text-primary);
        text-decoration: none;
        font-size: var(--text-base, 1rem);
        transition: background-color 0.15s ease;
        -webkit-tap-highlight-color: transparent;
    }

    .drawer-link:hover[b-6hmfc1ov1e],
    .drawer-link:focus-visible[b-6hmfc1ov1e] {
        background-color: var(--color-surface-hover, rgba(0, 0, 0, 0.04));
    }

    .drawer-link svg[b-6hmfc1ov1e] {
        flex-shrink: 0;
        color: var(--color-text-muted);
    }

    /* ── Danger link (logout) ─────────────────────── */
    .drawer-link-danger[b-6hmfc1ov1e] {
        color: var(--color-danger, #dc3545);
    }

    .drawer-link-danger svg[b-6hmfc1ov1e] {
        color: var(--color-danger, #dc3545);
    }

    .drawer-link-danger:hover[b-6hmfc1ov1e],
    .drawer-link-danger:focus-visible[b-6hmfc1ov1e] {
        background-color: rgba(220, 53, 69, 0.06);
    }

    /* ── Utilities row ────────────────────────────── */
    .drawer-utilities[b-6hmfc1ov1e] {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-lg, 24px);
        padding: var(--space-md, 16px);
    }

    /* ── Logout section ───────────────────────────── */
    .drawer-logout-section[b-6hmfc1ov1e] {
        margin-top: auto;
        border-bottom: none;
        border-top: 1px solid var(--border-subtle, #eee);
    }

    /* ── Animations ───────────────────────────────── */
    @keyframes drawer-slide-in-b-6hmfc1ov1e {
        from {
            transform: translateX(100%);
        }

        to {
            transform: translateX(0);
        }
    }

    @keyframes drawer-fade-in-b-6hmfc1ov1e {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }
}

/* ── Body scroll lock when drawer is open ────────── */
:global(body.drawer-open)[b-6hmfc1ov1e] {
    overflow: hidden;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ── Desktop Nav — 3-zone layout ───────────────────── */
.main-nav[b-03xgm8ojad] {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

/* ── CTA Button ───────────────────────────────────── */
.nav-cta-btn[b-03xgm8ojad] {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.625rem 1.25rem;
    font-size: var(--text-sm);
}

/* ── Icon group (right) ───────────────────────────── */
.nav-icons[b-03xgm8ojad] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-left: var(--space-md);
}

/* ── Shared icon button style ─────────────────────── */
[b-03xgm8ojad] .nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-full, 50%);
    color: var(--color-text-body);
    cursor: pointer;
    transition: color var(--transition-base), background-color var(--transition-base);
    text-decoration: none;
    position: relative;
}

[b-03xgm8ojad] .nav-icon-btn:hover,
[b-03xgm8ojad] .nav-icon-btn:focus-visible {
    color: var(--color-accent-text, var(--color-accent));
    background-color: var(--color-surface-hover, rgba(0, 0, 0, 0.05));
}

/* ════════════════════════════════════════════════════
   MOBILE (≤ 768px) — hidden, replaced by MobileBottomBar
   ════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .main-nav[b-03xgm8ojad] {
        display: none;
    }
}
/* /Components/Pages/Concept.razor.rz.scp.css */
/* Page Header */
.page-header[b-nfwx70jyd3] {
    background: linear-gradient(135deg, var(--color-accent-surface) 0%, var(--bg-card) 100%);
    padding: var(--space-4xl) 0 var(--space-3xl) 0;
    margin-bottom: var(--space-4xl);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}

.page-header h1[b-nfwx70jyd3] {
    margin-bottom: var(--space-md);
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
}

.header-subtitle[b-nfwx70jyd3] {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
}

/* Concept Content */
.concept-content[b-nfwx70jyd3] {
    padding-bottom: var(--space-5xl);
}

.concept-section[b-nfwx70jyd3] {
    margin-bottom: var(--space-4xl);
    padding: var(--space-3xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
}

.concept-section:hover[b-nfwx70jyd3] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
    transform: translateY(-2px);
}

/* Section Icons */
.section-icon[b-nfwx70jyd3] {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    text-align: center;
}

.concept-section h2[b-nfwx70jyd3] {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-lg);
    color: var(--color-text-primary);
    position: relative;
    padding-bottom: var(--space-md);
}

.concept-section h2[b-nfwx70jyd3]::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 60px;
    height: 3px;
    background: var(--color-accent);
}

.concept-section .lead[b-nfwx70jyd3] {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
    line-height: 1.8;
}

.concept-section p[b-nfwx70jyd3] {
    font-size: var(--text-base);
    line-height: 1.8;
    color: var(--color-text-muted);
    margin-bottom: var(--space-md);
}

.highlight[b-nfwx70jyd3] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    padding: var(--space-md) 0;
    border-left: 4px solid var(--color-accent);
    padding-left: var(--space-lg);
    margin-top: var(--space-lg);
    background: linear-gradient(90deg, var(--color-accent-surface) 0%, transparent 100%);
}

/* Features List */
.features-list[b-nfwx70jyd3] {
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
}

.features-list li[b-nfwx70jyd3] {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
}

.features-list li:hover[b-nfwx70jyd3] {
    border-color: var(--color-accent);
    background: var(--bg-card);
    transform: translateX(8px);
}

.features-list li strong[b-nfwx70jyd3] {
    display: block;
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.features-list li span[b-nfwx70jyd3] {
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* Closing Statement */
.closing-statement[b-nfwx70jyd3] {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: linear-gradient(135deg, var(--color-accent-surface) 0%, transparent 100%);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-accent);
}

.statement-bold[b-nfwx70jyd3] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.statement-emphasis[b-nfwx70jyd3] {
    font-size: var(--text-lg);
    font-weight: var(--weight-medium);
    color: var(--color-text-primary);
    font-style: italic;
}

/* CTA Section */
.cta-section[b-nfwx70jyd3] {
    text-align: center;
    padding: var(--space-4xl) var(--space-2xl);
    background: linear-gradient(135deg, var(--color-accent-surface) 0%, var(--bg-card) 100%);
    border-radius: var(--radius-lg);
    border: 2px solid var(--color-accent);
}

.cta-section h3[b-nfwx70jyd3] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-xl);
    color: var(--color-text-primary);
}

/* ── MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
    .page-header[b-nfwx70jyd3] {
        padding: var(--space-2xl) 0 var(--space-xl) 0;
        margin-bottom: var(--space-xl);
    }

    .page-header h1[b-nfwx70jyd3] {
        font-size: var(--text-2xl);
    }

    .header-subtitle[b-nfwx70jyd3] {
        font-size: var(--text-base);
    }

    .concept-content[b-nfwx70jyd3] {
        padding-bottom: var(--space-2xl);
    }

    .concept-section[b-nfwx70jyd3] {
        padding: var(--space-lg);
        margin-bottom: var(--space-xl);
    }

    .concept-section:hover[b-nfwx70jyd3] {
        transform: none;
    }

    .concept-section h2[b-nfwx70jyd3] {
        font-size: var(--text-xl);
    }

    .section-icon[b-nfwx70jyd3] {
        font-size: 2rem;
        margin-bottom: var(--space-md);
    }

    .concept-section .lead[b-nfwx70jyd3] {
        font-size: var(--text-base);
    }

    .highlight[b-nfwx70jyd3] {
        font-size: var(--text-base);
        padding: var(--space-sm) 0;
        padding-left: var(--space-md);
    }

    .features-list li[b-nfwx70jyd3] {
        padding: var(--space-md);
    }

    .features-list li:hover[b-nfwx70jyd3] {
        transform: none;
    }

    .features-list li strong[b-nfwx70jyd3] {
        font-size: var(--text-base);
    }

    .closing-statement[b-nfwx70jyd3] {
        padding: var(--space-md);
        margin-top: var(--space-lg);
    }

    .statement-bold[b-nfwx70jyd3] {
        font-size: var(--text-lg);
    }

    .statement-emphasis[b-nfwx70jyd3] {
        font-size: var(--text-base);
    }

    .cta-section[b-nfwx70jyd3] {
        padding: var(--space-xl) var(--space-lg);
    }

    .cta-section h3[b-nfwx70jyd3] {
        font-size: var(--text-xl);
    }

    .cta-section .btn-primary[b-nfwx70jyd3] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .page-header h1[b-nfwx70jyd3] {
        font-size: var(--text-xl);
    }

    .concept-section[b-nfwx70jyd3] {
        padding: var(--space-md);
    }

    .cta-section[b-nfwx70jyd3] {
        padding: var(--space-lg) var(--space-md);
    }
}
/* /Components/Pages/DigitalCard.razor.rz.scp.css */
/* 1. The Stage
   Container context only. No influence on card design. */
.card-stage[b-ioi160u8t0] {
    display: flex;
    justify-content: center;
    padding: var(--space-3xl) 0;
    perspective: 1000px;
    background-color: var(--bg-subtle);
    margin-bottom: var(--space-lg);
}

/* 2. The Object
   Mechanical container only. No visual styling. */
.card-object[b-ioi160u8t0] {
    position: relative;
    /* PROVISIONAL DIMENSIONS (Must match external template ratio) */
    width: 300px;
    height: 420px;

    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

    /* NO shadows, NO borders, NO background colors here. 
       Strictly a coordinate system holder. */
}

/* 3. The Faces (Overlap Logic)
   Mechanical positions only. */
.card-face[b-ioi160u8t0] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    /* NO padding, NO border-radius, NO background-color.
       The external card asset will provide all these visuals. */
}

.card-face-front[b-ioi160u8t0] {
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-face-back[b-ioi160u8t0] {
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    /* No padding added here to avoid shifting the injected layout */
}

/* Actions Bar */
.actions[b-ioi160u8t0] {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: 0;
}

/* Digital Card Page */
.digital-card-page[b-ioi160u8t0] {
    padding: var(--space-md, 0.75rem) 0;
}

.digital-card-display[b-ioi160u8t0] {
    display: flex;
    justify-content: center;
    padding: var(--space-sm, 0.5rem) 0;
}

.digital-card-page .page-header[b-ioi160u8t0] {
    margin-bottom: var(--space-sm, 0.5rem);
}

.digital-card-page .page-header h1[b-ioi160u8t0] {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-heading);
}

.digital-card-page .qr-code[b-ioi160u8t0] {
    width: 72px;
    height: 72px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
}

/* Back to dashboard link */
.back-to-dashboard[b-ioi160u8t0] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    color: var(--color-text-muted, #6c757d);
    font-size: var(--text-sm, 0.875rem);
    text-decoration: none;
    margin-bottom: var(--space-xs, 0.25rem);
    transition: color var(--transition-fast, 0.1s ease);
}

.back-to-dashboard:hover[b-ioi160u8t0] {
    color: var(--color-primary, #0d6efd);
}

/* Stacked second athlete name */
.athlete2-name[b-ioi160u8t0] {
    display: block;
    font-size: var(--text-2xl, 1.5rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text-muted, #6c757d);
}

/* Card number centered below card — premium dark pill */
.card-number-display[b-ioi160u8t0] {
    text-align: center;
    padding: var(--space-xs, 0.25rem) 0;
}

.card-number-display span[b-ioi160u8t0] {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-bold, 700);
    color: var(--color-accent, #d4a843);
    letter-spacing: 0.1em;
    background: var(--color-primary, #1a1a2e);
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full, 9999px);
    display: inline-block;
}
/* /Components/Pages/Error.razor.rz.scp.css */
.error-page[b-1ykyhyo53q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
}

.error-icon[b-1ykyhyo53q] {
    width: 80px;
    height: 80px;
    border-radius: var(--radius-full);
    background: var(--color-error-bg);
    color: var(--color-error);
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-xl);
}

.error-page h1[b-1ykyhyo53q] {
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    color: var(--color-text-heading);
    margin-bottom: var(--space-md);
}

.error-message[b-1ykyhyo53q] {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
    max-width: 480px;
}

.error-detail[b-1ykyhyo53q] {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
    padding: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
}

.error-detail code[b-1ykyhyo53q] {
    color: var(--color-text-body);
    font-size: var(--text-sm);
}
/* /Components/Pages/FAQ.razor.rz.scp.css */
/* Page Header */
.page-header[b-37rk1ja48p] {
    background: linear-gradient(135deg, var(--color-accent-surface) 0%, var(--bg-card) 100%);
    padding: var(--space-4xl) 0 var(--space-3xl) 0;
    margin-bottom: var(--space-4xl);
    text-align: center;
    border-bottom: 1px solid var(--border-light);
}

.page-header h1[b-37rk1ja48p] {
    margin-bottom: var(--space-md);
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
}

.header-subtitle[b-37rk1ja48p] {
    font-size: var(--text-xl);
    color: var(--color-text-muted);
}

/* FAQ Content */
.faq-content[b-37rk1ja48p] {
    padding-bottom: var(--space-5xl);
}

/* FAQ Category */
.faq-category[b-37rk1ja48p] {
    margin-bottom: var(--space-4xl);
    padding: var(--space-2xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 2px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
}

.faq-category:hover[b-37rk1ja48p] {
    border-color: var(--color-accent);
    box-shadow: var(--shadow-accent);
}

.category-header[b-37rk1ja48p] {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-accent);
}

.category-icon[b-37rk1ja48p] {
    font-size: 2rem;
}

.faq-category h2[b-37rk1ja48p] {
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-primary);
    margin: 0;
}

/* FAQ Item */
.faq-item[b-37rk1ja48p] {
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--border-medium);
    transition: all var(--transition-base);
}

.faq-item:hover[b-37rk1ja48p] {
    border-left-color: var(--color-accent);
    background: var(--bg-card);
    transform: translateX(4px);
    box-shadow: var(--shadow-sm);
}

.faq-item:last-child[b-37rk1ja48p] {
    margin-bottom: 0;
}

.faq-item h3[b-37rk1ja48p] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
    line-height: 1.4;
}

.faq-item p[b-37rk1ja48p] {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--space-sm);
}

.faq-item p:last-child[b-37rk1ja48p] {
    margin-bottom: 0;
}

.faq-item ul[b-37rk1ja48p] {
    margin: var(--space-md) 0;
    padding-left: var(--space-xl);
    list-style-type: disc;
}

.faq-item ul li[b-37rk1ja48p] {
    font-size: var(--text-base);
    line-height: 1.7;
    color: var(--color-text-muted);
    margin-bottom: var(--space-xs);
}

/* ── MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
    .page-header[b-37rk1ja48p] {
        padding: var(--space-2xl) 0 var(--space-xl) 0;
        margin-bottom: var(--space-xl);
    }

    .page-header h1[b-37rk1ja48p] {
        font-size: var(--text-2xl);
    }

    .header-subtitle[b-37rk1ja48p] {
        font-size: var(--text-base);
    }

    .faq-content[b-37rk1ja48p] {
        padding-bottom: var(--space-2xl);
    }

    .faq-category[b-37rk1ja48p] {
        padding: var(--space-md);
        margin-bottom: var(--space-xl);
    }

    .category-header[b-37rk1ja48p] {
        gap: var(--space-sm);
        margin-bottom: var(--space-md);
        padding-bottom: var(--space-md);
    }

    .category-icon[b-37rk1ja48p] {
        font-size: 1.5rem;
    }

    .faq-category h2[b-37rk1ja48p] {
        font-size: var(--text-xl);
    }

    .faq-item[b-37rk1ja48p] {
        padding: var(--space-md);
    }

    .faq-item:hover[b-37rk1ja48p] {
        transform: none;
    }

    .faq-item h3[b-37rk1ja48p] {
        font-size: var(--text-base);
    }

    .faq-item ul[b-37rk1ja48p] {
        padding-left: var(--space-lg);
    }
}

.faq-item ul li[b-37rk1ja48p]::marker {
    color: var(--color-accent);
}

/* Responsive Design */
@media (max-width: 768px) {
    .page-header[b-37rk1ja48p] {
        padding: var(--space-2xl) 0;
    }

    .page-header h1[b-37rk1ja48p] {
        font-size: var(--text-3xl);
    }

    .header-subtitle[b-37rk1ja48p] {
        font-size: var(--text-lg);
    }

    .faq-category[b-37rk1ja48p] {
        padding: var(--space-lg);
        margin-bottom: var(--space-2xl);
    }

    .category-header[b-37rk1ja48p] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .category-icon[b-37rk1ja48p] {
        font-size: 1.5rem;
    }

    .faq-category h2[b-37rk1ja48p] {
        font-size: var(--text-xl);
    }

    .faq-item[b-37rk1ja48p] {
        padding: var(--space-md);
    }

    .faq-item h3[b-37rk1ja48p] {
        font-size: var(--text-base);
    }

    .faq-item:hover[b-37rk1ja48p] {
        transform: translateX(2px);
    }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════════════════════
   HOME PAGE STYLES — AthleteX Series
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── 1. HERO — Split Layout ──────────────────────────────────────────────── */

.hero[b-80xmwjw3qg] {
    background: linear-gradient(135deg, var(--color-accent-surface) 0%, var(--bg-card) 100%);
    padding: var(--space-4xl) 0 var(--space-3xl) 0;
    border-bottom: 1px solid var(--border-light);
}

.hero-split[b-80xmwjw3qg] {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.hero-text[b-80xmwjw3qg] {
    flex: 1;
    min-width: 0;
}

.hero-text h1[b-80xmwjw3qg] {
    color: var(--color-text-primary);
    font-size: var(--text-5xl);
    font-weight: var(--weight-black);
    line-height: 1.1;
    margin: 0 0 var(--space-lg) 0;
}

.hero-text .lead[b-80xmwjw3qg] {
    color: var(--color-text-body);
    font-size: 1.25rem;
    line-height: 1.6;
    margin: 0 0 var(--space-2xl) 0;
    max-width: 65ch;
}

.actions .btn-primary[b-80xmwjw3qg] {
    font-size: var(--text-lg);
    padding: 1rem 2.5rem;
}

.hero-visual[b-80xmwjw3qg] {
    flex: 0 0 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Card Flip Animation */
.card-flip-scene[b-80xmwjw3qg] {
    perspective: 1000px;
    width: 380px;
    height: 532px;
}

.card-flip[b-80xmwjw3qg] {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: heroCardFlip-b-80xmwjw3qg 6s ease-in-out infinite;
}

.card-flip-face[b-80xmwjw3qg] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 0;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.card-flip-face img[b-80xmwjw3qg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-flip-back[b-80xmwjw3qg] {
    transform: rotateY(180deg);
}

@keyframes heroCardFlip-b-80xmwjw3qg {

    0%,
    40% {
        transform: rotateY(0deg);
    }

    50%,
    90% {
        transform: rotateY(180deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

.hero-media-placeholder[b-80xmwjw3qg] {
    padding: var(--space-4xl) var(--space-xl);
    background-color: var(--bg-elevated);
    border-radius: 0;
    border: 2px dashed var(--border-medium);
    color: var(--color-text-muted);
    font-style: italic;
    text-align: center;
    width: 380px;
    height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ─── 2. FEATURES ─────────────────────────────────────────────────────────── */

.features[b-80xmwjw3qg] {
    padding: var(--space-4xl) 0;
}

.features h2[b-80xmwjw3qg] {
    margin-bottom: var(--space-xl);
}

.features-list[b-80xmwjw3qg] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
    list-style: none;
    padding: 0;
    margin: var(--space-xl) 0;
}

.features-list li[b-80xmwjw3qg] {
    padding: var(--space-xl);
    border: 2px solid var(--border-light);
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    transition: all var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.features-list li:hover[b-80xmwjw3qg] {
    border-color: var(--color-accent);
    transform: translateY(-4px);
    box-shadow: var(--shadow-accent);
}

.features-list li strong[b-80xmwjw3qg] {
    color: var(--color-text-primary);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    display: block;
    margin-bottom: var(--space-xs);
}

.features-cta[b-80xmwjw3qg] {
    text-align: center;
    margin-top: var(--space-xl);
}

/* ─── 3. HOW IT WORKS — 3 Steps ──────────────────────────────────────────── */

.how-it-works[b-80xmwjw3qg] {
    padding: var(--space-4xl) 0;
    background-color: var(--bg-elevated);
}

.how-it-works h2[b-80xmwjw3qg] {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.steps-grid[b-80xmwjw3qg] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.step-card[b-80xmwjw3qg] {
    text-align: center;
    padding: var(--space-2xl) var(--space-xl);
    background-color: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-base);
    position: relative;
}

.step-card:hover[b-80xmwjw3qg] {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-accent);
}

.step-number[b-80xmwjw3qg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
    color: var(--bg-dark);
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    margin-bottom: var(--space-lg);
}

.step-card h3[b-80xmwjw3qg] {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    margin-bottom: var(--space-md);
    color: var(--color-text-primary);
}

.step-card p[b-80xmwjw3qg] {
    color: var(--color-text-body);
    line-height: 1.6;
    margin: 0;
}

.how-cta[b-80xmwjw3qg] {
    text-align: center;
}

/* ─── 4. COLLECTIONS CAROUSEL ─────────────────────────────────────────────── */

.collections-carousel[b-80xmwjw3qg] {
    padding: var(--space-4xl) 0;
}

.section-header[b-80xmwjw3qg] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.section-subtitle[b-80xmwjw3qg] {
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
}

.carousel[b-80xmwjw3qg] {
    position: relative;
    padding: 0;
}

.carousel-viewport[b-80xmwjw3qg] {
    overflow: hidden;
}

.carousel-track[b-80xmwjw3qg] {
    display: flex;
    gap: var(--space-xl);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: var(--space-md) 0;
}

.carousel-slide[b-80xmwjw3qg] {
    flex: 0 0 calc((100% - 2 * var(--space-xl)) / 3);
    position: relative;
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    border: 2px solid var(--color-accent);
    padding: 0;
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-sm);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.carousel-slide:hover[b-80xmwjw3qg],
.carousel-slide.active[b-80xmwjw3qg] {
    border-color: var(--color-accent-hover);
    box-shadow: var(--shadow-accent);
    transform: translateY(-4px);
}

/* Holographic shimmer sweep on hover */
.carousel-slide[b-80xmwjw3qg]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.12) 46%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.12) 54%,
            transparent 70%);
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position 0.8s ease;
    border-radius: inherit;
}

.carousel-slide:hover[b-80xmwjw3qg]::before {
    background-position: -200% 0;
}

/* Top banner: metallic gold bar with heat-sealed crimp edge */
.slide-top-banner[b-80xmwjw3qg] {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 40%, #FFF1A8 50%, var(--color-accent-hover) 60%, var(--color-accent) 100%);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.slide-top-banner a[b-80xmwjw3qg] {
    color: var(--color-primary);
    text-decoration: none;
    display: block;
    transition: opacity var(--transition-fast);
}

.slide-top-banner a:hover[b-80xmwjw3qg] {
    opacity: 0.75;
}

.slide-top-banner span[b-80xmwjw3qg] {
    display: block;
}

/* Preview: near-full-bleed card image */
.slide-preview[b-80xmwjw3qg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    background: var(--bg-card);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
}

.carousel-slide img[b-80xmwjw3qg] {
    width: 95%;
    aspect-ratio: 380 / 532;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

/* Bottom banner: metallic gold bar with heat-sealed crimp edge */
.slide-bottom-banner[b-80xmwjw3qg] {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 40%, #FFF1A8 50%, var(--color-accent-hover) 60%, var(--color-accent) 100%);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.carousel-placeholder[b-80xmwjw3qg] {
    width: 95%;
    aspect-ratio: 380 / 532;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* Unavailable collection: greyed-out preview */
.slide-unavailable .slide-preview[b-80xmwjw3qg] {
    filter: grayscale(1);
    opacity: 0.6;
}

/* Carousel Arrows */
.carousel-arrow[b-80xmwjw3qg] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--radius-full);
    border: 2px solid var(--color-accent-hover);
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: var(--text-2xl);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transition: all var(--transition-fast);
    line-height: 1;
    padding: 0;
}

.carousel-arrow:hover[b-80xmwjw3qg] {
    background: var(--color-accent-hover);
    color: var(--bg-dark);
    border-color: var(--color-accent-hover);
    transform: translateY(-50%) scale(1.1);
}

.carousel-arrow:disabled[b-80xmwjw3qg] {
    opacity: 0.3;
    cursor: default;
    pointer-events: none;
}

.carousel-prev[b-80xmwjw3qg] {
    left: var(--space-md);
}

.carousel-next[b-80xmwjw3qg] {
    right: var(--space-md);
}

/* Carousel Dots */
.carousel-dots[b-80xmwjw3qg] {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
}

.carousel-dots[b-80xmwjw3qg]  .dot {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--border-medium);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all var(--transition-fast);
}

.carousel-dots[b-80xmwjw3qg]  .dot:hover {
    background: var(--color-text-muted);
}

.carousel-dots[b-80xmwjw3qg]  .dot.active {
    background: var(--color-accent);
    transform: scale(1.2);
}

/* ─── 5. STYLES MARQUEE ──────────────────────────────────────────────────── */

.styles-gallery[b-80xmwjw3qg] {
    padding: var(--space-4xl) 0;
    background-color: var(--bg-elevated);
    overflow: hidden;
}

.styles-gallery h2[b-80xmwjw3qg] {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.styles-gallery .section-subtitle[b-80xmwjw3qg] {
    text-align: center;
}

.marquee-container[b-80xmwjw3qg] {
    overflow: hidden;
    margin-top: var(--space-2xl);
    padding: var(--space-md) 0;
}

.marquee-track[b-80xmwjw3qg] {
    display: flex;
    gap: var(--space-xl);
    animation: marquee-scroll-b-80xmwjw3qg calc(var(--marquee-items, 6) * 3s) linear infinite;
    width: max-content;
}

@keyframes marquee-scroll-b-80xmwjw3qg {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track[b-80xmwjw3qg] {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
    }

    .carousel-slide[b-80xmwjw3qg]::before,
    .marquee-card[b-80xmwjw3qg]::before {
        display: none;
    }
}

.marquee-card[b-80xmwjw3qg] {
    flex-shrink: 0;
    width: 280px;
    position: relative;
    background: var(--bg-card);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-align: center;
    transition: all var(--transition-fast);
}

.marquee-card:hover[b-80xmwjw3qg] {
    border-color: var(--color-accent-hover);
    box-shadow: var(--shadow-accent);
}

/* Holographic shimmer sweep on hover */
.marquee-card[b-80xmwjw3qg]::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(120deg,
            transparent 30%,
            rgba(255, 255, 255, 0.12) 46%,
            rgba(255, 255, 255, 0.22) 50%,
            rgba(255, 255, 255, 0.12) 54%,
            transparent 70%);
    background-size: 200% 100%;
    background-position: 200% 0;
    transition: background-position 0.8s ease;
    border-radius: inherit;
}

.marquee-card:hover[b-80xmwjw3qg]::before {
    background-position: -200% 0;
}

.marquee-card-banner[b-80xmwjw3qg] {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 40%, #FFF1A8 50%, var(--color-accent-hover) 60%, var(--color-accent) 100%);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.marquee-card-preview[b-80xmwjw3qg] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xs);
    background: var(--bg-card);
    box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.06);
}

.marquee-card img[b-80xmwjw3qg] {
    width: 95%;
    aspect-ratio: 380 / 532;
    object-fit: cover;
    border-radius: var(--radius-sm);
    display: block;
}

.marquee-card-name[b-80xmwjw3qg] {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 40%, #FFF1A8 50%, var(--color-accent-hover) 60%, var(--color-accent) 100%);
    color: var(--color-primary);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Unavailable style: greyed-out preview */
.marquee-card-unavailable .marquee-card-preview[b-80xmwjw3qg] {
    filter: grayscale(1);
    opacity: 0.6;
}

.marquee-placeholder[b-80xmwjw3qg] {
    width: 95%;
    aspect-ratio: 380 / 532;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

/* ─── 6. FAQ SECTION ─────────────────────────────────────────────────────── */

.faq-section[b-80xmwjw3qg] {
    padding: var(--space-4xl) 0;
}

.faq-section h2[b-80xmwjw3qg] {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.faq-grid[b-80xmwjw3qg] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    max-width: 900px;
    margin: 0 auto var(--space-2xl) auto;
}

.faq-item[b-80xmwjw3qg] {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 0;
    overflow: hidden;
    transition: border-color var(--transition-base);
}

.faq-item[open][b-80xmwjw3qg] {
    border-color: var(--color-accent);
}

.faq-item summary[b-80xmwjw3qg] {
    padding: var(--space-lg);
    font-weight: var(--weight-semibold);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    color: var(--color-text-primary);
    transition: background var(--transition-fast);
}

.faq-item summary:hover[b-80xmwjw3qg] {
    background: var(--color-accent-surface);
}

.faq-item summary[b-80xmwjw3qg]::after {
    content: '▸';
    transition: transform var(--transition-base);
    flex-shrink: 0;
    font-size: var(--text-lg);
}

.faq-item[open] summary[b-80xmwjw3qg]::after {
    transform: rotate(90deg);
}

.faq-item summary[b-80xmwjw3qg]::-webkit-details-marker {
    display: none;
}

.faq-item p[b-80xmwjw3qg] {
    padding: 0 var(--space-lg) var(--space-lg) var(--space-lg);
    color: var(--color-text-body);
    line-height: 1.7;
    margin: 0;
}

.faq-cta[b-80xmwjw3qg] {
    text-align: center;
}

.btn-secondary[b-80xmwjw3qg] {
    display: inline-block;
    padding: 0.75rem 2rem;
    border: 2px solid var(--color-accent);
    color: var(--color-accent-text);
    border-radius: var(--radius-md);
    font-weight: var(--weight-semibold);
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-secondary:hover[b-80xmwjw3qg] {
    background: var(--color-accent);
    color: var(--bg-dark);
}

/* ─── 7. FEEDBACK SECTION ────────────────────────────────────────────────── */

.feedback-section[b-80xmwjw3qg] {
    padding: var(--space-4xl) 0;
    background-color: var(--bg-elevated);
}

.feedback-section h2[b-80xmwjw3qg] {
    text-align: center;
    margin-bottom: var(--space-sm);
}

.feedback-section .section-subtitle[b-80xmwjw3qg] {
    text-align: center;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */

@media (max-width: 992px) {
    .hero-split[b-80xmwjw3qg] {
        flex-direction: column;
        text-align: center;
    }

    .hero-text .lead[b-80xmwjw3qg] {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-visual[b-80xmwjw3qg] {
        flex: 0 0 auto;
    }

    .card-flip-scene[b-80xmwjw3qg] {
        width: 280px;
        height: 392px;
    }

    .hero-media-placeholder[b-80xmwjw3qg] {
        width: 280px;
        height: 220px;
    }

    .steps-grid[b-80xmwjw3qg] {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .carousel-slide[b-80xmwjw3qg] {
        flex: 0 0 calc((100% - var(--space-xl)) / 2);
    }

    .marquee-card[b-80xmwjw3qg] {
        width: 240px;
    }

    .faq-grid[b-80xmwjw3qg] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .hero-text h1[b-80xmwjw3qg] {
        font-size: var(--text-3xl);
    }

    .card-flip-scene[b-80xmwjw3qg] {
        width: calc(100vw - 3rem);
        max-width: 380px;
        height: auto;
        aspect-ratio: 380 / 532;
        transform: none;
    }

    .card-flip-scene .card-flip[b-80xmwjw3qg] {
        height: 100%;
    }

    .hero-media-placeholder[b-80xmwjw3qg] {
        width: calc(100vw - 3rem);
        max-width: 380px;
        height: auto;
        aspect-ratio: 380 / 300;
    }

    .carousel-slide[b-80xmwjw3qg] {
        flex: 0 0 100%;
    }

    .carousel-arrow[b-80xmwjw3qg] {
        display: none;
    }

    .marquee-card[b-80xmwjw3qg] {
        width: 200px;
    }

    .slide-top-banner[b-80xmwjw3qg],
    .marquee-card-banner[b-80xmwjw3qg] {
        font-size: 0.625rem;
    }
}
/* /Components/Pages/Legal.razor.rz.scp.css */
/* Legal Pages Shared Styles */
.legal-page[b-9tvbde27my] {
    padding: var(--space-3xl) 0;
    max-width: 800px;
    margin: 0 auto;
}

.legal-page h1[b-9tvbde27my] {
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    color: var(--color-text-heading);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border-light);
}

.legal-page section[b-9tvbde27my] {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.legal-page section h2[b-9tvbde27my] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-heading);
    margin-bottom: var(--space-lg);
}

.legal-page section p[b-9tvbde27my] {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.legal-page section ul[b-9tvbde27my] {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
}

.legal-page section ul li[b-9tvbde27my] {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}

/* ── MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
    .legal-page[b-9tvbde27my] {
        padding: var(--space-xl) 0;
    }

    .legal-page h1[b-9tvbde27my] {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
    }

    .legal-page section[b-9tvbde27my] {
        padding: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .legal-page section h2[b-9tvbde27my] {
        font-size: var(--text-lg);
        margin-bottom: var(--space-md);
    }

    .legal-page section ul[b-9tvbde27my] {
        padding-left: var(--space-lg);
    }
}
/* /Components/Pages/NotFound.razor.rz.scp.css */
.notfound-page[b-hvbm82w8k1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
    padding: var(--space-4xl) var(--space-xl);
}

.notfound-code[b-hvbm82w8k1] {
    font-size: 8rem;
    font-weight: var(--weight-black);
    line-height: 1;
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-text) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: var(--space-lg);
}

.notfound-page h1[b-hvbm82w8k1] {
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-heading);
    margin-bottom: var(--space-md);
}

.notfound-message[b-hvbm82w8k1] {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
    margin-bottom: var(--space-2xl);
    max-width: 480px;
}
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Privacy Page Styles */
.legal-page[b-to9ua3xcyy] {
    padding: var(--space-3xl) 0;
    max-width: 800px;
    margin: 0 auto;
}

.legal-page h1[b-to9ua3xcyy] {
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    color: var(--color-text-heading);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border-light);
}

.legal-page section[b-to9ua3xcyy] {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.legal-page section h2[b-to9ua3xcyy] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-heading);
    margin-bottom: var(--space-lg);
}

.legal-page section p[b-to9ua3xcyy] {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.legal-page section ul[b-to9ua3xcyy] {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
}

.legal-page section ul li[b-to9ua3xcyy] {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}

/* ── MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
    .legal-page[b-to9ua3xcyy] {
        padding: var(--space-xl) 0;
    }

    .legal-page h1[b-to9ua3xcyy] {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
    }

    .legal-page section[b-to9ua3xcyy] {
        padding: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .legal-page section h2[b-to9ua3xcyy] {
        font-size: var(--text-lg);
        margin-bottom: var(--space-md);
    }

    .legal-page section ul[b-to9ua3xcyy] {
        padding-left: var(--space-lg);
    }
}
/* /Components/Pages/ShareCard.razor.rz.scp.css */
.share-card-page[b-y3tgazbhje] {
    min-height: 100vh;
    background: var(--bg-subtle, #f8f9fa);
    padding: var(--space-2xl, 2rem) 0;
}

.share-logo[b-y3tgazbhje] {
    height: 40px;
    margin-bottom: var(--space-lg, 1rem);
}

.share-card-branding[b-y3tgazbhje] {
    margin-bottom: var(--space-md, 0.75rem);
}

.share-card-preview[b-y3tgazbhje] {
    display: flex;
    justify-content: center;
    margin-bottom: var(--space-xl, 1.5rem);
}

/* Card number centered below card — premium dark pill */
.share-card-number[b-y3tgazbhje] {
    text-align: center;
    padding: var(--space-xs, 0.25rem) 0;
}

.share-card-number span[b-y3tgazbhje] {
    font-family: 'Courier New', Courier, monospace;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-bold, 700);
    color: var(--color-accent, #d4a843);
    letter-spacing: 0.1em;
    background: var(--color-primary, #1a1a2e);
    padding: 0.25rem 1rem;
    border-radius: var(--radius-full, 9999px);
    display: inline-block;
}

.share-card-cta[b-y3tgazbhje] {
    text-align: center;
    margin-top: var(--space-xl, 1.5rem);
    padding-top: var(--space-lg, 1rem);
    border-top: 1px solid var(--border-light, #dee2e6);
}

.share-card-cta-hint[b-y3tgazbhje] {
    font-size: var(--text-sm, 0.875rem);
    color: var(--color-text-muted, #6c757d);
    margin-top: var(--space-sm, 0.5rem);
}

@media (max-width: 576px) {
    .share-card-page[b-y3tgazbhje] {
        padding: var(--space-lg, 1rem) 0;
    }

    .share-card-cta .btn[b-y3tgazbhje] {
        width: 100%;
    }
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/* Terms Page Styles */
.legal-page[b-7xcy7gf6td] {
    padding: var(--space-3xl) 0;
    max-width: 800px;
    margin: 0 auto;
}

.legal-page h1[b-7xcy7gf6td] {
    font-size: var(--text-4xl);
    font-weight: var(--weight-black);
    color: var(--color-text-heading);
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--border-light);
}

.legal-page section[b-7xcy7gf6td] {
    margin-bottom: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

.legal-page section h2[b-7xcy7gf6td] {
    font-size: var(--text-xl);
    font-weight: var(--weight-bold);
    color: var(--color-text-heading);
    margin-bottom: var(--space-lg);
}

.legal-page section p[b-7xcy7gf6td] {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-sm);
}

.legal-page section ul[b-7xcy7gf6td] {
    padding-left: var(--space-xl);
    margin-bottom: var(--space-md);
}

.legal-page section ul li[b-7xcy7gf6td] {
    color: var(--color-text-muted);
    line-height: 1.8;
    margin-bottom: var(--space-xs);
}

/* ── MOBILE ─────────────────────────────── */
@media (max-width: 768px) {
    .legal-page[b-7xcy7gf6td] {
        padding: var(--space-xl) 0;
    }

    .legal-page h1[b-7xcy7gf6td] {
        font-size: var(--text-2xl);
        margin-bottom: var(--space-lg);
        padding-bottom: var(--space-md);
    }

    .legal-page section[b-7xcy7gf6td] {
        padding: var(--space-md);
        margin-bottom: var(--space-lg);
    }

    .legal-page section h2[b-7xcy7gf6td] {
        font-size: var(--text-lg);
        margin-bottom: var(--space-md);
    }

    .legal-page section ul[b-7xcy7gf6td] {
        padding-left: var(--space-lg);
    }
}
/* /Components/Shared/AlertBanner.razor.rz.scp.css */
.alert-banner[b-vtlnf790zq] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    animation: slideDown-b-vtlnf790zq 0.3s ease-out;
}

.alert-banner.success[b-vtlnf790zq] {
    background: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

.alert-banner.warning[b-vtlnf790zq] {
    background: var(--color-warning-bg);
    color: var(--color-warning);
    border: 1px solid var(--color-warning);
}

.alert-banner.error[b-vtlnf790zq] {
    background: var(--color-error-bg);
    color: var(--color-error);
    border: 1px solid var(--color-error);
}

.alert-banner.info[b-vtlnf790zq] {
    background: var(--color-info-bg);
    color: var(--color-info);
    border: 1px solid var(--color-info);
}

.alert-banner-icon[b-vtlnf790zq] {
    flex-shrink: 0;
    font-weight: var(--weight-bold);
}

.alert-banner-message[b-vtlnf790zq] {
    flex: 1;
}

.alert-banner-close[b-vtlnf790zq] {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--text-lg);
    cursor: pointer;
    opacity: 0.6;
    transition: opacity var(--transition-fast);
    padding: 0;
    line-height: 1;
}

.alert-banner-close:hover[b-vtlnf790zq] {
    opacity: 1;
}

@keyframes slideDown-b-vtlnf790zq {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* /Components/Shared/CardFlip3D.razor.rz.scp.css */
/* ===== Card Flip 3D Component ===== */

.card-flip-3d[b-vcke71yjlk] {
    perspective: 1200px;
    cursor: pointer;
    user-select: none;
}

.card-flip-inner[b-vcke71yjlk] {
    position: relative;
    width: 100%;
    aspect-ratio: 63 / 88;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 0;
}

/* Manual flip state */
.card-flip-3d[data-flipped="true"] .card-flip-inner[b-vcke71yjlk] {
    transform: rotateY(180deg);
}

/* Auto-play animation */
.card-flip-3d.auto-playing .card-flip-inner[b-vcke71yjlk] {
    animation: cardAutoFlip-b-vcke71yjlk 7.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes cardAutoFlip-b-vcke71yjlk {
    0% {
        transform: rotateY(0deg);
    }

    /* Front visible */
    39.5% {
        transform: rotateY(0deg);
    }

    /* Pause 3s on front */
    50% {
        transform: rotateY(180deg);
    }

    /* Flip to back (0.8s) */
    89.5% {
        transform: rotateY(180deg);
    }

    /* Pause 3s on back */
    100% {
        transform: rotateY(360deg);
    }

    /* Flip back to front (0.8s) */
}

/* Stop auto-play on manual flip state */
.card-flip-3d[data-flipped="true"].auto-playing .card-flip-inner[b-vcke71yjlk] {
    animation: none;
}

/* ===== Faces ===== */
.card-flip-face[b-vcke71yjlk] {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.12),
        0 0 15px rgba(220, 175, 80, 0.08);
    transition: box-shadow 0.3s ease;
}

.card-flip-front[b-vcke71yjlk] {
    z-index: 2;
}

.card-flip-back[b-vcke71yjlk] {
    transform: rotateY(180deg);
}

/* ===== Image ===== */
.card-flip-image[b-vcke71yjlk] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.card-flip-placeholder[b-vcke71yjlk] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
    color: #fff;
    font-size: var(--text-base, 1rem);
    font-weight: var(--weight-semibold, 600);
    text-align: center;
    padding: var(--space-md, 0.75rem);
}

/* ===== Holographic Shimmer ===== */
.card-flip-shimmer[b-vcke71yjlk] {
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg,
            transparent 25%,
            rgba(255, 120, 200, 0.06) 35%,
            rgba(100, 200, 255, 0.12) 42%,
            rgba(255, 255, 255, 0.18) 50%,
            rgba(200, 255, 100, 0.12) 58%,
            rgba(255, 180, 80, 0.06) 65%,
            transparent 75%);
    mix-blend-mode: overlay;
    pointer-events: none;
    animation: shimmerMove-b-vcke71yjlk 4s ease-in-out infinite;
}

@keyframes shimmerMove-b-vcke71yjlk {
    0% {
        transform: translateX(-150%) skewX(-5deg);
    }

    50% {
        transform: translateX(150%) skewX(-5deg);
    }

    100% {
        transform: translateX(-150%) skewX(-5deg);
    }
}

/* ===== Hover glow ===== */
.card-flip-3d:hover .card-flip-face[b-vcke71yjlk] {
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22),
        0 4px 12px rgba(0, 0, 0, 0.15),
        0 0 25px rgba(220, 175, 80, 0.15);
}

/* Disable hover glow during auto-play */
.card-flip-3d.auto-playing:hover .card-flip-face[b-vcke71yjlk] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18),
        0 2px 8px rgba(0, 0, 0, 0.12),
        0 0 15px rgba(220, 175, 80, 0.08);
}

/* ===== Shadow animation ===== */
.card-flip-3d.auto-playing .card-flip-face[b-vcke71yjlk] {
    animation: cardShadow-b-vcke71yjlk 7.6s ease-in-out infinite;
}

@keyframes cardShadow-b-vcke71yjlk {
    0% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 15px rgba(220, 175, 80, 0.08);
    }

    44% {
        box-shadow: 2px 4px 16px rgba(0, 0, 0, 0.25), 0 0 20px rgba(220, 175, 80, 0.12);
    }

    50% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 15px rgba(220, 175, 80, 0.08);
    }

    94% {
        box-shadow: -2px 4px 16px rgba(0, 0, 0, 0.25), 0 0 20px rgba(220, 175, 80, 0.12);
    }

    100% {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18), 0 2px 8px rgba(0, 0, 0, 0.12), 0 0 15px rgba(220, 175, 80, 0.08);
    }
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .card-flip-face[b-vcke71yjlk] {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }
}
/* /Components/Shared/CartBadge.razor.rz.scp.css */
.cart-badge-btn[b-ekkfnaq1eg] {
    position: relative;
}

.cart-count[b-ekkfnaq1eg] {
    position: absolute;
    top: -6px;
    right: -8px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background-color: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    pointer-events: none;
}

.cart-count.pulse[b-ekkfnaq1eg] {
    animation: badge-pulse-b-ekkfnaq1eg 0.6s ease-out;
}

@keyframes badge-pulse-b-ekkfnaq1eg {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.35);
    }

    100% {
        transform: scale(1);
    }
}
/* /Components/Shared/CookieConsentBanner.razor.rz.scp.css */
.cookie-banner[b-gn3rhl12hb] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--z-toast, 1080);
    background: var(--card-bg, #fff);
    border-top: 1px solid var(--border-color, #e0e0e0);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.12);
    padding: 1.25rem 1.5rem;
    animation: slideUpBanner-b-gn3rhl12hb 0.3s ease-out;
}

@keyframes slideUpBanner-b-gn3rhl12hb {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.cookie-banner-inner[b-gn3rhl12hb] {
    max-width: 1200px;
    margin: 0 auto;
}

.cookie-banner-title[b-gn3rhl12hb] {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    color: var(--text-primary, #1a1a2e);
}

.cookie-banner-text p[b-gn3rhl12hb] {
    font-size: 0.9rem;
    color: var(--text-secondary, #555);
    margin: 0 0 1rem;
    line-height: 1.5;
}

.cookie-categories[b-gn3rhl12hb] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: var(--bg-subtle, #f5f5f5);
    border-radius: 8px;
}

.cookie-category[b-gn3rhl12hb] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary, #555);
    cursor: pointer;
}

.cookie-category input[type="checkbox"][b-gn3rhl12hb] {
    margin-top: 3px;
    accent-color: var(--accent-color, #e63946);
}

.cookie-banner-actions[b-gn3rhl12hb] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.btn-cookie[b-gn3rhl12hb] {
    padding: 0.5rem 1.25rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: background 0.2s, transform 0.1s;
}

.btn-cookie:active[b-gn3rhl12hb] {
    transform: scale(0.97);
}

.btn-cookie-accept[b-gn3rhl12hb] {
    background: var(--accent-color, #e63946);
    color: #fff;
}

.btn-cookie-accept:hover[b-gn3rhl12hb] {
    background: var(--accent-hover, #c5303c);
}

.btn-cookie-reject[b-gn3rhl12hb] {
    background: transparent;
    color: var(--text-secondary, #555);
    border: 1px solid var(--border-color, #ccc);
}

.btn-cookie-reject:hover[b-gn3rhl12hb] {
    background: var(--bg-subtle, #f5f5f5);
}

.btn-cookie-customize[b-gn3rhl12hb] {
    background: transparent;
    color: var(--accent-color, #e63946);
    border: 1px solid var(--accent-color, #e63946);
}

.btn-cookie-customize:hover[b-gn3rhl12hb] {
    background: rgba(230, 57, 70, 0.08);
}

.btn-cookie-save[b-gn3rhl12hb] {
    background: var(--accent-color, #e63946);
    color: #fff;
}

.btn-cookie-save:hover[b-gn3rhl12hb] {
    background: var(--accent-hover, #c5303c);
}

@media (max-width: 600px) {
    .cookie-banner[b-gn3rhl12hb] {
        padding: 1rem;
    }

    .cookie-banner-actions[b-gn3rhl12hb] {
        flex-direction: column;
    }

    .btn-cookie[b-gn3rhl12hb] {
        width: 100%;
        text-align: center;
    }
}
/* /Components/Shared/EmptyState.razor.rz.scp.css */
.empty-state[b-pz6haeckn0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-3xl) var(--space-xl);
    color: var(--color-text-muted);
}

.empty-state-icon[b-pz6haeckn0] {
    font-size: 3rem;
    margin-bottom: var(--space-lg);
    opacity: 0.5;
}

.empty-state-title[b-pz6haeckn0] {
    font-size: var(--text-xl);
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.empty-state-desc[b-pz6haeckn0] {
    font-size: var(--text-base);
    max-width: 360px;
    margin-bottom: var(--space-lg);
}

.empty-state-action[b-pz6haeckn0] {
    margin-top: var(--space-md);
}
/* /Components/Shared/HomeFeedbackForm.razor.rz.scp.css */
/* ─── Feedback Form ──────────────────────────────────────────────────────── */

.feedback-form[b-5ew13g7rv1] {
    max-width: 600px;
    margin: var(--space-2xl) auto 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.form-group[b-5ew13g7rv1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-group label[b-5ew13g7rv1] {
    font-weight: var(--weight-semibold);
    color: var(--color-text-primary);
}

.form-group select[b-5ew13g7rv1],
.form-group textarea[b-5ew13g7rv1] {
    padding: var(--space-md);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    color: var(--color-text-body);
    font-size: var(--text-base);
    font-family: inherit;
    transition: border-color var(--transition-fast);
}

.form-group select:focus[b-5ew13g7rv1],
.form-group textarea:focus[b-5ew13g7rv1] {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
}

.form-group textarea[b-5ew13g7rv1] {
    resize: vertical;
    min-height: 100px;
}

.char-count[b-5ew13g7rv1] {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-align: right;
}

.feedback-error[b-5ew13g7rv1] {
    padding: var(--space-md);
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: var(--radius-md);
    color: #dc2626;
    font-size: var(--text-sm);
}

.feedback-success[b-5ew13g7rv1] {
    max-width: 600px;
    margin: var(--space-2xl) auto 0 auto;
    padding: var(--space-xl);
    background: var(--color-accent-surface);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    text-align: center;
    color: var(--color-text-primary);
    font-weight: var(--weight-semibold);
}

.feedback-login-prompt[b-5ew13g7rv1] {
    max-width: 600px;
    margin: var(--space-2xl) auto 0 auto;
    padding: var(--space-xl);
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-lg);
    color: var(--color-text-body);
}

.feedback-form .btn-primary[b-5ew13g7rv1] {
    align-self: flex-start;
}

.feedback-form .btn-primary:disabled[b-5ew13g7rv1] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Shared/LanguageSelector.razor.rz.scp.css */
.language-selector[b-l0t43wxonn] {
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.lang-button[b-l0t43wxonn] {
    background: transparent;
    border: 1px solid var(--border-medium);
    border-radius: var(--radius-md);
    padding: var(--space-xs) var(--space-sm);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-body);
    cursor: pointer;
    transition: all var(--transition-base);
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}

.lang-button:hover[b-l0t43wxonn] {
    border-color: var(--color-accent);
    color: var(--color-text-primary);
    background: var(--color-accent-surface);
}

.lang-button.active[b-l0t43wxonn] {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
    font-weight: var(--weight-semibold);
}

.lang-button.active:hover[b-l0t43wxonn] {
    background-color: var(--color-accent-hover);
}
/* /Components/Shared/LoadingSpinner.razor.rz.scp.css */
/* Loading Spinner */
.loading-spinner[b-azy3b9w74y] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-3xl) 0;
}

.spinner[b-azy3b9w74y] {
    width: 48px;
    height: 48px;
    border: 4px solid var(--border-light);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: spin-b-azy3b9w74y 0.8s linear infinite;
}

.loading-message[b-azy3b9w74y] {
    margin-top: var(--space-md);
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    font-weight: var(--weight-medium);
}

@keyframes spin-b-azy3b9w74y {
    to {
        transform: rotate(360deg);
    }
}
/* /Components/Shared/Modal.razor.rz.scp.css */
.ax-modal-backdrop[b-5av7dsptjp] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal-backdrop);
    padding: var(--space-lg);
    animation: fadeIn-b-5av7dsptjp 0.2s ease-out;
}

.ax-modal-dialog[b-5av7dsptjp] {
    background: var(--bg-card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: scaleIn-b-5av7dsptjp 0.25s ease-out;
    z-index: var(--z-modal);
}

.ax-modal-dialog.ax-modal-sm[b-5av7dsptjp] {
    max-width: 380px;
}

.ax-modal-dialog.ax-modal-lg[b-5av7dsptjp] {
    max-width: 720px;
}

.ax-modal-header[b-5av7dsptjp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid var(--border-light);
}

.ax-modal-title[b-5av7dsptjp] {
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
    margin: 0;
}

.ax-modal-close[b-5av7dsptjp] {
    background: none;
    border: none;
    font-size: var(--text-2xl);
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 0;
    line-height: 1;
    transition: color var(--transition-fast);
}

.ax-modal-close:hover[b-5av7dsptjp] {
    color: var(--color-text-primary);
}

.ax-modal-body[b-5av7dsptjp] {
    padding: var(--space-xl);
    overflow-y: auto;
    flex: 1;
}

.ax-modal-footer[b-5av7dsptjp] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    border-top: 1px solid var(--border-light);
}

@keyframes fadeIn-b-5av7dsptjp {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes scaleIn-b-5av7dsptjp {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* /Components/Shared/PriceDisplay.razor.rz.scp.css */
.price-display[b-izc1u093g8] {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-xs);
    font-weight: var(--weight-semibold);
}

.price-current[b-izc1u093g8] {
    font-size: inherit;
    color: var(--color-text-primary);
}

.price-highlight .price-current[b-izc1u093g8] {
    color: var(--color-accent-text);
    font-weight: var(--weight-bold);
}

.price-original[b-izc1u093g8] {
    text-decoration: line-through;
    color: var(--color-text-muted);
    font-size: 0.85em;
    font-weight: var(--weight-normal);
}

.price-currency[b-izc1u093g8] {
    font-size: 0.75em;
    color: var(--color-text-muted);
    font-weight: var(--weight-normal);
}
/* /Components/Shared/PromoBanner.razor.rz.scp.css */
.promo-banner[b-8iegm6dwi4] {
    width: 100%;
    text-align: center;
    padding: 0.625rem 1rem;
}

.promo-banner-inner[b-8iegm6dwi4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.promo-banner-text[b-8iegm6dwi4] {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1.4;
}

.promo-banner-countdown[b-8iegm6dwi4] {
    font-family: monospace;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.promo-banner-cta[b-8iegm6dwi4] {
    display: inline-block;
    padding: 0.25rem 0.875rem;
    border: 1.5px solid currentColor;
    border-radius: 4px;
    color: inherit;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

.promo-banner-cta:hover[b-8iegm6dwi4] {
    background-color: rgba(255, 255, 255, 0.15);
    color: inherit;
}
/* /Components/Shared/ShareToolbar.razor.rz.scp.css */
/* ===== Share Toolbar ===== */
.share-toolbar[b-7u0ifoqo8w] {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 0.75rem);
    padding: var(--space-lg, 1rem) 0;
}

.share-toolbar-group[b-7u0ifoqo8w] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 0.5rem);
    justify-content: center;
}

/* ===== Share Buttons ===== */
.share-btn[b-7u0ifoqo8w] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border-light, #dee2e6);
    border-radius: var(--radius-full, 9999px);
    background: var(--bg-card, #fff);
    color: var(--color-text, #212529);
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--weight-medium, 500);
    cursor: pointer;
    transition: all var(--transition-base, 0.15s ease);
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.4;
}

.share-btn:hover[b-7u0ifoqo8w] {
    transform: translateY(-1px);
    box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.1));
}

.share-btn i[b-7u0ifoqo8w] {
    font-size: 1.1em;
}

/* Social colors on hover */
.share-btn-instagram:hover[b-7u0ifoqo8w] {
    background: #E4405F;
    color: #fff;
    border-color: #E4405F;
}

.share-btn-tiktok:hover[b-7u0ifoqo8w] {
    background: #000;
    color: #fff;
    border-color: #000;
}

.share-btn-facebook:hover[b-7u0ifoqo8w] {
    background: #1877f2;
    color: #fff;
    border-color: #1877f2;
}

.share-btn-twitter:hover[b-7u0ifoqo8w] {
    background: #000;
    color: #fff;
    border-color: #000;
}

.share-btn-whatsapp:hover[b-7u0ifoqo8w] {
    background: #25d366;
    color: #fff;
    border-color: #25d366;
}

.share-btn-native:hover[b-7u0ifoqo8w] {
    background: var(--color-primary, #0d6efd);
    color: #fff;
    border-color: var(--color-primary, #0d6efd);
}

.share-btn-copy:hover[b-7u0ifoqo8w] {
    background: var(--color-primary, #0d6efd);
    color: #fff;
    border-color: var(--color-primary, #0d6efd);
}

.share-btn-download:hover[b-7u0ifoqo8w] {
    background: var(--bg-subtle, #f8f9fa);
    border-color: var(--color-primary, #0d6efd);
    color: var(--color-primary, #0d6efd);
}

/* TikTok SVG icon alignment */
.tiktok-icon[b-7u0ifoqo8w] {
    display: inline-block;
    vertical-align: middle;
}

/* Instagram emphasis (primary share target) */
.share-btn-instagram[b-7u0ifoqo8w] {
    background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: #fff;
    border-color: transparent;
    font-weight: var(--weight-semibold, 600);
}

.share-btn-instagram:hover[b-7u0ifoqo8w] {
    opacity: 0.9;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(228, 64, 95, 0.3);
}

/* ===== Vertical layout ===== */
.share-toolbar-vertical .share-toolbar-group[b-7u0ifoqo8w] {
    flex-direction: column;
    align-items: stretch;
}

.share-toolbar-vertical .share-btn[b-7u0ifoqo8w] {
    justify-content: flex-start;
}

/* ===== Download Error ===== */
.share-toolbar-error[b-7u0ifoqo8w] {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-warning-bg, #fff3cd);
    color: var(--color-warning-text, #856404);
    font-size: var(--text-sm, 0.875rem);
    text-align: center;
    justify-content: center;
}

/* ===== Toast (Instagram/TikTok instructions) ===== */
.share-toolbar-toast[b-7u0ifoqo8w] {
    display: flex;
    align-items: center;
    gap: var(--space-xs, 0.25rem);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-success-bg, #d1e7dd);
    color: var(--color-success-text, #0f5132);
    font-size: var(--text-sm, 0.875rem);
    text-align: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

/* ===== Disabled (video not ready) ===== */
.share-btn-disabled[b-7u0ifoqo8w] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.share-toolbar-generating[b-7u0ifoqo8w] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs, 0.25rem);
    padding: 0.5rem 0.875rem;
    border-radius: var(--radius-md, 8px);
    background: var(--color-info-bg, #cff4fc);
    color: var(--color-info-text, #055160);
    font-size: var(--text-sm, 0.875rem);
    animation: fadeIn 0.3s ease;
}

/* ===== Responsive ===== */
@media (max-width: 576px) {
    .share-toolbar-group[b-7u0ifoqo8w] {
        gap: 0.375rem;
    }

    .share-btn-label[b-7u0ifoqo8w] {
        display: none;
    }

    .share-btn[b-7u0ifoqo8w] {
        padding: 0.625rem;
        border-radius: var(--radius-md, 8px);
    }

    .share-btn i[b-7u0ifoqo8w] {
        font-size: 1.25em;
    }
}

/* ===== Dark Mode ===== */
:global([data-theme="dark"]) .share-btn[b-7u0ifoqo8w] {
    background: var(--bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--border-medium);
}

:global([data-theme="dark"]) .share-btn:hover[b-7u0ifoqo8w] {
    background: var(--bg-card);
    border-color: var(--border-dark);
    color: var(--color-text-primary);
}

/* Instagram keeps its gradient in both modes — override hover only */
:global([data-theme="dark"]) .share-btn-instagram[b-7u0ifoqo8w] {
    /* gradient already set by light-mode rule — inherits fine */
    color: #fff;
}

:global([data-theme="dark"]) .share-btn-instagram:hover[b-7u0ifoqo8w] {
    opacity: 0.9;
}

:global([data-theme="dark"]) .share-btn-download:hover[b-7u0ifoqo8w] {
    background: var(--bg-elevated);
    border-color: var(--color-accent);
    color: var(--color-accent);
}

:global([data-theme="dark"]) .share-toolbar-error[b-7u0ifoqo8w] {
    background: var(--color-error-bg);
    color: var(--color-error);
}

:global([data-theme="dark"]) .share-toolbar-toast[b-7u0ifoqo8w] {
    background: var(--color-success-bg);
    color: var(--color-success);
}

:global([data-theme="dark"]) .share-toolbar-generating[b-7u0ifoqo8w] {
    background: var(--color-info-bg);
    color: var(--color-info);
}
/* /Components/Shared/SkeletonLoader.razor.rz.scp.css */
.skeleton[b-bsbn3ja5kt] {
    position: relative;
    overflow: hidden;
    background: var(--color-surface-alt, #e9ecef);
    border-radius: var(--radius-sm, 4px);
}

.skeleton-line[b-bsbn3ja5kt] {
    height: 16px;
    margin-bottom: var(--space-2, 8px);
}

.skeleton-circle[b-bsbn3ja5kt] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}

.skeleton-card[b-bsbn3ja5kt] {
    height: 120px;
    border-radius: var(--radius-md, 8px);
}

.skeleton-shimmer[b-bsbn3ja5kt] {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    animation: shimmerMove-b-bsbn3ja5kt 1.5s infinite;
}

@keyframes shimmerMove-b-bsbn3ja5kt {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(100%);
    }
}
/* /Components/Shared/SocialLinks.razor.rz.scp.css */
.social-links[b-rcwpf01ln9] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    margin-top: var(--space-md);
}

.social-link[b-rcwpf01ln9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    transition: color var(--transition-base), transform var(--transition-fast);
    text-decoration: none;
}

.social-link:hover[b-rcwpf01ln9] {
    color: var(--color-accent);
    transform: translateY(-2px);
}
/* /Components/Shared/ThemeToggle.razor.rz.scp.css */
.theme-toggle[b-mzqgp84diw] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 2px solid var(--border-light);
    border-radius: var(--radius-full);
    color: var(--color-text-body);
    cursor: pointer;
    transition: all var(--transition-base);
}

.theme-toggle:hover[b-mzqgp84diw] {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-surface);
}

.theme-toggle:focus-visible[b-mzqgp84diw] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.theme-toggle svg[b-mzqgp84diw] {
    transition: transform var(--transition-base);
}

.theme-toggle:hover svg[b-mzqgp84diw] {
    transform: rotate(15deg);
}
/* /Components/Shared/Toast.razor.rz.scp.css */
.toast-container[b-nuatljd7uf] {
    position: fixed;
    top: var(--space-xl);
    right: var(--space-xl);
    z-index: var(--z-toast);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    animation: toastIn-b-nuatljd7uf 0.3s ease-out;
    max-width: min(420px, calc(100vw - var(--space-2xl)));
}

.toast-container.success[b-nuatljd7uf] {
    background: var(--color-success);
    color: #fff;
}

.toast-container.warning[b-nuatljd7uf] {
    background: var(--color-warning);
    color: var(--color-primary);
}

.toast-container.error[b-nuatljd7uf] {
    background: var(--color-error);
    color: #fff;
}

.toast-container.info[b-nuatljd7uf] {
    background: var(--color-info);
    color: #fff;
}

.toast-message[b-nuatljd7uf] {
    flex: 1;
}

.toast-close[b-nuatljd7uf] {
    background: none;
    border: none;
    color: inherit;
    font-size: var(--text-xl);
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
    padding: 0;
    line-height: 1;
}

.toast-close:hover[b-nuatljd7uf] {
    opacity: 1;
}

@keyframes toastIn-b-nuatljd7uf {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* /Components/Shared/UserDropdown.razor.rz.scp.css */
.user-dropdown[b-119yd6btrp] {
    position: relative;
}

.user-icon-btn[b-119yd6btrp] {
    position: relative;
}

/* ========== Backdrop ========== */
.dropdown-backdrop[b-119yd6btrp] {
    position: fixed;
    inset: 0;
    z-index: var(--z-dropdown, 1000);
    background: transparent;
}

/* ========== Desktop dropdown panel ========== */
.dropdown-menu-panel[b-119yd6btrp] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: calc(var(--z-dropdown, 1000) + 1);
    min-width: 220px;
    background-color: var(--color-surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md, 8px);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, 0.15));
    padding: var(--space-xs, 4px) 0;
    animation: dropdown-enter-b-119yd6btrp 0.2s ease-out;
}

.dropdown-header[b-119yd6btrp] {
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    font-size: var(--text-xs, 0.75rem);
    font-weight: var(--weight-semibold, 600);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide, 0.05em);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-xs, 4px);
}

.dropdown-menu-panel > a[b-119yd6btrp] {
    display: flex;
    align-items: center;
    gap: var(--space-sm, 8px);
    padding: var(--space-sm, 8px) var(--space-md, 16px);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--text-sm, 0.875rem);
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.dropdown-menu-panel > a:hover[b-119yd6btrp],
.dropdown-menu-panel > a:focus-visible[b-119yd6btrp] {
    background-color: var(--color-surface-hover, rgba(0, 0, 0, 0.05));
}

.dropdown-divider[b-119yd6btrp] {
    height: 1px;
    margin: var(--space-xs, 4px) 0;
    background-color: var(--border-subtle);
}

.dropdown-item-danger[b-119yd6btrp] {
    color: var(--color-danger, #dc3545) !important;
}

.dropdown-item-danger:hover[b-119yd6btrp],
.dropdown-item-danger:focus-visible[b-119yd6btrp] {
    background-color: rgba(220, 53, 69, 0.08) !important;
}

@keyframes dropdown-enter-b-119yd6btrp {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== Mobile bottom sheet ========== */
@media (max-width: 768px) {
    .dropdown-backdrop[b-119yd6btrp] {
        background: rgba(0, 0, 0, 0.5);
    }

    .dropdown-menu-panel[b-119yd6btrp] {
        position: fixed;
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        min-width: unset;
        width: 100%;
        max-height: 70vh;
        border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
        padding-bottom: calc(var(--space-md, 16px) + env(safe-area-inset-bottom, 0px));
        animation: sheet-slide-up-b-119yd6btrp 0.3s ease-out;
        overflow-y: auto;
    }

    .dropdown-menu-panel > a[b-119yd6btrp] {
        padding: var(--space-md, 16px);
        font-size: var(--text-base, 1rem);
    }

    .dropdown-header[b-119yd6btrp] {
        padding: var(--space-md, 16px);
        font-size: var(--text-sm, 0.875rem);
    }
}

@keyframes sheet-slide-up-b-119yd6btrp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}