/* /Pages/ChoosePlan.razor.rz.scp.css */
/* Same dark cinematic glassmorphism language as Login/Register/ForgotPassword */

.plan-select-bg[b-vx0tpuh02a] {
    min-height: 100vh;
    width: 100%;
    padding: 2rem 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background:
        linear-gradient(to bottom right, rgba(0, 0, 0, 0.7), rgba(15, 15, 15, 0.9)),
        url('https://images.unsplash.com/photo-1517604931442-7e0c8ed2963c?q=80&w=2070&auto=format&fit=crop') center/cover no-repeat;
    background-attachment: fixed;
}

.plan-select-card[b-vx0tpuh02a] {
    width: 100%;
    max-width: 1100px;
    margin: 2rem auto;
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    padding: 3rem 2.5rem;
}

[b-vx0tpuh02a] .auth-title {
    color: #ffffff;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[b-vx0tpuh02a] .auth-subtitle {
    color: #9ca3af;
    font-weight: 500;
}

[b-vx0tpuh02a] .current-plan-banner {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 16px;
}

[b-vx0tpuh02a] .plan-card {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 20px;
    backdrop-filter: blur(5px);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

[b-vx0tpuh02a] .plan-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

[b-vx0tpuh02a] .plan-card h3 {
    color: #e50914;
}

[b-vx0tpuh02a] .plan-card .plan-price {
    color: #ffffff;
}

[b-vx0tpuh02a] .plan-card .plan-duration {
    color: #9ca3af;
}

[b-vx0tpuh02a] .plan-card ul li {
    color: #e5e7eb;
}

[b-vx0tpuh02a] .plan-card ul li span.check {
    color: #34d399;
}

[b-vx0tpuh02a] .payment-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
}

[b-vx0tpuh02a] .payment-box label {
    color: #e5e7eb;
}

[b-vx0tpuh02a] .glass-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

[b-vx0tpuh02a] .glass-input::placeholder {
    color: #9ca3af;
}

[b-vx0tpuh02a] .glass-input:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

[b-vx0tpuh02a] .glass-button {
    background: #e50914;
    border-radius: 12px;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    transition: all 0.3s ease;
}

[b-vx0tpuh02a] .glass-button:hover:not(:disabled) {
    background: #f40612;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.5);
}

[b-vx0tpuh02a] .glass-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

[b-vx0tpuh02a] .alert-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #ffb3b8;
    border-radius: 10px;
}

@media (max-width: 700px) {
    .plan-select-card[b-vx0tpuh02a] {
        padding: 2rem 1.25rem;
    }
}
/* /Pages/Contact.razor.rz.scp.css */
.contact-page[b-kgaerfdbqs] {
    /* Escapes MainLayout's padded <article class="content px-4"> wrapper entirely (same approach as
       Login.razor.css's .split-auth-container) so this renders full-bleed regardless of that
       ancestor's padding. */
    position: fixed;
    inset: 0;
    overflow-y: auto;
    background: #0a0a0a;
    color: #e5e7eb;
}

.contact-top[b-kgaerfdbqs] {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.75rem;
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.contact-brand img[b-kgaerfdbqs] {
    height: 32px;
}

.back-link[b-kgaerfdbqs] {
    color: #9ca3af;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
}

.back-link:hover[b-kgaerfdbqs] {
    color: #ffffff;
}

.contact-wrapper[b-kgaerfdbqs] {
    max-width: 1100px;
    margin: 0 auto;
    padding: 4.5rem 1.5rem;
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 3rem;
    align-items: start;
}

.section-eyebrow[b-kgaerfdbqs] {
    display: inline-block;
    color: #e50914;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.8rem;
    margin-bottom: 0.75rem;
}

.contact-info h1[b-kgaerfdbqs] {
    font-size: 2.2rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 1rem;
    letter-spacing: -0.5px;
}

.contact-info > p[b-kgaerfdbqs] {
    color: #9ca3af;
    line-height: 1.7;
    margin-bottom: 2rem;
}

.contact-info strong[b-kgaerfdbqs] {
    color: #ffffff;
}

.contact-detail[b-kgaerfdbqs] {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1.1rem 1.3rem;
    margin-bottom: 1rem;
}

.contact-detail .oi[b-kgaerfdbqs] {
    font-size: 1.25rem;
    color: #e50914;
    margin-top: 0.15rem;
}

.contact-detail strong[b-kgaerfdbqs] {
    display: block;
    color: #ffffff;
    margin-bottom: 0.2rem;
}

.contact-detail a[b-kgaerfdbqs], .contact-detail span[b-kgaerfdbqs] {
    color: #9ca3af;
    text-decoration: none;
    font-size: 0.92rem;
}

.contact-detail a:hover[b-kgaerfdbqs] {
    color: #ff8a94;
}

.contact-form-card[b-kgaerfdbqs] {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 2.25rem;
}

.contact-form-card .input-group[b-kgaerfdbqs] {
    margin-bottom: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.contact-form-card .input-group label[b-kgaerfdbqs] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #d1d5db;
}

.contact-form-card .glass-input[b-kgaerfdbqs] {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.95rem;
    transition: all 0.2s ease;
}

.contact-form-card .glass-input[b-kgaerfdbqs]::placeholder {
    color: #6b7280;
}

.contact-form-card .glass-input:focus[b-kgaerfdbqs] {
    outline: none;
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2);
    background: rgba(255, 255, 255, 0.08);
}

