/* Troop Consent — Banner Styles */

:root {
    --troop-consent-primary: #0055FF;
    /* Label colour on top of the primary fill. Split off from the fixed #fff it used to be:
       a light brand colour (e.g. #F2C744) leaves white text at ~1.6:1, and the site then has
       no way to fix it without overriding plugin CSS. */
    --troop-consent-on-primary: #ffffff;
    --troop-consent-bg: #ffffff;
    --troop-consent-text: #333333;
    --troop-consent-border: #e5e5e5;
    --troop-consent-radius: 8px;
    --troop-consent-shadow: 0 -2px 16px rgba(0, 0, 0, 0.1);
}

/* Base banner */
.troop-consent-banner {
    position: fixed;
    z-index: 999999;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.5;
    color: var(--troop-consent-text);
    box-sizing: border-box;
}

.troop-consent-banner[hidden] {
    display: none !important;
}

.troop-consent-banner *,
.troop-consent-banner *::before,
.troop-consent-banner *::after {
    box-sizing: border-box;
}

/* Position: bottom bar */
.troop-consent-banner--bottom-bar {
    bottom: 0;
    left: 0;
    right: 0;
}

.troop-consent-banner--bottom-bar .troop-consent-banner__inner {
    background: var(--troop-consent-bg);
    box-shadow: var(--troop-consent-shadow);
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    animation: troopConsentSlideUp 0.3s ease-out;
}

.troop-consent-banner--bottom-bar .troop-consent-banner__content {
    margin-bottom: 0;
}

.troop-consent-banner--bottom-bar .troop-consent-banner__aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

/* Position: modal */
.troop-consent-banner--modal {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.troop-consent-banner__overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    animation: troopConsentFadeIn 0.2s ease-out;
}

.troop-consent-banner--modal .troop-consent-banner__inner {
    position: relative;
    z-index: 1;
    background: var(--troop-consent-bg);
    border-radius: var(--troop-consent-radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    padding: 32px;
    max-width: 520px;
    width: 90%;
    animation: troopConsentScaleIn 0.3s ease-out;
}

/* Position: corner */

/* Sized by its content, not to a number. The fixed 400px this shipped with was 20px short of
   the three buttons (372px of buttons plus 48px of inner padding), so "Instellingen" hung
   outside the white box above 768px — and any number picked to fit today's labels breaks again
   the moment the texts are edited, which they are: they are settings.

   The three declarations do different jobs, and the interesting one is min-width:

     width      fit-content  — shrink-wrap. A short description gives a narrow banner.
     max-width  the cap      — prose has a readable measure; without it a long description
                               would lay itself out on one line across the whole viewport.
     min-width  min-content  — the floor, and the actual fix. min-content here is the widest
                               thing that cannot be broken up, which is the button row (it is
                               nowrap below, and the labels are too). When min-width and
                               max-width conflict, CSS resolves in favour of min-width — so
                               buttons that need more than the cap widen the banner instead of
                               overflowing it. Nothing to keep in sync with the texts. */
.troop-consent-banner--corner {
    bottom: 20px;
    left: 20px;
    width: fit-content;
    min-width: min-content;
    max-width: min(30rem, calc(100vw - 40px));
}

.troop-consent-banner--corner .troop-consent-banner__inner {
    background: var(--troop-consent-bg);
    border-radius: var(--troop-consent-radius);
    box-shadow: var(--troop-consent-shadow);
    padding: 24px;
    animation: troopConsentSlideUp 0.3s ease-out;
}

/* Content */
.troop-consent-banner__content {
    margin-bottom: 1rem;
}

.troop-consent-banner__title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 0.5rem;
    color: var(--troop-consent-text);
}

.troop-consent-banner__description {
    margin: 0;
    color: #666;
    line-height: 1.6;
}

/* Buttons */

/* Wrapping is the fallback for the bottom bar, which is as wide as the viewport and has room
   to spare; the corner banner opts out of it below, because there the row is what decides how
   wide the banner gets. */
