@import '_content/DNI.Blazor.Controls/DNI.Blazor.Controls.uqp1dn0gvm.bundle.scp.css';

/* /Pages/Components/ErrorSettingPasswordComponent.razor.rz.scp.css */
.error-state-card[b-eur6gwkg7h] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 600px;
    border: 1px solid #B0B0B0;
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* Illustration */

.error-illustration-container[b-eur6gwkg7h] {
    max-width: 180px;
    margin: 0 auto 1.5rem auto;
}

.error-illustration-container img[b-eur6gwkg7h] {
    width: 100%;
    height: auto;
    display: block;
}

/* Typography */

[b-eur6gwkg7h] .error-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.error-description[b-eur6gwkg7h] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* =========================================
   Error Alert Box
   ========================================= */

.info-box[b-eur6gwkg7h] {
    background-color: rgba(239, 0, 0, 0.07 );
    border-radius: 15px;
    padding: 1.2rem 1rem 1.2rem 1rem;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0.7rem 1.4rem 0.7rem;
}

.info-icon[b-eur6gwkg7h] {
    color: #EF0000;
    font-size: 1.4rem;
    flex-shrink: 0;
}

.info-text[b-eur6gwkg7h] {
    color: var(--main-text);
    font-size: 0.97rem;
    line-height: inherit;
    margin: 0;
    font-weight: 400;
}

/* Go back Button */

.btn-back[b-eur6gwkg7h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    background-color: var(--secondary-btn);
    color: #ffffff;
    border: none;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
}

.btn-back:hover[b-eur6gwkg7h] {
    background-color: var(--secondary-btn-hover);
    color: #ffffff;
}

.btn-back .btn-icon[b-eur6gwkg7h] {
    display: flex;
    align-items: center;
}

.btn-back .material-symbols-outlined[b-eur6gwkg7h] {
    font-size: 20px;
}

.btn-back:focus[b-eur6gwkg7h],
.btn-back:active[b-eur6gwkg7h],
.btn-back.active[b-eur6gwkg7h] {
    background-color: var(--secondary-btn-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* Responsiveness — Width Breakpoints */

/* ---- Very small mobile (≤ 430px) ---- */
@media (max-width: 430px) {
    .error-illustration-container[b-eur6gwkg7h] {
        max-width: 130px;
    }

    .error-state-card[b-eur6gwkg7h] {
        padding: 1.75rem 1.25rem;
    }
}

/* ---- Mobile (≤ 576px) ---- */
@media (max-width: 576px) {
    .error-state-card[b-eur6gwkg7h] {
        max-width: 100%;
        width: calc(100% - 3px) !important;
        margin: 0 auto;
        border-radius: 24px;
        padding: 2rem 1.5rem;
    }

    .error-illustration-container[b-eur6gwkg7h] {
        max-width: 150px;
        margin-bottom: 1rem;
    }

    [b-eur6gwkg7h] .error-title {
        font-size: 1.1rem;
    }

    .error-description[b-eur6gwkg7h] {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .info-box[b-eur6gwkg7h] {
        flex-direction: row;
        align-items: flex-start;
        padding: 1rem;
        margin: 0 0 1.5rem 0 !important;
    }

    .info-text[b-eur6gwkg7h] {
        font-size: 0.95rem;
    }

    .btn-return-login[b-eur6gwkg7h] {
        width: 100%;
        min-width: unset;
        height: 46px;
    }
}

/* ---- Tablet (577px – 768px) ---- */
@media (min-width: 577px) and (max-width: 768px) {
    .error-state-card[b-eur6gwkg7h] {
        max-width: 85%;
        padding: 2rem 2.5rem;
    }
}


/* Responsiveness — Height Breakpoints */

/* ---- Short screens (≤ 700px) — shrink illustration ---- */
@media (max-height: 700px) {
    .error-illustration-container[b-eur6gwkg7h] {
        max-width: 120px;
        margin-bottom: 0.75rem;
    }

    .error-state-card[b-eur6gwkg7h] {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    .error-description[b-eur6gwkg7h] {
        margin-bottom: 1rem;
    }

    .info-box[b-eur6gwkg7h] {
        margin: 0 0 1.3rem 0 !important;
    }

}

@media (max-height: 600px) {
    .error-illustration-container[b-eur6gwkg7h] {
        max-width: 100px;
        margin-bottom: 0.5rem;
    }

    .error-state-card[b-eur6gwkg7h] {
        padding: 1.25rem 1.25rem;
    }

    [b-eur6gwkg7h] .error-title {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }

    .error-description[b-eur6gwkg7h] {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }
}
/* /Pages/Components/LoadingComponent.razor.rz.scp.css */
.select-accounts-card.skeleton-loader[b-5mct0u3pc4] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    border: 1px solid #B0B0B0;
    padding: 2.5rem !important;
    width: 100% !important;
    max-width: 650px !important;
    min-width: 500px;
    margin: 2rem auto !important;
    display: block !important;
}

[b-5mct0u3pc4] .placeholder {
    background-color: #e0e0e0 !important;
    border: none;
    display: block;
    animation: skeleton-glow-b-5mct0u3pc4 1.5s ease-in-out infinite !important;
}

@keyframes skeleton-glow-b-5mct0u3pc4 {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }

    100% {
        opacity: 1;
    }
}

[b-5mct0u3pc4] .skeleton-img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    margin: 0 auto;
}

[b-5mct0u3pc4] .skeleton-title {
    height: 1.6rem;
    border-radius: 4px;
}

[b-5mct0u3pc4] .skeleton-text {
    height: 1.1rem;
    border-radius: 4px;
}

[b-5mct0u3pc4] .skeleton-item {
    height: 85px;
    border-radius: 16px;
    width: 100%;
}

[b-5mct0u3pc4] .skeleton-btn {
    height: 48px;
    width: 140px;
    border-radius: 8px;
}

/* --- Height Breakpoints (Scaling the Skeleton) --- */

/* Laptops (Max Height 850px) */
@media (max-height: 850px) {
    .select-accounts-card.skeleton-loader[b-5mct0u3pc4] {
        padding: 1.5rem !important;
    }

    [b-5mct0u3pc4] .skeleton-img {
        width: 120px;
        height: 120px;
        margin-bottom: 1rem;
    }

    [b-5mct0u3pc4] .skeleton-item {
        height: 65px; 
    }
}

/* Short Screens (Max Height 720px) */
@media (max-height: 720px) {
    [b-5mct0u3pc4] .skeleton-img {
        width: 80px;
        height: 80px;
        margin-bottom: 0.75rem;
    }

    [b-5mct0u3pc4] .skeleton-title {
        height: 1.2rem;
    }

    [b-5mct0u3pc4] .skeleton-text {
        display: none;
    }

    .select-accounts-card.skeleton-loader[b-5mct0u3pc4] {
        margin-top: 0.5rem !important;
    }
}

/* Mobile (Width Check) */
@media (max-width: 576px) {
    .select-accounts-card.skeleton-loader[b-5mct0u3pc4] {
        min-width: calc(100vw - 3rem);
        border-radius: 24px;
        padding: 2rem 1.5rem !important;
    }
}
/* /Pages/Components/Login.razor.rz.scp.css */
.login-card[b-cfvte1ex85] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 500px;
    border: 1px solid #B0B0B0;
    padding: 3rem 3rem 2rem 3rem !important;
}

.ssp-title[b-cfvte1ex85] {
    font-size: 0.9rem;
    color: var(--small-text) !important;
    font-weight: 500;
    letter-spacing: 0.5px;
}

hr.my-4[b-cfvte1ex85] {
    margin-top: 2rem !important;
    margin-bottom: 2rem !important;
    border: 1px solid #afafaf;
}

/* Buttons */
.btn-custom[b-cfvte1ex85] {
    border: none;
    border-radius: 16px;
    font-weight: 400;
    position: relative;
    font-size: 1rem;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 1rem;
    padding-right: 1rem;
}

/* Primary Custom (Orange - OTP) */
.btn-primary-custom[b-cfvte1ex85] {
    background-color: var(--primary-btn);
    color: #ffffff;
}

    .btn-primary-custom:hover[b-cfvte1ex85] {
        background-color: var(--primary-btn-hover);
        color: #ffffff;
    }

/* Secondary Custom (Blue - ID-Porten) */
.btn-secondary-custom[b-cfvte1ex85] {
    background-color: var(--secondary-btn);
    color: #ffffff;
}

.btn-secondary-custom:hover[b-cfvte1ex85] {
    background-color: var(--secondary-btn-hover);
    color: #ffffff;
}

.btn-primary-custom:focus[b-cfvte1ex85],
.btn-primary-custom:active[b-cfvte1ex85],
.btn-primary-custom.active[b-cfvte1ex85],
.btn-check:checked + .btn-primary-custom[b-cfvte1ex85] {
    background-color: var(--primary-btn-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.btn-secondary-custom:focus[b-cfvte1ex85],
.btn-secondary-custom:active[b-cfvte1ex85],
.btn-secondary-custom.active[b-cfvte1ex85],
.btn-check:checked + .btn-secondary-custom[b-cfvte1ex85] {
    background-color: var(--secondary-btn-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.btn-text[b-cfvte1ex85] {
    font-size: 1.25rem;
    font-weight: 500;
}

/* Icon Box inside Buttons - Removed style for transparency */
.icon-box[b-cfvte1ex85] {
    width: auto;
    height: auto;
    min-width: auto;
    background-color: transparent;
    border-radius: 0;
    padding: 0;
    margin-right: 16px !important;
}

    .icon-box img[b-cfvte1ex85] {
        max-width: 40px;
        height: auto;
    }

/* Footer Links */

.footer-text p[b-cfvte1ex85] {
    color: var(--small-text);
    font-weight: 500;
}

.footer-link[b-cfvte1ex85] {
    color: var(--link-color);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none !important;
    border-bottom: 1px solid var(--link-color);
}

    .footer-link:hover[b-cfvte1ex85] {
        color: var(--secondary-btn-hover);
        border-bottom-color: var(--secondary-btn-hover);
    }

/* Icon Container (Lock) */
.icon-container[b-cfvte1ex85] {
    width: auto;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
    margin-bottom: 2rem !important;
}

.icon-container img[b-cfvte1ex85] {
    max-height: 145px;
    /* Significantly larger logo */
}


/* Responsive adjustments */
@media (max-width: 576px) {
    .login-card[b-cfvte1ex85] {
        padding: 1.5rem !important;
    }

    .btn-custom[b-cfvte1ex85] {
        height: 76px;
        font-size: 0.95rem;
    }

    .btn-text[b-cfvte1ex85] {
        font-size: 1rem;
        white-space: nowrap;
    }

    .btn-custom[b-cfvte1ex85] {
        padding-left: 12px;
        padding-right: 12px;
    }

    .icon-box[b-cfvte1ex85] {
        margin-right: 10px !important;
        /* Reduce gap */
    }

    .icon-container img[b-cfvte1ex85] {
        max-height: 100px;
    }
}

@media (max-height: 740px) {
    .login-card[b-cfvte1ex85] {
        padding: 2rem 3rem 1.5rem 3rem !important;
        max-width: 420px;
    }

    .icon-container[b-cfvte1ex85] {
        margin-bottom: 1.5rem !important;
        /* Increase from 1rem */
    }

        .icon-container img[b-cfvte1ex85] {
            max-height: 100px;
            /* Shrink logo from 145px */
        }

    .btn-custom[b-cfvte1ex85] {
        height: 60px;
        border-radius: 12px;
        /* Reduce border radius */
    }

    .icon-box img[b-cfvte1ex85] {
        max-width: 24px;
        /* Reduce icon size in button */
    }

    .btn-text[b-cfvte1ex85] {
        font-size: 1rem;
    }

    hr.my-4[b-cfvte1ex85] {
        margin-top: 1.5rem !important;
        /* Increase from 1rem */
        margin-bottom: 1.5rem !important;
    }

    .main-wrapper[b-cfvte1ex85] {
        padding: 0;
        /* Remove padding to maximize space */
        height: 100vh;
        /* Force exact height */
        overflow: hidden;
        /* Hide potential 1px overflows if content fits */
    }

    /* Ensure body doesn't scroll if we can help it */
    body[b-cfvte1ex85] {
        overflow-y: auto;
        /* Allow if absolutely needed, but wrapper tries to contain */
    }
}

/* Extra Short Screens */
@media (max-height: 650px) {
    .login-card[b-cfvte1ex85] {
        max-width: 380px;
        /* Even narrower for very short screens */
    }

    .icon-container img[b-cfvte1ex85] {
        max-height: 80px;
    }

    .btn-custom[b-cfvte1ex85] {
        height: 50px;
        font-size: 0.9rem;
    }

    [b-cfvte1ex85] .main-title {
        font-size: 1.5rem;
    }
}
/* /Pages/Components/LoginWithCodeFlow.razor.rz.scp.css */
/* OTP Step 1 - Buttons */

.send-code-btn[b-vm76lb86hl] {
    background-color: var(--primary-btn);
    border: none;
    color: #fff;
    height: 48px;
    border-radius: 8px;
    font-weight: 500;
    min-width: 146px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.send-code-btn .btn-arrow[b-vm76lb86hl] {
    width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.send-code-btn:hover:not(:disabled)[b-vm76lb86hl] {
    background-color: var(--primary-btn-hover);
    color: #fff;
}

.send-code-btn:hover:not(:disabled) .btn-arrow[b-vm76lb86hl] {
    width: 22px;
    opacity: 1;
    margin-left: 8px;
}

.send-code-btn:disabled[b-vm76lb86hl] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

.send-code-btn:disabled .btn-arrow[b-vm76lb86hl] {
    display: none;
}


.send-code-btn:focus[b-vm76lb86hl],
.send-code-btn:active[b-vm76lb86hl],
.send-code-btn.active[b-vm76lb86hl] {
    background-color: var(--primary-btn-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.send-code-btn:focus-visible:not(:disabled) .btn-arrow[b-vm76lb86hl] {
    width: 20px;
    opacity: 1;
    margin-left: 8px;
}

/* =========================================
   OTP Modal Styles (Mobile First)
   ========================================= */

/* Default : Mobile (Bottom Sheet) */
#otpLoginModal .modal-dialog[b-vm76lb86hl] {
    margin: 0;
    min-height: 100vh;
    align-items: flex-end;
    /* Bottom alignment */
    justify-content: center;
}

#otpLoginModal .modal-content[b-vm76lb86hl] {
    border-radius: 24px 24px 0 0;
    /* Rounded top only */
    border: none;
    box-shadow: 0px -10px 40px rgba(0, 0, 0, 0.1);
    /* Shadow upwards */
    padding: 1.5rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    /* Safe area for modern mobile browsers */
    width: 100%;
}

/* Mobile modal animations */
#otpLoginModal.show .modal-content[b-vm76lb86hl] {
    animation: slideUpFromBottom-b-vm76lb86hl 0.3s ease-out;
}

#otpLoginModal:not(.show) .modal-content[b-vm76lb86hl] {
    animation: slideDownToBottom-b-vm76lb86hl 0.3s ease-in;
}

/* Slide-up animation for mobile */
@keyframes slideUpFromBottom-b-vm76lb86hl {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* Slide-down animation for mobile close */
@keyframes slideDownToBottom-b-vm76lb86hl {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* =========================================
   Closing Animations (Mobile)
   ========================================= */
#otpLoginModal.modal-closing .modal-content[b-vm76lb86hl] {
    animation: slideDownToBottom-b-vm76lb86hl 0.3s ease-in forwards !important;
}

.modal-backdrop.backdrop-closing[b-vm76lb86hl] {
    animation: fadeOutBackdrop-b-vm76lb86hl 0.35s ease forwards !important;
}

/* Footer / Button Area */
.modal-footer-custom[b-vm76lb86hl] {
    margin-left: -1.5rem;
    /* Negate modal-body padding */
    margin-right: -1.5rem;
    /* Negate modal-body padding */
    margin-bottom: -1.5rem;
    /* Negate modal-body padding-bottom */
    padding: 1rem 1.5rem;
    border-top: 1.4px solid #DADADA;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background-color: transparent;
    border-radius: 0 0 24px 24px;
    /* Rounded bottom corners */
    margin-top: 2rem;
}

#otpLoginModal .modal-header .btn-close[b-vm76lb86hl] {
    opacity: 0.5;
    background-size: 12px;
    margin: 0;
    padding: 0.5rem;
    color: #616161;
}

#otpLoginModal .modal-header .btn-close:hover[b-vm76lb86hl] {
    opacity: 1;
    background-color: #F2F2F2;
}

/* Fix Header Alignment */
#otpLoginModal .modal-header[b-vm76lb86hl] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

/* Description Text Fix */
.otp-description[b-vm76lb86hl] {
    max-width: 420px !important;
    font-size: 1rem;
    line-height: 1.5;
}

/* OTP Modal Icon Wrapper - Restored BG */
.otp-icon-wrapper[b-vm76lb86hl] {
    width: 75px;
    height: 75px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
}

    .otp-icon-wrapper img[b-vm76lb86hl] {
        height: auto;
        width: 100%;
        max-width: 120px;
    }

/* Modal Title & Text */
#otpLoginModal .modal-title[b-vm76lb86hl] {
    font-size: 1.1rem;
    color: var(--main-text);
}

#otpLoginModal h4[b-vm76lb86hl] {
    color: var(--main-text);
    font-size: 1.25rem;
    /* Mobile Size */
}

/* Input Styling */
[b-vm76lb86hl] #personalNumberInput {
    height: 52px !important;
    border: 1.8px solid #909090 !important;
    border-radius: 17px !important;
    font-size: 1rem !important;
    padding-left: 12px !important;
    background-color: transparent !important;
    font-weight: 400 !important;
    color: var(--main-text) !important;
    transition: all 0.2s ease !important;
}

