/* /Components/BottomNav.razor.rz.scp.css */
/* ===========================
   BOTTOM NAV - FINAL IMPLEMENTATION
   =========================== */

.bottom-nav[b-0295hispgr] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(70px + env(safe-area-inset-bottom, 0px));
    background-color: var(--color-surface);
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: space-around;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.08);
    z-index: 1000;
    /* Fix for zoom issues */
    transform: translateZ(0); /* Force hardware acceleration */
    will-change: transform; /* Optimize for transforms */
    /* Ensure it sticks to the bottom on all devices */
    padding-bottom: env(safe-area-inset-bottom, 0);
    min-height: calc(70px + env(safe-area-inset-bottom, 0px));
}

/* Additional fix for iOS Safari zoom issues */
@supports (-webkit-touch-callout: none) {
    .bottom-nav[b-0295hispgr] {
        position: -webkit-sticky;
        position: sticky;
        bottom: 0;
        transform: translate3d(0, 0, 0); /* Force GPU acceleration on iOS */
    }
}

/* Fix for when viewport is resized due to zoom */
@media screen and (max-height: 500px) {
    .bottom-nav[b-0295hispgr] {
        position: fixed !important;
        bottom: 0 !important;
        transform: translateZ(0) !important;
    }
}

/* Ensure it works well on different screen orientations */
@media screen and (orientation: landscape) and (max-height: 500px) {
    .bottom-nav[b-0295hispgr] {
        height: calc(60px + env(safe-area-inset-bottom, 0px)); /* ADD: Include safe area */
        min-height: calc(60px + env(safe-area-inset-bottom, 0px)); /* ADD: Include safe area */
    }

    .nav-item .icon[b-0295hispgr],
    .nav-link .icon[b-0295hispgr] {
        width: 24px;
        height: 24px;
    }

    .nav-item .label[b-0295hispgr],
    .nav-link .label[b-0295hispgr] {
        font-size: 0.65rem;
    }
}

/* ----- BASE NAVIGATION STYLING ----- */
.bottom-nav a.nav-item[b-0295hispgr],
.bottom-nav a.nav-link[b-0295hispgr] {
    flex-grow: 1;
    height: 100%;
    padding-top: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease-in-out;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    text-decoration: none;
}

    /* Remove all browser default link styling */
    .bottom-nav a.nav-item[b-0295hispgr],
    .bottom-nav a.nav-item:link[b-0295hispgr],
    .bottom-nav a.nav-item:visited[b-0295hispgr],
    .bottom-nav a.nav-item:hover[b-0295hispgr],
    .bottom-nav a.nav-item:focus[b-0295hispgr],
    .bottom-nav a.nav-item:active[b-0295hispgr],
    .bottom-nav a.nav-link[b-0295hispgr],
    .bottom-nav a.nav-link:link[b-0295hispgr],
    .bottom-nav a.nav-link:visited[b-0295hispgr],
    .bottom-nav a.nav-link:hover[b-0295hispgr],
    .bottom-nav a.nav-link:focus[b-0295hispgr],
    .bottom-nav a.nav-link:active[b-0295hispgr] {
        text-decoration: none;
    }

        /* Focus ring for keyboard accessibility */
        .bottom-nav a.nav-item:focus-visible[b-0295hispgr],
        .bottom-nav a.nav-link:focus-visible[b-0295hispgr] {
            outline: 2px solid var(--color-accent);
            outline-offset: 2px;
        }

/* ===== LIGHT MODE COLORS ===== */

/* Inactive items in light mode - gray */
.bottom-nav a.nav-item[b-0295hispgr],
.bottom-nav a.nav-link[b-0295hispgr] {
    color: #86868b !important; /* Gray for inactive */
}

    /* Active items in light mode - blue */
    .bottom-nav a.nav-item.active[b-0295hispgr],
    .bottom-nav a.nav-link.active[b-0295hispgr],
    .bottom-nav a[aria-current="page"][b-0295hispgr] {
        color: #007aff !important; /* Blue for active */
        font-weight: 600 !important;
    }

/* ===== DARK MODE COLORS ===== */

