/* Cookie consent banner and preferences panel.
   Paired with assets/js/cookie-consent.js and lib/cookie-consent.php.

   Deliberately self-contained: this loads on the marketing page, the legal
   pages and every signed-in app page, which between them run three different
   stylesheets. Everything is namespaced under .pmcc- and no element selectors
   are used, so nothing here can reach into a host page's layout and nothing in
   those pages can restyle the banner by accident.

   The visual weight of "Accept" and "Reject" is identical on purpose — same
   size, same shape, same prominence, side by side. Styling refusal as the
   quiet secondary option is the single most commonly fined dark pattern in
   consent design, and it invalidates the consent it collects. */

.pmcc-root {
    --pmcc-blue: #0d6efd;
    --pmcc-blue-dark: #0b5ed7;
    --pmcc-ink: #0b1524;
    --pmcc-body: #47566b;
    --pmcc-line: #dfe4ec;
    --pmcc-surface: #fff;
    --pmcc-tint: #f5f7fb;
    --pmcc-radius: 14px;
    --pmcc-radius-sm: 9px;

    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Above Bootstrap's modal (1055) so the banner is never buried by whatever
       the host page happens to have open. */
    position: relative;
    z-index: 2147483000;
}

.pmcc-root *,
.pmcc-root *::before,
.pmcc-root *::after {
    box-sizing: border-box;
}

.pmcc-hidden {
    display: none !important;
}

/* ── Banner ─────────────────────────────────────────────────────────── */

.pmcc-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin: 0 auto;
    max-width: 940px;
    background: var(--pmcc-surface);
    border: 1px solid var(--pmcc-line);
    border-radius: var(--pmcc-radius);
    box-shadow: 0 18px 48px rgba(11, 21, 36, .18);
    padding: 22px 24px;
    display: flex;
    align-items: center;
    gap: 24px;
    animation: pmcc-rise .28s ease both;
}

@keyframes pmcc-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}

.pmcc-banner-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.pmcc-title {
    margin: 0 0 6px;
    font-size: 1rem;
    font-weight: 700;
    color: var(--pmcc-ink);
    line-height: 1.3;
}

.pmcc-text {
    margin: 0;
    font-size: .88rem;
    line-height: 1.55;
    color: var(--pmcc-body);
}

.pmcc-text a {
    color: var(--pmcc-blue);
    font-weight: 600;
    text-decoration: underline;
}

.pmcc-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ── Buttons ────────────────────────────────────────────────────────── */

.pmcc-btn {
    appearance: none;
    border: 1px solid transparent;
    border-radius: var(--pmcc-radius-sm);
    padding: 11px 20px;
    font-size: .875rem;
    font-weight: 600;
    font-family: inherit;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Accept and reject share this class and differ only in hue, never in size or
   emphasis. Both are filled; neither is a faint text link. */
.pmcc-btn-primary {
    background: var(--pmcc-blue);
    border-color: var(--pmcc-blue);
    color: #fff;
}

.pmcc-btn-primary:hover {
    background: var(--pmcc-blue-dark);
    border-color: var(--pmcc-blue-dark);
}

.pmcc-btn-secondary {
    background: var(--pmcc-tint);
    border-color: var(--pmcc-line);
    color: var(--pmcc-ink);
}

.pmcc-btn-secondary:hover {
    background: #e9edf4;
    border-color: #cdd5e1;
}

.pmcc-btn-quiet {
    background: transparent;
    border-color: transparent;
    color: var(--pmcc-body);
    text-decoration: underline;
    padding-left: 8px;
    padding-right: 8px;
}

.pmcc-btn-quiet:hover {
    color: var(--pmcc-ink);
}

/* A visible focus ring on every interactive element. Keyboard and screen-reader
   users have to be able to refuse as readily as anyone else, and :focus-visible
   alone leaves nothing for browsers that do not support it. */
.pmcc-root button:focus-visible,
.pmcc-root a:focus-visible,
.pmcc-root input:focus-visible {
    outline: 3px solid var(--pmcc-blue);
    outline-offset: 2px;
}

/* ── Preferences dialog ─────────────────────────────────────────────── */

.pmcc-overlay {
    position: fixed;
    inset: 0;
    background: rgba(11, 21, 36, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: pmcc-fade .2s ease both;
}

@keyframes pmcc-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pmcc-dialog {
    background: var(--pmcc-surface);
    border-radius: var(--pmcc-radius);
    box-shadow: 0 24px 60px rgba(11, 21, 36, .3);
    width: 100%;
    max-width: 640px;
    /* The panel scrolls inside itself rather than growing past the viewport, so
       the save controls stay reachable on a short screen. */
    max-height: min(88vh, 780px);
    display: flex;
    flex-direction: column;
    animation: pmcc-rise .24s ease both;
}

.pmcc-dialog-head {
    padding: 22px 24px 16px;
    border-bottom: 1px solid var(--pmcc-line);
    position: relative;
}

/* Dismisses without deciding, which is not the same as refusing — the banner
   simply returns. Present because backdrop-click and Escape are invisible
   affordances, and a touch user with no keyboard has neither. */
.pmcc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 24px;
    line-height: 1;
    color: var(--pmcc-body);
    cursor: pointer;
    padding: 0;
}

.pmcc-close:hover {
    background: var(--pmcc-tint);
    border-color: var(--pmcc-line);
    color: var(--pmcc-ink);
}

/* The panel takes focus on open so its title is announced first; that must not
   paint a focus ring around the whole dialog. */
.pmcc-dialog:focus {
    outline: none;
}

/* Keeps the heading clear of the close button. */
.pmcc-dialog-head .pmcc-title {
    padding-right: 40px;
}

.pmcc-dialog-head .pmcc-title {
    font-size: 1.15rem;
    margin-bottom: 8px;
}

.pmcc-dialog-body {
    padding: 8px 24px 20px;
    overflow-y: auto;
    flex: 1 1 auto;
}

.pmcc-dialog-foot {
    padding: 16px 24px;
    border-top: 1px solid var(--pmcc-line);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
    background: var(--pmcc-tint);
    border-radius: 0 0 var(--pmcc-radius) var(--pmcc-radius);
}

/* ── Category rows ──────────────────────────────────────────────────── */

.pmcc-cat {
    border: 1px solid var(--pmcc-line);
    border-radius: var(--pmcc-radius-sm);
    padding: 16px;
    margin-top: 14px;
}

.pmcc-cat-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.pmcc-cat-label {
    font-size: .95rem;
    font-weight: 700;
    color: var(--pmcc-ink);
    margin: 0 0 3px;
}

.pmcc-cat-summary {
    font-size: .82rem;
    color: var(--pmcc-body);
    margin: 0;
    line-height: 1.5;
}

.pmcc-cat-detail {
    font-size: .82rem;
    color: var(--pmcc-body);
    line-height: 1.6;
    margin: 12px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--pmcc-line);
}

