/*
 * Look of the central cookie consent (library in /main_assets/libs/xs-privacy-ui/) in the public frontend, matched to
 * the rest of the site: Poppins, white cards with rounded-xl + shadow-xl + gray-100 border (like .form-box), buttons like
 * .button (rounded-lg, brand colour from --color-secondary-frontend, brightness on hover). The brand colour is the
 * tenant's, set in styles_loader.php.
 */
#cc-main {
    --cc-font-family: 'Poppins', sans-serif;
    --cc-z-index: 2147483000;
    --cc-modal-margin: 1.25rem;
    --cc-modal-border-radius: .75rem; /* rounded-xl */
    --cc-btn-border-radius: .5rem; /* rounded-lg */
    --cc-pm-toggle-border-radius: 2rem;

    --cc-bg: #fff;
    --cc-primary-color: #1f2937; /* gray-800 */
    --cc-secondary-color: #4b5563; /* gray-600 */
    --cc-link-color: var(--color-secondary-frontend, #b30931);
    --cc-separator-border-color: #f3f4f6; /* gray-100 */
    --cc-overlay-bg: rgba(0, 0, 0, .45);

    /* primary = brand colour, like .button */
    --cc-btn-primary-bg: var(--color-secondary-frontend, #b30931);
    --cc-btn-primary-border-color: var(--color-secondary-frontend, #b30931);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-hover-bg: var(--color-secondary-frontend, #b30931);
    --cc-btn-primary-hover-border-color: var(--color-secondary-frontend, #b30931);
    --cc-btn-primary-hover-color: #fff;

    /* secondary = white with a gray border */
    --cc-btn-secondary-bg: #fff;
    --cc-btn-secondary-border-color: #d1d5db; /* gray-300 */
    --cc-btn-secondary-color: #1f2937;
    --cc-btn-secondary-hover-bg: #f3f4f6; /* gray-100 */
    --cc-btn-secondary-hover-border-color: #d1d5db;
    --cc-btn-secondary-hover-color: #1f2937;

    /* footer (privacy link) is white too */
    --cc-footer-bg: #fff;
    --cc-footer-color: #4b5563;
    --cc-footer-border-color: #f3f4f6;

    --cc-toggle-on-bg: var(--color-secondary-frontend, #b30931);
    --cc-toggle-off-bg: #9ca3af;
    --cc-toggle-readonly-bg: #e5e7eb;

    --cc-cookie-category-block-bg: #f9fafb; /* gray-50 */
    --cc-cookie-category-block-border: #f3f4f6;
    --cc-cookie-category-block-hover-bg: #f3f4f6;
    --cc-cookie-category-block-hover-border: #f3f4f6;
    --cc-cookie-category-expanded-block-bg: #fff;
    --cc-section-category-border: #f3f4f6;
}

/* the banner card: a third wider than the library's 36em (576px -> 768px); on small screens the margins keep it narrower */
#cc-main .cm--box.cm--wide {
    max-width: 48em;
}

/* cards: like .form-box (shadow-xl, gray-100 border) */
#cc-main .cm,
#cc-main .pm {
    border: 1px solid #f3f4f6;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

#cc-main .cm__title,
#cc-main .pm__title {
    font-size: 1.125rem;
    font-weight: 600;
}

#cc-main .cm__desc,
#cc-main .pm__section-desc,
#cc-main .section__desc {
    font-size: .875rem;
    line-height: 1.5;
}

/* buttons: like .button (py-3 px-4, font-medium, shadow-sm, brightness on hover) and more air between them */
#cc-main .cm__btn,
#cc-main .pm__btn {
    min-height: 44px;
    padding: .75rem 1rem;
    font-size: .9375rem;
    font-weight: 500;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: filter .15s ease, background-color .15s ease;
}

#cc-main .cm__btn:hover,
#cc-main .pm__btn:hover {
    filter: brightness(.92);
}

#cc-main .cm__btn-group,
#cc-main .pm__btn-group,
#cc-main .cm__btns,
#cc-main .pm__footer {
    gap: .75rem; /* also between the two groups, which stack on mobile ("Einstellungen" below the other two) */
}

/* the library separates buttons with margins; the gap above replaces them */
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group,
#cc-main .pm__btn + .pm__btn,
#cc-main .pm__btn-group + .pm__btn-group,
#cc-main .cm--bar .cm__btn + .cm__btn,
#cc-main .cm--bar .cm__btn-group + .cm__btn-group {
    margin: 0 !important;
}

/* footer with the privacy link: white, links exactly like the site's footer links (.footer__links a: text-sm,
   regular weight, no underline, hover = brand colour) */
#cc-main .cm__footer,
#cc-main .pm__footer {
    background: #fff;
    border-top: 1px solid #f3f4f6;
    padding: .875rem 1.25rem;
}

#cc-main .cm__footer a,
#cc-main .cm__link-group a,
#cc-main .pm__footer a,
#cc-main .pm__section-desc a {
    font-size: .875rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--cc-secondary-color); /* the colour of the hint text in the modal */
    background-image: none;
    transition: none; /* no animation, like the site's footer links */
}

#cc-main .cm__footer a:hover,
#cc-main .cm__link-group a:hover,
#cc-main .pm__footer a:hover,
#cc-main .pm__section-desc a:hover {
    color: var(--color-secondary-frontend, #b30931);
}

/* cookie table in the settings */
#cc-main .pm__table {
    border-radius: .5rem;
    font-size: .8125rem;
}

/* "Cookie-Einstellungen" link in the footer */
[data-xselia-consent-settings] {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* held back third-party content */
.xselia-consent-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 200px;
    max-width: 100%;
    padding: 24px;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: .75rem;
    color: #374151;
}

.xselia-consent-placeholder button {
    padding: .75rem 1rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
    color: #fff;
    background: var(--color-secondary-frontend, #b30931);
    border: 0;
    border-radius: .5rem;
}

.xselia-consent-placeholder button:hover {
    filter: brightness(.9);
}

/* shown when a form needs the "external" consent (reCAPTCHA) or the library is missing */
.xselia-consent-toast {
    position: fixed;
    top: 16px;
    left: 50%;
    z-index: 2147483001;
    max-width: min(90vw, 480px);
    padding: 12px 16px;
    transform: translateX(-50%);
    font-family: 'Poppins', sans-serif;
    font-size: .875rem;
    color: #fff;
    background: #1f2937;
    border-radius: .5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .15);
}