/**
 * Investi Consent — front-end styles.
 *
 * WHY TOKENS WITH FALLBACKS. Colours, radii and the font come from the
 * investi-core token set so the panels match the site and follow its light /
 * dark switch ([data-mode="dark"]) without a palette of their own. But
 * investi-global.css is a dependency of the investi templates, not of every
 * page, so every token is referenced with a literal fallback: on a page that
 * never loaded it the panels still render correctly rather than inheriting
 * nothing.
 *
 * WHY A NEAR-OPAQUE SURFACE. The house style is glass (--glass-bg is 45%
 * alpha), which works for cards sitting on a known page background. These
 * panels float over arbitrary content, so they use --surface-1 at high opacity
 * with the blur kept as texture. Legibility of legal copy wins over the effect.
 *
 * WHY <dialog>. Both panels block, and showModal() puts them in the top layer:
 * the rest of the page becomes inert, focus is trapped natively, and the veil
 * is ::backdrop. Hand-rolling those three is where accessible modals usually go
 * wrong, and the top layer also sidesteps any z-index fight with Elementor.
 *
 * ONE BASE, TWO MODIFIERS. The consent prompt and the full-terms modal are the
 * same surface at different sizes and anchors, so everything shared lives on
 * .investi-consent-panel and only position and width differ.
 *
 * @package InvestiConsent
 */

#investi-consent-root:empty {
    display: none;
}

