/* Klaro cookie banner — M&T brand overrides */

/* ── Reposition notice as a compact bottom-right card ── */
.klaro .cookie-notice {
  position: fixed !important;
  bottom: 1.5rem !important;
  right: 1.5rem !important;
  left: auto !important;
  top: auto !important;
  width: 300px !important;
  max-width: calc(100vw - 3rem) !important;
  padding: 1.25rem !important;
  background: color-mix(in srgb, var(--color-bg-alt) 85%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  font-family: var(--font-body) !important;
}

.klaro .cookie-notice p,
.klaro .cookie-notice .cn-body {
  color: var(--color-text-mid) !important;
  font-size: var(--text-sm) !important;
  line-height: 1.55 !important;
  margin: 0 0 1rem !important;
}

/* ── Button row ── */
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  gap: 0.5rem !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

.klaro .cookie-notice .cm-btn {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-full) !important;
  padding: 0.45rem 1rem !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  flex-shrink: 0 !important;
}

/* Accept — brand pink */
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background: var(--color-pink) !important;
  color: var(--color-cream) !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-success:hover {
  background: var(--color-pink-hover) !important;
}

/* Decline — ghost */
.klaro .cookie-notice .cm-btn.cm-btn-danger,
.klaro .cookie-notice .cm-btn.cn-decline {
  background: transparent !important;
  color: var(--color-text-mid) !important;
  border: 1px solid var(--color-border) !important;
}

.klaro .cookie-notice .cm-btn.cm-btn-danger:hover,
.klaro .cookie-notice .cm-btn.cn-decline:hover {
  color: var(--color-cream) !important;
  border-color: var(--color-text-mid) !important;
}

/* "Let me choose" link */
.klaro .cookie-notice .cn-learn-more {
  display: block !important;
  margin-top: 0.625rem !important;
  color: var(--color-text-muted) !important;
  font-size: var(--text-xs) !important;
  text-decoration: underline !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
}

.klaro .cookie-notice .cn-learn-more:hover {
  color: var(--color-text-mid) !important;
}

/* ── Modal (full preferences) ── */
.klaro .cookie-modal {
  background: color-mix(in srgb, var(--color-bg) 85%, transparent) !important;
  font-family: var(--font-body) !important;
}

.klaro .cookie-modal .cm-modal {
  background: var(--color-bg-alt) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  color: var(--color-cream) !important;
  max-width: 480px !important;
  font-family: var(--font-body) !important;
}

.klaro .cookie-modal .cm-header {
  border-bottom: 1px solid var(--color-border) !important;
}

.klaro .cookie-modal .cm-header h1,
.klaro .cookie-modal .cm-header h2 {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 500 !important;
  color: var(--color-cream) !important;
}

.klaro .cookie-modal .cm-footer {
  border-top: 1px solid var(--color-border) !important;
}

.klaro .cookie-modal .cm-btn {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  border-radius: var(--radius-full) !important;
  padding: 0.5rem 1.25rem !important;
  cursor: pointer !important;
  border: none !important;
  transition: background 0.15s ease !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success {
  background: var(--color-pink) !important;
  color: var(--color-cream) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-success:hover {
  background: var(--color-pink-hover) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-decline {
  background: transparent !important;
  color: var(--color-text-mid) !important;
  border: 1px solid var(--color-border) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-decline:hover {
  color: var(--color-cream) !important;
  border-color: var(--color-text-mid) !important;
}

.klaro .cookie-modal .cm-purpose .cm-purpose-title,
.klaro .cookie-modal .cm-app .cm-app-title {
  color: var(--color-cream) !important;
  font-weight: 500 !important;
}

.klaro .cookie-modal .cm-purpose p,
.klaro .cookie-modal .cm-app p {
  color: var(--color-text-mid) !important;
  font-size: var(--text-sm) !important;
}

/* Toggle — on state uses brand green */
.klaro .cookie-modal input:checked + .cm-app-label .slider {
  background: var(--color-green) !important;
}