.klaro {
  --green1: #FFAF25;  /* ON state of toggles, accept button, links */
  --green2: #FFAF25;  /* variants (half-checked/required) */
  --green3: #FFAF25;  /* focus ring */
}

/* General modal styling */
.klaro .cookie-modal,
.klaro .cm-modal,
.klaro .cm-modal .cm-modal-content {
  color: #fff !important;
  border-radius: 16px !important;
}

/* Headline + description */
.klaro .cm-header h1 { color: #FFAF25 !important; }
.klaro .cm-header .cm-description { color: #cbd5e1 !important; }

/* Divider + footer bar */
.klaro .cm-body hr { border-color: rgba(255,255,255,0.12) !important; }
.klaro .cm-footer { background: transparent !important; border-top: 1px solid rgba(255,255,255,0.12) !important; }

/* Buttons */
.klaro .cm-btn {
  border-radius: 10px !important;
  font-weight: 600 !important;
}
.klaro .cm-btn-accept,
.klaro .cm-btn-success {
  background: #FFAF25 !important;
  color: #000 !important;
  border: 1px solid #FFAF25 !important;
}
.klaro .cm-btn-accept:hover,
.klaro .cm-btn-success:hover {
  background: #e89d20 !important;
}
.klaro .cm-btn-decline,
.klaro .cm-btn-danger {
  background: transparent !important;
  color: #FFAF25 !important;
  border: 1px solid #FFAF25 !important;
}
.klaro .cm-btn-decline:hover,
.klaro .cm-btn-danger:hover {
  background: rgba(255,175,37,.08) !important;
}
.klaro .cm-btn-info {
  background: #1f2937 !important;  /* gray-800 */
  color: #e5e7eb !important;       /* gray-200 */
  border: 1px solid rgba(255,255,255,.12) !important;
}
.klaro .cm-btn-info:hover { background: #111827 !important; }

/* Inline notice (if you ever use mustConsent:false) */
.klaro .cookie-notice {
  background: #0b0d12 !important;
  color: #fff !important;
  border-top: 2px solid #FFAF25 !important;
}

/* “Powered by Klaro” */
.klaro .cm-powered-by { color: #9ca3af !important; }

/* Style of the bar */
.klaro .cookie-notice:not(.cookie-modal-notice) {
  background: #0b0d12;               /* your dark */
  border-top: 2px solid #FFAF25;     /* brand accent */
  color: #fff;
}
.klaro .cookie-notice .cm-btn {
  border-radius: 10px;
  font-weight: 600;
}
.klaro .cookie-notice .cm-btn.cm-btn-success {
  background: #FFAF25;
  color: #000;
  border: 1px solid #FFAF25;
}
.klaro .cookie-notice .cm-btn.cm-btn-close {
  background: transparent;
  color: #FFAF25;
  border: 1px solid #FFAF25;
}

/* -------- Modal-as-notice look (playful banner) -------- */
.klaro .cookie-modal-notice {
  background: #111418 !important;
  color: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255,175,37,.45) !important;
  max-width: 460px !important;
  text-align: center;
  padding: 1rem;
}

/* Title + text */
.klaro .cookie-modal-notice .cm-header h1 {
  color: #FFAF25 !important;
  letter-spacing: .2px;
}
.klaro .cookie-modal-notice .cm-body p {
  color: #cbd5e1 !important;
  margin: 0.5rem 0 1rem;
}

/* Two big buttons */
.klaro .cookie-modal-notice .cm-footer-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.klaro .cookie-modal-notice .cm-btn {
  border-radius: 12px !important;
  font-weight: 700 !important;
  padding: 12px 16px !important;
  width: 100%;
}

/* Accept all (primary) */
.klaro .cookie-modal-notice .cm-btn.cm-btn-success {
  background: #FFAF25 !important;
  color: #000 !important;
  border: 1px solid #FFAF25 !important;
  box-shadow: 0 2px 0 rgba(0,0,0,.25) !important;
}
.klaro .cookie-modal-notice .cm-btn.cm-btn-success:hover {
  background: #e89d20 !important;
}

/* Decline non-essential (secondary) */
.klaro .cookie-modal-notice .cm-btn.cm-btn-close {
  background: transparent !important;
  color: #FFAF25 !important;
  border: 1px solid #FFAF25 !important;
}

/* Side-by-side on desktop */
@media (min-width: 560px) {
  .klaro .cookie-modal-notice .cm-footer-buttons {
    flex-direction: row;
    justify-content: center;
  }
  .klaro .cookie-modal-notice .cm-btn {
    width: auto !important;
    min-width: 180px;
  }
}

/* === Bottom-right notice & no background fade === */

/* Place the NOTICE popup bottom-right (not the full manager) */
.klaro .cookie-modal-notice {
  position: fixed !important;
  right: 20px !important;
  bottom: 20px !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 1001 !important;
}

/* Make sure the popup doesn’t get too wide */
.klaro .cookie-modal-notice { max-width: 460px !important; }

/* On small screens, keep it centered & full-width-ish */
@media (max-width: 560px) {
  .klaro .cookie-modal-notice {
    right: 50% !important;
    bottom: 16px !important;
    transform: translateX(50%) !important; /* center horizontally */
    width: min(92vw, 520px) !important;
  }
}

/* Keep buttons side-by-side on desktop (you already had this) */
@media (min-width: 560px) {
  .klaro .cookie-modal-notice .cm-footer-buttons {
    display: flex;
    flex-direction: row;
    gap: 12px;
    justify-content: center;
  }
  .klaro .cookie-modal-notice .cm-btn {
    width: auto !important;
    min-width: 180px;
  }
}