/*
 * alto-consent - frontend banner styles.
 *
 * Design principles:
 *   - Refined, editorial sheet anchored to the viewport bottom.
 *   - Inherits the host site's typography (font-family is never overridden);
 *     only sizes, weights and line-heights are set so the banner integrates
 *     visually without imposing a foreign typeface.
 *   - Fully themable via CSS custom properties (see :where(.ac-banner, .ac-chip) below).
 *     Override any --ac-* token in your project CSS to rebrand without forking.
 *   - Equal visual weight for Accept-All and Deny-All (GDPR best practice).
 *   - Group toggles styled as accessible iOS-style switches.
 *   - Sticky footer keeps actions reachable when the cookie tables grow tall.
 *   - Native :where() keeps custom-property defaults at zero specificity so
 *     project-level overrides win without !important.
 *
 * Created: 2026-04-22 (claude-tag: alto-consent-initial-build)
 * Refactored: 2026-04-30 (claude-tag: alto-consent-frontend-polish)
 */

/* ---------- Tokens ----------
   Shared by the banner and the chip (claude-tag: alto-consent-chip 2026-09-28): the chip lies
   outside the <dialog> and would not inherit tokens set on .ac-banner only. */
:where(.ac-banner, .ac-chip) {
    --ac-surface:        #ffffff;
    --ac-surface-2:      #f6f7f9;
    --ac-text:           #0f1419;
    --ac-muted:          #5b6470;
    --ac-border:         rgba(15, 20, 25, 0.10);
    --ac-border-strong:  rgba(15, 20, 25, 0.18);
    --ac-accent:         #1a4d8c;
    --ac-accent-hover:   #143d70;
    --ac-accent-text:    #ffffff;
    --ac-deny:           #1f2933;
    --ac-deny-hover:     #0f1820;
    --ac-deny-text:      #ffffff;
    --ac-radius-lg:      18px;
    --ac-radius-md:      10px;
    --ac-radius-sm:      6px;
    --ac-shadow:         0 -24px 48px -16px rgba(15, 20, 25, 0.18),
                         0 -2px 8px rgba(15, 20, 25, 0.05);
    --ac-z:              9999;
    --ac-backdrop:       rgba(10, 16, 24, 0.55);  /* modal backdrop, claude-tag: alto-consent-modal-dialog */
    --ac-backdrop-blur:  4px;
    --ac-max-w:          720px;
    --ac-pad-x:          clamp(1.25rem, 3vw, 2.25rem);
    --ac-pad-y:          clamp(1.25rem, 2.5vw, 1.75rem);
    --ac-focus:          0 0 0 3px rgba(26, 77, 140, 0.30);

    /* Chip, claude-tag: alto-consent-chip 2026-09-28.
       --ac-chip-align: flex-end = bottom right, center = bottom centre, flex-start = bottom left. */
    --ac-chip-align:          flex-end;
    --ac-chip-offset-x:       1.25rem;
    --ac-chip-offset-y:       1.25rem;
    --ac-chip-z:              calc(var(--ac-z) - 1);
    --ac-chip-bg:             var(--ac-surface);
    --ac-chip-bg-hover:       var(--ac-surface-2);
    --ac-chip-text:           var(--ac-text);
    --ac-chip-border:         var(--ac-border-strong);
    --ac-chip-radius:         999px;
    --ac-chip-shadow:         0 6px 20px -6px rgba(15, 20, 25, 0.25),
                              0 1px 3px rgba(15, 20, 25, 0.08);
    --ac-chip-padding:        0.55rem 1rem 0.55rem 0.8rem;
    --ac-chip-gap:            0.45rem;
    --ac-chip-font-size:      0.875rem;
    --ac-chip-font-weight:    600;
    --ac-chip-icon-color:     var(--ac-accent);
    --ac-chip-icon-size:      1.25rem;
    --ac-chip-icon-display:   block;    /* none = label only */
    --ac-chip-label-display:  inline;   /* none = icon only, the label stays the accessible name */
}

