/**
 * ComplianceV2 Banner & Modal Styles
 * Tailored for Automatic.css (ACSS) & EtchWP.
 * Only documented ACSS variables are referenced (docs.automaticcss.com); every one has a fallback,
 * so the banner also renders without ACSS.
 *
 * Tokens are declared on the plugin's own containers (not :root) so that variables scoped to a
 * container – e.g. the admin preview – resolve correctly. :where() keeps specificity at zero,
 * so the generated inline tokens and custom CSS always win.
 */

:where(#compliance-v2-root, .compliance-2click-wrapper, .compliance-form-notice) {
    /* Colours */
    --comp-surface: var(--white, #ffffff);
    --comp-surface-nested: color-mix(in srgb, var(--comp-text) 6%, var(--comp-surface));
    --comp-text: var(--text-dark, #111827);
    --comp-text-muted: var(--text-dark-muted, #4b5563);
    --comp-border: var(--border-color-dark, #d1d5db);
    --comp-focus: var(--focus-color, var(--primary, #2563eb));

    /* Shape */
    --comp-radius: var(--radius, 0.75rem);
    --comp-radius-sm: calc(var(--comp-radius) * 0.6);
    --comp-shadow: var(--box-shadow-1, 0 10px 30px -10px rgba(0, 0, 0, 0.25));
    --comp-shadow-modal: var(--comp-shadow);

    /* Spacing */
    --comp-space-xs: var(--space-xs, 0.5rem);
    --comp-space-s: var(--space-s, 0.75rem);
    --comp-space-m: var(--space-m, 1.25rem);
    --comp-space-l: var(--space-l, 2rem);

    /* Typography */
    --comp-text-xs: var(--text-xs, 0.8125rem);
    --comp-text-s: var(--text-s, 0.9375rem);
    --comp-text-l: var(--text-l, 1.25rem);

    /* Buttons */
    --comp-btn-bg: var(--btn-background, var(--primary, #2563eb));
    --comp-btn-bg-hover: var(--btn-background-hover, var(--primary-hover, #1d4ed8));
    --comp-btn-text: var(--btn-text-color, var(--white, #ffffff));
    --comp-btn-radius: var(--comp-radius-sm);
    --comp-btn-pad-block: var(--btn-padding-block, 0.65em);
    --comp-btn-pad-inline: var(--btn-padding-inline, 1.1em);
    --comp-btn-font-size: var(--comp-text-s);
    --comp-btn-font-weight: var(--btn-font-weight, 600);
    --comp-btn-sec-bg: var(--bg-ultra-light, #f3f4f6);
    --comp-btn-sec-text: var(--text-dark, #111827);

    /* Reopen trigger */
    --comp-trigger-bg: var(--comp-surface);
    --comp-trigger-text: var(--comp-text);
    --comp-trigger-radius: 999px;
    --comp-trigger-offset: var(--comp-space-m);
    --comp-trigger-idle-opacity: 1;

    --comp-z-index: 999999;
}

#compliance-v2-root {
    font-family: inherit;
    color: var(--comp-text);
    line-height: 1.5;
}

#compliance-v2-root *,
#compliance-v2-root *::before,
#compliance-v2-root *::after {
    box-sizing: border-box;
}

#compliance-v2-root [hidden] {
    display: none !important;
}

.compliance-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Shared focus indicator (WCAG 2.4.7 / 2.4.11) */
#compliance-v2-root :focus-visible,
.compliance-2click-wrapper :focus-visible,
.compliance-form-notice :focus-visible {
    outline: 2px solid var(--comp-focus);
    outline-offset: 2px;
}

/* ==========================================================================
   Banner Layouts
   ========================================================================== */

.compliance-banner {
    position: fixed;
    z-index: var(--comp-z-index);
    background: var(--comp-surface);
    color: var(--comp-text);
    border: 1px solid var(--comp-border);
    box-shadow: var(--comp-shadow);
    border-radius: var(--comp-radius);
    padding: var(--comp-space-m);
    max-width: 480px;
    width: calc(100% - 2rem);
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
    animation: compSlideUp 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.comp-layout--floating_bottom_right .compliance-banner {
    bottom: var(--comp-space-m);
    right: var(--comp-space-m);
}

.comp-layout--floating_bottom_left .compliance-banner {
    bottom: var(--comp-space-m);
    left: var(--comp-space-m);
}

.comp-layout--bar_bottom .compliance-banner {
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 100%;
    width: 100%;
    border-radius: var(--comp-radius) var(--comp-radius) 0 0;
    border-width: 1px 0 0;
    padding: var(--comp-space-m) var(--comp-space-l);
}

@media (min-width: 900px) {
    .comp-layout--bar_bottom .compliance-banner-inner {
        max-width: 1200px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--comp-space-l);
    }

    .comp-layout--bar_bottom .compliance-banner-actions {
        flex-shrink: 0;
    }
}

.comp-layout--center_modal .compliance-banner {
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    max-width: 540px;
}

@keyframes compSlideUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Banner Content */
.compliance-banner-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--comp-space-xs);
    margin-bottom: var(--comp-space-xs);
}

.compliance-banner-badge {
    font-size: var(--comp-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: var(--comp-surface-nested);
    color: var(--comp-text);
    padding: 0.2em 0.5em;
    border-radius: var(--comp-radius-sm);
    border: 1px solid var(--comp-border);
}

.compliance-banner-title {
    display: block;
    margin: 0;
    font-size: var(--comp-text-l);
    font-weight: 700;
    color: var(--comp-text);
    line-height: 1.25;
}

.compliance-banner-text {
    margin: 0 0 var(--comp-space-s) 0;
    font-size: var(--comp-text-s);
    color: var(--comp-text-muted);
    line-height: 1.55;
}

.compliance-banner-links {
    margin-bottom: var(--comp-space-m);
    font-size: var(--comp-text-xs);
    display: flex;
    flex-wrap: wrap;
    gap: var(--comp-space-s);
}

.compliance-banner-links a,
.compliance-banner-links .comp-preview-link {
    color: var(--comp-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.compliance-banner-links a:hover {
    text-decoration-thickness: 2px;
}

/* Actions & Buttons */
.compliance-banner-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--comp-space-xs);
}

.compliance-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* WCAG 2.5.5 target size */
    font-family: inherit;
    font-size: var(--comp-btn-font-size);
    font-weight: var(--comp-btn-font-weight);
    padding: var(--comp-btn-pad-block) var(--comp-btn-pad-inline);
    border-radius: var(--comp-btn-radius);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    border: 1px solid transparent;
    text-decoration: none;
    line-height: 1.2;
    flex: 1 1 auto;
}

.compliance-btn-primary {
    background-color: var(--comp-btn-bg);
    color: var(--comp-btn-text);
}

.compliance-btn-primary:hover {
    background-color: var(--comp-btn-bg-hover);
    color: var(--comp-btn-text);
}

/* "Accept all" and "Necessary only" get equal visual weight (EDPB guidance on dark patterns). */
.compliance-btn-secondary {
    background-color: var(--comp-btn-sec-bg);
    color: var(--comp-btn-sec-text);
    border-color: var(--comp-border);
}

.compliance-btn-secondary:hover {
    border-color: currentColor;
}

.compliance-btn-outline {
    background: transparent;
    color: var(--comp-text);
    border-color: var(--comp-border);
}

.compliance-btn-outline:hover {
    border-color: currentColor;
}

/* ==========================================================================
   Preferences Modal
   ========================================================================== */

.compliance-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: calc(var(--comp-z-index) + 10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--comp-space-m);
}

.compliance-modal {
    background: var(--comp-surface);
    color: var(--comp-text);
    border-radius: var(--comp-radius);
    box-shadow: var(--comp-shadow-modal);
    border: 1px solid var(--comp-border);
    width: 100%;
    max-width: 600px;
    max-height: 85dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: compZoomIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.compliance-modal:focus {
    outline: none;
}

@keyframes compZoomIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.compliance-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--comp-space-s);
    padding: var(--comp-space-m);
    border-bottom: 1px solid var(--comp-border);
}

.compliance-modal-title {
    margin: 0;
    font-size: var(--comp-text-l);
    font-weight: 700;
    color: var(--comp-text);
}

.compliance-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: 1px solid transparent;
    border-radius: var(--comp-radius-sm);
    font-size: 1.5rem;
    line-height: 1;
    color: var(--comp-text);
    cursor: pointer;
}

.compliance-modal-close:hover {
    border-color: var(--comp-border);
}

.compliance-modal-body {
    padding: var(--comp-space-m);
    overflow-y: auto;
}

.compliance-modal-intro {
    margin: 0 0 var(--comp-space-m) 0;
    font-size: var(--comp-text-s);
    color: var(--comp-text-muted);
}

/* Category Cards */
.compliance-categories-list {
    display: flex;
    flex-direction: column;
    gap: var(--comp-space-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.compliance-cat-card {
    border: 1px solid var(--comp-border);
    border-radius: var(--comp-radius-sm);
    padding: var(--comp-space-s) var(--comp-space-m);
    background: var(--comp-surface-nested);
}

.compliance-cat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--comp-space-s);
    margin-bottom: 0.35rem;
}

.compliance-cat-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--comp-space-xs);
}

#compliance-v2-root .compliance-cat-title {
    margin: 0;
    font-size: var(--comp-text-s);
    font-weight: 700;
    line-height: 1.3;
    color: var(--comp-text);
}

.compliance-badge-always-active {
    font-size: var(--comp-text-xs);
    font-weight: 600;
    background: var(--comp-surface);
    color: var(--comp-text);
    padding: 0.15em 0.45em;
    border-radius: var(--comp-radius-sm);
    border: 1px solid var(--comp-border);
}

.compliance-cat-desc {
    margin: 0;
    font-size: var(--comp-text-xs);
    color: var(--comp-text-muted);
    line-height: 1.5;
}

/* Switches: <button role="switch|checkbox" aria-checked>, scoped with the root id so theme/ACSS
   button and form styles can't leak in. */
#compliance-v2-root .compliance-switch {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    flex-shrink: 0;
    min-height: 44px;
    margin: 0;
    padding: 0 0.25em;
    background: none;
    border: 0;
    border-radius: var(--comp-radius-sm);
    box-shadow: none;
    color: var(--comp-text);
    font: inherit;
    font-size: var(--comp-text-xs);
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
}

#compliance-v2-root .compliance-switch-track {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--comp-text) 35%, var(--comp-surface));
    transition: background-color 0.2s;
}

#compliance-v2-root .compliance-switch-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s;
}

