:root {
  /* no-op: uses the same CSS variables defined in app/globals.css */
}

/* Klaro cookie banner/modal overrides loaded AFTER klaro.min.css */

:where(#klaro, .klaro),
:where(#klaro, .klaro) * {
  font-family: inherit;
}

/* --- Notice (banner) --- */
.cookie-notice,
:where(#klaro, .klaro) .cookie-notice {
  position: fixed !important;
  left: 1rem !important;
  right: 1rem !important;
  bottom: 1rem !important;
  max-width: 28rem !important;
  margin: 0 auto !important;
  padding: 1rem 1.25rem !important;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important;
  background: hsl(var(--background) / 0.92) !important;
  color: hsl(var(--foreground)) !important;
  box-shadow:
    0 20px 50px -20px rgb(0 0 0 / 0.45),
    0 8px 24px -12px rgb(0 0 0 / 0.35) !important;
  backdrop-filter: blur(10px);
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
}

.cookie-notice .cn-body,
:where(#klaro, .klaro) .cookie-notice .cn-body {
  color: hsl(var(--foreground)) !important;
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
}

/* Kill any colored button bar backgrounds */
.cookie-notice .cn-buttons,
:where(#klaro, .klaro) .cookie-notice .cn-buttons {
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
  box-shadow: none !important;
  border: 0 !important;
}

.cookie-notice a,
.cookie-modal a,
:where(#klaro, .klaro) .cookie-notice a,
:where(#klaro, .klaro) .cookie-modal a {
  color: hsl(var(--primary)) !important;
  text-underline-offset: 2px;
}

.cookie-notice button,
.cookie-modal button,
.cm-btn,
:where(#klaro, .klaro) .cookie-notice button,
:where(#klaro, .klaro) .cookie-modal button,
:where(#klaro, .klaro) .cm-btn {
  appearance: none;
  border-radius: 0.5rem !important;
  border: 1px solid hsl(var(--border)) !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.875rem !important;
  line-height: 1.1 !important;
  font-weight: 600 !important;
  background: transparent !important;
  background-color: transparent !important;
  color: hsl(var(--foreground)) !important;
}

.cookie-notice button:hover,
.cookie-modal button:hover,
.cm-btn:hover,
:where(#klaro, .klaro) .cookie-notice button:hover,
:where(#klaro, .klaro) .cookie-modal button:hover,
:where(#klaro, .klaro) .cm-btn:hover {
  background: hsl(var(--muted) / 0.65) !important;
}

.cookie-notice button:focus-visible,
.cookie-modal button:focus-visible,
.cm-btn:focus-visible,
:where(#klaro, .klaro) .cookie-notice button:focus-visible,
:where(#klaro, .klaro) .cookie-modal button:focus-visible,
:where(#klaro, .klaro) .cm-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px hsl(var(--ring) / 0.35) !important;
}

/* Primary action buttons (accept / save) */
.cm-btn.cm-btn-success,
.cm-btn.cm-btn-accept,
.cm-btn.cm-btn-allow,
.cookie-modal .cm-save,
:where(#klaro, .klaro) .cm-btn.cm-btn-success,
:where(#klaro, .klaro) .cm-btn.cm-btn-accept,
:where(#klaro, .klaro) .cm-btn.cm-btn-allow,
:where(#klaro, .klaro) .cookie-modal .cm-save {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

/* Secondary buttons (decline / close) */
.cm-btn.cm-btn-info,
.cm-btn.cm-btn-decline,
.cm-btn.cm-btn-deny,
.cookie-notice .cn-decline,
:where(#klaro, .klaro) .cm-btn.cm-btn-info,
:where(#klaro, .klaro) .cm-btn.cm-btn-decline,
:where(#klaro, .klaro) .cm-btn.cm-btn-deny,
:where(#klaro, .klaro) .cookie-notice .cn-decline {
  background: transparent !important;
  color: hsl(var(--foreground)) !important;
  border-color: hsl(var(--border)) !important;
}

/* --- Modal --- */
.cookie-modal,
:where(#klaro, .klaro) .cookie-modal {
  color: hsl(var(--foreground)) !important;
}

.cookie-modal .cm-modal,
.cookie-modal .cm-body,
.cookie-modal .cm-header,
.cookie-modal .cm-footer,
:where(#klaro, .klaro) .cookie-modal .cm-modal,
:where(#klaro, .klaro) .cookie-modal .cm-body,
:where(#klaro, .klaro) .cookie-modal .cm-header,
:where(#klaro, .klaro) .cookie-modal .cm-footer {
  background: hsl(var(--background)) !important;
  color: hsl(var(--foreground)) !important;
}

.cookie-modal .cm-modal,
:where(#klaro, .klaro) .cookie-modal .cm-modal {
  border: 1px solid hsl(var(--border)) !important;
  border-radius: 0.75rem !important;
  box-shadow:
    0 24px 60px -24px rgb(0 0 0 / 0.55),
    0 12px 30px -18px rgb(0 0 0 / 0.45) !important;
}

.cookie-modal .cm-bg,
:where(#klaro, .klaro) .cookie-modal .cm-bg {
  background: rgb(0 0 0 / 0.6) !important;
}

:where(#klaro, .klaro) input[type="checkbox"]:checked,
:where(#klaro, .klaro) input[type="radio"]:checked,
.cookie-modal input[type="checkbox"]:checked,
.cookie-modal input[type="radio"]:checked {
  accent-color: hsl(var(--primary));
}

@media (min-width: 640px) {
  .cookie-notice,
  :where(#klaro, .klaro) .cookie-notice {
    left: auto !important;
    right: 1rem !important;
    margin: 0 !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
  }
}