/* ED Cookie Consent — Banner Styles
   Colors are pulled from the host theme's CSS custom properties so the
   banner automatically matches whichever theme it's installed on:
     1. This theme family's own variables (--s-accent / --s-bg / --s-body)
     2. Common WordPress block-theme (theme.json) variables, as a second guess
     3. A plain hex fallback, for themes that define neither */

.ed-consent {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    width: calc(100% - 48px);
    max-width: 680px;
    background: var(--s-accent, var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1a1a2e)));
    color: var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,.28);
    padding: 20px 24px;
    font-family: var(--s-body, var(--wp--preset--font-family--body, var(--wp--preset--font-family--system-font, sans-serif)));
    animation: ed-slide-up .35s cubic-bezier(.16,1,.3,1) both;
}

@keyframes ed-slide-up {
    from { opacity: 0; transform: translateX(-50%) translateY(20px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.ed-consent__inner {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}

.ed-consent__text {
    flex: 1;
    min-width: 200px;
}

.ed-consent__text p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: inherit;
    opacity: .88;
}

.ed-consent__text a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: currentColor;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    opacity: .85;
}

.ed-consent__text a:hover {
    opacity: 1;
}

.ed-consent__actions {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
}

.ed-consent__btn {
    padding: 9px 20px;
    border-radius: 50px;
    border: none;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    transition: background-color .18s ease, color .18s ease, filter .18s ease, transform .15s ease;
    white-space: nowrap;
}

.ed-consent__btn:hover {
    transform: scale(1.04);
}

/* Accept: theme's page-background color on the theme's accent color —
   the same "inverted" pairing the rest of the theme uses for its own
   buttons, so it's always readable regardless of how light or dark
   the theme's accent color happens to be.
   On hover the background/text pair swaps places entirely (rather than
   just dimming), so the text color is always the clear opposite of
   whatever is behind it — a border is added so the button stays
   visually distinct even when its hover background matches the banner. */
.ed-consent__btn--accept {
    background: var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
    color: var(--s-accent, var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1a1a2e)));
    border: 1px solid var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
}

.ed-consent__btn--accept:hover {
    background: var(--s-accent, var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1a1a2e)));
    color: var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
}

.ed-consent__btn--reject {
    background: transparent;
    color: var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
    border: 1px solid var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
    opacity: .8;
}

.ed-consent__btn--reject:hover {
    background: var(--s-bg, var(--wp--preset--color--background, var(--wp--preset--color--base, #fff)));
    color: var(--s-accent, var(--wp--preset--color--primary, var(--wp--preset--color--contrast, #1a1a2e)));
    opacity: 1;
}

@media (max-width: 500px) {
    .ed-consent {
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        transform: none;
        animation: ed-slide-up-m .35s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes ed-slide-up-m {
        from { opacity: 0; transform: translateY(20px); }
        to   { opacity: 1; transform: translateY(0); }
    }
    .ed-consent__inner {
        flex-direction: column;
        align-items: stretch;
    }
    .ed-consent__actions {
        justify-content: flex-end;
    }
}