@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600;1,700&family=IBM+Plex+Mono:wght@400;500;600;700&family=DotGothic16&family=Silkscreen:wght@400;700&family=VT323&family=Inter:wght@300;400;500;600;700;800&family=Roboto:wght@300;400;500;700&family=Outfit:wght@400;500;600;700;800&family=Noto+Sans+Kannada:wght@400;600;700&family=Noto+Sans+Devanagari:wght@400;600;700&display=swap');

/*@import '/_content/MudBlazor/MudBlazor.min.css'; if required refer starting with absolute path instead of relative path 
absolute path "/_content//MudBlazor/MudBlazor.min.css" 
relative path "_content/MudBlazor/MudBlazor.min.css" */
@import '/_content/BlazorUx.Shared/css/utilities.css';
@import '/_content/BlazorUx.Shared/css/conditional-states.css';
@import '/_content/BlazorUx.Shared/css/components.css';
@import '/_content/BlazorUx.Shared/css/layout.css';
@import '/_content/BlazorUx.Shared/css/dialog-components.css';
@import '/_content/BlazorUx.Shared/css/home-page.css';
@import '/_content/BlazorUx.Shared/css/town-page.css';
@import '/_content/BlazorUx.Shared/css/town-header.css';
@import '/_content/BlazorUx.Shared/css/town-cards.css';
@import '/_content/BlazorUx.Shared/css/page-towns.css';
@import '/_content/BlazorUx.Shared/css/page-cardtypes.css';
@import '/_content/BlazorUx.Shared/css/card-add.css';
@import '/_content/BlazorUx.Shared/css/card-update.css';
@import '/_content/BlazorUx.Shared/css/card-detail-panel.css';
@import '/_content/BlazorUx.Shared/css/card-creation.css';
@import '/_content/BlazorUx.Shared/css/card-creation-enhanced.css';
@import '/_content/BlazorUx.Shared/css/card-lifecycle-flow.css';
@import '/_content/BlazorUx.Shared/css/card-type-icons.css';
@import '/_content/BlazorUx.Shared/css/media-commands.css';
@import '/_content/BlazorUx.Shared/css/step-components.css';
@import '/_content/BlazorUx.Shared/css/google-business-form.css';
@import '/_content/BlazorUx.Shared/css/google-business-style.css';
@import '/_content/BlazorUx.Shared/css/business-hours.css';
@import '/_content/BlazorUx.Shared/css/business-profile-panel.css';
@import '/_content/BlazorUx.Shared/css/compact-business-profile.css';
@import '/_content/BlazorUx.Shared/css/social-connections.css';
@import '/_content/BlazorUx.Shared/css/business-verification.css';
@import '/_content/BlazorUx.Shared/css/verification-component.css';
@import '/_content/BlazorUx.Shared/css/verification-request-panel.css';
@import '/_content/BlazorUx.Shared/css/publishing-confirmation-dialog.css';
@import '/_content/BlazorUx.Shared/css/subscription-limitations.css';
@import '/_content/BlazorUx.Shared/css/usage-tracker.css';
@import '/_content/BlazorUx.Shared/css/modern-card-dialog.css';
@import '/_content/BlazorUx.Shared/css/theme-system.css';
@import '/_content/BlazorUx.Shared/css/theme-light.css';
@import '/_content/BlazorUx.Shared/css/theme-dark.css';
@import '/_content/BlazorUx.Shared/css/theme-indian.css';
@import '/_content/BlazorUx.Shared/css/theme-white.css';
@import '/_content/BlazorUx.Shared/css/theme-black.css';
@import '/_content/BlazorUx.Shared/css/theme-appledark.css';
@import '/_content/BlazorUx.Shared/css/theme-twitterdark.css';
@import '/_content/BlazorUx.Shared/css/theme-facebook.css';

/* ==========================================================================
   NOTHING PHONE NDOT (NDOT-55 & DOT-MATRIX STYLES)
   Inspired by 1980s IBM mainframes & Nothing OS retro-futuristic glyphs,
   paired harmoniously with modern system fonts like Inter and Roboto.
   ========================================================================== */
@font-face {
    font-family: 'Ndot-55';
    src: local('Ndot 55'), local('NDot-55'), local('Ndot55-Regular'), local('Ndot55');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Central font tokens - easily switchable: change --app-font-primary to any font family */
    --app-font-primary: 'IBM Plex Sans';
    --app-font-mono: 'IBM Plex Mono';
    --app-font-family: var(--app-font-primary), 'Inter', 'Roboto', 'Outfit', 'Noto Sans Kannada', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Telugu', 'Noto Sans Bengali', 'Noto Sans Malayalam', 'Noto Sans Oriya', 'Noto Sans Arabic', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --font-mono: var(--app-font-mono), 'Ndot-55', 'Silkscreen', 'DotGothic16', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    --font-ndot: var(--app-font-mono), 'Ndot-55', 'Silkscreen', 'DotGothic16', 'VT323', monospace;
    --font-dotmatrix: var(--app-font-mono), 'Silkscreen', 'DotGothic16', monospace;
    --body-font: var(--app-font-family);

    /* Enforce centralized font across all MudBlazor typography tokens */
    --mud-typography-default-family: var(--app-font-family);
    --mud-typography-body1-family: var(--app-font-family);
    --mud-typography-body2-family: var(--app-font-family);
    --mud-typography-h1-family: var(--app-font-family);
    --mud-typography-h2-family: var(--app-font-family);
    --mud-typography-h3-family: var(--app-font-family);
    --mud-typography-h4-family: var(--app-font-family);
    --mud-typography-h5-family: var(--app-font-family);
    --mud-typography-h6-family: var(--app-font-family);
    --mud-typography-subtitle1-family: var(--app-font-family);
    --mud-typography-subtitle2-family: var(--app-font-family);
    --mud-typography-button-family: var(--app-font-family);
    --mud-typography-caption-family: var(--app-font-family);
    --mud-typography-overline-family: var(--app-font-family);

    /* Core Design System Tokens - Light Mode */
    --neutral-layer-1: #FFFFFF;
    --neutral-layer-2: #F8FAFC;
    --neutral-layer-3: #F1F5F9;
    --neutral-layer-4: #E2E8F0;
    --neutral-foreground-rest: #0F172A;
    --neutral-foreground-hint: #475569;
    --neutral-foreground-on-accent: #FFFFFF;
    --neutral-stroke-divider-rest: #E2E8F0;
    --neutral-stroke-rest: #CBD5E1;

    --accent-fill-rest: #2563EB;
    --accent-fill-hover: #1D4ED8;
    --accent-foreground-rest: #2563EB;

    --success-fill-rest: #10B981;
    --success-fill-hover: #059669;
    --success-foreground-rest: #065F46;

    --warning-layer-1: #FEF3C7;
    --warning-stroke-control-default: #F59E0B;
    --warning-foreground-rest: #92400E;
    --warning-fill-rest: #F59E0B;

    --error-fill-rest: #EF4444;
    --error-fill-hover: #DC2626;
    --error-foreground-rest: #991B1B;
}

