/* pr-tracking — the consent dialog in PlanRadar's look, laid out like the CookieFirst banner it
 * replaces: centered over a dimmed page, the privacy policy link top right, settings in category
 * cards, afterwards a round fingerprint button bottom left. Both layers keep one width and one
 * button layout, CookieFirst's settings footer; on the first layer reject stays filled like accept
 * (as the Austrian authority expects). Where nothing is asked, a notice bar at the
 * bottom instead, in the same look. Colors and radii are the .ai ones (B07): ink #003264,
 * text #3C4650, blue #0064C8, 16px cards, 8px controls. */

#cc-main {
    --prtr-ink: #003264;
    --prtr-text: #3c4650;
    --prtr-muted: #64748b;
    --prtr-line: #e2e8f0;
    --prtr-tint: #f0f7ff;
    --prtr-blue: #0064c8;
    --prtr-blue-hover: #0055aa;
    --prtr-blue-active: #004488;
    --prtr-outline: #b1b5b9;
    --prtr-gradient: linear-gradient(269.49deg, #0064c8 -9.84%, #20bdff 39.64%, #68eba0 71.49%, #fffb29 108.21%);

    --cc-font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    --cc-bg: #ffffff;
    --cc-primary-color: var(--prtr-ink);
    --cc-secondary-color: var(--prtr-text);
    --cc-btn-primary-bg: var(--prtr-blue);
    --cc-btn-primary-color: #ffffff;
    --cc-btn-primary-border-color: var(--prtr-blue);
    --cc-btn-primary-hover-bg: var(--prtr-blue-hover);
    --cc-btn-primary-hover-color: #ffffff;
    --cc-btn-primary-hover-border-color: var(--prtr-blue-hover);
    --cc-btn-secondary-bg: #ffffff;
    --cc-btn-secondary-color: var(--prtr-blue);
    --cc-btn-secondary-border-color: var(--prtr-blue);
    --cc-btn-secondary-hover-bg: var(--prtr-tint);
    --cc-btn-secondary-hover-color: var(--prtr-blue-hover);
    --cc-btn-secondary-hover-border-color: var(--prtr-blue-hover);
    --cc-separator-border-color: var(--prtr-line);
    --cc-toggle-on-bg: var(--prtr-blue);
    --cc-toggle-off-bg: #94a3b8;
    --cc-toggle-on-knob-bg: #ffffff;
    --cc-toggle-off-knob-bg: #ffffff;
    --cc-toggle-enabled-icon-color: var(--prtr-blue);
    --cc-toggle-disabled-icon-color: #94a3b8;
    --cc-toggle-readonly-bg: #9ec2e6;
    --cc-toggle-readonly-knob-bg: #ffffff;
    --cc-toggle-readonly-knob-icon-color: #9ec2e6;
    --cc-section-category-border: var(--prtr-line);
    --cc-cookie-category-block-bg: #ffffff;
    --cc-cookie-category-block-border: var(--prtr-line);
    --cc-cookie-category-block-hover-bg: var(--prtr-tint);
    --cc-cookie-category-block-hover-border: #bfdbfe;
    --cc-cookie-category-expanded-block-bg: #ffffff;
    --cc-cookie-category-expanded-block-hover-bg: var(--prtr-tint);
    --cc-overlay-bg: rgba(0, 50, 100, 0.3);
    --cc-link-color: var(--prtr-blue);
    --cc-footer-bg: #ffffff;
    --cc-footer-color: var(--prtr-muted);
    --cc-footer-border-color: var(--prtr-line);
    --cc-modal-border-radius: 16px;
    --cc-btn-border-radius: 8px;
    --cc-pm-toggle-border-radius: 12px;
    --cc-modal-margin: 16px;
    --cc-z-index: 2147483000;
}

/* The brand line on top of both dialogs, as on the .ai cards, running endlessly like a loading
 * bar: the gradient mirrored into one tile twice the bar's width, shifted by exactly one tile per
 * loop so the seam never shows. Still for visitors who ask for reduced motion. */
#cc-main .cm::before,
#cc-main .pm::before {
    content: '';
    display: block;
    flex: none;
    height: 6px;
    background: linear-gradient(90deg, #0064c8 0%, #20bdff 22%, #68eba0 36%, #fffb29 50%, #68eba0 64%, #20bdff 78%, #0064c8 100%) 0 0 / 200% 100% repeat-x;
    animation: prtr-bar 3s linear infinite;
}

@keyframes prtr-bar {
    to {
        background-position: -200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    #cc-main .cm::before,
    #cc-main .pm::before {
        animation: none;
        background: var(--prtr-gradient);
    }
}

#cc-main .cm,
#cc-main .pm {
    border: 1px solid var(--prtr-line);
    box-shadow: 0 24px 64px rgba(0, 50, 100, 0.22), 0 2px 8px rgba(0, 50, 100, 0.08);
}

/* One dialog and one dimmed backdrop at a time: while the settings are open, the banner and its
 * backdrop step aside (as on CookieFirst); closing the settings brings the banner back. */