@media (prefers-color-scheme: dark) {
    :where(.ac-banner, .ac-chip) {
        --ac-surface:        #14181d;
        --ac-surface-2:      #1c2128;
        --ac-text:           #e8ecf1;
        --ac-muted:          #9ba5b3;
        --ac-border:         rgba(255, 255, 255, 0.10);
        --ac-border-strong:  rgba(255, 255, 255, 0.20);
        --ac-accent:         #4d8fd6;
        --ac-accent-hover:   #6aa3e0;
        --ac-accent-text:    #0a0d12;
        --ac-deny:           #2a323d;
        --ac-deny-hover:     #3a4452;
        --ac-deny-text:      #e8ecf1;
        --ac-shadow:         0 -24px 48px -16px rgba(0, 0, 0, 0.55),
                             0 -2px 8px rgba(0, 0, 0, 0.30);
    }
}

/* ---------- Banner shell ---------- */
.ac-banner {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--ac-z);
    max-height: min(86vh, 880px);
    /* Reset the user-agent <dialog> box (margin: auto, max-width, fit-content size),
       claude-tag: alto-consent-modal-dialog 2026-09-28 */
    margin: 0;
    width: auto;
    height: auto;
    max-width: none;
    padding: 0;
    color: var(--ac-text);
    background: var(--ac-surface);
    box-shadow: var(--ac-shadow);
    border: 0;
    border-top: 1px solid var(--ac-border);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    transform: translateY(0);
    opacity: 1;
    transition: transform 360ms cubic-bezier(.2, .8, .2, 1),
                opacity 240ms ease-out;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ac-banner:not([open]) { display: none; }

/* Modal (claude-tag: alto-consent-modal-dialog 2026-09-28): showModal() makes the page inert,
   the backdrop dims and blurs it. Custom properties may not reach ::backdrop in older
   browsers, hence the fallbacks. */
.ac-banner::backdrop {
    background: var(--ac-backdrop, rgba(10, 16, 24, 0.55));
    -webkit-backdrop-filter: blur(var(--ac-backdrop-blur, 4px));
    backdrop-filter: blur(var(--ac-backdrop-blur, 4px));
}

/* The page behind the open banner does not scroll. */
html.ac-modal-open,
html.ac-modal-open body {
    overflow: hidden;
}

/* Slide-up entry on first reveal (modern browsers). Older browsers just snap in. */
@supports (transition-behavior: allow-discrete) {
    @starting-style {
        .ac-banner[data-ac-open="1"] {
            transform: translateY(20%);
            opacity: 0;
        }
    }
}

/* Subtle accent strip across the top edge — gives the sheet identity without noise. */
.ac-banner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--ac-accent) 18%,
        var(--ac-accent) 82%,
        transparent 100%);
    opacity: 0.85;
}

@media (min-width: 720px) {
    .ac-banner {
        inset: auto auto 1.25rem 50%;
        transform: translateX(-50%);
        width: calc(100% - 2.5rem);
        max-width: var(--ac-max-w);
        border-radius: var(--ac-radius-lg);
        border: 1px solid var(--ac-border);
    }
    .ac-banner::before {
        border-top-left-radius: var(--ac-radius-lg);
        border-top-right-radius: var(--ac-radius-lg);
    }
    @supports (transition-behavior: allow-discrete) {
        @starting-style {
            .ac-banner[data-ac-open="1"] {
                transform: translateX(-50%) translateY(20%);
                opacity: 0;
            }
        }
    }
}

.ac-banner__inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- Layers (claude-tag: alto-consent-two-layer-banner 2026-09-28) ----------
   intro:    title + full intro text + two buttons, opens by itself.
   settings: short text + cookie groups + three buttons, opens on purpose.
   Each layer is a flex column filling the sheet, so the scroll area (intro text resp. form)
   shrinks and the action bar stays visible. */
.ac-banner__layer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.ac-banner[data-ac-view="intro"] .ac-banner__layer--settings,
.ac-banner[data-ac-view="settings"] .ac-banner__layer--intro {
    display: none;
}

/* The intro text is long: it scrolls, buttons and links stay in place. */
.ac-banner__layer--intro .ac-banner__header {
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ac-border-strong) transparent;
}

.ac-banner__title:focus { outline: none; }

/* ---------- Header ---------- */
.ac-banner__header {
    flex-shrink: 0;
    padding: var(--ac-pad-y) var(--ac-pad-x) calc(var(--ac-pad-y) * 0.6);
}

.ac-banner__title {
    margin: 0;
    font-size: clamp(1.15rem, 1.5vw + 0.5rem, 1.5rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ac-text);
}

