.cookie-banner {position: fixed; inset: 0; background: rgba(0,0,0,.4); display: flex; align-items: flex-end; justify-content: flex-start; z-index: 9999; font-family: Arial, sans-serif; padding:2rem;}
.cookie-banner.hidden {display: none;}
.cookie-box {
    background: #fff;
    max-width: 100%;
    width: 30rem;
    padding: 1.2rem;
    border-radius: 2rem;
	box-shadow: 0px 31.91px 91.18px 0px #2D25242E;
	user-select: none;
	overflow: hidden;
	position:relative;
}
.cookie-hello{padding-left: 1.2rem; text-transform:uppercese; font-weight:700; font-size:0.8rem;}
.cookie-hello::before{content: ''; height:0.2rem; width:1.5rem; background-color: var(--font-accent); display:inline-block; position: relative; bottom: 0.2rem; right: 1.2rem;}
.cookie-box .close-btn {width: 1.2rem; height: 1.2rem; mask-image: url('../svg/times.svg'); mask-repeat:no-repeat; mask-size: contain; background-color: #000; transition: all 0.4s ease-in-out; position: absolute; top: 1.2rem; right: 1.2rem;}
.cookie-box .close-btn:hover{transform: rotate(180deg);}
.cookie-box h3{font-size: 1.8rem; margin: 1rem 0 0.5rem;}
.cookie-footer{display:flex; justify-content: space-between; align-items: center;}
.cookie-footer > div{display:flex; gap:1rem;}
.cookie-footer a{color: var(--font-color); text-decoration: underline; text-underline-offset: 0.3rem; transition: all 0.3s linear;}
.cookie-footer a.arrow::after{content: '';position: relative; top: 0.3rem; right: -0.2rem; width: 1.2rem; height: 1.2rem; display: inline-block; mask-image: url('../svg/arrow.svg'); mask-size: 50%; mask-repeat: no-repeat; mask-position: center; background-color:  var(--font-color); transition: all 0.3s linear;}
.cookie-box.closed a.arrow::after{transform:rotate(180deg);}

.cookie-footer a:hover{color: var(--font-accent);}

.cookie-box.closed .cookie-options {display: none;}
.cookie-box.closed .cookie-single {display: none;}
.cookie-options > div {border-top: 0.1rem solid #E1DFDA; }
.cookie-options > div label {display:flex; align-items: center; gap: 1rem;}
.cookie-options > div label > div {display:flex; flex-direction: column; gap: 0.2rem; padding: 0.5rem 0;}
.cookie-options > div label > div > span {color: var(--font-secondary);}

.cookie-actions{display:flex; flex-direction:column; gap:0.5rem;margin: 1rem 0;}
.cookie-double {display:flex; gap: 0.5rem;}
.cookie-double > button{flex:1;}
.cookie-single > button{width:100%;}

input[type="checkbox"]{display:none;}
input[type="checkbox"] + label > span {
	content: '';
	display: inline-block;
	border: 0.1rem solid #757880;
	width: 1.5rem;
	min-width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.3rem;
	position: relative;
}

input[type="checkbox"]:checked + label > span::after {
	content: '';
	background-color: #757880;
	mask-image: url('../svg/check.svg');
	display: block;
	width: 1.4rem;
	min-width: 1.4rem;
	height: 1.4rem;
	position: absolute;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: 55%;
	top: 0;
	left:0;
}

.cookie-box .btn {height:3rem; border-radius: 2rem; font-size: 1rem; font-weight: 700; font-family: Arial, sans-serif;}
.cookie-box .btn.primary{border: 0.1rem solid var(--font-accent); background-color: var(--background-accent); color: var(--font-light);}
.cookie-box .btn.secondary{border: 0.1rem solid var(--font-color); background-color: var(--background-light); color: var(--font-color);}
.cookie-box .btn.primary:hover{background-color: var(--background-light); color: var(--font-accent);}
.cookie-box .btn.secondary:hover{border: 0.1rem solid var(--font-accent); color: var(--font-accent);}

@media (max-width: 768px) {.cookie-box{width: 100%;}}