@import '_content/GWR.Lookback.Shared/GWR.Lookback.Shared.9x206sg06a.bundle.scp.css';

/* /Layout/MainLayout.razor.rz.scp.css */
/* /Layout/NavMenu.razor.rz.scp.css */
/* /Pages/Auth/AcceptInvite.razor.rz.scp.css */
/* Mirrors the B2C page template (wwwroot/b2c/mesa-shell.html) so the landing
   page and the hosted sign-up read as one continuous flow. Keep the two in
   sync if the brand tokens change. */

.invite-page[b-ealgm3nbk4] {
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    font-family: 'Inter', Helvetica, Arial, sans-serif;
    color: #264653;
    /* warm desert wash: peach -> sand */
    background: radial-gradient(120% 120% at 50% 0%, #FDE3CA 0%, #F9F5EB 55%);
}

.invite-card[b-ealgm3nbk4] {
    width: 100%;
    max-width: 420px;
    background: #FFFFFF;
    border: 1px solid #E4DDD0;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(38, 70, 83, 0.12);
    padding: 36px 32px 32px;
    text-align: center;
}

.invite-brand[b-ealgm3nbk4] {
    margin-bottom: 20px;
}

.invite-wordmark[b-ealgm3nbk4] {
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #E63946;
    line-height: 1;
}

.invite-tagline[b-ealgm3nbk4] {
    margin-top: 6px;
    font-size: 0.9rem;
    color: #6D6875;
}

.invite-heading[b-ealgm3nbk4] {
    font-size: 1.25rem;
    font-weight: 600;
    color: #264653;
    margin: 0 0 12px;
}

.invite-body[b-ealgm3nbk4] {
    font-size: 0.95rem;
    color: #6D6875;
    margin: 0 0 16px;
    line-height: 1.5;
}

.invite-email-note[b-ealgm3nbk4] {
    font-size: 0.88rem;
    line-height: 1.5;
    color: #264653;
    background: #F9F5EB;
    border: 1px solid #E4DDD0;
    border-radius: 8px;
    padding: 12px 14px;
    margin-bottom: 20px;
    overflow-wrap: anywhere; /* long emails must wrap, not overflow the card */
}

.invite-cta[b-ealgm3nbk4] {
    width: 100%;
    padding: 11px 16px;
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    background: #E63946;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.15s ease;
    overflow-wrap: anywhere;
}

.invite-cta:hover[b-ealgm3nbk4] {
    background: #D62828;
}

.invite-footer[b-ealgm3nbk4] {
    margin-top: 16px;
    font-size: 0.78rem;
    color: #6D6875;
}

@media (max-width: 480px) {
    .invite-card[b-ealgm3nbk4] {
        padding: 28px 20px 24px;
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .invite-page[b-ealgm3nbk4] {
        background: #F9F5EB;
    }
}