[b-vm76lb86hl] #personalNumberInput::placeholder {
    color: var(--placeholder) !important;
    font-weight: 400 !important;
}

[b-vm76lb86hl] #personalNumberInput:focus {
    box-shadow: 0 0 0 2px #C5E3F6 !important;
    border-color: var(--secondary-btn) !important;
    background-color: transparent !important;
    z-index: 1 !important;
}

/* Label Asterisk Fix */
.form-label[b-vm76lb86hl] {
    white-space: nowrap !important;
    /* Force no wrap */
    display: inline-block;
}

/* Error State */
.is-invalid[b-vm76lb86hl] {
    border-color: #EF0000 !important;
    background-image: none !important;
}

.invalid-feedback[b-vm76lb86hl],
.text-danger[b-vm76lb86hl] {
    color: #EF0000 !important;
}

#personalNumberError[b-vm76lb86hl] {
    color: #EF0000;
    text-align: left;
    display: flex;
    align-items: center;
}

/* Footer Buttons */
.btn-primary-custom.disabled-btn[b-vm76lb86hl] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    border: none;
    pointer-events: none;
}

.btn-cancel[b-vm76lb86hl] {
    border: 1px solid #909090;
    color: #595959;
    background-color: transparent;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.btn-cancel:hover[b-vm76lb86hl] {
    background-color: #F3F3F3;
    color: #1F1F1F;
    border-color: #949494;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}




/* =========================================
   Desktop / Tablet Enhancements (min-width: 576px)
   ========================================= */
@media (min-width: 576px) {

    #otpLoginModal .modal-dialog[b-vm76lb86hl] {
        align-items: center;
        /* Center vertically */
        min-height: calc(100% - 3.5rem);
        margin: 1.75rem auto;
        max-width: 34rem;
        /* Limit width */
        display: flex;
        justify-content: center;
    }

    #otpLoginModal .modal-content[b-vm76lb86hl] {
        border-radius: 24px;
        /* Full rounded corners */
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        animation: desktopSlideFadeIn-b-vm76lb86hl 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    /* Target the backdrop specifically for desktop if needed */
    [b-vm76lb86hl] .modal-backdrop.show {
        animation: desktopBackdropFade-b-vm76lb86hl 0.3s ease forwards;
    }

    /* Disable slide animations on desktop */
    /*#otpLoginModal.show .modal-content,
    #otpLoginModal:not(.show) .modal-content {
        animation: none !important;
    }*/

    #otpLoginModal h4[b-vm76lb86hl] {
        font-size: 1.5rem;
        /* Larger title */
    }

    /* OTP Inputs Larger */
    .otp-inputs[b-vm76lb86hl] {
        gap: 12px;
    }

    .otp-input[b-vm76lb86hl] {
        width: 65px;
        height: 75px;
        font-size: 1.75rem;
    }

    /* Ensure footer buttons have enough space */
    #otpStep1Btn[b-vm76lb86hl],
    #otpStep2Btn[b-vm76lb86hl] {
        height: 44px;
    }
}

/* =========================================
   Desktop Specific Keyframes
   ========================================= */
@keyframes desktopSlideFadeIn-b-vm76lb86hl {
    from {
        opacity: 0;
        transform: translateY(-40px); /* Start slightly above */
    }

    to {
        opacity: 1;
        transform: translateY(0); /* End at natural position */
    }
}

@keyframes desktopBackdropFade-b-vm76lb86hl {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

/* =========================================
   Closing Animations (Desktop)
   ========================================= */
@media (min-width: 576px) {
    #otpLoginModal.modal-closing .modal-content[b-vm76lb86hl] {
        animation: desktopSlideFadeOut-b-vm76lb86hl 0.3s ease-in forwards !important;
    }
}

/* Keyframes for Desktop Close */
@keyframes desktopSlideFadeOut-b-vm76lb86hl {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes fadeOutBackdrop-b-vm76lb86hl {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}

/* =========================================
   Reduced Motion Support (Accessibility)
   ========================================= */
@media (prefers-reduced-motion: reduce) {

    /* Disable slide animations */
    #otpLoginModal.show .modal-content[b-vm76lb86hl],
    #otpLoginModal:not(.show) .modal-content[b-vm76lb86hl] {
        animation: none !important;
    }

    /* Disable send code button arrow animation */
    .send-code-btn .btn-arrow[b-vm76lb86hl] {
        transition: none;
    }

    .send-code-btn:hover:not(:disabled) .btn-arrow[b-vm76lb86hl] {
        transition: none;
    }
}
/* /Pages/Components/LoginWithOtp.razor.rz.scp.css */
/* Description Text Fix */
.otp-description[b-1k7il2cyii] {
    max-width: 420px !important;
    font-size: 1rem;
    line-height: 1.5;
}

/* OTP Modal Icon Wrapper - Restored BG */
.otp-icon-wrapper[b-1k7il2cyii] {
    width: 75px;
    height: 75px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 35px;
}

.otp-icon-wrapper img[b-1k7il2cyii] {
    height: auto;
    width: 100%;
    max-width: 120px;
}


/* OTP Inputs Container (Mobile Default) */
.otp-inputs[b-1k7il2cyii] {
    gap: 12px;
    /* Consistent gap across all sizes */
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

/* OTP Input (Mobile Default) */
.otp-input[b-1k7il2cyii] {
    width: 65px;
    /* Match desktop width for consistency */
    height: 75px;
    /* Match desktop height for consistency */
    border-radius: 17px;
    background-color: transparent;
    border: 1.5px solid #909090;
    font-size: 1.75rem;
    /* Match desktop font size */
    font-weight: 500;
    color: var(--main-text);
    padding: 0;
    text-align: center;
    transition: all 0.2s ease;
}

    .otp-input:focus[b-1k7il2cyii] {
        background-color: transparent;
        border-color: var(--secondary-btn);
        box-shadow: 0 0 0 4px #C5E3F6;
        z-index: 1;
    }

    .otp-input.is-invalid[b-1k7il2cyii] {
        border-color: #EF0000 !important;
    }

/* Resend Link */
#resendOtpBtn[b-1k7il2cyii] {
    color: var(--link-color);
    font-weight: 600;
    font-size: 0.9rem;
    margin-top: 1rem;
    padding: 0;
}

#resendOtpBtn:hover[b-1k7il2cyii] {
    color: var(--secondary-btn-hover);
    text-decoration: underline !important;
}

/* Skeleton Styles (Mobile Default) */
.skeleton-modal-input[b-1k7il2cyii] {
    height: 56px;
    border-radius: 12px;
    width: 100%;
}

.skeleton-otp-input[b-1k7il2cyii] {
    width: 65px;
    /* Match OTP input size */
    height: 75px;
    border-radius: 12px;
    display: inline-block;
}

.skeleton-icon-wrapper-modal[b-1k7il2cyii] {
    width: 75px;
    height: 75px;
    border-radius: 12px;
}


/* Footer / Button Area */
.modal-footer-custom[b-1k7il2cyii] {
    margin-left: -1.5rem;
    /* Negate modal-body padding */
    margin-right: -1.5rem;
    /* Negate modal-body padding */
    margin-bottom: -1.5rem;
    /* Negate modal-body padding-bottom */
    padding: 1rem 1.5rem;
    border-top: 1.4px solid #DADADA;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    background-color: transparent;
    border-radius: 0 0 24px 24px;
    /* Rounded bottom corners */
    margin-top: 2rem;
}

/* Footer Buttons */

.login-btn[b-1k7il2cyii] {
    background-color: var(--primary-btn);
    height: 48px;
    border: none;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    min-width: 117px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.login-btn .btn-arrow[b-1k7il2cyii] {
    width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.login-btn:hover:not(:disabled)[b-1k7il2cyii] {
    background-color: var(--primary-btn-hover);
    color: #fff;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

.login-btn:hover:not(:disabled) .btn-arrow[b-1k7il2cyii] {
    width: 22px;
    opacity: 1;
    margin-left: 8px;
}

.login-btn:disabled[b-1k7il2cyii] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
}

.login-btn:disabled .btn-arrow[b-1k7il2cyii] {
    display: none;
}

.login-btn:focus[b-1k7il2cyii],
.login-btn:active[b-1k7il2cyii],
.login-btn.active[b-1k7il2cyii] {
    background-color: var(--primary-btn-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}


.login-btn:focus-visible:not(:disabled) .btn-arrow[b-1k7il2cyii] {
    width: 20px;
    opacity: 1;
    margin-left: 8px;
}

.btn-primary-custom.disabled-btn[b-1k7il2cyii] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    border: none;
    pointer-events: none;
}

.btn-cancel[b-1k7il2cyii] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 1.2rem;
    gap: 6px;
    border: 1px solid #909090;
    border-radius: 8px;
    color: #595959;
    background-color: transparent;
}

.btn-cancel:hover[b-1k7il2cyii] {
    background-color: #F3F3F3;
    color: #1F1F1F;
    border-color: #949494;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.btn-cancel .material-symbols-outlined[b-1k7il2cyii] {
    font-size: 22px; 
    display: block; 
    line-height: 1;
}

.footer-link[b-1k7il2cyii] {
    color: var(--link-color);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none !important;
    border-bottom: 1px solid var(--link-color);
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    background-color: transparent;
}

.footer-link:hover[b-1k7il2cyii] {
    color: var(--secondary-btn-hover);
    border-bottom-color: var(--secondary-btn-hover);
}

/* For input type number stylings appearance - removing increase and decrease buttons */

/* Chrome, Safari, Edge, Opera */
input[b-1k7il2cyii]::-webkit-outer-spin-button,
input[b-1k7il2cyii]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type=number][b-1k7il2cyii] {
    -moz-appearance: none;
}


/* Skeleton Styles (Mobile Default) */
.skeleton-modal-input[b-1k7il2cyii] {
    height: 56px;
    border-radius: 12px;
    width: 100%;
}

.skeleton-otp-input[b-1k7il2cyii] {
    width: 65px;
    /* Match OTP input size */
    height: 75px;
    border-radius: 12px;
    display: inline-block;
}

.skeleton-icon-wrapper-modal[b-1k7il2cyii] {
    width: 75px;
    height: 75px;
    border-radius: 12px;
}

.skeleton-btn[b-1k7il2cyii] {
    height: 76px;
    border-radius: 16px;
}

/* Media queries */
@media (max-width: 576px) {
    .skeleton-title[b-1k7il2cyii] {
        height: 24px;
        /* Reduced from 47px */
    }

    .skeleton-icon[b-1k7il2cyii] {
        width: 100px;
        height: 100px;
    }

    .skeleton-footer-links[b-1k7il2cyii] {
        height: 24px;
        /* Reduced from 45px */
    }

    .skeleton-btn[b-1k7il2cyii] {
        height: 76px;
        /* Match mobile button height */
    }

    /* Reduce margins in skeleton to match tighter mobile layout */
    .skeleton-icon-wrapper[b-1k7il2cyii] {
        margin-bottom: 1.5rem !important;
    }
}

/* Laptop Small/Standard (max-height: 768px mostly) */
/* Real Content: ~572-596px | Prev Skeleton: ~601-636px | Diff: -30-40px */
@media (min-width: 577px) and (max-height: 800px) {

    /* Target the laptop range explicitly */
    .skeleton-title[b-1k7il2cyii] {
        height: 32px;
        /* Reduce from 47px */
    }

    .skeleton-footer-links[b-1k7il2cyii] {
        height: 32px;
        /* Reduce from 45px */
    }

    .skeleton-icon-wrapper[b-1k7il2cyii] {
        margin-bottom: 1.5rem !important;
    }
}

@media (max-width: 576px) {
    .skeleton-btn[b-1k7il2cyii] {
        height: 86px;
    }
}
/* /Pages/Components/MfaComponent.razor.rz.scp.css */
/* Reset button stylings */

.btn-reset[b-qoaler0lgf] {
    color: var(--secondary-btn);
    border: none;
    border: 2px solid var(--secondary-btn);
    border-radius: 8px;
    padding: 12px 20px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-reset .spinner-border[b-qoaler0lgf] {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.btn-reset:hover[b-qoaler0lgf] {
    background-color: var(--secondary-btn);
    color: #fff;
}

.btn-reset:focus[b-qoaler0lgf],
.btn-reset:active[b-qoaler0lgf],
.btn-reset.active[b-qoaler0lgf] {
    background-color: var(--secondary-btn) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.btn-reset:disabled[b-qoaler0lgf] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    border: none !important;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

/* Modal Button styles */

.send-code-btn[b-qoaler0lgf] {
    background-color: var(--primary-btn);
    border: none;
    color: #fff;
    height: 48px;
    border-radius: 8px;
    font-weight: 500;
    min-width: 146px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.send-code-btn:hover:not(:disabled)[b-qoaler0lgf] {
    background-color: var(--primary-btn-hover);
    color: #fff;
}

.send-code-btn:disabled[b-qoaler0lgf] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

.send-code-btn:focus[b-qoaler0lgf],
.send-code-btn:active[b-qoaler0lgf],
.send-code-btn.active[b-qoaler0lgf] {
    background-color: var(--primary-btn) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

.btn-cancel[b-qoaler0lgf] {
    border: 1px solid #909090;
    color: #595959;
    background-color: transparent;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.btn-cancel:hover[b-qoaler0lgf] {
    background-color: #F3F3F3;
    color: #1F1F1F;
    border-color: #949494;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}


@media (max-width: 768px) {
    .btn-reset[b-qoaler0lgf] {
        width: 100%;
    }
}


/*  Modal Styles (Mobile First) */

#resetMFAModal .modal-dialog[b-qoaler0lgf] {
    margin: 0;
    min-height: 100vh;
    align-items: flex-end;
    justify-content: center;
}

#resetMFAModal .modal-content[b-qoaler0lgf] {
    border-radius: 24px 24px 0 0;
    border: none;
    box-shadow: 0px -10px 40px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
    width: 100%;
}

/* Mobile modal animations */
#resetMFAModal.show .modal-content[b-qoaler0lgf] {
    animation: slideUpFromBottom-b-qoaler0lgf 0.3s ease-out;
}

#resetMFAModal:not(.show) .modal-content[b-qoaler0lgf] {
    animation: slideDownToBottom-b-qoaler0lgf 0.3s ease-in;
}

#resetMFAModal .modal-body p[b-qoaler0lgf] {
    margin-bottom: 0.5rem;
}

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

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

@keyframes slideDownToBottom-b-qoaler0lgf {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

/* Closing Animations (Mobile) */

#resetMFAModal.modal-closing .modal-content[b-qoaler0lgf] {
    animation: slideDownToBottom-b-qoaler0lgf 0.3s ease-in forwards !important;
}

.modal-backdrop.backdrop-closing[b-qoaler0lgf] {
    animation: fadeOutBackdrop-b-qoaler0lgf 0.35s ease forwards !important;
}

/* Footer / Button Area */
.modal-footer-custom[b-qoaler0lgf] {
    padding: 1rem 1.5rem;
    border-top: 1.4px solid #DADADA;
    display: flex;
    justify-content: center;
    gap: 8px;
    background-color: transparent;
    border-radius: 0 0 24px 24px;
}

.modal-footer-custom .btn[b-qoaler0lgf] {
    min-width: 120px !important;
}

#resetMFAModal .modal-header .btn-close[b-qoaler0lgf] {
    opacity: 0.5;
    background-size: 12px;
    margin: 0;
    padding: 0.5rem;
    color: #616161;
}

#resetMFAModal .modal-header .btn-close:hover[b-qoaler0lgf] {
    opacity: 1;
    background-color: #F2F2F2;
}

