:root{
    --cookie-box-boxshadow: 0 10px 30px rgba(0, 0, 0, .25);
    --cookie-box-background: #FAFAFA;
    --cookie-box-color: #30363c;
    --cokie-accept-background: #30363c;
    --cokie-accept-color: #fff;
    --cokie-accept-border-color: #fff;
    --cokie-reject-color: #30363c;
    --cokie-reject-border: 1px solid #666;
    --cookie-settings-btn-backGround: #91919138;
    --svg-cookie__baner-fill: #323232;
     --svg-cookie__button-fill: #30363c;
}


#cookie-banner[hidden] {
    display: none;
}

#cookie-banner {
    position: absolute;
    left: calc(50% - 250px);
    bottom: 30px;
    z-index: 10;
    font-family: Arial, sans-serif;
    width: 500px;
}

.cookie-box {
    max-width: 760px;
    margin: 0 auto;
    background: var(--cookie-box-background);
    color: var(--cookie-box-color);
    border-radius: 12px;
    padding: 8px 16px 16px 16px;
    box-shadow: var(--coockie-baner-boxshadow);
}

.cookie-box p {
    margin: 0 0 12px;
    line-height: 1.5;
    
    text-align: center;
}

.cookie-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.cookie-actions button {
    cursor: pointer;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 1.6rem;
    border: var(--cokie-reject-border);
    background: transparent;
    color: var(--cokie-reject-color);
    width: 48%;
    font-family: 'moderatregular', sans-serif;
}

.cookie-actions button.primary {
    background: var(--cokie-accept-background);
    color: var(--cokie-accept-color);
    border-color: var(--cokie-accept-border-color);
}

.cookie-settings-btn {
 position: fixed;
    bottom: 70px;
    z-index: 5;
    border-radius: 100%;
    background: var(--cookie-settings-btn-backGround);
    height: 25px;
    width: 25px;
    cursor: pointer;
    right: 16px;
    padding: 5px;
}

.cookie-settings-btn:hover {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

#cookie-accept:hover,
#cookie-reject:hover {
    opacity: 0.95;
    transform: scale(1.01);
    -webkit-transform: scale(1.01);
    -moz-transform: scale(1.01);
    -ms-transform: scale(1.01);
    -o-transform: scale(1.01);
}

@media screen and (max-width: 600px) {
    #cookie-banner {
        width: 100%;
        z-index: 99;
        left: 0;
        bottom: 0;
    }

    .cookie-box {
        border-radius: 0;
    }
}

.cookies_header{
    text-align: center;
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 2rem;
}

.fly-svg {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    will-change: transform, opacity;
}

#cookies_svg {
    width: 20px;
}

.svg-cookie__baner {
    fill: var(--svg-cookie__button-fill);
}

.svg-cookie__button {
    fill: var(--svg-cookie__button-fill);
    
}