/**
 * GDPRConsent front end styles.
 * Inherits the site's typeface and uses CSS variables, so every site keeps its own look.
 * Variables are set from the component options by gdprconsent.js.
 */

:root {
    --gdprc-bg: #ffffff;
    --gdprc-text: #1b1b1b;
    --gdprc-border: #b4b4b4;
    --gdprc-accent: #1b1b1b;
    --gdprc-accent-text: #ffffff;
    --gdprc-radius: 3px;
    --gdprc-fs: 15px;
    --gdprc-margin: 16px;
    --gdprc-max: 440px;
}

:root[data-gdprc-preset="flat"] {
    --gdprc-bg: #f1f0ed;
    --gdprc-border: transparent;
}

:root[data-gdprc-preset="dark"] {
    --gdprc-bg: #1d1d1f;
    --gdprc-text: #f0f0f0;
    --gdprc-border: #56565b;
    --gdprc-accent: #f0f0f0;
    --gdprc-accent-text: #1d1d1f;
}

[data-gdpr-category][hidden] {
    display: none !important;
}

.gdprc,
.gdprc-reopen,
.gdprc-ph {
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--gdprc-fs);
    font-weight: normal;
    line-height: 1.45;
    letter-spacing: normal;
    text-transform: none;
    text-align: left;
    color: var(--gdprc-text);
}

.gdprc *,
.gdprc-ph * {
    box-sizing: border-box;
}

.gdprc [hidden],
.gdprc-backdrop[hidden],
.gdprc-reopen[hidden] {
    display: none !important;
}

/* Containers */

.gdprc {
    position: fixed;
    z-index: 99999;
    background: var(--gdprc-bg);
    border: 1px solid var(--gdprc-border);
    border-radius: var(--gdprc-radius);
    max-height: calc(100vh - 2 * var(--gdprc-margin));
    overflow-y: auto;
    overscroll-behavior: contain;
}

.gdprc__inner {
    padding: 1.15em 1.3em 1.2em;
}

.gdprc--box {
    width: min(var(--gdprc-max), calc(100vw - 2 * var(--gdprc-margin)));
}

.gdprc--bar {
    left: 0;
    right: 0;
    width: auto;
    max-height: 70vh;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
}

.gdprc--bar .gdprc__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1em 2em;
    max-width: 1180px;
    margin: 0 auto;
}

.gdprc--bar .gdprc__text {
    flex: 1 1 380px;
}

.gdprc--bar .gdprc__actions {
    flex: 0 1 auto;
}

.gdprc--bar .gdprc__panel {
    flex: 1 1 100%;
}