/* Fix Header Alignment */
#resetMFAModal .modal-header[b-qoaler0lgf] {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}

/* Description Text Fix */
.reset-description[b-qoaler0lgf] {
    max-width: 420px !important;
    font-size: 1rem;
    line-height: 1.5;
}


/* Modal Title & Text */
#resetMFAModal .modal-title[b-qoaler0lgf] {
    font-size: 1.1rem;
    color: var(--main-text);
}

#resetMFAModal h4[b-qoaler0lgf] {
    color: var(--main-text);
    font-size: 1.25rem;
}


/* =========================================
   Desktop / Tablet Enhancements (min-width: 576px)
   ========================================= */
@media (min-width: 576px) {

    #resetMFAModal .modal-dialog[b-qoaler0lgf] {
        align-items: center;
        min-height: calc(100% - 3.5rem);
        margin: 1.75rem auto;
        max-width: 34rem;
        display: flex;
        justify-content: center;
    }

    #resetMFAModal .modal-content[b-qoaler0lgf] {
        border-radius: 24px;
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        animation: desktopSlideFadeIn-b-qoaler0lgf 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    /* Target the backdrop specifically for desktop if needed */
    [b-qoaler0lgf] .modal-backdrop.show {
        animation: desktopBackdropFade-b-qoaler0lgf 0.3s ease forwards;
    }

    #resetMFAModal h4[b-qoaler0lgf] {
        font-size: 1.5rem;
        
    }

}

/* =========================================
   Desktop Specific Keyframes
   ========================================= */
@keyframes desktopSlideFadeIn-b-qoaler0lgf {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }

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

@keyframes desktopBackdropFade-b-qoaler0lgf {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

/* =========================================
   Closing Animations (Desktop)
   ========================================= */
@media (min-width: 576px) {
    #resetMFAModal.modal-closing .modal-content[b-qoaler0lgf] {
        animation: desktopSlideFadeOut-b-qoaler0lgf 0.3s ease-in forwards !important;
    }
}

/* Keyframes for Desktop Close */
@keyframes desktopSlideFadeOut-b-qoaler0lgf {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-40px);
    }
}

@keyframes fadeOutBackdrop-b-qoaler0lgf {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}

/* =========================================
   Reduced Motion Support (Accessibility)
   ========================================= */
@media (prefers-reduced-motion: reduce) {

    #resetMFAModal.show .modal-content[b-qoaler0lgf],
    #resetMFAModal:not(.show) .modal-content[b-qoaler0lgf] {
        animation: none !important;
    }
}

/* Reset response stylings */

/* Better Subtlety for status backgrounds */
.bg-success-subtle[b-qoaler0lgf] {
    background-color: #e8f5e9 !important;
}

.bg-danger-subtle[b-qoaler0lgf] {
    background-color: #fceaea !important;
}

.result-item[b-qoaler0lgf] {
    border: 1px solid #E0E0E0; /* Softer border than 2px */
    transition: all 0.2s ease;
    background: #FAFAFA; /* Very light grey for inactive state */
}

/* Status-specific states */
.border-success[b-qoaler0lgf] {
    border-color: #28a745 !important;
    background-color: #F8FFF9 !important;
}

.border-danger[b-qoaler0lgf] {
    border-color: #dc3545 !important;
    background-color: #FFF9F9 !important;
}

.tertiary-text[b-qoaler0lgf] {
    color: var(--tertiary-text);
}

.badge[b-qoaler0lgf] {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.6rem;
    border-radius: 4px;
}

.spinner-color[b-qoaler0lgf] {
    color: #FC5700
}

.text-cstm-danger[b-qoaler0lgf] {
    color: #EF0000 !important;
}

#resetMFAModal .modal-body[b-qoaler0lgf] {
    max-height: 60vh; 
    overflow-y: auto;
    padding: 1.5rem;
}

    
#resetMFAModal .modal-body[b-qoaler0lgf]::-webkit-scrollbar {
    width: 8px;
}

#resetMFAModal .modal-body[b-qoaler0lgf]::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}
/* /Pages/Components/NoUserComponent.razor.rz.scp.css */
/* Card */
.no-accounts-found-card[b-ol89wvbiv3] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 540px;
    border: 1px solid #B0B0B0;
    padding: 1rem 3rem 2rem 3rem !important;
}

/* Illustration */
.illustration-container img[b-ol89wvbiv3] {
    max-width: 180px;
    height: auto;
}

/* Typography */
[b-ol89wvbiv3] .no-accounts-title {
    font-size: 1.25rem;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.no-accounts-desc[b-ol89wvbiv3] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.5;
    margin-bottom: 2rem;
}

/* Info Box */
.info-box[b-ol89wvbiv3] {
    background-color: #E1F5FE;
    border-radius: 15px;
    padding: 1.2rem 1rem 1.2rem 1rem;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0.7rem 1rem 0.7rem;
}

.info-icon[b-ol89wvbiv3] {
    color: var(--secondary-btn);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.info-text[b-ol89wvbiv3] {
    color: var(--main-text);
    font-size: 0.97rem;
    line-height: inherit;
    margin: 0;
    font-weight: 400;
}

/* Return Button */
.return-btn[b-ol89wvbiv3] {
    background-color: var(--secondary-btn);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    display: inline-flex;
    width: fit-content;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s;
    font-size: 1rem;
    margin-top: 2rem;
}

.return-btn:hover[b-ol89wvbiv3] {
    background-color: var(--secondary-btn-hover);
    color: #fff;
}

.return-btn .btn-icon[b-ol89wvbiv3] {
    font-size: 1.2rem;
}

.return-btn:focus[b-ol89wvbiv3],
.return-btn:active[b-ol89wvbiv3],
.return-btn.active[b-ol89wvbiv3] {
    background-color: var(--secondary-btn-hover) !important;
    color: #ffffff !important;
    box-shadow: none !important;
    border: none !important;
}

/* Media queries -  Responsive Adjustments */
@media (max-width: 576px) {
    .no-accounts-found-card[b-ol89wvbiv3] {
        padding: 1rem 1rem 2rem 1rem !important;
        width: 100%;
        max-width: 100%;
        border-radius: 24px;
    }

    .illustration-container img[b-ol89wvbiv3] {
        max-width: 150px;
    }

    [b-ol89wvbiv3] .no-accounts-title {
        font-size: 1.2rem;
    }

    .no-accounts-desc[b-ol89wvbiv3] {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .info-box[b-ol89wvbiv3] {
        flex-direction: row;
        align-items: flex-start;
        padding: 1rem;
        margin: 0 0 0.5rem 0 !important;
    }

    .info-text[b-ol89wvbiv3] {
        font-size: 0.95rem;
    }
}

@media (max-height: 700px) {
    .illustration-container[b-ol89wvbiv3] {
        display: none !important;
    }

    .illustration-container img[b-ol89wvbiv3] {
        display: none !important;
    }

    [b-ol89wvbiv3] .no-accounts-title {
        padding-top: 1rem;
    }

    .info-box[b-ol89wvbiv3] {
        margin: 0 !important;
    }
}
/* /Pages/Components/PasswordResetComponent.razor.rz.scp.css */
.reset-password-card[b-sqbvm15fdq] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 600px;
    border: 1px solid #B0B0B0;
    padding: 2.5rem 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    transition: padding 0.35s ease;
}

/* Typography */
[b-sqbvm15fdq] .reset-password-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.reset-password-description[b-sqbvm15fdq] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.5;
    margin-bottom: 1.5rem;
}


/* =========================================
   Card Header Section (Illustration + Text)
   ========================================= */

.card-header-section[b-sqbvm15fdq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
}

.header-text-area[b-sqbvm15fdq] {
    width: 100%;
}

/* Illustration — default centered above */
.illustration-container[b-sqbvm15fdq] {
    order: -1;
    /* illustration above text by default */
    margin-bottom: 0.75rem;
    transition: opacity 0.3s ease, margin 0.3s ease;
}

    .illustration-container img[b-sqbvm15fdq] {
        max-height: 18vh;
        width: auto;
        display: block;
        margin: 0 auto;
        transition: max-height 0.4s ease;
    }


/* =========================================
   Focused Layout Transition
   Smooth fade-in masks the layout jump.
   ========================================= */

/* Keyframes for a smooth header transition */
@keyframes fadeLayoutIn-b-sqbvm15fdq {
    0% {
        opacity: 0;
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.password-focused .card-header-section[b-sqbvm15fdq] {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    animation: fadeLayoutIn-b-sqbvm15fdq 0.45s ease both;
}

.password-focused .header-text-area[b-sqbvm15fdq] {
    flex: 1;
    text-align: left;
}

.password-focused .illustration-container[b-sqbvm15fdq] {
    order: 2;
    margin-bottom: 0;
    margin-left: 1.5rem;
    flex-shrink: 0;
}

    /* Bigger illustration for desktop after transition (was 80px, now 120px) */
    .password-focused .illustration-container img[b-sqbvm15fdq] {
        max-height: 120px;
    }

.password-focused[b-sqbvm15fdq]  .reset-password-title {
    text-align: left;
}

.password-focused .reset-password-description[b-sqbvm15fdq] {
    text-align: left;
    max-width: 100%;
    margin-bottom: 0.5rem;
}

/* Smaller pills after transition */
.password-focused .account-pills-container[b-sqbvm15fdq] {
    justify-content: flex-start;
    margin-bottom: 0.75rem !important;
}

.password-focused .account-pill[b-sqbvm15fdq] {
    font-size: 0.82rem;
    padding: 5px 10px 5px 6px;
    gap: 6px;
}

.password-focused .pill-icon[b-sqbvm15fdq] {
    width: 20px;
    height: 20px;
}

/* Card padding tighter when focused */
.password-focused[b-sqbvm15fdq] {
    padding: 2rem 2.5rem;
}


/* Account Pills */
.account-pills-container[b-sqbvm15fdq] {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 1.5rem;
}

.account-pill[b-sqbvm15fdq] {
    background-color: #F2F2F2;
    border-radius: 50rem;
    padding: 8px 16px 8px 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #1F1F1F;
    font-weight: 500;
    font-size: 0.95rem;
    transition: font-size 0.3s ease, padding 0.3s ease;
}

.pill-icon[b-sqbvm15fdq] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    transition: width 0.3s ease, height 0.3s ease;
}

/* Forms */
.password-form .form-label[b-sqbvm15fdq] {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--main-text);
    margin-bottom: 0.25rem;
}

.password-help-link[b-sqbvm15fdq] {
    font-size: 0.85rem;
    color: var(--link-color);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    background: transparent;
    border: 0;
}

.password-help-link .link-text[b-sqbvm15fdq] {
    border-bottom: 1px solid var(--link-color);
}

.password-help-link:hover[b-sqbvm15fdq] {
    color: var(--secondary-btn-hover);
    border-bottom-color: var(--secondary-btn-hover);
}

.input-group[b-sqbvm15fdq] {
    border: 1.8px solid #909090;
    border-radius: 17px;
    height: 52px;
    overflow: hidden;
    transition: all 0.2s;
}

.password-input[b-sqbvm15fdq] {
    border: none !important;
    height: 48px;
    padding-left: 1rem;
    font-size: 1rem;
    color: var(--main-text);
}

    /* Bigger masked dots ONLY — keep placeholder and typed text at normal font size */
    .password-input[type="password"][b-sqbvm15fdq] {
        font-size: 1.5rem;
        letter-spacing: 3px;
    }

        /* Revert placeholder to normal size even in password mode */
        .password-input[type="password"][b-sqbvm15fdq]::placeholder {
            font-size: 1rem;
            letter-spacing: normal;
        }

    .password-input:focus[b-sqbvm15fdq] {
        box-shadow: none;
    }

.input-group:focus-within[b-sqbvm15fdq] {
    border-color: var(--secondary-btn);
    box-shadow: 0 0 0 2px #C5E3F6;
}

.password-toggle[b-sqbvm15fdq] {
    background: white;
    border: none !important;
    cursor: pointer;
    color: #595959;
    padding-right: 1rem;
    display: flex;
    align-items: center;
}

/* =========================================
   Confirm Password Validation
   ========================================= */

.confirm-validation[b-sqbvm15fdq] {
    font-size: 0.85rem;
    font-weight: 500;
    margin-top: 8px;
    display: flex;
    align-items: center;
    min-height: 0;
    transition: opacity 0.2s ease;
}

    .confirm-validation:empty[b-sqbvm15fdq] {
        margin-top: 0;
    }

.validation-error[b-sqbvm15fdq] {
    color: #EF0000;
}

.validation-success[b-sqbvm15fdq] {
    color: #2E7D32;
}


/* =========================================
   Buttons
   ========================================= */

