.cookie-banner,
.cookie-settings {
  --cookie-surface: #fffdf6;
  --cookie-ink: #20382d;
  --cookie-muted: #4c5d52;
  --cookie-line: #9ba998;
  --cookie-button: #edf2e6;
  --cookie-hover: #e0ead5;
  --cookie-focus: #946000;
  box-sizing: border-box;
  color-scheme: light;
  color: var(--cookie-ink);
  background: var(--cookie-surface);
  border: 1px solid var(--cookie-line);
  font-family: Manrope, Arial, sans-serif;
  font-style: normal;
  letter-spacing: normal;
}

.cookie-banner {
  position: fixed;
  z-index: 90;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  left: 20px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  width: auto;
  max-width: 1080px;
  max-height: calc(100svh - 40px);
  margin: 0 auto;
  padding: 22px 24px;
  overflow-y: auto;
  border-radius: 16px;
  box-shadow: 0 8px 36px #14251c26;
  text-align: left;
}

.cookie-copy {
  min-width: 0;
}

.cookie-copy h2 {
  margin: 0 0 7px;
  color: var(--cookie-ink);
  font-family: Manrope, Arial, sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
}

.cookie-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--cookie-muted);
  font-family: Manrope, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: normal;
}

.cookie-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.cookie-actions button,
.cookie-settings {
  min-height: 44px;
  margin: 0;
  padding: 11px 16px;
  border: 1px solid var(--cookie-line);
  border-radius: 9px;
  color: var(--cookie-ink);
  background: var(--cookie-button);
  font-family: Manrope, Arial, sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: normal;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}

.cookie-actions button:hover,
.cookie-settings:hover {
  background: var(--cookie-hover);
}

.cookie-actions button:focus-visible,
.cookie-settings:focus-visible {
  outline: 3px solid var(--cookie-focus);
  outline-offset: 3px;
}

.cookie-settings {
  position: fixed;
  z-index: 80;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 16px;
  box-shadow: 0 3px 14px #14251c1a;
}

.cookie-banner[hidden],
.cookie-settings[hidden] {
  display: none;
}

:root[data-theme=dark] .cookie-banner,
:root[data-theme=dark] .cookie-settings {
  --cookie-surface: #14251c;
  --cookie-ink: #f3f2e8;
  --cookie-muted: #c4d5c7;
  --cookie-line: #758b78;
  --cookie-button: #243d2e;
  --cookie-hover: #34513f;
  --cookie-focus: #ffc733;
  color-scheme: dark;
}

@media (max-width: 800px) {
  .cookie-banner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .cookie-actions {
    width: min(100%, 340px);
  }
}

@media (max-width: 480px) {
  .cookie-banner {
    right: 12px;
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
    max-height: calc(100svh - 24px);
    padding: 18px 16px;
    border-radius: 12px;
  }

  .cookie-actions {
    width: 100%;
  }

  .cookie-actions button {
    padding-right: 10px;
    padding-left: 10px;
  }

  .cookie-settings {
    bottom: max(12px, env(safe-area-inset-bottom));
    left: 12px;
  }
}