.gdprc--dialog {
    width: min(var(--gdprc-max), calc(100vw - 2 * var(--gdprc-margin)));
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.gdprc--dialog.gdprc-win {
    width: min(max(var(--gdprc-max), 700px), calc(100vw - 2 * var(--gdprc-margin)));
}

.gdprc-backdrop {
    position: fixed;
    z-index: 99998;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
}

/* Positions (box) */

.gdprc--box.gdprc-pos-top-left,
.gdprc--box.gdprc-pos-top-center,
.gdprc--box.gdprc-pos-top-right {
    top: var(--gdprc-margin);
}

.gdprc--box.gdprc-pos-bottom-left,
.gdprc--box.gdprc-pos-bottom-center,
.gdprc--box.gdprc-pos-bottom-right {
    bottom: var(--gdprc-margin);
}

.gdprc--box.gdprc-pos-middle-left,
.gdprc--box.gdprc-pos-middle-center,
.gdprc--box.gdprc-pos-middle-right {
    top: 50%;
    transform: translateY(-50%);
}

.gdprc--box.gdprc-pos-top-left,
.gdprc--box.gdprc-pos-middle-left,
.gdprc--box.gdprc-pos-bottom-left {
    left: var(--gdprc-margin);
}

.gdprc--box.gdprc-pos-top-right,
.gdprc--box.gdprc-pos-middle-right,
.gdprc--box.gdprc-pos-bottom-right {
    right: var(--gdprc-margin);
}

.gdprc--box.gdprc-pos-top-center,
.gdprc--box.gdprc-pos-bottom-center {
    left: 50%;
    transform: translateX(-50%);
}

.gdprc--box.gdprc-pos-middle-center {
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Bar: top for top-*, bottom for everything else */

.gdprc--bar.gdprc-pos-top-left,
.gdprc--bar.gdprc-pos-top-center,
.gdprc--bar.gdprc-pos-top-right {
    top: 0;
    border-top: 0;
}

.gdprc--bar.gdprc-pos-middle-left,
.gdprc--bar.gdprc-pos-middle-center,
.gdprc--bar.gdprc-pos-middle-right,
.gdprc--bar.gdprc-pos-bottom-left,
.gdprc--bar.gdprc-pos-bottom-center,
.gdprc--bar.gdprc-pos-bottom-right {
    bottom: 0;
    border-bottom: 0;
}

/* Text */

.gdprc .gdprc__title {
    margin: 0 0 0.35em;
    padding: 0;
    font-size: 1.1em;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.gdprc p {
    margin: 0 0 0.6em;
    padding: 0;
    font-size: 1em;
    line-height: inherit;
    color: inherit;
}

.gdprc .gdprc__note {
    font-weight: 600;
}

.gdprc a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.gdprc .gdprc__policy {
    margin-bottom: 0.9em;
    font-size: 0.93em;
}

/* Buttons */

.gdprc__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6em;
    align-items: center;
}

.gdprc .gdprc__btn,
.gdprc-ph .gdprc__btn {
    appearance: none;
    box-shadow: none;
    margin: 0;
    min-height: 44px;
    padding: 0.55em 1.05em;
    font: inherit;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    text-decoration: none;
    text-shadow: none;
    border: 1px solid var(--gdprc-text);
    border-radius: var(--gdprc-radius);
    background: transparent;
    color: var(--gdprc-text);
    cursor: pointer;
}

.gdprc .gdprc__btn--choice,
.gdprc-ph .gdprc__btn--choice {
    flex: 1 1 auto;
}

.gdprc .gdprc__btn--choice:hover,
.gdprc-ph .gdprc__btn--choice:hover {
    background: var(--gdprc-text);
    color: var(--gdprc-bg);
}

.gdprc .gdprc__btn--primary {
    flex: 1 1 auto;
    background: var(--gdprc-accent);
    border-color: var(--gdprc-accent);
    color: var(--gdprc-accent-text);
}

.gdprc .gdprc__btn--primary:hover {
    opacity: 0.88;
}

.gdprc .gdprc__btn--link {
    border-color: transparent;
    padding-left: 0.4em;
    padding-right: 0.4em;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.gdprc .gdprc__btn--link:hover {
    background: transparent;
    text-decoration-thickness: 2px;
}

.gdprc .gdprc__btn:focus-visible,
.gdprc a:focus-visible,
.gdprc input:focus-visible + .gdprc__cat-text,
.gdprc-reopen:focus-visible,
.gdprc-ph .gdprc__btn:focus-visible {
    outline: 2px solid var(--gdprc-text);
    outline-offset: 2px;
}

/* Choices window */

.gdprc__winhead {
    display: flex;
    align-items: center;
    gap: 0.7em;
    margin: 0 0 0.6em;
}

.gdprc__winhead svg {
    flex: 0 0 auto;
    width: 1.9em;
    height: 1.9em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gdprc__intro {
    margin: 0 0 1em;
}

.gdprc__cats {
    display: grid;
    gap: 0.7em;
    margin: 0 0 1em;
}

.gdprc .gdprc__cat {
    margin: 0;
    padding: 0.8em 0.95em;
    border: 1px solid var(--gdprc-border);
    border-radius: var(--gdprc-radius);
}

.gdprc__cat-head {
    display: flex;
    gap: 0.9em;
    align-items: flex-start;
    justify-content: space-between;
}

.gdprc__cat-text {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
}

.gdprc__cat-title {
    display: block;
    font-weight: 600;
}

.gdprc__cat-flag {
    font-weight: normal;
    opacity: 0.75;
}

.gdprc__cat-desc {
    display: block;
    margin-top: 0.15em;
    font-size: 0.93em;
    opacity: 0.8;
}

.gdprc__count {
    margin-left: 0.6em;
    font-size: 0.87em;
    font-weight: normal;
    opacity: 0.8;
    white-space: nowrap;
}

.gdprc .gdprc__more {
    appearance: none;
    display: inline-block;
    margin: 0.55em 0 0;
    padding: 0.35em 0;
    min-height: 32px;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.93em;
    text-decoration: underline;
    text-underline-offset: 0.15em;
    cursor: pointer;
}

.gdprc__cat--has:not(.gdprc__cat--open) .gdprc__cat-desc {
    display: none;
}

.gdprc__cat--open {
    border-color: var(--gdprc-text);
}

.gdprc__svcs {
    margin: 0.6em 0 0 0.4em;
    padding-left: 1em;
    border-left: 3px solid var(--gdprc-accent);
}

.gdprc__svc {
    padding: 0.7em 0;
    border-bottom: 1px solid var(--gdprc-border);
}

.gdprc__svc:last-child {
    border-bottom: 0;
    padding-bottom: 0.2em;
}

.gdprc__svc-head {
    display: flex;
    gap: 0.9em;
    align-items: center;
    justify-content: space-between;
}

.gdprc__svc-title {
    font-weight: 500;
    font-size: 0.97em;
}

.gdprc__svc-desc {
    margin-top: 0.25em;
    font-size: 0.9em;
    opacity: 0.8;
    overflow-wrap: anywhere;
}

.gdprc__note {
    margin: 0 0 0.9em;
    padding: 0.6em 0.8em;
    border: 1px solid var(--gdprc-accent);
    border-radius: var(--gdprc-radius);
}

.gdprc-win .gdprc__actions {
    position: sticky;
    bottom: 0;
    padding: 0.8em 0 0;
    background: var(--gdprc-bg);
}

.gdprc__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4em 1.2em;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.6em;
}

.gdprc__foot .gdprc__policy {
    margin: 0;
}

/* Switch: a real checkbox, drawn as a switch */

.gdprc .gdprc__switch {
    position: relative;
    display: inline-block;
    flex: 0 0 auto;
    width: 2.8em;
    height: 1.6em;
    margin: 0;
    cursor: pointer;
}

.gdprc .gdprc__switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.gdprc__knob {
    position: absolute;
    inset: 0;
    border: 1px solid var(--gdprc-text);
    border-radius: 1em;
    pointer-events: none;
    transition: background-color 0.15s;
}

.gdprc__knob::after {
    content: "";
    position: absolute;
    top: 0.2em;
    left: 0.2em;
    width: 1.1em;
    height: 1.1em;
    border-radius: 50%;
    background: var(--gdprc-text);
    transition: transform 0.15s, background-color 0.15s;
}

.gdprc__switch input:checked + .gdprc__knob {
    background: var(--gdprc-accent);
    border-color: var(--gdprc-accent);
}

.gdprc__switch input:checked + .gdprc__knob::after {
    transform: translateX(1.2em);
    background: var(--gdprc-accent-text);
}

.gdprc__switch input:focus-visible + .gdprc__knob {
    outline: 2px solid var(--gdprc-text);
    outline-offset: 2px;
}

.gdprc .gdprc__switch--locked,
.gdprc .gdprc__switch--locked input {
    cursor: default;
}

.gdprc .gdprc__switch--locked {
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .gdprc__knob,
    .gdprc__knob::after {
        transition: none;
    }
}

/* Settings button: a small round icon that stays out of the way */

.gdprc-reopen {
    position: fixed;
    z-index: 99997;
    bottom: var(--gdprc-margin);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--gdprc-reopen-size, 40px);
    height: var(--gdprc-reopen-size, 40px);
    margin: 0;
    padding: 0;
    border: 1px solid var(--gdprc-border);
    border-radius: 50%;
    background: var(--gdprc-bg);
    background: color-mix(in srgb, var(--gdprc-bg) 60%, transparent);
    border-color: color-mix(in srgb, var(--gdprc-text) 35%, transparent);
    color: var(--gdprc-text);
    box-shadow: none;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
}

.gdprc-reopen svg {
    width: 55%;
    height: 55%;
    fill: none;
    stroke: var(--gdprc-text);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.gdprc-reopen--left {
    left: var(--gdprc-margin);
}

.gdprc-reopen--right {
    right: var(--gdprc-margin);
}

.gdprc-reopen.gdprc-reopen:hover,
.gdprc-reopen.gdprc-reopen:focus,
.gdprc-reopen.gdprc-reopen:active {
    /* The site's own button:hover rules must not turn the icon invisible. */
    background: var(--gdprc-bg) !important;
    background-image: none !important;
    border-color: var(--gdprc-text) !important;
    color: var(--gdprc-text) !important;
    box-shadow: none !important;
}

.gdprc-reopen.gdprc-reopen:hover svg,
.gdprc-reopen.gdprc-reopen:focus svg,
.gdprc-reopen.gdprc-reopen:active svg {
    stroke: var(--gdprc-text) !important;
    fill: none !important;
}

/* Placeholder for blocked iframes */

.gdprc-ph {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.9em;
    width: 100%;
    margin: 0 0 1em;
    padding: 1.3em;
    background: var(--gdprc-bg);
    border: 1px solid var(--gdprc-border);
    border-radius: var(--gdprc-radius);
}

.gdprc-ph .gdprc-ph__text {
    margin: 0;
    padding: 0;
    font-size: 1em;
    color: inherit;
}

/* Screen reader only */

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

@media (max-width: 560px) {
    .gdprc--box,
    .gdprc--dialog {
        width: calc(100vw - 2 * var(--gdprc-margin));
    }

    .gdprc--box.gdprc-pos-top-left,
    .gdprc--box.gdprc-pos-top-center,
    .gdprc--box.gdprc-pos-top-right,
    .gdprc--box.gdprc-pos-middle-left,
    .gdprc--box.gdprc-pos-middle-center,
    .gdprc--box.gdprc-pos-middle-right,
    .gdprc--box.gdprc-pos-bottom-left,
    .gdprc--box.gdprc-pos-bottom-center,
    .gdprc--box.gdprc-pos-bottom-right {
        top: auto;
        bottom: var(--gdprc-margin);
        left: var(--gdprc-margin);
        right: auto;
        transform: none;
    }

    .gdprc .gdprc__btn--choice,
    .gdprc .gdprc__btn--primary {
        flex: 1 1 100%;
    }
}

@media print {
    .gdprc,
    .gdprc-backdrop,
    .gdprc-reopen {
        display: none !important;
    }
}