.troop-consent-banner__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* The row is load-bearing for the corner banner's min-width, and only an unbreakable row can
   carry that: a wrappable one has a min-content of its widest single button, which would let
   the buttons stack inside a too-narrow box instead of widening it. */
.troop-consent-banner--corner .troop-consent-banner__buttons {
    flex-wrap: nowrap;
}

/* Privacy link */
.troop-consent-banner__privacy {
    margin-top: 0.75rem;
}

.troop-consent-banner__privacy-link {
    font-size: 13px;
    color: #888;
    text-decoration: underline;
    transition: color 0.2s;
}

.troop-consent-banner__privacy-link:hover {
    color: #555;
}

.troop-consent-banner__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border: none;
    border-radius: var(--troop-consent-radius);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.2s, background-color 0.2s;
    white-space: nowrap;
    line-height: 1.2;
}

.troop-consent-banner__btn:hover {
    opacity: 0.9;
}

.troop-consent-banner__btn:focus-visible {
    outline: 2px solid var(--troop-consent-primary);
    outline-offset: 2px;
}

.troop-consent-banner__btn--accept {
    background: var(--troop-consent-primary);
    color: #fff;
}

.troop-consent-banner__btn--deny {
    background: var(--troop-consent-border);
    color: var(--troop-consent-text);
}

.troop-consent-banner__btn--settings {
    background: transparent;
    color: var(--troop-consent-primary);
    border: 1px solid var(--troop-consent-primary);
}

.troop-consent-banner__btn--save {
    background: var(--troop-consent-primary);
    color: #fff;
    width: 100%;
}

/* Settings modal */
.troop-consent-banner__modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    animation: troopConsentFadeIn 0.2s ease-out;
}

.troop-consent-banner__modal[hidden] {
    display: none !important;
}

.troop-consent-banner__modal-inner {
    position: relative;
    background: var(--troop-consent-bg);
    border-radius: var(--troop-consent-radius);
    padding: 32px;
    max-width: 480px;
    width: 90%;
    max-height: 80vh;
    overflow-y: auto;
    animation: troopConsentScaleIn 0.3s ease-out;
}

.troop-consent-banner__modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: #999;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
}

.troop-consent-banner__modal-close:hover {
    color: var(--troop-consent-text);
}

.troop-consent-banner__modal-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 20px;
}

/* Category toggles */
.troop-consent-banner__category {
    padding: 16px 0;
    border-bottom: 1px solid var(--troop-consent-border);
}

.troop-consent-banner__category:last-of-type {
    border-bottom: none;
}

.troop-consent-banner__toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.troop-consent-banner__toggle input[type="checkbox"] {
    /* Hardened against host-theme checkbox resets — e.g. Troop Framework
       ships `input[type=checkbox]{display:none}`, which would otherwise
       hide the toggle. Force the box, custom appearance and zero spacing. */
    display: block !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative;
    box-sizing: border-box;
    width: 44px;
    height: 24px;
    margin: 0 !important;
    padding: 0 !important;
    background: #ccc;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: background-color 0.2s;
    flex-shrink: 0;
}

.troop-consent-banner__toggle input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
}

.troop-consent-banner__toggle input[type="checkbox"]:checked {
    background: var(--troop-consent-primary);
}

.troop-consent-banner__toggle input[type="checkbox"]:checked::after {
    transform: translateX(20px);
}

.troop-consent-banner__toggle input[type="checkbox"]:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

.troop-consent-banner__toggle input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--troop-consent-primary);
    outline-offset: 2px;
}

.troop-consent-banner__toggle-label {
    font-weight: 500;
    font-size: 15px;
}

.troop-consent-banner__category-desc {
    margin: 4px 0 0 56px;
    font-size: 13px;
    color: #666;
}

.troop-consent-banner__modal-buttons {
    margin-top: 20px;
}

/* ─── Cookie Declaration Page ─── */

.consent-declaration {
    width: 100%;
    font-family: inherit;
}

.consent-declaration__intro {
    color: #555;
    font-size: 1rem;
    line-height: 1.7;
    margin: 0 0 2.5rem;
}

.consent-declaration__group {
    margin-bottom: 3rem;
}

