/* Top safe area for every screen. On iPhone and the web this is the notch/status-bar inset. The
   Android app already pads the whole page below the status bar natively (MainPage.xaml.cs), and
   newer Android WebViews report that same bar through env(), so adding it again put every header
   a full status bar too low. index.html marks the Android app with html.w2-android. */
:root { --w2-safe-top: env(safe-area-inset-top, 0px); }
html.w2-android { --w2-safe-top: 0px; }

/* ===================================================
   Where2 — global styles
   Dark theme matching the original React design.
   MudBlazor provides component styles; this file adds
   layout, glass morphism, gradients, and mobile nav.
=================================================== */

/* ─── CSS Variables for Theming ─────────────────── */
:root, html.dark {
    --w2-bg-primary: #000000;
    --w2-bg-secondary: #1a1a2e;
    --w2-text-primary: #ffffff;
    --w2-text-secondary: rgba(255, 255, 255, 0.5);
    --w2-text-tertiary: rgba(255, 255, 255, 0.4);
    --w2-glass-bg: rgba(255, 255, 255, 0.05);
    --w2-glass-border: rgba(255, 255, 255, 0.1);
    /* Warning/accent text. Defined per theme because the dark-theme values are
       light hues that fall to ~2:1 contrast on the light background. */
    --w2-warning-text: #f59e0b;
    --w2-accent-text: #b580ff;
    --w2-success-text: #4ade80;
    --w2-danger-text: #f87171;
    --w2-info-text: #7cb3ff;
    --w2-glass-strong-bg: rgba(20, 20, 30, 0.9);
    --w2-input-bg: rgba(255, 255, 255, 0.1);
    --w2-input-border: rgba(255, 255, 255, 0.1);
    --w2-shadow: rgba(0, 0, 0, 0.4);
}

html.light {
    /* Sharper, slate-tinted light background for better contrast against
       white cards. Avoids the washed-out "all white" look. */
    --w2-bg-primary: #d8def0;
    --w2-bg-secondary: #c7d0e8;
    --w2-text-primary: #0b1220;
    --w2-text-secondary: rgba(11, 18, 32, 0.74);
    --w2-text-tertiary: rgba(11, 18, 32, 0.55);
    --w2-glass-bg: rgba(41, 121, 243, 0.10);
    --w2-glass-border: rgba(41, 121, 243, 0.18);
    --w2-warning-text: #92400e;
    --w2-accent-text: #6d28d9;
    --w2-success-text: #15803d;
    --w2-danger-text: #b91c1c;
    --w2-info-text: #1d4ed8;
    --w2-glass-strong-bg: rgba(255, 255, 255, 0.92);
    --w2-input-bg: rgba(255, 255, 255, 0.85);
    --w2-input-border: rgba(41, 121, 243, 0.22);
    --w2-shadow: rgba(15, 23, 42, 0.18);
}

/* ─── Reset / Base ───────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background: var(--w2-bg-primary);
    color: var(--w2-text-primary);
    font-family: 'Roboto', sans-serif;
    overflow-x: hidden;
}

/* ─── Light Theme ────────────────────────────────── */
html.light, html.light body {
    background: var(--w2-bg-primary);
    color: var(--w2-text-primary);
}

html.light .w2-layout-root {
    background: var(--w2-bg-primary);
    color: var(--w2-text-primary);
}

html.light .w2-content {
    background: var(--w2-bg-primary);
}

html.light .glass {
    background: var(--w2-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--w2-glass-border);
}

html.light .glass-strong {
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--w2-glass-border);
    color: var(--w2-text-primary);
}

html.light .mud-paper {
    background-color: #ffffff !important;
    color: #1a1a1a !important;
}

html.light .mud-typography {
    color: #1a1a1a !important;
}

html.light .mud-typography-secondary {
    color: #666666 !important;
}

html.light svg {
    color: #1a1a1a;
}

html.light button {
    color: #1a1a1a;
}

/* Cascade text colour into page content so elements without explicit inline
   colour naturally pick up the light theme value. Inline color:# overrides
   still win — this only helps elements that have no colour set. */
html.light .w2-content {
    color: var(--w2-text-primary);
}

html.light a {
    color: var(--w2-text-primary);
}

/* ─── Layout root ────────────────────────────────── */
.w2-layout-root {
    min-height: 100vh;
    background: var(--w2-bg-primary);
    color: var(--w2-text-primary);
}

.w2-content {
    max-width: 448px;
    margin: 0 auto;
    min-height: 100vh;
    padding-bottom: 88px;
    position: relative;
}

/* Friends Map full-screen mode: remove all extra space so page height = viewport */
html.map-fullscreen .w2-content {
    min-height: 0;
    padding-bottom: 0;
}

/* ─── Glass morphism ─────────────────────────────── */
.glass {
    background: var(--w2-glass-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--w2-glass-border);
}

.glass-strong {
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--w2-glass-border);
    color: var(--w2-text-primary);
}

/* ─── Gradients ──────────────────────────────────── */
.gradient-text {
    background: linear-gradient(135deg, #9a4dff 0%, #2979f3 50%, #f97316 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-bg {
    background: linear-gradient(135deg, #9a4dff 0%, #2979f3 100%);
}

/* ─── Scrollbar hide ─────────────────────────────── */
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}

/* ─── Safe area (iOS notch / home bar) ───────────── */
.safe-bottom {
    padding-bottom: env(safe-area-inset-bottom, 16px);
}

/* ─── Bottom navigation bar ──────────────────────── */
.w2-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    pointer-events: none;
}

.platform-maui .w2-bottom-nav {
    z-index: 1001;
}

/* The floating pill */
.w2-nav-pill {
    background: var(--w2-nav-bg);
    border-radius: 16px;
    box-shadow: 0 8px 32px var(--w2-shadow);
    display: flex;
    align-items: center;
    padding: 4px 0;
    padding-bottom: calc(4px + 0px);
}

/* Each tab item */
.w2-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    padding: 2px 0;
    color: var(--w2-nav-inactive);
    -webkit-tap-highlight-color: transparent;
}

.w2-nav-item svg {
    width: 22px;
    height: 22px;
    margin-bottom: 2px;
    stroke: currentColor;
    color: inherit;
}

.w2-nav-item:active {
    transform: scale(0.9);
}

.w2-nav-item.active {
    color: var(--w2-nav-active);
}

/* Nav-specific variables */
:root, html.dark {
    --w2-nav-bg:       rgba(20, 20, 30, 0.96);
    --w2-nav-active:   #ef4444;
    --w2-nav-inactive: #9ca3af;
}

html.light {
    --w2-nav-bg:       rgba(255, 255, 255, 0.98);
    --w2-nav-active:   #ef4444;
    --w2-nav-inactive: #6b7280;
}

/* ─── Map container ──────────────────────────────── */
.map-container {
    width: 100%;
    height: 100%;
    min-height: 400px;
    border-radius: 8px;
    overflow: hidden;
}

.map-full-page {
    position: fixed;
    inset: 0;
    z-index: 0;
}

/* ─── Event Card ─────────────────────────────────── */
.event-card {
    cursor: pointer;
    transition: transform 0.15s ease;
    text-decoration: none;
    color: inherit;
    display: block;
}

.event-card:active {
    transform: scale(0.98);
}