/* Back button — match OTP modal btn-cancel */
.btn-back[b-sqbvm15fdq] {
    border: 1px solid #909090;
    background: transparent;
    color: #595959;
    font-weight: 500;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
    border-radius: 8px;
    min-width: 120px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

    .btn-back:hover[b-sqbvm15fdq] {
        background: #F3F3F3;
        color: #1F1F1F;
        border-color: #949494;
    }

/* Change Password button — extends .send-code-btn (class added in HTML) */
.send-code-btn[b-sqbvm15fdq] {
    background-color: var(--primary-btn);
    border: none;
    color: #fff;
    height: 48px;
    border-radius: 8px;
    font-weight: 500;
    min-width: 202px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.send-code-btn .btn-arrow[b-sqbvm15fdq] {
    width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    transition: all 0.3s ease;
    font-size: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.send-code-btn:hover:not(:disabled)[b-sqbvm15fdq] {
    background-color: var(--primary-btn-hover);
    color: #fff;
    pointer-events: auto;
    opacity: 1;
}

.send-code-btn:hover:not(:disabled) .btn-arrow[b-sqbvm15fdq] {
    width: 22px;
    opacity: 1;
    margin-left: 8px;
}

.send-code-btn:disabled[b-sqbvm15fdq] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

.send-code-btn:disabled .btn-arrow[b-sqbvm15fdq] {
    display: none;
}

.send-code-btn:focus-visible:not(:disabled)[b-sqbvm15fdq] {
    background-color: var(--primary-btn-hover);
    color: #fff;
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 4px;
}

.send-code-btn:focus-visible:not(:disabled) .btn-arrow[b-sqbvm15fdq] {
    width: 20px;
    opacity: 1;
    margin-left: 8px;
}

.send-code-btn:disabled:focus-visible[b-sqbvm15fdq] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    outline: none;
}


/* Button container */
.reset-btn-container[b-sqbvm15fdq] {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 0.5rem;
    width: 100%;
}

.footer-link[b-sqbvm15fdq] {
    color: var(--link-color);
    font-weight: 500;
    font-size: 0.85rem;
    text-decoration: none !important;
    border-bottom: 1px solid var(--link-color);
}

.footer-link:hover[b-sqbvm15fdq] {
    color: var(--secondary-btn-hover);
    border-bottom-color: var(--secondary-btn-hover);
}


/* =========================================
   Responsiveness — Width Breakpoints
   ========================================= */

/* ---- Very small mobile (≤ 430px) ---- */
@media (max-width: 430px) {
    .illustration-container[b-sqbvm15fdq] {
        display: none;
    }

    .skeleton-illustration[b-sqbvm15fdq] {
        display: none;
    }

    [b-sqbvm15fdq] .reset-password-title {
        padding-top: 0.5rem;
    }
}

/* ---- Mobile (≤ 576px) ---- */
@media (max-width: 576px) {
    .reset-password-card[b-sqbvm15fdq] {
        max-width: 100%;
        width: calc(100% - 3px) !important;
        margin: 0 auto;
        border-radius: 24px;
        padding: 2rem 1.5rem;
    }

    .password-focused[b-sqbvm15fdq] {
        padding: 1.5rem 1.25rem;
    }

    .illustration-container img[b-sqbvm15fdq] {
        max-height: 80px;
    }

    [b-sqbvm15fdq] .reset-password-title {
        font-size: 1.1rem;
    }

    .reset-password-description[b-sqbvm15fdq] {
        font-size: 0.9rem;
    }

    .account-pill[b-sqbvm15fdq] {
        font-size: 0.85rem;
        padding: 6px 12px 6px 8px;
    }

    .reset-btn-container[b-sqbvm15fdq] {
        flex-direction: column-reverse;
        gap: 10px;
    }

    .btn-back[b-sqbvm15fdq],
    .btn-change-password[b-sqbvm15fdq] {
        width: 100%;
        min-width: unset;
        font-size: 0.95rem;
        justify-content: center;
    }

    .btn-back[b-sqbvm15fdq] {
        height: 48px;
    }

    .btn-change-password[b-sqbvm15fdq] {
        height: 48px;
    }

    .password-focused .illustration-container[b-sqbvm15fdq] {
        display: none !important;
    }

    .password-focused .card-header-section[b-sqbvm15fdq] {
        flex-direction: column;
        text-align: left;
        align-items: flex-start;
    }
}

/* ---- Tablet (577px – 768px) ---- */
@media (min-width: 577px) and (max-width: 768px) {
    .reset-password-card[b-sqbvm15fdq] {
        max-width: 85%;
        padding: 2rem 2.5rem;
    }
}


/* =========================================
   Responsiveness — Height Breakpoints
   ========================================= */

/* ---- Short screens (≤ 700px) — hide illustration ---- */
@media (max-height: 700px) {
    .illustration-container[b-sqbvm15fdq] {
        display: none;
    }

    .skeleton-illustration[b-sqbvm15fdq] {
        display: none;
    }

    .reset-password-card[b-sqbvm15fdq] {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }

    /* Preserve breathing room above the title when illustration is gone */
    [b-sqbvm15fdq] .reset-password-title {
        padding-top: 1.5rem;
    }

    .reset-password-description[b-sqbvm15fdq] {
        margin-bottom: 1rem;
    }

    .account-pills-container[b-sqbvm15fdq] {
        margin-bottom: 1rem;
    }

    .password-focused[b-sqbvm15fdq]  .reset-password-title {
        padding-top: 0;
    }
}

/* ---- Very short screens (≤ 600px) — tighten everything ---- */
@media (max-height: 600px) {
    .reset-password-card[b-sqbvm15fdq] {
        padding: 1.5rem 1.25rem;
    }

    [b-sqbvm15fdq] .reset-password-title {
        padding-top: 1rem;
        font-size: 1.1rem;
    }

    .reset-password-description[b-sqbvm15fdq] {
        font-size: 0.9rem;
        margin-bottom: 0.75rem;
    }

    .account-pills-container[b-sqbvm15fdq] {
        margin-bottom: 0.75rem;
    }

    .password-form .mb-4[b-sqbvm15fdq] {
        margin-bottom: 0.75rem !important;
    }

    .password-form .mb-5[b-sqbvm15fdq] {
        margin-bottom: 1rem !important;
    }
}

/* ---- Landscape phone / ultra-short (≤ 500px) — absolute minimum ---- */
@media (max-height: 500px) {
    .reset-password-card[b-sqbvm15fdq] {
        padding: 0.75rem 1.25rem;
    }

    [b-sqbvm15fdq] .reset-password-title {
        padding-top: 0.25rem;
        font-size: 1rem;
        margin-bottom: 0.15rem;
    }

    .reset-password-description[b-sqbvm15fdq] {
        font-size: 0.85rem;
        margin-bottom: 0.35rem;
    }

    .account-pills-container[b-sqbvm15fdq] {
        margin-bottom: 0.35rem;
    }

    .account-pill[b-sqbvm15fdq] {
        font-size: 0.8rem;
        padding: 4px 10px 4px 6px;
    }

    .input-group[b-sqbvm15fdq] {
        height: 42px;
    }

    .password-input[b-sqbvm15fdq] {
        height: 38px;
    }

    .password-form .mb-4[b-sqbvm15fdq] {
        margin-bottom: 0.35rem !important;
    }

    .password-form .mb-5[b-sqbvm15fdq] {
        margin-bottom: 0.35rem !important;
    }

    .password-form .mb-2[b-sqbvm15fdq] {
        margin-bottom: 0.15rem !important;
    }

    /* Stack buttons even on wider screens when height is ultra-short */
    .reset-btn-container[b-sqbvm15fdq] {
        flex-direction: column-reverse;
        gap: 6px;
        margin-top: 0.15rem;
    }

    .btn-back[b-sqbvm15fdq],
    .btn-change-password[b-sqbvm15fdq] {
        width: 100%;
        min-width: unset;
    }

    .btn-back[b-sqbvm15fdq] {
        height: 36px;
        font-size: 0.9rem;
    }

    .btn-change-password[b-sqbvm15fdq] {
        height: 38px;
        font-size: 0.9rem;
    }

    /* Skeleton buttons stacked too */
    .skeleton-btn-container[b-sqbvm15fdq] {
        flex-direction: column-reverse;
        gap: 6px;
    }

    .skeleton-btn-small[b-sqbvm15fdq],
    .skeleton-btn-large[b-sqbvm15fdq] {
        width: 100%;
    }

    .skeleton-btn-small[b-sqbvm15fdq] {
        height: 36px;
    }

    .skeleton-btn-large[b-sqbvm15fdq] {
        height: 38px;
    }
}

/* =========================================
   Password Help Modal Styles
   ========================================= */

#passwordHelpModal .modal-content[b-sqbvm15fdq] {
    border-radius: 24px;
    border: none;
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
}

#passwordHelpModal .modal-header[b-sqbvm15fdq] {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #DADADA !important;
}

#passwordHelpModal .modal-header .btn-close[b-sqbvm15fdq] {
    opacity: 0.5;
    background-size: 12px;
    margin: 0;
    padding: 0.5rem;
    color: #616161;
}

#passwordHelpModal .modal-header .btn-close:hover[b-sqbvm15fdq] {
    opacity: 1;
    background-color: #F2F2F2;
}

#passwordHelpModal .modal-title[b-sqbvm15fdq] {
    font-size: 1.1rem;
    color: var(--main-text);
    line-height: revert;
}

#passwordHelpModal h4[b-sqbvm15fdq] {
    color: var(--main-text);
    font-size: 1.25rem;
    /* Mobile Size */
}

#passwordHelpModal .modal-body[b-sqbvm15fdq] {
    padding-bottom: 0;
}

/* Guidelines List */
.password-guidelines-list[b-sqbvm15fdq] {
    list-style: none;
    padding-left: 0;
    margin-top: 1rem;
}

.password-guidelines-list li[b-sqbvm15fdq] {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    color: var(--main-text);
}

    .password-guidelines-list li[b-sqbvm15fdq]::before {
        content: "•";
        position: absolute;
        left: 0;
        color: var(--main-text);
        font-weight: bold;
    }

/* Detailed Policy View */
.detailed-policy-container[b-sqbvm15fdq] {
    line-height: 1.6;
    color: var(--main-text);
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

    /* Custom Scrollbar for detailed view */
    .detailed-policy-container[b-sqbvm15fdq]::-webkit-scrollbar {
        width: 6px;
    }

    .detailed-policy-container[b-sqbvm15fdq]::-webkit-scrollbar-track {
        background: #f1f1f1;
        border-radius: 10px;
    }

    .detailed-policy-container[b-sqbvm15fdq]::-webkit-scrollbar-thumb {
        background: #ccc;
        border-radius: 10px;
    }

        .detailed-policy-container[b-sqbvm15fdq]::-webkit-scrollbar-thumb:hover {
            background: #999;
        }

/* Custom Inline Footer */
.modal-footer-custom-inline[b-sqbvm15fdq] {
    border-top: 1px solid #DADADA;
    margin-top: 1rem;
}

.view-detailed-link[b-sqbvm15fdq] {
    color: var(--link-color);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: 0;
}

.view-detailed-link .link-text[b-sqbvm15fdq] {
    border-bottom: 1px solid var(--link-color);
    line-height: 1.2;
}

.view-detailed-link:hover[b-sqbvm15fdq] {
    color: var(--secondary-btn-hover);
}

.btn-got-it[b-sqbvm15fdq] {
    background-color: var(--secondary-btn);
    color: white;
    border-radius: 8px;
    padding: 8px 24px;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.2s;
}

.btn-got-it:hover[b-sqbvm15fdq] {
    background-color: var(--secondary-btn-hover);
    color: white;
}

.btn-got-it:focus-visible:not(:disabled)[b-sqbvm15fdq] {
    background-color: var(--secondary-btn-hover);
    color: #fff;
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 4px;
}


/* Responsiveness - Bottom Sheet for Mobile */
@media (max-width: 576px) {
    #passwordHelpModal .modal-dialog[b-sqbvm15fdq] {
        margin: 0;
        min-height: 100vh;
        display: flex;
        align-items: flex-end;
    }

    #passwordHelpModal .modal-content[b-sqbvm15fdq] {
        border-radius: 24px 24px 0 0;
        width: 100%;
        padding-bottom: env(safe-area-inset-bottom);
    }

    #passwordHelpModal.show .modal-content[b-sqbvm15fdq] {
        animation: slideUpFromBottom-b-sqbvm15fdq 0.3s ease-out;
    }

    .detailed-policy-container[b-sqbvm15fdq] {
        max-height: 60vh;
    }
}



/* =========================================
   Closing Animations (Mobile)
   ========================================= */

/* Mobile modal animations */
#passwordHelpModal.show .modal-content[b-sqbvm15fdq] {
    animation: slideUpFromBottom-b-sqbvm15fdq 0.3s ease-out;
}

#passwordHelpModal.modal-closing .modal-content[b-sqbvm15fdq] {
    animation: slideDownToBottom-b-sqbvm15fdq 0.3s ease-in;
}

/* Slide-up animation for mobile */
@keyframes slideUpFromBottom-b-sqbvm15fdq {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

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

/* Slide-down animation for mobile close */
@keyframes slideDownToBottom-b-sqbvm15fdq {
    from {
        transform: translateY(0);
        opacity: 1;
    }

    to {
        transform: translateY(100%);
        opacity: 0;
    }
}

#passwordHelpModal .modal-closing .modal-content[b-sqbvm15fdq] {
    animation: slideDownToBottom-b-sqbvm15fdq 0.3s ease-in forwards !important;
}

.modal-backdrop.backdrop-closing[b-sqbvm15fdq] {
    animation: fadeOutBackdrop-b-sqbvm15fdq 0.35s ease forwards !important;
}

/* =========================================
Desktop Specific Keyframes
========================================= */
@keyframes desktopSlideFadeIn-b-sqbvm15fdq {
    from {
        opacity: 0;
        transform: translateY(-40px); /* Start slightly above */
    }

    to {
        opacity: 1;
        transform: translateY(0); /* End at natural position */
    }
}

@keyframes desktopBackdropFade-b-sqbvm15fdq {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}

/* =========================================
   Closing Animations (Desktop)
   ========================================= */
@media (min-width: 576px) {
    #passwordHelpModal.modal-closing .modal-content[b-sqbvm15fdq] {
        animation: desktopSlideFadeOut-b-sqbvm15fdq 0.3s ease-in forwards !important;
    }
}

/* Keyframes for Desktop Close */
@keyframes desktopSlideFadeOut-b-sqbvm15fdq {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-60px);
    }
}

.modal-backdrop.backdrop-closing[b-sqbvm15fdq] {
    animation: fadeOutBackdrop-b-sqbvm15fdq 0.3s ease forwards !important;
}

@keyframes fadeOutBackdrop-b-sqbvm15fdq {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 0;
    }
}

/* =========================================
   Desktop / Tablet Enhancements (min-width: 576px)
   ========================================= */
@media (min-width: 576px) {

    #passwordHelpModal .modal-dialog[b-sqbvm15fdq] {
        align-items: center;
        min-height: calc(100% - 3.5rem);
        margin: 1.75rem auto;
        max-width: 34rem;
        display: flex;
        justify-content: center;
    }

    #passwordHelpModal .modal-content[b-sqbvm15fdq] {
        min-height: 480px;
        display: flex;
        flex-direction: column;
        border-radius: 24px;
        box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1);
        padding: 2rem;
        animation: desktopSlideFadeIn-b-sqbvm15fdq 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
    }

    #passwordHelpModal .modal-body[b-sqbvm15fdq] {
        flex: 1 1 auto;
        padding-bottom: 1rem;
    }

    [b-sqbvm15fdq] .modal-backdrop.show {
        animation: desktopBackdropFade-b-sqbvm15fdq 0.3s ease forwards;
    }

}

/* =========================================
Height-Based Responsiveness for Laptops
========================================= */

@media (max-height: 850px) {
    .reset-password-card[b-sqbvm15fdq] {
        padding: 1.5rem 2rem !important; 
    }

    .illustration-container img[b-sqbvm15fdq] {
        max-height: 16vh; 
        margin-bottom: 0.5rem !important;
    }

    .password-focused .illustration-container img[b-sqbvm15fdq] {
        max-height: 80px; 
    }

    [b-sqbvm15fdq] .reset-password-title {
        font-size: 1.15rem;
        margin-bottom: 0.25rem;
    }

    .reset-password-description[b-sqbvm15fdq] {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
    }

    .account-pills-container[b-sqbvm15fdq] {
        margin-bottom: 1rem !important;
    }

    .password-form .my-4[b-sqbvm15fdq] {
        margin-top: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .reset-btn-container[b-sqbvm15fdq] {
        margin-top: 1.5rem !important;
    }
}

@media (max-height: 700px) {
    .illustration-container[b-sqbvm15fdq] {
        display: block !important;
        margin-bottom: 0 !important;
    }

    .illustration-container img[b-sqbvm15fdq] {
        max-height: 12vh;
        margin-bottom: 0 !important;
    }

    .reset-password-card[b-sqbvm15fdq] {
        padding: 1rem 1.5rem !important;
    }

}

@media (max-height: 600px) {
    .illustration-container[b-sqbvm15fdq] {
        display: none !important;
    }
}

/* =========================================
Reduced Motion Support (Accessibility)
========================================= */
@media (prefers-reduced-motion: reduce) {

    #passwordHelpModal.show .modal-content[b-sqbvm15fdq],
    #passwordHelpModal:not(.show) .modal-content[b-sqbvm15fdq] {
        animation: none !important;
    }

    .send-code-btn .btn-arrow[b-sqbvm15fdq] {
        transition: none;
    }

    .send-code-btn:hover:not(:disabled) .btn-arrow[b-sqbvm15fdq] {
        transition: none;
    }
}

