/*
 * Den Syntetiske Tro · mobilrettelse til Første adgangspagt
 *
 * På små skærme samles de fire informationsbokse i én udfoldelig
 * enhed. Acceptknappen er sticky, så den ikke forsvinder under
 * browserens nederste værktøjslinje.
 */

.privacy-promise-all-mobile {
    display: none;
}

@media (max-width: 640px), (max-height: 650px) {
    .privacy-promise-modal {
        width: calc(100vw - 12px);
        max-height: calc(100dvh - 12px);
        border-radius: 20px;
    }

    .privacy-promise-shell {
        display: flex;
        flex-direction: column;
        max-height: calc(100dvh - 12px);
        padding: 17px 16px 0;
        border-radius: 20px;
        overscroll-behavior: contain;
    }

    .privacy-promise-shell > .symbol {
        display: none;
    }

    .privacy-promise-shell .eyebrow {
        margin-bottom: 3px;
        font-size: .64rem;
    }

    .privacy-promise-shell h2 {
        margin: .15rem 0 .55rem;
        font-size: clamp(1.55rem, 8vw, 2.25rem);
        line-height: 1.02;
    }

    .privacy-promise-lead {
        margin: 0;
        font-size: .88rem;
        line-height: 1.48;
    }

    .privacy-promise-points-desktop {
        display: none;
    }

    .privacy-promise-all-mobile {
        display: block;
        flex: 0 0 auto;
        margin: .82rem 0;
        border: 1px solid rgba(103, 70, 255, .18);
        border-radius: 15px;
        background: rgba(255, 255, 255, .68);
        overflow: hidden;
    }

    .privacy-promise-all-mobile > summary {
        position: relative;
        padding: 13px 43px 13px 14px;
        color: var(--violet-dark);
        font-family: "Oxanium", system-ui, sans-serif;
        font-size: .78rem;
        font-weight: 800;
        line-height: 1.35;
        cursor: pointer;
        list-style: none;
    }

    .privacy-promise-all-mobile > summary::-webkit-details-marker {
        display: none;
    }

    .privacy-promise-all-mobile > summary::after {
        content: "+";
        position: absolute;
        top: 50%;
        right: 15px;
        width: 24px;
        height: 24px;
        display: grid;
        place-items: center;
        border-radius: 50%;
        color: #fff;
        background: var(--violet-dark);
        transform: translateY(-50%);
        font-size: 1rem;
        line-height: 1;
    }

    .privacy-promise-all-mobile[open] > summary::after {
        content: "−";
    }

    .privacy-promise-all-content {
        max-height: min(37dvh, 280px);
        overflow-y: auto;
        padding: 0 13px 12px;
        border-top: 1px solid rgba(103, 70, 255, .12);
        -webkit-overflow-scrolling: touch;
    }

    .privacy-promise-all-content section {
        padding: 11px 1px;
        border-bottom: 1px solid rgba(103, 70, 255, .10);
    }

    .privacy-promise-all-content section:last-child {
        border-bottom: 0;
    }

    .privacy-promise-all-content h3 {
        margin: 0 0 4px;
        color: var(--violet-dark);
        font-family: "Oxanium", system-ui, sans-serif;
        font-size: .72rem;
        line-height: 1.35;
    }

    .privacy-promise-all-content p {
        margin: 0;
        color: var(--muted);
        font-size: .76rem;
        line-height: 1.48;
    }

    .privacy-age-confirm {
        margin-top: 0;
        padding: 11px 12px;
        border-radius: 13px;
        font-size: .76rem;
        line-height: 1.42;
    }

    .privacy-age-confirm input {
        flex: 0 0 auto;
    }

    .privacy-promise-joke {
        margin: .65rem 0 .2rem;
        font-size: .67rem;
        line-height: 1.4;
    }

    .privacy-promise-shell > .modal-actions {
        position: sticky;
        z-index: 5;
        bottom: 0;
        margin: 0 -16px;
        padding: 10px 16px max(14px, env(safe-area-inset-bottom));
        background:
            linear-gradient(
                180deg,
                rgba(255, 253, 248, 0),
                #fffdf8 24%
            );
    }

    .privacy-promise-shell > .modal-actions .primary-link {
        width: 100%;
        min-height: 48px;
        box-sizing: border-box;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .privacy-promise-all-mobile > summary::after {
        transition: none;
    }
}