/* Category colour dots on compact cards */
.cat-dot-nightlife  { background: linear-gradient(to right, #9333ea, #db2777); }
.cat-dot-dining     { background: linear-gradient(to right, #f97316, #ef4444); }
.cat-dot-concerts   { background: linear-gradient(to right, #2979f3, #f43f5e); }
.cat-dot-sports     { background: linear-gradient(to right, #22c55e, #10b981); }
.cat-dot-networking { background: linear-gradient(to right, #3b82f6, #06b6d4); }
.cat-dot-wellness   { background: linear-gradient(to right, #2dd4bf, #06b6d4); }
.cat-dot-arts       { background: linear-gradient(to right, #f43f5e, #2979f3); }
.cat-dot-outdoor    { background: linear-gradient(to right, #10b981, #22c55e); }
.cat-dot-festivals  { background: linear-gradient(to right, #f59e0b, #f97316); }
.cat-dot-other      { background: linear-gradient(to right, #64748b, #475569); }

/* ─── Chat thread ────────────────────────────────── */
.chat-bubble-user {
    background: rgba(154, 77, 255, 0.2);
    border-radius: 12px 12px 0 12px;
    padding: 8px 12px;
    max-width: 75%;
    color: #fff;
}

.chat-bubble-other {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px 12px 12px 0;
    padding: 8px 12px;
    max-width: 75%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* ─── Notification badge pulse ───────────────────── */
@keyframes badge-pulse {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}

.notification-badge-pulse .mud-badge-dot {
    animation: badge-pulse 1.5s infinite;
}

/* ─── Analytics metric card ──────────────────────── */
.metric-card {
    border-radius: 16px;
    padding: 16px;
    text-align: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: box-shadow 0.15s ease;
    color: #fff;
}

.metric-card:hover {
    box-shadow: 0 4px 16px rgba(154, 77, 255, 0.2);
}

/* ─── Skeleton loader ────────────────────────────── */
.skeleton-pulse {
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    background: var(--w2-glass-border);
    border-radius: 24px;
    height: 112px;
}

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

/* ─── Crossfade placeholder → content ─────────────
   Stacks a placeholder and the real content in one grid cell so both occupy the
   SAME box. The placeholder does not get unmounted and replaced — it fades out
   while the content fades in, so the swap reads as a dissolve rather than a pop,
   and the container's height never changes at any point in the transition.

   Usage:
     <div class="w2-crossfade">
       <div class="w2-crossfade-layer w2-placeholder @(loading ? "" : "is-done")">…</div>
       @if (!loading) { <div class="w2-crossfade-layer w2-fade-in">…</div> }
     </div>
   Render the wrapper only when there is genuinely something coming; a placeholder
   held open for content that never arrives is just an empty gap.                  */
.w2-crossfade                       { display: grid; }
.w2-crossfade > .w2-crossfade-layer { grid-area: 1 / 1; min-width: 0; }

.w2-placeholder {
    opacity: 1;
    transition: opacity .4s ease;
}

.w2-placeholder.is-done {
    opacity: 0;
    pointer-events: none;
}

/* Stop the pulse once faded out — an invisible element should not keep
   animating on a phone's battery. */
.w2-placeholder.is-done .w2-skel-block { animation: none; }

/* Shaped placeholder pieces (thumbnail square, text lines) — same pulse as
   .skeleton-pulse but without its fixed 112px height. */
.w2-skel-block {
    background: var(--w2-glass-border);
    animation: skeleton-pulse 1.5s ease-in-out infinite;
}

@keyframes w2-fade-in {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}

.w2-fade-in { animation: w2-fade-in .4s ease-out both; }

/* ─── Every image fades in as it paints ──────────────────────────────────
   Applied to the bare `img` element rather than opt-in per tag: there are 70+
   image sites across the app and any new one should inherit this for free.

   Opacity ONLY here — no transform, no background — so it can never affect
   layout, and never paints a grey box behind a transparent logo or icon.
   Large content images that benefit from a placeholder tint while their bytes
   arrive additionally opt into .w2-img-fade below.                          */
img { animation: w2-img-in .4s ease-out both; }

@keyframes w2-img-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Google Maps paints every tile AND every marker as an <img>, continuously as
   you pan. Fading each one would make the whole map shimmer while moving. */
.gm-style img { animation: none; }

/* The tint variant, for large images where a plain transparent hole would read
   as broken while the bytes are still in flight (avatars, venue photos, hero
   cards). The tint shows through until the image decodes and covers it.
   Deliberately CSS, not a JS `onload` handler: for an already-cached image the
   load event can fire before Blazor attaches the handler, so it never fires and
   the image stays stuck at opacity 0 — invisible. */
.w2-img-fade {
    background: var(--w2-glass-border);
    animation: w2-fade-in .45s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    img,
    .w2-fade-in,
    .w2-img-fade      { animation: none; }
    .w2-placeholder   { transition: none; }
    .w2-skel-block,
    .skeleton-pulse   { animation: none; }
}

/* ─── Loading overlay ────────────────────────────── */
.loading-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
    width: 100%;
}

/* ─── Stepper (reservation flow) ────────────────── */
.reservation-stepper .mud-step-label-text {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

/* ─── Scroll lock (map full-screen) ──────────────── */
body.map-active {
    overflow: hidden;
}

/* ─── Map screen panel animations ───────────────── */
@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.w2-fade-down { animation: fadeDown 0.15s ease both; }
.w2-slide-up  { animation: slideUp  0.2s  ease both; }

@keyframes pinPopup {
    from { opacity: 0; transform: scale(0.93) translateY(-4px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}
.w2-pin-popup { animation: pinPopup 0.18s ease both; }

/* ─── Native <select> / <option> theming ────────── */
select {
    background-color: var(--w2-bg-secondary);
    color: var(--w2-text-primary);
}

select option {
    background-color: var(--w2-bg-secondary);
    color: var(--w2-text-primary);
}

html.light select {
    background-color: #ffffff;
    color: #1a1a1a;
}

html.light select option {
    background-color: #ffffff;
    color: #1a1a1a;
}

/* ─── MudBlazor dark overrides ───────────────────── */
.mud-table-row.mud-table-row-dense td {
    padding: 4px 8px;
}

/* ─── Desktop sidebar ────────────────────────────── */
.w2-sidebar {
    display: none; /* hidden on mobile */
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 220px;
    z-index: 1000;
    padding: 24px 12px;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
    scrollbar-width: none;
    background: rgba(10, 10, 15, 0.97);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.07);
}

.w2-sidebar-logo {
    padding: 4px 12px 20px;
    font-size: 22px;
    font-weight: 800;
}

.w2-sidebar-logo-word {
    color: #ffffff;
}

.w2-sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: 14px;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-weight: 500;
    transition: background 0.2s, color 0.2s;
}

.w2-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
}

.w2-sidebar-item.w2-sidebar-active {
    background: rgba(154, 77, 255, 0.15);
    color: #b580ff;
}

/* ─── Sidebar light theme overrides ─────────────── */
html.light .w2-sidebar {
    background: linear-gradient(180deg, rgba(191, 219, 254, 0.96) 0%, rgba(224, 242, 254, 0.96) 100%);
    border-right: 1px solid rgba(96, 165, 250, 0.18);
}

html.light .w2-sidebar-item {
    color: rgba(37, 99, 235, 0.78);
}

html.light .w2-sidebar-item:hover {
    background: rgba(255, 255, 255, 0.52);
    color: #2563eb;
}

html.light .w2-sidebar-item.w2-sidebar-active {
    background: rgba(255, 255, 255, 0.72);
    color: #2563eb;
    box-shadow: 0 10px 24px rgba(96, 165, 250, 0.14);
}

html.light .w2-sidebar-logo-word {
    color: #111827;
}

/* ─── Responsive breakpoints ─────────────────────── */

/* Floating gear button — mobile only (mirrors bottom-nav visibility) */
.w2-floating-gear { display: none; }

.w2-home-top-bar {
    /* No special MAUI overrides needed — native ContentPage.Padding handles insets */
}

/* Map "my location" recenter button — gradient, raised above Google zoom controls on web */
.w2-locate-btn {
    position: absolute;
    right: 16px;
    bottom: calc(150px + env(safe-area-inset-bottom, 0px));
    z-index: 1001;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--w2-grad-primary, linear-gradient(135deg, #2979f3, #9a4dff));
    box-shadow: 0 6px 18px rgba(154, 77, 255, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 120ms ease, box-shadow 120ms ease;
}
.w2-locate-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(154, 77, 255, 0.55), 0 3px 8px rgba(0, 0, 0, 0.3); }
.w2-locate-btn:active { transform: translateY(0); }

/* Web/desktop: lift above Google Maps zoom controls (no bottom nav present) */
@media (min-width: 1024px) {
    .w2-locate-btn { bottom: 180px; right: 16px; }
}

/* Map filter wrapper — centered on desktop, left-aligned with gear gap on mobile */
.w2-map-filter-mobile { max-width: 448px; margin: 0 auto; }
/* The panel floats over the map, so the page itself never scrolls: once "Show all" made it taller
   than the screen, the rest sat under the bottom bar out of reach. It scrolls inside itself now,
   stopping above the results pill and the bottom bar. */
.w2-map-filter-panel {
    width: 100%;
    box-sizing: border-box;
    max-height: calc(100dvh - 250px - var(--w2-safe-top) - env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
}

@media (max-width: 767px) {
    .w2-floating-gear     { display: flex !important; }
    .w2-map-filter-mobile { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
    .w2-map-filter-panel  { width: 100%; max-width: calc(100vw - 32px); }
}

/* Tablet (both platforms): show bottom nav + gear, no sidebar */
@media (min-width: 768px) {
    .w2-floating-gear { display: flex !important; }
    .w2-content {
        max-width: 860px;
        padding-bottom: 40px;
    }
}

/* Desktop: web browsers get the top header nav instead of bottom nav/sidebar */
@media (min-width: 1280px) {
    .platform-web .w2-bottom-nav     { display: none !important; }
    .platform-web .w2-floating-gear  { display: none !important; }
    .w2-content { max-width: 980px; }
    /* Host + My Venues live in the top nav account menu on desktop — hide from settings page */
    .platform-web .w2-profile-desktop-hide { display: none !important; }
}

/* Desktop: wider content */
@media (min-width: 1440px) {
    .w2-content     { max-width: 1180px; }
}

/* Large desktop */
@media (min-width: 1536px) {
    .w2-content { max-width: 1380px; }
}

/* Wide/4K — fill the available space */
@media (min-width: 1920px) {
    .w2-content     { max-width: 1560px; }
}

/* ── Google Maps attribution ────────────────────────────────────────────── */
/* The Google logo and "Map data ©… / Terms" line are REQUIRED by the Google
   Maps Platform Terms of Service and must stay visible and unobscured, so we no
   longer hide them. Google's default attribution is already small and subtle. */

/* ── iOS notch / Dynamic Island safe area (top) ─────────────────────────── */
/* Android WebView doesn't support env() so this resolves to 0 there;
   Android uses native ContentPage.Padding instead (MainPage.xaml.cs). */
.platform-maui {
    padding-top: var(--w2-safe-top);
}

/* ── Shared back button ──────────────────────────────────────────────────── */
.w2-back-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 16px; border-radius: 12px;
    border: 1px solid var(--w2-glass-border);
    background: var(--w2-glass-bg); color: var(--w2-text-secondary);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background .15s, transform .15s;
    margin-bottom: 20px;
}
.w2-back-btn:hover { background: var(--w2-glass-border); transform: translateX(-1px); }
.w2-back-btn svg   { color: #9a4dff; flex-shrink: 0; }

/* ===================================================
   Where2 — Entertainment Theme
   Rich gradients, neon glows, ambient motion.
   Layered ON TOP of the base styles above.
=================================================== */

/* ─── Entertainment design tokens ────────────────── */
:root, html.dark {
    --w2-grad-primary: linear-gradient(135deg, #2979f3 0%, #9a4dff 100%);
    --w2-grad-primary-rev: linear-gradient(135deg, #9a4dff 0%, #2979f3 100%);
    --w2-grad-hot: linear-gradient(135deg, #ff5e3a 0%, #ff2d55 100%);
    --w2-grad-cool: linear-gradient(135deg, #06b6d4 0%, #2979f3 100%);
    --w2-grad-gold: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);

    --w2-glow-purple: 0 0 24px rgba(154, 77, 255, 0.45), 0 8px 32px rgba(154, 77, 255, 0.18);
    --w2-glow-blue:   0 0 24px rgba(41, 121, 243, 0.45), 0 8px 32px rgba(41, 121, 243, 0.18);
    --w2-glow-red:    0 0 22px rgba(239, 68, 68, 0.45),  0 8px 28px rgba(239, 68, 68, 0.18);
    --w2-glow-soft:   0 12px 40px rgba(154, 77, 255, 0.18), 0 4px 16px rgba(41, 121, 243, 0.14);

    --w2-eyebrow-color: #5b9eff;
    --w2-card-bg: rgba(18, 18, 28, 0.72);
    --w2-card-border: rgba(255, 255, 255, 0.06);
    --w2-card-border-hover: rgba(154, 77, 255, 0.45);
}

html.light {
    --w2-grad-primary: linear-gradient(135deg, #2979f3 0%, #9a4dff 100%);
    --w2-grad-primary-rev: linear-gradient(135deg, #9a4dff 0%, #2979f3 100%);
    --w2-grad-hot: linear-gradient(135deg, #ff7a59 0%, #ff3b6b 100%);
    --w2-grad-cool: linear-gradient(135deg, #38bdf8 0%, #2563eb 100%);
    --w2-grad-gold: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);

    --w2-glow-purple: 0 10px 30px rgba(154, 77, 255, 0.28);
    --w2-glow-blue:   0 10px 30px rgba(41, 121, 243, 0.28);
    --w2-glow-red:    0 10px 30px rgba(239, 68, 68, 0.24);
    --w2-glow-soft:   0 16px 40px rgba(15, 23, 42, 0.18), 0 6px 18px rgba(41, 121, 243, 0.12);

    --w2-eyebrow-color: #1d4ed8;
    --w2-card-bg: #ffffff;
    --w2-card-border: rgba(15, 23, 42, 0.10);
    --w2-card-border-hover: rgba(154, 77, 255, 0.55);
}

/* ─── Ambient background blobs ───────────────────── */
.w2-ambient {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.w2-ambient::before,
.w2-ambient::after {
    content: "";
    position: absolute;
    width: 70vmax;
    height: 70vmax;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.35;
    will-change: transform;
}

.w2-ambient::before {
    background: radial-gradient(circle at center, rgba(154, 77, 255, 0.45) 0%, rgba(154, 77, 255, 0) 60%);
    top: -25vmax;
    left: -20vmax;
    animation: w2-drift-a 48s ease-in-out infinite alternate;
}

.w2-ambient::after {
    background: radial-gradient(circle at center, rgba(41, 121, 243, 0.45) 0%, rgba(41, 121, 243, 0) 60%);
    bottom: -25vmax;
    right: -20vmax;
    animation: w2-drift-b 56s ease-in-out infinite alternate;
}

html.light .w2-ambient::before {
    background: radial-gradient(circle at center, rgba(154, 77, 255, 0.30) 0%, rgba(154, 77, 255, 0) 60%);
    opacity: 0.55;
}

html.light .w2-ambient::after {
    background: radial-gradient(circle at center, rgba(41, 121, 243, 0.32) 0%, rgba(41, 121, 243, 0) 60%);
    opacity: 0.55;
}

@keyframes w2-drift-a {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(8vmax, 6vmax) scale(1.15); }
}
@keyframes w2-drift-b {
    0%   { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-7vmax, -5vmax) scale(1.1); }
}

/* w2-content sits above ambient */
.w2-content { position: relative; z-index: 1; }
.w2-sidebar  { z-index: 2; }
.w2-bottom-nav { z-index: 1001; }

@media (prefers-reduced-motion: reduce) {
    .w2-ambient::before,
    .w2-ambient::after {
        animation: none !important;
    }
}

/* ─── Entertainment typography ───────────────────── */
.w2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--w2-eyebrow-color);
    margin-bottom: 8px;
}

.w2-eyebrow svg { width: 13px; height: 13px; }

.w2-eyebrow-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--w2-eyebrow-color);
    box-shadow: 0 0 8px var(--w2-eyebrow-color);
    animation: w2-pulse-dot 1.6s ease-in-out infinite;
}

@keyframes w2-pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.85); }
}

.w2-hero-title {
    font-size: clamp(32px, 6vw, 56px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--w2-text-primary);
    margin: 0 0 12px;
}

.w2-section-title {
    font-size: clamp(22px, 3.6vw, 34px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--w2-text-primary);
    margin: 0 0 16px;
}

.w2-grad-text {
    background: var(--w2-grad-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .w2-eyebrow-dot { animation: none !important; }
}

/* ─── Entertainment buttons ──────────────────────── */
.w2-btn-grad {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: none;
    background: var(--w2-grad-primary-rev);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: var(--w2-glow-purple);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
    text-decoration: none;
}
.w2-btn-grad:hover  { transform: translateY(-1px); filter: brightness(1.08); }
.w2-btn-grad:active { transform: translateY(0); filter: brightness(0.95); }

.w2-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 999px;
    border: 1.5px solid rgba(154, 77, 255, 0.55);
    background: transparent;
    color: var(--w2-text-primary);
    font-weight: 700;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(154, 77, 255, 0);
    transition: box-shadow .2s ease, border-color .2s ease, transform .15s ease;
    text-decoration: none;
}
.w2-btn-outline:hover  { box-shadow: 0 0 18px rgba(154, 77, 255, 0.35); border-color: rgba(154, 77, 255, 0.85); transform: translateY(-1px); }

/* MudBlazor primary button — gradient + glow */
.mud-button-filled.mud-button-filled-primary {
    background-image: var(--w2-grad-primary-rev) !important;
    background-color: transparent !important;
    box-shadow: var(--w2-glow-purple) !important;
    border-radius: 999px !important;
    text-transform: none !important;
    font-weight: 700 !important;
    transition: transform .15s ease, filter .15s ease;
}
.mud-button-filled.mud-button-filled-primary:hover { filter: brightness(1.08); transform: translateY(-1px); }

.mud-button-outlined.mud-button-outlined-primary {
    border-radius: 999px !important;
    border-color: rgba(154, 77, 255, 0.55) !important;
    color: var(--w2-text-primary) !important;
    text-transform: none !important;
    font-weight: 700 !important;
    transition: box-shadow .2s ease;
}
.mud-button-outlined.mud-button-outlined-primary:hover {
    box-shadow: 0 0 18px rgba(154, 77, 255, 0.35) !important;
    border-color: rgba(154, 77, 255, 0.85) !important;
    background: rgba(154, 77, 255, 0.06) !important;
}

/* ─── Entertainment badges ───────────────────────── */
.w2-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    color: #fff;
}
.w2-badge svg { width: 12px; height: 12px; }
.w2-badge-hot      { background: var(--w2-grad-hot);   box-shadow: 0 6px 18px rgba(255, 60, 80, 0.35); }
.w2-badge-trending { background: rgba(41, 121, 243, 0.18); color: #5b9eff; border: 1px solid rgba(41, 121, 243, 0.45); backdrop-filter: blur(8px); }
.w2-badge-limited  { background: var(--w2-grad-hot);   box-shadow: 0 6px 18px rgba(255, 60, 80, 0.35); }
.w2-badge-free     { background: rgba(255, 255, 255, 0.92); color: #111; }
.w2-badge-price    { background: rgba(0, 0, 0, 0.62); color: #fff; backdrop-filter: blur(8px); }
.w2-badge-new      { background: var(--w2-grad-cool);  box-shadow: 0 6px 18px rgba(41, 121, 243, 0.35); }

/* ─── Entertainment glow card ────────────────────── */
.w2-glow-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    background: var(--w2-card-bg);
    border: 1px solid var(--w2-card-border);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
    text-decoration: none;
    color: var(--w2-text-primary);
}
.w2-glow-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--w2-glow-soft);
    border-color: var(--w2-card-border-hover);
}
.w2-glow-card-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 11;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(154, 77, 255, 0.18), rgba(41, 121, 243, 0.18));
}
.w2-glow-card-image img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.w2-glow-card:hover .w2-glow-card-image img { transform: scale(1.04); }
.w2-glow-card-image::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,0.55) 100%);
    pointer-events: none;
}
.w2-glow-card-badges-tl {
    position: absolute; top: 10px; left: 10px;
    display: flex; gap: 6px; z-index: 2;
}
.w2-glow-card-badges-tr {
    position: absolute; top: 10px; right: 10px;
    display: flex; gap: 6px; z-index: 2;
}
.w2-glow-card-body {
    padding: 14px 16px 16px;
    display: flex; flex-direction: column; gap: 6px;
}
.w2-glow-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--w2-text-primary);
    margin: 0;
    line-height: 1.3;
}
.w2-glow-card-meta {
    font-size: 12.5px;
    color: var(--w2-text-secondary);
    display: flex; align-items: center; gap: 6px;
}
.w2-glow-card-progress {
    height: 3px;
    width: 100%;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.w2-glow-card-progress-bar {
    height: 100%;
    background: var(--w2-grad-cool);
    transition: width .3s ease;
}
.w2-glow-card-progress-bar.low { background: var(--w2-grad-hot); }

/* ─── Countdown chips ────────────────────────────── */
.w2-countdown {
    display: inline-flex;
    gap: 6px;
}
.w2-countdown-chip {
    width: 36px;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 4px 0;
    text-align: center;
    backdrop-filter: blur(10px);
}
.w2-countdown-num  { display: block; font-size: 14px; font-weight: 800; color: var(--w2-text-primary); line-height: 1.1; }
.w2-countdown-unit { display: block; font-size: 8.5px; font-weight: 600; color: var(--w2-text-tertiary); text-transform: uppercase; letter-spacing: 0.08em; }

html.light .w2-countdown-chip {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(96, 165, 250, 0.18);
}

/* ─── Page transition fade ───────────────────────── */
/* Pages opt-in by adding the .w2-page class to their root element */
.w2-page {
    animation: w2-page-fade 280ms ease both;
}
@keyframes w2-page-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .w2-page { animation: none !important; }
}

/* ─── Nav active gradient highlight ─────────────── */
.w2-nav-item.active::after {
    content: "";
    display: block;
    width: 22px;
    height: 3px;
    border-radius: 2px;
    margin-top: 2px;
    background: var(--w2-grad-primary-rev);
    box-shadow: 0 0 10px rgba(154, 77, 255, 0.6);
}

.w2-sidebar-item.w2-sidebar-active {
    background: linear-gradient(135deg, rgba(41, 121, 243, 0.16), rgba(154, 77, 255, 0.16)) !important;
    color: #ffffff !important;
    box-shadow: inset 2px 0 0 #9a4dff, 0 0 18px rgba(154, 77, 255, 0.18);
}

html.light .w2-sidebar-item.w2-sidebar-active {
    background: linear-gradient(135deg, rgba(41, 121, 243, 0.12), rgba(154, 77, 255, 0.12)) !important;
    color: #2563eb !important;
    box-shadow: inset 2px 0 0 #9a4dff, 0 10px 24px rgba(154, 77, 255, 0.16);
}

/* ─── Events Page Background ─────────────────────── */
.events-page { position: relative; color: white; }

.events-bg-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.events-bg {
    position: absolute;
    inset: 0;
    background: url('/img/events-bg.jpg') center/cover no-repeat;
    filter: brightness(0.50);
}
.events-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 20, 0.45),
        rgba(5, 5, 20, 0.60)
    );
}

/* All page content sits above the background */
.events-content {
    position: relative;
    z-index: 1;
}

/* ─── Hot Now Page Background ────────────────────── */
.hotnow-bg {
    position: absolute;
    inset: -8px;
    background: url('/img/hotnow-bg.jpg') center/cover no-repeat;
    filter: blur(4px) brightness(0.50);
}

/* ─── Social Page Background ─────────────────────── */
.social-page { position: relative; color: var(--w2-text-primary); }

.social-bg-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.social-bg {
    position: absolute;
    inset: 0;
    background: url('/img/social-bg.jpg') center bottom/cover no-repeat;
    filter: blur(1px) brightness(0.38);
}
.social-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 20, 0.68),
        rgba(5, 5, 20, 0.78)
    );
}
.social-bg-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 0% 25%, rgba(154, 77, 255, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 70%, rgba(41, 121, 243, 0.22) 0%, transparent 50%),
        radial-gradient(ellipse at center, transparent 35%, rgba(0, 0, 18, 0.60) 100%);
    pointer-events: none;
}
.social-content {
    position: relative;
    z-index: 1;
}

/* Search bar glow */
.events-search-wrap {
    position: relative;
    margin-bottom: 10px;
}
.events-search-wrap::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 22px;
    background: radial-gradient(circle, rgba(120, 80, 255, 0.35), rgba(120, 80, 255, 0) 70%);
    filter: blur(16px);
    z-index: 0;
    pointer-events: none;
}

/* Glassmorphism search input */
.events-search-input {
    position: relative;
    z-index: 1;
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0 36px;
    border-radius: 12px;
    border: 1px solid var(--w2-input-border);
    background: var(--w2-input-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--w2-text-primary);
    font-size: 14px;
    outline: none;
}
.events-search-input::placeholder { color: var(--w2-text-tertiary); }

/* Category chips */
.events-chip {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--w2-glass-border);
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(8px);
    color: var(--w2-text-primary);
    white-space: nowrap;
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.events-chip.active {
    background: linear-gradient(135deg, #7a5cff, #9f7bff);
    border-color: transparent;
    box-shadow: 0 0 12px rgba(122, 92, 255, 0.6);
    color: #fff;
}

/* Event cards on the background */
.events-card {
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--w2-glass-border);
    border-radius: 20px;
}

/* ─── Hot Now Page Background ────────────────────────── */
.hotnow-page { position: relative; color: white; }

.hotnow-bg-wrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.hotnow-bg {
    position: absolute;
    inset: 0;
    background: url('/img/hotnow-bg.jpg') center/cover no-repeat;
    filter: blur(1px) brightness(0.48);
}
.hotnow-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(5, 5, 20, 0.45),
        rgba(5, 5, 20, 0.60)
    );
}
.hotnow-content {
    position: relative;
    z-index: 1;
}

/* ─── Ticket Page ────────────────────────────────────── */
.ticket-page { position: relative; color: white; }

/* ── Light-mode: Events / Venues / Hot Now use a BOUNDED hero ──────────────
   These pages used to keep a fixed, full-viewport dark photo, which forced the
   whole page to stay dark-themed in light mode — so the app read as "still in
   dark mode" on those tabs. In light mode the photo is now a header band only;
   everything below it uses the normal light palette.

   Dark mode is deliberately untouched: every rule here is scoped to html.light,
   so the immersive full-bleed look is exactly as it was.                        */
html.light .events-page {
    color: var(--w2-text-primary);          /* .events-page hardcodes white */
    background: var(--w2-bg-primary);       /* the fixed photo no longer covers the viewport */
    min-height: 100vh;
}

/* Light mode: no photo at all on the Events / Venues / Hot Now tabs. The wrap is
   position:fixed and out of flow, so hiding it leaves no gap to compensate for. */
html.light .events-page .events-bg-wrap {
    display: none;
}

/* The ticket pages share this markup but are deliberately dark in both themes,
   so they keep the header-band treatment they have today. */
html.light .ticket-page .events-bg-wrap {
    position: absolute;                      /* was: fixed, inset 0 */
    inset: 0 0 auto 0;
    height: var(--w2-hero-h, calc(var(--w2-safe-top) + 104px));
    border-radius: 0 0 22px 22px;
    overflow: hidden;
}

/* No photo behind the heading in light mode any more, so it uses the ordinary
   light palette. Previously these variables were rescoped to white to keep the
   text readable on the photo — that would now be white on white.
   Dark mode is unaffected: the rule is scoped to html.light and simply absent. */

/* ── Light-mode: keep dark-bg vars for pages that are still full-bleed dark ── */
html.light .social-page,
html.light .ticket-page {
    --w2-text-primary:       rgba(255, 255, 255, 0.95);
    --w2-text-secondary:     rgba(255, 255, 255, 0.65);
    --w2-text-tertiary:      rgba(255, 255, 255, 0.40);
    --w2-bg-primary:         #000;
    --w2-bg-secondary:       #0d0d1a;
    --w2-input-bg:           rgba(255, 255, 255, 0.08);
    --w2-input-border:       rgba(255, 255, 255, 0.12);
    --w2-glass-bg:           rgba(255, 255, 255, 0.06);
    --w2-glass-strong-bg:    rgba(255, 255, 255, 0.10);
    --w2-glass-border:       rgba(255, 255, 255, 0.10);
    --w2-shadow:             rgba(0, 0, 0, 0.4);
}

/* ── Fix: global html.light button/svg rules override dark-bg page text ──
   Only needed on pages that are still dark in light mode. Events/Venues/Hot Now
   no longer need it — they use the normal light palette, so the global
   `html.light button { color:#1a1a1a }` rule is now the correct outcome. */
html.light .social-page button,
html.light .ticket-page button {
    color: var(--w2-text-primary);
}
html.light .social-page svg,
html.light .ticket-page svg {
    color: var(--w2-text-primary);
}

/* ── My Bookings sheet: restore light theme vars inside dark-bg page ── */
html.light .w2-bookings-sheet {
    --w2-text-primary:    #0b1220;
    --w2-text-secondary:  rgba(11, 18, 32, 0.74);
    --w2-text-tertiary:   rgba(11, 18, 32, 0.55);
    --w2-glass-bg:        rgba(41, 121, 243, 0.08);
    --w2-glass-border:    rgba(41, 121, 243, 0.18);
    --w2-glass-strong-bg: rgba(255, 255, 255, 0.98);
    --w2-shadow:          rgba(15, 23, 42, 0.22);
}
html.light .w2-bookings-sheet button {
    color: var(--w2-text-primary);
}
html.light .w2-bookings-sheet svg {
    color: var(--w2-text-primary);
}


/* ─── Distance range input ─────────────────────────
   Replaces MudSlider on the Events and Venues tabs. Those pages are otherwise
   plain HTML, and MudSlider was the only third-party component on either —
   also the only interaction that crashed the iOS app (build 52 crash report:
   SIGABRT from an unhandled managed exception on the main thread, which the
   try/catch in our own handlers could not see because it was not thrown there).

   accent-color styles the track and thumb natively in WebKit, so this needs no
   JS and no vendor pseudo-element gymnastics.                                  */
.w2-range {
    width: 100%;
    height: 34px;                /* comfortable touch target around a thin track */
    margin: 0;
    background: transparent;
    accent-color: #9a4dff;
    cursor: pointer;
    touch-action: pan-y;         /* let a vertical page scroll start on the slider */
}

/* ─── ChipGroup (Components/Filters/ChipGroup.razor) ─────────────────────
   One look for every filter chip list. Long lists collapse to a few rows with a fade on the last
   row and an animated "Show all · N" toggle. Chips are sized for comfortable tapping (the
   redesign asked for larger categories for older users). */
.w2-chipgroup { margin-bottom: 16px; }
.w2-chipgroup-items {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    overflow: hidden;
    transition: max-height 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.w2-chipgroup.is-collapsed .w2-chipgroup-items {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
}
.w2-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--w2-input-border);
    background: var(--w2-input-bg);
    color: var(--w2-text-secondary);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.1;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.12s ease;
}
.w2-chip:hover { border-color: rgba(154, 77, 255, 0.45); }
.w2-chip:active { transform: scale(0.97); }
.w2-chip:focus-visible { outline: 2px solid #9a4dff; outline-offset: 2px; }
.w2-chip.active {
    background: linear-gradient(135deg, #9a4dff, #2979f3);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 14px rgba(122, 92, 255, 0.35);
}
.w2-chip-icon { font-size: 15px; line-height: 1; }
.w2-chipgroup-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    min-height: 34px;
    padding: 6px 14px;
    border-radius: 999px;
    border: 1px dashed rgba(154, 77, 255, 0.5);
    background: rgba(154, 77, 255, 0.08);
    color: #b580ff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s ease;
}
.w2-chipgroup-toggle:hover { background: rgba(154, 77, 255, 0.16); }
.w2-chipgroup-toggle:focus-visible { outline: 2px solid #9a4dff; outline-offset: 2px; }
.w2-chipgroup-chevron { transition: transform 0.28s ease; }
.w2-chipgroup-toggle[aria-expanded="true"] .w2-chipgroup-chevron { transform: rotate(180deg); }
html.light .w2-chipgroup-toggle { color: #7c3aed; }
@media (prefers-reduced-motion: reduce) {
    .w2-chipgroup-items, .w2-chip, .w2-chipgroup-chevron { transition: none; }
}

/* Titled chip list: label left, compact toggle right. */
.w2-chipgroup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
}
.w2-chipgroup-head .w2-filter-title { margin: 0; }
.w2-chipgroup-toggle.is-head {
    margin-top: 0;
    min-height: 28px;
    padding: 4px 11px;
    font-size: 11px;
    border-style: solid;
    flex-shrink: 0;
}

/* Section titles inside the discovery filter sheets. */
.w2-filter-title {
    color: var(--w2-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 10px;
}

/* ─── PhotoGallery (Components/Media/PhotoGallery.razor + js/gallery.js) ──────────────────── */
html.w2-noscroll, html.w2-noscroll body { overflow: hidden; }
.w2-gal {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    isolation: isolate;
    background: var(--w2-bg-secondary);
}
/* The current photo, blurred, behind everything: the frame takes on that photo's colours. */
.w2-gal-backdrop {
    position: absolute; inset: -40px; z-index: -1;
    background-size: cover; background-position: center;
    filter: blur(38px) saturate(1.5) brightness(0.8);
    transition: background-image 0.45s ease;
}
.w2-gal-carousel { position: relative; }
.w2-gal-track {
    display: flex;
    height: var(--w2-gal-h, 320px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}
.w2-gal-track::-webkit-scrollbar { display: none; }
.w2-gal-slide {
    flex: 0 0 100%;
    scroll-snap-align: center;
    overflow: hidden;
    cursor: zoom-in;
    display: flex; align-items: center; justify-content: center;
}
.w2-gal-slide img {
    width: 100%; height: 100%; object-fit: cover;
    user-select: none; -webkit-user-drag: none;
    will-change: transform;
    transition: transform 0.08s linear;
}
.w2-gal-topbar, .w2-gal-bottombar {
    position: absolute; left: 12px; right: 12px;
    display: flex; align-items: center; gap: 8px;
    pointer-events: none;
}
.w2-gal-topbar { top: 12px; justify-content: flex-end; }
.w2-gal-bottombar { bottom: 12px; justify-content: space-between; }
.w2-gal-topbar > *, .w2-gal-bottombar > * { pointer-events: auto; }
.w2-gal-pill, .w2-gal-count, .w2-gal-photolike {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 34px; padding: 6px 12px;
    border-radius: 999px; border: none;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    color: #fff; font-size: 12px; font-weight: 700;
    cursor: pointer;
}
.w2-gal-count { cursor: default; font-variant-numeric: tabular-nums; }
.w2-gal-heart {
    width: 42px; height: 42px; border-radius: 999px; border: none;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}
.w2-gal-heart svg path, .w2-gal-photolike svg path { fill: none; stroke: #fff; stroke-width: 2; }
.w2-gal-heart.on svg path, .w2-gal-photolike.on svg path { fill: #ff3d6e; stroke: #ff3d6e; }
.w2-gal-heart.on, .w2-gal-photolike.on { animation: w2-heart-pop 0.35s cubic-bezier(0.2, 1.6, 0.4, 1); }
@keyframes w2-heart-pop { 0% { transform: scale(0.7); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
.w2-gal-dots { display: flex; gap: 5px; align-items: center; }
.w2-gal-dots span {
    width: 7px; height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.5);
    transition: all 0.25s ease;
}
.w2-gal-dots span.on { width: 18px; background: #fff; }
.w2-gal-dots span.far { transform: scale(0.6); opacity: 0.6; }
.w2-gal-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 40px; height: 40px; border-radius: 999px; border: none;
    background: rgba(255, 255, 255, 0.92); color: #111; font-size: 24px; line-height: 1;
    display: none; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.w2-gal-arrow.prev { left: 12px; }
.w2-gal-arrow.next { right: 12px; }
.w2-gal-arrow:disabled { opacity: 0; pointer-events: none; }
@media (hover: hover) {
    .w2-gal-carousel:hover .w2-gal-arrow, .w2-viewer .w2-gal-arrow { display: inline-flex; }
}
.w2-gal-pill:focus-visible, .w2-gal-heart:focus-visible, .w2-gal-photolike:focus-visible,
.w2-gal-arrow:focus-visible, .w2-gal-tile:focus-visible, .w2-viewer-btn:focus-visible {
    outline: 2px solid #9a4dff; outline-offset: 2px;
}

/* Double-tap heart burst */
.w2-heart-burst {
    position: absolute; z-index: 5; pointer-events: none;
    transform: translate(-50%, -50%);
    animation: w2-burst 0.85s ease-out forwards;
    filter: drop-shadow(0 6px 18px rgba(255, 61, 110, 0.55));
}
.w2-heart-burst svg path { fill: #ff3d6e; }
@keyframes w2-burst {
    0%   { transform: translate(-50%, -50%) scale(0.2); opacity: 0; }
    20%  { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
    40%  { transform: translate(-50%, -50%) scale(0.95); }
    100% { transform: translate(-50%, -120%) scale(1); opacity: 0; }
}
.w2-heart-particle {
    position: absolute; left: 50%; top: 50%;
    width: 8px; height: 8px; border-radius: 999px; background: #ff9fb8;
    transform: rotate(var(--a)) translateY(0);
    animation: w2-particle 0.6s ease-out forwards;
}
@keyframes w2-particle {
    to { transform: rotate(var(--a)) translateY(-70px) scale(0.3); opacity: 0; }
}

/* Mosaic: wide screens get one large photo plus four small ones instead of the carousel. */
.w2-gal-mosaic { display: none; }
@media (min-width: 900px) {
    .w2-gal-carousel { display: none; }
    .w2-gal-mosaic {
        position: relative;
        display: grid; gap: 8px; padding: 8px;
        height: max(var(--w2-gal-h, 320px), 420px);
        grid-template-columns: 2fr 1fr 1fr;
        grid-template-rows: 1fr 1fr;
    }
    .w2-gal-mosaic.single { grid-template-columns: 1fr; grid-template-rows: 1fr; }
    .w2-gal-tile { border: none; padding: 0; border-radius: 14px; overflow: hidden; cursor: zoom-in; background: transparent; }
    .w2-gal-tile.t0 { grid-row: 1 / span 2; }
    .w2-gal-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease, filter 0.35s ease; }
    .w2-gal-tile:hover img { transform: scale(1.04); filter: brightness(1.05); }
    .w2-gal-mosaic-actions { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
    .w2-gal-mosaic-actions .w2-gal-pill { background: rgba(255, 255, 255, 0.94); color: #111; }
}

/* Full-screen viewer */
.w2-viewer {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(0, 0, 0, calc(0.96 * var(--w2-fade, 1)));
    display: flex; flex-direction: column;
    touch-action: none;
    animation: w2-fade-in 0.2s ease-out;
}
@keyframes w2-fade-in { from { opacity: 0; } to { opacity: 1; } }
.w2-viewer-top {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: calc(var(--w2-safe-top) + 10px) 12px 10px;
}
.w2-viewer-btn {
    min-width: 40px; height: 40px; padding: 0 12px; border-radius: 999px; border: none;
    background: rgba(255, 255, 255, 0.14); color: #fff; font-size: 16px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
}
.w2-viewer-track {
    flex: 1; display: flex;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
    transform: translateY(var(--w2-drag, 0px));
}
.w2-viewer-track::-webkit-scrollbar { display: none; }
.w2-viewer-slide {
    flex: 0 0 100%; scroll-snap-align: center;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.w2-viewer-slide img {
    max-width: 100%; max-height: 100%; object-fit: contain;
    user-select: none; -webkit-user-drag: none; transform-origin: center;
    transition: transform 0.12s ease-out;
}

/* Story mode */
.w2-story {
    position: fixed; inset: 0; z-index: 2000; background: #000;
    display: flex; align-items: center; justify-content: center;
    user-select: none; touch-action: none;
    animation: w2-fade-in 0.2s ease-out;
}
.w2-story-bars {
    position: absolute; top: calc(var(--w2-safe-top) + 10px); left: 10px; right: 10px;
    display: flex; gap: 4px; z-index: 2;
}
.w2-story-bar { flex: 1; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, 0.3); overflow: hidden; }
.w2-story-bar > span { display: block; height: 100%; width: 0; background: #fff; }
.w2-story-top {
    position: absolute; top: calc(var(--w2-safe-top) + 22px); left: 12px; right: 12px;
    display: flex; align-items: center; justify-content: space-between; z-index: 2;
}
.w2-story-title { color: #fff; font-weight: 700; font-size: 14px; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.w2-story-img {
    width: 100%; height: 100%; object-fit: cover;
    animation: w2-kenburns 5s ease-out forwards;   /* matches StoryMs in PhotoGallery.razor */
}
@keyframes w2-kenburns { from { transform: scale(1); } to { transform: scale(1.1); } }
.w2-story-like { position: absolute; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px); z-index: 2; }

@media (prefers-reduced-motion: reduce) {
    .w2-gal-slide img, .w2-gal-dots span, .w2-gal-tile img, .w2-viewer-slide img { transition: none; }
    .w2-story-img, .w2-heart-burst, .w2-heart-particle, .w2-gal-heart.on, .w2-gal-photolike.on, .w2-viewer, .w2-story { animation: none; }
}

/* PhotoGallery options: controls at the top, and a shade for overlaid titles. */
.w2-gal-bottombar.top { top: 12px; bottom: auto; justify-content: flex-start; }
.w2-gal-shade {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.65) 100%);
}

/* Mosaic layout by photo count, so no cell is left empty. */
@media (min-width: 900px) {
    .w2-gal-mosaic.m2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
    .w2-gal-mosaic.m2 .w2-gal-tile.t0 { grid-row: auto; }
    .w2-gal-mosaic.m3 { grid-template-columns: 2fr 1fr; }
    .w2-gal-mosaic.m4 .w2-gal-tile.t3 { grid-column: span 2; }
}

/* Native date field in the discovery filter sheets (rental date). */
.w2-date-input {
    min-height: 40px; padding: 8px 12px; border-radius: 12px;
    border: 1px solid var(--w2-input-border); background: var(--w2-input-bg);
    color: var(--w2-text-primary); font-size: 14px; font-weight: 600;
    color-scheme: dark;
}
html.light .w2-date-input { color-scheme: light; }
.w2-date-input:focus-visible { outline: 2px solid #9a4dff; outline-offset: 2px; }

/* Small overlay badges on photo cards (price, capacity). */
.w2-card-badge {
    padding: 3px 10px; border-radius: 999px;
    background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
    color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap;
}

/* ── Open tab bar ─────────────────────────────────────────────────────────────
   Docked above the bottom navigation on every screen while a tab is open. While it shows,
   html.w2-tab-open sets --w2-tab-bar so floating buttons and page padding move up by its
   height instead of being covered. */
:root { --w2-tab-bar: 0px; }
html.w2-tab-open { --w2-tab-bar: 52px; }
.w2-content::after { content: ''; display: block; height: var(--w2-tab-bar); }

.w2-tab-bar {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    z-index: 1009;
    width: calc(100% - 32px);
    max-width: 416px;
    height: 44px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #9a4dff 0%, #2979f3 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(122, 92, 255, 0.4);
}
html.light .w2-tab-bar, html.light .w2-tab-bar * { color: #fff; }
.w2-tab-bar-amount {
    flex-shrink: 0; padding: 3px 10px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.22); font-variant-numeric: tabular-nums;
}
.w2-tab-bar-text { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.w2-tab-bar-dot {
    width: 9px; height: 9px; border-radius: 50%; background: #4ade80; flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25);
    animation: w2TabPulse 1.8s ease-in-out infinite;
}
@keyframes w2TabPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .w2-tab-bar-dot { animation: none; } }

/* ── Menu ordering, sheets and tabs ─────────────────────────────────────────
   One look for the menu, the item / cart / card sheets, the open-tab bar and the tab pages,
   built only from the theme variables so dark and light both work. Brand gradient for the
   primary action and selected choices; green / red only for status. */
.w2-sheet-backdrop {
    position: fixed; inset: 0; z-index: 1200;
    background: rgba(0, 0, 0, 0.5);
    animation: w2FadeIn .18s ease-out;
}
.w2-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1201;
    max-width: 480px; margin: 0 auto; max-height: 88vh;
    display: flex; flex-direction: column;
    border-radius: 24px 24px 0 0;
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px);
    border: 1px solid var(--w2-glass-border); border-bottom: none;
    color: var(--w2-text-primary);
    box-shadow: 0 -12px 40px var(--w2-shadow);
    animation: w2SheetUp .24s cubic-bezier(.2, .8, .2, 1);
}
/* A sheet opened inside a page lives in .w2-content's stacking context (z-index 1), under the bottom
   nav and the tab bar; hide those while it's open so the sheet's buttons are never covered. Older
   WebViews without :has() get room at the bottom instead. */
html:has(.w2-content .w2-sheet) .w2-bottom-nav,
html:has(.w2-content .w2-sheet) .w2-tab-bar,
html:has(.w2-content .w2-sheet) .cart-bar { visibility: hidden; }
@supports not selector(:has(a)) {
    .w2-content .w2-sheet-body { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); }
}
.w2-sheet-grab { display: flex; justify-content: center; padding: 10px 0 2px; cursor: pointer; flex-shrink: 0; }
.w2-sheet-grab::before { content: ''; width: 40px; height: 4px; border-radius: 2px; background: var(--w2-input-border); }
.w2-sheet-body { overflow-y: auto; padding: 6px 20px calc(20px + env(safe-area-inset-bottom, 0px)); }
.w2-sheet-title { font-size: 20px; font-weight: 800; margin: 4px 0 14px; color: var(--w2-text-primary); }
@keyframes w2FadeIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes w2SheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .w2-sheet, .w2-sheet-backdrop { animation: none; } }

.w2-surface {
    background: var(--w2-glass-bg);
    border: 1px solid var(--w2-glass-border);
    border-radius: 16px;
    padding: 14px;
}
.w2-row    { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.w2-muted  { color: var(--w2-text-secondary); }
.w2-faint  { color: var(--w2-text-tertiary); }
.w2-divider { height: 1px; background: var(--w2-glass-border); margin: 12px 0; border: none; }
.w2-price      { color: var(--w2-accent-text); font-weight: 700; }
.w2-price-sale { color: var(--w2-success-text); font-weight: 700; }
.w2-price-was  { color: var(--w2-text-tertiary); text-decoration: line-through; font-size: .9em; }
.w2-error-text { color: var(--w2-danger-text); font-size: 13px; }

.w2-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 11px; font-weight: 700; white-space: nowrap;
    background: var(--w2-input-bg); color: var(--w2-text-secondary);
    border: 1px solid var(--w2-input-border);
}
.w2-pill.info    { background: rgba(41, 121, 243, .14); color: var(--w2-info-text);    border-color: rgba(41, 121, 243, .3); }
.w2-pill.warn    { background: rgba(245, 158, 11, .14); color: var(--w2-warning-text); border-color: rgba(245, 158, 11, .3); }
.w2-pill.success { background: rgba(34, 197, 94, .14);  color: var(--w2-success-text); border-color: rgba(34, 197, 94, .3); }
.w2-pill.danger  { background: rgba(239, 68, 68, .12);  color: var(--w2-danger-text);  border-color: rgba(239, 68, 68, .3); }

.w2-btn-primary {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 52px; padding: 0 18px;
    border: none; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, #9a4dff 0%, #2979f3 100%);
    color: #fff; font-size: 16px; font-weight: 800; text-decoration: none;
    box-shadow: 0 8px 22px rgba(122, 92, 255, .35);
    transition: transform .12s, opacity .12s;
}
.w2-btn-primary:active   { transform: scale(.98); }
.w2-btn-primary:disabled { opacity: .55; cursor: default; box-shadow: none; }
.w2-btn-primary:focus-visible { outline: 2px solid #9a4dff; outline-offset: 3px; }
html.light .w2-btn-primary, html.light .w2-btn-primary * { color: #fff; }
.w2-btn-count {
    min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px;
    background: rgba(255, 255, 255, .22); font-size: 14px;
    display: inline-flex; align-items: center; justify-content: center;
}
.w2-btn-ghost {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 46px; padding: 0 16px;
    border-radius: 14px; border: 1px dashed var(--w2-input-border);
    background: transparent; color: var(--w2-accent-text);
    font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none;
}
html.light .w2-btn-ghost { color: var(--w2-accent-text); }
.w2-link-btn { background: none; border: none; padding: 4px 0; cursor: pointer; font-size: 13px; font-weight: 700; color: var(--w2-accent-text); }
html.light .w2-link-btn { color: var(--w2-accent-text); }
.w2-link-btn.danger, html.light .w2-link-btn.danger { color: var(--w2-danger-text); }

/* Quantity stepper */
.w2-qty {
    display: inline-flex; align-items: center; gap: 2px;
    border-radius: 999px; border: 1px solid var(--w2-input-border); background: var(--w2-input-bg);
}
.w2-qty button {
    width: 32px; height: 32px; border-radius: 50%; border: none; background: none;
    color: var(--w2-text-primary); font-size: 18px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
html.light .w2-qty button { color: var(--w2-text-primary); }
.w2-qty span { min-width: 22px; text-align: center; font-weight: 700; font-size: 14px; }
.w2-qty.lg button { width: 44px; height: 44px; font-size: 22px; }
.w2-qty.lg span { min-width: 36px; font-size: 20px; }

/* Option choice rows (radio / checkbox) */
.w2-choice {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 11px 12px; margin-bottom: 6px; border-radius: 12px;
    border: 1px solid var(--w2-glass-border); background: var(--w2-glass-bg);
    color: var(--w2-text-primary); font-size: 14px; text-align: left; cursor: pointer;
}
html.light .w2-choice { color: var(--w2-text-primary); }
.w2-choice.on { border-color: rgba(154, 77, 255, .6); background: rgba(154, 77, 255, .10); }
.w2-choice-mark {
    width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%;
    border: 2px solid var(--w2-input-border);
    display: flex; align-items: center; justify-content: center;
}
.w2-choice-mark.box { border-radius: 6px; }
.w2-cardopt.selected .w2-choice-mark, .w2-choice.on .w2-choice-mark { border-color: transparent; background: linear-gradient(135deg, #9a4dff, #2979f3); }
.w2-cardopt.selected .w2-choice-mark::after, .w2-choice.on .w2-choice-mark::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.w2-choice.on .w2-choice-mark.box::after { width: 5px; height: 9px; border-radius: 0; background: none; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px, -1px); }

/* Totals */
.w2-totals { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.w2-totals .w2-row > span:last-child { font-variant-numeric: tabular-nums; }
.w2-total-row { font-size: 18px; font-weight: 800; padding-top: 10px; margin-top: 4px; border-top: 1px solid var(--w2-glass-border); }

/* Tip choice */
.w2-tip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.w2-tip {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 62px; padding: 8px 4px; border-radius: 14px; cursor: pointer;
    border: 1px solid var(--w2-input-border); background: var(--w2-input-bg);
    color: var(--w2-text-primary);
    transition: transform .12s;
}
html.light .w2-tip { color: var(--w2-text-primary); }
.w2-tip:active { transform: scale(.97); }
.w2-tip-pct { font-size: 17px; font-weight: 800; }
.w2-tip-amt { font-size: 12px; color: var(--w2-text-secondary); }
.w2-tip.active, html.light .w2-tip.active {
    background: linear-gradient(135deg, #9a4dff, #2979f3); border-color: transparent; color: #fff;
    box-shadow: 0 6px 16px rgba(122, 92, 255, .35);
}
.w2-tip.active .w2-tip-amt { color: rgba(255, 255, 255, .85); }
.w2-tip-extra { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.w2-tip-extra .w2-tip { min-height: 42px; flex-direction: row; font-size: 14px; font-weight: 700; }
.w2-input {
    width: 100%; height: 44px; padding: 0 14px; border-radius: 12px;
    border: 1px solid var(--w2-input-border); background: var(--w2-input-bg);
    color: var(--w2-text-primary); font-size: 16px;
}
.w2-input:focus { outline: none; border-color: rgba(154, 77, 255, .7); }

/* Alerts */
.w2-alert { border-radius: 14px; padding: 12px 14px; font-size: 14px; font-weight: 600; display: flex; gap: 10px; align-items: flex-start; }
.w2-alert.ok  { background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35); color: var(--w2-success-text); }
.w2-alert.err { background: rgba(239, 68, 68, .10); border: 1px solid rgba(239, 68, 68, .35); color: var(--w2-danger-text); }

/* Saved cards */
.w2-cardopt {
    display: flex; align-items: center; gap: 12px; width: 100%;
    padding: 12px 14px; margin-bottom: 8px; border-radius: 14px;
    border: 1px solid var(--w2-glass-border); background: var(--w2-glass-bg);
    color: var(--w2-text-primary); text-align: left; cursor: pointer;
}
html.light .w2-cardopt { color: var(--w2-text-primary); }
.w2-cardopt.selected { border-color: rgba(154, 77, 255, .65); background: rgba(154, 77, 255, .10); }
.w2-brand {
    width: 44px; height: 30px; flex-shrink: 0; border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; font-weight: 900; letter-spacing: .5px; text-transform: uppercase;
    background: linear-gradient(135deg, #334155, #0f172a); color: #fff;
}
.w2-brand.visa       { background: linear-gradient(135deg, #1a1f71, #2b4bd6); }
.w2-brand.mastercard { background: linear-gradient(135deg, #eb001b, #f79e1b); }
.w2-brand.amex       { background: linear-gradient(135deg, #0077a6, #2e9fd8); }
.w2-stripe-mount {
    padding: 14px; border-radius: 14px; min-height: 120px;
    border: 1px solid var(--w2-glass-border); background: var(--w2-glass-bg);
}

/* Tab and order cards */
.w2-venue-head { display: flex; align-items: center; gap: 12px; }
.w2-venue-logo {
    width: 48px; height: 48px; border-radius: 14px; object-fit: cover; flex-shrink: 0;
    background: var(--w2-input-bg); border: 1px solid var(--w2-glass-border);
    display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--w2-accent-text);
}
.w2-order { margin-bottom: 10px; }
.w2-order.cancelled { opacity: .55; }
.w2-order.cancelled .w2-order-line span:first-child { text-decoration: line-through; }
.w2-order-line { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; padding: 2px 0; }
.w2-order-line span:last-child { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.w2-order-sub { font-size: 12px; color: var(--w2-text-secondary); padding-left: 20px; }
.w2-order-note { font-size: 12px; color: var(--w2-text-tertiary); padding-left: 20px; font-style: italic; }
.w2-pickup {
    margin-top: 10px; padding: 10px 12px; border-radius: 12px;
    background: rgba(34, 197, 94, .12); border: 1px solid rgba(34, 197, 94, .35);
    display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--w2-success-text);
}
.w2-pickup strong { font-size: 20px; letter-spacing: 3px; color: var(--w2-text-primary); }
.w2-list-card {
    display: flex; align-items: center; gap: 12px; margin-bottom: 10px;
    text-decoration: none; color: inherit;
}
.w2-list-card.active { border-color: rgba(154, 77, 255, .5); }

/* ══════════════════════════════════════════════════════════════════════════════
   WEB BROWSER DESIGN LAYER  (Airbnb / Eventbrite style)

   Everything here is scoped under `.platform-web` (or the `.w2-webnav` /
   `.w2-webfooter` components that ONLY render on the web host), so the MAUI
   Android/iOS app is completely unaffected. The header/footer components
   themselves are gated with `@if (AppState.IsWeb)` in markup as well.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── Top header nav ─────────────────────────────────────────────────────────── */
.w2-webnav {
    display: none;                     /* shown only on desktop-ish widths below */
    position: sticky;
    top: 0;
    z-index: 1200;
    width: 100%;
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid var(--w2-glass-border);
}
.w2-webnav-inner {
    max-width: 1560px;
    margin: 0 auto;
    height: 68px;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 28px;
}
.w2-webnav-brand { display: flex; align-items: center; flex: 0 0 auto; }
.w2-webnav-brand img { height: 34px; width: auto; display: block; }

.w2-webnav-links { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; }
.w2-webnav-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 16px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    color: var(--w2-text-secondary);
    transition: color .15s ease, background .15s ease;
}
.w2-webnav-link:hover { color: var(--w2-text-primary); background: var(--w2-glass-bg); }
.w2-webnav-link.active { color: var(--w2-text-primary); }
.w2-webnav-link.active::after {
    content: "";
    position: absolute;
    left: 16px; right: 16px; bottom: 6px;
    height: 2.5px; border-radius: 2px;
    background: linear-gradient(135deg, #9a4dff, #2979f3);
}

.w2-webnav-actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.w2-webnav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--w2-text-secondary);
    cursor: pointer;
    text-decoration: none;
    transition: color .15s ease, background .15s ease;
}
.w2-webnav-icon:hover  { color: var(--w2-text-primary); background: var(--w2-glass-bg); }
.w2-webnav-icon.active { color: var(--w2-text-primary); }

.w2-webnav-badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 16px; height: 16px; padding: 0 3px;
    border-radius: 8px;
    background: #9a4dff; color: #fff;
    font-size: 10px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

.w2-webnav-lang {
    height: 38px; min-width: 40px; padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--w2-glass-border);
    background: transparent;
    color: var(--w2-text-secondary);
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.w2-webnav-lang:hover { color: var(--w2-text-primary); border-color: var(--w2-text-secondary); }

.w2-webnav-account { position: relative; }
.w2-webnav-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px;
    border-radius: 50%;
    border: 1px solid var(--w2-glass-border);
    background: var(--w2-glass-bg);
    color: var(--w2-text-primary);
    cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease;
}
.w2-webnav-avatar:hover { box-shadow: 0 2px 10px var(--w2-shadow); transform: translateY(-1px); }
.w2-webnav-avatar-img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}

.w2-webnav-menu-logout {
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
    color: var(--w2-danger-text);
}
.w2-webnav-menu-logout:hover { background: rgba(239, 68, 68, 0.10); }
.w2-webnav-menu-logout .w2-webnav-menu-ico { color: var(--w2-danger-text); }

.w2-webnav-menu {
    position: absolute; top: calc(100% + 12px); right: 0;
    min-width: 268px;
    padding: 8px;
    border-radius: 18px;
    background: var(--w2-glass-strong-bg);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
    border: 1px solid var(--w2-glass-border);
    box-shadow: 0 18px 50px -12px var(--w2-shadow), 0 4px 12px -6px var(--w2-shadow);
    z-index: 1210;
    animation: w2WebMenuIn .16s cubic-bezier(.2,.9,.3,1);
    transform-origin: top right;
}
@keyframes w2WebMenuIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }

/* Identity header at the top of the menu */
.w2-webnav-menu-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 12px 14px;
    margin-bottom: 4px;
}
.w2-webnav-menu-head-avatar {
    flex: 0 0 auto;
    width: 44px; height: 44px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(154,77,255,.18), rgba(41,121,243,.18));
    color: var(--w2-text-primary);
    overflow: hidden;
}
.w2-webnav-menu-head-avatar img { width: 100%; height: 100%; object-fit: cover; }
.w2-webnav-menu-head-text { display: flex; flex-direction: column; min-width: 0; }
.w2-webnav-menu-head-hi   { font-size: 12px; color: var(--w2-text-tertiary); line-height: 1.2; }
.w2-webnav-menu-head-name {
    font-size: 15px; font-weight: 700; color: var(--w2-text-primary);
    line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Section label (Finance / Admin) */
.w2-webnav-menu-label {
    padding: 8px 14px 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--w2-text-tertiary);
}
.w2-webnav-menu-group { padding: 2px 0; }

.w2-webnav-menu-item {
    display: flex; align-items: center; gap: 12px;
    padding: 11px 14px;
    border-radius: 12px;
    font-size: 14px; font-weight: 500;
    text-decoration: none;
    color: var(--w2-text-primary);
    transition: background .12s ease, transform .12s ease;
}
.w2-webnav-menu-item:hover  { background: var(--w2-glass-bg); }
.w2-webnav-menu-item:active { transform: scale(.985); }
.w2-webnav-menu-item.active { background: rgba(154, 77, 255, 0.15); font-weight: 600; }
.w2-webnav-menu-ico {
    flex: 0 0 auto; width: 18px; height: 18px;
    color: var(--w2-text-secondary);
}
.w2-webnav-menu-sep { height: 1px; margin: 6px 10px; background: var(--w2-glass-border); }

.w2-webnav-backdrop { position: fixed; inset: 0; z-index: 1205; background: transparent; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.w2-webfooter { display: none; margin-top: 64px; border-top: 1px solid var(--w2-glass-border); }
.w2-webfooter-inner {
    max-width: 1180px; margin: 0 auto;
    padding: 48px 24px 32px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}
.w2-webfooter-brand img { height: 32px; width: auto; margin-bottom: 12px; }
.w2-webfooter-brand p   { margin: 0; max-width: 280px; font-size: 14px; color: var(--w2-text-secondary); line-height: 1.6; }
.w2-webfooter-col h4 {
    margin: 0 0 14px; font-size: 13px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .06em; color: var(--w2-text-tertiary);
}
.w2-webfooter-col a {
    display: block; margin-bottom: 10px;
    font-size: 14px; text-decoration: none; color: var(--w2-text-secondary);
    transition: color .15s ease;
}
.w2-webfooter-col a:hover { color: var(--w2-text-primary); }
.w2-webfooter-bar {
    max-width: 1180px; margin: 0 auto;
    padding: 18px 24px 40px;
    font-size: 13px; color: var(--w2-text-tertiary);
    border-top: 1px solid var(--w2-glass-border);
}

/* ── Show the web chrome only at desktop widths ─────────────────────────────── */
@media (min-width: 1024px) {
    .platform-web .w2-webnav    { display: block; }
    .platform-web .w2-webfooter { display: block; }
    /* Bottom nav & floating gear give way to the header once it appears */
    .platform-web .w2-bottom-nav    { display: none !important; }
    .platform-web .w2-floating-gear { display: none !important; }
    /* Centered content column by default (Airbnb/Eventbrite article width) */
    .platform-web .w2-content {
        max-width: 1120px;
        margin: 0 auto;
        padding: 28px 24px 0;
    }
}
@media (min-width: 1440px) { .platform-web .w2-content { max-width: 1180px; } }
@media (min-width: 1536px) { .platform-web .w2-content { max-width: 1280px; } }
@media (min-width: 1920px) { .platform-web .w2-content { max-width: 1440px; } }

/* ── Full-bleed pages (map / search) — opt out of the centered column ───────── */
/* Add class `w2-fullbleed` to the page root to let it fill the viewport. */
@media (min-width: 1024px) {
    .platform-web .w2-content.has-fullbleed,
    .platform-web .w2-content:has(> .w2-fullbleed) {
        max-width: none;
        padding: 0;
    }
    .platform-web .w2-content:has(> .w2-fullbleed) .w2-webfooter { display: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   WEB LOGIN  (Eventbrite-style light page)

   Rendered only inside Login.razor's `AppState.IsWeb` branch, so it is fully
   isolated from the MAUI/Android/iOS dark login, which keeps its own inline
   styling. Everything here is light, airy, and centered.
   ══════════════════════════════════════════════════════════════════════════ */
.w2-weblogin-page {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 64px 24px;
    background: #fff;
    overflow-y: auto;
    z-index: 2000;
}
.w2-weblogin-card {
    width: 100%;
    max-width: 440px;
    color: #1e0a3c;
    font-family: inherit;
}
.w2-weblogin-brand { display: inline-flex; margin-bottom: 40px; }
.w2-weblogin-brand img { height: 40px; width: auto; display: block; }

.w2-weblogin-title {
    font-size: 40px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1e0a3c;
    margin: 0 0 32px;
}

.w2-weblogin-field { margin-bottom: 16px; }
.w2-weblogin-input {
    width: 100%;
    height: 56px;
    padding: 0 16px;
    border: 1px solid #c2c2cc;
    border-radius: 8px;
    font-size: 16px;
    color: #1e0a3c;
    background: #fff;
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.w2-weblogin-input::placeholder { color: #6f7287; }
.w2-weblogin-input:focus {
    border-color: #3659e3;
    box-shadow: 0 0 0 2px rgba(54, 89, 227, 0.25);
}

.w2-weblogin-error {
    background: #fdecec;
    border: 1px solid #f3b9b9;
    color: #c0392b;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    margin-bottom: 16px;
}

.w2-weblogin-primary {
    width: 100%;
    height: 56px;
    border: none;
    border-radius: 8px;
    background: #d1410c;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
    transition: background .15s ease, opacity .15s ease;
}
.w2-weblogin-primary:hover:not(:disabled) { background: #b8380a; }
.w2-weblogin-primary:disabled { opacity: .7; cursor: not-allowed; }

.w2-weblogin-forgot { text-align: center; margin-top: 16px; }
.w2-weblogin-forgot a {
    color: #3659e3;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.w2-weblogin-forgot a:hover { text-decoration: underline; }

.w2-weblogin-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 28px 0 20px;
    color: #39364f;
    font-size: 14px;
    font-weight: 600;
}
.w2-weblogin-divider::before,
.w2-weblogin-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #dbdae3;
}

.w2-weblogin-terms {
    text-align: center;
    font-size: 13px;
    line-height: 1.5;
    color: #6f7287;
    margin: 0 0 24px;
}
.w2-weblogin-terms a { color: #3659e3; font-weight: 700; text-decoration: none; }
.w2-weblogin-terms a:hover { text-decoration: underline; }

.w2-weblogin-socials {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 28px;
}
.w2-weblogin-social {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 56px;
    border: 1px solid #c2c2cc;
    border-radius: 8px;
    color: #1e0a3c;
    text-decoration: none;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}
.w2-weblogin-social:hover { background: #f8f7fa; border-color: #1e0a3c; }
.w2-weblogin-social:active { transform: scale(.97); }

.w2-weblogin-register {
    text-align: center;
    font-size: 15px;
    color: #39364f;
    margin: 0;
}
.w2-weblogin-register a { color: #3659e3; font-weight: 700; text-decoration: none; }
.w2-weblogin-register a:hover { text-decoration: underline; }

@media (max-width: 520px) {
    .w2-weblogin-page { padding: 40px 20px; }
    .w2-weblogin-title { font-size: 32px; }
}