/* Universal design - focus stylings */

#passwordHelpModalTitle:focus[b-sqbvm15fdq] {
    outline: none !important;
}

#passwordHelpModalTitle:focus-visible[b-sqbvm15fdq] {
    outline: 3px solid var(--focus-ring-color) !important;
    outline-offset: 8px;
    border-radius: 4px;
}

/* 1. Base style for the toggle button */
.password-toggle[b-sqbvm15fdq] {
    background-color: transparent;
    border: none;
    transition: all 0.2s ease;
    z-index: 5; 
}

.password-toggle:hover[b-sqbvm15fdq] {
    background-color: #f2f2f2 !important;
    color: #000;
}

.password-toggle:focus-visible[b-sqbvm15fdq] {
    outline: none !important;
    background-color: #e8f0fe !important;
    border-radius: 0 8px 8px 0;
}

.password-toggle .material-symbols-outlined[b-sqbvm15fdq] {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.password-toggle:focus-visible .material-symbols-outlined[b-sqbvm15fdq] {
    font-variation-settings: 'wght' 600;
}
/* /Pages/Components/PasswordStrengthIndicatorComponent.razor.rz.scp.css */
/* =========================================
   Password Strength Section
   ========================================= */

.password-strength-section[b-rulr1h7id3] {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.45s ease, opacity 0.35s ease, margin 0.35s ease;
    margin-top: 0;
    margin-bottom: 0;
}

    .password-strength-section.visible[b-rulr1h7id3] {
        max-height: 400px;
        opacity: 1;
        margin-top: 0.75rem;
        margin-bottom: 1rem;
    }

/* Strength Header */
.strength-header[b-rulr1h7id3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.strength-label[b-rulr1h7id3] {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--main-text);
}

.strength-level[b-rulr1h7id3] {
    font-weight: 600;
    font-size: 0.9rem;
}

    /* Strength Level Colors */
    .strength-level.level-weak[b-rulr1h7id3] {
        color: #EF0000;
    }

    .strength-level.level-medium[b-rulr1h7id3] {
        color: #FC5700;
    }

    .strength-level.level-strong[b-rulr1h7id3] {
        color: #2E7D32;
    }

/* Strength Bar — thicker (8px) */
.strength-bar-track[b-rulr1h7id3] {
    height: 8px;
    background: #E5E7EB;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 1.25rem;
}

.strength-bar-fill[b-rulr1h7id3] {
    height: 100%;
    border-radius: 4px;
    width: 0%;
    transition: width 0.4s ease, background-color 0.4s ease;
    background-color: #E5E7EB;
}

    .strength-bar-fill.none[b-rulr1h7id3] {
        width: 0%;
        background-color: #E5E7EB;
    }

    .strength-bar-fill.weak[b-rulr1h7id3] {
        width: 33%;
        background-color: #EF0000;
    }

    .strength-bar-fill.medium[b-rulr1h7id3] {
        width: 66%;
        background-color: #FC5700;
    }

    .strength-bar-fill.strong[b-rulr1h7id3] {
        width: 100%;
        background-color: #14AE5C;
    }


/* =========================================
   Password Must Contain — Criteria
   ========================================= */

.criteria-title[b-rulr1h7id3] {
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--main-text);
    margin-bottom: 12px;
}

/* Always 2-column grid on all screen sizes */
.criteria-grid[b-rulr1h7id3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.criteria-item[b-rulr1h7id3] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: var(--main-text);
}

.criteria-text[b-rulr1h7id3] {
    font-weight: 400;
    transition: font-weight 0.2s ease;
}

/* Bold text when criteria is met */
.criteria-item.criteria-met .criteria-text[b-rulr1h7id3] {
    font-weight: 600;
}

/* Criteria Icon — base (bigger icons) */
.criteria-icon[b-rulr1h7id3] {
    width: 26px;
    height: 26px;
    min-width: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

/* Default cross icon */
.criteria-icon-fail[b-rulr1h7id3] {
    background-color: #E8E8E8;
    color: #595959;
}

/* Checkmark icon — pop effect */
.criteria-icon-pass[b-rulr1h7id3] {
    background-color: rgba(21, 128, 61, 0.15);
    color: #2E7D32;
    transform: scale(1.05);
}

/* ---- Mobile (≤ 576px) ---- */
@media (max-width: 576px) {
    .criteria-grid[b-rulr1h7id3] {
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .criteria-item[b-rulr1h7id3] {
        font-size: 0.8rem;
    }

    .criteria-icon[b-rulr1h7id3] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        font-size: 0.6rem;
    }

}


/* ---- Very short screens (≤ 600px) — tighten everything ---- */
@media (max-height: 600px) {
    .password-strength-section.visible[b-rulr1h7id3] {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    .strength-bar-track[b-rulr1h7id3] {
        margin-bottom: 0.75rem;
    }

    .criteria-title[b-rulr1h7id3] {
        margin-bottom: 8px;
    }

    .criteria-grid[b-rulr1h7id3] {
        gap: 6px 16px;
    }
}

/* ---- Landscape phone / ultra-short (≤ 500px) — absolute minimum ---- */
@media (max-height: 500px) {

    .criteria-grid[b-rulr1h7id3] {
        gap: 4px 12px;
    }

    .criteria-item[b-rulr1h7id3] {
        font-size: 0.8rem;
    }
}

/* Responsiveness - Bottom Sheet for Mobile */
@media (max-width: 576px) {
    .criteria-item[b-rulr1h7id3] {
        align-items: flex-start !important;
    }
}
/* /Pages/Components/PasswordUpdateStatusComponent.razor.rz.scp.css */
.password-updated-card[b-bg04k4rrlp] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 550px;
    border: 1px solid #B0B0B0;
    padding: 1.9rem 1.1rem !important;
}

/* Illustration */
.success-illustration-container[b-bg04k4rrlp] {
    max-width: 180px;
}

    .success-illustration-container img[b-bg04k4rrlp] {
        width: 100%;
        height: auto;
    }

/* Title */
[b-bg04k4rrlp] .password-updated-title {
    font-size: 1.25rem;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

/* Description */
.password-updated-description[b-bg04k4rrlp] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
}

/* Account Pills Container */
.account-pills-container[b-bg04k4rrlp] {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    margin-bottom: 1.5rem;
}

/* Individual Pill */
.account-pill[b-bg04k4rrlp] {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background-color: rgba(21, 128, 61, 0.09);
    border-radius: 999px;
    padding: 0.45rem 0.7rem;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--main-text);
}

/* Pill Checkmark Icon */
.pill-icon[b-bg04k4rrlp] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: #14AE5C;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Important Info Box */
.info-box[b-bg04k4rrlp] {
    background-color: #E1F5FE;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
    text-align: left;
}

.info-box-icon[b-bg04k4rrlp] {
    flex-shrink: 0;
    color: #0061B9;
    display: flex;
    align-items: center;
    margin-top: -2px;
}

    .info-box-icon .material-icons[b-bg04k4rrlp] {
        font-size: 22px;
    }

.info-box-text[b-bg04k4rrlp] {
    font-size: 0.875rem;
    color: #1f1f1f;
    line-height: 1.5;
    font-weight: 400;
}

    .info-box-text strong[b-bg04k4rrlp] {
        font-weight: 600;
    }

/* Logout Button */
.logout-btn[b-bg04k4rrlp] {
    background-color: var(--secondary-btn);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    min-width: 130px;
    height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    cursor: pointer;
}

    .logout-btn .btn-icon[b-bg04k4rrlp] {
        width: 0;
        opacity: 0;
        margin-left: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
    }

        .logout-btn .btn-icon .material-icons[b-bg04k4rrlp] {
            font-size: 18px;
        }

    /* Hover state */
    .logout-btn:hover[b-bg04k4rrlp] {
        background-color: var(--secondary-btn-hover);
        color: #fff;
    }

        .logout-btn:hover .btn-icon[b-bg04k4rrlp] {
            width: 21px;
            opacity: 1;
            margin-left: 8px;
            margin-bottom: 2px;
        }

    .logout-btn:focus[b-bg04k4rrlp],
    .logout-btn:active[b-bg04k4rrlp],
    .logout-btn.active[b-bg04k4rrlp] {
        background-color: var(--secondary-btn-hover) !important;
        color: #ffffff !important;
        box-shadow: none !important;
        border: none !important;
    }

/* =========================================
   Tablet (min-width: 576px)
   ========================================= */
@media (min-width: 576px) {
    .password-updated-card[b-bg04k4rrlp] {
        padding: 2.5rem 3rem !important;
    }

    .success-illustration-container[b-bg04k4rrlp] {
        max-width: 170px;
    }

    .account-pills-container[b-bg04k4rrlp] {
        gap: 0.75rem;
    }

    .account-pill[b-bg04k4rrlp] {
        font-size: 0.95rem;
        padding: 0.4rem 0.7rem;
    }
}

/* =========================================
   Desktop (min-width: 768px)
   ========================================= */
@media (min-width: 768px) {
    .password-updated-card[b-bg04k4rrlp] {
        padding: 3rem 3rem 2.5rem 3rem !important;
    }

    .success-illustration-container[b-bg04k4rrlp] {
        max-width: 180px;
    }

    [b-bg04k4rrlp] .password-updated-title {
        font-size: 1.35rem;
    }

    .info-box[b-bg04k4rrlp] {
        padding: 1.125rem 1.5rem;
    }

    .info-box-text[b-bg04k4rrlp] {
        font-size: 0.95rem;
    }
}

/* =========================================
   Height Responsiveness
   ========================================= */

/* Short screens */
@media (max-height: 740px) {
    .success-illustration-container[b-bg04k4rrlp] {
        max-width: 150px;
        margin-bottom: 1rem;
    }

    [b-bg04k4rrlp] .password-updated-title {
        font-size: 1.15rem;
        margin-bottom: 0.35rem;
    }

    .password-updated-description[b-bg04k4rrlp] {
        margin-bottom: 1rem;
    }

    .account-pills-container[b-bg04k4rrlp] {
        margin-bottom: 1rem;
    }

    .info-box[b-bg04k4rrlp] {
        padding: 0.75rem 1rem;
        margin-bottom: 1rem;
    }

    .info-box-text[b-bg04k4rrlp] {
        font-size: 0.8rem;
    }

    .logout-btn[b-bg04k4rrlp] {
        height: 42px;
        font-size: 0.875rem;
    }
}

/* Extra short screens */
@media (max-height: 650px) {
    .password-updated-card[b-bg04k4rrlp] {
        padding: 1.25rem 1.5rem !important;
    }

    .success-illustration-container[b-bg04k4rrlp] {
        max-width: 130px;
        margin-bottom: 0.75rem;
    }

    [b-bg04k4rrlp] .password-updated-title {
        font-size: 1.05rem;
    }

    .password-updated-description[b-bg04k4rrlp] {
        margin-bottom: 0.75rem;
    }

    .account-pills-container[b-bg04k4rrlp] {
        margin-bottom: 0.75rem;
    }

    .info-box[b-bg04k4rrlp] {
        margin-bottom: 0.75rem;
    }

    .logout-btn[b-bg04k4rrlp] {
        height: 38px;
        font-size: 0.85rem;
        min-width: 120px;
    }
}

/* =========================================
   Mobile Small Width (max-width: 370px)
   ========================================= */
@media (max-width: 370px) {
    .password-updated-card[b-bg04k4rrlp] {
        padding: 1.25rem 1rem !important;
        border-radius: 24px;
    }

    .account-pills-container[b-bg04k4rrlp] {
        gap: 0.5rem;
    }

    .account-pill[b-bg04k4rrlp] {
        font-size: 0.8rem;
        padding: 0.35rem 0.7rem;
    }

    .pill-icon[b-bg04k4rrlp] {
        width: 18px;
        height: 18px;
    }

        .pill-icon .material-icons[b-bg04k4rrlp] {
            font-size: 12px;
        }

    .info-box[b-bg04k4rrlp] {
        padding: 0.75rem;
    }
}

/*----------- Error state stylings ---------*/

/* General Error Card adjustment */
.error-state-card[b-bg04k4rrlp] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 650px;
    border: 1px solid #B0B0B0;
    padding: 2.5rem 3rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* --- Responsive Illustration Logic --- */
.error-illustration-container[b-bg04k4rrlp] {
    max-width: 180px;
    margin: 0 auto 1.25rem auto;
}

.error-illustration-container img[b-bg04k4rrlp] {
    width: 100%;
    height: auto;
    display: block;
}

/* Typography */
[b-bg04k4rrlp] .error-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.error-description[b-bg04k4rrlp] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.5;
    margin-bottom: 1.5rem;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
}

/* Pills Container */
.error-pills-container[b-bg04k4rrlp] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 1.75rem;
    width: 100%;
}

.error-pill[b-bg04k4rrlp] {
    border-radius: 50rem;
    padding: 6px 14px 6px 6px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    color: #1F1F1F;
}

.pill-icon-wrapper[b-bg04k4rrlp] {
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .pill-icon-wrapper .material-symbols-outlined[b-bg04k4rrlp] {
        font-size: 16px;
        color: #fff;
    }

.pill-text[b-bg04k4rrlp] {
    font-weight: 500;
    font-size: 0.9rem;
    color: #1F1F1F;
}

.error-pill-success[b-bg04k4rrlp] {
    background-color: rgba(21, 128, 61, 0.09);
    border: 1px solid transparent;
    opacity: 0.5;
}

.pill-icon-success[b-bg04k4rrlp] {
    background-color: #14AE5C;
}

.error-pill-error[b-bg04k4rrlp] {
    background-color: #FEF2F2;
    border: 1px solid #EF0000;
}

.pill-icon-error[b-bg04k4rrlp] {
    background-color: #EF0000;
}

/* --- Error Details Box (Responsive Height) --- */
.error-alert-box[b-bg04k4rrlp] {
    border: 1px solid #EF0000;
    border-radius: 12px;
    overflow: hidden;
    width: 100%;
    max-width: 500px;
    margin-bottom: 2rem;
    text-align: left;
}

.error-alert-header[b-bg04k4rrlp] {
    background-color: #FEF2F2;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.error-alert-icon[b-bg04k4rrlp] {
    color: #EF0000;
    font-size: 1.4rem;
}

.error-alert-title[b-bg04k4rrlp] {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: initial;
    color: #1f1f1f;
}

.error-alert-body[b-bg04k4rrlp] {
    padding: 0 1rem;
    background-color: #fff;
}

/* Accessibility: Support for keyboard scrolling */
.scrollable-error-list[b-bg04k4rrlp] {
    max-height: 31vh; /* Height Responsive based on viewport */
    min-height: 100px;
    overflow-y: auto;
    outline: none;
}

    .scrollable-error-list:focus[b-bg04k4rrlp] {
        background-color: #fcfcfc;
    }

.error-item[b-bg04k4rrlp] {
    padding: 1rem 0;
}

.error-account-name[b-bg04k4rrlp] {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1f1f1f;
    margin-bottom: 0.25rem;
}

.error-account-text[b-bg04k4rrlp] {
    font-weight: 400;
    font-size: 0.9rem;
    color: #1f1f1f;
    margin-bottom: 0;
    line-height: 1.5;
}

.error-alert-body hr[b-bg04k4rrlp] {
    margin: 0;
    border: 0;
    border-top: 2px solid #9b9b9b;
}

/* --- Split Layout Logic for 2+ accounts --- */
.header-split-container[b-bg04k4rrlp] {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Vertical center alignment */
    text-align: left;
    margin-bottom: 1.5rem;
    gap: 20px;
}

.header-text-group[b-bg04k4rrlp] {
    flex: 1;
}

.error-state-layout .password-updated-description[b-bg04k4rrlp] {
    max-width: 350px;
    margin-left: 0;
    margin-right: 0;
    text-align: left;
}

.error-state-layout .error-illustration-container[b-bg04k4rrlp] {
    max-width: 140px;
    border-radius: 28px;
    margin: 0;
    flex-shrink: 0;
    padding: 6px;
}

/* --- Universal Responsiveness for Error State --- */

/* Width Breakpoints */
@media (max-width: 576px) {
    .header-split-container[b-bg04k4rrlp] {
        flex-direction: column-reverse; 
        text-align: center;
        align-items: center;
    }

    .error-state-layout .password-updated-description[b-bg04k4rrlp] {
        margin: 0 auto;
        text-align: center;
        font-size: 1rem;
    }

    .error-state-layout .error-illustration-container[b-bg04k4rrlp] {
        margin: 0 auto 1.25rem auto;
    }

    .error-state-layout .scrollable-error-list[b-bg04k4rrlp] {
        max-height: 20vh;
    }
}

/* Height Responsiveness: Short screens (Laptop/Mobile Height) */
@media (max-height: 750px) {
    .error-illustration-container[b-bg04k4rrlp] {
        max-width: 120px;
        margin-bottom: 0.75rem;
    }

    .password-updated-card[b-bg04k4rrlp] {
        padding-top: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }

    .scrollable-error-list[b-bg04k4rrlp] {
        max-height: 30vh; 
    }

    .error-alert-box[b-bg04k4rrlp] {
        margin-bottom: 1.25rem;
    }
}

/* Extra short height optimization */
@media (max-height: 600px) {
    .error-illustration-container[b-bg04k4rrlp] {
        display: none;
    }

    [b-bg04k4rrlp] .error-title {
        font-size: 1.1rem;
        margin-bottom: 0.25rem;
    }
}
/* /Pages/Components/SelectIdentityComponent.razor.rz.scp.css */
.select-accounts-card[b-6jr8q9y62n] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 575px;
    border: 1px solid #B0B0B0;
    padding: 2rem !important;
}

