/* GDPR cookie banner and settings modal (ID-7239).
   Self-contained on purpose: the same markup is rendered inside the website,
   checkout and business layouts, and the business cabinet shares no stylesheet
   with the storefront. Everything is namespaced so Bootstrap's .btn cannot
   reach it. */

.cookie-banner,
.cookie-modal {
    /* One card, two states: the banner and the dialog share width and inset by design */
    --cookie-card-width: 41.875rem;
    font-family: FixelDisplay, Montserrat, sans-serif;
    color: var(--dark-violet, #210529);
}

.cookie-banner *,
.cookie-modal * {
    box-sizing: border-box;
}

.cookie-modal[hidden],
.cookie-category__description[hidden] {
    display: none;
}

/* Banner. Hidden until the runtime has read the consent cookie and asked for it: the
   markup is rendered for every visitor, so its visibility cannot be decided server-side
   without serving one visitor's choice to the next. */

.cookie-banner {
    display: none;
}

.cookie-banner_visible {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 2200000001;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    box-sizing: border-box;
    width: var(--cookie-card-width);
    max-width: calc(100vw - 4rem);
    padding: 1.75rem;
    border-radius: 1.5rem;
    background-color: var(--white, #fff);
    box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .12);
}

.cookie-banner__text {
    display: flex;
    flex-direction: column;
    gap: .75rem;
    max-height: 50vh;
    overflow-y: auto;
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--fade-violet-3, #4d3754);
    /* Same look as .simplebar-track.simplebar-vertical (see style.css): thin gray thumb */
    scrollbar-width: thin;
    scrollbar-color: #d9d9d9 transparent;
}

.cookie-banner__text::-webkit-scrollbar {
    width: 8px;
}

.cookie-banner__text::-webkit-scrollbar-track {
    margin: 12px 0;
    background: transparent;
}

.cookie-banner__text::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 2px;
}

