.consent,
.consent-dialog {
    --z-consent: 10000;
    --z-control-overlay: 1;
    --space-1: .25rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --dialog-width: 40rem;
    --shadow-layer: 0 12px 42px rgb(0 0 0 / 24%);
    --color-surface: #fff;
    --color-ink: #212529;
    --color-muted: #555;
    --color-subtle: #5c5c5c;
    --color-accent: #c3002f;
    --color-on-accent: #fff;
    --color-line-strong: #c3002f;
    --color-line: #dedede;
    --color-backdrop: rgb(0 0 0 / 55%);
    --color-switch-off: #646464;
    --color-switch-knob: #fff;
    --color-focus: #c3002f;
    --consent-brand: #ec1c24;
    --fs-caption: .875rem;
    --fs-small: 1rem;
    --fs-heading: 1.25rem;
    --control-size: 44px;
    --control-size-compact: 44px;
    --control-size-compact-dialog: 44px;
    --radius-control: 0;
    --radius-pill: 999px;
    --dur-out: 150ms;
    --ease: ease-out;
    --switch-width: 44px;
    --switch-height: 24px;
    --switch-inset: 3px;
    --shadow-knob: 0 1px 3px rgb(0 0 0 / 24%);
}

.consent {
    position: fixed;
    z-index: var(--z-consent);
    inset-inline: var(--space-3);
    inset-block-end: max(var(--space-3), env(safe-area-inset-bottom));
    max-inline-size: var(--dialog-width);
    max-block-size: calc(100vh - var(--space-6));
    max-block-size: calc(100svh - var(--space-6));
    margin-inline: auto;
    overflow-y: auto;
    border-radius: 0;
    border-block-start: 3px solid var(--consent-brand);
    background: var(--color-surface);
    box-shadow: var(--shadow-layer);
}
.consent__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-2);
    padding: var(--space-4);
}
.consent__text,
.dialog__intro,
.consent-category__description {
    margin: 0;
    color: var(--color-ink);
    font-size: var(--fs-caption);
    line-height: 1.75;
    text-wrap: pretty;
}
.consent__text a,
.dialog__intro a {
    color: var(--color-accent);
    text-decoration: underline;
}
.consent__actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-2);
}
.consent__choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4) var(--space-2);
}
.consent__status {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--fs-small);
}
/* Reference at 2x: 48px hover square, 8px corners; keep the 44px click target. */
.consent__close,
.dialog__close {
    position: relative;
    isolation: isolate;
    flex: none;
    border-radius: 0;
    color: var(--color-subtle);
    font-size: var(--fs-caption);
}
.consent__close::before,
.dialog__close::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: calc((var(--control-size) - 1.5rem) / 2);
    border-radius: inherit;
    background: transparent;
    pointer-events: none;
    transition: background-color var(--dur-out) var(--ease);
}
/* Banner X: a bare glyph without a circle, centred on the first text line (same 1.75 line height)
   with its glyph box flush with the right content edge; 70% ink at rest, full ink on hover and focus. */
.consent__close {
    align-self: start;
    margin-block: calc((1lh - var(--control-size)) / 2) 0;
    margin-inline-end: calc((var(--control-size) - 1em) / -2);
    color: var(--color-subtle);
    line-height: 1.75;
    transition:
        color var(--dur-out) var(--ease),
        transform var(--dur-out) var(--ease);
}
.consent__close:focus-visible {
    color: var(--color-ink);
}
.dialog__close {
    align-self: start;
}
.consent__close .fa,
.dialog__close .fa {
    font-size: 1em;
} /* glyph matches the button text */
.consent .consent-button,
.consent-dialog .consent-button {
    position: relative;
    padding: var(--space-1) var(--space-3);
    font-size: var(--fs-caption);
    font-weight: 600;
}
.consent .consent-button {
    min-block-size: var(--control-size-compact);
}
.consent-dialog .consent-button {
    min-block-size: var(--control-size-compact-dialog);
    padding-inline: var(--space-4);
}
/* The cookie layers keep their outlined pills from the design reference. */
.consent .consent-button--secondary,
.consent-dialog .consent-button--secondary {
    background: transparent;
    border-color: var(--color-line-strong);
}
.consent-dialog {
    inline-size: min(calc(100% - var(--space-6)), var(--dialog-width));
    max-block-size: calc(100vh - var(--space-6));
    max-block-size: calc(100svh - var(--space-6));
    padding: 0;
    border: 0;
    margin: auto;
    border-radius: 0;
    border-block-start: 3px solid var(--consent-brand);
    background: var(--color-surface);
    color: var(--color-ink);
    box-shadow: var(--shadow-layer);
    overflow: auto;
    overscroll-behavior: contain;
}
.consent-dialog::backdrop {
    background: var(--color-backdrop);
}
/* Header and footer stay in place; the text and categories between them scroll. */
.dialog__form {
    display: flex;
    flex-direction: column;
    max-block-size: inherit;
}
/* Settings hierarchy: a real title, shared full-ink body text, and the banner's 16px inset for
   header, body and footer so the layer breathes instead of packing against its edge. */
.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-4) 0;
}
.dialog__title {
    margin: 0;
    font-size: var(--fs-heading) !important;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}