/* Illustration */
.illustration-container[b-6jr8q9y62n] {
    max-width: 210px;
    margin: 1rem auto;
}

.illustration-container-for-3-accounts[b-6jr8q9y62n] {
    max-width: 140px;
    margin: 0 auto;
}

.illustration-container img[b-6jr8q9y62n] {
    width: 100%;
    height: auto;
}

/* Title and Description */
[b-6jr8q9y62n] .select-accounts-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--main-text);
    line-height: 1.2;
    margin-bottom: 0.5rem !important;
}

.select-accounts-description[b-6jr8q9y62n] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.4;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2rem !important;
}

/* Select All Checkbox - deprecated but do not remove it*/
.select-all-container[b-6jr8q9y62n] {
    text-align: left;
    padding-left: 0 !important;
    display: flex;
    align-items: center;
}

.select-all-container .form-check-input[b-6jr8q9y62n] {
    width: 20px;
    height: 20px;
    border: 2px solid #909090;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 0;
    margin-left: 0 !important;
    float: none !important;
    flex-shrink: 0;
}

.select-all-container .form-check-input:checked[b-6jr8q9y62n] {
    background-color: var(--secondary-btn);
    border-color: var(--secondary-btn);
}

.select-all-container .form-check-input:indeterminate[b-6jr8q9y62n] {
    background-color: var(--secondary-btn) !important;
    border-color: var(--secondary-btn) !important;
}

.select-all-container .form-check-label[b-6jr8q9y62n] {
    cursor: pointer;
    margin-left: 0.5rem;
    padding-top: 3px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--small-text);
    cursor: pointer;
}

/* Accounts Container */
.accounts-container[b-6jr8q9y62n] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Account Card - Default State */
.account-card[b-6jr8q9y62n] {
    border: 1px solid #949494;
    background: transparent;
    border-radius: 16px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

/* Account Card - Hover State */
.account-card:hover[b-6jr8q9y62n] {
    background: #f2f2f2;
    border: 1px solid #949494;
}

/* Account Card - Selected State */
.account-card.selected[b-6jr8q9y62n] {
    border: 2px solid #FC5700;
    background: rgba(252, 87, 0, 0.15);
}

.account-card.selected:hover[b-6jr8q9y62n] {
    background: rgba(252, 87, 0, 0.15);
}

.account.card.selected.account-description[b-6jr8q9y62n] {
    color: var(--disabled-text);
}

/* Account Icon */
.account-icon-wrapper[b-6jr8q9y62n] {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    position: relative;
}

.account-icon[b-6jr8q9y62n] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.account-icon-default[b-6jr8q9y62n] {
    display: block;
}

.account-icon-selected[b-6jr8q9y62n] {
    display: none;
}

.account-card.selected .account-icon-default[b-6jr8q9y62n] {
    display: none;
}

.account-card.selected .account-icon-selected[b-6jr8q9y62n] {
    display: block;
}

/* Account Info */
.account-name[b-6jr8q9y62n] {
    font-size: 1rem;
    font-weight: 500;
    color: #1F1F1F;
    margin-bottom: 0.25rem;
}

.account-description[b-6jr8q9y62n] {
    font-size: 0.875rem;
    color: #4a4a4a;
    line-height: 1.4;
}

/* Continue Button */
.continue-btn[b-6jr8q9y62n] {
    background-color: var(--primary-btn);
    border: none;
    color: #fff;
    border-radius: 8px;
    font-weight: 500;
    font-size: 1rem;
    min-width: 130px;
    width: auto !important;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding-left: 1.2rem;
    padding-right: 1.2rem;
}

.continue-btn .btn-arrow[b-6jr8q9y62n] {
    width: 0;
    opacity: 0;
    margin-left: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Hover state */
.continue-btn:hover:not(:disabled)[b-6jr8q9y62n] {
    background-color: var(--primary-btn-hover);
    color: #fff;
}

.continue-btn:hover:not(:disabled) .btn-arrow[b-6jr8q9y62n] {
    width: 20px;
    opacity: 1;
    margin-left: 8px;
}

.continue-btn:disabled[b-6jr8q9y62n] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1;
}

.continue-btn:disabled .btn-arrow[b-6jr8q9y62n] {
    display: none;
}

.continue-btn:focus-visible:not(:disabled)[b-6jr8q9y62n] {
    background-color: var(--primary-btn-hover);
    color: #fff;
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 4px;
}

.continue-btn:focus-visible:not(:disabled) .btn-arrow[b-6jr8q9y62n] {
    width: 20px;
    opacity: 1;
    margin-left: 8px;
}

.continue-btn:disabled[b-6jr8q9y62n] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    cursor: not-allowed;
    pointer-events: auto;
    opacity: 1; 
}

.continue-btn:disabled:focus-visible[b-6jr8q9y62n] {
    background-color: var(--disabled-bg) !important;
    color: var(--disabled-text) !important;
    outline: none;
}


/* Universal design */

.visually-hidden[b-6jr8q9y62n] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.account-card:focus-visible[b-6jr8q9y62n] {
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 2px;
}

/* Media Queries */

/* Mobile adjustments */
@media (max-width: 576px) {
    .select-accounts-card[b-6jr8q9y62n] {
        max-width: 100%;
        width: calc(100% - 3px) !important;
        margin: 0 auto;
        border-radius: 24px;
        padding: 1.3rem !important;
        height: auto;
        min-height: auto;
    }

    .illustration-container img[b-6jr8q9y62n] {
        max-height: 120px;
    }

    [b-6jr8q9y62n] .select-accounts-title {
        font-size: 1.1rem;
    }

    .select-accounts-description[b-6jr8q9y62n] {
        font-size: 0.9rem;
        margin-right: 0;
        margin-left: 0;
    }
}

/* Medium-height screens (Standard Laptops: roughly 701px to 850px) */
@media (max-height: 850px) {

    .illustration-container[b-6jr8q9y62n] {
        max-width: 190px;
        margin: 0.5rem auto !important;
    }

    .illustration-container-for-3-accounts[b-6jr8q9y62n] {
        max-width: 120px;
        margin: 0.5rem auto !important;
    }

    [b-6jr8q9y62n] .select-accounts-title {
        font-size: 1.15rem;
        margin-bottom: 0.25rem !important;
    }

    .select-accounts-description[b-6jr8q9y62n] {
        font-size: 0.95rem;
        margin-bottom: 1rem !important; 
    }

    .accounts-container[b-6jr8q9y62n] {
        gap: 0.75rem;
        margin-bottom: 1.5rem !important;
    }

    .account-card[b-6jr8q9y62n] {
        padding: 0.75rem;
    }

    .account-icon-wrapper[b-6jr8q9y62n] {
        width: 32px;
        height: 32px;
    }
}

@media (max-height: 700px) {

    .illustration-container[b-6jr8q9y62n] {
        max-width: calc(100vh - 31.5rem);
        margin: 0.5rem auto !important;
    }

    .illustration-container-for-3-accounts[b-6jr8q9y62n] {
        display: none;
    }

    [b-6jr8q9y62n] .select-accounts-title {
        margin-top: 0.35rem !important;
    }

    .select-accounts-description[b-6jr8q9y62n] {
        margin-bottom: 0.85rem !important;
    }
}

@media (max-height: 600px) {
    .illustration-container[b-6jr8q9y62n] {
        display: none;
    }
}

/* =========================================
Reduced Motion Support (Accessibility)
========================================= */
@media (prefers-reduced-motion: reduce) {
    /* Disable send code button arrow animation */
    .continue-btn .btn-arrow[b-6jr8q9y62n] {
        transition: none;
    }

    .continue-btn:hover:not(:disabled) .btn-arrow[b-6jr8q9y62n] {
        transition: none;
    }
}
/* /Pages/Components/ServiceDownComponent.razor.rz.scp.css */
/* Card */
.service-down-card[b-b66wxtp56s] {
    background: #ffffff;
    border-radius: 32px;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    width: 100%;
    max-width: 540px;
    border: 1px solid #B0B0B0;
    padding: 1rem 3rem 2rem 3rem !important;
}

/* Illustration */
.illustration-container img[b-b66wxtp56s] {
    max-width: 180px;
    height: auto;
}

/* Typography */
[b-b66wxtp56s] .services-down-title {
    font-size: 1.25rem;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.services-desc[b-b66wxtp56s] {
    font-size: 1rem;
    color: var(--main-text);
    line-height: 1.5;
    margin-bottom: 2rem;
}

/* Info Box */
.info-box[b-b66wxtp56s] {
    background-color: rgba(252, 87, 0, 0.07);
    border-radius: 15px;
    padding: 1.2rem 1rem 1.2rem 1rem;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 0 0.7rem 1rem 0.7rem;
}

.info-icon[b-b66wxtp56s] {
    color: var(--primary-btn);
    font-size: 1.4rem;
    flex-shrink: 0;
}

.info-text[b-b66wxtp56s] {
    color: var(--main-text);
    font-size: 0.97rem;
    line-height: inherit;
    margin: 0;
    font-weight: 400;
}

/* Return Button */
.return-btn[b-b66wxtp56s] {
    background-color: var(--secondary-btn);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-weight: 500;
    display: inline-flex;
    width: fit-content;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background-color 0.2s;
    font-size: 1rem;
    margin-top: 2rem;
}

.return-btn:hover[b-b66wxtp56s] {
    background-color: var(--secondary-btn-hover);
    color: #fff;
}

.return-btn .btn-icon[b-b66wxtp56s] {
    font-size: 1.2rem;
}

.return-btn:focus-visible:not(:disabled)[b-b66wxtp56s] {
    background-color: var(--secondary-btn-hover);
    color: #fff;
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 4px;
}



/* Media queries -  Responsive Adjustments */
@media (max-width: 576px) {
    .service-down-card[b-b66wxtp56s] {
        padding: 1rem !important;
        width: 100%;
        max-width: 100%;
        border-radius: 24px;
    }

    .illustration-container img[b-b66wxtp56s] {
        max-width: 150px;
    }

    [b-b66wxtp56s] .services-down-title {
        font-size: 1.2rem;
    }

    .services-desc[b-b66wxtp56s] {
        font-size: 0.95rem;
        max-width: 100%;
    }

    .info-box[b-b66wxtp56s] {
        flex-direction: row;
        align-items: flex-start;
        padding: 1rem;
        margin: 0 0 0.5rem 0 !important;
    }

    .info-text[b-b66wxtp56s]{
        font-size: 0.95rem;
    }
}

@media (max-height: 700px) {
    .illustration-container[b-b66wxtp56s] {
        display: none !important;
    }

    .illustration-container img[b-b66wxtp56s] {
        display: none !important;
    }

    [b-b66wxtp56s] .services-down-title {
        padding-top: 1rem;
    }

    .info-box[b-b66wxtp56s] {
        margin: 0 !important;
    }
}

/* Universal design */
/* /Pages/Components/UserProfileAlertMessageComponent.razor.rz.scp.css */
.empty-state-container-card[b-2n3n8updl4] {
    min-height: 400px !important;
}

.empty-state-container[b-2n3n8updl4] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 2rem;
    border: 2px dashed #cecece;
    border-radius: 1.5rem;
    max-width: 450px;
    margin: 3rem auto;
}

.empty-state-visual[b-2n3n8updl4] {
    margin-bottom: 1.8rem;
}

.empty-state-icon-bg[b-2n3n8updl4] {
    width: 120px;
    height: 120px;
    background-color: #fff5f5;
    color: #d32f2f;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.empty-state-icon-bg .material-symbols-outlined[b-2n3n8updl4] {
    font-size: 70px;
}

[b-2n3n8updl4] .empty-state-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--main-text);
    margin-bottom: 0.5rem;
}

.empty-state-description[b-2n3n8updl4] {
    font-size: 1rem;
    color: var(--small-text);
    line-height: 1.6;
    margin-bottom: 0;
    max-width: 320px;
}

@media (max-width: 576px) {
    .empty-state-container[b-2n3n8updl4] {
        padding: 2rem 1rem;
        margin: 1.5rem auto;
    }
}

@media (max-height: 700px) {

    .empty-state-container-card[b-2n3n8updl4] {
        min-height: 300px !important;
    }

    .empty-state-container[b-2n3n8updl4] {
        padding: 3rem 1rem;
        margin: 0 auto !important;
    }
}
/* /Pages/UserProfile.razor.rz.scp.css */
.profile-card[b-2bklvgxpli] {
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 880px;
    padding: clamp(1rem, 5vw, 2.5rem);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border: 1px solid #B0B0B0;
    margin: 1rem auto;
}

.btn-go-back[b-2bklvgxpli] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: color 0.2s ease;
    margin-bottom: 1.5rem;
    color: var(--secondary-btn);
    text-decoration: none;
}

.btn-go-back:hover[b-2bklvgxpli] {
    color: var(--secondary-btn-hover);
}

.btn-go-back:hover .btn-go-back-text[b-2bklvgxpli] {
    text-decoration: underline;
}

.btn-go-back-icon[b-2bklvgxpli] {
    font-size: 1.25rem;
    text-decoration: none !important;
    display: inline-block;
}

.profile-header-banner[b-2bklvgxpli] {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 3vw, 1.5rem);
    margin-bottom: 1.5rem;
}