#investi-consent-root {
    --ic-surface: var(--surface-1, #ffffff);
    --ic-text: var(--text-color, #1e1b2e);
    --ic-text-secondary: var(--text-secondary, #6a6487);
    --ic-heading: var(--heading-color, #0f0d1a);
    --ic-border: var(--border-color, rgba(15, 13, 26, 0.1));
    --ic-shadow: var(--shadow-strong, rgba(0, 0, 0, 0.12));
    --ic-accent: var(--accent-color, #cb6bfd);
    --ic-accent-gradient: var(--brand-gradient, linear-gradient(135deg, #2e7ece, #cb6bfd));
    --ic-font: var(--investi-font-family, "Roboto", sans-serif);
    --ic-radius: 18px;
    --ic-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --ic-veil: rgba(11, 9, 20, 0.68);
}

/* Only needed on pages that never loaded investi-global — where the tokens
   above resolve to their light-mode literals regardless of the mode switch. */
[data-mode="dark"] #investi-consent-root {
    --ic-surface: var(--surface-1, #16121f);
    --ic-text: var(--text-color, #f4f2fa);
    --ic-text-secondary: var(--text-secondary, #a49ec2);
    --ic-heading: var(--heading-color, #ffffff);
    --ic-border: var(--border-color, rgba(255, 255, 255, 0.12));
    --ic-shadow: var(--shadow-strong, rgba(0, 0, 0, 0.45));
    --ic-veil: rgba(0, 0, 0, 0.78);
}

/* Page scroll lock while a panel is open. showModal() makes the page inert but
   does not stop it scrolling underneath. */
.investi-consent-locked {
    overflow: hidden;
}

/* ── Launcher ───────────────────────────────────────────────────────────── */

/* Always present, so it borrows the panel surface rather than introducing a
   second look. It is NOT in the top layer — a plain fixed element — so it sits
   under the veil whenever a panel is open, which is why it hides itself then
   rather than showing through dimmed. */
.investi-consent-launcher {
    position: fixed;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    z-index: 99998;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    padding: 0;

    color: var(--ic-accent);
    background: color-mix(in srgb, var(--ic-surface) 92%, transparent);
    -webkit-backdrop-filter: var(--backdrop-blur, blur(16px));
    backdrop-filter: var(--backdrop-blur, blur(16px));
    /* --border-color is a near-white glass edge; on a 48px circle that reads as
       no edge at all, so this one is derived from the text colour. */
    border: 1px solid color-mix(in srgb, var(--ic-text) 12%, transparent);
    border-radius: 50%;
    box-shadow: 0 6px 20px var(--ic-shadow);
    cursor: pointer;
    transition:
        opacity 200ms var(--ic-ease),
        transform 200ms var(--ic-ease),
        box-shadow 200ms var(--ic-ease);
}

/* Withdrawn from the corner while the control moves into the core plugin's
   settings menu. Everything above stays so it can be put back — or reused
   wherever it lands — without rebuilding it. The button is still constructed and
   still opens preferences; it is only invisible. */
.investi-consent-launcher {
    display: none;
}

.investi-consent-launcher:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px var(--ic-shadow);
}

.investi-consent-launcher:focus-visible {
    outline: 2px solid var(--ic-accent);
    outline-offset: 3px;
}

.investi-consent-launcher svg {
    display: block;
    width: 24px;
    height: 24px;
}

/* It shares the corner with the panels, so it steps aside while one is open. */
.investi-consent-launcher.is-hidden {
    opacity: 0;
    transform: scale(0.9);
    pointer-events: none;
}

@media (max-width: 480px) {
    .investi-consent-launcher {
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    }
}

@media (prefers-reduced-motion: reduce) {
    .investi-consent-launcher {
        transition-duration: 1ms;
    }
}

/* ── Shared surface ─────────────────────────────────────────────────────── */

.investi-consent-panel {
    /* UA <dialog> defaults that fight our positioning: it centres itself with
       auto margins and caps its own width and height. */
    margin: 0;
    max-width: none;

    position: fixed;
    box-sizing: border-box;

    /* Anchored panels can outgrow the viewport, taking the action with them.
       Cap the height and let the body scroll instead. */
    display: flex;
    flex-direction: column;

    font-family: var(--ic-font);
    color: var(--ic-text);
    text-align: left;

    background: color-mix(in srgb, var(--ic-surface) 92%, transparent);
    -webkit-backdrop-filter: var(--backdrop-blur, blur(16px));
    backdrop-filter: var(--backdrop-blur, blur(16px));
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius);
    box-shadow: 0 12px 40px var(--ic-shadow);

    /* Entry state; .is-visible is added on the next frame after showModal(). */
    opacity: 0;
    transform: translateY(12px) scale(0.98);
    transition:
        opacity 280ms var(--ic-ease),
        transform 280ms var(--ic-ease);
}

/* showModal() moves focus to the dialog itself when nothing inside carries
   autofocus, and the browser paints its default focus ring around the whole
   panel. Suppressed here because the panel is a container, not a control —
   the buttons inside keep their own visible focus states.
   Focus is deliberately left on the container rather than autofocused onto
   the accept button, which would put a consent decision one keystroke away. */
.investi-consent-panel:focus {
    outline: none;
}

/* The veil. Lives in the top layer with the dialog, so it covers everything
   including anything the theme has given a high z-index. */
.investi-consent-panel::backdrop {
    /* ::backdrop inherits from its originating element in current browsers, but
       that is a recent change — the literal fallback covers anything older. */
    background: var(--ic-veil, rgba(11, 9, 20, 0.68));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    opacity: 0;
    transition: opacity 280ms var(--ic-ease);
}

.investi-consent-panel.is-visible::backdrop {
    opacity: 1;
}

/* Restrained brand hairline across the top edge. */
.investi-consent-panel::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--ic-accent-gradient);
    border-radius: var(--ic-radius) var(--ic-radius) 0 0;
}

.investi-consent-panel.is-visible {
    opacity: 1;
    transform: none;
}

.investi-consent-panel.is-leaving {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
}

/* ── Anchors ────────────────────────────────────────────────────────────── */

.investi-consent-panel--corner {
    inset: auto;
    right: calc(20px + env(safe-area-inset-right, 0px));
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    width: min(575px, calc(100vw - 40px));
    max-height: calc(100vh - 40px);
    padding: 20px 22px 22px;
}

/* inset:0 + margin:auto is what actually centres a <dialog> in both axes. */
.investi-consent-panel--centre {
    inset: 0;
    margin: auto;
    width: min(768px, calc(100vw - 40px));
    max-height: min(80vh, calc(100vh - 40px));
    padding: 26px 30px 28px;
}

/* ── Contents ───────────────────────────────────────────────────────────── */

/* A row rather than a block, so the language toggle can sit beside the title
   on the one panel that has it. Harmless on the panels that do not. */
.investi-consent-panel__header {
    flex: none;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
}

.investi-consent-panel__title {
    flex: 1;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ic-heading);
}

.investi-consent-panel--centre .investi-consent-panel__title {
    font-size: 20px;
}

/* ── Language toggle ────────────────────────────────────────────────────── */

/* A segmented pair rather than two loose links, so it reads as one control
   with one of two states — and small enough not to compete with the title. */
.investi-consent-panel__langs {
    flex: none;
    display: inline-flex;
    padding: 2px;
    background: color-mix(in srgb, var(--ic-text) 7%, transparent);
    border-radius: 999px;
}

.investi-consent-panel__lang {
    padding: 4px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--ic-text-secondary);
    background: none;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition:
        color 160ms var(--ic-ease),
        background-color 160ms var(--ic-ease);
}

.investi-consent-panel__lang:hover {
    color: var(--ic-heading);
}

.investi-consent-panel__lang[aria-pressed="true"] {
    color: var(--ic-heading);
    background: var(--ic-surface);
    box-shadow: 0 1px 3px var(--ic-shadow);
}

.investi-consent-panel__lang:focus-visible {
    outline: 2px solid var(--ic-accent);
    outline-offset: 2px;
}

/* min-height:0 is what actually lets a flex child scroll rather than grow. */
.investi-consent-panel__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* Keeps the scrollbar off the text without narrowing the column. */
    padding-right: 6px;
    margin-right: -6px;
    overscroll-behavior: contain;
}

.investi-consent-panel__message {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--ic-text-secondary);
}

.investi-consent-panel__message + .investi-consent-panel__message {
    margin-top: 12px;
}

/* The lead sentence above the full terms — same size, but it frames the list
   that follows rather than being part of it. */
.investi-consent-panel__lead {
    color: var(--ic-text);
    font-weight: 500;
}

/* A button, not an anchor: it opens a panel rather than navigating anywhere.
   Styled as a link because that is what it reads as in the sentence. */
.investi-consent-panel__link {
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: var(--ic-accent);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    transition: opacity 160ms var(--ic-ease);
}

.investi-consent-panel__link:hover {
    opacity: 0.75;
}

.investi-consent-panel__link:focus-visible {
    outline: 2px solid var(--ic-accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* ── Cookie categories ──────────────────────────────────────────────────── */

.investi-consent-panel__category + .investi-consent-panel__category {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid color-mix(in srgb, var(--ic-text) 12%, transparent);
}

.investi-consent-panel__category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.investi-consent-panel__category-name {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ic-heading);
    cursor: pointer;
}

/* Replaces the switch on a category that cannot be turned off — a disabled
   toggle invites people to keep clicking it. */
.investi-consent-panel__category-locked {
    flex: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ic-text-secondary);
}

.investi-consent-panel__category-desc {
    margin: 6px 0 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--ic-text-secondary);
}

