.cookies-dialog {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    border: none;
    pointer-events: none;
    z-index: 999;
}

.cookies-alert {
    background-color: var(--theme-color-white);
    padding: var(--theme-space-padding-mobile);
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    box-shadow: 0 -1px 10px 0 rgba(172, 171, 171, 0.3);
    pointer-events: auto;
    z-index: 1000;

    .info-title {
        margin: 0 0 0.8rem 0;
    }

    .cookies-alert__info-buttons {
        margin: 2.4rem 0 0 0;

        @media (min-width: 1024px) {
            display: flex;
            flex-wrap: wrap;
        }

        & > * {
            margin: 0.8rem 0 0 0;

            @media (min-width: 1024px) {
                margin: 0.8rem 0.8rem 0 0;
            }
            &:last-child {
                margin-right: 0rem;
            }
        }
    }

    @media (min-width: 1024px) {
        .cookies-alert__info {
            display: flex;
            flex-direction: row;
            margin: 0 0 0 -1.6rem;
            & > * {
                padding: 0 0 0 1.6rem;
            }
        }
        .cookies-alert__info-description {
            flex: 0 1 100%;
        }
        .cookies-alert__info-buttons {
            flex: 0 0 auto;
            margin: 0;
            & > * {
                margin-top: 0rem;
            }
        }
    }
}

.popup-body__cookies {
    .accordion__cookies {
        margin: 0 0 0.8rem 0;
        border-radius: 0.3rem;
        border: 0.1rem solid var(--theme-color-black-050);
    }
    .description-body__cookies {
        margin: 0 0 1.6rem 0;
    }
    .accordion-body__cookies {
        padding: 1.6rem;
    }
}
.popup-footer__cookies {
    .button-footer__cookies {
        text-align: end;
    }
}

/* ===== Modal Styles ===== */

#modal-cookies {
    --space-padding-modal-popup: 0.8rem;
    --space-margin-modal-container-popup: 1.6rem;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background-color: transparent;
    border: none;
    z-index: 1001;
    pointer-events: auto;
    box-sizing: border-box;
}

#modal-cookies.modal-overlay {
    background-color: var(--theme-color-overlay-popup, rgba(0, 0, 0, 0.5));
    padding: 0 1.6rem;
}

#modal-cookies.modal-overlay .modal-container {
    display: flex;
    width: 100%;
    height: auto;
    min-height: calc(100% - (var(--space-margin-modal-container-popup) * 2));
    margin: var(--space-margin-modal-container-popup) 0;
}

#modal-cookies.modal-overlay .modal-container .modal-content-popup {
    border-radius: 0.3rem;
    background-color: var(--theme-color-white);
    width: 100%;
    margin: auto;
}

@media (min-width: 1024px) {
    #modal-cookies.modal-overlay .modal-container .modal-content-popup {
        max-width: 80rem;
    }
}

#modal-cookies.modal-overlay .modal-container .modal-content-popup .popup-header {
    display: flex;
    align-items: center;
    padding: var(--space-padding-modal-popup);
    border-bottom: 0.1rem solid #e9ecef;
}

#modal-cookies.modal-overlay .modal-container .modal-content-popup .popup-header p {
    margin: 0;
    flex: 1;
}

#modal-cookies.modal-overlay .modal-container .modal-content-popup .popup-header #config-modal {
    position: relative;
    margin: 0 0 0 auto;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.6rem;
    padding: 0.4rem;
    line-height: 1;
}

#modal-cookies.modal-overlay .modal-container .modal-content-popup .popup-body-wrapper {
    border-top: 0.1rem solid #e9ecef;
    padding: var(--space-padding-modal-popup);
}

#modal-cookies.modal-overlay .modal-container .modal-content-popup .popup-footer-wrapper {
    border-top: 0.1rem solid #e9ecef;
    padding: var(--space-padding-modal-popup);
    display: flex;
    justify-content: flex-end;
}

@media (min-width: 1024px) {
    #modal-cookies {
        --space-padding-modal-popup: 1.6rem 3.2rem;
        --space-margin-modal-container-popup: 3.2rem;
    }
}

/* Accordion Styles */
.accordion__cookies {
    display: block;
    background-color: var(--color-background-accordion, #f8f9fa);
    border: none;
}

.accordion__cookies summary {
    background-color: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 1.6rem var(--theme-space-padding-mobile, 1.6rem);
    display: flex;
    width: 100%;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--color-text-accordion, #333);
    font-size: 1.6rem;
    line-height: 2.1rem;
    font-weight: 500;
    user-select: none;
}

.accordion__cookies summary::after {
    content: '\e90f';
    font-family: 'catalunya-icons';
    position: absolute;
    right: 1.6rem;
    transition: transform 0.3s ease;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.accordion__cookies[open] summary::after {
    transform: rotate(180deg);
}

.accordion__cookies[open] summary {
    background-color: var(--color-background-accordion-expanded, #e9ecef);
}

.accordion-header {
    list-style: none;
}

.accordion-header::-webkit-details-marker {
    display: none;
}

/* Checkbox Styles */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    margin-bottom: 1.6rem;
    cursor: pointer;
}

.checkbox-input {
    width: 1.8rem;
    height: 1.8rem;
    margin-right: 0.8rem;
    cursor: pointer;
}

.checkbox-content {
    cursor: pointer;
}