.ac-banner__intro {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ac-muted);
    /*max-width: 70ch;*/
}

/* ---------- Form (scroll area) ---------- */
.ac-banner__form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    margin: 0;
}

.ac-banner__form > .ac-group {
    margin-left: var(--ac-pad-x);
    margin-right: var(--ac-pad-x);
}

.ac-banner__form > .ac-group:first-of-type { margin-top: 0.5rem; }

/* When tall, scroll the body area; header stays put, footer sticks to bottom. */
.ac-banner__form {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--ac-border-strong) transparent;
}
.ac-banner__form::-webkit-scrollbar              { width: 8px; }
.ac-banner__form::-webkit-scrollbar-thumb        { background: var(--ac-border-strong); border-radius: 4px; }
.ac-banner__form::-webkit-scrollbar-track        { background: transparent; }

/* ---------- Group cards ---------- */
.ac-group {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius-md);
    padding: 1rem 1.1rem;
    margin: 0 0 0.5rem;
    background: var(--ac-surface);
    transition: border-color 180ms ease, background 180ms ease;
}

.ac-group:has([data-ac-group-toggle]:checked) {
    border-color: var(--ac-border-strong);
    background: var(--ac-surface-2);
}

.ac-group__title {
    /* The legend renders the same text as the toggle label on the right;
       hide visually but keep accessible structure. */
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The toggle row: title left, switch right. */
.ac-group__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    cursor: pointer;
}

.ac-group__toggle-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ac-text);
    line-height: 1.3;
}

/* iOS-style switch — applied to the master group checkbox. */
.ac-group__toggle input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.4rem;
    margin: 0;
    border-radius: 999px;
    background: var(--ac-border-strong);
    position: relative;
    cursor: pointer;
    transition: background 180ms ease;
}

.ac-group__toggle input[type="checkbox"]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0.15rem;
    transform: translateY(-50%);
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: left 180ms cubic-bezier(.4, 0, .2, 1);
}

.ac-group__toggle input[type="checkbox"]:checked {
    background: var(--ac-accent);
}

.ac-group__toggle input[type="checkbox"]:checked::after {
    left: calc(100% - 1.25rem);
}

.ac-group__toggle input[type="checkbox"]:indeterminate {
    background: var(--ac-accent);
    opacity: 0.6;
}
.ac-group__toggle input[type="checkbox"]:indeterminate::after {
    left: calc(50% - 0.55rem);
}

.ac-group__toggle input[type="checkbox"]:disabled {
    cursor: not-allowed;
    background: var(--ac-accent);
    opacity: 0.55;
}

.ac-group__toggle input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--ac-focus);
}

.ac-group__description {
    margin: 0.5rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ac-muted);
    max-width: 62ch;
}

/* ---------- Disclosure: cookie details ---------- */
.ac-group__details {
    margin-top: 0.85rem;
}

.ac-group__details summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ac-accent);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.ac-group__details summary::-webkit-details-marker { display: none; }

.ac-group__details summary::before {
    content: "";
    width: 0.55rem;
    height: 0.55rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 180ms ease;
}

.ac-group__details[open] summary::before {
    transform: rotate(45deg);
}

.ac-group__details summary:hover    { color: var(--ac-accent-hover); }
.ac-group__details summary:focus-visible {
    outline: none;
    color: var(--ac-accent-hover);
    box-shadow: var(--ac-focus);
    border-radius: 3px;
}

/* ---------- Cookie list (per-cookie cards) ----------
   Replaces the former 4-column table. Variable-length data (provider name,
   purpose paragraph, comma-list of cookie identifiers) no longer fights for
   column width. Hierarchy is established by typography: prominent name +
   validity in a header strip, provider as a quiet sub-line, purpose as a
   running paragraph, technical identifiers as monospace chips that wrap
   cleanly between whole tokens.
   claude-tag: alto-consent-cookie-list-redesign 2026-05-07
*/
.ac-cookies {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
}

.ac-cookie {
    padding: 0.85rem 0;
    border-top: 1px solid var(--ac-border);
}
.ac-cookie:first-child { border-top: 0; padding-top: 0.5rem; }

.ac-cookie__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
}

.ac-cookie__validity {
    color: var(--ac-muted);
    font-size: 0.8125rem;
    white-space: nowrap;
}

