/* ════════════════════════════════════════════════
   STORM WITHIN · storm-klaro.css
   Klaro cookiebanner in huisstijl
   ════════════════════════════════════════════════ */

/* ── NOTICE (kleine banner onderaan) ── */
.klaro .cookie-notice {
  background: #003049 !important;
  border: 1px solid rgba(200,169,106,0.2) !important;
  border-radius: 10px !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
  font-family: 'Sora', sans-serif !important;
  padding: 1.5rem 1.8rem !important;
  max-width: 680px !important;
}

.klaro .cookie-notice p,
.klaro .cookie-notice .notice-description {
  color: rgba(242,234,224,0.62) !important;
  font-size: 0.85rem !important;
  line-height: 1.75 !important;
  font-family: 'Sora', sans-serif !important;
}

.klaro .cookie-notice a {
  color: #C8A96A !important;
  border-bottom: 1px solid rgba(200,169,106,0.3) !important;
  text-decoration: none !important;
}
.klaro .cookie-notice a:hover { border-color: #C8A96A !important; }

/* ── MODAL ── */
.klaro .cookie-modal { font-family: 'Sora', sans-serif !important; }

.klaro .cookie-modal .cm-modal {
  background: #003049 !important;
  border: 1px solid rgba(200,169,106,0.15) !important;
  border-radius: 10px !important;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4) !important;
  color: #F2EAE0 !important;
  font-family: 'Sora', sans-serif !important;
}

.klaro .cookie-modal .cm-modal .cm-header {
  border-bottom: 1px solid rgba(200,169,106,0.12) !important;
  padding: 1.5rem 2rem !important;
}

.klaro .cookie-modal .cm-modal .cm-header h1,
.klaro .cookie-modal .cm-modal .cm-header .title {
  color: #fff !important;
  font-family: 'Sora', sans-serif !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
}

.klaro .cookie-modal .cm-modal .cm-body { padding: 1.5rem 2rem !important; }

.klaro .cookie-modal .cm-modal .cm-body p,
.klaro .cookie-modal .cm-modal .cm-body .cm-app-description {
  color: rgba(242,234,224,0.55) !important;
  font-size: 0.83rem !important;
  line-height: 1.75 !important;
  font-family: 'Sora', sans-serif !important;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-app-title,
.klaro .cookie-modal .cm-modal .cm-body .cm-purpose .cm-app .cm-app-title {
  color: rgba(242,234,224,0.88) !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  font-family: 'Sora', sans-serif !important;
}

.klaro .cookie-modal .cm-modal .cm-body .cm-services,
.klaro .cookie-modal .cm-modal .cm-body .cm-app {
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}

/* ── TOGGLES ── */
.klaro .cm-list-input:checked + .cm-list-label .slider { background: #C8A96A !important; }
.klaro .cm-list-input.half-checked + .cm-list-label .slider { background: rgba(200,169,106,0.4) !important; }
.klaro .slider { background: rgba(255,255,255,0.12) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.klaro .slider::before { background: rgba(255,255,255,0.5) !important; }
.klaro .cm-list-input:checked + .cm-list-label .slider::before { background: #003049 !important; }
.klaro .cm-list-input.required + .cm-list-label .slider { background: rgba(200,169,106,0.25) !important; cursor: not-allowed !important; }

/* ── KNOPPEN ── */
.klaro .cookie-modal .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  background: #C8A96A !important; color: #003049 !important;
  font-family: 'Sora', sans-serif !important; font-size: 0.82rem !important;
  font-weight: 600 !important; border: none !important;
  border-radius: 50px !important; padding: 0.62rem 1.4rem !important;
  transition: background 0.2s, transform 0.2s !important; cursor: pointer !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-success:hover,
.klaro .cookie-notice .cm-btn.cm-btn-success:hover,
.klaro .cookie-modal .cm-btn.cm-btn-accept-all:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all:hover {
  background: #DFC08A !important; transform: translateY(-1px) !important;
}

.klaro .cookie-modal .cm-btn.cm-btn-accept,
.klaro .cookie-notice .cm-btn.cm-btn-accept {
  background: rgba(255,255,255,0.08) !important; color: rgba(242,234,224,0.8) !important;
  font-family: 'Sora', sans-serif !important; font-size: 0.82rem !important;
  font-weight: 600 !important; border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 50px !important; padding: 0.62rem 1.4rem !important;
  transition: background 0.2s !important; cursor: pointer !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-accept:hover,
.klaro .cookie-notice .cm-btn.cm-btn-accept:hover { background: rgba(255,255,255,0.14) !important; }

.klaro .cookie-modal .cm-btn.cm-btn-decline,
.klaro .cookie-notice .cm-btn.cm-btn-decline {
  background: transparent !important; color: rgba(242,234,224,0.38) !important;
  font-family: 'Sora', sans-serif !important; font-size: 0.82rem !important;
  font-weight: 600 !important; border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 50px !important; padding: 0.62rem 1.4rem !important;
  transition: color 0.2s, border-color 0.2s !important; cursor: pointer !important;
}
.klaro .cookie-modal .cm-btn.cm-btn-decline:hover,
.klaro .cookie-notice .cm-btn.cm-btn-decline:hover {
  color: rgba(242,234,224,0.7) !important; border-color: rgba(255,255,255,0.2) !important;
}

.klaro .cookie-notice .cn-learn-more,
.klaro .cookie-modal .cm-link {
  color: #C8A96A !important; font-size: 0.82rem !important;
  font-family: 'Sora', sans-serif !important; text-decoration: none !important;
  border-bottom: 1px solid rgba(200,169,106,0.3) !important;
}
.klaro .cookie-notice .cn-learn-more:hover,
.klaro .cookie-modal .cm-link:hover { border-color: #C8A96A !important; }

.klaro .cookie-modal .cm-modal .cm-footer {
  border-top: 1px solid rgba(200,169,106,0.12) !important;
  padding: 1.2rem 2rem !important;
  background: rgba(0,0,0,0.15) !important;
  border-radius: 0 0 10px 10px !important;
  gap: 0.7rem !important;
  flex-wrap: wrap !important;
}

.klaro .cookie-modal .cm-powered-by,
.klaro .cookie-notice .cm-powered-by { display: none !important; }

.klaro .cookie-modal-overlay {
  background: rgba(0,31,48,0.75) !important;
  backdrop-filter: blur(4px) !important;
}

/* ── MOBIEL ── */
@media (max-width: 600px) {
  .klaro .cookie-notice {
    border-radius: 12px 12px 0 0 !important;
    border-bottom: none !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .klaro .cookie-modal .cm-modal {
    border-radius: 12px 12px 0 0 !important;
    max-height: 85vh !important;
    margin: auto 0 0 0 !important;
  }
  .klaro .cookie-modal .cm-modal .cm-footer { flex-direction: column !important; }
  .klaro .cookie-modal .cm-btn,
  .klaro .cookie-notice .cm-btn {
    width: 100% !important; text-align: center !important; justify-content: center !important;
  }
}