@layer components {

    /* ── Cookie consent banner ──────────────────────────────────────
       Bottom-pinned banner shown by the CookieConsent view component
       until the user accepts / rejects / manages cookies. Pinned to
       the viewport bottom regardless of scroll position, centered
       horizontally with a 60rem cap so it doesn't stretch edge-to-
       edge on wide monitors. Sits above page content (z-index 1000)
       but is intended to sit below modal / dialog overlays — adjust
       z if a higher overlay tier is introduced later. */

    .app-cookie-consent-container {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        position: fixed;
        bottom: var(--space-4);
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 2 * var(--space-4));
        max-width: 60rem;
        background-color: var(--color-surface);
        border: 1px solid var(--color-line);
        border-radius: var(--radius-md);
        padding: var(--space-4);
        color: var(--color-ink);
        font-size: var(--fs-body-sm);
        z-index: 1000;
        box-shadow: 0 4px 16px var(--color-shadow-mid);
    }

    .app-cookie-consent-body {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .app-cookie-consent-text {
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        padding: var(--space-3) 0 var(--space-3) var(--space-4);
    }

    .app-cookie-consent-text p {
        margin-top: 0;
        margin-bottom: var(--space-3);
        overflow-wrap: break-word;
    }

    .app-cookie-consent-buttons {
        box-sizing: border-box;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-2);
        margin-right: auto;
    }

    /* Decorative cookie icon (FontAwesome). Muted ink so the icon
       reads as illustrative without competing with the message text. */
    .app-cookie-consent-icon-color {
        color: var(--color-ink-mute);
    }
}