/*
 * Termofol look for the self-hosted cookie banner (vanilla-cookieconsent 3.1.0,
 * Magento_Theme::html/consent-banner.phtml).
 *
 * Loaded right after web/cookieconsent/cookieconsent.css, which stays untouched: this sheet sets the
 * library's --cc-* variables on #cc-main (so they win over its :root values) and adjusts a few
 * layout rules. Colours come from the theme's Tailwind tokens (--color-dark, --color-cta,
 * --color-card-border, --color-meta, --color-section-alt), with the same values as fallback.
 *
 * Computer: a small card at the bottom left that slides in. Phone (up to 640px, the library's own
 * breakpoint): a sheet at the bottom of the screen, the two choices side by side.
 * "Akceptuj wszystkie" and "Odrzuć wszystkie" share one style (refusing is as easy as accepting);
 * "Dostosuj" is a text link under them.
 */

#cc-main {
    --tf-cc-dark: var(--color-dark, #1a1e27);
    --tf-cc-cta: var(--color-cta, #c72222);
    --tf-cc-border: var(--color-card-border, #dcdcdc);
    --tf-cc-meta: var(--color-meta, #5f6673);
    --tf-cc-soft: var(--color-section-alt, #f4f8fc);
    --tf-cc-line: color-mix(in srgb, var(--tf-cc-border) 55%, #fff);
    --tf-cc-shadow: 0 1.25rem 3rem -1rem color-mix(in srgb, var(--tf-cc-dark) 38%, transparent),
        0 .25rem .75rem color-mix(in srgb, var(--tf-cc-dark) 8%, transparent);

    --cc-font-family: var(--font-sans, 'Poppins', sans-serif);
    --cc-bg: #fff;
    --cc-primary-color: var(--tf-cc-dark);
    --cc-secondary-color: var(--tf-cc-meta);
    --cc-link-color: var(--tf-cc-dark);
    --cc-modal-border-radius: 1rem;
    --cc-btn-border-radius: .625rem;
    --cc-modal-margin: 1.25rem;

    --cc-btn-primary-bg: var(--tf-cc-dark);
    --cc-btn-primary-color: #fff;
    --cc-btn-primary-border-color: var(--tf-cc-dark);
    --cc-btn-primary-hover-bg: var(--tf-cc-cta);
    --cc-btn-primary-hover-color: #fff;
    --cc-btn-primary-hover-border-color: var(--tf-cc-cta);
    --cc-btn-secondary-bg: #fff;
    --cc-btn-secondary-color: var(--tf-cc-dark);
    --cc-btn-secondary-border-color: var(--tf-cc-border);
    --cc-btn-secondary-hover-bg: #fff;
    --cc-btn-secondary-hover-color: var(--tf-cc-dark);
    --cc-btn-secondary-hover-border-color: var(--tf-cc-dark);

    --cc-separator-border-color: var(--tf-cc-line);
    --cc-toggle-on-bg: var(--tf-cc-dark);
    --cc-toggle-off-bg: var(--tf-cc-meta);
    --cc-toggle-readonly-bg: var(--tf-cc-border);
    --cc-cookie-category-block-bg: var(--tf-cc-soft);
    --cc-cookie-category-block-border: var(--tf-cc-soft);
    --cc-cookie-category-block-hover-bg: color-mix(in srgb, var(--tf-cc-soft) 88%, var(--tf-cc-dark));
    --cc-cookie-category-block-hover-border: color-mix(in srgb, var(--tf-cc-soft) 88%, var(--tf-cc-dark));
    --cc-cookie-category-expanded-block-hover-bg: var(--tf-cc-line);
    --cc-overlay-bg: color-mix(in srgb, var(--color-dark-deep, #12161f) 55%, transparent);
    --cc-webkit-scrollbar-hover-bg: var(--tf-cc-meta);
}

#cc-main .cm__btn:focus-visible,
#cc-main .pm__btn:focus-visible,
#cc-main .pm__close-btn:focus-visible,
#cc-main .section__toggle:focus-visible ~ .toggle__icon,
#cc-main a:focus-visible {
    outline: 2px solid var(--tf-cc-cta);
    outline-offset: 2px;
}

/* --- Banner (first visit) ---------------------------------------------------------------------- */

#cc-main .cm {
    max-width: 25rem;
    border: 1px solid var(--tf-cc-border);
    box-shadow: var(--tf-cc-shadow);
}

#cc-main .cm__texts {
    padding-top: 1.125rem;
}

#cc-main .cm__desc {
    padding: 0 1.125rem .875rem;
    font-size: .8125rem;
    line-height: 1.6;
}

/* The privacy policy link inside the texts: always underlined, not only on hover. */
#cc-main .cm__desc a,
#cc-main .pm__section-desc a {
    color: var(--tf-cc-dark);
    background-size: 100% 1px;
    white-space: nowrap;
}

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

#cc-main .cm__btns {
    border-top: 0;
    padding: 0 1.125rem 1rem;
}

#cc-main .cm__btn {
    min-height: 2.75rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    line-height: 1.25;
}

/* Equal columns: the gap sits between them (a margin would make the second button narrower). */
#cc-main .cm--inline .cm__btn-group {
    column-gap: .5rem;
}

#cc-main .cm--inline .cm__btn + .cm__btn {
    margin-left: 0;
}

/* "Dostosuj": a discreet link centred under the two choices. */
#cc-main .cm__btn-group + .cm__btn-group {
    display: flex;
    justify-content: center;
    margin-top: .375rem;
}