.contact-form-card textarea.glass-input[b-kgaerfdbqs] {
    resize: vertical;
    min-height: 110px;
}

.contact-form-card .validation-message[b-kgaerfdbqs] {
    color: #f87171;
    font-size: 0.8rem;
    margin-top: -0.15rem;
}

.contact-form-card .glass-button[b-kgaerfdbqs] {
    width: 100%;
    background: #e50914;
    color: #ffffff;
    border: none;
    border-radius: 12px;
    padding: 0.9rem;
    font-weight: 700;
    font-size: 0.98rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(229, 9, 20, 0.3);
}

.contact-form-card .glass-button:hover[b-kgaerfdbqs] {
    background: #f40612;
    transform: translateY(-1px);
}

.contact-form-card .glass-button:disabled[b-kgaerfdbqs] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.contact-form-card .alert-error[b-kgaerfdbqs] {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.35);
    color: #ffb3b8;
    border-radius: 10px;
    padding: 0.9rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 0.88rem;
}

.sent-state[b-kgaerfdbqs] {
    text-align: center;
    padding: 2rem 0.5rem;
}

.sent-icon[b-kgaerfdbqs] {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 1rem;
}

.sent-state h4[b-kgaerfdbqs] {
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0.5rem;
}

.sent-state p[b-kgaerfdbqs] {
    color: #9ca3af;
    margin-bottom: 1.5rem;
}

.btn-plan-cta[b-kgaerfdbqs] {
    display: inline-block;
    padding: 0.8rem 1.75rem;
    border-radius: 999px;
    background: #e50914;
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 8px 20px rgba(229, 9, 20, 0.3);
}

.btn-plan-cta:hover[b-kgaerfdbqs] {
    background: #f40612;
    transform: translateY(-1px);
}

@media (max-width: 800px) {
    .contact-wrapper[b-kgaerfdbqs] {
        grid-template-columns: 1fr;
    }
}
/* /Pages/ForgotPassword.razor.rz.scp.css */
/* CinSnacks Logo Theme: Dark Cinematic Glassmorphism */

.split-auth-container[b-6obizenur4] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    background: transparent;
    overflow-y: auto;
}

.split-auth-card[b-6obizenur4] {
    display: flex;
    flex-direction: row;
    /* Glassmorphism panel so background is visible through it */
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    width: 100%;
    max-width: 950px;
    min-height: 550px;
    margin: auto;
}

.split-auth-visual[b-6obizenur4] {
    flex: 1;
    position: relative;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Transparent so the glass effect shows through */
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo-link[b-6obizenur4] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.brand-logo[b-6obizenur4] {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(229, 9, 20, 0.3));
    transition: transform 0.3s ease;
    cursor: pointer;
}

.brand-logo-link:hover .brand-logo[b-6obizenur4],
.brand-logo:hover[b-6obizenur4] {
    transform: scale(1.04);
}

/* Fallback styling for broken image (until user adds the logo) */
.brand-logo[alt][b-6obizenur4]:after {
    content: "Please add logo.png to wwwroot/";
    display: block;
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 10px;
}