.ac-cookie__provider {
    margin: 0.15rem 0 0;
    color: var(--ac-muted);
    font-size: 0.875rem;
}

.ac-cookie__purpose {
    margin: 0.5rem 0 0;
    color: var(--ac-text);
    font-size: 1rem;
    line-height: 1.5;
}

.ac-cookie__names {
    list-style: none;
    margin: 0.55rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 0.4rem;
}
.ac-cookie__names li { display: inline-flex; }
.ac-cookie__names code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
    padding: 0.15em 0.5em;
    background: var(--ac-surface-2);
    border: 1px solid var(--ac-border);
    border-radius: 4px;
    color: var(--ac-text);
    word-break: keep-all;     /* never split mid-identifier */
    white-space: nowrap;
}

/* Checkbox + name as the primary affordance: name carries the weight,
   the click target spans both. */
.ac-cookie__toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.ac-cookie__name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ac-text);
}

.ac-cookie__toggle input[type="checkbox"] {
    appearance: auto;
    -webkit-appearance: auto;
    width: 0.95rem;
    height: 0.95rem;
    margin: 0;
    accent-color: var(--ac-accent);
    cursor: pointer;
}

.ac-cookie__toggle input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.7; }

/* ---------- Footer (sticky action bar) ---------- */
.ac-banner__footer {
    flex-shrink: 0;
    position: sticky;
    bottom: 0;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: var(--ac-pad-y) var(--ac-pad-x) calc(var(--ac-pad-y) * 0.65);
    margin: 0.75rem 0 0;
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--ac-surface) 0%, transparent) 0%,
        var(--ac-surface) 35%);
    border-top: 1px solid var(--ac-border);
    backdrop-filter: blur(6px);
}

/* Buttons — equal-weight Accept and Deny, restrained Save. */
.ac-btn {
    flex: 1 1 auto;
    min-width: 8rem;
    padding: 0.7rem 1.15rem;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    border-radius: var(--ac-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease, transform 80ms ease;
    text-align: center;
}

.ac-btn:active { transform: translateY(1px); }
.ac-btn:focus-visible {
    outline: none;
    box-shadow: var(--ac-focus);
}

/* Primary = Accept */
.ac-btn--primary[data-ac-action="acceptAll"] {
    background: var(--ac-accent);
    color: var(--ac-accent-text);
    border-color: var(--ac-accent);
    order: 3;
}
.ac-btn--primary[data-ac-action="acceptAll"]:hover {
    background: var(--ac-accent-hover);
    border-color: var(--ac-accent-hover);
}

/* "Deny all" — equal weight to Accept, but a neutral dark fill so it never
   looks like a discouraged option. */
.ac-btn--secondary[data-ac-action="denyAll"] {
    background: var(--ac-deny);
    color: var(--ac-deny-text);
    border-color: var(--ac-deny);
    order: 1;
}
.ac-btn--secondary[data-ac-action="denyAll"]:hover {
    background: var(--ac-deny-hover);
    border-color: var(--ac-deny-hover);
}

/* "Save selection" — quieter mid-action. */
.ac-btn--primary[data-ac-action="saveSelection"] {
    background: transparent;
    color: var(--ac-text);
    border-color: var(--ac-border-strong);
    order: 2;
}
.ac-btn--primary[data-ac-action="saveSelection"]:hover {
    background: var(--ac-surface-2);
    border-color: var(--ac-text);
}

/* "Information & settings" on the first layer: a text link, left of the two buttons. */
.ac-btn--link {
    background: transparent;
    color: var(--ac-text);
    border-color: transparent;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    order: 0;
}
.ac-btn--link:hover {
    color: var(--ac-accent);
}

/* On wider screens lay buttons out without flex-grow so they stay compact-right. */
@media (min-width: 520px) {
    .ac-btn { flex: 0 0 auto; }
    .ac-banner__footer { justify-content: flex-end; }
    .ac-banner__footer--intro .ac-btn--link { margin-right: auto; padding-left: 0; }
}

/* ---------- Footer links ---------- */
.ac-banner__links {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
    padding: 0.85rem var(--ac-pad-x) var(--ac-pad-y);
    margin: 0;
    font-size: 0.8125rem;
    color: var(--ac-muted);
    border-top: 1px solid var(--ac-border);
    background: var(--ac-surface);
}

.ac-banner__links a {
    color: var(--ac-muted);
    text-decoration: underline;
    text-decoration-color: var(--ac-border-strong);
    text-underline-offset: 3px;
    transition: color 140ms ease, text-decoration-color 140ms ease;
}

.ac-banner__links a:hover {
    color: var(--ac-text);
    text-decoration-color: currentColor;
}

.ac-banner__links a:focus-visible {
    outline: none;
    box-shadow: var(--ac-focus);
    border-radius: 3px;
}

/* ---------- Chip (claude-tag: alto-consent-chip 2026-09-28) ----------
   Floating button that reopens the banner. The wrapper spans the viewport width and places the
   button with justify-content, so one custom property (--ac-chip-align) picks left/centre/right.
   The wrapper itself lets clicks through; only the button catches them. */
.ac-chip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--ac-chip-z);
    display: flex;
    justify-content: var(--ac-chip-align);
    padding: 0 var(--ac-chip-offset-x) var(--ac-chip-offset-y);
    pointer-events: none;
}

