:root {
  --deep-bg: #0b1a2f;
  --accent-glow: #00f0ff;
  --card-border: #0ff0ff33;
  --text-main: #ffffff;
  --text-soft: #b0c8e0;
}

.cookie-consent {
  position: fixed;
  bottom: 20px;
  left: 20px;
  max-width: 350px;
  background: rgba(11, 26, 47, 0.85);
  box-shadow: 0 0 8px var(--accent-glow);
  border: 1.5px solid var(--card-border);
  border-radius: 12px;
  color: var(--text-main);
  font-family: "Segoe UI", sans-serif;
  padding: 20px;
  display: none; /* Hidden by default, shown by JS */
  z-index: 9999;
  backdrop-filter: blur(8px);
  user-select: none;
}

.cookie-content p {
  font-size: 0.9rem;
  color: var(--text-soft);
  margin-bottom: 15px;
  line-height: 1.4;
}

.cookie-content a {
  color: var(--accent-glow);
  text-decoration: underline;
  font-weight: 600;
}

.cookie-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.btn {
  cursor: pointer;
  border-radius: 25px;
  padding: 8px 16px;
  font-weight: 600;
  border: 2px solid var(--accent-glow);
  background: transparent;
  color: var(--accent-glow);
  transition: background 0.3s, color 0.3s;
  user-select: none;
}

.btn:hover {
  background: var(--accent-glow);
  color: var(--deep-bg);
}

.accept-btn {
  border-color: #00ffc8;
  color: #00ffc8;
}

.accept-btn:hover {
  background: #00ffc8;
  color: var(--deep-bg);
}

.reject-btn {
  border-color: #ff0033;
  color: #ff0033;
}

.reject-btn:hover {
  background: #ff0033;
  color: var(--deep-bg);
}

@media (max-width: 480px) {
  .cookie-consent {
    max-width: 90vw;
    left: 5vw;
    bottom: 15px;
    padding: 15px;
  }

  .cookie-content p {
    font-size: 0.85rem;
  }
}