/* Nothing OS Ndot-55 & dot-matrix retro-futuristic utility classes */
.font-ndot, .ndot-style, .ndot-55 {
    font-family: var(--font-ndot) !important;
    letter-spacing: 0.05em;
}

.font-dotmatrix {
    font-family: var(--font-dotmatrix) !important;
    letter-spacing: 0.04em;
}

.font-mainframe {
    font-family: var(--font-ndot) !important;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.ndot-badge, .dot-matrix-badge {
    font-family: var(--font-ndot) !important;
    letter-spacing: 0.05em;
    font-size: 0.78rem;
    text-transform: uppercase;
}

/* Dark Mode Design System Tokens */
.theme-dark,
.black.theme-dark,
.apple-dark.theme-dark,
.twitter-dark.theme-dark {
    --neutral-layer-1: #111827;
    --neutral-layer-2: #1F2937;
    --neutral-layer-3: #2D3748;
    --neutral-layer-4: #4B5563;
    --neutral-foreground-rest: #F9FAFB;
    --neutral-foreground-hint: #9CA3AF;
    --neutral-foreground-on-accent: #FFFFFF;
    --neutral-stroke-divider-rest: rgba(255, 255, 255, 0.12);
    --neutral-stroke-rest: rgba(255, 255, 255, 0.20);

    --accent-fill-rest: #3B82F6;
    --accent-fill-hover: #2563EB;
    --accent-foreground-rest: #60A5FA;

    --success-fill-rest: #10B981;
    --success-fill-hover: #059669;
    --success-foreground-rest: #34D399;

    --warning-layer-1: rgba(245, 158, 11, 0.15);
    --warning-stroke-control-default: #F59E0B;
    --warning-foreground-rest: #FCD34D;
    --warning-fill-rest: #F59E0B;

    --error-fill-rest: #EF4444;
    --error-fill-hover: #DC2626;
    --error-foreground-rest: #F87171;
}

/* Runtime Font Switcher support - easily switch fonts at any point of time via HTML/data attribute */
[data-font="ibm-plex"], [data-font="ibm"], [data-font="default"] { --app-font-primary: 'IBM Plex Sans'; }
[data-font="outfit"] { --app-font-primary: 'Outfit'; }
[data-font="inter"] { --app-font-primary: 'Inter'; }
[data-font="roboto"] { --app-font-primary: 'Roboto'; }

/* Universal Typography Enforcement: Guarantees IBM Plex Sans across all HTML & MudBlazor elements */
*,
*::before,
*::after,
html,
body,
.mud-application,
.mud-layout,
.app-shell,
.technical-shell,
.mud-main-content,
.mud-container,
.mud-paper,
.mud-card,
.mud-typography,
.mud-typography-root,
.mud-typography-body1,
.mud-typography-body2,
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6,
.mud-typography-subtitle1,
.mud-typography-subtitle2,
.mud-typography-button,
.mud-typography-caption,
.mud-typography-overline,
.mud-button-root,
.mud-button,
.mud-icon-button,
.mud-input,
.mud-input-control,
.mud-input-root,
.mud-input-slot,
.mud-chip,
.mud-dialog,
.mud-dialog-content,
.mud-dialog-title,
.mud-nav-link,
.mud-toolbar,
.mud-appbar,
.mud-drawer,
input,
button,
select,
textarea,
h1, h2, h3, h4, h5, h6,
p, span, a, label, li, ul, ol, div, strong, b, em, td, th {
    font-family: var(--app-font-family) !important;
}

/* Explicit mono & retro glyphs exception */
code, kbd, samp, pre, .font-mono, .font-ndot, .ndot-style, .ndot-55, .font-dotmatrix, .ndot-badge, .dot-matrix-badge, .font-mainframe {
    font-family: var(--font-ndot, 'IBM Plex Mono', monospace) !important;
}

body {
    font-family: var(--app-font-family) !important;
    font-size: var(--type-ramp-base-font-size, 0.95rem);
    line-height: var(--type-ramp-base-line-height, 1.55);
    margin: 0;
}

/* Startup placeholder styles moved from index.html inline */
.startup-loading {
    display:flex;
    align-items:center;
    justify-content:center;
    height:100vh;
    font-family:sans-serif;
    color:#512BD4;
}
.startup-title { font-size:2rem; margin-bottom:0.5rem; text-align:center; }
.startup-sub { font-size:1rem; opacity:0.7; text-align:center; }

/* ── Unified app footer strip (reconnect / error states) ─────────────────── */
/* commit: fix: unified footer strip replaces broken blazor-error-ui + reconnect overlay */

/* Keep legacy #blazor-error-ui hidden — rendering is taken over by #app-unified-footer */
#blazor-error-ui { display: none !important; }

#app-unified-footer {
    display: none; /* JS toggles to flex */
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translate3d(0, 0, 0);
    z-index: 2100;
    width: max-content;
    max-width: min(94vw, 680px);
    min-width: 280px;
    box-sizing: border-box;
    min-height: 46px;
    padding: 10px 24px;
    padding-bottom: max(10px, env(safe-area-inset-bottom));
    border-radius: 9999px;
    font-size: 0.85rem;
    font-family: var(--body-font, system-ui, -apple-system, sans-serif);
    align-items: center;
    justify-content: center;
    gap: 14px;
    cursor: default;
    user-select: none;
    overflow: visible;
    backdrop-filter: blur(20px) saturate(190%);
    -webkit-backdrop-filter: blur(20px) saturate(190%);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.42),
                0 0 0 1px rgba(255, 255, 255, 0.12),
                0 4px 12px rgba(0, 0, 0, 0.25);
    animation: ufoFloatUp 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

