// === GDPR BANNER VARIABLES ===

$clementine-quick-access-right: 20px !default;
$clementine-quick-access-bottom: 20px !default;
$clementine-quick-access-left: auto !default;
$clementine-quick-access-radius: 360px !default;
$clementine-quick-access-padding: 12px !default;
$clementine-quick-access-size: 64px !default;
$clementine-icon-bg: var(--white, #FFFFFF) !default;
$clementine-quick-access-icon-url: url("data:image/svg+xml,%3Csvg width='512' height='512' viewBox='0 0 512 512' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M428.363 243.221C424.538 239.36 418.972 238.109 413.629 239.104C410.604 239.667 407.488 239.968 404.298 239.968C387.048 239.968 371.795 231.56 362.319 218.642C360.146 215.68 356.869 213.818 353.321 212.866C315.74 202.775 288.064 168.509 288.064 127.743C288.064 122.726 288.494 117.812 289.31 113.029C290.456 106.31 287.814 99.2891 281.809 96.0641C261.678 85.2521 247.983 64.0171 247.983 39.5661C247.983 33.7191 248.778 28.0631 250.257 22.6891C252.661 13.9511 247.9 7.46807 238.859 8.08407C103.928 17.2741 -1.42912 134.177 8.09888 273.48C16.3539 394.174 112.791 492.797 233.293 503.491C369.001 515.534 484.57 418.385 502.146 290.018C502.93 284.29 498.966 278.932 493.286 277.855C468.127 273.085 445.684 260.702 428.363 243.221Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M344.178 87.6611C357.459 87.6611 368.226 76.8944 368.226 63.6131C368.226 50.3317 357.459 39.5651 344.178 39.5651C330.897 39.5651 320.13 50.3317 320.13 63.6131C320.13 76.8944 330.897 87.6611 344.178 87.6611Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M472.436 215.919C481.29 215.919 488.468 208.741 488.468 199.887C488.468 191.033 481.29 183.855 472.436 183.855C463.582 183.855 456.404 191.033 456.404 199.887C456.404 208.741 463.582 215.919 472.436 215.919Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M95.677 199.887C104.531 199.887 111.709 192.709 111.709 183.855C111.709 175.001 104.531 167.823 95.677 167.823C86.8228 167.823 79.645 175.001 79.645 183.855C79.645 192.709 86.8228 199.887 95.677 199.887Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M264.016 175.838C277.297 175.838 288.064 165.071 288.064 151.79C288.064 138.509 277.297 127.742 264.016 127.742C250.734 127.742 239.968 138.509 239.968 151.79C239.968 165.071 250.734 175.838 264.016 175.838Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M251.992 448.387C263.059 448.387 272.032 439.415 272.032 428.347C272.032 417.279 263.059 408.307 251.992 408.307C240.924 408.307 231.952 417.279 231.952 428.347C231.952 439.415 240.924 448.387 251.992 448.387Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M402.258 119.726C390.371 119.726 379.693 124.9 372.353 133.119C363.137 143.438 370.345 159.806 384.18 159.806H420.432C433.555 159.806 441.545 144.448 433.196 134.323C425.845 125.409 414.715 119.726 402.258 119.726Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M418.694 25.7991C409.157 37.8901 412.442 55.6821 425.255 64.2241L460.505 87.7241C472.82 95.9341 490.034 92.9621 497.665 80.2801C503.034 71.3581 505.582 60.5491 504.068 49.0651C501.266 27.8151 483.834 10.5261 462.564 7.88408C455.898 7.05608 449.462 7.59408 443.497 9.25508' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M103.72 353.621C104.299 370.962 114.443 387.413 130.359 395.246C146.43 403.156 164.136 401.354 177.677 392.692C190.649 384.393 193.375 366.507 184.067 354.238L158.462 320.486C149.516 308.694 132.279 305.863 120.914 315.345C118.129 317.668 115.593 320.319 113.372 323.268' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M372.582 400.243C379.959 399.698 387.274 396.744 393.314 391.156C404.491 380.816 407.371 363.615 400.181 350.193C394.172 338.976 383.202 332.692 371.799 332.093C360.875 331.519 351.901 340.721 352.201 351.656L353.025 381.74C353.313 392.251 362.096 401.017 372.582 400.243Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M190.524 99.208C186.406 93.029 180.212 88.094 172.346 85.574C157.79 80.91 141.333 86.885 133.152 99.796C126.315 110.586 126.239 123.277 131.345 133.54C136.237 143.372 148.71 146.672 158.12 141.011L184.008 125.437C193.053 119.995 196.378 107.99 190.524 99.208Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M313.157 260.414C311.155 252.604 306.581 245.323 299.425 239.916C286.184 229.911 267.175 230.125 254.157 240.418C243.277 249.02 238.642 261.997 240.19 274.347C241.673 286.178 253.269 294.038 264.944 291.616L297.063 284.952C308.284 282.623 316.002 271.515 313.157 260.414Z' stroke='white' stroke-width='15' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") !default;
$clementine-quick-access-icon-size: 32px !default;
$clementine-quick-access-icon-color: #FFFFFF !default;

$clementine-modal-gap: 32px !default;
$clementine-modal-padding: 32px !default;
$clementine-modal-row-gap: 16px !default;
$clementine-modal-control-margin-top: 10px !default;
$clementine-modal-buttons-gap: 16px !default;

$clementine-banner-padding: 30px !default;
$clementine-banner-radius: 8px !default;
$clementine-banner-gap: 16px !default;
$clementine-banner-deny-color: var(--primary-900, #081f29) !default;
$clementine-banner-deny-font-size: 14px !default;
$clementine-banner-buttons-gap: 8px !default;


// === GDPR STYLES ===
html {
    position: relative;
}

body {
    .clementine-backdrop {
        position: absolute;
        display: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1050;

        &.shown {
            display: block;
        }
    }

    .clementine-quick-access {
        right: $clementine-quick-access-right !important;
        bottom: $clementine-quick-access-bottom !important;
        left: $clementine-quick-access-left !important;
        border-radius: $clementine-quick-access-radius !important;
        padding: $clementine-quick-access-padding !important;
        width: $clementine-quick-access-size !important;
        height: $clementine-quick-access-size !important;
        display: none;

        .shown {
            display: block;
        }

        &-ico {
            mask-image: $clementine-quick-access-icon-url;
            mask-repeat: no-repeat;
            mask-size: cover;
            mask-position: center;
            background-color: $clementine-quick-access-icon-color;
            width: $clementine-quick-access-icon-size;
            height: $clementine-quick-access-icon-size;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto;
        }
    }

    .clementine-modal {
        .modal-body {
            display: flex;
            flex-direction: column;
            gap: $clementine-modal-gap;
            padding: $clementine-modal-padding;
            border-radius: $clementine-banner-radius;

            .modal-body-content {
                display: flex;
                flex-direction: column;
                gap: $clementine-modal-row-gap;

                .row {
                    display: flex;
                    gap: $clementine-modal-row-gap;

                    .clementine-control-labels {
                        display: flex;
                        flex-direction: column;

                        .label-description {
                            font-size: 12px;
                        }
                    }

                    .clementine-control-col {
                        display: flex;
                        align-items: flex-start;
                        justify-content: center;
                        margin-top: $clementine-modal-control-margin-top;
                    }
                }
            }

            .modal-buttons-container {
                display: flex;
                justify-content: flex-end;
                gap: $clementine-modal-buttons-gap;
                flex-wrap: nowrap;
                align-items: center;
            }
        }
    }

    .clementine-banner {
        padding: $clementine-banner-padding;
        border-radius: $clementine-banner-radius;

        .container {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            gap: $clementine-banner-gap;

            @media (max-width: 1399.98px) {
                flex-direction: column;
            }
        }

        &__text {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            flex: 2;

            &-title {
                font-size: 20px;
                font-weight: 600;
                line-height: 150%;
                margin-bottom: 4px;
                margin-top: 2px;
            }

            .clementine-deny-all {
                color: $clementine-banner-deny-color !important;
                background: transparent;
                border: none;
                text-decoration: underline;
                margin: 0;
                padding: 0;
                font-size: $clementine-banner-deny-font-size;
            }
        }

        &__buttons {
            display: flex;
            flex-direction: column;
            flex: 1;
            gap: $clementine-banner-buttons-gap;
            width: 100%;
            justify-content: center;


            .clementine-configure {
                padding: 0;
                font-size: 14px;

                &:active {
                    border: none;
                }
            }

            .btn {
                margin: 0;
            }
        }
    }
}

// === GLOBAL / OVERRIDE STYLES ===

.clementine-banner {
    background: #fff;
    border-top: 1px solid #e6e6e6;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    display: none;
    padding: 10px 0;
    position: fixed;
    width: auto;
    z-index: 1051;

    &.shown {
        display: block;
    }

    @media (max-width: 767px) {
        width: 100%;
    }

    .btn {
        margin-bottom: 10px;
    }
}

.clementine-modal > .modal-dialog {
    max-width: 750px;
}

.clementine-modal .clementine-control-col {
    flex-basis: 40px;
    flex-grow: 0;
}

body {
    .clementine-quick-access {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        bottom: 0;
        display: none;
        left: 150px;
        position: fixed;
        z-index: 200;

        &.shown {
            display: block;
        }
    }
}