.pmcc-locked {
    flex: 0 0 auto;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #1a7f4b;
    background: #e6f6ed;
    border-radius: 100px;
    padding: 6px 12px;
    white-space: nowrap;
}

/* ── Switch ─────────────────────────────────────────────────────────── */

/* A real checkbox, moved off-screen rather than hidden with display:none so it
   keeps its place in the tab order and its label association. The visible
   switch is drawn by the sibling span. */
.pmcc-switch {
    flex: 0 0 auto;
    position: relative;
    display: inline-block;
    width: 48px;
    height: 28px;
}

.pmcc-switch input {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}

.pmcc-switch-track {
    position: absolute;
    inset: 0;
    background: #c3ccda;
    border-radius: 100px;
    transition: background-color .16s ease;
    pointer-events: none;
}

.pmcc-switch-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(11, 21, 36, .3);
    transition: transform .16s ease;
}

.pmcc-switch input:checked + .pmcc-switch-track {
    background: var(--pmcc-blue);
}

.pmcc-switch input:checked + .pmcc-switch-track::after {
    transform: translateX(20px);
}

.pmcc-switch input:focus-visible + .pmcc-switch-track {
    outline: 3px solid var(--pmcc-blue);
    outline-offset: 2px;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 780px) {
    .pmcc-banner {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
        padding: 20px;
        left: 10px;
        right: 10px;
        bottom: 10px;
        /* Long notices must not push the buttons off a small screen. */
        max-height: 84vh;
        overflow-y: auto;
    }

    .pmcc-actions {
        flex-wrap: wrap;
    }

    /* Accept and reject stay on one row, sharing the width equally, so neither
       gains prominence from being wider or from sitting alone. */
    .pmcc-actions .pmcc-btn-primary,
    .pmcc-actions .pmcc-btn-secondary {
        flex: 1 1 0;
        /* Both labels are short; allowing a wrap keeps them equal-width rather
           than letting the longer one force a second row on a narrow phone. */
        white-space: normal;
    }

    .pmcc-actions .pmcc-btn-quiet {
        flex: 1 1 100%;
        text-align: center;
    }

    .pmcc-dialog-foot .pmcc-btn {
        flex: 1 1 100%;
    }
}

/* ── Accessibility preferences ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .pmcc-banner,
    .pmcc-overlay,
    .pmcc-dialog {
        animation: none;
    }

    .pmcc-root * {
        transition: none !important;
    }
}

/* Windows high contrast and forced-colours modes drop background colours
   entirely, which would leave the switch and the two buttons indistinguishable
   from one another. Borders survive, so lean on those. */
@media (forced-colors: active) {
    .pmcc-banner,
    .pmcc-dialog,
    .pmcc-cat {
        border: 1px solid CanvasText;
    }

    .pmcc-btn {
        border: 1px solid ButtonText;
    }

    .pmcc-switch-track {
        border: 1px solid CanvasText;
    }

    .pmcc-switch input:checked + .pmcc-switch-track {
        background: Highlight;
    }
}

@media print {
    .pmcc-root {
        display: none !important;
    }
}