#compliance-v2-root .compliance-switch[aria-checked="true"] .compliance-switch-track {
    background: var(--comp-btn-bg);
}

#compliance-v2-root .compliance-switch[aria-checked="true"] .compliance-switch-thumb {
    transform: translateX(20px);
}

/* Partially granted category: thumb in the middle */
#compliance-v2-root .compliance-switch[aria-checked="mixed"] .compliance-switch-track {
    background: color-mix(in srgb, var(--comp-btn-bg) 55%, var(--comp-surface));
}

#compliance-v2-root .compliance-switch[aria-checked="mixed"] .compliance-switch-thumb {
    transform: translateX(10px);
}

#compliance-v2-root .compliance-switch-text {
    min-width: 5.5em;
    text-align: start;
}

#compliance-v2-root .compliance-switch:focus-visible {
    outline: 2px solid var(--comp-focus);
    outline-offset: 2px;
}

#compliance-v2-root .compliance-switch--small .compliance-switch-text {
    min-width: 2.5em;
}

.compliance-cat-status {
    margin: 0.35rem 0 0;
    font-size: var(--comp-text-xs);
    color: var(--comp-text-muted);
}

/* Individual services */
.compliance-services {
    margin-top: var(--comp-space-xs);
}

#compliance-v2-root .compliance-services > summary {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    min-height: 44px;
    cursor: pointer;
    font-size: var(--comp-text-xs);
    font-weight: 600;
    color: var(--comp-text);
    text-decoration: underline;
    text-underline-offset: 0.15em;
    list-style: none;
}