/* A real checkbox, restyled — keyboard behaviour, labelling and the checked
   state all come for free rather than being reimplemented on a div. */
.investi-consent-panel__switch {
    flex: none;
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 40px;
    height: 22px;
    margin: 0;
    background: color-mix(in srgb, var(--ic-text) 22%, transparent);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 160ms var(--ic-ease);
}

.investi-consent-panel__switch::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 160ms var(--ic-ease);
}

.investi-consent-panel__switch:checked {
    background: var(--ic-accent-gradient);
}

.investi-consent-panel__switch:checked::after {
    transform: translateX(18px);
}

.investi-consent-panel__switch:focus-visible {
    outline: 2px solid var(--ic-accent);
    outline-offset: 3px;
}

/* Development only — see Investi_Consent_Settings::for_frontend(). Deliberately
   plain so it never reads as part of the design. */
.investi-consent-panel__debug {
    flex: none;
    display: block;
    margin: 14px auto 0;
    padding: 0;
    font: inherit;
    font-size: 12px;
    color: var(--ic-text-secondary);
    background: none;
    border: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    opacity: 0.7;
}

.investi-consent-panel__debug:hover {
    opacity: 1;
}

/* Outside the scrolling body, so the action stays visible however long the
   copy runs. */
.investi-consent-panel__actions {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 26px;
}

/* The site's own button tokens are sized for compact in-app chips (11px); a
   consent action needs to read as the primary thing in the panel, so these take
   the brand gradient and the pill radius used across the rest of the site.
   Shared shape lives here; only the fill differs between variants, which is
   what keeps deny and accept the same visual weight. */
.investi-consent-panel__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 11px 24px;

    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 999px;
    cursor: pointer;
    transition:
        filter 160ms var(--ic-ease),
        color 160ms var(--ic-ease),
        border-color 160ms var(--ic-ease),
        transform 160ms var(--ic-ease);
}

.investi-consent-panel__action--primary {
    color: #ffffff;
    background: var(--ic-accent-gradient);
}

.investi-consent-panel__action--primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* --border-color resolves to a near-white glass border, which would be
   invisible as an outline here, so the edge is derived from the text colour
   instead and adapts to either mode. */
.investi-consent-panel__action--secondary {
    color: var(--ic-text);
    border-color: color-mix(in srgb, var(--ic-text) 28%, transparent);
}

.investi-consent-panel__action--secondary:hover {
    color: var(--ic-heading);
    border-color: var(--ic-accent);
    transform: translateY(-1px);
}

/* The least prominent of the three — a route to more detail rather than a
   decision, so it carries no fill or edge. */
.investi-consent-panel__action--ghost {
    padding-left: 14px;
    padding-right: 14px;
    color: var(--ic-text-secondary);
    font-weight: 500;
}

.investi-consent-panel__action--ghost:hover {
    color: var(--ic-heading);
}

.investi-consent-panel__action:active {
    transform: none;
}

.investi-consent-panel__action:focus-visible {
    outline: 2px solid var(--ic-accent);
    outline-offset: 3px;
}

@media (max-width: 480px) {
    .investi-consent-panel--corner {
        right: 12px;
        left: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        width: auto;
        max-height: calc(100vh - 24px);
    }

    .investi-consent-panel--centre {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
        padding: 22px 20px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .investi-consent-panel,
    .investi-consent-panel::backdrop {
        transition-duration: 1ms;
    }
}