﻿

.cookies-banner-4-button {
    position: relative;
    background: #fff;
    border: none;
    padding: 0 16px;
    margin: 0;
    color: #aaaaad;
    font-size: 14px;
    box-shadow: 6px 6px 0 0 #222225;
}

@media (max-width:560px) {
    .cookies-banner-4-button {
        height: 24px
    }
}

.cookies-banner-4-button--accent {
    background-color: #fefc4f;
    color: #700000
}

.cookies-banner-4-button__text-highlight {
    display: inline-block
}

    .cookies-banner-4-button__text-highlight:first-letter {
        color: #222225
    }

.cookies-banner-4-button:focus {
    color: #700000
}

.cookies-banner-4-button:hover {
    background-color: #fefc4f;
    cursor: pointer
}

.cookies-banner-4-button:before {
    content: "";
    position: absolute;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px
}

.cookies-banner-4-button:first-letter {
    color: #222225
}

.cookies-banner-4-button_no-highlight:first-letter {
    color: inherit
}

.cookies-banner-4-checkbox {
    position: relative;
    color: #222225;
    font-size: 12px;
}

    .cookies-banner-4-checkbox:nth-of-type(2):after {
        position: absolute;
        content: "";
        top: -7px;
        right: -44px;
        width: 160%;
        height: 127%
    }

    .cookies-banner-4-checkbox:nth-of-type(3):after {
        position: absolute;
        content: "";
        top: -7px;
        right: -13px;
        width: 125%;
        height: 191%
    }

    .cookies-banner-4-checkbox:nth-of-type(4):after {
        position: absolute;
        content: "";
        top: 0;
        right: -8px;
        width: 119%;
        height: 149%
    }

.cookies-banner-4-checkbox__input {
    position: absolute;
    box-sizing: border-box;
    opacity: .01
}

.cookies-banner-4-checkbox__visual-input {
    margin-right: 8px
}

    .cookies-banner-4-checkbox__visual-input:before {
        content: "[ ]"
    }

.cookies-banner-4-checkbox__input:checked ~ .cookies-banner-4-checkbox__visual-input:before {
    content: "[X]"
}

.cookies-banner-4-checkbox:hover {
    color: #700000;
    cursor: pointer
}

.cookies-banner-4-checkbox__input:focus ~ .cookies-banner-4-checkbox__label,
.cookies-banner-4-checkbox__input:focus ~ .cookies-banner-4-checkbox__visual-input {
    color: #700000
}

.cookies-banner-4-checkbox__input:disabled ~ .cookies-banner-4-checkbox__label,
.cookies-banner-4-checkbox__input:disabled ~ .cookies-banner-4-checkbox__visual-input {
    color: #626262
}

.cookies-banner-4 {
    position: fixed;
    z-index: 999999;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    box-shadow: 20px 20px 0 0 rgba(0,0,0,.682);
    box-sizing: border-box;
    width: 570px;
    padding: 7px 5px 5px;
    background-color: var(--primary-color);
    color: #222225;
    font-size: 12px;
    opacity: 1;
    transition: opacity .3s;
    display: none;
}

.cookies-banner-4--hide {
    opacity: 0
}

.cookies-banner-4__sign {
    display: block;
    background-color: #222225;
    color: #fff;
    position: absolute;
    padding: 0 5px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    top: 0;
    white-space: nowrap;
    font-size: 12px;
}

.cookies-banner-4__body {
    position: relative;
    border: 1px solid #222225;
    padding: 2px
}

.cookies-banner-4__section {
    text-align: center;
    padding: 20px 18px;
    border: 1px solid #222225;
    margin-top: 2px;
    font-weight: 700
}

    .cookies-banner-4__section:first-child {
        margin-top: 0
    }

    .cookies-banner-4__section p {
        text-align: center;
        margin: 0;
        padding: 0
    }

    .cookies-banner-4__section a,
    .cookies-banner-4__section p {
        color: #222225;
        font-size: 12px;
    }

    .cookies-banner-4__section a {
        text-decoration: underline;
        border: none
    }

.cookies-banner-4__options-list {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    justify-items: flex-start;
    width: 300px;
    margin-inline: auto
}

.cookies-banner-4__actions {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    margin-inline: auto;
    margin-top: 16px;
    gap: 16px
}

@media (max-width:560px) {
    .cookies-banner-4__actions {
        flex-direction: column;
        gap: 20px;
        width: 100%;
        margin-top: 20px
    }
}

@media (max-width:560px) {
    .cookies-banner-4__action {
        margin-right: 0
    }
}

@media (max-width:640px) {
    .cookies-banner-4 {
        width: 100%
    }
}

.cookies-backdrop {
    position: absolute;
    z-index: 999990;
    width: 100%;
    height: 10000vh;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,.5);
    opacity: 1;
    transition: opacity .3s;
    display: none;
}

.cookies-backdrop--hide {
    opacity: 0
}

.cookies-banner-lock-scroll {
    overflow: hidden
}

.cookies-banner-4__section a:hover {
    background-color: inherit;
}