.dialog__body {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding: var(--space-3) var(--space-4) var(--space-2);
}
.dialog__body > :last-child {
    margin-block-end: 0;
}
.dialog__intro {
    margin-block-end: var(--space-5);
}
.dialog__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3) var(--space-2);
    padding: var(--space-4);
}
.dialog__submit {
    margin-inline-start: auto;
}
/* Each category is a native disclosure; an optional one has its switch beside the summary row,
   outside <summary>, so opening the description and changing the choice stay separate. */
.consent-categories {
    margin: 0;
    padding: 0;
    list-style: none;
}
.consent-category {
    position: relative;
}
.consent-category + .consent-category {
    border-block-start: 1px solid var(--color-line);
}
.consent-category__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: calc(var(--control-size) + var(--space-1));
    border-radius: var(--radius-control);
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
        display: none;
    }
}
.consent-category--optional .consent-category__summary {
    margin-inline-end: calc(var(--switch-width) + var(--space-3));
}
.consent-category__chevron {
    color: var(--color-subtle);
    font-size: var(--fs-caption);
    transform: rotate(-90deg);
    transition: transform var(--dur-out) var(--ease);
}
.consent-category__details[open] .consent-category__chevron {
    transform: none;
}
.consent-category__name {
    min-inline-size: 0;
    font-size: var(--fs-small);
    overflow-wrap: anywhere;
}
.consent-category__state {
    margin-inline-start: auto;
    color: var(--color-subtle);
    font-size: var(--fs-caption);
    white-space: nowrap;
}
.consent-category__description {
    margin-block-end: var(--space-4);
    padding-inline-start: calc(var(--fs-caption) + var(--space-3));
}
/* Switch: a real checkbox with role="switch" covers the whole 44px control; the track is drawn. */
.consent-switch {
    position: relative;
    display: inline-grid;
    place-items: center;
    min-block-size: var(--control-size);
}
.consent-switch__input {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    z-index: var(--z-control-overlay);
    margin: 0;
    opacity: 0;
    cursor: pointer;
}
.consent-switch__track {
    position: relative;
    display: block;
    inline-size: var(--switch-width);
    block-size: var(--switch-height);
    border-radius: var(--radius-pill);
    background: var(--color-switch-off);
    transition: background-color var(--dur-out) var(--ease);
}
.consent-switch__track::before {
    content: "";
    position: absolute;
    inset-block-start: var(--switch-inset);
    inset-inline-start: var(--switch-inset);
    inline-size: calc(var(--switch-height) - 2 * var(--switch-inset));
    aspect-ratio: 1;
    border-radius: 50%; /* round knob */
    background: var(--color-switch-knob);
    box-shadow: var(--shadow-knob);
    transition:
        transform var(--dur-out) var(--ease),
        background-color var(--dur-out) var(--ease);
}
.consent-switch__input:checked + .consent-switch__track {
    background: var(--color-accent);
}
.consent-switch__input:checked + .consent-switch__track::before {
    background: var(--color-on-accent);
    transform: translateX(calc(var(--switch-width) - var(--switch-height)));
}
.consent-switch__input:focus-visible + .consent-switch__track {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
}
/* After .consent-switch so the absolute position wins at equal specificity. */
.consent-category__switch {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    block-size: calc(var(--control-size) + var(--space-1));
}


.consent[hidden],
.consent-dialog:not([open]) {
    display: none;
}

.consent .consent-button,
.consent-dialog .consent-button,
.consent-icon-button,
.consent-footer-button {
    font-family: inherit;
    cursor: pointer;
}

.consent .consent-button,
.consent-dialog .consent-button {
    border: 1px solid var(--color-accent);
    border-radius: 0;
    background: var(--color-accent);
    color: var(--color-on-accent);
}

.consent .consent-button--secondary,
.consent-dialog .consent-button--secondary {
    background: var(--color-surface);
    color: var(--color-accent);
}

.consent-icon-button {
    display: inline-grid;
    place-items: center;
    inline-size: var(--control-size);
    block-size: var(--control-size);
    padding: 0;
    border: 0;
    background: transparent;
}

.consent-footer-button {
    padding: 0;
    border: 0;
    background: transparent;
}

.consent-footer-button:hover {
    text-decoration: underline;
}

.consent :focus-visible,
.consent-dialog :focus-visible,
.consent-footer-button:focus-visible {
    outline: 2px solid #c3002f !important;
    outline-offset: 2px;
}

@media (hover: hover) and (pointer: fine) {
    .consent .consent-button:hover,
    .consent-dialog .consent-button:hover {
        border-color: #980023;
        background: #980023;
        color: #fff;
    }

    .consent .consent-button--secondary:hover,
    .consent-dialog .consent-button--secondary:hover {
        background: #fff1f4;
        color: #980023;
    }
}

@media (min-width: 768px) {
    .consent {
        inset-inline: var(--space-5);
        inset-block-end: max(var(--space-5), env(safe-area-inset-bottom));
        margin-inline: auto 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .consent-dialog .consent-category__chevron,
    .consent-dialog .consent-switch__track,
    .consent-dialog .consent-switch__track::before {
        transition: none;
    }
}