.cookie-banner__text strong {
    font-weight: 600;
    line-height: 1.35;
    color: var(--dark-violet, #210529);
}

.cookie-banner__text a {
    color: var(--electric-blue, #1167FC);
    text-decoration: underline;
}
.cookie-banner__text a:hover {
    color: var(--violet, #6c0089);
}

.cookie-banner__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Modal */

.cookie-modal {
    position: fixed;
    inset: 0;
    z-index: 2200000002;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 2rem;
}

.cookie-modal__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--dark-violet-opacity, rgba(33, 5, 41, .5));
}

.cookie-modal__dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: var(--cookie-card-width);
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    /* No right padding here: the scroll area supplies its own, so its scrollbar
       lands flush against the dialog wall instead of inset with the content. */
    padding: 2rem 0 2rem 2rem;
    border-radius: 1.5rem;
    background-color: var(--white, #fff);
    box-shadow: 0 .25rem 2.5rem rgba(0, 0, 0, .1);
}

/* Scrolling starts below the title, not at the dialog's own rounded top corner —
   so the thumb's own rounded ends sit clear of it and are visible on their own,
   with no corner to clip against. */
.cookie-modal__scroll {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-right: 2rem;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: #d9d9d9 transparent;
}

.cookie-modal__scroll::-webkit-scrollbar {
    width: 8px;
}

.cookie-modal__scroll::-webkit-scrollbar-track {
    background: transparent;
}

.cookie-modal__scroll::-webkit-scrollbar-thumb {
    background-color: #d9d9d9;
    border-radius: 2px;
}

.cookie-modal__title {
    flex: 0 0 auto;
    margin: 0;
    padding-right: 2rem;
    font-size: 1.4375rem;
    font-weight: 500;
    line-height: 1.17;
    color: #000000;
}

.cookie-modal__subtitle {
    font-size: .9375rem;
    font-weight: 500;
    line-height: 1.35;
    color: var(--dark-violet);
}

.cookie-modal__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cookie-modal__actions {
    margin-top: 2.2rem;
    display: flex;
    gap: .75rem;
}

/* Category rows — the list grows with the config, so nothing here is per-category */

.cookie-category + .cookie-category {
    border-top: 1px solid var(--gray-2, #ebebeb);
}
.cookie-category {
    padding-bottom: 0.5rem;
}

.cookie-category__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .875rem 0 .375rem;
   }

.cookie-category__summary {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 1 1 auto;
    min-width: 0;
    padding: 0;
    border: 0;
    background: none;
    text-align: left;
    color: var(--dark-violet);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.cookie-category__title {
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.39;
}

.cookie-category__chevron {
    flex: 0 0 auto;
    width: .5rem;
    height: .5rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .2s ease;
}

.cookie-category__summary[aria-expanded="true"] .cookie-category__chevron {
    transform: rotate(45deg);
}

.cookie-category__description {
    padding: 0 3.75rem 1rem 1.25rem;
    font-size: .8125rem;
    font-weight: 500;
    line-height: 1.2;
    color: var(--fade-violet-2, #7A697F);
    overflow-wrap: anywhere;
}

/* Switch */

.cookie-switch {
    position: relative;
    flex: 0 0 auto;
    width: 2.75rem;
    height: 1.5rem;
    padding: 0;
    border: 0;
    border-radius: .75rem;
    background-color: var(--gray-1, #f2f2f2);
    cursor: pointer;
    transition: background-color .2s ease;
}

.cookie-switch__knob {
    position: absolute;
    top: .1875rem;
    left: .1875rem;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background-color: var(--fade-violet-1, #9e93a2);
    transition: transform .2s ease, background-color .2s ease;
}

.cookie-switch[aria-checked="true"] {
    background-color: var(--dark-violet, #210529);
}

.cookie-switch[aria-checked="true"] .cookie-switch__knob {
    background-color: var(--white, #fff);
    transform: translateX(1.25rem);
}

.cookie-switch:disabled {
    cursor: not-allowed;
}

/* Buttons — equal weight is a requirement, so only the fill differs */

.cookie-btn {
    flex: 1 1 0;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5rem;
    padding: 0 1.5rem;
    border: 1px solid transparent;
    border-radius: 1.5rem;
    font-family: 'FixelDisplay', sans-serif;
    font-size: .8125rem;
    font-weight: 500;
    font-style: normal;
    line-height: 9px;
    letter-spacing: 0;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: background-color .3s ease, color .3s ease;
}

.cookie-btn_primary {
    background-color: var(--violet, #6c0089);
    color: var(--white, #fff);
}

.cookie-btn_primary:hover {
    background-color: var(--dark-violet, #210529);
}

.cookie-btn_outline {
    border-color: var(--violet, #6c0089);
    background-color: var(--white, #fff);
    color: var(--violet, #6c0089);
}

.cookie-btn_outline:hover {
    background-color: var(--violet, #6c0089);
    color: var(--white, #fff);
}

.cookie-btn_gray {
    background-color: var(--gray-2, #EBEBEB);
    color: var(--dark-violet, #210529);
}

.cookie-btn_gray:hover {
    background-color: var(--dark-violet, #210529);
    color: var(--white, #fff);
}

.cookie-banner :focus-visible,
.cookie-modal :focus-visible {
    outline: 2px solid var(--violet, #6c0089);
    outline-offset: 2px;
}

/* Tablet and below: one full-width card, pinned by its insets instead of a width */
@media (max-width: 62.06125em) {
    .cookie-banner {
        left: 2rem;
        width: auto;
        max-width: none;
    }

    .cookie-modal__dialog {
        width: 100%;
    }
}

@media (max-width: 48.06125em) {
    .cookie-banner {
        right: .625rem;
        bottom: .625rem;
        left: .625rem;
        gap: 1rem;
        padding: 1.25rem;
    }

    .cookie-banner__actions,
    .cookie-modal__actions {
        flex-direction: column;
    }

    .cookie-modal {
        padding: .625rem;
    }

    .cookie-modal__dialog {
        max-height: calc(100vh - 1.25rem);
        padding: 1.25rem 0 1.25rem 1.25rem;
    }

    .cookie-modal__scroll,
    .cookie-modal__title {
        padding-right: 1.25rem;
    }

    .cookie-modal__title {
        font-size: 1.25rem;
    }

    .cookie-category__description {
        padding-right: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner *,
    .cookie-modal * {
        transition: none;
    }
}