.profile-avatar[b-2bklvgxpli] {
    width: clamp(60px, 10vw, 80px);
    height: clamp(60px, 10vw, 80px);
    min-width: clamp(60px, 10vw, 80px);
    border-radius: 50%;
    background-color: rgba(252, 87, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-initials[b-2bklvgxpli] {
    font-size: clamp(1.2rem, 4vw, 1.75rem);
    color: var(--primary-btn-hover);
    font-weight: 500;
}

.profile-avatar .material-symbols-outlined.profile-initials[b-2bklvgxpli] {
    font-size: clamp(1.2rem, 4vw, 2.75rem);
    color: var(--primary-btn-hover);
}

.profile-header-info[b-2bklvgxpli] {
    min-width: 0;
}

[b-2bklvgxpli] .profile-name {
    font-size: clamp(1.1rem, 4vw, 1.5rem);
    font-weight: 700;
    color: var(--main-text);
    margin: 0 0 4px 0;
    line-height: 1.2;
    text-transform: uppercase;
}

.profile-subtitle[b-2bklvgxpli] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--disabled-text);
    font-weight: 500;
}

.profile-subtitle-icon[b-2bklvgxpli] {
    font-size: 18px;
    color: var(--primary-btn);
}

.profile-divider[b-2bklvgxpli] {
    border: 0;
    border-top: 1px solid #b1b1b1;
    margin: 0 0 1.5rem 0;
}

.profile-section-title[b-2bklvgxpli] {
    font-size: 0.85rem;
    color: var(--tertiary-text);
    font-weight: 700;
    letter-spacing: 0.05em;
    margin-bottom: 1rem;
    text-transform: uppercase;
}

.profile-info-grid[b-2bklvgxpli] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.profile-info-item[b-2bklvgxpli] {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #E0E0E0;
    border-radius: 12px;
    padding: 12px 16px;
    background-color: #ffffff;
    word-break: break-word; 
}

.grid-full-width[b-2bklvgxpli] {
    grid-column: span 2;
}

.profile-info-icon-wrapper[b-2bklvgxpli] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 10px;
    background-color: rgba(252, 87, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-info-icon-wrapper span[b-2bklvgxpli] {
    font-size: 20px;
    color: var(--primary-btn-hover, #D44900);
}

.profile-info-content[b-2bklvgxpli] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.profile-info-label[b-2bklvgxpli] {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--tertiary-text, #757575);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.profile-info-value[b-2bklvgxpli] {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--main-text, #1A1A1A);
    overflow-wrap: anywhere; 
    line-height: 1.4;
}

@media (max-width: 768px) {
    .profile-info-grid[b-2bklvgxpli] {
        grid-template-columns: 1fr;
    }

    .grid-full-width[b-2bklvgxpli] {
        grid-column: span 1;
    }

    .profile-header-banner[b-2bklvgxpli] {
        flex-direction: column;
        align-items: center; 
        text-align: center;
        gap: 1rem;
    }

    .profile-header-info[b-2bklvgxpli] {
        display: flex !important;
        flex-direction: column;
        gap: 1rem;
        width: 100%;
    }

    .profile-actions[b-2bklvgxpli] {
        width: 100%;
        display: flex;
        justify-content: center;
    }

}

@media (max-width: 480px) {

    .profile-header-banner[b-2bklvgxpli] {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

@media (max-height: 600px) {
    .profile-card[b-2bklvgxpli] {
        margin: 0 auto;
        padding: 2rem;
    }

    .btn-go-back[b-2bklvgxpli] {
        margin-bottom: 1rem;
    }

    .profile-header-banner[b-2bklvgxpli] {
        margin-bottom: 1rem;
    }

    .profile-avatar[b-2bklvgxpli] {
        width: 50px;
        height: 50px;
        min-width: 50px;
    }

    .profile-initials[b-2bklvgxpli] {
        font-size: 1.2rem;
        color: var(--primary-btn-hover, #D44900);
        font-weight: 500;
    }

    .profile-divider[b-2bklvgxpli] {
        margin-bottom: 1.5rem;
    }

    .profile-info-item[b-2bklvgxpli] {
        padding: 8px 12px;
    }
}


/* Universal dseign */

.btn-go-back:focus-visible[b-2bklvgxpli] {
    outline: 3px solid #0056b3; 
    outline-offset: 4px;
    border-radius: 4px;
}

.profile-info-label[b-2bklvgxpli] {
    color: #595959;
    font-size: 0.75rem;
    letter-spacing: 0.03em;
}

.profile-info-value[b-2bklvgxpli] {
    display: block;
    width: 100%;
}
/* /Shared/CustomValidationMessageComponent.razor.rz.scp.css */
.validation-error[b-r1agg9zmf2] {
    color: #EF0000;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    margin-top: 8px;
}

.validation-icon[b-r1agg9zmf2] {
    font-size: 19.5px;
}

.validation-error:first-child[b-r1agg9zmf2] {
    margin-top: 12px !important    
}

.validation-error span:last-child[b-r1agg9zmf2] {
    line-height: 20px;
    display: inline-block;
}
/* /Shared/NavMenu.razor.rz.scp.css */
.ssp-navbar[b-zrqh0j80ms] {
    z-index: 1010;
    height: var(--navbar-height);
    background-color: var(--navbar-bg) !important;
    border-bottom: 1px solid var(--navbar-border);
    font-family: var(--font-family-base);
    padding: 0 !important;
}

.ssp-navbar .container-fluid[b-zrqh0j80ms] {
    height: 100%;
}

body.has-navbar[b-zrqh0j80ms] {
    padding-top: 0;
}

/* ── Brand (Logo + Text) ── */
.ssp-navbar .navbar-brand[b-zrqh0j80ms] {
    padding: 0;
    margin: 0;
}

.navbar-brand:hover[b-zrqh0j80ms],
.navbar-brand:focus[b-zrqh0j80ms] {
    color: var(--navbar-text);
    text-decoration: none;
}

.navbar-brand-logo[b-zrqh0j80ms] {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: contain;
}

.navbar-brand-text[b-zrqh0j80ms] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--navbar-text);
    margin-top: 0.45em;
}

/* ── Desktop Controls ── */
.navbar-controls[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Shared button style for navbar controls */
.navbar-ctrl-btn[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent;
    border: none;
    color: var(--navbar-icon);
    padding: 8px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.875rem;
    font-family: var(--font-family-base);
    transition: background-color 0.2s ease, color 0.15s ease;
    position: relative;
    white-space: nowrap;
}

    .navbar-ctrl-btn:hover[b-zrqh0j80ms] {
        background-color: var(--navbar-hover-bg);
        color: var(--navbar-text);
    }

    .navbar-ctrl-btn:focus-visible[b-zrqh0j80ms] {
        outline: 2px solid #4A90D9;
        outline-offset: 2px;
    }

    .navbar-ctrl-btn .material-icon[b-zrqh0j80ms] {
        font-size: 1.25rem;
        line-height: 1;
    }

    .navbar-ctrl-btn .chevron[b-zrqh0j80ms] {
        font-size: 0.7rem;
        transition: transform 0.2s ease;
    }

    .navbar-ctrl-btn[aria-expanded="true"] .chevron[b-zrqh0j80ms] {
        transform: rotate(180deg);
    }

/* Theme toggle button */
.navbar-theme-btn[b-zrqh0j80ms] {
    padding: 8px;
    width: 40px;
    height: 40px;
}

/* Language button */
.navbar-lang-btn .lang-code[b-zrqh0j80ms] {
    font-weight: 500;
    color: var(--navbar-text);
}

/* Avatar button */
.navbar-avatar-btn[b-zrqh0j80ms] {
    gap: 4px;
    padding: 4px 8px;
}

.navbar-avatar-icon[b-zrqh0j80ms] {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navbar-text);
    font-size: 1.2rem;
}

/* ── Desktop Dropdowns ── */
.navbar-dropdown[b-zrqh0j80ms] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: var(--dropdown-bg) !important;
    border: 1px solid var(--dropdown-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--dropdown-shadow) !important;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 1050 !important;
    overflow: hidden;
    display: block !important;
}

.navbar-dropdown.show[b-zrqh0j80ms] {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Language dropdown */
.navbar-lang-dropdown[b-zrqh0j80ms] {
    min-width: 220px;
    padding: 8px 0;
}

.navbar-lang-option[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: var(--navbar-text);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
}

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

.navbar-lang-option:focus-visible[b-zrqh0j80ms] {
    outline: 2px solid #4A90D9;
    outline-offset: -2px;
}

.navbar-lang-option-info[b-zrqh0j80ms] {
    display: flex;
    flex-direction: column;
}

.navbar-lang-option-name[b-zrqh0j80ms] {
    font-weight: 500;
}

.navbar-lang-option-sub[b-zrqh0j80ms] {
    font-size: 0.75rem;
    color: var(--navbar-text-muted);
}

.navbar-lang-option-check[b-zrqh0j80ms] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lang-check);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar-lang-option[aria-checked="true"][b-zrqh0j80ms] {
    background-color: var(--lang-selected-bg);
}

    .navbar-lang-option[aria-checked="true"] .navbar-lang-option-check[b-zrqh0j80ms] {
        opacity: 1;
        transform: scale(1);
    }

/* Avatar dropdown */
.navbar-avatar-dropdown[b-zrqh0j80ms] {
    min-width: 200px;
    padding: 8px 0;
}

.navbar-avatar-dropdown-header[b-zrqh0j80ms] {
    padding: 12px 16px;
    border-bottom: 1px solid var(--sidebar-separator);
    display: flex;
    align-items: center;
    gap: 12px;
}

.navbar-avatar-dropdown-icon[b-zrqh0j80ms] {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navbar-text);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.navbar-avatar-dropdown-info[b-zrqh0j80ms] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.navbar-avatar-dropdown-name[b-zrqh0j80ms] {
    font-weight: 500;
    color: var(--navbar-text);
    font-size: 0.9rem;
}

.navbar-avatar-dropdown-email[b-zrqh0j80ms] {
    font-size: 0.75rem;
    color: var(--navbar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-avatar-menu-item[b-zrqh0j80ms] {
    padding: 10px 16px;
    color: var(--navbar-text);
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

    .navbar-avatar-menu-item:hover[b-zrqh0j80ms] {
        background-color: var(--dropdown-hover);
        color: var(--navbar-text);
    }

    .navbar-avatar-menu-item:focus-visible[b-zrqh0j80ms] {
        outline: 2px solid #4A90D9;
        outline-offset: -2px;
    }

    .navbar-avatar-menu-item .material-icon[b-zrqh0j80ms] {
        font-size: 1.1rem;
        color: var(--navbar-icon);
        width: 20px;
        text-align: center;
    }

.navbar-avatar-menu-divider[b-zrqh0j80ms] {
    height: 1px;
    background: var(--sidebar-separator);
    margin: 4px 0;
}

/* ── Hamburger Button ── */
.navbar-hamburger[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--navbar-text);
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    transition: background-color 0.2s ease;
}

    .navbar-hamburger:hover[b-zrqh0j80ms] {
        background-color: var(--navbar-hover-bg);
    }

    .navbar-hamburger:focus-visible[b-zrqh0j80ms] {
        outline: 2px solid #4A90D9;
        outline-offset: 2px;
    }

.navbar-hamburger-icon[b-zrqh0j80ms] {
    width: 22px;
    height: 16px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .navbar-hamburger-icon span[b-zrqh0j80ms] {
        display: block;
        height: 2px;
        width: 100%;
        background: var(--navbar-text);
        border-radius: 1px;
        transition: all 0.3s ease;
    }

/* =========================================
   Mobile Sidebar
   ========================================= */
.navbar-sidebar[b-zrqh0j80ms] {
    position: fixed;
    top: 0;
    right: -320px;
    width: 400px;
    height: 100vh;
    background: var(--sidebar-bg);
    z-index: 2000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* This is the class your Razor file uses */
.navbar-sidebar.active[b-zrqh0j80ms] {
    right: 0 !important;
}

/* Sidebar Header */
.navbar-sidebar-header[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--sidebar-separator);
    flex-shrink: 0;
    min-height: var(--navbar-height);
}

.navbar-sidebar-brand[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--navbar-text);
    line-height: 1;
}

.navbar-sidebar-brand-logo[b-zrqh0j80ms] {
    width: 28px;
    height: 28px;
    border-radius: 5px;
    object-fit: contain;
}

.navbar-sidebar-brand-text[b-zrqh0j80ms] {
    font-size: 1rem;
    font-weight: 500;
    color: var(--navbar-text);
    margin-top: 0.45em;
}

.navbar-sidebar-close[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: var(--navbar-text);
    cursor: pointer;
    border-radius: 50%;
    font-size: 1.1rem;
    transition: background-color 0.2s ease;
}

    .navbar-sidebar-close:hover[b-zrqh0j80ms] {
        background: rgba(255, 255, 255, 0.18);
    }

    .navbar-sidebar-close:focus-visible[b-zrqh0j80ms] {
        outline: 2px solid #4A90D9;
        outline-offset: 2px;
    }

/* Sidebar User Section */
.navbar-sidebar-user[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 16px;
    margin: 12px;
    background: var(--sidebar-user-bg);
    border-radius: 14px;
    flex-shrink: 0;
}

.navbar-sidebar-user-avatar[b-zrqh0j80ms] {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navbar-text);
    font-size: 1.5rem;
    flex-shrink: 0;
}

.navbar-sidebar-user-info[b-zrqh0j80ms] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.navbar-sidebar-user-name[b-zrqh0j80ms] {
    font-weight: 500;
    color: var(--navbar-text);
    font-size: 1rem;
}

.navbar-sidebar-user-email[b-zrqh0j80ms] {
    font-size: 0.8rem;
    color: var(--navbar-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Menu Items */
.navbar-sidebar-menu[b-zrqh0j80ms] {
    list-style: none;
    padding: 8px 12px;
    margin: 0;
    flex-shrink: 0;
}

.navbar-sidebar-menu-item[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--navbar-text);
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.95rem;
    transition: background-color 0.15s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-base);
}

    .navbar-sidebar-menu-item:hover[b-zrqh0j80ms] {
        background-color: var(--navbar-hover-bg);
        color: var(--navbar-text);
    }

    .navbar-sidebar-menu-item:focus-visible[b-zrqh0j80ms] {
        outline: 2px solid #4A90D9;
        outline-offset: -2px;
    }

    .navbar-sidebar-menu-item .material-icon[b-zrqh0j80ms] {
        font-size: 1.2rem;
        color: var(--navbar-icon);
        width: 24px;
        text-align: center;
    }

/* Sidebar Separator */
.navbar-sidebar-separator[b-zrqh0j80ms] {
    height: 1px;
    background: var(--sidebar-separator);
    margin: 8px 16px;
    flex-shrink: 0;
}

/* Sidebar Section Label */
.navbar-sidebar-section-label[b-zrqh0j80ms] {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--sidebar-section-label);
    padding: 12px 28px 4px;
    flex-shrink: 0;
}

/* Sidebar Preferences */
.navbar-sidebar-prefs[b-zrqh0j80ms] {
    padding: 4px 12px;
    flex-shrink: 0;
}

/* Theme row */
.navbar-sidebar-pref-row[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    font-family: var(--font-family-base);
    color: var(--navbar-text);
}

    .navbar-sidebar-pref-row:hover[b-zrqh0j80ms] {
        background-color: var(--navbar-hover-bg);
    }

    .navbar-sidebar-pref-row:focus-visible[b-zrqh0j80ms] {
        outline: 2px solid #4A90D9;
        outline-offset: -2px;
    }

.navbar-sidebar-pref-left[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.95rem;
}

    .navbar-sidebar-pref-left .material-icon[b-zrqh0j80ms] {
        font-size: 1.2rem;
        color: var(--navbar-icon);
        width: 24px;
        text-align: center;
    }

.navbar-sidebar-theme-badge[b-zrqh0j80ms] {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 14px;
    border-radius: 20px;
    background: var(--badge-bg);
    color: var(--badge-text);
    transition: all 0.2s ease;
}

/* Language section in sidebar */
.navbar-sidebar-lang-header[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--navbar-text);
    cursor: pointer;
    border-radius: 10px;
    transition: background-color 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-base);
}

.navbar-sidebar-lang-header:hover[b-zrqh0j80ms] {
    background-color: var(--navbar-hover-bg);
}