.visual-content[b-6obizenur4] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.split-auth-form-container[b-6obizenur4] {
    flex: 1.1;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Slightly darker translucent background for the form area */
    background: rgba(0, 0, 0, 0.4);
}

[b-6obizenur4] .auth-title {
    color: #ffffff;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[b-6obizenur4] .auth-subtitle {
    color: #9ca3af;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

[b-6obizenur4] .input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

[b-6obizenur4] .input-group label {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    display: block;
}

[b-6obizenur4] .input-group > :not(:first-child) {
    margin-left: 0 !important;
    border-radius: 12px !important;
}

[b-6obizenur4] .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

[b-6obizenur4] .password-wrapper .glass-input {
    padding-right: 80px; /* Space for the toggle button */
}

[b-6obizenur4] .password-toggle {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
}

[b-6obizenur4] .password-toggle:hover {
    color: #ffffff;
}

[b-6obizenur4] .glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 12px !important;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin-left: 0 !important;
}

[b-6obizenur4] .glass-input::placeholder {
    color: #9ca3af;
}

[b-6obizenur4] .glass-input:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

[b-6obizenur4] .glass-button {
    background: #e50914;
    color: white;
    border-radius: 12px;
    padding: 1.1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    width: 100%;
}

[b-6obizenur4] .glass-button:hover {
    background: #f40612;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.5);
}

[b-6obizenur4] .glass-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

[b-6obizenur4] .alert-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #ffb3b8;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[b-6obizenur4] a[href="/register"] {
    color: #e50914 !important;
    font-weight: 600;
}
[b-6obizenur4] a[href="/register"]:hover {
    color: #f40612 !important;
}

[b-6obizenur4] a[href="/forgot-password"] {
    color: #9ca3af !important;
    font-weight: 500;
}
[b-6obizenur4] a[href="/forgot-password"]:hover {
    color: #d1d5db !important;
}

@media (max-width: 900px) {
    .split-auth-container[b-6obizenur4] {
        padding: 1rem;
        align-items: flex-start;
    }

    .split-auth-card[b-6obizenur4] {
        flex-direction: column;
        min-height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    
    .split-auth-visual[b-6obizenur4] {
        padding: 3rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .brand-logo[b-6obizenur4] {
        max-height: 150px;
    }
    
    .split-auth-form-container[b-6obizenur4] {
        padding: 3rem 2rem;
    }
}
/* /Pages/Login.razor.rz.scp.css */
/* CinSnacks Logo Theme: Dark Cinematic Glassmorphism */

.split-auth-container[b-ck5wx0uopm] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    background: transparent;
    overflow-y: auto;
}

.split-auth-card[b-ck5wx0uopm] {
    display: flex;
    flex-direction: row;
    /* Glassmorphism panel so background is visible through it */
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    width: 100%;
    max-width: 950px;
    min-height: 550px;
    margin: auto;
}

.split-auth-visual[b-ck5wx0uopm] {
    flex: 1;
    position: relative;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Transparent so the glass effect shows through */
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo-link[b-ck5wx0uopm] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.brand-logo[b-ck5wx0uopm] {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(229, 9, 20, 0.3));
    transition: transform 0.3s ease;
    cursor: pointer;
}

.brand-logo-link:hover .brand-logo[b-ck5wx0uopm],
.brand-logo:hover[b-ck5wx0uopm] {
    transform: scale(1.04);
}

/* Fallback styling for broken image (until user adds the logo) */
.brand-logo[alt][b-ck5wx0uopm]:after {
    content: "Please add logo.png to wwwroot/";
    display: block;
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 10px;
}

.visual-content[b-ck5wx0uopm] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.split-auth-form-container[b-ck5wx0uopm] {
    flex: 1.1;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Slightly darker translucent background for the form area */
    background: rgba(0, 0, 0, 0.4);
}

[b-ck5wx0uopm] .auth-title {
    color: #ffffff;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[b-ck5wx0uopm] .auth-subtitle {
    color: #9ca3af;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

[b-ck5wx0uopm] .input-group {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}

[b-ck5wx0uopm] .input-group label {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    display: block;
    width: 100%;
}

[b-ck5wx0uopm] .input-group > :not(:first-child) {
    margin-left: 0 !important;
    border-radius: 12px !important;
}

[b-ck5wx0uopm] .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

[b-ck5wx0uopm] .password-wrapper .glass-input {
    width: 100%;
    padding-right: 80px; /* Space for the toggle button */
}

[b-ck5wx0uopm] .password-toggle {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
}

[b-ck5wx0uopm] .password-toggle:hover {
    color: #ffffff;
}

[b-ck5wx0uopm] .glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 12px !important;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin-left: 0 !important;
}

[b-ck5wx0uopm] .glass-input::placeholder {
    color: #9ca3af;
}

[b-ck5wx0uopm] .glass-input:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

[b-ck5wx0uopm] .glass-button {
    background: #e50914;
    color: white;
    border-radius: 12px;
    padding: 1.1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    width: 100%;
}

[b-ck5wx0uopm] .glass-button:hover {
    background: #f40612;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.5);
}

[b-ck5wx0uopm] .glass-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

[b-ck5wx0uopm] .alert-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #ffb3b8;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[b-ck5wx0uopm] a[href="/register"] {
    color: #e50914 !important;
    font-weight: 600;
}
[b-ck5wx0uopm] a[href="/register"]:hover {
    color: #f40612 !important;
}

