@import '_content/CountryCodePhoneComponent/CountryCodePhoneComponent.71j1qkz3bk.bundle.scp.css';
@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css';

/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-bnqe1jcc4c],
.components-reconnect-repeated-attempt-visible[b-bnqe1jcc4c],
.components-reconnect-failed-visible[b-bnqe1jcc4c],
.components-pause-visible[b-bnqe1jcc4c],
.components-resume-failed-visible[b-bnqe1jcc4c],
.components-rejoining-animation[b-bnqe1jcc4c] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-retrying[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-failed[b-bnqe1jcc4c],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-bnqe1jcc4c] {
    display: block;
}


#components-reconnect-modal[b-bnqe1jcc4c] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-bnqe1jcc4c 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-bnqe1jcc4c 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-bnqe1jcc4c 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-bnqe1jcc4c]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-bnqe1jcc4c 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-bnqe1jcc4c {
    0% {
        transform: translateY(30px) scale(0.95);
    }

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

@keyframes components-reconnect-modal-fadeInOpacity-b-bnqe1jcc4c {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-bnqe1jcc4c {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-bnqe1jcc4c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-bnqe1jcc4c] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-bnqe1jcc4c] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-bnqe1jcc4c] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-bnqe1jcc4c] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-bnqe1jcc4c] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-bnqe1jcc4c] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-bnqe1jcc4c 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-bnqe1jcc4c] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-bnqe1jcc4c {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/PointsCalculator.razor.rz.scp.css */
/* Also carries the "fluent-island" class (see PointsCalculator.razor): Tailwind's Preflight is
   scoped to stop here, so everything below is plain CSS against browser defaults + Fluent. */
.calc-page[b-x7h7btyepq] {
    max-width: 860px;
    margin: 0 auto;
    padding: 2.5rem 1.5rem 4rem;
}

/* PublicLayout's .ck-public-scale wrapper bumps the whole public site up ~12.5% and retargets the
   Fluent font-size tokens to Tailwind's type scale, which is right for the marketing pages but
   would silently inflate the Fluent components in here. Both are put back to Fluent's own defaults
   for this subtree; rem (not em) so the 112.5% on the ancestor doesn't compound. */
.calc-page[b-x7h7btyepq] {
    font-size: 1rem;
    --fontSizeBase400: 16px;
    --fontSizeBase500: 20px;
    --fontSizeBase600: 24px;
    --fontSizeHero700: 28px;
    --fontSizeHero800: 32px;
    --fontSizeHero900: 40px;
    --lineHeightBase400: 22px;
    --lineHeightBase500: 28px;
    --lineHeightBase600: 32px;
    --lineHeightHero700: 36px;
    --lineHeightHero800: 40px;
    --lineHeightHero900: 52px;
}

.calc-hero[b-x7h7btyepq] {
    text-align: center;
    margin-bottom: 2.5rem;
}

.calc-hero h1[b-x7h7btyepq] {
    margin: 0 0 0.5rem;
    font-size: 2rem;
    font-weight: 700;
    color: var(--ck-navy, #0b2545);
}

.calc-hero p[b-x7h7btyepq] {
    margin: 0 auto;
    max-width: 40rem;
    color: var(--ck-text-muted, #5b6b7c);
}

.calc-card[b-x7h7btyepq] {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Spacing/markers are declared outright rather than inherited from a global reset - Tailwind's
   Preflight (which used to supply `list-style: none` and the zeroed heading margins below) no
   longer reaches inside this page. */
.calc-reason-list[b-x7h7btyepq] {
    margin: 1rem;
    padding-inline-start: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    list-style: none;
}

.calc-card h3[b-x7h7btyepq] {
    margin: 0;
    color: var(--ck-navy, #0b2545);
}

.calc-help-links[b-x7h7btyepq] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom:1rem;
}

.calc-start-over[b-x7h7btyepq] {
    align-self: flex-start;
}

.calc-step-intro[b-x7h7btyepq] {
    margin: 0 0 1rem;
    color: var(--ck-text-muted, #5b6b7c);
}

.calc-hint[b-x7h7btyepq] {
    margin: -0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--ck-text-muted, #5b6b7c);
}

.calc-field-error[b-x7h7btyepq] {
    color: #b3261e;
    font-size: 0.875rem;
}

.calc-results[b-x7h7btyepq] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.calc-results h2[b-x7h7btyepq] {
    margin: 0;
    color: var(--ck-navy, #0b2545);
}

.calc-results h3[b-x7h7btyepq] {
    margin: 0.5rem 0 0;
    color: var(--ck-navy, #0b2545);
}

.calc-score[b-x7h7btyepq] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0;
}

.calc-score-number[b-x7h7btyepq] {
    font-size: 3rem;
    font-weight: 800;
    color: var(--ck-navy, #0b2545);
}

.calc-score-suffix[b-x7h7btyepq] {
    font-size: 1rem;
    color: var(--ck-text-muted, #5b6b7c);
}

.calc-breakdown-table[b-x7h7btyepq] {
    width: 100%;
    border-collapse: collapse;
}

.calc-breakdown-table td[b-x7h7btyepq] {
    padding: 0.5rem 0;
    border-top: 1px solid var(--ck-border, #e2e6ed);
}

.calc-breakdown-points[b-x7h7btyepq] {
    text-align: right;
    font-weight: 600;
    color: var(--ck-navy, #0b2545);
}

.calc-breakdown-total td[b-x7h7btyepq] {
    border-top: 2px solid var(--ck-navy, #0b2545);
    font-weight: 700;
}

.calc-disclaimer[b-x7h7btyepq] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--ck-text-muted, #5b6b7c);
}

.calc-email-prompt[b-x7h7btyepq] {
    margin: 0;
    font-weight: 600;
    color: var(--ck-navy, #0b2545);
}