#cc-main .cm__btn[data-role="show"],
#cc-main .cm__btn[data-role="show"]:hover {
    min-height: 0;
    padding: .25rem .5rem;
    background: none;
    border-color: transparent;
    color: var(--tf-cc-meta);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: .2em;
}

#cc-main .cm__btn[data-role="show"]:hover {
    color: var(--tf-cc-dark);
}

@media (prefers-reduced-motion: no-preference) {
    #cc-main {
        --cc-modal-transition-duration: .45s;
    }

    #cc-main .cc--anim .cm,
    #cc-main .cc--anim .pm {
        transition-timing-function: cubic-bezier(.16, 1, .3, 1);
    }
}

/* --- Preferences window ------------------------------------------------------------------------ */

#cc-main .pm {
    border: 1px solid var(--tf-cc-border);
    box-shadow: var(--tf-cc-shadow);
}

/* Narrower than the library's box and only as tall as its content. */
#cc-main .pm--box {
    height: auto;
    max-width: 30rem;
    max-height: min(40rem, calc(100% - 2.5rem));
}

#cc-main .pm__header {
    padding: 1rem 1.25rem;
}

#cc-main .pm__title {
    font-size: 1.0625rem;
}

#cc-main .pm__close-btn {
    width: 2.25rem;
    height: 2.25rem;
    border-color: transparent;
    border-radius: 999px;
    background: var(--tf-cc-soft);
}

#cc-main .pm__body {
    padding: 1rem 1.25rem;
}

#cc-main .pm__section:first-child {
    margin-bottom: 1.25rem;
}

#cc-main .pm__section-title {
    font-size: .875rem;
}

#cc-main .pm__section-desc-wrapper {
    font-size: .8125rem;
}

#cc-main .pm__section-desc {
    line-height: 1.6;
}

#cc-main .pm__section,
#cc-main .pm__section--toggle,
#cc-main .pm__section--toggle .pm__section-title,
#cc-main .pm__section--toggle .pm__section-desc-wrapper {
    border-radius: .75rem;
}

#cc-main .pm__section--toggle.is-expanded .pm__section-title {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#cc-main .pm__section--toggle.is-expanded .pm__section-desc-wrapper {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#cc-main .pm__section--toggle .pm__section-title {
    min-height: 3.25rem;
    padding-top: .875rem;
    padding-bottom: .875rem;
}

#cc-main .pm__footer {
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.25rem;
}

/* Accept all / reject all side by side and equal, "Zapisz wybór" on its own line under them. */
#cc-main .pm__footer .pm__btn-group {
    display: grid;
    grid-auto-columns: minmax(0, 1fr);
    grid-auto-flow: column;
    gap: .5rem;
}

#cc-main .pm__btn + .pm__btn,
#cc-main .pm__btn-group + .pm__btn-group {
    margin: 0;
}

#cc-main .pm__btn {
    min-width: 0;
    min-height: 2.75rem;
    padding: .5rem .875rem;
    font-size: .8125rem;
    line-height: 1.25;
}

/* "ID zgody: …" under "Więcej informacji", filled in by the banner script once a choice exists. */
#cc-main .tf-consent-id {
    display: none;
    margin-top: .75rem;
    font-size: .75rem;
    line-height: 1.5;
    color: var(--tf-cc-meta);
}

#cc-main .tf-consent-id.is-set {
    display: block;
}

/* The ID never breaks in the middle: it moves to the next line as a whole when needed. */
#cc-main .tf-consent-id__value {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    color: var(--tf-cc-dark);
    white-space: nowrap;
    -webkit-user-select: all;
    user-select: all;
}

/* --- Phone: sheets at the bottom of the screen ------------------------------------------------- */

@media screen and (max-width: 640px) {
    #cc-main {
        --cc-modal-margin: 0;
    }

    #cc-main .cm,
    #cc-main .pm {
        right: 0;
        border-width: 1px 0 0;
        border-radius: 1rem 1rem 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -.5rem 2rem color-mix(in srgb, var(--tf-cc-dark) 22%, transparent);
    }

    #cc-main .cm__texts {
        padding-top: 1rem;
    }

    #cc-main .cm .cm__desc {
        max-height: 30vh;
        padding: 0 1rem .75rem !important;
    }

    #cc-main .cm .cm__btns {
        border-top: 0 !important;
        padding: 0 1rem .75rem !important;
    }

    /* The library stacks the buttons on phones: keep the two choices side by side. */
    #cc-main .cm .cm__btn-group {
        flex-direction: row !important;
    }

    #cc-main .cm .cm__btn-group .cm__btn {
        flex: 1 1 0 !important;
    }

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

    #cc-main .cm .cm__btn-group {
        gap: .5rem;
    }

    #cc-main .cm .cm__btn-group + .cm__btn-group {
        justify-content: center;
        margin: .25rem 0 0 !important;
    }

    #cc-main .cm .cm__btn-group + .cm__btn-group .cm__btn {
        flex: 0 0 auto !important;
    }

    /* Preferences: a tall sheet instead of the library's full screen. */
    #cc-main .pm {
        top: auto;
        max-height: 92%;
    }

    #cc-main .pm .pm__header,
    #cc-main .pm .pm__body,
    #cc-main .pm .pm__footer {
        padding: .875rem 1rem !important;
    }

    #cc-main .pm .pm__footer .pm__btn-group {
        display: grid !important;
    }

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

@media screen and (max-width: 640px) and (prefers-reduced-motion: no-preference) {
    #cc-main .cm,
    #cc-main .pm {
        transform: translateY(100%);
    }
}