/*
 * Den Syntetiske Tro · medlemsinvitation efter 20 sekunder
 * Bruger ikke <dialog>, så den også er robust i Safari/iPad.
 */

.membership-invite-backdrop[hidden],
.membership-invite[hidden] {
    display: none !important;
}

.membership-invite-backdrop {
    position: fixed;
    z-index: 12000;
    inset: 0;
    background: rgba(20, 10, 36, .68);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.membership-invite {
    position: fixed;
    z-index: 12001;
    left: 50%;
    bottom: clamp(18px, 4vw, 42px);
    width: min(92vw, 610px);
    max-height: calc(100vh - 36px);
    max-height: calc(100dvh - 36px);
    overflow: auto;
    box-sizing: border-box;
    padding: clamp(25px, 5vw, 38px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 28px;
    color: #f8f4ff;
    background:
        radial-gradient(
            circle at 84% 12%,
            rgba(255, 43, 194, .30),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            #201132,
            #38205e 58%,
            #211331
        );
    box-shadow:
        0 30px 100px rgba(10, 3, 23, .48),
        inset 0 0 0 1px rgba(255, 255, 255, .035);
    transform: translate(-50%, 30px);
    opacity: 0;
    transition:
        transform .24s ease,
        opacity .24s ease;
    -webkit-overflow-scrolling: touch;
}

.membership-invite.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
}

body.membership-invite-open {
    overflow: hidden;
}

.membership-invite-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-size: 1.25rem;
    cursor: pointer;
}

.membership-invite .eyebrow {
    color: #a7f8ff;
}

.membership-invite h2 {
    max-width: 520px;
    margin: 8px 42px 12px 0;
    color: #fff;
    font-size: clamp(1.75rem, 5vw, 3rem);
    line-height: 1.02;
    letter-spacing: -.04em;
}

.membership-invite-intro {
    max-width: 540px;
    margin: 0 0 20px;
    color: #ddd3ec;
    line-height: 1.62;
}

.membership-invite-benefits {
    display: grid;
    gap: 11px;
    margin: 0 0 24px;
    padding: 0;
    list-style: none;
}

.membership-invite-benefits li {
    position: relative;
    padding: 12px 14px 12px 44px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    color: #f5efff;
    background: rgba(255, 255, 255, .055);
    line-height: 1.45;
}

.membership-invite-benefits li::before {
    content: "✓";
    position: absolute;
    left: 15px;
    top: 11px;
    color: #d8ff37;
    font-weight: 900;
}

.membership-invite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    align-items: center;
}

.membership-invite-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    color: #1e1328;
    background: #d8ff37;
    font-family: "Oxanium", system-ui, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
}

.membership-invite-later {
    min-height: 42px;
    padding: 0 4px;
    border: 0;
    color: #d9cee8;
    background: transparent;
    font: inherit;
    font-size: .78rem;
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.membership-invite-note {
    margin: 17px 0 0;
    color: #bdb0cf;
    font-size: .69rem;
    line-height: 1.5;
}

.membership-invite-note a {
    color: #cbb6ff;
}

.daily-text-email-card {
    margin: 28px 0 4px;
    padding: 22px;
    border: 1px solid rgba(103, 70, 255, .20);
    border-radius: 22px;
    background:
        linear-gradient(
            135deg,
            rgba(103, 70, 255, .08),
            rgba(255, 43, 194, .035)
        );
}

.daily-text-email-card h3 {
    margin: 7px 0 10px;
    font-size: clamp(1.3rem, 2.5vw, 1.75rem);
}

.daily-text-email-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 14px;
    padding: 7px 10px;
    border-radius: 999px;
    color: var(--violet-dark);
    background: rgba(103, 70, 255, .09);
    font-size: .72rem;
    font-weight: 800;
}

.daily-text-email-status::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.daily-text-email-card .consent-row {
    margin-top: 16px;
}

.profile-notice {
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid rgba(45, 173, 116, .24);
    border-radius: 14px;
    color: #195e43;
    background: rgba(72, 224, 155, .10);
}

@media (max-width: 620px) {
    .membership-invite {
        bottom: 10px;
        width: calc(100vw - 20px);
        max-height: calc(100dvh - 20px);
        padding: 24px 20px;
        border-radius: 22px;
    }

    .membership-invite-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .membership-invite-primary,
    .membership-invite-later {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .membership-invite {
        transition: none;
    }
}