.cookie-banner {
position: fixed;
right: 20px;
bottom: 20px;
width: 360px;
max-width: calc(100% - 20px);
padding: 18px 20px 16px;
background: #fff;
color: #333;
border-radius: 10px;
box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
font-family: inherit;
font-size: 13px;
line-height: 1.5;
z-index: 9999;
opacity: 0;
transform: translateY(20px);
transition: opacity .25s ease, transform .25s ease;
pointer-events: none;
}
.cookie-banner.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.cookie-banner__title {
font-weight: 700;
font-size: 15px;
margin-bottom: 8px;
color: #1a1a1a;
}
.cookie-banner__text {
margin-bottom: 14px;
color: #4a4a4a;
}
.cookie-banner__text a {
color: #e6447a;
text-decoration: underline;
}
.cookie-banner__text a:hover {
text-decoration: none;
}
.cookie-banner__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.cookie-banner__btn {
flex: 1 1 auto;
min-width: 110px;
padding: 9px 16px;
border-radius: 6px;
border: 1px solid transparent;
font-size: 13px;
font-weight: 600;
line-height: 1.2;
cursor: pointer;
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cookie-banner__btn--accept {
background: #e6447a;
color: #fff;
}
.cookie-banner__btn--accept:hover {
background: #cf396b;
}
.cookie-banner__btn--decline {
background: transparent;
color: #555;
border-color: #c7c7c7;
}
.cookie-banner__btn--decline:hover {
background: #f3f3f3;
color: #333;
}
@media (max-width: 480px) {
.cookie-banner {
right: 10px;
bottom: 10px;
left: 10px;
width: auto;
padding: 14px 16px 14px;
}
}