.ac-chip__button {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--ac-chip-gap);
    margin: 0;
    padding: var(--ac-chip-padding);
    font: inherit;
    font-size: var(--ac-chip-font-size);
    font-weight: var(--ac-chip-font-weight);
    line-height: 1.2;
    color: var(--ac-chip-text);
    background: var(--ac-chip-bg);
    border: 1px solid var(--ac-chip-border);
    border-radius: var(--ac-chip-radius);
    box-shadow: var(--ac-chip-shadow);
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    transition: background 160ms ease, border-color 160ms ease, transform 80ms ease;
}

.ac-chip__button:hover { background: var(--ac-chip-bg-hover); }
.ac-chip__button:active { transform: translateY(1px); }
.ac-chip__button:focus-visible {
    outline: none;
    box-shadow: var(--ac-chip-shadow), var(--ac-focus);
}

.ac-chip__icon {
    display: var(--ac-chip-icon-display);
    flex-shrink: 0;
    width: var(--ac-chip-icon-size);
    height: var(--ac-chip-icon-size);
    color: var(--ac-chip-icon-color);
}

.ac-chip__label { display: var(--ac-chip-label-display); }

@media print {
    .ac-chip { display: none; }
}

/* ---------- Embed wrappers ---------- */
.ac-embed { position: relative; display: block; }

.ac-noconsent {
    border: 1px dashed var(--ac-border-strong, rgba(15,20,25,0.18));
    border-radius: var(--ac-radius-md, 10px);
    padding: 1.5rem 1.25rem;
    text-align: center;
    background: var(--ac-surface-2, #f6f7f9);
    color: var(--ac-text, #0f1419);
    font-size: 0.9375rem;
}

.ac-noconsent p {
    margin: 0 0 0.85rem;
    color: var(--ac-muted, #5b6470);
    max-width: 50ch;
    margin-inline: auto;
}

.ac-noconsent button,
.ac-noconsent [data-ac-grant] {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.55rem 1rem;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: var(--ac-radius-sm, 6px);
    border: 1px solid var(--ac-accent, #1a4d8c);
    background: var(--ac-accent, #1a4d8c);
    color: var(--ac-accent-text, #fff);
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease;
}

.ac-noconsent button:hover,
.ac-noconsent [data-ac-grant]:hover {
    background: var(--ac-accent-hover, #143d70);
    border-color: var(--ac-accent-hover, #143d70);
}

.ac-noconsent button:focus-visible,
.ac-noconsent [data-ac-grant]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 77, 140, 0.30);
}

@media (prefers-color-scheme: dark) {
    .ac-noconsent {
        background: #1c2128;
        border-color: rgba(255, 255, 255, 0.20);
        color: #e8ecf1;
    }
    .ac-noconsent p { color: #9ba5b3; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .ac-banner,
    .ac-group,
    .ac-group__toggle input[type="checkbox"],
    .ac-group__toggle input[type="checkbox"]::after,
    .ac-group__details summary::before,
    .ac-btn,
    .ac-chip__button,
    .ac-banner__links a {
        transition: none !important;
    }
    @starting-style {
        .ac-banner[data-ac-open="1"] {
            transform: none;
            opacity: 1;
        }
    }
}