@keyframes ufoFloatUp {
    0% {
        opacity: 0;
        transform: translateX(-50%) translateY(24px) scale(0.96);
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) translateY(0) scale(1);
    }
}

/* ── Technical Radar Pulse Beacon ── */
.ufo-beacon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ufo-beacon-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.75;
    animation: ufoRadarPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ufo-beacon-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 8px currentColor;
}

@keyframes ufoRadarPing {
    0% {
        transform: scale(0.6);
        opacity: 0.9;
    }
    75%, 100% {
        transform: scale(2.2);
        opacity: 0;
    }
}

.ufo-text-group {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: max-content;
    line-height: 1.25;
}

.ufo-label {
    font-weight: 600;
    letter-spacing: 0.01em;
    font-size: 0.88rem;
    white-space: nowrap;
}

.ufo-subtext {
    font-size: 0.72rem;
    opacity: 0.82;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* ── State themes: Sleek Glassmorphism ── */

/* 1. Reconnecting / Connecting to Server (Modern Deep Sapphire + Electric Cyan Glow) */
#app-unified-footer.ufo-reconnecting {
    background: rgba(10, 25, 47, 0.88);
    color: #e0f2fe;
    border: 1px solid rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(14, 165, 233, 0.3),
                inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
#app-unified-footer.ufo-reconnecting .ufo-beacon { color: #38bdf8; }
#app-unified-footer.ufo-reconnecting .ufo-dots span { background: #38bdf8; }
#app-unified-footer.ufo-reconnecting .ufo-countdown {
    background: rgba(56, 189, 248, 0.16);
    color: #bae6fd;
    border: 1px solid rgba(56, 189, 248, 0.28);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
}

/* 2. Connection Failed (Deep Ruby + Crimson Warning Glow) */
#app-unified-footer.ufo-failed {
    background: rgba(35, 10, 15, 0.90);
    color: #ffe4e6;
    border: 1px solid rgba(244, 63, 94, 0.5);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.55),
                0 0 24px rgba(225, 29, 72, 0.35);
}
#app-unified-footer.ufo-failed .ufo-beacon { color: #fb7185; }

/* 3. Error UI (Deep Amethyst/Amber) */
#app-unified-footer.ufo-error {
    background: rgba(30, 20, 10, 0.90);
    color: #fef3c7;
    border: 1px solid rgba(245, 158, 11, 0.45);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.55),
                0 0 24px rgba(245, 158, 11, 0.3);
}

/* 4. SignalR Connecting (Emerald Teal) */
#app-unified-footer.ufo-signalr-connecting {
    background: rgba(6, 30, 25, 0.90);
    color: #ccfbf1;
    border: 1px solid rgba(20, 184, 166, 0.45);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(20, 184, 166, 0.3);
}
#app-unified-footer.ufo-signalr-connecting .ufo-beacon { color: #2dd4bf; }

/* 5. SignalR Failed (Amber Orange) */
#app-unified-footer.ufo-signalr-failed {
    background: rgba(35, 20, 10, 0.90);
    color: #ffedd5;
    border: 1px solid rgba(249, 115, 22, 0.45);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(249, 115, 22, 0.3);
}

/* 6. Generic Loading (Indigo / Violet) */
#app-unified-footer.ufo-loading {
    background: rgba(15, 15, 35, 0.90);
    color: #e0e7ff;
    border: 1px solid rgba(99, 102, 241, 0.45);
    box-shadow: 0 12px 32px -4px rgba(0, 0, 0, 0.5),
                0 0 24px rgba(99, 102, 241, 0.3);
}

/* High-Tech Bouncing Dots */
.ufo-dots { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; }
.ufo-dots span {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
    animation: ufo-pulse-dot 1.2s infinite ease-in-out;
}
.ufo-dots span:nth-child(2) { animation-delay: 0.2s; }
.ufo-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ufo-pulse-dot {
    0%, 100% { transform: scale(0.7); opacity: 0.4; }
    50%      { transform: scale(1.3); opacity: 1; }
}

/* Modern Frosted Pill Action Buttons */
.ufo-action {
    margin-left: auto;
    flex-shrink: 0;
    min-height: 28px;
    padding: 4px 14px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12);
    color: inherit;
    transition: all 0.2s ease;
    touch-action: manipulation;
}
.ufo-action:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.45);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.ufo-action:active {
    transform: translateY(0);
}

/* Desktop: offset left edge when permanent drawer is open */
@media (min-width: 960px) {
    body:has(.app-nav-drawer.mud-drawer--open:not(.mud-drawer--closed)) #app-unified-footer {
        left: calc(50% + (var(--mud-drawer-width-left, 240px) / 2));
    }
}

/* Mobile: ensure pill fits screen without clipping or excessive width */
@media (max-width: 480px) {
    #app-unified-footer {
        width: auto;
        min-width: 0;
        max-width: 96vw;
        padding: 8px 14px;
        gap: 8px;
    }
    .ufo-text-group {
        min-width: 0;
    }
    .ufo-label {
        font-size: 0.8rem;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ufo-subtext {
        font-size: 0.68rem;
    }
}

html,
body,
#app {
    min-height: 100%;
}

.navmenu-icon {
    display: none;
}

.manage {
    width: 100dvw;
}

footer {
    background: var(--neutral-layer-4);
    color: var(--neutral-foreground-rest);
    align-items: center;
    padding: 10px 10px;
}

    footer a {
        color: var(--neutral-foreground-rest);
        text-decoration: none;
    }

        footer a:focus {
            outline: 1px dashed;
            outline-offset: 3px;
        }

        footer a:hover {
            text-decoration: underline;
        }

.alert {
    border: 1px dashed var(--accent-fill-rest);
    padding: 5px;
}


