#privacy-overlay {
    position: fixed;
    top: var(--privacy-viewport-offset, 0px);
    right: 0;
    left: 0;
    z-index: 999998;

    display: flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    height: var(--privacy-viewport-height, 100dvh);
    padding:
        max(1rem, env(safe-area-inset-top, 0px))
        1rem
        max(1rem, env(safe-area-inset-bottom, 0px));
    overflow: hidden;

    background: color-mix(
        in srgb,
        var(--aw-black) 65%,
        transparent
    );

    backdrop-filter: blur(4px);

    overscroll-behavior: contain;
    opacity: 0;

    transition: opacity 220ms ease;
}

#privacy-overlay.privacy-visible {
    opacity: 1;
}

.privacy-hidden {
    display: none !important;
}

.privacy-modal {
    width: min(920px, 100%);
    max-height: 100%;

    display: flex;
    flex-direction: column;

    background: var(--site-surface);
    color: var(--site-text);

    border: 1px solid var(--site-border);
    border-radius: 0.75rem;

    box-shadow: 0 1.5rem 4rem color-mix(
        in srgb,
        var(--aw-black) 25%,
        transparent
    );

    overflow: hidden;

    opacity: 0;
    transform: translateY(-32px);

    transition:
        opacity 220ms ease,
        transform 220ms ease;
}

#privacy-overlay.privacy-visible .privacy-modal {
    opacity: 1;
    transform: translateY(0);
}

.privacy-header {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;

    padding: 1.25rem 1.5rem;

    background: var(--site-surface);

    border-bottom: 1px solid var(--site-border);
}

.privacy-header h2 {
    margin: 0;

    color: var(--site-text);

    font-size: 1.25rem;
    line-height: 1.2;
}

.privacy-content {
    flex: 1 1 auto;
    min-height: 0;

    padding: 1.5rem;

    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;

    line-height: 1.65;

    background: var(--site-surface);
    color: var(--site-text);
}

.privacy-content h1,
.privacy-content h2,
.privacy-content h3,
.privacy-content h4,
.privacy-content h5,
.privacy-content h6,
.privacy-document h1,
.privacy-document h2,
.privacy-document h3,
.privacy-document h4,
.privacy-document h5,
.privacy-document h6 {
    margin-top: 0;
    margin-bottom: 1rem;

    color: var(--site-text);
}

.privacy-content p,
.privacy-content ul,
.privacy-content ol,
.privacy-content table,
.privacy-content blockquote,
.privacy-document p,
.privacy-document ul,
.privacy-document ol,
.privacy-document table,
.privacy-document blockquote {
    margin-bottom: 1rem;

    color: var(--site-muted);
}

.privacy-content strong,
.privacy-content b,
.privacy-document strong,
.privacy-document b {
    color: var(--site-text);
}

.privacy-content a,
.privacy-document a {
    color: var(--site-link);
}

.privacy-content code,
.privacy-document code {
    padding: 0.15rem 0.35rem;

    background: color-mix(
        in srgb,
        var(--site-text) 8%,
        transparent
    );

    color: var(--site-text);

    border-radius: 0.25rem;
}

.privacy-content pre,
.privacy-document pre {
    padding: 1rem;

    overflow-x: auto;

    background: color-mix(
        in srgb,
        var(--site-text) 5%,
        transparent
    );

    border: 1px solid var(--site-border);
    border-radius: 0.5rem;
}

.privacy-content hr,
.privacy-document hr {
    border: 0;
    border-top: 1px solid var(--site-border);
}

.privacy-content table,
.privacy-document table {
    width: 100%;

    border-collapse: collapse;
}

.privacy-content th,
.privacy-content td,
.privacy-document th,
.privacy-document td {
    padding: 0.75rem;

    border: 1px solid var(--site-border);

    text-align: left;
}

.privacy-content th {
    background: color-mix(
        in srgb,
        var(--site-text) 4%,
        transparent
    );

    color: var(--site-text);
}

.privacy-footer {
    flex: 0 0 auto;

    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;

    padding: 1rem 1.5rem;

    background: var(--site-surface);

    border-top: 1px solid var(--site-border);
}

.privacy-footer .btn-primary {
    --bs-btn-bg: var(--aw-primary);
    --bs-btn-border-color: var(--aw-primary);

    --bs-btn-hover-bg: var(--aw-primary-dark);
    --bs-btn-hover-border-color: var(--aw-primary-dark);

    --bs-btn-active-bg: var(--aw-primary-dark);
    --bs-btn-active-border-color: var(--aw-primary-dark);
}

.privacy-footer .btn {
    --bs-btn-padding-y: 0.4rem;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-font-size: 0.875rem;
}

@media (max-width: 768px) {

    #privacy-overlay {
        align-items: flex-start;
        padding:
            max(12px, env(safe-area-inset-top, 0px))
            12px
            max(12px, env(safe-area-inset-bottom, 0px));
    }

    .privacy-modal {
        border-radius: 0.75rem;
    }

    .privacy-header,
    .privacy-content,
    .privacy-footer {
        padding: 1rem;
    }

    .privacy-footer .btn {
        min-width: 7rem;
    }

}

body.privacy-modal-open {
    position: fixed;
    top: var(--privacy-body-offset, 0px);
    right: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {
    #privacy-overlay,
    .privacy-modal {
        transition-duration: 0.01ms;
    }
}