/* Cookie consent banner */

.cookie-consent {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 10050;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px;
  background: var(--white, #ffffff);
  color: var(--textdark, #2c2c62);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(44, 44, 98, 0.18);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  visibility: hidden;
  transition:
    opacity var(--duration-toast, 400ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform var(--duration-toast, 400ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    visibility var(--duration-toast, 400ms);
}

.cookie-consent.cookie-consent-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}

.cookie-consent-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cookie-consent-title {
  margin: 0;
  font-family: var(--h5-font-family, "Circe-Bold", sans-serif);
  font-size: var(--h5-font-size, 24px);
  line-height: var(--h5-line-height, 130%);
  font-weight: var(--h5-font-weight, 700);
  color: var(--dark-purple, #4a4a8d);
}

.cookie-consent-message {
  margin: 0;
  font-family: var(--body-3-font-family, "Comfortaa-Regular", sans-serif);
  font-size: 14px;
  line-height: 1.5;
  color: var(--textdark, #2c2c62);
}

.cookie-consent-link {
  color: var(--purple-accent, #7272ec);
  text-decoration: underline;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
}

.cookie-consent-link:hover {
  opacity: 0.85;
}

.cookie-consent-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.cookie-consent-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 12px;
  border: 2px solid var(--purple-accent, #7272ec);
  font-family: var(--button-font-family, "Circe-Bold", sans-serif);
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  cursor: pointer;
  transition:
    opacity var(--duration-ui, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    transform var(--duration-press, 160ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    background-color var(--duration-ui, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
    color var(--duration-ui, 200ms) var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}

.cookie-consent-btn:active {
  transform: scale(0.97);
}

.cookie-consent-accept {
  background: var(--purple-accent, #7272ec);
  color: var(--white, #ffffff);
}

.cookie-consent-accept:hover {
  opacity: 0.9;
}

.cookie-consent-decline {
  background: transparent;
  color: var(--purple-accent, #7272ec);
}

.cookie-consent-decline:hover {
  background: var(--extra-light-purple, #ebe9fe);
}

@media (max-width: 600px) {
  .cookie-consent {
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 16px;
  }

  .cookie-consent-title {
    font-size: 20px;
  }

  .cookie-consent-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .cookie-consent-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-consent {
    transition: opacity var(--duration-ui, 200ms) ease, visibility var(--duration-ui, 200ms);
    transform: none;
  }

  .cookie-consent.cookie-consent-open {
    transform: none;
  }

  .cookie-consent-btn:active {
    transform: none;
  }
}