html.show--preferences #cc-main .cm-wrapper::before,
html.show--preferences #cc-main .cm {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Consent dialog. Both layers share one width, so opening the settings keeps the size. */
#cc-main .cm--box,
#cc-main .pm--box {
    max-width: 30em;
}

#cc-main .cm__texts {
    padding: 28px 32px 0;
}

#cc-main .prtr-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 20px;
    margin-bottom: 12px;
}

#cc-main .cm .cm__title {
    margin: 0;
    padding: 0 !important;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--prtr-ink);
}

#cc-main .prtr-head__link {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--prtr-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#cc-main .prtr-head__link:hover {
    color: var(--prtr-blue-hover);
}

#cc-main .cm .cm__desc {
    padding: 0 0 4px !important;
    font-size: 15px;
    line-height: 1.6;
    color: var(--prtr-text);
}

/* Legal's three paragraphs (the description is a single <p>). */
#cc-main .prtr-par {
    display: block;
}

#cc-main .prtr-par + .prtr-par {
    margin-top: 12px;
}

#cc-main .cm__desc strong,
#cc-main .pm__section-desc strong {
    font-weight: 700;
    color: var(--prtr-ink);
}

#cc-main .cm .cm__btns {
    gap: 10px;
    padding: 20px 32px 28px;
    border-top: 0 !important;
}

/* CookieFirst's settings footer on both layers: "Accept all" across the full width, two buttons
 * side by side below it, filled left, outlined right. The script moves them there: on the first
 * layer "Only Necessary Cookies" and "Change settings", in the settings "Save settings" and
 * "Deny". */
#cc-main .cm .cm__btn-group,
#cc-main .pm .pm__btn-group {
    display: grid !important;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: 10px;
}

#cc-main .cm .cm__btn + .cm__btn,
#cc-main .cm .cm__btn-group + .cm__btn-group,
#cc-main .pm .pm__btn + .pm__btn,
#cc-main .pm .pm__btn-group + .pm__btn-group {
    margin: 0 !important;
}

/* CookieFirst's size: 32px high, 14px regular text. */
#cc-main .cm__btn,
#cc-main .pm__btn {
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 6px 14px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
}

#cc-main .cm__btn:active,
#cc-main .pm__btn:active {
    background: var(--prtr-blue-active);
    border-color: var(--prtr-blue-active);
}

#cc-main .cm__btn--secondary:active,
#cc-main .pm__btn--secondary:active {
    background: #e1ecf8;
    border-color: var(--prtr-blue);
}

/* Settings dialog */
#cc-main .pm__header {
    gap: 16px;
    padding: 22px 24px 18px 32px;
}

#cc-main .pm__title {
    flex: 1;
    font-size: 22px;
    font-weight: 900;
    line-height: 1.25;
    color: var(--prtr-ink);
}

/* At 30em the notice link gets its own line under the title and the close button. */
#cc-main .pm__header {
    flex-wrap: wrap;
}

#cc-main .pm__header .prtr-head__link {
    order: 3;
    flex-basis: 100%;
}

#cc-main .pm__close-btn {
    flex: none;
    width: 40px;
    height: 40px;
    border: 1px solid var(--prtr-outline);
    border-radius: 8px;
    background: #ffffff;
}

#cc-main .pm__close-btn:hover {
    border-color: var(--prtr-blue);
    background: var(--prtr-tint);
}

#cc-main .pm__body {
    padding: 20px 32px;
}

#cc-main .pm__section-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--prtr-ink);
}

#cc-main .pm__section-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--prtr-text);
}

#cc-main .pm__section-desc a,
#cc-main .cm__desc a {
    font-weight: 700;
    color: var(--prtr-blue);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

#cc-main .pm__section-desc a:hover,
#cc-main .cm__desc a:hover {
    color: var(--prtr-blue-hover);
}

#cc-main .pm__footer {
    flex-direction: column;
    gap: 10px;
    padding: 18px 32px 24px;
}

/* Keyboard focus on every control */
#cc-main button:focus-visible,
#cc-main a:focus-visible,
#cc-main .section__toggle:focus-visible + .toggle__icon {
    outline: 3px solid var(--prtr-blue);
    outline-offset: 2px;
    box-shadow: 0 0 0 1px #ffffff;
}

/* Phones: both dialogs keep the same insets, over the vendor's own (set with !important). */
@media (max-width: 640px) {
    #cc-main .cm__texts {
        padding: 22px 20px 0;
    }

    #cc-main .cm .cm__btns {
        padding: 16px 20px 20px !important;
    }

    #cc-main .cm__title,
    #cc-main .pm__title {
        font-size: 20px;
    }

    #cc-main .pm__header {
        padding: 16px 16px 14px 20px !important;
    }

    #cc-main .pm__body {
        padding: 16px 20px !important;
    }

    #cc-main .pm__footer {
        padding: 14px 20px 20px !important;
    }

    /* The settings stay a card as wide as the banner, instead of the vendor's full screen. */
    #cc-main .pm {
        top: var(--cc-modal-margin);
        right: var(--cc-modal-margin);
        bottom: var(--cc-modal-margin);
        left: var(--cc-modal-margin);
        max-height: none;
        border-radius: var(--cc-modal-border-radius);
    }
}