#compliance-v2-root .compliance-services > summary::-webkit-details-marker {
    display: none;
}

#compliance-v2-root .compliance-services > summary::before {
    content: "";
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s;
}

#compliance-v2-root .compliance-services[open] > summary::before {
    transform: rotate(45deg);
}

.compliance-service-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.compliance-service-list--static {
    margin-top: var(--comp-space-xs);
}

.compliance-service-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--comp-space-s);
    padding: 0.4rem 0;
    border-top: 1px solid var(--comp-border);
    font-size: var(--comp-text-xs);
}

.compliance-service-info {
    display: flex;
    flex-direction: column;
    gap: 0.15em;
}

.compliance-service-name {
    font-weight: 600;
    color: var(--comp-text);
}

.compliance-service-meta {
    color: var(--comp-text-muted);
}

/* Modal Footer */
.compliance-modal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--comp-space-xs);
    padding: var(--comp-space-m);
    border-top: 1px solid var(--comp-border);
    background: var(--comp-surface-nested);
}

/* ==========================================================================
   Reopen Trigger Button
   ========================================================================== */

.compliance-reopen-trigger {
    position: fixed;
    z-index: calc(var(--comp-z-index) - 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    min-width: 44px;
    min-height: 44px;
    padding: 0.5em 0.9em;
    background: var(--comp-trigger-bg);
    color: var(--comp-trigger-text);
    border: 1px solid var(--comp-border);
    border-radius: var(--comp-trigger-radius);
    box-shadow: var(--comp-shadow);
    font-family: inherit;
    font-size: var(--comp-text-xs);
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    opacity: var(--comp-trigger-idle-opacity);
    transition: opacity 0.2s ease, translate 0.2s ease;
}

.compliance-reopen-trigger:hover,
.compliance-reopen-trigger:focus-visible {
    opacity: 1;
}

.compliance-reopen-icon {
    flex-shrink: 0;
}

/* Mode: icon only */
.compliance-reopen-trigger[data-mode="icon"] {
    padding: 0;
    width: 44px;
    height: 44px;
}

.compliance-reopen-trigger[data-mode="icon"] .compliance-reopen-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* Positions */
.compliance-reopen-trigger[data-position="bottom_left"] {
    bottom: var(--comp-trigger-offset);
    left: var(--comp-trigger-offset);
}

.compliance-reopen-trigger[data-position="bottom_right"] {
    bottom: var(--comp-trigger-offset);
    right: var(--comp-trigger-offset);
}

.compliance-reopen-trigger[data-position="middle_left"],
.compliance-reopen-trigger[data-position="middle_right"] {
    top: 50%;
    translate: 0 -50%;
}

/* Bottom edge tab: sits on the bottom edge, mostly hidden, slides up on hover/focus.
   Override the hidden share with --comp-trigger-peek (e.g. 50%) in custom CSS. */
.compliance-reopen-trigger[data-position^="edge_bottom"] {
    bottom: 0;
    border-bottom: 0;
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    padding-bottom: 0.7em;
    box-shadow: none;
    translate: 0 var(--comp-trigger-peek, 55%);
}

.compliance-reopen-trigger[data-position="edge_bottom_left"] {
    left: var(--comp-trigger-offset);
}

.compliance-reopen-trigger[data-position="edge_bottom_right"] {
    right: var(--comp-trigger-offset);
}

.compliance-reopen-trigger[data-position="edge_bottom_center"] {
    left: 50%;
    translate: -50% var(--comp-trigger-peek, 55%);
}

.compliance-reopen-trigger[data-position^="edge_bottom"]:hover,
.compliance-reopen-trigger[data-position^="edge_bottom"]:focus-visible {
    translate: 0 0;
    box-shadow: var(--comp-shadow);
}

.compliance-reopen-trigger[data-position="edge_bottom_center"]:hover,
.compliance-reopen-trigger[data-position="edge_bottom_center"]:focus-visible {
    translate: -50% 0;
}

/* Touch has no hover: keep enough of the tab visible to tap comfortably */
@media (hover: none), (pointer: coarse) {
    .compliance-reopen-trigger[data-position^="edge_bottom"] {
        --comp-trigger-peek: 25%;
    }
}

/* Edge tab: flush to the viewport edge, text reads vertically */
.compliance-reopen-trigger[data-position="middle_left"] {
    left: 0;
    border-left: 0;
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

.compliance-reopen-trigger[data-position="middle_right"] {
    right: 0;
    border-right: 0;
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

.compliance-reopen-trigger[data-position^="middle"][data-mode="pill"] {
    writing-mode: vertical-rl;
    padding: 0.9em 0.5em;
}

.compliance-reopen-trigger[data-position="middle_left"][data-mode="pill"] {
    rotate: 180deg;
    border-left: 1px solid var(--comp-border);
    border-right: 0;
    border-radius: var(--comp-trigger-radius) 0 0 var(--comp-trigger-radius);
}

body.compliance-modal-open {
    overflow: hidden;
}

/* ==========================================================================
   Form notice (Turnstile blocked)
   ========================================================================== */

.compliance-form-notice {
    display: flex;
    flex-direction: column;
    gap: var(--comp-space-xs);
    margin: 0 0 var(--comp-space-m) 0;
    padding: var(--comp-space-s) var(--comp-space-m);
    background: var(--comp-surface-nested);
    color: var(--comp-text);
    border: 1px solid var(--comp-border);
    border-left: 4px solid var(--comp-btn-bg);
    border-radius: var(--comp-radius-sm);
    font-size: var(--comp-text-s);
    line-height: 1.5;
}

.compliance-form-notice p {
    margin: 0;
}

.compliance-form-notice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--comp-space-xs);
}

.compliance-form-notice-actions .compliance-btn {
    flex: 0 1 auto;
}

.compliance-form-notice.is-alert {
    border-left-color: #b91c1c;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .compliance-banner,
    .compliance-modal,
    .compliance-reopen-trigger,
    .compliance-btn,
    .compliance-switch-track,
    .compliance-switch-thumb,
    .compliance-services > summary::before {
        animation: none !important;
        transition: none !important;
    }
}