:root {
    --cookie-banner-background: #356B4B;
    --cookie-banner-color: #fff;
    --cookie-banner-link-color: #fff;
    --cookie-banner-button-border-radius: .25rem;
    --cookie-banner-btn-font-size: .875rem;
    --cookie-banner-btn-background: #fff;
    --cookie-banner-btn-color: #356B4B;
    --cookie-banner-btn-background-hover: #f0f0f0;
    --cookie-banner-btn-color-hover: #2a4d37;
    --cookie-modal-backdrop-baground: rgba(0, 0, 0, 0.5);
    --cookie-modal-border-radius: .25rem;
    --cookie-modal-content-background: #FBFCF7;
    --cookie-modal-header-background: #FBFCF7;
    --cookie-modal-header-color: #000;
    --cookie-modal-body-background: #FBFCF7;
    --cookie-modal-body-color: #000;
    --cookie-modal-footer-background: #FBFCF7;
    --cookie-modal-footer-color: #000;
    --cookie-modal-close-button-background: #FBFCF7;
    --cookie-modal-close-button-background-hover: #f0f0f0;
    --cookie-modal-close-button-color: #000;
    --cookie-modal-close-button-color-hover: #000;
    --cookie-modal-button-border-radius: .25rem;
    --cookie-modal-cookie-categories-font-size: .9rem;
    --cookie-modal-btn-background: #356B4B;
    --cookie-modal-btn-color: #fff;
    --cookie-modal-btn-background-hover: #2E5F43;
    --cookie-modal-btn-color-hover: #fff;
    --cookie-modal-btn-font-size: .875rem;
    --cookie-modal-description-text-color: #656565;
    --category-slider-off-color: #ccc;
    --category-slider-on-color: #ccc;
    --category-slider-off-thumb-color: #fff;
    --category-slider-on-thumb-color: #356B4B;
    --category-providers-background: #e8e5e5;
    --category-toggle-button-background: #FBFCF7;
    --category-toggle-button-hover-background: #f0f0f0;
    --category-toggle-button-color: #356B4B;
    --category-toggle-button-hover-color: #2E5F43;
    --provider-group-separator-color: #fff;
    --provider-toggle-btn-background: #e8e5e5;
    --provider-toggle-btn-hover-background: #d7d7d7;
    --provider-toggle-btn-color: #356B4B;
    --provider-toggle-btn-hover-color: #2E5F43;
    --cookie-item-link-background: #e8e5e5;
    --cookie-item-link-color: #356B4B;
    --cookie-item-link-hover-color: #2E5F43;
}