[b-ck5wx0uopm] a[href="/forgot-password"] {
    color: #9ca3af !important;
    font-weight: 500;
}
[b-ck5wx0uopm] a[href="/forgot-password"]:hover {
    color: #d1d5db !important;
}

@media (max-width: 900px) {
    .split-auth-container[b-ck5wx0uopm] {
        padding: 1rem;
        align-items: flex-start;
    }

    .split-auth-card[b-ck5wx0uopm] {
        flex-direction: column;
        min-height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    
    .split-auth-visual[b-ck5wx0uopm] {
        padding: 3rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .brand-logo[b-ck5wx0uopm] {
        max-height: 150px;
    }
    
    .split-auth-form-container[b-ck5wx0uopm] {
        padding: 3rem 2rem;
    }
}
/* /Pages/Register.razor.rz.scp.css */
/* CinSnacks Logo Theme: Dark Cinematic Glassmorphism */

.split-auth-container[b-awgeo1c6nb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    color-scheme: dark;
    background: transparent;
    overflow-y: auto;
}

.split-auth-card[b-awgeo1c6nb] {
    display: flex;
    flex-direction: row;
    /* Glassmorphism panel so background is visible through it */
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    width: 100%;
    max-width: 950px;
    min-height: 550px;
    margin: auto;
}

.split-auth-visual[b-awgeo1c6nb] {
    flex: 1;
    position: relative;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Transparent so the glass effect shows through */
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo-link[b-awgeo1c6nb] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.brand-logo[b-awgeo1c6nb] {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(229, 9, 20, 0.3));
    transition: transform 0.3s ease;
    cursor: pointer;
}

.brand-logo-link:hover .brand-logo[b-awgeo1c6nb],
.brand-logo:hover[b-awgeo1c6nb] {
    transform: scale(1.04);
}

/* Fallback styling for broken image (until user adds the logo) */
.brand-logo[alt][b-awgeo1c6nb]:after {
    content: "Please add logo.png to wwwroot/";
    display: block;
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 10px;
}

.visual-content[b-awgeo1c6nb] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.split-auth-form-container[b-awgeo1c6nb] {
    flex: 1.1;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Slightly darker translucent background for the form area */
    background: rgba(0, 0, 0, 0.4);
}

[b-awgeo1c6nb] .auth-title {
    color: #ffffff;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[b-awgeo1c6nb] .auth-subtitle {
    color: #9ca3af;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

[b-awgeo1c6nb] .input-group {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}

[b-awgeo1c6nb] .input-group label {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    display: block;
    width: 100%;
}

[b-awgeo1c6nb] .input-group > :not(:first-child) {
    margin-left: 0 !important;
    border-radius: 12px !important;
}

[b-awgeo1c6nb] .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

[b-awgeo1c6nb] .password-wrapper .glass-input {
    width: 100%;
    padding-right: 80px; /* Space for the toggle button */
}

[b-awgeo1c6nb] .password-toggle {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
}

[b-awgeo1c6nb] .password-toggle:hover {
    color: #ffffff;
}

[b-awgeo1c6nb] .glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 12px !important;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin-left: 0 !important;
}

[b-awgeo1c6nb] select.glass-input {
    color-scheme: dark;
    background-color: rgba(25, 25, 25, 0.85);
    color: #ffffff;
    cursor: pointer;
}

[b-awgeo1c6nb] select.glass-input option {
    background-color: #18181b !important;
    color: #ffffff !important;
}

[b-awgeo1c6nb] select.glass-input:focus {
    background-color: rgba(35, 35, 35, 0.95);
}

[b-awgeo1c6nb] .glass-input::placeholder {
    color: #9ca3af;
}

[b-awgeo1c6nb] .glass-input:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

[b-awgeo1c6nb] input:-webkit-autofill,
[b-awgeo1c6nb] input:-webkit-autofill:hover, 
[b-awgeo1c6nb] input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0px 1000px #1a1a1e inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

[b-awgeo1c6nb] .glass-button {
    background: #e50914;
    color: white;
    border-radius: 12px;
    padding: 1.1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    width: 100%;
}

[b-awgeo1c6nb] .glass-button:hover {
    background: #f40612;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.5);
}

[b-awgeo1c6nb] .glass-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

[b-awgeo1c6nb] .alert-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #ffb3b8;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[b-awgeo1c6nb] a[href="/register"] {
    color: #e50914 !important;
    font-weight: 600;
}
[b-awgeo1c6nb] a[href="/register"]:hover {
    color: #f40612 !important;
}

[b-awgeo1c6nb] a[href="/forgot-password"] {
    color: #9ca3af !important;
    font-weight: 500;
}
[b-awgeo1c6nb] a[href="/forgot-password"]:hover {
    color: #d1d5db !important;
}

@media (max-width: 900px) {
    .split-auth-container[b-awgeo1c6nb] {
        padding: 1rem;
        align-items: flex-start;
    }

    .split-auth-card[b-awgeo1c6nb] {
        flex-direction: column;
        min-height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    
    .split-auth-visual[b-awgeo1c6nb] {
        padding: 3rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .brand-logo[b-awgeo1c6nb] {
        max-height: 150px;
    }
    
    .split-auth-form-container[b-awgeo1c6nb] {
        padding: 3rem 2rem;
    }
}
/* /Pages/ResetPassword.razor.rz.scp.css */
/* CinSnacks Logo Theme: Dark Cinematic Glassmorphism */

.split-auth-container[b-idiekllgsb] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    background: transparent;
    overflow-y: auto;
}

.split-auth-card[b-idiekllgsb] {
    display: flex;
    flex-direction: row;
    /* Glassmorphism panel so background is visible through it */
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    width: 100%;
    max-width: 950px;
    min-height: 550px;
    margin: auto;
}

.split-auth-visual[b-idiekllgsb] {
    flex: 1;
    position: relative;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Transparent so the glass effect shows through */
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo-link[b-idiekllgsb] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.brand-logo[b-idiekllgsb] {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(229, 9, 20, 0.3));
    transition: transform 0.3s ease;
    cursor: pointer;
}

.brand-logo-link:hover .brand-logo[b-idiekllgsb],
.brand-logo:hover[b-idiekllgsb] {
    transform: scale(1.04);
}

/* Fallback styling for broken image (until user adds the logo) */
.brand-logo[alt][b-idiekllgsb]:after {
    content: "Please add logo.png to wwwroot/";
    display: block;
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 10px;
}

.visual-content[b-idiekllgsb] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.split-auth-form-container[b-idiekllgsb] {
    flex: 1.1;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Slightly darker translucent background for the form area */
    background: rgba(0, 0, 0, 0.4);
}

[b-idiekllgsb] .auth-title {
    color: #ffffff;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[b-idiekllgsb] .auth-subtitle {
    color: #9ca3af;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

[b-idiekllgsb] .input-group {
    position: relative;
    margin-bottom: 1.5rem;
}

[b-idiekllgsb] .input-group label {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    display: block;
}

[b-idiekllgsb] .input-group > :not(:first-child) {
    margin-left: 0 !important;
    border-radius: 12px !important;
}

[b-idiekllgsb] .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

[b-idiekllgsb] .password-wrapper .glass-input {
    padding-right: 80px; /* Space for the toggle button */
}

[b-idiekllgsb] .password-toggle {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
}

[b-idiekllgsb] .password-toggle:hover {
    color: #ffffff;
}

[b-idiekllgsb] .glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 12px !important;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin-left: 0 !important;
}

[b-idiekllgsb] .glass-input::placeholder {
    color: #9ca3af;
}

[b-idiekllgsb] .glass-input:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

[b-idiekllgsb] .glass-button {
    background: #e50914;
    color: white;
    border-radius: 12px;
    padding: 1.1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    width: 100%;
}

[b-idiekllgsb] .glass-button:hover {
    background: #f40612;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.5);
}

[b-idiekllgsb] .glass-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

[b-idiekllgsb] .alert-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #ffb3b8;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[b-idiekllgsb] a[href="/register"] {
    color: #e50914 !important;
    font-weight: 600;
}
[b-idiekllgsb] a[href="/register"]:hover {
    color: #f40612 !important;
}

[b-idiekllgsb] a[href="/forgot-password"] {
    color: #9ca3af !important;
    font-weight: 500;
}
[b-idiekllgsb] a[href="/forgot-password"]:hover {
    color: #d1d5db !important;
}

@media (max-width: 900px) {
    .split-auth-container[b-idiekllgsb] {
        padding: 1rem;
        align-items: flex-start;
    }

    .split-auth-card[b-idiekllgsb] {
        flex-direction: column;
        min-height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    
    .split-auth-visual[b-idiekllgsb] {
        padding: 3rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .brand-logo[b-idiekllgsb] {
        max-height: 150px;
    }
    
    .split-auth-form-container[b-idiekllgsb] {
        padding: 3rem 2rem;
    }
}
/* /Pages/VerifyOtp.razor.rz.scp.css */
/* CinSnacks Logo Theme: Dark Cinematic Glassmorphism */

.split-auth-container[b-ja6jfs2ec2] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
    padding: 2rem;
    background: transparent;
    overflow-y: auto;
}

.split-auth-card[b-ja6jfs2ec2] {
    display: flex;
    flex-direction: row;
    /* Glassmorphism panel so background is visible through it */
    background: rgba(20, 20, 20, 0.5);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow: hidden;
    width: 100%;
    max-width: 950px;
    min-height: 550px;
    margin: auto;
}

.split-auth-visual[b-ja6jfs2ec2] {
    flex: 1;
    position: relative;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Transparent so the glass effect shows through */
    background: transparent;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.brand-logo-link[b-ja6jfs2ec2] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.brand-logo[b-ja6jfs2ec2] {
    max-width: 100%;
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 10px 15px rgba(229, 9, 20, 0.3));
    transition: transform 0.3s ease;
    cursor: pointer;
}

.brand-logo-link:hover .brand-logo[b-ja6jfs2ec2],
.brand-logo:hover[b-ja6jfs2ec2] {
    transform: scale(1.04);
}

/* Fallback styling for broken image (until user adds the logo) */
.brand-logo[alt][b-ja6jfs2ec2]:after {
    content: "Please add logo.png to wwwroot/";
    display: block;
    color: #9ca3af;
    font-size: 0.9rem;
    text-align: center;
    margin-top: 10px;
}

.visual-content[b-ja6jfs2ec2] {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    width: 100%;
}

.split-auth-form-container[b-ja6jfs2ec2] {
    flex: 1.1;
    padding: 4rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Slightly darker translucent background for the form area */
    background: rgba(0, 0, 0, 0.4);
}

[b-ja6jfs2ec2] .auth-title {
    color: #ffffff;
    font-size: 2.4rem;
    margin-bottom: 0.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

[b-ja6jfs2ec2] .auth-subtitle {
    color: #9ca3af;
    margin-bottom: 2.5rem;
    font-weight: 500;
}

[b-ja6jfs2ec2] .input-group {
    position: relative;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    width: 100%;
}

[b-ja6jfs2ec2] .input-group label {
    color: #e5e7eb;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.4rem;
    display: block;
    width: 100%;
}

[b-ja6jfs2ec2] .input-group > :not(:first-child) {
    margin-left: 0 !important;
    border-radius: 12px !important;
}

[b-ja6jfs2ec2] .password-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

[b-ja6jfs2ec2] .password-wrapper .glass-input {
    width: 100%;
    padding-right: 80px; /* Space for the toggle button */
}

[b-ja6jfs2ec2] .password-toggle {
    position: absolute;
    right: 10px;
    background: transparent;
    border: none;
    color: #9ca3af;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: color 0.3s;
}

[b-ja6jfs2ec2] .password-toggle:hover {
    color: #ffffff;
}

[b-ja6jfs2ec2] .glass-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-radius: 12px !important;
    padding: 1rem 1.2rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
    margin-left: 0 !important;
}

[b-ja6jfs2ec2] .glass-input::placeholder {
    color: #9ca3af;
}

[b-ja6jfs2ec2] .glass-input:focus {
    border-color: #e50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.2), inset 0 0 0 1px rgba(255,255,255,0.05);
    background: rgba(255, 255, 255, 0.1);
    outline: none;
}

[b-ja6jfs2ec2] .glass-button {
    background: #e50914;
    color: white;
    border-radius: 12px;
    padding: 1.1rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: 0.5px;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(229, 9, 20, 0.4);
    width: 100%;
}

[b-ja6jfs2ec2] .glass-button:hover {
    background: #f40612;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(229, 9, 20, 0.5);
}

[b-ja6jfs2ec2] .glass-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

[b-ja6jfs2ec2] .alert-error {
    background: rgba(229, 9, 20, 0.15);
    border: 1px solid rgba(229, 9, 20, 0.3);
    color: #ffb3b8;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

[b-ja6jfs2ec2] a[href="/register"] {
    color: #e50914 !important;
    font-weight: 600;
}
[b-ja6jfs2ec2] a[href="/register"]:hover {
    color: #f40612 !important;
}

[b-ja6jfs2ec2] a[href="/forgot-password"] {
    color: #9ca3af !important;
    font-weight: 500;
}
[b-ja6jfs2ec2] a[href="/forgot-password"]:hover {
    color: #d1d5db !important;
}

@media (max-width: 900px) {
    .split-auth-container[b-ja6jfs2ec2] {
        padding: 1rem;
        align-items: flex-start;
    }

    .split-auth-card[b-ja6jfs2ec2] {
        flex-direction: column;
        min-height: auto;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
    
    .split-auth-visual[b-ja6jfs2ec2] {
        padding: 3rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    
    .brand-logo[b-ja6jfs2ec2] {
        max-height: 150px;
    }
    
    .split-auth-form-container[b-ja6jfs2ec2] {
        padding: 3rem 2rem;
    }
}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-loiq6gpy17] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-loiq6gpy17] {
    flex: 1;
    min-width: 0;
}

.sidebar[b-loiq6gpy17] {
    background: var(--sidebar-bg, #0f172a);
    border-right: none;
    transition: background-color 0.3s ease;
}

@media (max-width: 640.98px) {
    .page[b-loiq6gpy17] {
        overflow-x: hidden;
        max-width: 100vw;
    }

    main[b-loiq6gpy17] {
        overflow-x: hidden;
    }

    article.content[b-loiq6gpy17] {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

@media (min-width: 641px) {
    .page[b-loiq6gpy17] {
        flex-direction: row;
        height: 100vh;
        max-height: 100vh;
        overflow: hidden;
    }

    .sidebar[b-loiq6gpy17] {
        width: 250px;
        height: 100vh;
        flex-shrink: 0;
        overflow: hidden;
        z-index: 10;
    }

    main[b-loiq6gpy17] {
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
        min-width: 0;
        display: flex;
        flex-direction: column;
    }

    main[b-loiq6gpy17]::-webkit-scrollbar {
        width: 8px;
    }
    main[b-loiq6gpy17]::-webkit-scrollbar-track {
        background: transparent;
    }
    main[b-loiq6gpy17]::-webkit-scrollbar-thumb {
        background: #cbd5e1;
        border-radius: 4px;
    }
    main[b-loiq6gpy17]::-webkit-scrollbar-thumb:hover {
        background: #94a3b8;
    }
}

@media (min-width: 641px) and (max-width: 991.98px) {
    article.content[b-loiq6gpy17] {
        padding-left: 1.25rem !important;
        padding-right: 1rem !important;
    }
}

@media (min-width: 992px) {
    article.content[b-loiq6gpy17] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

/* Sidebar show/hide button - desktop only; phones keep the navbar hamburger. */
.sidebar-toggle[b-loiq6gpy17] {
    display: none;
}

@media (min-width: 641px) {
    .sidebar-toggle[b-loiq6gpy17] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0.9rem;
        left: 250px;
        width: 26px;
        height: 34px;
        padding: 0;
        border: none;
        border-radius: 0 8px 8px 0;
        background: var(--sidebar-active, #4338ca);
        color: #fff;
        font-size: 1.1rem;
        line-height: 1;
        cursor: pointer;
        z-index: 1000;
        box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.25);
        transition: left 0.2s ease, opacity 0.2s ease;
    }

    .sidebar-toggle:hover[b-loiq6gpy17] {
        opacity: 0.9;
    }

    .page.sidebar-hidden .sidebar[b-loiq6gpy17] {
        display: none;
    }

    .page.sidebar-hidden .sidebar-toggle[b-loiq6gpy17] {
        left: 0;
    }
}
/* /Shared/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-957adt1t78] {
    background-color: rgba(255, 255, 255, 0.1);
}

.free-plan-banner[b-957adt1t78] {
    background: var(--sidebar-active, #4338ca);
    color: #ffffff;
    font-size: 0.78rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
    flex-shrink: 0;
}

.free-plan-banner:hover[b-957adt1t78] {
    opacity: 0.9;
    color: #ffffff;
}

.top-row[b-957adt1t78] {
    height: 3.5rem;
    background-color: rgba(0, 0, 0, 0.15); /* Theme compatible subtle shade */
}

.navbar-brand[b-957adt1t78] {
    font-size: 1.1rem;
}

.oi[b-957adt1t78] {
    width: 2rem;
    font-size: 1.1rem;
    vertical-align: text-top;
    top: -2px;
}

.nav-item[b-957adt1t78] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

    .nav-item[b-957adt1t78]  a {
        color: #ffffff;
        border-radius: 8px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        transition: all 0.2s ease;
        margin: 0 0.5rem;
        padding-left: 1rem;
    }

.nav-item[b-957adt1t78]  a.active {
    background-color: var(--sidebar-active, #4338ca);
    color: #ffffff;
    border-left: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.nav-item[b-957adt1t78]  a:hover:not(.active) {
    background-color: var(--sidebar-hover, rgba(255, 255, 255, 0.1));
    color: #f8fafc;
}

/* Without this, clicking a non-navigating toggle link (e.g. the "POS" group expander, which only
   flips posMenuExpanded - it never gets Blazor's own .active class) left the browser's default
   click/focus outline sitting on it, which visually read as a second highlighted item alongside
   whichever page's NavLink was genuinely .active. Keyboard users still get a visible ring via
   :focus-visible. */
.nav-item[b-957adt1t78]  a:focus:not(:focus-visible) {
    outline: none;
}

.nav-item[b-957adt1t78]  a:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.6);
    outline-offset: -2px;
}

/* Modules container: ONLY this section scrolls when items exceed available height */
.nav-modules-scrollable[b-957adt1t78] {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.nav-modules-scrollable[b-957adt1t78]::-webkit-scrollbar {
    width: 5px;
}

.nav-modules-scrollable[b-957adt1t78]::-webkit-scrollbar-track {
    background: transparent;
}

.nav-modules-scrollable[b-957adt1t78]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 4px;
}

.nav-modules-scrollable[b-957adt1t78]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.4);
}

/* User info & logout footer remains permanently pinned at the bottom of the sidebar */
.sidebar-user-footer[b-957adt1t78] {
    flex-shrink: 0;
    margin-top: auto;
    background: inherit;
    position: relative;
    z-index: 2;
}

/* Scoping the flex layout to ":not(.collapse)" keeps mobile collapse behavior working */
.nav-scrollable:not(.collapse)[b-957adt1t78] {
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 3.5rem);
    overflow: hidden;
}

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

    .collapse[b-957adt1t78] {
        /* Never collapse the sidebar for wide screens - keep it a flex column */
        display: flex;
        flex-direction: column;
    }

    .nav-scrollable[b-957adt1t78] {
        /* Container takes full remaining height with NO scroll itself:
           only .nav-modules-scrollable inside scrolls */
        height: calc(100vh - 3.5rem);
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
}