.navbar-sidebar-lang-header:focus-visible[b-zrqh0j80ms] {
    outline: 2px solid #4A90D9;
    outline-offset: -2px;
}

.navbar-sidebar-lang-header .material-icon[b-zrqh0j80ms] {
    font-size: 1.2rem;
    color: var(--navbar-icon);
    width: 24px;
    text-align: center;
}

/* Language list */
.navbar-sidebar-lang-list[b-zrqh0j80ms] {
    list-style: none;
    padding: 0 8px;
    margin: 4px 0 0 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

    .navbar-sidebar-lang-list.is-expanded[b-zrqh0j80ms] {
        max-height: 400px;
    }

.navbar-sidebar-lang-item[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px 12px 52px;
    color: var(--navbar-text);
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: var(--font-family-base);
    font-size: 0.9rem;
}

.navbar-sidebar-lang-item:hover[b-zrqh0j80ms] {
    background-color: var(--navbar-hover-bg);
}

.navbar-sidebar-lang-item:focus-visible[b-zrqh0j80ms] {
    outline: 2px solid #4A90D9;
    outline-offset: -2px;
}

.navbar-sidebar-lang-item-info[b-zrqh0j80ms] {
    display: flex;
    flex-direction: column;
}

.navbar-sidebar-lang-item-name[b-zrqh0j80ms] {
    font-weight: 500;
}

.navbar-sidebar-lang-item-sub[b-zrqh0j80ms] {
    font-size: 0.72rem;
    color: var(--navbar-text-muted);
}

.navbar-sidebar-lang-item-check[b-zrqh0j80ms] {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--lang-check);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.navbar-sidebar-lang-item[aria-checked="true"][b-zrqh0j80ms] {
    background-color: var(--lang-selected-bg);
}

.navbar-sidebar-lang-item[aria-checked="true"] .navbar-sidebar-lang-item-check[b-zrqh0j80ms] {
    opacity: 1;
    transform: scale(1);
}

.dropdown-caret-animation[b-zrqh0j80ms] {
    display: block !important;
    position: absolute !important;
    inset: 0px 0px auto auto;
    margin: 0px;
    transform: translate(0px, 44px) !important;
}

/* Sidebar Logout */
.navbar-sidebar-logout[b-zrqh0j80ms] {
    margin-top: auto;
    padding: 12px;
    border-top: 1px solid var(--sidebar-separator);
    flex-shrink: 0;
}

.navbar-sidebar-logout-btn[b-zrqh0j80ms] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: #F44336;
    text-decoration: none;
    border-radius: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    transition: background-color 0.15s ease;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}

.navbar-sidebar-logout-btn:hover[b-zrqh0j80ms] {
    background-color: rgba(244, 67, 54, 0.08);
    color: #F44336 !important;
}

.navbar-sidebar-logout-btn:focus-visible[b-zrqh0j80ms] {
    outline: 2px solid #4A90D9;
    outline-offset: 2px;
}

.navbar-sidebar-logout-btn .material-icon[b-zrqh0j80ms] {
    font-size: 1.2rem;
    width: 24px;
    text-align: center;
}

/* ── Backdrop ── */
.navbar-backdrop[b-zrqh0j80ms] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.navbar-backdrop.show[b-zrqh0j80ms] {
    display: block !important;
    opacity: 1;
}


/* Ensure the desktop dropdown menu displays when Blazor adds the .show class */
.dropdown-menu.show[b-zrqh0j80ms] {
    display: block;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Force hamburger to show on tablets (up to 1200px) */
@media (max-width: 1199.98px) {
    .navbar-expand-xl .navbar-collapse[b-zrqh0j80ms] {
        display: none !important;
    }

    .navbar-toggler[b-zrqh0j80ms] {
        display: block !important;
    }
}

/* 1. Sidebar Base Style */
.navbar-sidebar[b-zrqh0j80ms] {
    position: fixed;
    top: 0;
    right: -320px;
    width: 300px;
    height: 100vh;
    z-index: 2000;
    transition: all 0.3s ease-in-out;
    box-shadow: -5px 0 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
}

.navbar-sidebar.active[b-zrqh0j80ms] {
    right: 0 !important; 
}

/* 3. Backdrop Style */
.navbar-backdrop[b-zrqh0j80ms] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

    /* 4. When Backdrop is shown */
    .navbar-backdrop.show[b-zrqh0j80ms] {
        display: block !important;
        opacity: 1;
    }

/* 5. Show Desktop Dropdown when clicked */
.dropdown-menu.show[b-zrqh0j80ms] {
    display: block !important;
    opacity: 1;
    transform: translateY(10px);
}


/* =========================================
   Responsive
   ========================================= */

/* Mobile: show hamburger, hide desktop controls */
@media (min-width: 1200px) {
    .navbar-hamburger[b-zrqh0j80ms] {
        display: none !important;
    }
}

/* Show hamburger on everything smaller than 1200px (Tablets & Phones) */
@media (max-width: 1199.98px) {
    .navbar-hamburger[b-zrqh0j80ms] {
        display: flex !important; 
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        color: #fff;
        cursor: pointer;
    }

    .navbar-controls[b-zrqh0j80ms] {
        display: none !important;
    }
}


/* ── Reduced Motion ── */
@media (prefers-reduced-motion: reduce) {

    .navbar-sidebar[b-zrqh0j80ms],
    .navbar-dropdown[b-zrqh0j80ms],
    .navbar-backdrop[b-zrqh0j80ms],
    .navbar-ctrl-btn[b-zrqh0j80ms],
    .navbar-sidebar-lang-list[b-zrqh0j80ms],
    .navbar-lang-option-check[b-zrqh0j80ms],
    .navbar-sidebar-lang-item-check[b-zrqh0j80ms] {
        transition: none;
    }
}

/* ── Print ── */
@media print {

    .navbar-ssp[b-zrqh0j80ms],
    .navbar-sidebar[b-zrqh0j80ms],
    .navbar-backdrop[b-zrqh0j80ms] {
        display: none !important;
    }

    body.has-navbar[b-zrqh0j80ms] {
        padding-top: 0;
    }
}

/* Zoom stylings */

@media (max-height: 500px) {
    .ssp-navbar[b-zrqh0j80ms] {
        position: absolute !important; 
    }
    
    body[b-zrqh0j80ms] {
        padding-top: 0 !important; 
    }
}

@media (max-width: 576px) {
    .navbar-brand-text[b-zrqh0j80ms] {
        font-size: 0.9rem; 
    }
    .navbar-brand-logo[b-zrqh0j80ms] {
        width: 24px;
        height: 24px;
    }
}


/* Additonal stylings */

.navbar-sidebar-lang-item[b-zrqh0j80ms] {
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background 0.2s;
}

.navbar-sidebar-lang-item:hover[b-zrqh0j80ms] {
    background: rgba(0,0,0,0.05);
    color: #fff;
}

.navbar-sidebar-lang-header[b-zrqh0j80ms] {
    padding: 12px 16px;
    cursor: pointer;
}

.navbar-sidebar-lang-header:focus[b-zrqh0j80ms], .navbar-sidebar-pref-row:focus[b-zrqh0j80ms] {
    outline: none;
    background: rgba(0,0,0,0.02);
}

.navbar-lang-option[b-zrqh0j80ms],
.navbar-sidebar-lang-item[b-zrqh0j80ms],
.navbar-ctrl-btn[b-zrqh0j80ms] {
    outline: none !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}


.navbar-lang-option:hover[b-zrqh0j80ms] {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
}

.dropdown-item.active[b-zrqh0j80ms],
.navbar-lang-option.active[b-zrqh0j80ms],
.navbar-sidebar-lang-item.active[b-zrqh0j80ms] {
    background-color: #007bff !important; /
    color: #fff !important;
}

.material-symbols-outlined[b-zrqh0j80ms] {
    vertical-align: middle;
}

.navbar-sidebar-lang-item:hover[b-zrqh0j80ms] {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.navbar-sidebar-lang-item.active[b-zrqh0j80ms] {
    background-color: rgba(0, 123, 255, 0.2) !important; 
    border-left: 3px solid #007bff;
}

.navbar-sidebar-lang-item[aria-checked="true"] .material-symbols-outlined[b-zrqh0j80ms] {
    opacity: 1;
    color: #fff !important;
}

.nav-link:focus[b-zrqh0j80ms] {
    color: var(--navbar-icon) !important
}

.dropdown-overlay[b-zrqh0j80ms] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
}
/* /Shared/PwaInstallPrompt.razor.rz.scp.css */
.pwa-install-card[b-bkj6o9hbst] {
    position: fixed;
    z-index: 1050;
    box-shadow: 0 12px 40px 5px rgba(0, 97, 185, 0.25), 0 4px 10px rgba(0,0,0,0.05);
}

/* Icon Containers */
.bg-rocket-icon[b-bkj6o9hbst] {
    background-color: rgba(0, 97, 185, 0.1);
    color: var(--secondary-btn);
    min-width: 42px;
    height: 42px;
}

.rocket-icon[b-bkj6o9hbst] {
    font-size: 24px;
}

/* Typography & Content */
.small-medium[b-bkj6o9hbst] {
    font-size: 0.95rem;
    color: var(--main-text);
}

/* Button Styling */
.btn-pwa[b-bkj6o9hbst] {
    background-color: var(--secondary-btn);
    color: #fff;
    transition: all 0.2s ease;
    border: none;
}

.btn-pwa:hover[b-bkj6o9hbst] {
    background-color: var(--secondary-btn-hover);
    color: #fff;
    transform: translateY(-1px);
}

.btn-pwa:focus-visible:not(:disabled)[b-bkj6o9hbst] {
    background-color: var(--secondary-btn-hover);
    color: #fff;
    outline: 3px solid var(--focus-ring-color);
    outline-offset: 4px;
}

/* Dismiss Icon Button */
.btn-dismiss[b-bkj6o9hbst] {
    transition: background-color 0.2s ease;
    color: #595959 !important;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.btn-dismiss:hover[b-bkj6o9hbst], .btn-dismiss:focus[b-bkj6o9hbst] {
    background-color: rgba(0,0,0,0.05);
    outline: none;
    color: #000 !important;
}

.btn-dismiss:focus-visible[b-bkj6o9hbst] {
    box-shadow: 0 0 0 2px var(--bs-primary);
}

/* Entrance Animation */
.pwa-entry-animation[b-bkj6o9hbst] {
    animation: pwaSlideUp-b-bkj6o9hbst 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pwaSlideUp-b-bkj6o9hbst {
    from {
        transform: translateY(30px);
        opacity: 0;
    }

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

/* Global Icon Alignment Fix */
.material-symbols-outlined[b-bkj6o9hbst] {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

/* Responsive Positioning & Card Padding */
@media (max-width: 425px) {
    .btn-pwa-text[b-bkj6o9hbst] {
        font-size: 0.84rem;
    }
}

@media (max-width: 767.98px) {
    .pwa-install-card[b-bkj6o9hbst] {
        bottom: 1.5rem;
        left: 1rem;
        right: 1rem;
        margin: 0 auto;
        width: auto;
        max-width: 450px;
        padding: 1rem;
    }

    .btn-pwa span:last-child[b-bkj6o9hbst] {
        max-width: calc(100% - 2.5rem);
    }
}

@media (min-width: 768px) {
    .pwa-install-card[b-bkj6o9hbst] {
        bottom: 2rem;
        right: 2rem;
        width: 360px;
        padding: 1.5rem;
    }
}
/* /Shared/SSPLayout.razor.rz.scp.css */
html[b-1a2njixi3g],
body[b-1a2njixi3g] {
    height: 100%;
    margin: 0;
    padding: 0;
}

body[b-1a2njixi3g] {
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

/* Main Container: */
.main-container[b-1a2njixi3g] {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 2rem 1rem;
    box-sizing: border-box;
    margin-top: var(--navbar-height, 56px);
}

/* Content Wrapper */
.content-wrapper[b-1a2njixi3g] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    min-height: 100%;
}


/* Universal design */

.skip-to-content[b-1a2njixi3g] {
    position: fixed;
    top: -100px;
    width: 99vw;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    background-color: var(--secondary-btn);
    color: #fff;
    padding: 0.8rem 2rem;
    z-index: 10000;
    font-weight: 700;
    text-decoration: none;
    border: 2px solid #0056b3;
    border-radius: 0 0 15px 15px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    transition: top 0.3s ease-out;
    margin-top: 1rem;   
}

.skip-to-content:focus[b-1a2njixi3g] {
    top: 0;
    outline: 4px solid #ffcc00;
    outline-offset: 2px;
}

#page-title:focus-visible[b-1a2njixi3g] {
    outline: 4px solid var(--focus-ring-color);
    outline-offset: 8px;
    border-radius: 8px;
    display: inline-block; 
}
/* /Shared/ToastComponent.razor.rz.scp.css */
.dni-toast-container[b-20wtru7req] {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    pointer-events: none;
}

.dni-toast[b-20wtru7req] {
    pointer-events: auto;
    display: flex;
    align-items: center;
    min-width: 350px;
    max-width: 450px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
}

    /* Colors from Image (Dark Tints) */
    .dni-toast.danger[b-20wtru7req] {
        background-color: #1a0b0b;
    }
    /* Dark Red-Black */
    .dni-toast.warning[b-20wtru7req] {
        background-color: #1a140b;
    }
    /* Dark Gold-Black */
    .dni-toast.success[b-20wtru7req] {
        background-color: #0b1a0e;
    }
    /* Dark Green-Black */
    .dni-toast.info[b-20wtru7req] {
        background-color: #0b111a;
    }
/* Dark Blue-Black */

/* Icon Box Branding */
.dni-toast-icon-wrapper[b-20wtru7req] {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 15px;
}

.danger .dni-toast-icon-wrapper[b-20wtru7req] {
    background-color: #E53E3E;
}

.warning .dni-toast-icon-wrapper[b-20wtru7req] {
    background-color: #F6AD55;
}

.success .dni-toast-icon-wrapper[b-20wtru7req] {
    background-color: #48BB78;
}

.info .dni-toast-icon-wrapper[b-20wtru7req] {
    background-color: #4299E1;
}

.dni-toast-icon-wrapper span[b-20wtru7req] {
    font-size: 22px;
    color: white;
}

/* Message Styling */
.dni-toast-message[b-20wtru7req] {
    flex-grow: 1;
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.4;
    padding-right: 10px;
}

/* Close Button & Hover Box */
.dni-toast-close[b-20wtru7req] {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dni-toast-close:hover[b-20wtru7req] {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.dni-toast-close span[b-20wtru7req] {
    font-size: 18px;
}

/* Animations: Slide in/out Right */
.dni-toast.enter[b-20wtru7req] {
    animation: dniSlideIn-b-20wtru7req 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

.dni-toast.exit[b-20wtru7req] {
    animation: dniSlideOut-b-20wtru7req 0.4s ease-in forwards;
}

@keyframes dniSlideIn-b-20wtru7req {
    from {
        transform: translateX(120%);
        opacity: 0;
    }

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

@keyframes dniSlideOut-b-20wtru7req {
    from {
        transform: translateX(0);
        opacity: 1;
        height: auto;
        margin-bottom: 12px;
    }

    to {
        transform: translateX(120%);
        opacity: 0;
        height: 0;
        margin-bottom: 0;
        padding: 0;
    }
}

/* RESPONSIVENESS: MOBILE PHONES */
@media (max-width: 576px) {
    .dni-toast-container[b-20wtru7req] {
        top: 12px;
        right: 12px;
        left: 12px; 
        align-items: center;
    }

    .dni-toast[b-20wtru7req] {
        width: 100%; 
        max-width: none;
        animation-name: dniSlideInTop-b-20wtru7req !important;
    }

    @keyframes dniSlideInTop-b-20wtru7req {
        from {
            transform: translateY(-100%);
            opacity: 0;
        }

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