/* Privacy settings button, bottom left in every language, after a choice (and always outside the
 * opt-in countries): the round button with a fingerprint, as visitors know it from CookieFirst. */
.prtr-privacy-btn {
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 2147482999;
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    padding: 0;
    color: #ffffff;
    background: #0064c8;
    border: 0;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(0, 50, 100, 0.28);
    cursor: pointer;
}

.prtr-privacy-btn svg {
    width: 32px;
    height: 32px;
    fill: currentColor;
}

.prtr-privacy-btn:hover {
    background: #0055aa;
}

.prtr-privacy-btn:active {
    background: #004488;
}

.prtr-privacy-btn:focus-visible {
    outline: 3px solid #0064c8;
    outline-offset: 3px;
}

@media print {
    .prtr-privacy-btn {
        display: none;
    }
}

/* Notice where everything runs by default: a card along the bottom edge in the dialog's look
 * (brand line on top, same buttons), no backdrop, so the page stays usable. On phones the text
 * sits above the two buttons. */
.prtr-notice {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 2147482999;
    display: flex;
    align-items: center;
    gap: 16px 32px;
    box-sizing: border-box;
    max-width: 1000px;
    margin: 0 auto;
    padding: 24px 24px 20px 28px;
    overflow: hidden;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    color: #3c4650;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0, 50, 100, 0.22), 0 2px 8px rgba(0, 50, 100, 0.08);
}

.prtr-notice::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(269.49deg, #0064c8 -9.84%, #20bdff 39.64%, #68eba0 71.49%, #fffb29 108.21%);
}

.prtr-notice__text {
    flex: 1 1 auto;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3c4650;
}

.prtr-notice__link {
    font-weight: 700;
    color: #0064c8;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.prtr-notice__link:hover {
    color: #0055aa;
}

.prtr-notice__btns {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    flex: none;
    gap: 12px;
}

.prtr-notice__btn {
    min-width: 110px;
    min-height: 32px;
    margin: 0;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    color: #ffffff;
    background: #0064c8;
    border: 1px solid #0064c8;
    border-radius: 8px;
    cursor: pointer;
}

.prtr-notice__btn:hover {
    background: #0055aa;
    border-color: #0055aa;
}

.prtr-notice__btn:active {
    background: #004488;
    border-color: #004488;
}

.prtr-notice__btn--secondary {
    color: #0064c8;
    background: #ffffff;
    border-color: #0064c8;
}

.prtr-notice__btn--secondary:hover {
    color: #0055aa;
    background: #f0f7ff;
    border-color: #0055aa;
}

.prtr-notice__btn--secondary:active {
    background: #e1ecf8;
    border-color: #0064c8;
}

.prtr-notice__btn:focus-visible,
.prtr-notice__link:focus-visible {
    outline: 3px solid #0064c8;
    outline-offset: 2px;
}

@media (max-width: 760px) {
    .prtr-notice {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 20px 20px;
    }

    .prtr-notice__btn {
        min-width: 0;
    }
}

@media print {
    .prtr-notice {
        display: none;
    }
}

/* In place of a YouTube player that waits for functional consent: the provider, why it waits, and
 * the settings. Fills the player's box; small boxes get smaller text. The text and button rules
 * sit one class deeper than theme rules such as `.b06 .video-w-button button`, and the button
 * resets what themes commonly set on buttons inside video boxes. */
.prtr-embed-note {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    padding: 16px;
    overflow: hidden;
    font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
    text-align: center;
    background: #f0f7ff;
    border: 1px solid #e2e8f0;
    container-type: inline-size;
}

.prtr-embed-note .prtr-embed-note__text {
    display: block;
    max-width: 30em;
    margin: 0;
    padding: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #3c4650;
}

.prtr-embed-note .prtr-embed-note__btn[type] {
    position: static;
    z-index: auto;
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    min-height: 44px;
    margin: 0;
    padding: 10px 18px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: normal;
    text-transform: none;
    color: #003264;
    background: #ffffff;
    border: 1px solid #b1b5b9;
    border-radius: 8px;
    box-shadow: none;
    cursor: pointer;
}

.prtr-embed-note .prtr-embed-note__btn[type]::before,
.prtr-embed-note .prtr-embed-note__btn[type]::after {
    content: none;
}

.prtr-embed-note .prtr-embed-note__btn[type]:hover {
    background: #f0f7ff;
    border-color: #0064c8;
}

.prtr-embed-note .prtr-embed-note__btn[type]:focus-visible {
    outline: 3px solid #0064c8;
    outline-offset: 2px;
}

@container (max-width: 320px) {
    .prtr-embed-note .prtr-embed-note__text {
        font-size: 13px;
    }

    .prtr-embed-note .prtr-embed-note__btn[type] {
        min-height: 40px;
        padding: 8px 14px;
        font-size: 14px;
    }
}

/* CookieFirst's video placeholder in the .com theme: its CSS shows it while the player waits for
   consent (iframe without src); once the player loads it must not cover it. */
.cookiefirst-disabled-resource {
    display: none;
}