.cookie {
  --rotate: 0deg;
  --top-y: 0px;
  --eyeball-x: -2px;
  --eyeball-y: -2px;
  --eyeball-scale: 0.75;
  --mouth-y: 0px;
  --crack-offset: 38px;
  position: relative;
  transform: rotate(var(--rotate));
  transform-origin: 50% 100%;
}
.cookie .piece {
  fill: #f6a976;
  stroke-width: 0.5;
  stroke: #d5906e;
  position: absolute;
  width: 6px;
  height: 6px;
}
.cookie .piece.left {
  top: 15px;
  left: 4px;
}
.cookie .piece.right {
  top: 15px;
  right: 4px;
}
.cookie .top,
.cookie .bottom {
  display: block;
  width: 40px;
  height: 40px;
  stroke-linecap: round;
  stroke-linejoin: round;
  position: relative;
  z-index: 1;
}
.cookie .top .background,
.cookie .bottom .background {
  fill: #f6a976;
}
.cookie .top .shine,
.cookie .bottom .shine {
  fill: #ffdaae;
}
.cookie .top .dark,
.cookie .bottom .dark {
  fill: #a96249;
}
.cookie .top .border,
.cookie .bottom .border {
  fill: none;
  stroke: #d5906e;
}
.cookie .top .crack,
.cookie .bottom .crack {
  fill: none;
  stroke: #a96249;
  stroke-width: 1.25;
  stroke-dasharray: 38px;
  stroke-dashoffset: var(--crack-offset);
}
.cookie .top {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(var(--top-y));
}
.cookie .eye {
  top: 14px;
  position: absolute;
  z-index: 2;
}
.cookie .eye.left {
  left: 9px;
}
.cookie .eye.right {
  right: 9px;
}
.cookie .eye svg {
  display: block;
  width: 10px;
  height: 10px;
  fill: #fff;
  stroke: #000;
  stroke-width: 0.75;
}
.cookie .eye:after {
  content-cookie: "";
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(var(--eyeball-x), var(--eyeball-y)) scale(var(--eyeball-scale));
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background-color: #000;
}
.cookie .mouth {
  width: 12px;
  height: 9px;
  position: absolute;
  left: 14px;
  top: 20px;
  fill: #d5393f;
  stroke-width: 0.75;
  z-index: 2;
  stroke: #000;
  stroke-linejoin: round;
  transform: translateY(var(--mouth-y));
}

.banner-cookie {
	position: fixed;
	bottom: 25px;
	width: 94%;
    min-width: fit-content;
	left: 50%;
	transform: translateX(-50%);
	background-color: #252731;
	padding: 24px;
	border-radius: 27px;
	display: none;
	gap: 20px;
	font-size: 14px;
	line-height: 1.4;
	color: #e1e3eb;
	box-shadow: 0px 1px 3px rgba(9, 10, 15, 0.25), 0px 4px 16px rgba(9, 10, 15, 0.1), 0px 8px 24px rgba(9, 10, 15, 0.1), inset 0px 1px 1px #323543;
	z-index: 100;
}
.banner-cookie.cookie-view {
	display: flex;
}
@media (min-width: 601px) {
  .banner-cookie {
    align-items: center;
  }
}
.banner-cookie .content-cookie {
  display: flex;
  gap: 24px;
}
@media (min-width: 601px) {
  .banner-cookie .content-cookie {
    align-items: center;
  }
}
@media (max-width: 600px) {
  .banner-cookie .content-cookie {
    flex-direction: column;
    gap: 16px;
  }
}
@media (min-width: 905px) {
	.banner-cookie {
		width: 85%;
		min-width: fit-content;
	}	
	.banner-cookie .content-cookie .list-cookie {
	  flex-direction: row;
	}
}
@media (max-width: 904px) {
	.banner-cookie .content-cookie .list-cookie {
	  flex-direction: column;
	}
}
.banner-cookie .content-cookie .list-cookie {
  display: flex;
  gap: 12px;
}
.banner-cookie .content-cookie .list-cookie button {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border: none;
  color: inherit;
  outline: none;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  background: #2e303d;
  box-shadow: inset 0 0 0 1px #3c3e4d;
  line-height: 24px;
  padding: 8px 16px;
  border-radius: 15px;
  cursor: pointer;
  margin: 0;
  transition: background-color 0.2s;
}
.banner-cookie .content-cookie .list-cookie button:hover {
  background-color: #323543;
}
.banner-cookie .content-cookie .list-cookie button.muted {
  background: none;
  box-shadow: inset 0 0 0 1px #353744;
}
.banner-cookie .content-cookie .list-cookie button.muted:hover {
  background-color: #292b36;
}

/* Базовые стили для модального окна */
.cookie-settings-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: none; /* Сначала скрываем */
    justify-content: center;
    align-items: center;
    z-index: 9999;
    padding: 20px;
    box-sizing: border-box;
}

.cookie-settings-modal.is-open {
    display: flex; /* Показываем, когда открыто */
}

.modal-content {
    background: #fff;
    padding: 30px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-height: 90vh;
    overflow-y: auto;
	display: flex;
    flex-direction: column;
    gap: 15px;
}

.cookie-group {
    border-top: 1px solid #eee;
	padding-top: 15px;
}

.cookie-group h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}

.cookie-group p {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
}

.modal-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

/* Стили для переключателей (toggle switch) */
.toggle-switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 0.95em;
    color: #333;
}

.toggle-switch input[type="checkbox"] {
    position: relative;
    width: 40px;
    height: 20px;
    -webkit-appearance: none;
    background: #ccc;
    outline: none;
    border-radius: 20px;
    transition: 0.3s;
    cursor: pointer;
	padding: 0;
	border: 0px solid var(--border);
}

.toggle-switch input[type="checkbox"]:checked {
    background: var(--accent); /* Цвет для включенного состояния */
}

.toggle-switch input[type="checkbox"]::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    background: #fff;
    transform: translateX(0);
    transition: 0.3s;
}

.toggle-switch input[type="checkbox"]:checked::before {
    transform: translateX(20px);
}

.toggle-switch input[type="checkbox"]:disabled {
    background: #f0f0f0;
    cursor: default;
}
.toggle-switch input[type="checkbox"]:disabled::before {
    background: #bbb;
}

/* Изменение порядка для лейбла, чтобы переключатель был справа */
.toggle-switch label {
    order: -1;
}
.content-cookie a{
	color:var(--white);
	text-decoration: underline;
}