.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA9OC42NzgyIDI5MSA9Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDg2IDY2LjA5IDMyLjA4NjIgMjYzLjUwMjIgNjkuMjg0NyA0Ni4xMTY1IDI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgg39DqyBDzYucZXQZGlzLg==) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::before {
        content: "An error has occurred. "
    }

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 0.6rem;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: #1b6ec2;
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

code {
    color: #c02d76;
}

/* Global Dialog & Overlay Styles - Consistent across entire application */

/* Backdrop overlay for all dialogs */
.app-backdrop {
    position: fixed !important;
    inset: 0;
    z-index: 2147483644 !important;
    isolation: isolate;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 16px;
    padding-top: max(env(safe-area-inset-top), 16px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Dialog container - positions above backdrop */
.app-dialog {
    width: min(760px, 96vw);
    max-width: 100%;
    max-height: calc(100vh - 32px);
    margin: auto 0;
    overflow-y: auto;
    border-radius: 14px;
    z-index: 2147483645 !important;
    position: relative;
    background: var(--mud-palette-surface, #fff);
}

/* Sticky header with close button - always visible during scroll */
.app-dialog-header {
    position: sticky;
    top: 0;
    z-index: 2147483646 !important;
    background: var(--mud-palette-surface, #fff);
    padding: 8px;
    margin: -8px -8px 8px -8px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0e0e0);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Close button styling for dialogs */
.app-dialog-close-btn {
    z-index: 2147483647 !important;
    background: var(--mud-palette-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.app-dialog-close-btn:hover {
    background: var(--mud-palette-action-hover, rgba(0, 0, 0, 0.04));
}

/* Ensure custom app dialog overlays render above MudLayout drawer/appbar in all routes */
html.town-dialog-open .mud-main-content,
body.town-dialog-open .mud-main-content,
html.town-dialog-open .mud-main-content > div,
body.town-dialog-open .mud-main-content > div {
    position: relative;
    z-index: 2147483640 !important;
}

/* Responsive adjustments for dialogs */
@media (max-width: 600px) {
    .app-backdrop {
        padding: 8px;
        padding-top: max(env(safe-area-inset-top), 8px);
    }

    .app-dialog {
        width: 100%;
        max-width: 100%;
        max-height: calc(100vh - 16px);
        border-radius: 8px;
    }

    /* Reduce padding on mobile for more content space */
    .app-dialog.pa-3 {
        padding: 8px !important;
    }

    .app-dialog-header {
        padding: 8px;
        margin: -8px -8px 8px -8px;
    }
}

/* Extra small screens */
@media (max-width: 400px) {
    .app-backdrop {
        padding: 4px;
    }

    .app-dialog {
        border-radius: 4px;
        max-height: calc(100vh - 8px);
    }
}

/* Skeleton animation for lazy-loaded card details */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ==========================================================================
   OPEN & CLOSED STATUS CHIPS - Consistent Across ALL Themes
   OPEN is always Green, CLOSED is always Red
   ========================================================================== */
.town-open-chip-manual,
.town-open-chip-timing {
    background-color: #16A34A !important;
    background: #16A34A !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 10px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.town-open-chip-closed {
    background-color: #DC2626 !important;
    background: #DC2626 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    border-radius: 9999px !important;
    letter-spacing: 0.03em !important;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.35) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 0 10px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
}

/* ==========================================================================
   OPEN & CLOSED STATUS INDICATORS - Good Visual Symbols
   OPEN is Green (pulsing glowing dot), CLOSED is Red
   ========================================================================== */
.town-status-symbol {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    border-radius: 50% !important;
    cursor: default;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease;
    border: none;
    padding: 0;
    margin: 0;
    background: transparent;
}

.town-status-symbol.status-open {
    background: rgba(22, 163, 74, 0.16) !important;
    border: 1.5px solid rgba(22, 163, 74, 0.75) !important;
    box-shadow: 0 0 8px rgba(22, 163, 74, 0.45) !important;
}

.town-status-symbol.status-closed {
    background: rgba(220, 38, 38, 0.16) !important;
    border: 1.5px solid rgba(220, 38, 38, 0.75) !important;
    box-shadow: 0 0 8px rgba(220, 38, 38, 0.35) !important;
}

.town-status-symbol .status-dot-symbol {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: block;
}

.town-status-symbol.status-open .status-dot-symbol {
    background-color: #16A34A;
    box-shadow: 0 0 6px #16A34A;
    animation: status-dot-pulse 2s infinite ease-in-out;
}

.town-status-symbol.status-closed .status-dot-symbol {
    background-color: #DC2626;
    box-shadow: 0 0 6px #DC2626;
}

.town-status-btn-toggle {
    cursor: pointer !important;
}

.town-status-btn-toggle:hover {
    transform: scale(1.15);
}

@keyframes status-dot-pulse {
    0%, 100% {
        transform: scale(0.95);
        opacity: 0.9;
    }
    50% {
        transform: scale(1.2);
        opacity: 1;
    }
}

/* ==========================================================================
   SOCIAL MEDIA ICONS - Colorful, Unique & Vibrant Across ALL Themes
   ========================================================================== */
.card-link-icons-row {
    gap: 4px !important;
}

.card-link-icons-row .mud-icon-button,
.card-link-icons-row .social-icon-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background-color 0.2s ease !important;
    border: 1px solid rgba(150, 150, 150, 0.22) !important;
}

.card-link-icons-row .mud-icon-button .mud-icon-button-label,
.card-link-icons-row .social-icon-btn .mud-icon-button-label {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.card-link-icons-row .mud-icon-root {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    text-align: center !important;
}

.card-link-icons-row .mud-icon-root.mdi::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    font-size: 18px !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.card-link-icons-row svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 auto !important;
}

.card-link-icons-row .mud-icon-button:hover,
.card-link-icons-row .social-icon-btn:hover {
    transform: translateY(-2px) scale(1.15) !important;
}

/* Call / Phone - Vibrant Royal Blue */
.card-link-icons-row .social-icon-phone,
.card-link-icons-row .mud-icon-button[style*="color:#2563EB"],
.card-link-icons-row .mud-icon-button[style*="color:#1D70B8"] {
    color: #2563EB !important;
    background: rgba(37, 99, 235, 0.12) !important;
}
.card-link-icons-row .social-icon-phone:hover,
.card-link-icons-row .mud-icon-button[style*="color:#2563EB"]:hover {
    background: rgba(37, 99, 235, 0.24) !important;
    box-shadow: 0 3px 12px rgba(37, 99, 235, 0.45) !important;
    border-color: #2563EB !important;
}

/* Facebook - Official Facebook Blue */
.card-link-icons-row .social-icon-facebook,
.card-link-icons-row .mud-icon-button[style*="color:#1877F2"] {
    color: #1877F2 !important;
    background: rgba(24, 119, 242, 0.1) !important;
}
.card-link-icons-row .social-icon-facebook:hover,
.card-link-icons-row .mud-icon-button[style*="color:#1877F2"]:hover {
    background: rgba(24, 119, 242, 0.22) !important;
    box-shadow: 0 3px 12px rgba(24, 119, 242, 0.45) !important;
    border-color: #1877F2 !important;
}

/* Twitter / X - Official Twitter Blue */
.card-link-icons-row .social-icon-twitter,
.card-link-icons-row .mud-icon-button[style*="color:#000000"],
.card-link-icons-row .mud-icon-button[style*="color:#1D9BF0"] {
    color: #1D9BF0 !important;
    background: rgba(29, 155, 240, 0.1) !important;
}
.card-link-icons-row .social-icon-twitter:hover,
.card-link-icons-row .mud-icon-button[style*="color:#000000"]:hover,
.card-link-icons-row .mud-icon-button[style*="color:#1D9BF0"]:hover {
    background: rgba(29, 155, 240, 0.22) !important;
    box-shadow: 0 3px 12px rgba(29, 155, 240, 0.45) !important;
    border-color: #1D9BF0 !important;
}

/* Instagram - Instagram Pink / Magenta */
.card-link-icons-row .social-icon-instagram,
.card-link-icons-row .mud-icon-button[style*="color:#E4405F"] {
    color: #E4405F !important;
    background: rgba(228, 64, 95, 0.1) !important;
}
.card-link-icons-row .social-icon-instagram:hover,
.card-link-icons-row .mud-icon-button[style*="color:#E4405F"]:hover {
    background: rgba(228, 64, 95, 0.22) !important;
    box-shadow: 0 3px 12px rgba(228, 64, 95, 0.45) !important;
    border-color: #E4405F !important;
}

/* YouTube - Pure Red */
.card-link-icons-row .social-icon-youtube,
.card-link-icons-row .mud-icon-button[style*="color:#FF0000"] {
    color: #FF0000 !important;
    background: rgba(255, 0, 0, 0.1) !important;
}
.card-link-icons-row .social-icon-youtube:hover,
.card-link-icons-row .mud-icon-button[style*="color:#FF0000"]:hover {
    background: rgba(255, 0, 0, 0.22) !important;
    box-shadow: 0 3px 12px rgba(255, 0, 0, 0.45) !important;
    border-color: #FF0000 !important;
}

/* WhatsApp - Official WhatsApp Green */
.card-link-icons-row .social-icon-whatsapp,
.card-link-icons-row .mud-icon-button[style*="color:#25D366"] {
    color: #25D366 !important;
    background: rgba(37, 211, 102, 0.1) !important;
}
.card-link-icons-row .social-icon-whatsapp:hover,
.card-link-icons-row .mud-icon-button[style*="color:#25D366"]:hover {
    background: rgba(37, 211, 102, 0.22) !important;
    box-shadow: 0 3px 12px rgba(37, 211, 102, 0.45) !important;
    border-color: #25D366 !important;
}

/* Google Maps - Maps Red */
.card-link-icons-row .social-icon-googlemap,
.card-link-icons-row .mud-icon-button[style*="color:#DB4437"],
.card-link-icons-row .mud-icon-button[style*="color:#EA4335"] {
    color: #EA4335 !important;
    background: rgba(234, 67, 53, 0.1) !important;
}
.card-link-icons-row .social-icon-googlemap:hover,
.card-link-icons-row .mud-icon-button[style*="color:#DB4437"]:hover,
.card-link-icons-row .mud-icon-button[style*="color:#EA4335"]:hover {
    background: rgba(234, 67, 53, 0.22) !important;
    box-shadow: 0 3px 12px rgba(234, 67, 53, 0.45) !important;
    border-color: #EA4335 !important;
}

/* Google Profile - Google Blue */
.card-link-icons-row .social-icon-googleprofile,
.card-link-icons-row .mud-icon-button[style*="color:#4285F4"] {
    color: #4285F4 !important;
    background: rgba(66, 133, 244, 0.1) !important;
}
.card-link-icons-row .social-icon-googleprofile:hover,
.card-link-icons-row .mud-icon-button[style*="color:#4285F4"]:hover {
    background: rgba(66, 133, 244, 0.22) !important;
    box-shadow: 0 3px 12px rgba(66, 133, 244, 0.45) !important;
    border-color: #4285F4 !important;
}

/* Website / Reference - Cyan / Teal */
.card-link-icons-row .social-icon-website,
.card-link-icons-row .mud-icon-button[style*="color:#6C757D"],
.card-link-icons-row .mud-icon-button[style*="color:#00ACC1"] {
    color: #00ACC1 !important;
    background: rgba(0, 172, 193, 0.1) !important;
}
.card-link-icons-row .social-icon-website:hover,
.card-link-icons-row .mud-icon-button[style*="color:#6C757D"]:hover {
    background: rgba(0, 172, 193, 0.22) !important;
    box-shadow: 0 3px 12px rgba(0, 172, 193, 0.45) !important;
    border-color: #00ACC1 !important;
}

/* ==========================================================================
   DYNAMIC CARD TYPE ICONS
   ========================================================================== */
.card-type-icon-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    background: color-mix(in srgb, var(--ct-color, #1877F2) 14%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--ct-color, #1877F2) 32%, transparent) !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.card-type-icon-wrapper:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--ct-color, #1877F2) 35%, transparent) !important;
}

.card-type-icon-wrapper .tile-icon {
    font-size: 16px !important;
    line-height: 1 !important;
    display: inline-flex !important;
}

/* ==========================================================================
   CARD SHADING & PREMIUM ELEVATED BORDERS
   ========================================================================== */
.town-card-preview,
.town-group-preview-card,
.tile-card,
.mud-card {
    border-radius: 12px !important;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.town-card-preview:hover,
.town-group-preview-card:hover,
.tile-card:hover {
    transform: translateY(-2px) !important;
}

/* Light Theme Card Shading */
.theme-light .town-card-preview,
.theme-light .town-group-preview-card,
.theme-light .mud-card,
.theme-light .tile-card {
    box-shadow: 0 4px 16px -2px rgba(0, 0, 0, 0.08), 0 1px 3px -1px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.07) !important;
}

.theme-light .town-card-preview:hover,
.theme-light .town-group-preview-card:hover,
.theme-light .mud-card:hover,
.theme-light .tile-card:hover {
    box-shadow: 0 12px 28px -4px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

/* Dark Theme Card Shading */
.theme-dark .town-card-preview,
.theme-dark .town-group-preview-card,
.theme-dark .mud-card,
.theme-dark .tile-card {
    box-shadow: 0 8px 24px -2px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 1px 0 0 rgba(255, 255, 255, 0.06) !important;
}

.theme-dark .town-card-preview:hover,
.theme-dark .town-group-preview-card:hover,
.theme-dark .mud-card:hover,
.theme-dark .tile-card:hover {
    box-shadow: 0 14px 36px -4px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.22), inset 0 1px 0 0 rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   HIGHLIGHTABLE PRIMARY & SECONDARY BUTTONS
   ========================================================================== */
.mud-button-filled.mud-button-filled-primary {
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
}

.mud-button-filled.mud-button-filled-primary:active {
    transform: translateY(1px) !important;
    filter: brightness(0.92) !important;
}

.mud-button-filled.mud-button-filled-secondary {
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease !important;
}

.mud-button-filled.mud-button-filled-secondary:hover {
    transform: translateY(-1px) !important;
    filter: brightness(1.1) !important;
    box-shadow: 0 5px 14px rgba(0, 0, 0, 0.25) !important;
}

.mud-button-filled.mud-button-filled-secondary:active {
    transform: translateY(1px) !important;
    filter: brightness(0.92) !important;
}

/* ==========================================================================
   UNIVERSAL BUTTON CONTRAST & SHADING (AVOIDS BLENDING INTO PAGE BACKGROUND)
   ========================================================================== */
.theme-light .mud-button-filled:not(.mud-button-filled-primary):not(.mud-button-filled-secondary):not(.mud-button-filled-error):not(.mud-button-filled-success):not(.mud-button-filled-warning):not(.mud-button-filled-info):not(.nav-logout-btn) {
    background: #FFFFFF !important;
    background-color: #FFFFFF !important;
    color: #1E293B !important;
    border: 1px solid rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    font-weight: 600 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.theme-light .mud-button-filled:not(.mud-button-filled-primary):not(.mud-button-filled-secondary):not(.mud-button-filled-error):not(.mud-button-filled-success):not(.mud-button-filled-warning):not(.mud-button-filled-info):not(.nav-logout-btn):hover {
    background: #F8FAFC !important;
    background-color: #F8FAFC !important;
    border-color: rgba(0, 0, 0, 0.3) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px) !important;
}

.theme-dark .mud-button-filled:not(.mud-button-filled-primary):not(.mud-button-filled-secondary):not(.mud-button-filled-error):not(.mud-button-filled-success):not(.mud-button-filled-warning):not(.mud-button-filled-info):not(.nav-logout-btn) {
    background: #24292E !important;
    background-color: #24292E !important;
    color: #F0F6FC !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
    font-weight: 600 !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.theme-dark .mud-button-filled:not(.mud-button-filled-primary):not(.mud-button-filled-secondary):not(.mud-button-filled-error):not(.mud-button-filled-success):not(.mud-button-filled-warning):not(.mud-button-filled-info):not(.nav-logout-btn):hover {
    background: #2F363D !important;
    background-color: #2F363D !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6) !important;
    transform: translateY(-1px) !important;
}

/* Universal Outlined Button Shading */
.mud-button-outlined {
    border-width: 1.5px !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.mud-button-outlined:hover {
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-1px) !important;
}

/* Universal Text Button Shading */
.mud-button-text {
    font-weight: 600 !important;
    transition: all 0.18s ease !important;
}

.theme-light .mud-button-text:hover {
    background: rgba(0, 0, 0, 0.07) !important;
}

.theme-dark .mud-button-text:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Page Card Types larger icon sizing */
.cardtype-list .card-type-icon-wrapper {
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
}

.cardtype-list .card-type-icon-wrapper .tile-icon {
    font-size: 24px !important;
}

/* ==========================================================================
   GLOBAL UNBREAKABLE SOCIAL MEDIA ICON RULES
   ========================================================================== */
.card-link-icons-row .mud-icon-button.social-icon-phone,
.card-link-icons-row .mud-icon-button.social-icon-phone .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-phone svg,
.card-link-icons-row .mud-icon-button.social-icon-phone span {
    color: #2563EB !important;
    fill: #2563EB !important;
}

.card-link-icons-row .mud-icon-button.social-icon-facebook,
.card-link-icons-row .mud-icon-button.social-icon-facebook .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-facebook svg,
.card-link-icons-row .mud-icon-button.social-icon-facebook span {
    color: #1877F2 !important;
    fill: #1877F2 !important;
}

.card-link-icons-row .mud-icon-button.social-icon-twitter,
.card-link-icons-row .mud-icon-button.social-icon-twitter .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-twitter svg,
.card-link-icons-row .mud-icon-button.social-icon-twitter span {
    color: #1D9BF0 !important;
    fill: #1D9BF0 !important;
}

.card-link-icons-row .mud-icon-button.social-icon-instagram,
.card-link-icons-row .mud-icon-button.social-icon-instagram .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-instagram svg,
.card-link-icons-row .mud-icon-button.social-icon-instagram span {
    color: #E4405F !important;
    fill: #E4405F !important;
}

.card-link-icons-row .mud-icon-button.social-icon-youtube,
.card-link-icons-row .mud-icon-button.social-icon-youtube .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-youtube svg,
.card-link-icons-row .mud-icon-button.social-icon-youtube span {
    color: #FF0000 !important;
    fill: #FF0000 !important;
}

.card-link-icons-row .mud-icon-button.social-icon-whatsapp,
.card-link-icons-row .mud-icon-button.social-icon-whatsapp .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-whatsapp svg,
.card-link-icons-row .mud-icon-button.social-icon-whatsapp span {
    color: #25D366 !important;
    fill: #25D366 !important;
}

.card-link-icons-row .mud-icon-button.social-icon-googlemap,
.card-link-icons-row .mud-icon-button.social-icon-googlemap .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-googlemap svg,
.card-link-icons-row .mud-icon-button.social-icon-googlemap span {
    color: #EA4335 !important;
    fill: #EA4335 !important;
}

.card-link-icons-row .mud-icon-button.social-icon-google,
.card-link-icons-row .mud-icon-button.social-icon-google .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-google svg,
.card-link-icons-row .mud-icon-button.social-icon-google span {
    color: #4285F4 !important;
    fill: #4285F4 !important;
}

.card-link-icons-row .mud-icon-button.social-icon-website,
.card-link-icons-row .mud-icon-button.social-icon-website .mud-icon-root,
.card-link-icons-row .mud-icon-button.social-icon-website svg,
.card-link-icons-row .mud-icon-button.social-icon-website span {
    color: #00ACC1 !important;
    fill: #00ACC1 !important;
}

/* ── Queries Navigation Button & Dialog Styles ── */
.queries-header-btn {
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255, 153, 51, 0.45) !important;
    color: #FF9933 !important;
    background: rgba(255, 153, 51, 0.08) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-width: 34px !important;
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.queries-question-symbol {
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1;
    color: #FF9933;
}

.queries-header-btn:hover {
    background: rgba(255, 153, 51, 0.25) !important;
    border-color: #FF9933 !important;
    box-shadow: 0 0 8px rgba(255, 153, 51, 0.4);
    transform: scale(1.08);
}

.queries-home-btn {
    border-color: rgba(255, 153, 51, 0.5) !important;
    color: #FF9933 !important;
}

.queries-home-btn:hover {
    background: rgba(255, 153, 51, 0.12) !important;
}

.smart-queries-dialog .mud-dialog-title {
    padding: 16px 20px 8px !important;
}

.smart-queries-dialog .mud-dialog-content {
    padding: 12px 20px !important;
}

.smart-queries-dialog .mud-dialog-actions {
    padding: 12px 20px 16px !important;
}

@media (max-width: 600px) {
    .smart-queries-dialog {
        width: 96vw !important;
        max-width: 96vw !important;
        margin: 6px auto !important;
        border-radius: 14px !important;
    }
    .smart-queries-dialog .mud-dialog-title {
        padding: 12px 14px 6px !important;
    }
    .smart-queries-dialog .mud-dialog-content {
        padding: 8px 12px !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
    }
    .smart-queries-dialog .mud-dialog-actions {
        padding: 8px 12px 12px !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .smart-queries-dialog .mud-dialog-actions .mud-button-root {
        flex: 1 1 auto !important;
    }
}

/* ==========================================================================
   GLOBAL MULTI-DIRECTIONAL GRAPHICAL DATA LOADING & ENTRANCE ANIMATIONS
   Items dynamically flow into view from Left, Right, Top, or Bottom
   ========================================================================== */

@keyframes slideInLeft {
    0% {
        opacity: 0;
        transform: translate3d(-36px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translate3d(36px, 0, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInTop {
    0% {
        opacity: 0;
        transform: translate3d(0, -32px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes slideInBottom {
    0% {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUpSmooth {
    0% {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInDownSmooth {
    0% {
        opacity: 0;
        transform: translate3d(0, -22px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Explicit direction classes */
.anim-slide-left {
    animation: slideInLeft 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-slide-right {
    animation: slideInRight 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-slide-top {
    animation: slideInTop 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-slide-bottom {
    animation: slideInBottom 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-fade-up {
    animation: fadeInUpSmooth 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-fade-down {
    animation: fadeInDownSmooth 0.62s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Multi-directional Stagger Grids: automatically staggers items from Left, Top, Right, Bottom! */
.anim-stagger-grid > :nth-child(4n + 1) {
    animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-stagger-grid > :nth-child(4n + 2) {
    animation: slideInTop 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-stagger-grid > :nth-child(4n + 3) {
    animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-stagger-grid > :nth-child(4n + 4) {
    animation: slideInBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Two-column alternating: Left and Right */
.anim-stagger-alternating > :nth-child(odd) {
    animation: slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.anim-stagger-alternating > :nth-child(even) {
    animation: slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Stagger animation delays */
.anim-delay-1 { animation-delay: 0.08s; }
.anim-delay-2 { animation-delay: 0.16s; }
.anim-delay-3 { animation-delay: 0.24s; }
.anim-delay-4 { animation-delay: 0.32s; }
.anim-delay-5 { animation-delay: 0.40s; }
.anim-delay-6 { animation-delay: 0.48s; }
.anim-delay-7 { animation-delay: 0.56s; }
.anim-delay-8 { animation-delay: 0.64s; }






/* Public Safety & Community Notice (Compact & Auto-Disappearing) */
.smart-public-safety-banner {
    position: relative;
    margin: 1.5rem auto 1rem auto;
    width: min(92vw, 680px);
    z-index: 10;
    pointer-events: auto;
    animation: safetySlideUpFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.safety-banner-inner {
    background: rgba(15, 23, 42, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(59, 130, 246, 0.25);
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.06);
    border-radius: 9999px;
    padding: 6px 14px;
    color: #E2E8F0;
    font-size: 0.8rem;
    line-height: 1.3;
}

.safety-banner-text {
    font-size: 0.78rem;
    color: #CBD5E1;
}

.safety-banner-text strong {
    color: #60A5FA;
}

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

@media (max-width: 600px) {
    .smart-public-safety-banner {
        margin: 1rem auto 0.75rem auto;
        width: 94vw;
    }
    .safety-banner-inner {
        border-radius: 12px;
        padding: 6px 10px;
        font-size: 0.74rem;
    }
}

/* =========================================================================
   NOTIFICATION MAGICAL EXIT / WATER-DROP VAPORIZE / FOG-CLEARING DISSOLVE
   Ultra-high performance (GPU accelerated: transform, opacity, blur)
   Transforms sudden disappearance into an attractive, fluid vaporizing effect.
   ========================================================================= */

@keyframes notificationWaterVaporize {
    0% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.12)) blur(0px);
    }
    30% {
        opacity: 0.9;
        transform: scale(1.025) translateY(-2px);
        filter: drop-shadow(0 8px 22px rgba(37, 99, 235, 0.22)) blur(1px);
    }
    60% {
        opacity: 0.5;
        transform: scale(0.97) translateY(-8px);
        filter: drop-shadow(0 12px 28px rgba(37, 99, 235, 0.1)) blur(4px);
    }
    100% {
        opacity: 0;
        transform: scale(0.9) translateY(-18px);
        filter: drop-shadow(0 0 0 transparent) blur(12px);
        pointer-events: none;
    }
}

@keyframes fogClearingDissolve {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
    45% {
        opacity: 0.7;
        transform: translateY(-3px) scale(1.015);
        filter: blur(2px);
    }
    80% {
        opacity: 0.25;
        transform: translateY(-8px) scale(0.98);
        filter: blur(6px);
    }
    100% {
        opacity: 0;
        transform: translateY(-14px) scale(0.94);
        filter: blur(14px);
        pointer-events: none;
    }
}

/* Apply magical exit to MudBlazor Snackbars when hiding/leaving */
.mud-snackbar.mud-snackbar-leaving,
.mud-snackbar.mud-snackbar-animating.mud-snackbar-hiding,
.mud-snackbar-hiding,
.mud-snackbar-leaving {
    animation: notificationWaterVaporize 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform, opacity, filter;
}

/* Apply to custom toast/alert dissolving */
.notification-magical-exit,
.alert-dissolve-exit,
.toast-vaporize-exit {
    animation: notificationWaterVaporize 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    will-change: transform, opacity, filter;
}

/* Apply to public safety & cookie banner when dismissed */
.smart-public-safety-banner.dismissing,
.smart-public-safety-banner.fade-out {
    animation: fogClearingDissolve 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* Auto-scroll town notification pill exit */
.autoscroll-notify-pill.fade-out {
    animation: notificationWaterVaporize 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* ==========================================================================
   UNIVERSAL PREMIUM DIALOG SYSTEM - Crisp Borders, Depth & Clear Contrast
   ========================================================================== */
.mud-dialog {
    border-radius: 20px !important;
    border: 1.5px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 30px rgba(0, 0, 0, 0.5) !important;
    overflow: hidden !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
}

.mud-dialog-overlay {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(0, 0, 0, 0.72) !important;
}

.mud-dialog-title {
    padding: 12px 18px !important;
    border-bottom: 1.5px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.14)) !important;
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.mud-dialog-content {
    padding: 16px 20px !important;
    max-height: calc(85vh - 110px) !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.mud-dialog-actions {
    padding: 10px 18px !important;
    border-top: 1.5px solid var(--mud-palette-lines-default, rgba(255, 255, 255, 0.14)) !important;
    flex-shrink: 0 !important;
}

/* Dark mode dialog contrast accent */
.theme-dark .mud-dialog,
.black.theme-dark .mud-dialog,
.apple-dark.theme-dark .mud-dialog,
.twitter-dark.theme-dark .mud-dialog {
    background: #141816 !important;
    border: 1.5px solid rgba(59, 130, 246, 0.4) !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.88), 0 0 25px rgba(37, 99, 235, 0.22) !important;
}

/* Light mode dialog crisp border */
.theme-light .mud-dialog,
.whiteandwhite.theme-light .mud-dialog,
.facebook-theme.theme-light .mud-dialog {
    background: #ffffff !important;
    border: 1.5px solid rgba(0, 0, 0, 0.16) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

/* ==========================================================================
   NAVIGATION APP INSTALL & LOGIN BUTTON STYLING (Prominent & Clear)
   ========================================================================== */
.nav-install-app-wrap {
    margin: 8px 10px;
}

.nav-install-app-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1.5px solid rgba(56, 189, 248, 0.45);
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.14) 0%, rgba(37, 99, 235, 0.22) 100%);
    color: #38bdf8;
    cursor: pointer;
    text-align: left;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.18);
    position: relative;
    overflow: hidden;
}

.nav-install-app-btn:hover {
    background: linear-gradient(135deg, rgba(56, 189, 248, 0.24) 0%, rgba(37, 99, 235, 0.36) 100%);
    border-color: rgba(56, 189, 248, 0.8);
    transform: translateY(-1.5px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.3);
}

.nav-install-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(56, 189, 248, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #38bdf8;
}

.nav-install-text-box {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.nav-install-title {
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.25;
    color: #f8fafc;
}

.nav-install-subtitle {
    font-size: 0.68rem;
    color: #94a3b8;
    line-height: 1.2;
    margin-top: 2px;
}

.nav-install-arrow {
    color: #38bdf8;
    flex-shrink: 0;
}

/* Distinct Prominent Login Action Button */
.nav-login-btn-wrap {
    margin: 10px 10px;
}

.nav-login-cta-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    color: #ffffff !important;
    font-size: 0.88rem;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: 0.02em;
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.4);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.nav-login-cta-btn:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    box-shadow: 0 6px 22px rgba(37, 99, 235, 0.55);
    transform: translateY(-1.5px);
    color: #ffffff !important;
}

.nav-login-cta-btn svg {
    fill: #ffffff !important;
}

/* Town Page Santhe Strip Styling */
.town-santhe-strip {
    transition: all 0.2s ease;
}

.town-santhe-strip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}

/* Product & Specialty Search Chips on /Towns */
.specialty-chips-scroll {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    padding: 6px 2px;
    scrollbar-width: thin;
}

.specialty-chip-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.specialty-chip-btn:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: rgba(37, 99, 235, 0.4);
    color: #38bdf8;
    transform: translateY(-1px);
}

.specialty-chip-btn.active {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.3) 0%, rgba(16, 185, 129, 0.3) 100%);
    border-color: #38bdf8;
    color: #ffffff;
    box-shadow: 0 2px 10px rgba(56, 189, 248, 0.25);
}