.consent-declaration__group:last-of-type {
    margin-bottom: 2rem;
}

.consent-declaration__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
}

.consent-declaration__title {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0;
    color: var(--troop-consent-text);
}

.consent-declaration__badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.02em;
}

.consent-declaration__badge--functional {
    background: #e8f5e9;
    color: #2e7d32;
}

.consent-declaration__badge--analytics {
    background: #e3f2fd;
    color: #1565c0;
}

.consent-declaration__badge--marketing {
    background: #fff3e0;
    color: #e65100;
}

.consent-declaration__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.consent-declaration__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    table-layout: fixed;
}

.consent-declaration__table th:nth-child(1),
.consent-declaration__table td:nth-child(1) { width: 20%; }

.consent-declaration__table th:nth-child(2),
.consent-declaration__table td:nth-child(2) { width: 18%; }

.consent-declaration__table th:nth-child(3),
.consent-declaration__table td:nth-child(3) { width: 44%; }

.consent-declaration__table th:nth-child(4),
.consent-declaration__table td:nth-child(4) { width: 18%; }

.consent-declaration__table th {
    padding: 0.625rem 1rem;
    text-align: left;
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--troop-consent-text);
    border: none;
}

.consent-declaration__table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border: none;
    color: #555;
}

.consent-declaration__table tbody tr {
    border-radius: 6px;
}

.consent-declaration__table tbody tr:nth-child(odd) {
    background: #f8f8fa;
}

.consent-declaration__cookie-name {
    font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    background: #f4f4f5;
    padding: 2px 8px;
    border-radius: 4px;
    color: #374151;
    white-space: nowrap;
}

.consent-declaration__expiry {
    color: #666;
    white-space: nowrap;
}

.consent-declaration__status {
    margin-top: 2rem;
}

.consent-declaration__status-row {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.375rem 0;
}

.consent-declaration__status-label {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--troop-consent-text);
    min-width: 180px;
}

.consent-declaration__status-value {
    font-size: 0.875rem;
    color: #555;
}

.consent-declaration__status-value code {
    font-family: 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    background: #f4f4f5;
    padding: 2px 8px;
    border-radius: 4px;
}

.consent-declaration__status-none {
    font-size: 0.875rem;
    color: #888;
    font-style: italic;
    margin: 0;
}

.consent-declaration__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* One sentence under the two buttons: which one reopens the choice, which one erases it. */
.consent-declaration__actions-hint {
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #555;
}

/*
 * Shared button base. This markup is rendered inside theme content, so it cannot lean on
 * the `.troop-consent-banner *` box-sizing rule above and it cannot assume a reset: a theme
 * that styles `button` or `.btn` reaches these elements too. Everything a theme commonly
 * sets is therefore restated here rather than inherited by accident.
 *
 * Two hardening choices, both deliberate. The selectors carry the `.consent-declaration`
 * ancestor, so an everyday theme rule such as `.entry-content button` (0-1-1) no longer
 * outranks them (0-2-0). And what these two controls actually mean is marked `!important`:
 * fill, label and border colour (that is how a visitor tells them apart), the 44px touch
 * target and the focus ring. Measured on a theme that only sets
 * `.entry-content button{background:#f5f5f5;color:#777;border:1px solid #ddd;padding:6px 12px}`
 * the old rules lost all of it: both buttons 28px high, identical grey, no focus ring — the
 * withdraw control reduced to a grey chip, which art. 7(3) does not allow.
 *
 * Restyling is still supported, through the custom properties (`--troop-consent-primary`,
 * `--troop-consent-on-primary`, `--troop-consent-text`) and through the cosmetics left
 * unmarked below; a blanket `button` reset is not a restyle and no longer reaches them.
 */
.consent-declaration .consent-declaration__manage,
.consent-declaration .consent-declaration__revoke {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 0;
    min-height: 44px !important;
    margin: 0;
    padding: 12px 24px !important;
    border-radius: var(--troop-consent-radius);
    font-family: inherit;
    font-size: 0.9375rem !important;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: normal;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, filter 0.2s;
}