.cookie-banner {
    font-size: .9rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--cookie-banner-background, #356B4B);
    color: var(--cookie-banner-color, #fff);
    padding-inline: 1rem;
    padding-block: 1rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    gap: .5rem;
    animation: slideUpFromBottom 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

    .cookie-banner .bar-text .title {
        margin: 0;
        padding: 0;
    }

    .cookie-banner .bar-text .policy-link {
        color: var(--cookie-banner-link-color, #fff);
        font-weight: bold;
    }

    .cookie-banner .banner-buttons {
        display: flex;
        flex-direction: column;
        gap: .25rem;
    }

    .cookie-banner .btn {
        font-size: var(--cookie-banner-btn-font-size, .875rem);
        border-radius: var(--cookie-banner-button-border-radius, .25rem);
        padding-inline: .5rem;
        padding-block: .25rem;
        cursor: pointer;
        white-space: nowrap;
        background-color: var(--cookie-banner-btn-background, #fff);
        border-color: var(--cookie-banner-btn-background, #fff);
        color: var(--cookie-banner-btn-color, #356B4B);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        .cookie-banner .btn:hover {
            background-color: var(--cookie-banner-btn-background-hover, #f0f0f0);
            color: var(--cookie-banner-btn-color-hover, #2a4d37);
        }

.cookie-settings-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--cookie-modal-backdrop-baground, rgba(0,0,0,0.5));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.cookie-settings-modal {
    border-radius: var(--cookie-modal-border-radius, .25rem);
    max-height: 95vh;
    overflow: hidden;
    display: flex;
    width: 95vw;
}

    .cookie-settings-modal .modal-content {
        display: flex;
        width: 100%;
        flex-direction: column;
        background: var(--cookie-modal-content-background, #FBFCF7);
    }

    .cookie-settings-modal .modal-header {
        display: flex;
        justify-content: space-between;
        background-color: var(--cookie-modal-header-background, #FBFCF7);
        color: var(--cookie-modal-header-color, #000);
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .cookie-settings-modal .modal-title {
        margin: 0;
        padding-block: .75rem;
        padding-inline: 1rem;
    }

    .cookie-settings-modal .close-button {
        border: none;
        padding-block: .5rem;
        padding-inline: 1rem;
        cursor: pointer;
        background-color: var(--cookie-modal-close-button-background, #FBFCF7);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        .cookie-settings-modal .close-button:hover {
            background-color: var(--cookie-modal-close-button-background-hover, #f0f0f0);
        }

        .cookie-settings-modal .close-button svg {
            width: 1rem;
            height: 1rem;
            fill: var(--cookie-modal-close-button-color, #000);
        }

        .cookie-settings-modal .close-button:hover svg {
            fill: var(--cookie-modal-close-button-color-hover, #000);
        }

    .cookie-settings-modal .modal-body {
        padding-inline: 1rem;
        padding-block: .5rem;
        background-color: var(--cookie-modal-body-background, #FBFCF7);
        color: var(--cookie-modal-body-color, #000);
        overflow-y: auto;
        overflow-x: hidden;
    }

        .cookie-settings-modal .modal-body .modal-text {
            text-align: center;
            margin-top: 0;
            margin-bottom: 1rem;
            font-size: .875rem;
            color: var(--cookie-modal-description-text-color, #656565);
        }

    .cookie-settings-modal .modal-footer {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-block: .5rem;
        padding-inline: .5rem;
        gap: .5rem;
        width: 100%;
        flex-wrap: wrap;
        background-color: var(--cookie-modal-footer-background, #FBFCF7);
        color: var(--cookie-modal-footer-color, #000);
    }

        .cookie-settings-modal .modal-footer .btn {
            font-size: var(--cookie-modal-btn-font-size, .875rem);
            border-radius: var(--cookie-modal-button-border-radius, .25rem);
            padding-inline: .5rem;
            padding-block: .3rem;
            cursor: pointer;
            white-space: nowrap;
            background-color: var(--cookie-modal-btn-background, #356B4B);
            border-color: var(--cookie-modal-btn-background, #356B4B);
            color: var(--cookie-modal-btn-color, #fff);
            transition: background-color 0.3s ease, color 0.3s ease;
        }

            .cookie-settings-modal .modal-footer .btn:hover {
                background-color: var(--cookie-modal-btn-background-hover, #2E5F43);
                color: var(--cookie-modal-btn-color-hover, #fff);
            }

    .cookie-settings-modal .cookie-categories {
        display: flex;
        flex-direction: column;
        gap: .875rem;
        font-size: var(--cookie-modal-cookie-categories-font-size,.9rem);
    }

.cookie-category {
    display: flex;
    flex-direction: column;
    gap: .25em;
}

    .cookie-category .cookie-category-header {
        display: flex;
        width: 100%;
        align-items: center;
        gap: .25em;
    }

    .cookie-category .category-toggle-btn {
        border: none;
        cursor: pointer;
        padding-block: .5em .25em;
        padding-inline: .25em;
        background-color: var(--category-toggle-button-background, #FBFCF7);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

        .cookie-category .category-toggle-btn:hover {
            background-color: var(--category-toggle-button-hover-background, #f0f0f0);
        }

        .cookie-category .category-toggle-btn svg {
            height: 1em;
            width: 1em;
            fill: var(--category-toggle-button-color, #356B4B);
        }

        .cookie-category .category-toggle-btn:hover svg {
            fill: var(--category-toggle-button-hover-color, #2E5F43);
        }

    .cookie-category .category-name {
        font-weight: bold;
    }

    .cookie-category .category-description {
        font-size: .875em;
        padding-inline-start: .5em;
        color: var(--cookie-modal-description-text-color, #656565);
    }

.category-switch {
    position: relative;
    display: inline-block;
    width: 3.125em;
    height: 1.5em;
    margin-left: auto;
}

    .category-switch input {
        opacity: 0;
        width: 0;
        height: 0;
    }

    .category-switch .category-slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--category-slider-off-color, #ccc);
        transition: 0.4s;
        border-radius: 1.5rem;
    }

        .category-switch .category-slider:before {
            position: absolute;
            content: "";
            height: 1.125em;
            width: 1.125em;
            left: 0.1875em;
            bottom: 0.1875em;
            background-color: var(--category-slider-off-thumb-color, #fff);
            transition: 0.4s;
            border-radius: 50%;
        }

    .category-switch input:checked + .category-slider {
        background-color: var(--category-slider-on-color, #ccc);
    }

        .category-switch input:checked + .category-slider:before {
            transform: translateX(1.625em);
            background-color: var(--category-slider-on-thumb-color, #356B4B);
        }

    .category-switch input:disabled {
        opacity: .4;
    }

        .category-switch input:disabled + .category-slider:before {
            opacity: .4;
        }

.cookie-category .category-providers {
    font-size: .875em;
    display: flex;
    flex-direction: column;
    background-color: var(--category-providers-background, #3e8e5e5);
    border-radius: var(--cookie-modal-border-radius, .25rem);
    overflow: hidden;
}

.cookie-category .provider-group {
    display: flex;
    flex-direction: column;
}

    .cookie-category .provider-group:not(:last-child) {
        border-bottom: 1px solid var(--provider-group-separator-color, #fff);
    }

.provider-group .provider-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline-start: 1em;
}

.provider-header .provider-name {
    font-weight: bold;
}

.provider-header .provider-toggle-btn {
    border: none;
    cursor: pointer;
    padding-block: .5em;
    padding-inline: .75em;
    background-color: var(--provider-toggle-btn-background,#e8e5e5);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .provider-header .provider-toggle-btn:hover {
        background-color: var(--provider-toggle-btn-hover-background,#d7d7d7);
    }

    .provider-header .provider-toggle-btn svg {
        height: 1em;
        width: 1em;
        fill: var(--provider-toggle-btn-color,#356B4B);
    }

    .provider-header .provider-toggle-btn:hover svg {
        fill: var(--provider-toggle-btn-hover-color,#2E5F43);
    }

.provider-group .cookie-items {
    font-size: .875em;
    display: flex;
    flex-direction: column;
    padding-inline: 1.5em;
    padding-block-end: .5em;
    gap: .5em;
}

.cookie-items .cookie-item {
    display: grid;
    grid-template-columns: minmax(20px, 1.5fr) minmax(10px, 0.8fr) minmax(10px, 0.8fr) minmax(20px, 1fr) minmax(5px, 0.3fr);
    align-items: center;
    column-gap: 1.25em;
    text-align: center;
}

.cookie-items .cookie-item-name {
    word-break: break-all;
    text-align: start;
}

.cookie-items .cookie-item-link {
    text-align: end;
    background: var(--cookie-item-link-background, #e8e5e5);
    transition: background-color 0.3s ease, color 0.3s ease;
}

    .cookie-items .cookie-item-link svg {
        width: 1.4em;
        height: 1.4em;
        fill: var(--cookie-item-link-color, #356B4B);
    }

    .cookie-items .cookie-item-link:hover svg {
        fill: var(--cookie-item-link-hover-color, #2E5F43);
        transform: scale(1.1);
    }

@keyframes slideUpFromBottom {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media(min-width:576px) {
    .cookie-banner {
        flex-direction: row;
        gap: 3rem;
    }
}

@media(min-width:992px) {
    .cookie-settings-modal {
        width: 70vw;
    }
}

@media(min-width:1200px) {
    .cookie-settings-modal {
        width: 60vw;
    }
}

@media(min-width:1400px) {
    .cookie-settings-modal {
        width: 50vw;
    }
}