/* Inactive items in dark mode - light gray (much more readable) */
:global(.dark) .bottom-nav a.nav-item[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link[b-0295hispgr] {
    color: #a0a0a0 !important; /* Light gray for inactive - readable */
}

    /* Active items in dark mode - bright white */
    :global(.dark) .bottom-nav a.nav-item.active[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link.active[b-0295hispgr],
    :global(.dark) .bottom-nav a[aria-current="page"][b-0295hispgr] {
        color: #ffffff !important; /* White for active */
        font-weight: 700 !important;
    }

    /* Override all link states in dark mode for inactive items */
    :global(.dark) .bottom-nav a.nav-item:link[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item:visited[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item:hover[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item:focus[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item:active[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link:link[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link:visited[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link:hover[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link:focus[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link:active[b-0295hispgr] {
        color: #a0a0a0 !important;
    }

    /* Override all link states in dark mode for active items */
    :global(.dark) .bottom-nav a.nav-item.active:link[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item.active:visited[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item.active:hover[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item.active:focus[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-item.active:active[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link.active:link[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link.active:visited[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link.active:hover[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link.active:focus[b-0295hispgr],
    :global(.dark) .bottom-nav a.nav-link.active:active[b-0295hispgr],
    :global(.dark) .bottom-nav a[aria-current="page"]:link[b-0295hispgr],
    :global(.dark) .bottom-nav a[aria-current="page"]:visited[b-0295hispgr],
    :global(.dark) .bottom-nav a[aria-current="page"]:hover[b-0295hispgr],
    :global(.dark) .bottom-nav a[aria-current="page"]:focus[b-0295hispgr],
    :global(.dark) .bottom-nav a[aria-current="page"]:active[b-0295hispgr] {
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* Circle background effect for dark mode active items */
    :global(.dark) .bottom-nav a.nav-item.active[b-0295hispgr]::before,
    :global(.dark) .bottom-nav a.nav-link.active[b-0295hispgr]::before,
    :global(.dark) .bottom-nav a[aria-current="page"][b-0295hispgr]::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 45px;
        height: 45px;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 50%;
        z-index: -1;
        pointer-events: none;
        transition: all 0.2s ease;
    }

/* ----- ICONS ----- */
.icon[b-0295hispgr] {
    width: 28px;
    height: 28px;
    position: relative;
    line-height: 0;
    color: inherit;
}

    .icon svg[b-0295hispgr] {
        width: 100%;
        height: 100%;
        position: absolute;
        inset: 0;
        color: inherit;
        fill: currentColor;
        stroke: currentColor;
    }

    /* Show outline icon by default, solid when active */
    .icon .icon-solid[b-0295hispgr] {
        display: none;
    }

    .icon .icon-outline[b-0295hispgr] {
        display: block;
    }

.nav-item.active .icon-solid[b-0295hispgr],
.nav-link.active .icon-solid[b-0295hispgr],
a[aria-current="page"] .icon-solid[b-0295hispgr] {
    display: block;
}

.nav-item.active .icon-outline[b-0295hispgr],
.nav-link.active .icon-outline[b-0295hispgr],
a[aria-current="page"] .icon-outline[b-0295hispgr] {
    display: none;
}

/* ----- LABELS ----- */
.nav-item .label[b-0295hispgr],
.nav-link .label[b-0295hispgr] {
    font-size: 0.7rem;
    margin-top: 4px;
    font-weight: 500;
    line-height: 1;
    color: inherit;
}

/* Bold labels for active items */
.nav-item.active .label[b-0295hispgr],
.nav-link.active .label[b-0295hispgr],
a[aria-current="page"] .label[b-0295hispgr] {
    font-weight: inherit; /* Inherit from parent (600 in light, 700 in dark) */
}

/* ===== ENSURE PROPER COLOR INHERITANCE ===== */

/* Light mode - labels and icons inherit colors */
.bottom-nav a.nav-item .label[b-0295hispgr],
.bottom-nav a.nav-link .label[b-0295hispgr] {
    color: #86868b !important;
}

.bottom-nav a.nav-item.active .label[b-0295hispgr],
.bottom-nav a.nav-link.active .label[b-0295hispgr],
.bottom-nav a[aria-current="page"] .label[b-0295hispgr] {
    color: #007aff !important;
    font-weight: 600 !important;
}

.bottom-nav a.nav-item .icon[b-0295hispgr],
.bottom-nav a.nav-item .icon *[b-0295hispgr],
.bottom-nav a.nav-link .icon[b-0295hispgr],
.bottom-nav a.nav-link .icon *[b-0295hispgr] {
    color: #86868b !important;
    fill: #86868b !important;
    stroke: #86868b !important;
}

.bottom-nav a.nav-item.active .icon[b-0295hispgr],
.bottom-nav a.nav-item.active .icon *[b-0295hispgr],
.bottom-nav a.nav-link.active .icon[b-0295hispgr],
.bottom-nav a.nav-link.active .icon *[b-0295hispgr],
.bottom-nav a[aria-current="page"] .icon[b-0295hispgr],
.bottom-nav a[aria-current="page"] .icon *[b-0295hispgr] {
    color: #007aff !important;
    fill: #007aff !important;
    stroke: #007aff !important;
}

/* Dark mode - labels and icons inherit colors */
:global(.dark) .bottom-nav a.nav-item .label[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link .label[b-0295hispgr] {
    color: #a0a0a0 !important;
}

:global(.dark) .bottom-nav a.nav-item.active .label[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link.active .label[b-0295hispgr],
:global(.dark) .bottom-nav a[aria-current="page"] .label[b-0295hispgr] {
    color: #ffffff !important;
    font-weight: 700 !important;
}

:global(.dark) .bottom-nav a.nav-item .icon[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-item .icon *[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link .icon[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link .icon *[b-0295hispgr] {
    color: #a0a0a0 !important;
    fill: #a0a0a0 !important;
    stroke: #a0a0a0 !important;
}

:global(.dark) .bottom-nav a.nav-item.active .icon[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-item.active .icon *[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link.active .icon[b-0295hispgr],
:global(.dark) .bottom-nav a.nav-link.active .icon *[b-0295hispgr],
:global(.dark) .bottom-nav a[aria-current="page"] .icon[b-0295hispgr],
:global(.dark) .bottom-nav a[aria-current="page"] .icon *[b-0295hispgr] {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}




/* ---------- ADMIN MENU (BottomNav) ---------- */

.bottom-nav .admin-menu[b-0295hispgr] {
    position: relative;
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.bottom-nav .admin-toggle[b-0295hispgr] {
    /* make the button look like your other nav items */
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    cursor: pointer;
    /* default (inactive) colors like other items */
    color: #86868b !important;
}

    /* icons inside the button should inherit color */
    .bottom-nav .admin-toggle .icon[b-0295hispgr],
    .bottom-nav .admin-toggle .icon *[b-0295hispgr] {
        color: inherit !important;
        fill: currentColor !important;
        stroke: currentColor !important;
    }

/* when menu is open, style like an active item */
.bottom-nav .admin-menu.open .admin-toggle[b-0295hispgr] {
    color: #007aff !important;
    font-weight: 600 !important;
}

/* dark mode colors */
:global(.dark) .bottom-nav .admin-toggle[b-0295hispgr] {
    color: #a0a0a0 !important;
}

:global(.dark) .bottom-nav .admin-menu.open .admin-toggle[b-0295hispgr] {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* the dropdown panel */
.bottom-nav .admin-dropdown[b-0295hispgr] {
    display: none; /* HIDE BY DEFAULT */
    position: absolute;
    bottom: calc(100% + 8px); /* sit above the bar */
    right: 8px;
    min-width: 200px;
    background: #ffffff;
    color: #212529;
    border: 1px solid rgba(0,0,0,0.08);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    border-radius: 10px;
    padding: 8px;
    z-index: 1001; /* above the bar */
}

/* show when open */
.bottom-nav .admin-menu.open .admin-dropdown[b-0295hispgr] {
    display: block;
}

/* dropdown items (links) */
.bottom-nav .admin-dropdown .dropdown-item[b-0295hispgr] {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    text-decoration: none;
    color: inherit !important;
    white-space: nowrap;
}

    .bottom-nav .admin-dropdown .dropdown-item:hover[b-0295hispgr] {
        background: #f1f3f5;
    }

/* dark mode dropdown */
:global(.dark) .bottom-nav .admin-dropdown[b-0295hispgr] {
    background: #1f1f1f;
    color: #f1f1f1;
    border-color: rgba(255,255,255,0.08);
}

    :global(.dark) .bottom-nav .admin-dropdown .dropdown-item:hover[b-0295hispgr] {
        background: rgba(255,255,255,0.08);
    }


/* Make the dropdown a vertical list when open */
.bottom-nav .admin-menu.open .admin-dropdown[b-0295hispgr] {
    display: flex; /* instead of block */
    flex-direction: column;
    gap: 6px; /* space between rows */
    width: 200px; /* or min-width: 200px; */
}

/* Ensure each item is a full-width row with good tap target */
.bottom-nav .admin-dropdown .dropdown-item[b-0295hispgr],
.bottom-nav .admin-dropdown .dropdown-item:link[b-0295hispgr],
.bottom-nav .admin-dropdown .dropdown-item:visited[b-0295hispgr],
.bottom-nav .admin-dropdown .dropdown-item:hover[b-0295hispgr],
.bottom-nav .admin-dropdown .dropdown-item:focus[b-0295hispgr],
.bottom-nav .admin-dropdown .dropdown-item:active[b-0295hispgr] {
    display: flex; /* force row layout */
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit !important; /* kill purple visited */
    white-space: nowrap; /* keep label on one line */
}

    .bottom-nav .admin-dropdown .dropdown-item:hover[b-0295hispgr] {
        background: #f1f3f5;
    }

:global(.dark) .bottom-nav .admin-dropdown .dropdown-item:hover[b-0295hispgr] {
    background: rgba(255,255,255,0.08);
}
/* /Components/Footer.razor.rz.scp.css */
/* Components/Footer.razor.css */

.app-footer[b-18qam81757] {
    margin-top: 4rem;
    padding: 2rem 0;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-background);
}

.footer-content[b-18qam81757] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

.footer-links[b-18qam81757] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.footer-link[b-18qam81757] {
    background: none;
    border: none;
    color: var(--color-secondary-text);
    font-size: 0.9rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 6px;
    transition: color 0.2s, background-color 0.2s;
    text-decoration: none;
}

    .footer-link:hover[b-18qam81757] {
        color: var(--color-accent);
        background-color: var(--color-surface);
    }

.footer-separator[b-18qam81757] {
    color: var(--color-border);
    font-size: 0.8rem;
    margin: 0 0.25rem;
}

.footer-copyright[b-18qam81757] {
    font-size: 0.8rem;
    color: var(--color-secondary-text);
    opacity: 0.8;
}

/* Modal Styles */
.modal-overlay[b-18qam81757] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    padding: 1rem;
    backdrop-filter: blur(5px);
}

.modal-content[b-18qam81757] {
    background: var(--color-surface);
    border-radius: 16px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn-b-18qam81757 0.3s ease-out;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.policy-modal[b-18qam81757] {
    max-width: 600px;
}

.contact-modal[b-18qam81757] {
    max-width: 500px;
}

@keyframes modalSlideIn-b-18qam81757 {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }

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

.modal-header[b-18qam81757] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

    .modal-header h2[b-18qam81757] {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

.modal-close[b-18qam81757] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-secondary-text);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

    .modal-close:hover[b-18qam81757] {
        background-color: var(--color-border);
    }

.modal-body[b-18qam81757] {
    padding: 1.5rem;
}

    .modal-body p[b-18qam81757] {
        line-height: 1.6;
        color: var(--color-primary-text);
        margin-bottom: 1rem;
    }

.modal-subtitle[b-18qam81757] {
    color: var(--color-secondary-text);
    font-size: 0.95rem;
    margin-bottom: 1.5rem !important;
}

.last-updated[b-18qam81757] {
    font-size: 0.85rem;
    color: var(--color-secondary-text);
    font-style: italic;
    margin-top: 1.5rem !important;
}

.modal-footer[b-18qam81757] {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: center;
}

/* Contact Form Styles */
.contact-form[b-18qam81757] {
    margin-top: 0;
}

.form-group[b-18qam81757] {
    margin-bottom: 1rem;
}

    .form-group label[b-18qam81757] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 600;
        color: var(--color-primary-text);
        font-size: 0.9rem;
    }

    .form-group input[b-18qam81757],
    .form-group select[b-18qam81757],
    .form-group textarea[b-18qam81757] {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-background);
        color: var(--color-primary-text);
        font-size: 0.95rem;
        transition: border-color 0.2s, box-shadow 0.2s;
        box-sizing: border-box;
        font-family: inherit;
    }

        .form-group input:focus[b-18qam81757],
        .form-group select:focus[b-18qam81757],
        .form-group textarea:focus[b-18qam81757] {
            outline: none;
            border-color: var(--color-accent);
            box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
        }

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

.contact-message[b-18qam81757] {
    padding: 0.75rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    font-weight: 500;
    font-size: 0.9rem;
}

    .contact-message.success[b-18qam81757] {
        background: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .contact-message.error[b-18qam81757] {
        background: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

.modal-form-actions[b-18qam81757] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-primary[b-18qam81757], .btn-secondary[b-18qam81757] {
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    flex: 1;
}

.btn-primary[b-18qam81757] {
    background: var(--color-accent);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-18qam81757] {
        opacity: 0.9;
    }

    .btn-primary:disabled[b-18qam81757] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-18qam81757] {
    background: var(--color-background);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-secondary:hover[b-18qam81757] {
        background: var(--color-border);
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .modal-overlay[b-18qam81757] {
        padding: 0.5rem;
    }

    .modal-header[b-18qam81757],
    .modal-body[b-18qam81757],
    .modal-footer[b-18qam81757] {
        padding: 1rem;
    }

    .footer-links[b-18qam81757] {
        flex-direction: column;
        gap: 0.75rem;
    }

    .footer-separator[b-18qam81757] {
        display: none;
    }
}

/* Dark mode adjustments */
html.dark .contact-message.success[b-18qam81757] {
    background: #1e4620;
    color: #a7d5a7;
    border-color: #2d5a2f;
}

html.dark .contact-message.error[b-18qam81757] {
    background: #4a1e1e;
    color: #f5b2b2;
    border-color: #6a2e2e;
}
/* /Components/LanguageDropdown.razor.rz.scp.css */
.lang-dropdown[b-hg0z3uvgrf] {
    position: relative;
    display: inline-block;
}

    .lang-dropdown .selected[b-hg0z3uvgrf] {
        padding: 8px;
        border-radius: 8px;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        color: var(--color-primary-text);
        /* our custom dropdown styling */
        display: flex;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        min-width: 120px;
    }

        .lang-dropdown .selected .flag[b-hg0z3uvgrf] {
            width: 1.25em;
            height: auto;
            display: block;
        }

    .lang-dropdown .arrow[b-hg0z3uvgrf] {
        margin-left: auto;
    }

    .lang-dropdown .options[b-hg0z3uvgrf] {
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        padding: 0;
        list-style: none;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        width: 100%;
        z-index: 10;
    }

    .lang-dropdown .option[b-hg0z3uvgrf] {
        /* reuse the same padding and colors for list items */
        padding: 8px;
        display: flex;
        align-items: center;
        gap: 0.5em;
        cursor: pointer;
        color: var(--color-primary-text);
    }

        .lang-dropdown .option:hover[b-hg0z3uvgrf] {
            background: var(--color-hover);
        }

        .lang-dropdown .option .flag[b-hg0z3uvgrf] {
            width: 1.25em;
            height: auto;
        }
/* /Components/LoginStatus.razor.rz.scp.css */
/* Components/LoginStatus.razor.css */

/* Container for when user IS logged in */
.login-status[b-sovlqokshw] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.user-email[b-sovlqokshw] {
    font-size: 0.9rem;
    color: var(--color-secondary-text);
}

/* The "Log Out" button */
.logout-button[b-sovlqokshw] {
    background: none;
    border: 1px solid var(--color-border);
    color: var(--color-secondary-text);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .logout-button:hover[b-sovlqokshw] {
        background-color: var(--color-border);
    }

/* The "Log In" button for guests */
.login-button[b-sovlqokshw] {
    background-color: var(--color-accent);
    color: white;
    text-decoration: none;
    border: none;
    padding: 6px 14px; /* Reduced from 8px 16px */
    border-radius: 8px;
    font-size: 0.85rem; /* Reduced from 0.9rem */
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
    line-height: 1.2; /* Added to control height better */
}

    .login-button:hover[b-sovlqokshw] {
        opacity: 0.8;
    }

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .login-button[b-sovlqokshw] {
        padding: 5px 12px; /* Even smaller on mobile */
        font-size: 0.8rem;
    }

    .logout-button[b-sovlqokshw] {
        padding: 5px 10px;
        font-size: 0.75rem;
    }

    .user-email[b-sovlqokshw] {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .login-button[b-sovlqokshw] {
        padding: 4px 10px; /* Smallest on very small screens */
        font-size: 0.75rem;
    }

    .logout-button[b-sovlqokshw] {
        padding: 4px 8px;
        font-size: 0.7rem;
    }
}
/* /Components/OfflineTours.razor.rz.scp.css */
/* Components/OfflineTours.razor.css */

.offline-tours-section[b-b10jfa13pb] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

    .offline-tours-section h3[b-b10jfa13pb] {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: 1rem;
        color: var(--color-primary-text);
    }

.offline-tours-grid[b-b10jfa13pb] {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.offline-tour-card[b-b10jfa13pb] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    width: 300px;
    max-width: 100%;
}

    .offline-tour-card:hover[b-b10jfa13pb] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.tour-image[b-b10jfa13pb] {
    width: 100%;
    height: 180px;
    background-size: cover;
    background-position: center;
    background-color: var(--color-border);
}

.tour-info[b-b10jfa13pb] {
    padding: 1rem;
}

    .tour-info h4[b-b10jfa13pb] {
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
        color: var(--color-primary-text);
        line-height: 1.3;
    }

.tour-meta[b-b10jfa13pb] {
    font-size: 0.85rem;
    color: var(--color-secondary-text);
    margin-bottom: 0.75rem;
}

.tour-description[b-b10jfa13pb] {
    font-size: 0.9rem;
    color: var(--color-secondary-text);
    line-height: 1.4;
    margin-bottom: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.offline-indicator[b-b10jfa13pb] {
    display: flex;
    justify-content: flex-start;
}

.offline-badge[b-b10jfa13pb] {
    background-color: var(--color-accent);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
}

.no-offline-tours[b-b10jfa13pb] {
    text-align: center;
    padding: 2rem;
    color: var(--color-secondary-text);
}

    .no-offline-tours p[b-b10jfa13pb] {
        margin: 0.5rem 0;
        line-height: 1.5;
    }

.help-text[b-b10jfa13pb] {
    font-size: 0.9rem;
    font-style: italic;
}

.loading-container[b-b10jfa13pb] {
    text-align: center;
    padding: 2rem;
}

    .loading-container p[b-b10jfa13pb] {
        color: var(--color-secondary-text);
        margin-top: 1rem;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .offline-tour-card[b-b10jfa13pb] {
        width: 100%;
        max-width: 350px;
    }

    .offline-tours-grid[b-b10jfa13pb] {
        flex-direction: column;
        align-items: center;
    }
}
/* /Components/PageHeader.razor.rz.scp.css */
.page-header[b-lfrmnck8sf] {
    margin-bottom: 1.5rem;
}

.page-title[b-lfrmnck8sf] {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-primary-text);
}

@media (max-width: 768px) {
    .page-title[b-lfrmnck8sf] {
        font-size: 1.75rem;
    }
}

@media (max-width: 480px) {
    .page-title[b-lfrmnck8sf] {
        font-size: 1.5rem;
    }

    .page-header[b-lfrmnck8sf] {
        margin-bottom: 1rem;
    }
}
/* /Components/PwaInstallPrompt.razor.rz.scp.css */
/* Components/PwaInstallPrompt.razor.css */

.pwa-install-prompt[b-2nrqn80gp1] {
    position: fixed;
    bottom: 90px; /* Above bottom navigation */
    left: 1rem;
    right: 1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    z-index: 1500;
    animation: slideUpIn-b-2nrqn80gp1 0.3s ease-out;
    backdrop-filter: blur(10px);
}

@keyframes slideUpIn-b-2nrqn80gp1 {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

.install-prompt-content[b-2nrqn80gp1] {
    padding: 1rem;
}

.prompt-header[b-2nrqn80gp1] {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.prompt-icon[b-2nrqn80gp1] {
    font-size: 2rem;
    flex-shrink: 0;
    line-height: 1;
}

.prompt-text[b-2nrqn80gp1] {
    flex: 1;
    min-width: 0;
}

    .prompt-text h3[b-2nrqn80gp1] {
        margin: 0 0 0.25rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

    .prompt-text p[b-2nrqn80gp1] {
        margin: 0;
        font-size: 0.9rem;
        color: var(--color-secondary-text);
        line-height: 1.4;
    }

.prompt-close[b-2nrqn80gp1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-secondary-text);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s;
}

    .prompt-close:hover[b-2nrqn80gp1] {
        background-color: var(--color-border);
    }

.prompt-actions[b-2nrqn80gp1] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-install-primary[b-2nrqn80gp1],
.btn-install-secondary[b-2nrqn80gp1] {
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    flex: 1;
    min-width: 0;
}

.btn-install-primary[b-2nrqn80gp1] {
    background: var(--color-accent);
    color: white;
}

    .btn-install-primary:hover[b-2nrqn80gp1] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

.btn-install-secondary[b-2nrqn80gp1] {
    background: var(--color-background);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-install-secondary:hover[b-2nrqn80gp1] {
        background: var(--color-border);
    }

/* Modal Styles */
.pwa-install-modal[b-2nrqn80gp1] {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 1rem;
    backdrop-filter: blur(5px);
}

.install-modal-content[b-2nrqn80gp1] {
    background: var(--color-surface);
    border-radius: 16px;
    max-width: 500px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    animation: modalSlideIn-b-2nrqn80gp1 0.3s ease-out;
}

@keyframes modalSlideIn-b-2nrqn80gp1 {
    from {
        transform: scale(0.9) translateY(20px);
        opacity: 0;
    }

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

.modal-header[b-2nrqn80gp1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 0 1.5rem;
}

    .modal-header h3[b-2nrqn80gp1] {
        margin: 0;
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

.modal-close[b-2nrqn80gp1] {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--color-secondary-text);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

    .modal-close:hover[b-2nrqn80gp1] {
        background-color: var(--color-border);
    }

.modal-body[b-2nrqn80gp1] {
    padding: 1.5rem;
}

.platform-info[b-2nrqn80gp1] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--color-background);
    border-radius: 12px;
    margin-bottom: 1.5rem;
}

.platform-icon[b-2nrqn80gp1] {
    font-size: 1.5rem;
}

.instruction-steps[b-2nrqn80gp1] {
    margin-bottom: 1.5rem;
}

    .instruction-steps h4[b-2nrqn80gp1] {
        margin: 0 0 0.75rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

    .instruction-steps ol[b-2nrqn80gp1] {
        margin: 0;
        padding-left: 1.25rem;
        color: var(--color-primary-text);
    }

        .instruction-steps ol li[b-2nrqn80gp1] {
            margin-bottom: 0.5rem;
            line-height: 1.5;
        }

.install-benefits[b-2nrqn80gp1] {
    background: var(--color-background);
    padding: 1rem;
    border-radius: 12px;
}

    .install-benefits h4[b-2nrqn80gp1] {
        margin: 0 0 0.75rem 0;
        font-size: 1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

    .install-benefits ul[b-2nrqn80gp1] {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .install-benefits ul li[b-2nrqn80gp1] {
            margin-bottom: 0.5rem;
            color: var(--color-primary-text);
            line-height: 1.5;
        }

.modal-actions[b-2nrqn80gp1] {
    padding: 0 1.5rem 1.5rem 1.5rem;
}

    .modal-actions .btn-install-primary[b-2nrqn80gp1] {
        width: 100%;
        flex: none;
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .pwa-install-prompt[b-2nrqn80gp1] {
        left: 0.5rem;
        right: 0.5rem;
        bottom: 80px;
    }

    .install-prompt-content[b-2nrqn80gp1] {
        padding: 0.75rem;
    }

    .prompt-actions[b-2nrqn80gp1] {
        flex-direction: column;
    }

    .btn-install-primary[b-2nrqn80gp1],
    .btn-install-secondary[b-2nrqn80gp1] {
        flex: none;
    }

    .modal-header[b-2nrqn80gp1],
    .modal-body[b-2nrqn80gp1],
    .modal-actions[b-2nrqn80gp1] {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Dark mode adjustments */
html.dark .pwa-install-prompt[b-2nrqn80gp1] {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .pwa-install-modal[b-2nrqn80gp1] {
    background: rgba(0, 0, 0, 0.8);
}

/* Hide prompt when running as PWA */
@media (display-mode: standalone) {
    .pwa-install-prompt[b-2nrqn80gp1] {
        display: none !important;
    }
}

/* iOS standalone detection */
@media (display-mode: standalone) {
    .pwa-install-prompt[b-2nrqn80gp1] {
        display: none !important;
    }
}

/* Additional check for iOS fullscreen */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        .pwa-install-prompt[b-2nrqn80gp1] {
            display: none !important;
        }
    }
}
/* /Components/ShareButton.razor.rz.scp.css */
/* Components/ShareButton.razor.css */

.btn-share[b-bl4wn83chp] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.75rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 0.75rem;
    height: fit-content;
    white-space: nowrap;
}

    .btn-share svg[b-bl4wn83chp] {
        width: 14px;
        height: 14px;
        flex-shrink: 0;
    }

    .btn-share:hover:not(:disabled)[b-bl4wn83chp] {
        background: var(--color-accent-hover, var(--color-accent));
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        opacity: 0.9;
    }

    .btn-share:disabled[b-bl4wn83chp] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
    }

.loading-spinner-small[b-bl4wn83chp] {
    width: 12px;
    height: 12px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-bl4wn83chp 1s linear infinite;
}

/* Make sure it fits well in the tour meta area */
.tour-meta-info .btn-share[b-bl4wn83chp] {
    margin-left: 0.5rem;
    vertical-align: middle;
}


.share-menu-overlay[b-bl4wn83chp] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.share-menu[b-bl4wn83chp] {
    background: var(--color-surface);
    border-radius: 16px;
    padding: 1.5rem;
    min-width: 280px;
    max-width: 400px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border);
}

    .share-menu h4[b-bl4wn83chp] {
        margin: 0 0 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

.share-option[b-bl4wn83chp] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem;
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: var(--color-primary-text);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s ease;
}

    .share-option:hover[b-bl4wn83chp] {
        background: var(--color-background);
        transform: translateX(4px);
    }

    .share-option:last-child[b-bl4wn83chp] {
        margin-bottom: 0;
    }

    .share-option svg[b-bl4wn83chp] {
        flex-shrink: 0;
        opacity: 0.8;
    }

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

/* Dark mode adjustments */
:global(.dark) .share-menu[b-bl4wn83chp] {
    background: var(--color-surface-dark, #2a2a2a);
    border-color: var(--color-border-dark, #444);
}

:global(.dark) .share-option:hover[b-bl4wn83chp] {
    background: var(--color-background-dark, #1a1a1a);
}

/* Mobile responsiveness  */
@media (max-width: 768px) {
    .btn-share[b-bl4wn83chp] {
        /*padding: 0.35rem 0.6rem;*/
        font-size: 0.7rem;
        gap: 0.25rem;
    }

        .btn-share svg[b-bl4wn83chp] {
            width: 12px;
            height: 12px;
        }

    .share-menu[b-bl4wn83chp] {
        margin: 1rem;
        width: calc(100% - 2rem);
        min-width: unset;
    }

    .loading-spinner-small[b-bl4wn83chp] {
        width: 10px;
        height: 10px;
    }
}
/* /Components/ShareLive.razor.rz.scp.css */

.share-live-container[b-62heqz8oj0] {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
}

.btn-share-live[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    justify-content: center;
    gap: 0.5rem; /* Added proper gap */
}

    /* FIX: Constrain SVG size in share button */
    .btn-share-live svg[b-62heqz8oj0] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

    .btn-share-live:hover[b-62heqz8oj0] {
        background-color: color-mix(in srgb, var(--color-accent) 90%, black);
    }

    .btn-share-live:disabled[b-62heqz8oj0] {
        opacity: 0.5;
        cursor: not-allowed;
    }

.subscription-required[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background-color: color-mix(in srgb, orange 10%, transparent);
    border-radius: 0.5rem;
}

    /* FIX: Constrain SVG size in subscription required */
    .subscription-required svg[b-62heqz8oj0] {
        width: 1rem;
        height: 1rem;
        flex-shrink: 0;
    }

.live-session-active[b-62heqz8oj0] {
    background-color: var(--color-surface-variant);
    border-radius: 0.5rem;
    padding: 0.75rem;
    border: 1px solid var(--color-border);
}

.host-controls[b-62heqz8oj0], .participant-controls[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.session-info[b-62heqz8oj0] {
    flex: 1;
}

.session-header[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

    /* FIX: Constrain SVG size in session header */
    .session-header svg[b-62heqz8oj0] {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
    }

.session-code[b-62heqz8oj0] {
    background-color: var(--color-border);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: monospace;
    font-size: 0.75rem;
}

.participants-count[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-secondary-text);
    font-size: 0.75rem;
}

.host-actions[b-62heqz8oj0] {
    display: flex;
    gap: 0.5rem;
}

.btn-share-link[b-62heqz8oj0], .btn-end-session[b-62heqz8oj0] {
    padding: 0.5rem;
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* FIX: Constrain SVG size in action buttons */
    .btn-share-link svg[b-62heqz8oj0], .btn-end-session svg[b-62heqz8oj0] {
        width: 1rem;
        height: 1rem;
    }

.btn-share-link[b-62heqz8oj0] {
    background-color: color-mix(in srgb, blue 15%, transparent);
    color: var(--color-accent);
}

.btn-end-session[b-62heqz8oj0] {
    background-color: color-mix(in srgb, red 15%, transparent);
    color: #dc2626;
}

.btn-leave-session[b-62heqz8oj0] {
    padding: 0.375rem 0.75rem;
    background-color: color-mix(in srgb, red 15%, transparent);
    color: #dc2626;
    border: none;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    cursor: pointer;
}

.participant-info[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    /* FIX: Constrain SVG size in participant info */
    .participant-info svg[b-62heqz8oj0] {
        width: 0.875rem;
        height: 0.875rem;
        flex-shrink: 0;
    }

/* Spinner styling */
.spinner-sm[b-62heqz8oj0] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-62heqz8oj0 1s linear infinite;
}

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

/* Modal styles for when they appear */
.modal-overlay[b-62heqz8oj0] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    z-index: 9999;
}

.modal-content[b-62heqz8oj0] {
    background-color: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    max-width: 24rem;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.modal-header[b-62heqz8oj0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    border-bottom: 1px solid var(--color-border);
}

    .modal-header h3[b-62heqz8oj0] {
        font-size: 1.125rem;
        font-weight: 600;
        margin: 0;
        color: var(--color-primary-text);
    }

.btn-close[b-62heqz8oj0] {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--color-secondary-text);
    padding: 0;
    line-height: 1;
}

.modal-body[b-62heqz8oj0] {
    padding: 1rem;
}

.modal-footer[b-62heqz8oj0] {
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
    padding: 1rem;
    border-top: 1px solid var(--color-border);
}

.form-group[b-62heqz8oj0] {
    margin-bottom: 1rem;
}

.form-label[b-62heqz8oj0] {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--color-primary-text);
    font-size: 0.875rem;
}

.form-select[b-62heqz8oj0] {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
    background-color: var(--color-surface);
    color: var(--color-primary-text);
    font-size: 0.875rem;
}

.btn-primary[b-62heqz8oj0] {
    padding: 0.5rem 1rem;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 0.375rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.btn-secondary[b-62heqz8oj0] {
    padding: 0.5rem 1rem;
    background-color: var(--color-border);
    color: var(--color-primary-text);
    border: none;
    border-radius: 0.375rem;
    cursor: pointer;
    font-size: 0.875rem;
}

.error-message[b-62heqz8oj0] {
    padding: 0.75rem;
    background-color: color-mix(in srgb, red 10%, transparent);
    border: 1px solid color-mix(in srgb, red 30%, transparent);
    border-radius: 0.375rem;
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}
/* /Components/Spinner.razor.rz.scp.css */
.spinner-container[b-uuf8qif4xt] {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 3rem;
}

.spinner[b-uuf8qif4xt] {
    border: 5px solid var(--color-border); /* Light gray track */
    border-top: 5px solid var(--color-accent); /* Blue spinner color */
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin-b-uuf8qif4xt 1s linear infinite;
}

@keyframes spin-b-uuf8qif4xt {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* /Components/ThemeToggle.razor.rz.scp.css */
.theme-toggle-button[b-8r4vrc1ug9] {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    padding: 0.5rem;
    line-height: 1;
    border-radius: 50%;
}

    .theme-toggle-button:hover[b-8r4vrc1ug9] {
        background-color: rgba(128, 128, 128, 0.1);
    }
/* /Components/TourCard.razor.rz.scp.css */
/* Components/TourCard.razor.css */

.tour-card[b-fvjrp74jta] {
    background: var(--color-surface);
    border-radius: 18px;
    margin-top: 1rem;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: transform 0.2s ease-in-out;
    /* Constrain the card's width */
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

    .tour-card:hover[b-fvjrp74jta] {
        transform: translateY(-5px);
    }

.card-image[b-fvjrp74jta] {
    width: 100%;
    height: 180px;
    background-size: cover; /* 'cover' is better for this design */
    background-position: center;
}

.card-info[b-fvjrp74jta] {
    padding: 16px;
}

.card-title[b-fvjrp74jta] {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--color-primary-text);
}

.card-teaser[b-fvjrp74jta] {
    font-size: 0.9rem;
    color: var(--color-secondary-text);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-meta[b-fvjrp74jta] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-secondary-text);
    display: flex;
    gap: 6px;
}
/* /Components/TourPlayer.razor.rz.scp.css */
/* Components/TourPlayer.razor.css */
.player-overlay[b-jtuu6o5wug] {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column-reverse; /* Aligns player to the bottom */
    z-index: 2000;
    backdrop-filter: blur(5px);
}

.player-card[b-jtuu6o5wug] {
    background-color: var(--color-surface);
    color: var(--color-primary-text);
    border-radius: 20px 20px 0 0;
    padding: 1.5rem;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.2);
    animation: slide-up-b-jtuu6o5wug 0.3s ease-out;
}

.player-header[b-jtuu6o5wug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.current-stop-title[b-jtuu6o5wug] {
    font-size: 1.2rem;
    font-weight: 600;
}

.close-button[b-jtuu6o5wug] {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--color-secondary-text);
    cursor: pointer;
    line-height: 1;
}



/* ═══════════════════════════════════════════
   ENHANCED PROGRESS BAR STYLES
   ═══════════════════════════════════════════ */

.player-progress[b-jtuu6o5wug] {
    width: 100%;
    height: 8px; /* Increased from 6px for better touch */
    background-color: var(--color-border);
    border-radius: 4px;
    margin-bottom: 1rem;
    cursor: pointer;
    position: relative;
    transition: height 0.2s ease;
    overflow: visible; /* Allow seek preview to show */
}

    .player-progress:hover[b-jtuu6o5wug] {
        height: 10px; /* Slightly larger on hover */
    }

    .player-progress.dragging[b-jtuu6o5wug] {
        height: 12px; /* Even larger when dragging */
        cursor: grabbing;
    }

.progress-bar[b-jtuu6o5wug] {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 80%, white));
    border-radius: 4px;
    position: relative;
    transition: all 0.1s ease;
}

    .progress-bar[b-jtuu6o5wug]::after {
        content: '';
        position: absolute;
        right: -6px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        background: var(--color-accent);
        border: 2px solid white;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        opacity: 0;
        transition: all 0.2s ease;
    }

.player-progress:hover .progress-bar[b-jtuu6o5wug]::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

.player-progress.dragging .progress-bar[b-jtuu6o5wug]::after {
    opacity: 1;
    transform: translateY(-50%) scale(1.3);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

/* Seek preview tooltip */
.seek-preview[b-jtuu6o5wug] {
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

    .seek-preview[b-jtuu6o5wug]::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: rgba(0, 0, 0, 0.9);
    }




.player-controls[b-jtuu6o5wug] {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
}



/* ═══════════════════════════════════════════
   IMPROVED CONTROL BUTTONS
   ═══════════════════════════════════════════ */

.control-button[b-jtuu6o5wug] {
    background: none;
    border: none;
    font-size: 1.8rem;
    color: var(--color-primary-text);
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 50%;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .control-button:hover:not(:disabled)[b-jtuu6o5wug] {
        transform: scale(1.1);
        background-color: rgba(var(--color-accent-rgb, 0, 123, 255), 0.1);
    }

    .control-button:active:not(:disabled)[b-jtuu6o5wug] {
        transform: scale(0.95);
        background-color: rgba(var(--color-accent-rgb, 0, 123, 255), 0.2);
    }

    .control-button:disabled[b-jtuu6o5wug] {
        opacity: 0.3;
        cursor: not-allowed;
        transform: none;
    }

.play-pause[b-jtuu6o5wug] {
    font-size: 3rem;
    background-color: var(--color-accent);
    color: white;
    border-radius: 50%;
    width: 70px;
    height: 70px;
    box-shadow: 0 4px 12px rgba(var(--color-accent-rgb, 0, 123, 255), 0.3);
    transition: all 0.2s ease;
}

    .play-pause:hover[b-jtuu6o5wug] {
        transform: scale(1.05);
        box-shadow: 0 6px 16px rgba(var(--color-accent-rgb, 0, 123, 255), 0.4);
    }

    .play-pause:active[b-jtuu6o5wug] {
        transform: scale(0.95);
        box-shadow: 0 2px 8px rgba(var(--color-accent-rgb, 0, 123, 255), 0.5);
    }



/* ═══════════════════════════════════════════
   LOADING AND INTERACTIVE STATES
   ═══════════════════════════════════════════ */

.control-button.loading[b-jtuu6o5wug] {
    pointer-events: none;
    position: relative;
    overflow: hidden;
}

    .control-button.loading[b-jtuu6o5wug]::after {
        content: '';
        position: absolute;
        inset: 0;
        background: conic-gradient(from 0deg, transparent, var(--color-accent), transparent);
        border-radius: inherit;
        animation: spin-b-jtuu6o5wug 1s linear infinite;
        opacity: 0.7;
    }

@keyframes spin-b-jtuu6o5wug {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Animation for the player sliding up from the bottom */
@keyframes slide-up-b-jtuu6o5wug {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}


.permission-denied-message[b-jtuu6o5wug] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}

    .permission-denied-message p[b-jtuu6o5wug] {
        margin: 0;
        line-height: 1.5;
    }

        .permission-denied-message p:first-child[b-jtuu6o5wug] {
            margin-bottom: 0.5rem;
        }


.time-display[b-jtuu6o5wug] {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: var(--color-secondary-text);
    margin-top: -0.5rem;
    margin-bottom: 1rem;
}

.extra-controls[b-jtuu6o5wug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    padding: 0 0.5rem;
}




/* ═══════════════════════════════════════════
   ENHANCED VOLUME CONTROL STYLES
   ═══════════════════════════════════════════ */

.volume-control[b-jtuu6o5wug] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-grow: 1;
    margin-left: 1.5rem;
}

    .volume-control span[b-jtuu6o5wug] {
        font-size: 1.2rem;
        cursor: pointer;
        transition: all 0.2s ease;
        user-select: none;
        padding: 4px;
        border-radius: 4px;
    }

        .volume-control span:hover[b-jtuu6o5wug] {
            transform: scale(1.1);
            background-color: var(--color-border);
        }

        .volume-control span:active[b-jtuu6o5wug] {
            transform: scale(0.95);
        }

        /* Mute icon styling */
        .volume-control span.mute-icon[b-jtuu6o5wug] {
            color: var(--color-secondary-text);
        }

            .volume-control span.mute-icon:hover[b-jtuu6o5wug] {
                color: var(--color-primary-text);
            }

        /* Max volume icon styling */
        .volume-control span.max-volume-icon[b-jtuu6o5wug] {
            color: var(--color-secondary-text);
        }

            .volume-control span.max-volume-icon:hover[b-jtuu6o5wug] {
                color: var(--color-accent);
            }

    /* Main volume slider styling */
    .volume-control input[type="range"][b-jtuu6o5wug] {
        -webkit-appearance: none;
        appearance: none;
        width: 100%;
        height: 6px;
        cursor: pointer;
        background: var(--color-border);
        border-radius: 3px;
        outline: none;
        transition: all 0.2s ease;
        border: none;
        margin: 0;
        padding: 0;
        position: relative;
    }

        .volume-control input[type="range"]:hover[b-jtuu6o5wug] {
            transform: scaleY(1.2);
        }

        .volume-control input[type="range"]:active[b-jtuu6o5wug],
        .volume-control input[type="range"].dragging[b-jtuu6o5wug] {
            transform: scaleY(1.4);
        }

        /* Webkit browsers (Chrome, Safari, Edge) - FIXED THUMB */
        .volume-control input[type="range"][b-jtuu6o5wug]::-webkit-slider-track {
            width: 100%;
            height: 6px;
            cursor: pointer;
            background: var(--color-border);
            border-radius: 3px;
            border: none;
        }

        /* Webkit browsers (Chrome, Safari, Edge) - HIDE THUMB */
        .volume-control input[type="range"][b-jtuu6o5wug]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            height: 0;
            width: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            opacity: 0;
        }


        /* Firefox - FIXED THUMB */
        .volume-control input[type="range"][b-jtuu6o5wug]::-moz-range-track {
            width: 100%;
            height: 6px;
            cursor: pointer;
            background: var(--color-border);
            border-radius: 3px;
            border: none;
        }

        /* Firefox - HIDE THUMB */
        .volume-control input[type="range"][b-jtuu6o5wug]::-moz-range-thumb {
            appearance: none;
            height: 0;
            width: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            opacity: 0;
        }


        /* Edge Legacy */
        .volume-control input[type="range"][b-jtuu6o5wug]::-ms-track {
            width: 100%;
            height: 6px;
            cursor: pointer;
            background: transparent;
            border-color: transparent;
            color: transparent;
        }

        .volume-control input[type="range"][b-jtuu6o5wug]::-ms-fill-lower {
            background: var(--color-accent);
            border-radius: 3px;
        }

        .volume-control input[type="range"][b-jtuu6o5wug]::-ms-fill-upper {
            background: var(--color-border);
            border-radius: 3px;
        }

        /* Edge Legacy - HIDE THUMB */
        .volume-control input[type="range"][b-jtuu6o5wug]::-ms-thumb {
            appearance: none;
            height: 0;
            width: 0;
            background: transparent;
            border: none;
            cursor: pointer;
            opacity: 0;
        }

        /* Dragging state */
        .volume-control input[type="range"].dragging[b-jtuu6o5wug] {
            cursor: grabbing;
        }




/* Tracklist Styles */
.tracklist[b-jtuu6o5wug] {
    padding-bottom: 1rem;
}

.tracklist-header[b-jtuu6o5wug] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

    .tracklist-header h4[b-jtuu6o5wug] {
        margin: 0;
        font-size: 1.2rem;
    }

.tracklist ul[b-jtuu6o5wug] {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 150px;
    overflow-y: auto;
}

.tracklist li[b-jtuu6o5wug] {
    padding: 0.75rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    cursor: pointer;
    border-radius: 8px;
}

    .tracklist li:hover[b-jtuu6o5wug] {
        background-color: var(--color-background);
    }

    .tracklist li.active[b-jtuu6o5wug] {
        color: var(--color-accent);
        font-weight: 600;
    }

.player-map-container[b-jtuu6o5wug] {
    /* Default height for mobile */
    height: 200px;
    width: 100%;
    border-radius: 12px;
    margin-top: 1rem;
}


/* Mobile / tablet responsive fixes */

@media (min-width: 768px) {
    .player-map-container[b-jtuu6o5wug] {
        /* Make it taller on larger screens */
        height: 300px;
    }
}

@media (max-width: 768px) {
    .player-card[b-jtuu6o5wug] {
        padding: 1rem; /* Reduced from 1.5rem */
    }

    .player-controls[b-jtuu6o5wug] {
        gap: 1.5rem; /* Reduced from 2rem */
    }

    .tracklist-header h4[b-jtuu6o5wug] {
        font-size: 1rem; /* Reduced from 1.2rem */
    }

    .current-stop-title[b-jtuu6o5wug] {
        font-size: 1rem; /* Reduced from 1.2rem */
        line-height: 1.3;
    }

    .tracklist[b-jtuu6o5wug] {
        padding-bottom: 0.5rem; /* Reduced from 1rem */
    }

    .player-progress[b-jtuu6o5wug] {
        height: 10px; /* Larger touch target on mobile */
    }

        .player-progress:hover[b-jtuu6o5wug] {
            height: 12px;
        }

    .volume-control[b-jtuu6o5wug] {
        gap: 0.5rem;
        margin-left: 1rem;
    }

        .volume-control span[b-jtuu6o5wug] {
            font-size: 1.1rem;
        }

    .control-button[b-jtuu6o5wug] {
        font-size: 1.5rem;
        padding: 0.4rem;
    }

    .play-pause[b-jtuu6o5wug] {
        font-size: 2.5rem;
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 480px) {
    .player-card[b-jtuu6o5wug] {
        padding: 0.75rem; /* Further reduced for very small screens */
    }

    .player-controls[b-jtuu6o5wug] {
        gap: 1rem;
    }

    .current-stop-title[b-jtuu6o5wug] {
        font-size: 0.9rem;
    }

    .tracklist-header h4[b-jtuu6o5wug] {
        font-size: 0.9rem;
    }

    .player-progress[b-jtuu6o5wug] {
        height: 12px; /* Even larger on very small screens */
        margin-bottom: 0.75rem;
    }

    .volume-control[b-jtuu6o5wug] {
        gap: 0.4rem;
        margin-left: 0.75rem;
    }

        .volume-control span[b-jtuu6o5wug] {
            font-size: 1rem;
            padding: 2px;
        }

    .control-button[b-jtuu6o5wug] {
        font-size: 1.3rem;
        padding: 0.3rem;
    }

    .play-pause[b-jtuu6o5wug] {
        font-size: 2.2rem;
        width: 55px;
        height: 55px;
    }
}


/* ═══════════════════════════════════════════
   DARK MODE ENHANCEMENTS
   ═══════════════════════════════════════════ */

html.dark .player-progress[b-jtuu6o5wug] {
    background-color: rgba(255, 255, 255, 0.1);
}

html.dark .progress-bar[b-jtuu6o5wug] {
    background: linear-gradient(90deg, var(--color-accent), color-mix(in srgb, var(--color-accent) 70%, white));
}

html.dark .seek-preview[b-jtuu6o5wug] {
    background: rgba(255, 255, 255, 0.95);
    color: black;
}

    html.dark .seek-preview[b-jtuu6o5wug]::after {
        border-top-color: rgba(255, 255, 255, 0.95);
    }

html.dark .volume-control span:hover[b-jtuu6o5wug] {
    background-color: rgba(255, 255, 255, 0.1);
}

html.dark .control-button:hover:not(:disabled)[b-jtuu6o5wug] {
    background-color: rgba(255, 255, 255, 0.1);
}

html.dark .volume-control input[type="range"][b-jtuu6o5wug]::-webkit-slider-track {
    background: rgba(255, 255, 255, 0.2);
}

html.dark .volume-control input[type="range"][b-jtuu6o5wug]::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
}

html.dark .volume-control input[type="range"][b-jtuu6o5wug]::-ms-fill-upper {
    background: rgba(255, 255, 255, 0.2);
}

/* ═══════════════════════════════════════════
   ACCESSIBILITY IMPROVEMENTS
   ═══════════════════════════════════════════ */

.player-progress:focus-within[b-jtuu6o5wug] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.volume-control input[type="range"]:focus[b-jtuu6o5wug] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.control-button:focus[b-jtuu6o5wug] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .player-progress[b-jtuu6o5wug] {
        border: 1px solid currentColor;
    }

    .progress-bar[b-jtuu6o5wug] {
        background: var(--color-accent);
    }

    .control-button[b-jtuu6o5wug] {
        border: 1px solid currentColor;
    }
}
/* /Pages/Account/Login.razor.rz.scp.css */
/* Pages/Account/Login.razor.css */

.auth-page[b-slg7wjdr68] {
    min-height: calc(100vh - 160px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

.auth-container[b-slg7wjdr68] {
    width: 100%;
    max-width: 400px;
    background: var(--color-surface);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    /* Remove the max-height and overflow that caused double scrolling */
}

/* On mobile/small screens, adjust the page layout */
@media (max-height: 700px) {
    .auth-page[b-slg7wjdr68] {
        min-height: auto;
        align-items: flex-start;
        padding: 0.5rem;
        padding-top: 1rem;
    }

    .auth-container[b-slg7wjdr68] {
        padding: 1rem;
    }

    .auth-header h1[b-slg7wjdr68] {
        font-size: 1.25rem;
    }

    .form-group[b-slg7wjdr68] {
        margin-bottom: 0.75rem;
    }

    .auth-tabs[b-slg7wjdr68] {
        margin-bottom: 1rem;
    }

    .divider[b-slg7wjdr68] {
        margin: 0.75rem 0;
    }
}

/* On very small screens */
@media (max-height: 600px) {
    .auth-page[b-slg7wjdr68] {
        padding: 0.25rem;
        padding-top: 0.5rem;
    }

    .auth-container[b-slg7wjdr68] {
        padding: 0.75rem;
        border-radius: 12px;
    }
}

.auth-header[b-slg7wjdr68] {
    text-align: center;
    margin-bottom: 1.5rem;
}

    .auth-header h1[b-slg7wjdr68] {
        font-size: 1.5rem;
        font-weight: 700;
        margin-bottom: 0.25rem;
        color: var(--color-primary-text);
    }

    .auth-header p[b-slg7wjdr68] {
        color: var(--color-secondary-text);
        font-size: 0.85rem;
        margin: 0;
    }

.alert[b-slg7wjdr68] {
    padding: 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.alert-error[b-slg7wjdr68] {
    background-color: #fee;
    border: 1px solid #fcc;
    color: #c33;
}

.alert-success[b-slg7wjdr68] {
    background-color: #efe;
    border: 1px solid #cfc;
    color: #363;
}

.auth-tabs[b-slg7wjdr68] {
    display: flex;
    margin-bottom: 1.5rem;
    border-radius: 8px;
    background: var(--color-background);
    padding: 4px;
}

.tab-button[b-slg7wjdr68] {
    flex: 1;
    padding: 0.625rem;
    border: none;
    background: transparent;
    color: var(--color-secondary-text);
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

    .tab-button.active[b-slg7wjdr68] {
        background: var(--color-surface);
        color: var(--color-primary-text);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

.auth-form[b-slg7wjdr68] {
    margin-bottom: 1rem;
}

.form-group[b-slg7wjdr68] {
    margin-bottom: 1rem;
}

    .form-group label[b-slg7wjdr68] {
        display: block;
        margin-bottom: 0.5rem;
        font-weight: 500;
        color: var(--color-primary-text);
        font-size: 0.9rem;
    }

    .form-group input[b-slg7wjdr68] {
        width: 100%;
        padding: 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-background);
        color: var(--color-primary-text);
        font-size: 1rem;
        transition: border-color 0.2s;
        box-sizing: border-box;
    }

        .form-group input:focus[b-slg7wjdr68] {
            outline: none;
            border-color: var(--color-accent);
        }

.btn-primary[b-slg7wjdr68] {
    width: 100%;
    padding: 0.875rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .btn-primary:hover:not(:disabled)[b-slg7wjdr68] {
        opacity: 0.9;
    }

    .btn-primary:disabled[b-slg7wjdr68] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-secondary[b-slg7wjdr68] {
    padding: 0.875rem 1.5rem;
    background: var(--color-background);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s;
}

    .btn-secondary:hover:not(:disabled)[b-slg7wjdr68] {
        background: var(--color-border);
    }

.forgot-password[b-slg7wjdr68] {
    text-align: center;
    margin-bottom: 1.5rem;
}

.link-button[b-slg7wjdr68] {
    background: none;
    border: none;
    color: var(--color-accent);
    cursor: pointer;
    font-size: 0.9rem;
    text-decoration: underline;
}

    .link-button:hover[b-slg7wjdr68] {
        opacity: 0.8;
    }

.divider[b-slg7wjdr68] {
    text-align: center;
    margin: 1.5rem 0;
    position: relative;
    display: flex;
    align-items: center;
}

    .divider[b-slg7wjdr68]::before {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--color-border);
    }

    .divider[b-slg7wjdr68]::after {
        content: '';
        flex: 1;
        height: 1px;
        background: var(--color-border);
    }

    .divider span[b-slg7wjdr68] {
        padding: 0 1rem;
        color: var(--color-secondary-text);
        font-size: 0.9rem;
        white-space: nowrap;
        background: var(--color-surface);
    }

.social-auth[b-slg7wjdr68] {
    margin-bottom: 1rem;
}

.btn-google[b-slg7wjdr68] {
    width: 100%;
    padding: 0.875rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    color: var(--color-primary-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
}

    .btn-google:hover:not(:disabled)[b-slg7wjdr68] {
        background: var(--color-background);
    }

    .btn-google:disabled[b-slg7wjdr68] {
        opacity: 0.6;
        cursor: not-allowed;
    }

    .btn-google img[b-slg7wjdr68] {
        width: 20px;
        height: 20px;
    }

.forgot-password-form[b-slg7wjdr68] {
    background: var(--color-background);
    border-radius: 8px;
    padding: 1.5rem;
    margin-top: 1.5rem;
    border: 1px solid var(--color-border);
}

    .forgot-password-form h3[b-slg7wjdr68] {
        margin: 0 0 1rem 0;
        font-size: 1.1rem;
        color: var(--color-primary-text);
    }

.forgot-password-actions[b-slg7wjdr68] {
    display: flex;
    gap: 1rem;
    margin-top: 1rem;
}

    .forgot-password-actions button[b-slg7wjdr68] {
        flex: 1;
    }

/* Dark mode adjustments */
html.dark .alert-error[b-slg7wjdr68] {
    background-color: #422;
    border-color: #644;
    color: #fbb;
}

html.dark .alert-success[b-slg7wjdr68] {
    background-color: #242;
    border-color: #464;
    color: #bfb;
}
/* /Pages/Account/Manage/Manage.razor.rz.scp.css */
/* Pages/Account/Manage/Manage.razor.css - Complete Clean Version */

.account-page[b-9d84ls7x59] {
    max-width: 800px;
    margin: 0 auto;
    padding-bottom: 2rem;
}

.account-content[b-9d84ls7x59] {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.version[b-9d84ls7x59] {
    font-size: 10px;
    color: gray;
    margin-top: -20px;
    margin-left: 5px;
}

/* Account Sections */
.account-section[b-9d84ls7x59] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .account-section h2[b-9d84ls7x59] {
        margin: 0 0 1rem 0;
        font-size: 1.3rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

/* Profile Section */
.profile-info[b-9d84ls7x59] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.profile-detail[b-9d84ls7x59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--color-border);
}

    .profile-detail:last-child[b-9d84ls7x59] {
        border-bottom: none;
    }

    .profile-detail strong[b-9d84ls7x59] {
        color: var(--color-primary-text);
        font-weight: 500;
    }

    .profile-detail span[b-9d84ls7x59] {
        color: var(--color-secondary-text);
    }

/* Access Status Section */
.access-status[b-9d84ls7x59] {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 12px;
    margin-bottom: 0.5rem;
}

    .access-status.promo-active[b-9d84ls7x59] {
        background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
        border: 1px solid #90ee90;
    }

    .access-status.has-access[b-9d84ls7x59] {
        background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%);
        border: 1px solid var(--color-accent);
    }

    .access-status.no-access[b-9d84ls7x59] {
        background: linear-gradient(135deg, #fff8e1 0%, #fffde7 100%);
        border: 1px solid #ffc107;
    }

/* Dark mode access status */
html.dark .access-status.promo-active[b-9d84ls7x59] {
    background: linear-gradient(135deg, #1a3d1a 0%, #0f2f0f 100%);
    border-color: #228b22;
}

html.dark .access-status.has-access[b-9d84ls7x59] {
    background: linear-gradient(135deg, #0d2438 0%, #051829 100%);
    border-color: var(--color-accent);
}

html.dark .access-status.no-access[b-9d84ls7x59] {
    background: linear-gradient(135deg, #2d2416 0%, #1f1a0f 100%);
    border-color: #ff9800;
}

.status-icon[b-9d84ls7x59] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.status-content[b-9d84ls7x59] {
    flex: 1;
    min-width: 0;
}

    .status-content h3[b-9d84ls7x59] {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

    .status-content p[b-9d84ls7x59] {
        margin: 0;
        color: var(--color-secondary-text);
        line-height: 1.4;
    }

.btn-upgrade[b-9d84ls7x59] {
    margin-top: 0.75rem;
    padding: 0.5rem 1rem;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s;
}

    .btn-upgrade:hover[b-9d84ls7x59] {
        opacity: 0.9;
    }

/* Subscription Section */
.subscription-info[b-9d84ls7x59] {
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

    .subscription-info.active[b-9d84ls7x59] {
        background: linear-gradient(135deg, #e8f5e8 0%, #f0f9f0 100%);
        border-color: #4caf50;
    }

    .subscription-info.inactive[b-9d84ls7x59] {
        background: var(--color-background);
        text-align: center;
    }

html.dark .subscription-info.active[b-9d84ls7x59] {
    background: linear-gradient(135deg, #1a3d1a 0%, #0f2f0f 100%);
    border-color: #4caf50;
}

.subscription-details h3[b-9d84ls7x59] {
    margin: 0 0 1rem 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary-text);
}

.subscription-meta[b-9d84ls7x59] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.meta-item[b-9d84ls7x59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
}

    .meta-item strong[b-9d84ls7x59] {
        color: var(--color-primary-text);
    }

    .meta-item span[b-9d84ls7x59] {
        color: var(--color-secondary-text);
    }

.text-warning[b-9d84ls7x59] {
    color: #ff9800 !important;
    font-weight: 600;
}

.subscription-benefits[b-9d84ls7x59] {
    font-size: 0.9rem;
    color: var(--color-secondary-text);
    margin-bottom: 1rem;
}

/* Enhanced Downloaded Tour Section */
.downloaded-tour-info[b-9d84ls7x59] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--color-background);
    border-radius: 16px;
    border: 1px solid var(--color-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.tour-info[b-9d84ls7x59] {
    flex: 1;
    min-width: 0;
}

    .tour-info h4[b-9d84ls7x59] {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

.download-meta[b-9d84ls7x59] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.9rem;
    color: var(--color-secondary-text);
}

    .download-meta span[b-9d84ls7x59] {
        display: block;
    }

/* Tour Actions Layout */
.tour-actions[b-9d84ls7x59] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* Enhanced Button Styles */
.btn-primary[b-9d84ls7x59], .btn-secondary[b-9d84ls7x59], .btn-view[b-9d84ls7x59], .btn-remove[b-9d84ls7x59] {
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 120px;
}

.btn-primary[b-9d84ls7x59] {
    background: var(--color-accent);
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-9d84ls7x59] {
        background: var(--color-accent-hover, var(--color-accent));
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-secondary[b-9d84ls7x59] {
    background: var(--color-background);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-secondary:hover:not(:disabled)[b-9d84ls7x59] {
        background: var(--color-surface);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-view[b-9d84ls7x59] {
    background: var(--color-accent);
    color: white;
}

    .btn-view:hover:not(:disabled)[b-9d84ls7x59] {
        background: var(--color-accent-hover, var(--color-accent));
        opacity: 0.9;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }

.btn-remove[b-9d84ls7x59] {
    background: #ff4757;
    color: white;
}

    .btn-remove:hover:not(:disabled)[b-9d84ls7x59] {
        background: #ff3742;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
    }

    .btn-remove:disabled[b-9d84ls7x59] {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* No Content States */
.no-downloads[b-9d84ls7x59], .no-purchases[b-9d84ls7x59] {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--color-secondary-text);
}

    .no-downloads p[b-9d84ls7x59], .no-purchases p[b-9d84ls7x59] {
        margin-bottom: 1.5rem;
        font-size: 1rem;
        line-height: 1.5;
    }

/* Purchase Item Enhancements */
.purchases-list[b-9d84ls7x59] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.purchase-item[b-9d84ls7x59] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem;
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

    .purchase-item:hover[b-9d84ls7x59] {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }

.purchase-info[b-9d84ls7x59] {
    flex: 1;
    min-width: 0;
}

    .purchase-info h4[b-9d84ls7x59] {
        margin: 0 0 0.5rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

.purchase-details[b-9d84ls7x59] {
    display: flex;
    gap: 1rem;
    font-size: 0.9rem;
    color: var(--color-secondary-text);
}

.purchase-price[b-9d84ls7x59] {
    font-weight: 600;
    color: var(--color-accent);
}

/* Processing Overlay */
.processing-overlay[b-9d84ls7x59] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.processing-content[b-9d84ls7x59] {
    background: var(--color-surface);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

    .processing-content p[b-9d84ls7x59] {
        margin-top: 1rem;
        color: var(--color-primary-text);
        font-weight: 500;
    }

/* Mobile Responsive Design */
@media (max-width: 768px) {
    .account-page[b-9d84ls7x59] {
        padding-bottom: 1rem;
    }

    .account-content[b-9d84ls7x59] {
        gap: 1.5rem;
    }

    .account-section[b-9d84ls7x59] {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .tour-actions[b-9d84ls7x59] {
        flex-direction: column;
    }

    .btn-view[b-9d84ls7x59], .btn-remove[b-9d84ls7x59], .btn-primary[b-9d84ls7x59], .btn-secondary[b-9d84ls7x59] {
        width: 100%;
        min-width: auto;
    }

    .purchase-item[b-9d84ls7x59] {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .purchase-details[b-9d84ls7x59] {
        justify-content: space-between;
    }

    .downloaded-tour-info[b-9d84ls7x59] {
        flex-direction: column;
        gap: 1.5rem;
    }

    .tour-actions[b-9d84ls7x59] {
        align-self: stretch;
    }

    .access-status[b-9d84ls7x59] {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .status-icon[b-9d84ls7x59] {
        align-self: center;
    }

    .no-downloads[b-9d84ls7x59], .no-purchases[b-9d84ls7x59] {
        padding: 2rem 1rem;
    }
}
/* /Pages/Account/ResetPassword.razor.rz.scp.css */
/* Import the same base styles as Login.razor.css */
.auth-page[b-nu9fphx489] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: var(--color-background);
}

.auth-container[b-nu9fphx489] {
    background: var(--color-surface);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-border);
}

.auth-header[b-nu9fphx489] {
    text-align: center;
    margin-bottom: 2rem;
}

    .auth-header h1[b-nu9fphx489] {
        font-size: 1.75rem;
        font-weight: 700;
        color: var(--color-primary-text);
        margin: 0 0 0.5rem 0;
    }

    .auth-header p[b-nu9fphx489] {
        color: var(--color-secondary-text);
        margin: 0;
        font-size: 0.95rem;
    }

.alert[b-nu9fphx489] {
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
}

.alert-error[b-nu9fphx489] {
    background-color: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
}

.alert-success[b-nu9fphx489] {
    background-color: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #16a34a;
}

.auth-form[b-nu9fphx489] {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.form-group[b-nu9fphx489] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

    .form-group label[b-nu9fphx489] {
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

    .form-group input[b-nu9fphx489] {
        padding: 0.875rem 1rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        font-size: 1rem;
        background: var(--color-background);
        color: var(--color-primary-text);
        transition: border-color 0.2s, box-shadow 0.2s;
    }

        .form-group input:focus[b-nu9fphx489] {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1);
        }

        .form-group input:invalid[b-nu9fphx489] {
            border-color: #f87171;
        }

.btn-primary[b-nu9fphx489] {
    width: 100%;
    padding: 0.875rem;
    background: var(--color-accent, #3b82f6); /* Use accent color with fallback */
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s, opacity 0.2s;
    margin-top: 0.5rem;
}

    .btn-primary:hover:not(:disabled)[b-nu9fphx489] {
        background: var(--color-accent-hover, #2563eb); /* Use accent hover with fallback */
        transform: translateY(-1px);
    }

    .btn-primary:active:not(:disabled)[b-nu9fphx489] {
        transform: translateY(0);
        background: var(--color-accent-active, #1d4ed8); /* Use accent active with fallback */
    }

    .btn-primary:disabled[b-nu9fphx489] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none;
        background: var(--color-accent, #3b82f6); /* Keep original background when disabled */
    }

/* Dark mode specific fixes */
html.dark .btn-primary[b-nu9fphx489] {
    background: var(--color-accent, #3b82f6);
    color: white;
}

    html.dark .btn-primary:hover:not(:disabled)[b-nu9fphx489] {
        background: var(--color-accent-hover, #2563eb);
    }

    html.dark .btn-primary:active:not(:disabled)[b-nu9fphx489] {
        background: var(--color-accent-active, #1d4ed8);
    }

    html.dark .btn-primary:disabled[b-nu9fphx489] {
        background: var(--color-accent, #3b82f6);
        opacity: 0.6;
    }

.success-actions[b-nu9fphx489] {
    margin-top: 2rem;
    text-align: center;
}

    .success-actions button[b-nu9fphx489] {
        padding: 0.875rem 2rem;
        font-size: 1rem;
        font-weight: 600;
        background: var(--color-accent, #3b82f6);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        transition: background-color 0.2s, transform 0.1s;
    }

        .success-actions button:hover[b-nu9fphx489] {
            background: var(--color-accent-hover, #2563eb);
            transform: translateY(-1px);
        }

        .success-actions button:active[b-nu9fphx489] {
            transform: translateY(0);
        }

/* Dark mode success button */
html.dark .success-actions button[b-nu9fphx489] {
    background: var(--color-accent, #3b82f6);
    color: white;
}

    html.dark .success-actions button:hover[b-nu9fphx489] {
        background: var(--color-accent-hover, #2563eb);
    }

/* Dark mode adjustments */
html.dark .alert-error[b-nu9fphx489] {
    background-color: #422;
    border-color: #644;
    color: #fbb;
}

html.dark .alert-success[b-nu9fphx489] {
    background-color: #242;
    border-color: #464;
    color: #bfb;
}

/* Mobile responsiveness */
@media (max-width: 480px) {
    .auth-page[b-nu9fphx489] {
        padding: 0.75rem;
    }

    .auth-container[b-nu9fphx489] {
        padding: 1.5rem;
    }

    .auth-header h1[b-nu9fphx489] {
        font-size: 1.5rem;
    }
}

/* Loading state */
.btn-primary:disabled[b-nu9fphx489] {
    position: relative;
}

    .btn-primary:disabled[b-nu9fphx489]::after {
        content: '';
        position: absolute;
        width: 16px;
        height: 16px;
        margin: auto;
        border: 2px solid transparent;
        border-top-color: currentColor;
        border-radius: 50%;
        animation: spin-b-nu9fphx489 1s linear infinite;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

@keyframes spin-b-nu9fphx489 {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}
/* /Pages/Admin/Analytics/Dashboard.razor.rz.scp.css */
/* Pages/Admin/Analytics/Dashboard.razor.css */

.analytics-dashboard[b-6v9wh4d955] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.dashboard-header[b-6v9wh4d955] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

    .dashboard-header h1[b-6v9wh4d955] {
        margin: 0;
        color: var(--color-primary-text);
        font-size: 1.75rem;
        font-weight: 700;
    }

.date-controls[b-6v9wh4d955] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

    .date-controls input[b-6v9wh4d955] {
        padding: 0.5rem;
        border: 1px solid var(--color-border);
        border-radius: 6px;
        background: var(--color-surface);
        color: var(--color-primary-text);
        font-size: 0.9rem;
    }

    .date-controls span[b-6v9wh4d955] {
        color: var(--color-secondary-text);
        font-weight: 500;
    }

.metrics-grid[b-6v9wh4d955] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.metric-card[b-6v9wh4d955] {
    background: var(--color-surface);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .metric-card:hover[b-6v9wh4d955] {
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    .metric-card h3[b-6v9wh4d955] {
        margin: 0 0 0.75rem 0;
        color: var(--color-secondary-text);
        font-size: 0.85rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-weight: 600;
    }

.metric-value[b-6v9wh4d955] {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--color-primary-text);
    line-height: 1;
}

.error-metric .metric-value[b-6v9wh4d955] {
    color: #e74c3c;
}

.charts-container[b-6v9wh4d955] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.chart-section[b-6v9wh4d955] {
    background: var(--color-surface);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-border);
}

    .chart-section h3[b-6v9wh4d955] {
        margin: 0 0 1.25rem 0;
        color: var(--color-primary-text);
        font-size: 1.1rem;
        font-weight: 600;
    }

.chart-placeholder[b-6v9wh4d955] {
    min-height: 200px;
}

.events-list[b-6v9wh4d955],
.pages-list[b-6v9wh4d955],
.searches-list[b-6v9wh4d955] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.event-item[b-6v9wh4d955],
.page-item[b-6v9wh4d955],
.search-item[b-6v9wh4d955] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--color-background);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}

    .event-item:hover[b-6v9wh4d955],
    .page-item:hover[b-6v9wh4d955],
    .search-item:hover[b-6v9wh4d955] {
        background: var(--color-hover);
    }

.event-name[b-6v9wh4d955],
.page-name[b-6v9wh4d955],
.search-term[b-6v9wh4d955] {
    flex: 1;
    font-weight: 500;
    color: var(--color-primary-text);
    word-break: break-word;
}

.event-count[b-6v9wh4d955],
.page-views[b-6v9wh4d955],
.search-count[b-6v9wh4d955] {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

.loading-container[b-6v9wh4d955],
.error-container[b-6v9wh4d955] {
    text-align: center;
    padding: 4rem 2rem;
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
}

    .loading-container p[b-6v9wh4d955],
    .error-container p[b-6v9wh4d955] {
        margin: 0.75rem 0 0 0;
        color: var(--color-secondary-text);
        font-size: 1rem;
    }

    .error-container h3[b-6v9wh4d955] {
        margin: 0 0 0.5rem 0;
        color: var(--color-primary-text);
        font-size: 1.25rem;
    }

.spinner[b-6v9wh4d955] {
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-border);
    border-top: 4px solid var(--color-primary);
    border-radius: 50%;
    animation: spin-b-6v9wh4d955 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin-b-6v9wh4d955 {
    0% {
        transform: rotate(0deg);
    }

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

.btn[b-6v9wh4d955] {
    padding: 0.75rem 1.25rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 600;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-6v9wh4d955] {
    background: var(--color-primary);
    color: white;
}

    .btn-primary:hover[b-6v9wh4d955] {
        background: var(--color-primary-dark, #02122a);
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(3, 23, 61, 0.3);
    }

    .btn-primary:active[b-6v9wh4d955] {
        transform: translateY(0);
    }

/* Responsive design */
@media (max-width: 768px) {
    .analytics-dashboard[b-6v9wh4d955] {
        padding: 1rem;
    }

    .dashboard-header[b-6v9wh4d955] {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

        .dashboard-header h1[b-6v9wh4d955] {
            font-size: 1.5rem;
        }

    .date-controls[b-6v9wh4d955] {
        justify-content: center;
        flex-wrap: wrap;
    }

    .metrics-grid[b-6v9wh4d955] {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 0.75rem;
    }

    .metric-card[b-6v9wh4d955] {
        padding: 1rem;
    }

    .metric-value[b-6v9wh4d955] {
        font-size: 1.75rem;
    }

    .charts-container[b-6v9wh4d955] {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .chart-section[b-6v9wh4d955] {
        padding: 1rem;
    }

    .event-item[b-6v9wh4d955],
    .page-item[b-6v9wh4d955],
    .search-item[b-6v9wh4d955] {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .event-count[b-6v9wh4d955],
    .page-views[b-6v9wh4d955],
    .search-count[b-6v9wh4d955] {
        margin-left: 0;
        font-size: 0.8rem;
    }

    .loading-container[b-6v9wh4d955],
    .error-container[b-6v9wh4d955] {
        padding: 2rem 1rem;
    }
}

@media (max-width: 480px) {
    .analytics-dashboard[b-6v9wh4d955] {
        padding: 0.5rem;
    }

    .dashboard-header h1[b-6v9wh4d955] {
        font-size: 1.25rem;
    }

    .date-controls[b-6v9wh4d955] {
        flex-direction: column;
        gap: 0.75rem;
    }

        .date-controls input[b-6v9wh4d955] {
            width: 100%;
            max-width: 200px;
        }

    .metrics-grid[b-6v9wh4d955] {
        grid-template-columns: 1fr 1fr;
    }

    .metric-card[b-6v9wh4d955] {
        padding: 0.75rem;
    }

    .metric-value[b-6v9wh4d955] {
        font-size: 1.5rem;
    }
}

/* Dark mode enhancements */
@media (prefers-color-scheme: dark) {
    .metric-card[b-6v9wh4d955],
    .chart-section[b-6v9wh4d955] {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }

        .metric-card:hover[b-6v9wh4d955],
        .chart-section:hover[b-6v9wh4d955] {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .metric-card[b-6v9wh4d955],
    .chart-section[b-6v9wh4d955],
    .event-item[b-6v9wh4d955],
    .page-item[b-6v9wh4d955],
    .search-item[b-6v9wh4d955] {
        border-width: 2px;
    }

    .btn-primary[b-6v9wh4d955] {
        border: 2px solid currentColor;
    }
}

.tours-list[b-6v9wh4d955] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.tour-item[b-6v9wh4d955] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--color-background);
    border-radius: 8px;
    border: 1px solid var(--color-border);
    transition: background-color 0.2s ease;
}

    .tour-item:hover[b-6v9wh4d955] {
        background: var(--color-hover);
    }

.tour-name[b-6v9wh4d955] {
    flex: 1;
    font-weight: 500;
    color: var(--color-primary-text);
    word-break: break-word;
}

.tour-interactions[b-6v9wh4d955] {
    font-weight: 700;
    color: var(--color-primary);
    font-size: 0.9rem;
    margin-left: 1rem;
    flex-shrink: 0;
}

.no-data[b-6v9wh4d955] {
    text-align: center;
    color: var(--color-secondary-text);
    font-style: italic;
    padding: 2rem;
    margin: 0;
}

/* Update responsive styles for tour items */
@media (max-width: 768px) {
    .tour-item[b-6v9wh4d955] {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .tour-interactions[b-6v9wh4d955] {
        margin-left: 0;
        font-size: 0.8rem;
    }
}
/* /Pages/Admin/TourDeletion.razor.rz.scp.css */
.admin-container[b-j0b1z64dt4] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    color: #212529;
}

.admin-header[b-j0b1z64dt4] {
    text-align: center;
    margin-bottom: 30px;
}

    .admin-header h1[b-j0b1z64dt4] {
        color: #dc3545;
        margin-bottom: 10px;
    }

.warning-text[b-j0b1z64dt4] {
    color: #856404;
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 8px;
    padding: 15px;
    font-size: 16px;
}

.error-banner[b-j0b1z64dt4] {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.success-banner[b-j0b1z64dt4] {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.deletion-workflow[b-j0b1z64dt4] {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.step-section[b-j0b1z64dt4] {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 25px;
    background: #f8f9fa;
}

.danger-section[b-j0b1z64dt4] {
    border-color: #dc3545;
    background: #fff5f5;
}

.results-section[b-j0b1z64dt4] {
    border-color: #28a745;
    background: #f8fff8;
}

.step-section h2[b-j0b1z64dt4] {
    margin-top: 0;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
    padding-bottom: 10px;
}

.filters[b-j0b1z64dt4] {
    display: flex;
    gap: 15px;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.search-input[b-j0b1z64dt4] {
    flex: 1;
    min-width: 250px;
    padding: 10px 15px;
    border: 2px solid #dee2e6;
    border-radius: 8px;
    font-size: 16px;
}

.selection-count[b-j0b1z64dt4] {
    font-weight: 600;
    color: #495057;
    font-size: 14px;
}

.tours-selection-grid[b-j0b1z64dt4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 20px;
}

.tour-selection-card[b-j0b1z64dt4] {
    border: 2px solid #dee2e6;
    border-radius: 12px;
    padding: 15px;
    background: white;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    transition: all 0.3s ease;
}

    .tour-selection-card:hover[b-j0b1z64dt4] {
        border-color: #007bff;
        box-shadow: 0 4px 12px rgba(0,123,255,0.15);
    }

    .tour-selection-card.selected[b-j0b1z64dt4] {
        border-color: #28a745;
        background-color: #f8fff8;
        box-shadow: 0 4px 12px rgba(40,167,69,0.15);
    }

.selection-checkbox[b-j0b1z64dt4] {
    flex-shrink: 0;
    margin-top: 5px;
    z-index: 10;
    position: relative;
}

    .selection-checkbox input[type="checkbox"][b-j0b1z64dt4] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

.tour-selection-card img[b-j0b1z64dt4] {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    flex-shrink: 0;
}

.tour-clickable-area[b-j0b1z64dt4] {
    flex: 1;
    display: flex;
    gap: 15px;
    align-items: flex-start;
    cursor: pointer;
}

    .tour-clickable-area img[b-j0b1z64dt4] {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 8px;
        flex-shrink: 0;
    }

.tour-info[b-j0b1z64dt4] {
    flex: 1;
}

    .tour-info h3[b-j0b1z64dt4] {
        margin: 0 0 5px 0;
        font-size: 14px;
        color: #6c757d;
        font-weight: 600;
    }

    .tour-info h4[b-j0b1z64dt4] {
        margin: 0 0 8px 0;
        font-size: 16px;
        font-weight: 600;
        color: #212529;
    }

    .tour-info p[b-j0b1z64dt4] {
        margin: 2px 0;
        font-size: 14px;
        color: #495057;
    }

.tour-status[b-j0b1z64dt4] {
    font-weight: 600;
}

.deletion-preview[b-j0b1z64dt4] {
    background: white;
    border: 2px solid #17a2b8;
    border-radius: 12px;
    padding: 20px;
    margin-top: 15px;
    color: #212529;
}

.preview-stats[b-j0b1z64dt4] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-bottom: 20px;
    color: #212529;
}

.stat-item[b-j0b1z64dt4] {
    background: #e7f3ff;
    padding: 12px;
    border-radius: 8px;
    text-align: center;
    font-size: 16px;
    color: #212529;
}

.tours-to-delete ul[b-j0b1z64dt4] {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 8px;
    list-style-type: none;
    margin: 0;
}

.tours-to-delete li[b-j0b1z64dt4] {
    padding: 5px 0;
    color: #212529;
    border-bottom: 1px solid #dee2e6;
}

    .tours-to-delete li:last-child[b-j0b1z64dt4] {
        border-bottom: none;
    }

.confirmation-area[b-j0b1z64dt4] {
    background: white;
    border: 2px solid #dc3545;
    border-radius: 12px;
    padding: 20px;
}

.confirmation-checkbox[b-j0b1z64dt4] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
}

    .confirmation-checkbox input[b-j0b1z64dt4] {
        margin-top: 2px;
        width: 20px;
        height: 20px;
    }

    .confirmation-checkbox span[b-j0b1z64dt4] {
        font-size: 16px;
        font-weight: 500;
        color: #721c24;
    }

.deletion-actions[b-j0b1z64dt4] {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.btn[b-j0b1z64dt4] {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

    .btn:disabled[b-j0b1z64dt4] {
        opacity: 0.6;
        cursor: not-allowed;
    }

.btn-primary[b-j0b1z64dt4] {
    background-color: #007bff;
    color: white;
}

    .btn-primary:hover:not(:disabled)[b-j0b1z64dt4] {
        background-color: #0056b3;
    }

.btn-secondary[b-j0b1z64dt4] {
    background-color: #6c757d;
    color: white;
}

    .btn-secondary:hover:not(:disabled)[b-j0b1z64dt4] {
        background-color: #545b62;
    }

.btn-danger[b-j0b1z64dt4] {
    background-color: #dc3545;
    color: white;
    font-size: 18px;
    padding: 15px 30px;
}

    .btn-danger:hover:not(:disabled)[b-j0b1z64dt4] {
        background-color: #c82333;
    }

.result-summary[b-j0b1z64dt4] {
    background: white;
    border: 1px solid #c3e6cb;
    color: #212529;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

    .result-summary p[b-j0b1z64dt4] {
        margin: 5px 0;
        font-size: 16px;
    }

.deleted-tours-list[b-j0b1z64dt4] {
    background: white;
    border: 1px solid #c3e6cb;
    color: #212529;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 15px;
}

    .deleted-tours-list ul[b-j0b1z64dt4] {
        list-style-type: none;
        padding: 0;
        margin: 10px 0 0 0;
    }

    .deleted-tours-list li[b-j0b1z64dt4] {
        padding: 5px 0;
        border-bottom: 1px solid #dee2e6;
    }

        .deleted-tours-list li:last-child[b-j0b1z64dt4] {
            border-bottom: none;
        }

.result-message[b-j0b1z64dt4] {
    font-size: 18px;
    font-weight: 600;
    color: #155724;
    text-align: center;
    background: white;
    border: 1px solid #c3e6cb;
    border-radius: 8px;
    padding: 15px;
}

.loading-container[b-j0b1z64dt4] {
    text-align: center;
    padding: 40px;
}

.error-container[b-j0b1z64dt4] {
    text-align: center;
    padding: 40px;
}


.select-tours[b-j0b1z64dt4] {
    display: flex;
    flex-direction: column;
    /* subtract ~420px for page title, warnings, H2, filters, paddings, etc. */
    height: calc(100dvh - 420px);
    max-height: calc(100dvh - 420px);
}

/* fallback for browsers without dvh */
@supports not (height: 100dvh) {
    .select-tours[b-j0b1z64dt4] {
        height: calc(100vh - 420px);
        max-height: calc(100vh - 420px);
    }
}

.select-tours .tours-selection-grid[b-j0b1z64dt4] {
    flex: 1 1 auto;
    min-height: 0; /* IMPORTANT: lets the child shrink inside flex */
    overflow: auto; /* the grid gets its own scroll */
    padding-right: 4px; /* avoid content under scrollbar */
    -webkit-overflow-scrolling: touch;
}

/* keep filters visible while you scroll the grid */
.select-tours .filters[b-j0b1z64dt4] {
    position: sticky;
    top: 0;
    background: #f8f9fa;
    z-index: 1;
    /* optional: add a little padding/margin if needed */
}


@media (max-width: 768px) {
    .filters[b-j0b1z64dt4] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-j0b1z64dt4] {
        min-width: unset;
    }

    .tours-selection-grid[b-j0b1z64dt4] {
        grid-template-columns: 1fr;
    }

    .deletion-actions[b-j0b1z64dt4] {
        flex-direction: column;
    }

    .preview-stats[b-j0b1z64dt4] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/Admin/TourManager.razor.rz.scp.css */
/* Pages/Admin/TourManager.razor.css */

/* --- Layout --- */
.admin-container[b-8rl9j5vdy2] {
    padding: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Filters Bar --- */
.filters[b-8rl9j5vdy2] {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin: 0 0 1.5rem 0;
    flex-wrap: wrap;
}

.search-input[b-8rl9j5vdy2],
.language-filter[b-8rl9j5vdy2] {
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-surface);
    color: var(--color-primary-text);
    font-size: 0.95rem;
    min-width: 220px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

    .search-input:focus[b-8rl9j5vdy2],
    .language-filter:focus[b-8rl9j5vdy2] {
        outline: none;
        border-color: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
    }

/* --- Tours Grid --- */
.tours-grid[b-8rl9j5vdy2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

/* --- Tour Card --- */
.tour-admin-card[b-8rl9j5vdy2] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .tour-admin-card:hover[b-8rl9j5vdy2] {
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0,0,0,0.12);
        border-color: color-mix(in oklab, var(--color-primary) 30%, var(--color-border));
    }

    .tour-admin-card img[b-8rl9j5vdy2] {
        width: 100%;
        height: 160px;
        object-fit: cover;
        background: var(--color-background);
    }

.tour-info[b-8rl9j5vdy2] {
    padding: 1rem;
    display: grid;
    gap: 0.25rem;
}

    .tour-info h3[b-8rl9j5vdy2] {
        margin: 0 0 0.25rem 0;
        font-size: 1.05rem;
        line-height: 1.3;
        color: var(--color-primary-text);
        font-weight: 700;
    }

    .tour-info p[b-8rl9j5vdy2] {
        margin: 0;
        color: var(--color-secondary-text);
        font-size: 0.92rem;
    }

        .tour-info p:nth-last-child(2)[b-8rl9j5vdy2] { /* Price line */
            font-weight: 600;
            color: var(--color-primary-text);
        }

        .tour-info p:last-child[b-8rl9j5vdy2] { /* FREE/PAID */
            font-size: 0.8rem;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            color: var(--color-primary);
        }

/* --- Empty/Loading/Error Blocks --- */
.loading-container[b-8rl9j5vdy2],
.error-container[b-8rl9j5vdy2] {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--color-surface);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    margin-top: 1rem;
}

    .loading-container p[b-8rl9j5vdy2],
    .error-container p[b-8rl9j5vdy2] {
        margin: 0.75rem 0 0 0;
        color: var(--color-secondary-text);
        font-size: 1rem;
    }

    .error-container h3[b-8rl9j5vdy2] {
        margin: 0 0 0.5rem 0;
        color: var(--color-primary-text);
        font-size: 1.25rem;
    }

/* --- Modal --- */
.modal-overlay[b-8rl9j5vdy2] {
    position: fixed;
    inset: 0;
    background: #000; /* opaco */
    backdrop-filter: none; /* sin blur */
    padding: 1rem;
    display: grid;
    place-items: center;
    z-index: 1000;
    overflow: hidden; /* evita scrollbars del body */
}

.modal-content[b-8rl9j5vdy2] {
    width: clamp(340px, 90vw, 840px); /* amplio en desktop */
    max-height: calc(100dvh - 10rem);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    display: grid;
    grid-template-rows: auto minmax(0,1fr) auto; /* header, body (con scroll), actions */
    overflow: hidden;
    box-sizing: border-box;
}

    .modal-content > h2[b-8rl9j5vdy2] {
        margin: 0;
        padding: 1.25rem 1.25rem 0.75rem 1.25rem;
        color: var(--color-primary-text);
        font-size: 1.25rem;
        font-weight: 700;
    }

    .modal-content .form-body[b-8rl9j5vdy2] {
        padding: 0 1.25rem 1rem;
        overflow: auto; /* el scroll vive aquí */
        overflow-x: hidden; /* sin scrollbar horizontal */
        min-height: 0; /* imprescindible en grid */
    }

/* If you don't have a wrapper, apply to modal-content directly */
.modal-content[b-8rl9j5vdy2] {
    padding-bottom: 0;
}

    .modal-content .form-group:last-of-type[b-8rl9j5vdy2] {
        margin-bottom: 0.5rem;
    }

/* --- Form Elements --- */
.form-group[b-8rl9j5vdy2] {
    display: grid;
    gap: 0.4rem;
    margin: 0.75rem 0;
}

    .form-group label[b-8rl9j5vdy2] {
        color: var(--color-secondary-text);
        font-weight: 600;
        font-size: 0.9rem;
    }

    .form-group input[type="text"][b-8rl9j5vdy2],
    .form-group input[type="number"][b-8rl9j5vdy2],
    .form-group input[type="url"][b-8rl9j5vdy2],
    .form-group select[b-8rl9j5vdy2] {
        width: 100%;
        padding: 0.6rem 0.75rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-background);
        color: var(--color-primary-text);
        font-size: 0.95rem;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        box-sizing: border-box; /* evita el overflow horizontal */
    }

        .form-group input:focus[b-8rl9j5vdy2],
        .form-group select:focus[b-8rl9j5vdy2] {
            outline: none;
            border-color: var(--color-primary);
            box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 20%, transparent);
        }

    .form-group input[type="checkbox"][b-8rl9j5vdy2] {
        width: 18px;
        height: 18px;
        accent-color: var(--color-primary);
    }

/* Titles/Cities/Countries sections */
.modal-content h3[b-8rl9j5vdy2] {
    margin: 1rem 1.25rem 0.25rem;
    color: var(--color-primary-text);
    font-size: 1rem;
    font-weight: 700;
}

/* --- Modal Actions --- */
.modal-actions[b-8rl9j5vdy2] {
    position: static;
    bottom: 0;
    background: var(--color-surface);
    padding: 0.9rem 1.25rem 1.1rem;
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    border-top: 1px solid var(--color-border);
}

.btn[b-8rl9j5vdy2] {
    padding: 0.7rem 1.1rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.92rem;
    font-weight: 700;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    text-decoration: none;
}

    .btn:disabled[b-8rl9j5vdy2] {
        opacity: 0.6;
        cursor: not-allowed;
        transform: none !important;
    }

.btn-primary[b-8rl9j5vdy2] {
    background: var(--color-primary);
    color: #fff;
    box-shadow: 0 2px 8px rgba(3, 23, 61, 0.25);
}

    .btn-primary:hover:not(:disabled)[b-8rl9j5vdy2] {
        background: var(--color-primary-dark, #02122a);
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(3, 23, 61, 0.35);
    }

.btn-secondary[b-8rl9j5vdy2] {
    background: var(--color-background);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-secondary:hover:not(:disabled)[b-8rl9j5vdy2] {
        transform: translateY(-1px);
        box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    }

/* --- Utility --- */
p.no-data[b-8rl9j5vdy2] {
    text-align: center;
    color: var(--color-secondary-text);
    font-style: italic;
    padding: 2rem;
    margin: 0;
}

/* --- Responsive --- */
@media (min-width: 1200px) {
    .modal-content[b-8rl9j5vdy2] {
        width: 960px;
    }
    /* aún más ancho en pantallas grandes */
}

@media (max-width: 900px) {
    .tours-grid[b-8rl9j5vdy2] {
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }
}

@media (max-width: 768px) {
    .admin-container[b-8rl9j5vdy2] {
        padding: 1rem;
    }

    .tours-grid[b-8rl9j5vdy2] {
        gap: 0.75rem;
    }

    .tour-admin-card img[b-8rl9j5vdy2] {
        height: 140px;
    }

    .modal-content[b-8rl9j5vdy2] {
        width: calc(100vw - 1rem);
        max-height: calc(100dvh - 1rem);
    }

    .modal-overlay[b-8rl9j5vdy2] {
        padding: 0.5rem;
    }

    .filters[b-8rl9j5vdy2] {
        flex-direction: column;
        align-items: stretch;
    }

    .search-input[b-8rl9j5vdy2],
    .language-filter[b-8rl9j5vdy2] {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .tour-admin-card img[b-8rl9j5vdy2] {
        height: 120px;
    }
}

/* --- Dark mode touches --- */
@media (prefers-color-scheme: dark) {
    .tour-admin-card[b-8rl9j5vdy2],
    .modal-content[b-8rl9j5vdy2] {
        box-shadow: 0 2px 12px rgba(0,0,0,0.35);
    }

        .tour-admin-card:hover[b-8rl9j5vdy2] {
            box-shadow: 0 8px 22px rgba(0,0,0,0.45);
        }
}

/* --- High contrast --- */
@media (prefers-contrast: more) {
    .tour-admin-card[b-8rl9j5vdy2],
    .modal-content[b-8rl9j5vdy2] {
        border-width: 2px;
    }

    .btn-primary[b-8rl9j5vdy2] {
        border: 2px solid currentColor;
    }
}

/* --- Focus visible for keyboard users --- */
:where(.tour-admin-card, .btn, .search-input, .language-filter, .form-group input, .form-group select):focus-visible[b-8rl9j5vdy2] {
    outline: 3px solid color-mix(in oklab, var(--color-primary) 55%, transparent);
    outline-offset: 2px;
}
/* /Pages/Discover.razor.rz.scp.css */
/* Pages/Home.razor.css */

.tour-grid-container[b-myh10sxjix] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.tour-flex-grid[b-myh10sxjix] {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    gap: 1.5rem;
    justify-content: center; /* Center items on the line */
}

.discover-header[b-myh10sxjix] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.language-filter[b-myh10sxjix] {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-primary-text);
}

.header-controls[b-myh10sxjix] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.loading-container[b-myh10sxjix] {
    text-align: center;
}

    .loading-container p[b-myh10sxjix] {
        color: var(--color-secondary-text);
    }




.notification-prompt[b-myh10sxjix] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 1.5rem;
    margin: 0 1rem 2rem 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .notification-prompt:hover[b-myh10sxjix] {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        transform: translateY(-1px);
    }

    .notification-prompt h4[b-myh10sxjix] {
        margin: 0 0 0.75rem 0;
        color: var(--color-primary-text);
        font-size: 1.1rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 0.5rem;
    }

        .notification-prompt h4[b-myh10sxjix]::before {
            content: "🔔";
            font-size: 1.2rem;
        }

    .notification-prompt p[b-myh10sxjix] {
        margin: 0 0 1.25rem 0;
        color: var(--color-secondary-text);
        line-height: 1.5;
        font-size: 0.95rem;
    }

.prompt-actions[b-myh10sxjix] {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

    .prompt-actions .btn-primary[b-myh10sxjix] {
        background: var(--color-accent);
        color: white;
        border: none;
        padding: 0.75rem 1.5rem;
        border-radius: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.9rem;
        flex: 1;
        min-width: 120px;
    }

        .prompt-actions .btn-primary:hover[b-myh10sxjix] {
            background: var(--color-accent-hover, var(--color-accent));
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
            opacity: 0.9;
        }

    .prompt-actions .btn-secondary[b-myh10sxjix] {
        background: var(--color-background);
        color: var(--color-secondary-text);
        border: 1px solid var(--color-border);
        padding: 0.75rem 1.5rem;
        border-radius: 12px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s ease;
        font-size: 0.9rem;
        flex: 1;
        min-width: 120px;
    }

        .prompt-actions .btn-secondary:hover[b-myh10sxjix] {
            background: var(--color-surface);
            border-color: var(--color-accent);
            color: var(--color-primary-text);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

/* Dark mode adjustments */
:global(.dark) .notification-prompt[b-myh10sxjix] {
    background: var(--color-surface-dark, #2a2a2a);
    border-color: var(--color-border-dark, #444);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

:global(.dark) .prompt-actions .btn-secondary[b-myh10sxjix] {
    background: var(--color-background-dark, #1a1a1a);
    border-color: var(--color-border-dark, #444);
    color: var(--color-secondary-text-dark, #ccc);
}

    :global(.dark) .prompt-actions .btn-secondary:hover[b-myh10sxjix] {
        background: var(--color-surface-dark, #2a2a2a);
        border-color: var(--color-accent);
    }

/* Mobile responsiveness */
@media (max-width: 768px) {
    .notification-prompt[b-myh10sxjix] {
        margin: 0 0.5rem 1.5rem 0.5rem;
        padding: 1.25rem;
    }

        .notification-prompt h4[b-myh10sxjix] {
            font-size: 1rem;
        }

        .notification-prompt p[b-myh10sxjix] {
            font-size: 0.9rem;
        }

    .prompt-actions[b-myh10sxjix] {
        flex-direction: column;
        gap: 0.5rem;
    }

        .prompt-actions .btn-primary[b-myh10sxjix],
        .prompt-actions .btn-secondary[b-myh10sxjix] {
            width: 100%;
            padding: 0.875rem 1rem;
            font-size: 0.85rem;
        }
}

/* Animation for when prompt appears */
@keyframes slideInDown-b-myh10sxjix {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

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

.notification-prompt[b-myh10sxjix] {
    animation: slideInDown-b-myh10sxjix 0.4s ease-out;
}

/* Subtle gradient background for visual appeal */
.notification-prompt[b-myh10sxjix] {
    background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-background) 100%);
}

:global(.dark) .notification-prompt[b-myh10sxjix] {
    background: linear-gradient(135deg, var(--color-surface-dark, #2a2a2a) 0%, var(--color-background-dark, #1a1a1a) 100%);
}



/* Infinite scroll trigger element */
.load-more-trigger[b-myh10sxjix] {
    width: 100%;
    height: 20px;
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-more-container[b-myh10sxjix] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
}

    .loading-more-container p[b-myh10sxjix] {
        color: var(--color-secondary-text);
        font-size: 0.9rem;
        margin: 0;
    }

/* Fallback load more button */
.load-more-button-container[b-myh10sxjix] {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
    padding: 1rem;
}

.load-more-btn[b-myh10sxjix] {
    padding: 0.75rem 2rem;
    font-size: 0.9rem;
    min-width: 150px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

    .load-more-btn:hover[b-myh10sxjix] {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

/* End of results message */
.end-of-results[b-myh10sxjix] {
    width: 100%;
    text-align: center;
    padding: 2rem 1rem;
    margin-top: 1rem;
}

    .end-of-results p[b-myh10sxjix] {
        color: var(--color-secondary-text);
        font-size: 0.9rem;
        font-style: italic;
        margin: 0;
        opacity: 0.8;
    }

/* Responsive adjustments */
@media (max-width: 768px) {
    .load-more-trigger[b-myh10sxjix] {
        margin-top: 1.5rem;
    }

    .load-more-button-container[b-myh10sxjix] {
        margin-top: 1.5rem;
        padding: 0.75rem;
    }

    .load-more-btn[b-myh10sxjix] {
        padding: 0.625rem 1.5rem;
        font-size: 0.85rem;
        min-width: 120px;
    }
}
/* /Pages/Home.razor.rz.scp.css */
/* Pages/Home.razor.css - Updated without contact section */

.landing-page[b-hka8wjz5e2] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Hero Section */
.hero-section[b-hka8wjz5e2] {
    text-align: center;
    padding: 3rem 0 4rem 0;
    background: linear-gradient(135deg, var(--color-accent) 0%, #0056d3 100%);
    margin: -1rem -1rem 3rem -1rem;
    border-radius: 0 0 30px 30px;
    color: white;
}

.hero-icon[b-hka8wjz5e2] {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.hero-section h1[b-hka8wjz5e2] {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
    color: white;
}

.hero-subtitle[b-hka8wjz5e2] {
    font-size: clamp(1.1rem, 3vw, 1.3rem);
    margin-bottom: 2rem;
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.hero-actions[b-hka8wjz5e2] {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-primary[b-hka8wjz5e2], .btn-secondary[b-hka8wjz5e2] {
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary[b-hka8wjz5e2] {
    background: white;
    color: var(--color-accent);
}

    .btn-primary:hover[b-hka8wjz5e2] {
        transform: translateY(-2px);
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    }

.btn-secondary[b-hka8wjz5e2] {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

    .btn-secondary:hover[b-hka8wjz5e2] {
        background: rgba(255, 255, 255, 0.2);
        border-color: rgba(255, 255, 255, 0.5);
    }

/* How It Works Section */
.how-it-works-section[b-hka8wjz5e2] {
    padding: 3rem 0;
    text-align: center;
}

    .how-it-works-section h2[b-hka8wjz5e2] {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 3rem;
        color: var(--color-primary-text);
    }

.features-grid[b-hka8wjz5e2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-card[b-hka8wjz5e2] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

    .feature-card:hover[b-hka8wjz5e2] {
        transform: translateY(-5px);
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
    }

.feature-icon[b-hka8wjz5e2] {
    font-size: 3rem;
    margin-bottom: 1rem;
    display: block;
}

.feature-card h3[b-hka8wjz5e2] {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--color-primary-text);
}

.feature-card p[b-hka8wjz5e2] {
    color: var(--color-secondary-text);
    line-height: 1.6;
    font-size: 1rem;
}

/* About Section */
.about-section[b-hka8wjz5e2] {
    padding: 4rem 0;
    background: var(--color-background);
    margin: 3rem -1rem;
    border-radius: 30px;
}

    .about-section h2[b-hka8wjz5e2] {
        text-align: center;
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 2rem;
        color: var(--color-primary-text);
    }

.about-content[b-hka8wjz5e2] {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
}

.about-text p[b-hka8wjz5e2] {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--color-secondary-text);
    margin-bottom: 1.5rem;
    text-align: center;
}

.stats-grid[b-hka8wjz5e2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.stat-item[b-hka8wjz5e2] {
    text-align: center;
}

.stat-number[b-hka8wjz5e2] {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

.stat-label[b-hka8wjz5e2] {
    font-size: 1rem;
    color: var(--color-secondary-text);
    font-weight: 500;
}

/* PWA Status Section (existing) */
.pwa-status-section[b-hka8wjz5e2] {
    margin-bottom: 3rem;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

    .pwa-status-section.installed[b-hka8wjz5e2] {
        background: linear-gradient(135deg, #d4f6d4 0%, #e8f8e8 100%);
        border-color: #90ee90;
    }

html.dark .pwa-status-section.installed[b-hka8wjz5e2] {
    background: linear-gradient(135deg, #1a3d1a 0%, #0f2f0f 100%);
    border-color: #228b22;
}

.pwa-status-section.installable[b-hka8wjz5e2] {
    background: linear-gradient(135deg, #e3f2fd 0%, #f1f8ff 100%);
    border-color: var(--color-accent);
}

html.dark .pwa-status-section.installable[b-hka8wjz5e2] {
    background: linear-gradient(135deg, #0d2438 0%, #051829 100%);
    border-color: var(--color-accent);
}

.status-content[b-hka8wjz5e2] {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
}

.status-icon[b-hka8wjz5e2] {
    font-size: 2rem;
    flex-shrink: 0;
}

.status-text[b-hka8wjz5e2] {
    flex: 1;
    min-width: 0;
}

    .status-text h3[b-hka8wjz5e2] {
        margin: 0 0 0.25rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--color-primary-text);
    }

    .status-text p[b-hka8wjz5e2] {
        margin: 0;
        font-size: 0.9rem;
        color: var(--color-secondary-text);
        line-height: 1.4;
    }

.install-action-btn[b-hka8wjz5e2] {
    background: var(--color-accent);
    color: white;
    border: none;
    padding: 0.75rem 1.25rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

    .install-action-btn:hover[b-hka8wjz5e2] {
        opacity: 0.9;
        transform: translateY(-1px);
    }

    .install-action-btn:active[b-hka8wjz5e2] {
        transform: translateY(0);
    }

/* Mobile responsive */
@media (max-width: 768px) {
    .hero-section[b-hka8wjz5e2] {
        padding: 2rem 1rem 3rem 1rem;
        margin: -1rem -1rem 2rem -1rem;
    }

    .hero-actions[b-hka8wjz5e2] {
        flex-direction: column;
        align-items: center;
    }

    .btn-primary[b-hka8wjz5e2], .btn-secondary[b-hka8wjz5e2] {
        width: 100%;
        max-width: 300px;
    }

    .features-grid[b-hka8wjz5e2] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .feature-card[b-hka8wjz5e2] {
        padding: 1.5rem;
    }

    .about-section[b-hka8wjz5e2] {
        margin: 2rem -1rem;
        padding: 3rem 0;
    }

    .about-content[b-hka8wjz5e2] {
        padding: 0 1rem;
    }

    .stats-grid[b-hka8wjz5e2] {
        grid-template-columns: repeat(3, 1fr);
        gap: 1rem;
    }

    .stat-number[b-hka8wjz5e2] {
        font-size: 2rem;
    }

    .status-content[b-hka8wjz5e2] {
        padding: 1rem;
        gap: 0.75rem;
    }

    .status-icon[b-hka8wjz5e2] {
        font-size: 1.75rem;
    }

    .status-text h3[b-hka8wjz5e2] {
        font-size: 1rem;
    }

    .status-text p[b-hka8wjz5e2] {
        font-size: 0.85rem;
    }

    .install-action-btn[b-hka8wjz5e2] {
        padding: 0.625rem 1rem;
        font-size: 0.85rem;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    .hero-section[b-hka8wjz5e2] {
        padding: 1.5rem 0.5rem 2.5rem 0.5rem;
    }

    .hero-icon[b-hka8wjz5e2] {
        font-size: 3rem;
    }

    .stats-grid[b-hka8wjz5e2] {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .status-content[b-hka8wjz5e2] {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .install-action-btn[b-hka8wjz5e2] {
        width: 100%;
        max-width: 200px;
    }
}



.promo-video-section[b-hka8wjz5e2] {
    margin: 3rem 0;
}

.video-container[b-hka8wjz5e2] {
    max-width: 600px;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

    .video-container:hover[b-hka8wjz5e2] {
        transform: translateY(-4px);
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
    }

.video-wrapper[b-hka8wjz5e2] {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    cursor: pointer;
}

    .video-wrapper iframe[b-hka8wjz5e2] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.video-overlay[b-hka8wjz5e2] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.6));
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    transition: all 0.3s ease;
}

    .video-overlay:hover[b-hka8wjz5e2] {
        background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5));
    }

.video-thumbnail[b-hka8wjz5e2] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

    .video-thumbnail img[b-hka8wjz5e2] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.play-button[b-hka8wjz5e2] {
    width: 72px;
    height: 72px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

    .play-button:hover[b-hka8wjz5e2] {
        background: white;
        transform: scale(1.1);
    }

.play-icon[b-hka8wjz5e2] {
    width: 28px;
    height: 28px;
    fill: var(--color-accent);
    margin-left: 3px;
}

.video-info h3[b-hka8wjz5e2] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 0.25rem 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.video-info p[b-hka8wjz5e2] {
    font-size: 1rem;
    margin: 0;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
/* /Pages/JoinLive.razor.rz.scp.css */
.join-live-page[b-6rcthgkahd] {
    min-height: 100vh;
    background-color: rgb(249 250 251);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@media (prefers-color-scheme: dark) {
    .join-live-page[b-6rcthgkahd] {
        background-color: rgb(17 24 39);
    }
}

.loading-container[b-6rcthgkahd],
.error-container[b-6rcthgkahd],
.location-request-container[b-6rcthgkahd],
.success-container[b-6rcthgkahd] {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    padding: 2rem;
    max-width: 28rem;
    width: 100%;
    text-align: center;
}

@media (prefers-color-scheme: dark) {
    .loading-container[b-6rcthgkahd],
    .error-container[b-6rcthgkahd],
    .location-request-container[b-6rcthgkahd],
    .success-container[b-6rcthgkahd] {
        background-color: rgb(31 41 55);
    }
}

.spinner-large[b-6rcthgkahd] {
    width: 3rem;
    height: 3rem;
    border: 4px solid rgb(37 99 235);
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-6rcthgkahd 1s linear infinite;
    margin: 0 auto;
}

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

.error-icon[b-6rcthgkahd],
.location-icon[b-6rcthgkahd],
.success-icon[b-6rcthgkahd] {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
}

.error-title[b-6rcthgkahd],
.location-title[b-6rcthgkahd],
.success-title[b-6rcthgkahd] {
    font-size: 1.25rem;
    font-weight: 600;
    color: rgb(17 24 39);
    margin-bottom: 1rem;
}

@media (prefers-color-scheme: dark) {
    .error-title[b-6rcthgkahd],
    .location-title[b-6rcthgkahd],
    .success-title[b-6rcthgkahd] {
        color: white;
    }
}

.error-message[b-6rcthgkahd],
.location-description[b-6rcthgkahd],
.success-description[b-6rcthgkahd] {
    color: rgb(75 85 99);
    margin-bottom: 1.5rem;
}

@media (prefers-color-scheme: dark) {
    .error-message[b-6rcthgkahd],
    .location-description[b-6rcthgkahd],
    .success-description[b-6rcthgkahd] {
        color: rgb(156 163 175);
    }
}

.distance-info[b-6rcthgkahd] {
    background-color: rgb(254 252 232);
    border: 1px solid rgb(254 240 138);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1.5rem;
    gap: 0.25rem;
}

@media (prefers-color-scheme: dark) {
    .distance-info[b-6rcthgkahd] {
        background-color: rgb(133 77 14 / 0.2);
        border-color: rgb(217 119 6);
    }
}

.error-actions[b-6rcthgkahd],
.location-actions[b-6rcthgkahd],
.success-actions[b-6rcthgkahd] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    justify-content: center;
}

@media (min-width: 640px) {
    .error-actions[b-6rcthgkahd],
    .location-actions[b-6rcthgkahd],
    .success-actions[b-6rcthgkahd] {
        flex-direction: row;
    }
}

.session-info[b-6rcthgkahd] {
    margin-bottom: 1.5rem;
}

.tour-card[b-6rcthgkahd] {
    background-color: rgb(249 250 251);
    border-radius: 0.5rem;
    padding: 1rem;
}

@media (prefers-color-scheme: dark) {
    .tour-card[b-6rcthgkahd] {
        background-color: rgb(55 65 81);
    }
}

.tour-info[b-6rcthgkahd] {
    text-align: left;
}

.tour-title[b-6rcthgkahd] {
    font-weight: 600;
    color: rgb(17 24 39);
}

@media (prefers-color-scheme: dark) {
    .tour-title[b-6rcthgkahd] {
        color: white;
    }
}

.tour-city[b-6rcthgkahd] {
    font-size: 0.875rem;
    color: rgb(75 85 99);
}

@media (prefers-color-scheme: dark) {
    .tour-city[b-6rcthgkahd] {
        color: rgb(156 163 175);
    }
}

.btn-primary[b-6rcthgkahd] {
    padding: 0.75rem 1.5rem;
    background-color: rgb(37 99 235);
    color: white;
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    cursor: pointer;
}

    .btn-primary:hover[b-6rcthgkahd] {
        background-color: rgb(29 78 216);
    }

.btn-secondary[b-6rcthgkahd] {
    padding: 0.75rem 1.5rem;
    background-color: rgb(229 231 235);
    color: rgb(55 65 81);
    border-radius: 0.5rem;
    font-weight: 500;
    transition: background-color 0.15s ease-in-out;
    border: none;
    cursor: pointer;
}

    .btn-secondary:hover[b-6rcthgkahd] {
        background-color: rgb(209 213 219);
    }

@media (prefers-color-scheme: dark) {
    .btn-secondary[b-6rcthgkahd] {
        background-color: rgb(75 85 99);
        color: rgb(209 213 219);
    }

        .btn-secondary:hover[b-6rcthgkahd] {
            background-color: rgb(107 114 128);
        }
}

.btn-primary:disabled[b-6rcthgkahd] {
    opacity: 0.5;
    cursor: not-allowed;
}

.spinner-sm[b-6rcthgkahd] {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin-b-6rcthgkahd 1s linear infinite;
}
/* /Pages/PaymentCancelled.razor.rz.scp.css */
/* Shared styles for PaymentCancelled and PaymentFailed pages */

.payment-cancelled-page[b-hop38uqa24],
.payment-failed-page[b-hop38uqa24] {
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.cancelled-container[b-hop38uqa24],
.failed-container[b-hop38uqa24] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.cancelled-icon[b-hop38uqa24],
.failed-icon[b-hop38uqa24] {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.cancelled-container h1[b-hop38uqa24] {
    color: #ff9800;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.failed-container h1[b-hop38uqa24] {
    color: #f44336;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.cancellation-details[b-hop38uqa24],
.failure-details[b-hop38uqa24],
.error-details[b-hop38uqa24] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    text-align: left;
}

    .cancellation-details h2[b-hop38uqa24],
    .failure-details h2[b-hop38uqa24],
    .error-details h3[b-hop38uqa24] {
        color: var(--color-primary-text);
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

    .cancellation-details p[b-hop38uqa24],
    .failure-details p[b-hop38uqa24] {
        color: var(--color-secondary-text);
        margin: 0.5rem 0;
    }

.error-message[b-hop38uqa24] {
    background: #fee;
    border: 1px solid #f88;
    border-radius: 8px;
    padding: 12px;
    color: #c33;
    font-family: monospace;
    font-size: 0.9rem;
}

.suggestions[b-hop38uqa24],
.suggested-actions[b-hop38uqa24],
.common-causes[b-hop38uqa24] {
    width: 100%;
    text-align: left;
}

    .suggestions h3[b-hop38uqa24],
    .suggested-actions h3[b-hop38uqa24],
    .common-causes h3[b-hop38uqa24] {
        color: var(--color-primary-text);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        text-align: center;
    }

    .common-causes ul[b-hop38uqa24] {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 1.5rem 2rem;
        margin: 0;
    }

    .common-causes li[b-hop38uqa24] {
        color: var(--color-secondary-text);
        margin: 0.5rem 0;
    }

.suggestion-buttons[b-hop38uqa24],
.action-buttons[b-hop38uqa24] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-primary[b-hop38uqa24],
.btn-secondary[b-hop38uqa24],
.btn-tertiary[b-hop38uqa24] {
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-align: center;
}

.btn-primary[b-hop38uqa24] {
    background: var(--color-accent);
    color: white;
}

    .btn-primary:hover[b-hop38uqa24] {
        filter: brightness(1.1);
    }

.btn-secondary[b-hop38uqa24] {
    background: var(--color-surface);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-secondary:hover[b-hop38uqa24] {
        background: var(--color-background);
    }

.btn-tertiary[b-hop38uqa24] {
    background: transparent;
    color: var(--color-secondary-text);
    border: 1px solid var(--color-border);
}

    .btn-tertiary:hover[b-hop38uqa24] {
        background: var(--color-surface);
    }

.benefits-list[b-hop38uqa24] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.benefit-item[b-hop38uqa24] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1rem 0;
    color: var(--color-secondary-text);
}

.benefit-icon[b-hop38uqa24] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alternative-options[b-hop38uqa24] {
    width: 100%;
    text-align: left;
    margin-top: 2rem;
}

    .alternative-options h3[b-hop38uqa24] {
        color: var(--color-primary-text);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        text-align: center;
    }

.alternatives[b-hop38uqa24] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alternative-item[b-hop38uqa24] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alt-icon[b-hop38uqa24] {
    font-size: 2rem;
    flex-shrink: 0;
}

.alt-content[b-hop38uqa24] {
    flex: 1;
}

    .alt-content h4[b-hop38uqa24] {
        color: var(--color-primary-text);
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
    }

    .alt-content p[b-hop38uqa24] {
        color: var(--color-secondary-text);
        margin: 0 0 1rem 0;
        font-size: 0.9rem;
    }

.btn-alt[b-hop38uqa24] {
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s;
}

    .btn-alt:hover[b-hop38uqa24] {
        filter: brightness(1.1);
    }

.help-section[b-hop38uqa24] {
    width: 100%;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
}

    .help-section h3[b-hop38uqa24] {
        color: var(--color-primary-text);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

    .help-section p[b-hop38uqa24] {
        color: var(--color-secondary-text);
        margin: 0 0 1.5rem 0;
    }

.help-options[b-hop38uqa24] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.help-button[b-hop38uqa24] {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--color-primary-text);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

    .help-button:hover[b-hop38uqa24] {
        background: var(--color-surface);
        border-color: var(--color-accent);
    }

.help-icon[b-hop38uqa24] {
    font-size: 1.2rem;
}

/* Responsive design */
@media (min-width: 768px) {
    .suggestion-buttons[b-hop38uqa24],
    .action-buttons[b-hop38uqa24] {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-primary[b-hop38uqa24],
    .btn-secondary[b-hop38uqa24],
    .btn-tertiary[b-hop38uqa24] {
        flex: 1;
        max-width: 200px;
    }

    .alternatives[b-hop38uqa24] {
        gap: 1.5rem;
    }

    .alternative-item[b-hop38uqa24] {
        padding: 2rem;
    }
}


/* Specific styles for cancelled page */
.cancelled-icon[b-hop38uqa24] {
    color: #ff9800; /* Orange for cancellation */
}
/* /Pages/PaymentFailed.razor.rz.scp.css */
/* Shared styles for PaymentCancelled and PaymentFailed pages */

.payment-cancelled-page[b-r2ruddz7or],
.payment-failed-page[b-r2ruddz7or] {
    padding: 2rem;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.cancelled-container[b-r2ruddz7or],
.failed-container[b-r2ruddz7or] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

.cancelled-icon[b-r2ruddz7or],
.failed-icon[b-r2ruddz7or] {
    font-size: 4rem;
    margin-bottom: 0.5rem;
}

.cancelled-container h1[b-r2ruddz7or] {
    color: #ff9800;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.failed-container h1[b-r2ruddz7or] {
    color: #f44336;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.cancellation-details[b-r2ruddz7or],
.failure-details[b-r2ruddz7or],
.error-details[b-r2ruddz7or] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    text-align: left;
}

    .cancellation-details h2[b-r2ruddz7or],
    .failure-details h2[b-r2ruddz7or],
    .error-details h3[b-r2ruddz7or] {
        color: var(--color-primary-text);
        font-size: 1.3rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

    .cancellation-details p[b-r2ruddz7or],
    .failure-details p[b-r2ruddz7or] {
        color: var(--color-secondary-text);
        margin: 0.5rem 0;
    }

.error-message[b-r2ruddz7or] {
    background: #fee;
    border: 1px solid #f88;
    border-radius: 8px;
    padding: 12px;
    color: #c33;
    font-family: monospace;
    font-size: 0.9rem;
}

.suggestions[b-r2ruddz7or],
.suggested-actions[b-r2ruddz7or],
.common-causes[b-r2ruddz7or] {
    width: 100%;
    text-align: left;
}

    .suggestions h3[b-r2ruddz7or],
    .suggested-actions h3[b-r2ruddz7or],
    .common-causes h3[b-r2ruddz7or] {
        color: var(--color-primary-text);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        text-align: center;
    }

    .common-causes ul[b-r2ruddz7or] {
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 1.5rem 2rem;
        margin: 0;
    }

    .common-causes li[b-r2ruddz7or] {
        color: var(--color-secondary-text);
        margin: 0.5rem 0;
    }

.suggestion-buttons[b-r2ruddz7or],
.action-buttons[b-r2ruddz7or] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

.btn-primary[b-r2ruddz7or],
.btn-secondary[b-r2ruddz7or],
.btn-tertiary[b-r2ruddz7or] {
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
    text-align: center;
}

.btn-primary[b-r2ruddz7or] {
    background: var(--color-accent);
    color: white;
}

    .btn-primary:hover[b-r2ruddz7or] {
        filter: brightness(1.1);
    }

.btn-secondary[b-r2ruddz7or] {
    background: var(--color-surface);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-secondary:hover[b-r2ruddz7or] {
        background: var(--color-background);
    }

.btn-tertiary[b-r2ruddz7or] {
    background: transparent;
    color: var(--color-secondary-text);
    border: 1px solid var(--color-border);
}

    .btn-tertiary:hover[b-r2ruddz7or] {
        background: var(--color-surface);
    }

.benefits-list[b-r2ruddz7or] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1rem 0;
}

.benefit-item[b-r2ruddz7or] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1rem 0;
    color: var(--color-secondary-text);
}

.benefit-icon[b-r2ruddz7or] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.alternative-options[b-r2ruddz7or] {
    width: 100%;
    text-align: left;
    margin-top: 2rem;
}

    .alternative-options h3[b-r2ruddz7or] {
        color: var(--color-primary-text);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
        text-align: center;
    }

.alternatives[b-r2ruddz7or] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.alternative-item[b-r2ruddz7or] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.alt-icon[b-r2ruddz7or] {
    font-size: 2rem;
    flex-shrink: 0;
}

.alt-content[b-r2ruddz7or] {
    flex: 1;
}

    .alt-content h4[b-r2ruddz7or] {
        color: var(--color-primary-text);
        font-size: 1.1rem;
        font-weight: 600;
        margin: 0 0 0.5rem 0;
    }

    .alt-content p[b-r2ruddz7or] {
        color: var(--color-secondary-text);
        margin: 0 0 1rem 0;
        font-size: 0.9rem;
    }

.btn-alt[b-r2ruddz7or] {
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.2s;
}

    .btn-alt:hover[b-r2ruddz7or] {
        filter: brightness(1.1);
    }

.help-section[b-r2ruddz7or] {
    width: 100%;
    text-align: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    margin-top: 2rem;
}

    .help-section h3[b-r2ruddz7or] {
        color: var(--color-primary-text);
        font-size: 1.2rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

    .help-section p[b-r2ruddz7or] {
        color: var(--color-secondary-text);
        margin: 0 0 1.5rem 0;
    }

.help-options[b-r2ruddz7or] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

.help-button[b-r2ruddz7or] {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px 16px;
    color: var(--color-primary-text);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
}

    .help-button:hover[b-r2ruddz7or] {
        background: var(--color-surface);
        border-color: var(--color-accent);
    }

.help-icon[b-r2ruddz7or] {
    font-size: 1.2rem;
}

/* Responsive design */
@media (min-width: 768px) {
    .suggestion-buttons[b-r2ruddz7or],
    .action-buttons[b-r2ruddz7or] {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-primary[b-r2ruddz7or],
    .btn-secondary[b-r2ruddz7or],
    .btn-tertiary[b-r2ruddz7or] {
        flex: 1;
        max-width: 200px;
    }

    .alternatives[b-r2ruddz7or] {
        gap: 1.5rem;
    }

    .alternative-item[b-r2ruddz7or] {
        padding: 2rem;
    }
}


/* Specific styles for failed page */
.failed-icon[b-r2ruddz7or] {
    color: #f44336; /* Red for failure */
}
/* /Pages/PaymentSuccess.razor.rz.scp.css */
.payment-success-page[b-l4xy2nwhiz] {
    padding: 2rem;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.loading-container[b-l4xy2nwhiz],
.success-container[b-l4xy2nwhiz],
.error-container[b-l4xy2nwhiz] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

.success-icon[b-l4xy2nwhiz],
.error-icon[b-l4xy2nwhiz] {
    font-size: 4rem;
    margin-bottom: 1rem;
}

.success-container h1[b-l4xy2nwhiz] {
    color: #4caf50;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.error-container h1[b-l4xy2nwhiz] {
    color: #f44336;
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.purchase-details[b-l4xy2nwhiz] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    width: 100%;
    margin: 1rem 0;
}

    .purchase-details h2[b-l4xy2nwhiz] {
        color: var(--color-primary-text);
        font-size: 1.5rem;
        font-weight: 600;
        margin: 0 0 1rem 0;
    }

    .purchase-details p[b-l4xy2nwhiz] {
        color: var(--color-secondary-text);
        line-height: 1.6;
        margin: 0.5rem 0;
    }

.action-buttons[b-l4xy2nwhiz] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    max-width: 300px;
}

.btn-primary[b-l4xy2nwhiz],
.btn-secondary[b-l4xy2nwhiz] {
    padding: 16px 24px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s;
}

.btn-primary[b-l4xy2nwhiz] {
    background: var(--color-accent);
    color: white;
}

    .btn-primary:hover[b-l4xy2nwhiz] {
        filter: brightness(1.1);
    }

.btn-secondary[b-l4xy2nwhiz] {
    background: var(--color-surface);
    color: var(--color-primary-text);
    border: 1px solid var(--color-border);
}

    .btn-secondary:hover[b-l4xy2nwhiz] {
        background: var(--color-background);
    }

@media (min-width: 768px) {
    .action-buttons[b-l4xy2nwhiz] {
        flex-direction: row;
        justify-content: center;
        max-width: none;
    }

    .btn-primary[b-l4xy2nwhiz],
    .btn-secondary[b-l4xy2nwhiz] {
        flex: 1;
        max-width: 200px;
    }
}
/* /Pages/Search.razor.rz.scp.css */
/* Pages/Search.razor.css */


/* Search Loading Indicator */
.search-loading[b-4egcf3mhy9] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    gap: 1rem;
    background: var(--color-surface);
    border-radius: 12px;
    margin-top: 1rem;
    border: 1px solid var(--color-border);
}

    .search-loading p[b-4egcf3mhy9] {
        margin: 0;
        font-weight: 500;
        color: var(--color-primary-text);
        font-size: 1rem;
    }

/* Map Loading Overlay */
.map-loading-overlay[b-4egcf3mhy9] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    gap: 1rem;
    z-index: 1000;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
}

    .map-loading-overlay p[b-4egcf3mhy9] {
        margin: 0;
        font-weight: 500;
        color: var(--color-primary-text);
        font-size: 1rem;
    }

/* Página: llena el alto del viewport menos el header/padding */
.search-page-content[b-4egcf3mhy9] {
    display: flex;
    flex-direction: column;
    /* fallback */
    height: calc(100vh - 160px);
    /* móviles: barras dinámicas */
    height: calc(100dvh - 160px);
}

/* ── Barra de búsqueda: input + botón en una fila ───────────── */
.search-bar[b-4egcf3mhy9] {
    max-width: 700px;
    margin: 0 auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: nowrap; /* mantener una sola línea */
}

    .search-bar .search-input[b-4egcf3mhy9] {
        /* neutraliza posibles width:100% globales */
        width: auto;
        flex: 1 1 0%;
        min-width: 0; /* evita overflow y scroll horizontal */
        padding: 15px;
        font-size: 1rem;
        border: 1px solid var(--color-border);
        background-color: var(--color-surface);
        border-radius: 12px;
        color: var(--color-primary-text);
        box-sizing: border-box;
    }

    .search-bar .btn-near-me[b-4egcf3mhy9] {
        flex: 0 0 auto; /* el botón no se deforma */
        display: flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.75rem 1.25rem;
        border: 1px solid var(--color-border);
        border-radius: 8px;
        background: var(--color-surface);
        color: var(--color-primary-text);
        cursor: pointer;
        transition: background 0.2s, border-color 0.2s, color 0.2s;
        white-space: nowrap; /* evita salto de línea en el texto */
    }

        .search-bar .btn-near-me:hover[b-4egcf3mhy9] {
            background: var(--color-hover);
        }

        .search-bar .btn-near-me.active[b-4egcf3mhy9] {
            background: var(--color-primary);
            color: #fff;
            border-color: var(--color-primary);
        }

/* ── Mapa: ocupa todo el espacio vertical disponible ───────── */
.map-container[b-4egcf3mhy9] {
    width: 100%;
    border-radius: 12px;
    margin-top: 1.5rem;
    flex-grow: 1;
    position: relative;
    transition: opacity 0.3s ease;
    height: 0; /* Forces flex-grow to determine height */
    min-height: 5px; /* Safety minimum */
    overflow: hidden; /* Prevents expansion */
}

    .map-container.loading[b-4egcf3mhy9] {
        opacity: 0.3;
    }

.map-loading[b-4egcf3mhy9] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.9);
    z-index: 10;
    gap: 1rem;
}

    .map-loading p[b-4egcf3mhy9] {
        margin: 0;
        font-weight: 500;
        color: var(--text-primary);
    }


/* ── Resultados ─────────────────────────────────────────────── */
.results-container[b-4egcf3mhy9] {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    padding-bottom: 7rem;
}

.no-results[b-4egcf3mhy9] {
    text-align: center;
    margin-top: 2rem;
    color: var(--color-secondary-text);
}

/* ── Controles de cabecera heredados (compat) ──────────────── */
.discover-header[b-4egcf3mhy9] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.language-filter[b-4egcf3mhy9] {
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
    background-color: var(--color-surface);
    color: var(--color-primary-text);
}

/* ── Mensaje de permisos denegados ─────────────────────────── */
.permission-denied-message[b-4egcf3mhy9] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: center;
}

    .permission-denied-message p[b-4egcf3mhy9] {
        margin: 0;
        line-height: 1.5;
    }

        .permission-denied-message p:first-child[b-4egcf3mhy9] {
            margin-bottom: 0.5rem;
        }

/* ── Modo offline ───────────────────────────────────────────── */
.offline-search-container[b-4egcf3mhy9] {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.offline-message[b-4egcf3mhy9] {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1rem;
    margin-bottom: 1.5rem;
    text-align: center;
}

    .offline-message p[b-4egcf3mhy9] {
        margin: 0;
        line-height: 1.5;
    }

        .offline-message p:first-child[b-4egcf3mhy9] {
            margin-bottom: 0.5rem;
            font-weight: 600;
        }

/* ── Desktop: pequeño margen extra ─────────────────────────── */
@media (min-width: 1024px) {
    .search-page-content[b-4egcf3mhy9] {
        /* fallback + variante dinámica */
        height: calc(100vh - 170px);
        height: calc(100dvh - 170px);
    }
}

/* Compact tweaks for phones */
@media (max-width: 480px) {
    .search-bar[b-4egcf3mhy9] {
        gap: 0.5rem;
    }

        .search-bar .search-input[b-4egcf3mhy9] {
            padding: 12px;
            font-size: 0.95rem;
        }

        .search-bar .btn-near-me[b-4egcf3mhy9] {
            padding: 8px 10px; /* smaller hitbox but still tappable */
            border-radius: 10px;
        }

            .search-bar .btn-near-me svg[b-4egcf3mhy9] {
                width: 18px;
                height: 18px;
            }

            /* Icon-only on very small screens */
            .search-bar .btn-near-me .label[b-4egcf3mhy9] {
                display: none;
            }
}

/* Slightly compact on small tablets too */
@media (min-width: 481px) and (max-width: 767px) {
    .search-bar .btn-near-me[b-4egcf3mhy9] {
        padding: 10px 12px;
    }

        .search-bar .btn-near-me .label[b-4egcf3mhy9] {
            font-size: 0.95rem;
        }
}
/* /Pages/TourDetail.razor.rz.scp.css */
/* Pages/TourDetail.razor.css */
.tour-detail-page[b-khhlm5i3bd] {
    /* We remove the main padding to allow the image to be full-width */
    margin: -1rem -1rem 0 -1rem;
}

/* Default style for mobile */
.header-image[b-khhlm5i3bd] {
    width: 100%;
    height: 300px;
    background-size: cover;
    background-position: center;
}

/* Override for screens 768px and wider (tablets/desktops) */
@media (min-width: 768px) {
    .header-image[b-khhlm5i3bd] {
        background-size: contain;
        background-repeat: no-repeat;
    }
}

.tour-content[b-khhlm5i3bd] {
    padding: 1.5rem;
    background-color: var(--color-surface);
    border-radius: 20px 20px 0 0;
    margin-top: -20px; /* Pulls the content up over the image slightly */
    position: relative;
}

.tour-title[b-khhlm5i3bd] {
    font-size: 1.8rem;
    font-weight: 700;
}

.tour-meta-info[b-khhlm5i3bd] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-secondary-text);
    display: flex;
    gap: 5px;
    margin-top: 8px;
    margin-bottom: 1.5rem;
}

.tour-description[b-khhlm5i3bd] {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-secondary-text);
}

.btn-purchase[b-khhlm5i3bd] {
    width: 100%;
    padding: 18px;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 2rem;
}

/* ---- Base común para los 3 botones ---- */
.btn-purchase[b-khhlm5i3bd],
.btn-download[b-khhlm5i3bd],
.btn-delete[b-khhlm5i3bd] {
    width: 100%;
    padding: 16px 18px;
    border: none;
    border-radius: 15px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: filter .15s, transform .1s;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
}

    /* Hover / active */
    .btn-purchase:hover:not(:disabled)[b-khhlm5i3bd],
    .btn-download:hover:not(:disabled)[b-khhlm5i3bd],
    .btn-delete:hover:not(:disabled)[b-khhlm5i3bd] {
        filter: brightness(1.05);
    }

    .btn-purchase:active:not(:disabled)[b-khhlm5i3bd],
    .btn-download:active:not(:disabled)[b-khhlm5i3bd],
    .btn-delete:active:not(:disabled)[b-khhlm5i3bd] {
        transform: scale(.98);
    }

    /* Disabled */
    .btn-download:disabled[b-khhlm5i3bd] {
        opacity: .7;
        cursor: default;
    }

/* ---- Colores específicos ---- */
.btn-purchase[b-khhlm5i3bd] {
    background-color: var(--color-accent);
    color: #fff;
}

.btn-download[b-khhlm5i3bd] {
    /* tono neutro (puedes ajustar la var o el color) */
    background-color: var(--color-surface-variant, #e9eef3);
    color: var(--color-text, #000);
}

.btn-delete[b-khhlm5i3bd] {
    background-color: #ff4d4f;
    color: #fff;
}

/* ---- Spinner automático cuando está deshabilitado (descargando) ---- */
.btn-download:disabled[b-khhlm5i3bd]::after {
    content: "";
    width: 18px;
    height: 18px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    margin-left: 8px;
    animation: spin-b-khhlm5i3bd .75s linear infinite;
}

/* Si quieres que el texto no “salte” cuando aparece el spinner */
.btn-download:disabled span[b-khhlm5i3bd] {
    opacity: .9;
}

/* Animación spinner */
@keyframes spin-b-khhlm5i3bd {
    to {
        transform: rotate(360deg);
    }
}


.modal-overlay[b-khhlm5i3bd] {
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3000;
    backdrop-filter: blur(5px);
}

.modal-content[b-khhlm5i3bd] {
    background-color: var(--color-surface);
    padding: 2rem;
    border-radius: 16px;
    text-align: center;
    max-width: 300px;
}

.modal-button[b-khhlm5i3bd] {
    width: 100%;
    padding: 18px;
    background-color: var(--color-accent);
    color: white;
    border: none;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.5rem;
}

.stops-list[b-khhlm5i3bd] {
    margin-top: 2rem;
}

    .stops-list h4[b-khhlm5i3bd] {
        font-size: 1.2rem;
        margin-bottom: 0.5rem;
    }

    .stops-list ol[b-khhlm5i3bd] {
        padding-left: 20px; /* Indent the list */
        margin: 0;
        line-height: 1.6;
        color: var(--color-secondary-text);
    }

.loading-container[b-khhlm5i3bd] {
    text-align: center;
}

    .loading-container p[b-khhlm5i3bd] {
        color: var(--color-secondary-text);
    }


.intro-player[b-khhlm5i3bd] {
    margin-top: 2rem;
}

    .intro-player h4[b-khhlm5i3bd] {
        margin-bottom: 0.75rem;
    }


/* This new CSS block only applies to screens 992px and wider */
@media (min-width: 992px) {
    .detail-grid-container[b-khhlm5i3bd] {
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 2.5rem;
        align-items: start;
    }

    .sidebar-content[b-khhlm5i3bd] {
        position: sticky;
        top: 1rem;
    }

    .stops-list[b-khhlm5i3bd] {
        padding: 1.5rem;
        border: 1px solid var(--color-border);
        border-radius: 12px;
        background-color: var(--color-background);
        margin-top: -0.5rem; /* Add negative margin to move it up closer to the image */
    }

    /* Update this style for the button container */
    .action-buttons[b-khhlm5i3bd] {
        display: flex;
        justify-content: center; /* Center buttons horizontally */
        gap: 1rem; /* Space between buttons */
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--color-border);
    }
}



/* Crossed out price styles */
.tour-price.crossed-out[b-khhlm5i3bd] {
    text-decoration: line-through;
    opacity: 0.6;
}

.promo-label[b-khhlm5i3bd] {
    color: #28a745;
    font-weight: 600;
    margin-left: 0.25rem;
    font-size: 0.85em;
}




/* ---- Primary and Secondary Button Styles ---- */
.btn-primary[b-khhlm5i3bd],
.btn-secondary[b-khhlm5i3bd] {
    width: 100%;
    padding: 16px 18px;
    border: none;
    border-radius: 15px;
    font-size: 1.05rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    transition: filter .15s, transform .1s;
    -webkit-appearance: none;
    appearance: none;
    user-select: none;
    text-decoration: none;
}

    /* Hover / active states */
    .btn-primary:hover:not(:disabled)[b-khhlm5i3bd],
    .btn-secondary:hover:not(:disabled)[b-khhlm5i3bd] {
        filter: brightness(1.05);
    }

    .btn-primary:active:not(:disabled)[b-khhlm5i3bd],
    .btn-secondary:active:not(:disabled)[b-khhlm5i3bd] {
        transform: scale(.98);
    }

    /* Disabled states */
    .btn-primary:disabled[b-khhlm5i3bd],
    .btn-secondary:disabled[b-khhlm5i3bd] {
        opacity: .7;
        cursor: default;
    }

/* ---- Primary Button (same as accent color) ---- */
.btn-primary[b-khhlm5i3bd] {
    background-color: var(--color-accent);
    color: #fff;
}

/* ---- Secondary Button (neutral style) ---- */
.btn-secondary[b-khhlm5i3bd] {
    background-color: var(--color-surface-variant, #e9eef3);
    color: var(--color-text, #000);
    border: 1px solid var(--color-border, #ddd);
}

    .btn-secondary:hover:not(:disabled)[b-khhlm5i3bd] {
        background-color: var(--color-border, #ddd);
    }

/* ---- Tour Pricing Display ---- */
.tour-pricing[b-khhlm5i3bd] {
    text-align: center;
    margin-top: 1.4rem;
}

    .tour-pricing .tour-price[b-khhlm5i3bd] {
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--color-accent);
        margin: 0 0 1rem 0;
    }

/* ---- Download Status Messages ---- */
.download-status[b-khhlm5i3bd] {
    text-align: center;
    padding: 1rem;
    margin-top: 1.4rem;
    border-radius: 10px;
    font-weight: 500;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
}

/* ---- Delete button ---- */
.btn-delete-modal[b-khhlm5i3bd] {
    background: #ff4757;
    color: white;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-delete-modal:hover:not(:disabled)[b-khhlm5i3bd] {
        background: #ff3742;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3);
    }

    .btn-delete-modal:disabled[b-khhlm5i3bd] {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ---- Payment Disabled Message ---- */
.payment-disabled[b-khhlm5i3bd] {
    text-align: center;
    padding: 1rem;
    margin-top: 1.4rem;
    color: var(--color-secondary-text);
    font-style: italic;
    background-color: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 10px;
}

/* ---- Tour Price Display (in meta info) ---- */
.tour-price[b-khhlm5i3bd] {
    color: var(--color-accent);
    font-weight: 600;
}

/* ---- Modal Actions (for override dialog) ---- */
.modal-actions[b-khhlm5i3bd] {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
    justify-content: flex-end;
}

    .modal-actions .btn-primary[b-khhlm5i3bd],
    .modal-actions .btn-secondary[b-khhlm5i3bd] {
        width: auto;
        margin-top: 0;
        padding: 0.75rem 1.5rem;
        font-size: 0.95rem;
    }

/* ---- Responsive Design for Buttons ---- */
@media (min-width: 992px) {
    .action-buttons[b-khhlm5i3bd] {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-top: 2rem;
        padding-top: 2rem;
        border-top: 1px solid var(--color-border);
    }

        .action-buttons .btn-primary[b-khhlm5i3bd],
        .action-buttons .btn-secondary[b-khhlm5i3bd],
        .action-buttons .btn-purchase[b-khhlm5i3bd],
        .action-buttons .btn-download[b-khhlm5i3bd],
        .action-buttons .btn-delete[b-khhlm5i3bd] {
            width: auto;
            min-width: 200px;
            flex: 0 0 auto;
        }
}

/* ---- Dark Mode Support ---- */
html.dark .btn-secondary[b-khhlm5i3bd] {
    background-color: var(--color-surface);
    color: var(--color-primary-text);
    border-color: var(--color-border);
}

    html.dark .btn-secondary:hover:not(:disabled)[b-khhlm5i3bd] {
        background-color: var(--color-border);
    }

html.dark .download-status[b-khhlm5i3bd],
html.dark .payment-disabled[b-khhlm5i3bd] {
    background-color: var(--color-surface);
    border-color: var(--color-border);
}



/* Location Permission Modal */
.location-permission-modal[b-khhlm5i3bd] {
    max-width: 500px;
    width: 90vw;
    max-height: 85vh;
    overflow-y: auto;
}

.location-modal-header[b-khhlm5i3bd] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 1.5rem 1rem 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

    .location-modal-header h3[b-khhlm5i3bd] {
        margin: 0;
        color: var(--color-primary-text);
        font-size: 1.25rem;
        font-weight: 600;
    }

    .location-modal-header .close-button[b-khhlm5i3bd] {
        background: none;
        border: none;
        font-size: 1.5rem;
        color: var(--color-secondary-text);
        cursor: pointer;
        padding: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        transition: background-color 0.2s ease;
    }

        .location-modal-header .close-button:hover[b-khhlm5i3bd] {
            background-color: var(--color-hover);
        }

.location-modal-body[b-khhlm5i3bd] {
    padding: 1.5rem;
    text-align: center;
}

.location-icon[b-khhlm5i3bd] {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.location-explanation[b-khhlm5i3bd] {
    font-size: 1rem;
    color: var(--color-primary-text);
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.device-instructions[b-khhlm5i3bd] {
    text-align: left;
    margin-bottom: 1.5rem;
}

    .device-instructions h4[b-khhlm5i3bd] {
        margin: 0 0 0.5rem 0;
        color: var(--color-primary-text);
        font-size: 1rem;
        font-weight: 600;
    }

.platform-info[b-khhlm5i3bd] {
    background: var(--color-background);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--color-primary);
    font-weight: 600;
}

.instruction-steps[b-khhlm5i3bd] {
    margin: 1rem 0;
    padding-left: 1.25rem;
    color: var(--color-primary-text);
}

    .instruction-steps li[b-khhlm5i3bd] {
        margin-bottom: 0.5rem;
        line-height: 1.4;
    }

.location-benefits[b-khhlm5i3bd] {
    background: color-mix(in oklab, var(--color-primary) 8%, transparent);
    border: 1px solid color-mix(in oklab, var(--color-primary) 20%, transparent);
    border-radius: 8px;
    padding: 1rem;
    text-align: left;
}

    .location-benefits h4[b-khhlm5i3bd] {
        margin: 0 0 0.75rem 0;
        color: var(--color-primary-text);
        font-size: 0.95rem;
        font-weight: 600;
    }

    .location-benefits ul[b-khhlm5i3bd] {
        margin: 0;
        padding: 0;
        list-style: none;
    }

        .location-benefits ul li[b-khhlm5i3bd] {
            margin-bottom: 0.5rem;
            color: var(--color-primary-text);
            line-height: 1.4;
            font-size: 0.9rem;
        }

.location-modal-actions[b-khhlm5i3bd] {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.5rem 1.5rem;
    border-top: 1px solid var(--color-border);
}

    .location-modal-actions .btn-primary[b-khhlm5i3bd],
    .location-modal-actions .btn-secondary[b-khhlm5i3bd] {
        flex: 1;
        padding: 0.75rem 1rem;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.2s ease;
    }

    .location-modal-actions .btn-primary[b-khhlm5i3bd] {
        background: var(--color-primary);
        color: white;
        border: none;
    }

        .location-modal-actions .btn-primary:hover[b-khhlm5i3bd] {
            background: color-mix(in oklab, var(--color-primary) 90%, black);
            transform: translateY(-1px);
        }

    .location-modal-actions .btn-secondary[b-khhlm5i3bd] {
        background: var(--color-background);
        color: var(--color-primary-text);
        border: 1px solid var(--color-border);
    }

        .location-modal-actions .btn-secondary:hover[b-khhlm5i3bd] {
            background: var(--color-hover);
            transform: translateY(-1px);
        }

/* Mobile responsive */
@media (max-width: 768px) {
    .location-permission-modal[b-khhlm5i3bd] {
        width: calc(100vw - 1rem);
        margin: 0.5rem;
    }

    .location-modal-header[b-khhlm5i3bd],
    .location-modal-body[b-khhlm5i3bd],
    .location-modal-actions[b-khhlm5i3bd] {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .location-modal-actions[b-khhlm5i3bd] {
        flex-direction: column;
    }

        .location-modal-actions .btn-primary[b-khhlm5i3bd],
        .location-modal-actions .btn-secondary[b-khhlm5i3bd] {
            width: 100%;
        }

    .instruction-steps[b-khhlm5i3bd] {
        padding-left: 1rem;
    }
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
    .location-permission-modal[b-khhlm5i3bd] {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .platform-info[b-khhlm5i3bd] {
        background: var(--color-surface);
    }

    .location-benefits[b-khhlm5i3bd] {
        background: color-mix(in oklab, var(--color-primary) 15%, transparent);
        border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
    }
}


.loading-spinner-small[b-khhlm5i3bd] {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin-b-khhlm5i3bd 1s ease-in-out infinite;
    margin-right: 8px;
}

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




.error-message[b-khhlm5i3bd] {
    background: #fee;
    border: 1px solid #f88;
    border-radius: 8px;
    padding: 12px;
    margin-top: 1rem;
    color: #c33;
    font-size: 0.9rem;
    text-align: center;
}

.payment-disabled[b-khhlm5i3bd] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 1rem;
    color: var(--color-secondary-text);
    text-align: center;
    font-style: italic;
}

.loading-spinner-small[b-khhlm5i3bd] {
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top: 2px solid currentColor;
    border-radius: 50%;
    animation: spin-b-khhlm5i3bd 1s linear infinite;
    display: inline-block;
    margin-right: 8px;
}

@keyframes spin-b-khhlm5i3bd {
    0% {
        transform: rotate(0deg);
    }

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

/* Update button disabled states */
.btn-purchase:disabled[b-khhlm5i3bd] {
    opacity: 0.7;
    cursor: not-allowed;
    filter: none;
}

    .btn-purchase:disabled:hover[b-khhlm5i3bd] {
        filter: none;
        transform: none;
    }


.duration-with-icon[b-khhlm5i3bd] {
    display: flex;
    align-items: center;
}

.walking-icon[b-khhlm5i3bd] {
    font-size: 0.85rem;
    opacity: 0.8;
    line-height: 1;
}

/* Make the icon slightly smaller on mobile */
@media (max-width: 768px) {
    .walking-icon[b-khhlm5i3bd] {
        font-size: 0.8rem;
    }
}