/* Primary: reopens the choice, changes nothing until the visitor saves. The label colour
   comes from its own property, so a site with a light brand colour can put dark text on it
   instead of losing the label to a 1.6:1 contrast. */
.consent-declaration .consent-declaration__manage {
    background: var(--troop-consent-primary) !important;
    color: var(--troop-consent-on-primary, #fff) !important;
    border: 1.5px solid var(--troop-consent-primary) !important;
}

/* Darkened rather than inverted: an inverted fill would land on the outlined style the
   withdraw button already uses, so hovering one would look like the other. */
.consent-declaration .consent-declaration__manage:hover {
    filter: brightness(0.9);
}

/* Ring in the text colour, not the brand colour: a light brand colour leaves the ring at
   the same ~1.6:1 as the label it is supposed to point at, well under the 3:1 a focus
   indicator needs. */
.consent-declaration .consent-declaration__manage:focus-visible {
    outline: 2px solid var(--troop-consent-text) !important;
    outline-offset: 2px !important;
}

/*
 * Secondary: withdrawing is the irreversible one, so it stays outlined instead of filled —
 * but its colours no longer hang on the brand colour. Label and border were both
 * `--troop-consent-primary`, so a light brand colour erased the text and the outline at the
 * same time (#F2C744 on white measures 1.6:1) and the only correctly labelled withdraw route
 * on the page disappeared. The text colour holds whatever the site picks.
 *
 * Size, position, touch target and focus behaviour are identical to the button beside it,
 * because AVG art. 7(3) requires withdrawing to be no harder than giving.
 */
.consent-declaration .consent-declaration__revoke {
    background: transparent !important;
    color: var(--troop-consent-text) !important;
    border: 1.5px solid var(--troop-consent-text) !important;
}

/* Stays outlined on hover. Filling it with the primary colour reproduced the resting state
   of the button next to it, so pointing at the irreversible action made it look like the
   primary one. */
.consent-declaration .consent-declaration__revoke:hover {
    background: rgba(0, 0, 0, 0.06) !important;
}

.consent-declaration .consent-declaration__revoke:focus-visible {
    outline: 2px solid var(--troop-consent-text) !important;
    outline-offset: 2px !important;
}

/* Declaration responsive */
@media (max-width: 640px) {
    .consent-declaration__table th,
    .consent-declaration__table td {
        padding: 0.625rem 0.75rem;
        font-size: 0.8125rem;
    }

    .consent-declaration__header {
        flex-wrap: wrap;
    }

    /* Side by side does not fit on a phone: stack, full width, both equally reachable.
       The gap is wider than the desktop 0.75rem on purpose — stacked full-width buttons put
       the irreversible action directly under the primary one, and 12px is a mistap away from
       withdrawing consent that cannot be undone. */
    .consent-declaration__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 1.5rem;
    }

    .consent-declaration .consent-declaration__manage,
    .consent-declaration .consent-declaration__revoke {
        width: 100%;
    }
}

/* Animations */
@keyframes troopConsentSlideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes troopConsentFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes troopConsentScaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Responsive */
@media (max-width: 768px) {
    .troop-consent-banner--bottom-bar .troop-consent-banner__inner {
        flex-direction: column;
        align-items: stretch;
        padding: 1rem 1.25rem;
    }

    .troop-consent-banner--bottom-bar .troop-consent-banner__aside {
        align-items: stretch;
    }

    .troop-consent-banner__buttons {
        flex-direction: column;
    }

    .troop-consent-banner__btn {
        width: 100%;
    }

    .troop-consent-banner__privacy {
        text-align: center;
    }

    /* Full width between the two insets, which needs the shrink-wrap switched off: fit-content
       would ignore `right` and size to the content instead. min-width goes with it — the
       buttons stack here (flex-direction: column below), so the row is no longer the floor and
       leaving min-content in place would hold the banner open at the width of the widest
       label on the narrowest phones. */
    .troop-consent-banner--corner {
        left: 10px;
        right: 10px;
        bottom: 10px;
        width: auto;
        min-width: 0;
        max-width: none;
    }

    .troop-consent-banner__modal-inner {
        padding: 24px;
    }
}