/* Google Ads Purchases: the consent banner and the "Ad privacy settings" link, in the theme's colors. */

/*
 * The banner, while it asks or when the visitor opens it again. It sits above the page and its
 * sticky bars, and below the site's language sheet (z-index 60), so a visitor can pick their
 * language first.
 */
.ads-consent {
    position: fixed;
    inset-inline-start: 1rem;
    bottom: 1rem;
    z-index: 55;
    box-sizing: border-box;
    width: 27rem;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 2rem);
    overflow: auto;
    padding: 1.25rem;
    border: 1px solid var(--nb-line, #d3dbe5);
    border-radius: var(--nb-radius, 8px);
    background: var(--nb-surface, #fff);
    color: var(--nb-ink, #0f1b2d);
    box-shadow: var(--nb-shadow-lg, 0 8px 32px rgb(0 0 0 / 15%));
}

.ads-consent[hidden],
.ads-consent-settings[hidden],
.ads-consent [hidden] {
    display: none !important;
}

/* The hidden frame that sends a waiting purchase: never shown, whatever a theme does with frames. */
.ads-purchase-frame {
    display: none !important;
}

.ads-consent h2 {
    margin: 0 0 .6rem;
    font-size: 1.05rem;
}

.ads-consent p {
    margin: .6rem 0;
}

.ads-consent-status:empty {
    display: none;
}

.ads-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: 1rem;
}

/* Only used when the theme has no button styles of its own. */
:where(.ads-consent button) {
    cursor: pointer;
    padding: .6rem .85rem;
    border: 1px solid var(--nb-line-2, #aab4c2);
    border-radius: var(--nb-radius-sm, 6px);
    background: var(--nb-surface, #fff);
    color: var(--nb-ink, #0f1b2d);
    font: inherit;
}

/*
 * After a choice: a small link at the end of the page, like a footer link. It is part of the page,
 * not fixed on the screen, so it never covers a theme's order bar, phone menu or language sheet.
 * "position: relative" without a z-index keeps it above a theme's fixed background picture and
 * below the theme's own layers.
 */
.ads-consent-settings {
    position: relative;
    display: block;
    box-sizing: border-box;
    max-width: calc(100% - 2rem);
    margin: 1.5rem auto;
    padding: .5rem .75rem;
    border: 0;
    border-radius: var(--nb-radius-sm, 6px);
    background: none;
    color: var(--nb-muted, #5b6b7f);
    font: inherit;
    font-size: .85rem;
    line-height: 1.4;
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.ads-consent-settings:hover {
    color: var(--nb-ink, #0f1b2d);
}

.ads-consent button:focus-visible,
.ads-consent-settings:focus-visible {
    outline: 2px solid var(--nb-accent, #0b7a70);
    outline-offset: 2px;
}

/* Swift's order bar stays at the bottom of phone screens: leave room so the link can be reached. */
@media (max-width: 960px) {
    body:has(.sw-bar) .ads-consent-settings {
        margin-block-end: 7rem;
    }
}

/*
 * On phones the site's language menu is a sheet at the bottom of the screen. While it is open, the
 * banner steps aside, so every language can be picked first, whatever layers the theme uses.
 */
@media (max-width: 640px) {
    body:has(.lang-menu-button[aria-expanded='true']) .ads-consent {
        visibility: hidden;
    }
}

@media print {
    .ads-consent,
    .ads-consent-settings {
        display: none !important;
    }
}