/* ===== Modernize-aligned Klaro overrides ===== */

/* Typography + container */
.klaro, .cm-wrapper {
    font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    color: #0b1a39!important; /* Modernize dark text */
  }

  .klaro .cookie-modal p, .klaro .cookie-modal strong, .klaro .cookie-modal h1, .klaro .cookie-modal h2, .klaro .cookie-modal ul, .klaro .cookie-modal li, .klaro .context-notice p, .klaro .context-notice strong, .klaro .context-notice h1, .klaro .context-notice h2, .klaro .context-notice ul, .klaro .context-notice li, .klaro .cookie-notice p, .klaro .cookie-notice strong, .klaro .cookie-notice h1, .klaro .cookie-notice h2, .klaro .cookie-notice ul, .klaro .cookie-notice li {
    color: #0b1a39!important; /* Modernize dark text */
  }
  
  #klaro-cookie-notice {
    margin-right: 90px!important;
  }

  .klaro .cookie-modal .cm-list-label .cm-switch {
    margin:5px!important;
  }
  /* Modal */
  .klaro .cm-modal {
    border-radius: 16px !important;              /* Modernize rounded-xl */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
    max-width: 780px !important;
    border: 1px solid #eef2ff !important;        /* subtle border like Modernize cards */
    background: #ffffff !important;
  }
  .klaro .cookie-notice:not(.cookie-modal-notice) {
    background-color: #2a3548!important;
    border-radius: 12px!important;
  }
  .klaro .cookie-notice .cm-btn {
    background-color: #5881ee!important;
  }
  .klaro a {
    color:#5881ee!important;
  }
  .cm-header h1, .cm-header h2, .cm-header h3 {
    font-size: 22px !important;
    font-weight: 700 !important;
    margin-bottom: 8px !important;
  }
  .cm-description {
    color: #4a5568 !important;                   /* muted body */
    line-height: 1.55 !important;
  }
  
  /* Lists (purposes/services) */
  .cm-purpose, .cm-service {
    border-radius: 12px !important;              /* rounded-lg */
    border: 1px solid #eef2ff !important;
    background: #fafbff !important;
  }
  
  /* Toggles */
  .cm-switch input:checked + .cm-switch__slider {
    background: #5D87FF !important;              /* Modernize primary */
    border-color: #5D87FF !important;
  }
  .cm-switch__slider {
    transition: background-color .2s, border-color .2s, transform .2s !important;
  }

  .klaro #id-cookie-notice {
    color: white !important;
  }

  .klaro .cookie-modal .cm-list-input:checked+.cm-list-label .slider, .klaro .context-notice .cm-list-input:checked+.cm-list-label .slider, .klaro .cookie-notice .cm-list-input:checked+.cm-list-label .slider {
    background-color:#5D87FF !important;
    }
  
  /* Buttons */
  .cm-btn {
    border-radius: 9999px !important;            /* pill */
    padding: 10px 16px !important;
    font-weight: 600 !important;
    border-width: 1px !important;
    transition: filter .15s, box-shadow .15s !important;
  }
  .cm-btn-accept, .cm-btn-save {
    background: #5D87FF !important;
    border-color: #5D87FF !important;
    color: #ffffff !important;
  }
  .cm-btn-decline, .cm-btn-back {
    background: #f3f6ff !important;
    border-color: #e5e9f6 !important;
    color: #0b1a39 !important;
  }
  .cm-btn:hover { filter: brightness(0.96); }
  .cm-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(93,135,255,.35) !important; /* accessible focus */
  }
  
  /* Banner */
  .cm-banner {
    border-top: 1px solid #e5e9f6 !important;
    box-shadow: 0 -8px 30px rgba(0,0,0,0.08) !important;
    background: #ffffff !important;
  }
  .cm-banner .cm-btn-accept {
    background: #5D87FF !important;
    color: #fff !important;
  }
  
  /* Links */
  .cm-link, .cm-content a {
    color: #5D87FF !important;
    text-decoration: none !important;
  }
  .cm-link:hover, .cm-content a:hover { text-decoration: underline !important; }
  
  /* Z-index guard (above chat widgets, etc.) */
  .cm-wrapper, .cm-modal, .cm-banner { z-index: 2147483000 !important; }

  .klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {
    background-color: #5D87FF!important;
  }

  
  
  /* ==== Dark mode (if your site supports it) ==== */
  @media (prefers-color-scheme: dark) {
    .cm-modal, .cm-banner { background: #0f172a !important; }
    .cm-header h1, .cm-header h2, .cm-header h3 { color: #e5e7eb !important; }
    .cm-description, .cm-content { color: #cbd5e1 !important; }
    .cm-purpose, .cm-service {
      background: #111827 !important;
      border-color: #1f2937 !important;
    }
    .cm-btn-decline, .cm-btn-back {
      background: #1f2937 !important;
      border-color: #374151 !important;
      color: #e5e7eb !important;
    }
    .cm-link, .cm-content a { color: #93c5fd !important; }
  }