/* =============================================================
   Evoriant — Klaro CMP Custom Styles
   Palette: #2D2450 (modal bg), #3D3460 (header/footer bg),
            #5B5298 (purple), #F5A623 (amber), #F4F2FF (text),
            #C9C6D6 (text-dim)
   Typography: DM Sans / Jost / system-ui
   GDPR: equal visual weight between Deny and Allow all.
   ============================================================= */

/* ── Modal backdrop ──────────────────────────────────────── */
.klaro .cm-bg {
  background: rgba(29, 24, 54, 0.82) !important;
  backdrop-filter: blur(4px);
}

/* ── Modal box ───────────────────────────────────────────── */
.klaro .cm-modal {
  background:    #2D2450 !important;
  color:         #F4F2FF !important;
  font-family:   'DM Sans', 'Jost', system-ui, sans-serif !important;
  font-size:     0.875rem !important;
  border-radius: 12px !important;
  border:        1px solid rgba(201, 198, 214, 0.18) !important;
  box-shadow:    0 24px 64px rgba(0, 0, 0, 0.5) !important;
  max-width:     520px !important;
  overflow:      hidden !important;
  position:      relative !important;
}

/* Diamond brandmark — top-right corner of the modal */
.klaro .cm-modal::before {
  content: '';
  position: absolute;
  top:   1rem;
  right: 1.4rem;
  width:  18px;
  height: 28px;
  /* Evoriant diamond SVG as data URL */
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.5L18 16L10 30.5L2 16Z' stroke='%23FFB000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size:   contain;
  opacity:           0.65;
  pointer-events:    none;
  z-index:           10;
}

/* ── Header ──────────────────────────────────────────────── */
.klaro .cm-header {
  background:    #3D3460 !important;
  border-bottom: 1px solid rgba(201, 198, 214, 0.15) !important;
  padding:       1.4rem 1.75rem 1.2rem !important;
}

.klaro .cm-header h1,
.klaro .cm-header .title {
  font-family:   'Instrument Serif', 'Cormorant Garamond', Georgia, serif !important;
  font-size:     1.2rem !important;
  font-weight:   400 !important;
  color:         #F4F2FF !important;
  margin:        0 0 0.55rem !important;
  padding-right: 2rem !important; /* clear diamond watermark */
  line-height:   1.3 !important;
}

.klaro .cm-header p,
.klaro .cm-header .body {
  font-size:   0.8rem !important;
  color:       #C9C6D6 !important;
  line-height: 1.6 !important;
  margin:      0 !important;
}

.klaro .cm-header a          { color: #F5A623 !important; }
.klaro .cm-header a:hover    { text-decoration: underline !important; opacity: 0.85 !important; }

/* ── Body (service list) ─────────────────────────────────── */
.klaro .cm-body {
  padding:    1.2rem 1.75rem !important;
  max-height: 280px !important;
  overflow-y: auto !important;
}

.klaro .cm-body::-webkit-scrollbar       { width: 4px; }
.klaro .cm-body::-webkit-scrollbar-track { background: transparent; }
.klaro .cm-body::-webkit-scrollbar-thumb { background: rgba(201,198,214,0.25); border-radius: 2px; }

/* Service list items */
.klaro .cm-list-item {
  border-bottom: 1px solid rgba(201, 198, 214, 0.12) !important;
  padding:       0.85rem 0 !important;
}

.klaro .cm-list-item:last-child { border-bottom: none !important; }

.klaro .cm-list-title,
.klaro .cm-list-item .title {
  color:       #F4F2FF !important;
  font-weight: 500 !important;
  font-size:   0.875rem !important;
}

.klaro .cm-list-description,
.klaro .purposes,
.klaro .cm-list-item .body {
  color:       #C9C6D6 !important;
  font-size:   0.78rem !important;
  line-height: 1.5 !important;
  margin-top:  0.25rem !important;
}

/* Purpose tags */
.klaro .purposes .purpose {
  display:       inline-block;
  font-size:     0.68rem !important;
  padding:       0.12rem 0.45rem !important;
  border-radius: 20px !important;
  background:    rgba(91, 82, 152, 0.35) !important;
  color:         #C9C6D6 !important;
  margin:        0.15rem 0.2rem 0 0 !important;
}

/* ── Toggle switches ─────────────────────────────────────── */
.klaro .switch .slider {
  background-color: rgba(201, 198, 214, 0.28) !important;
}

.klaro .switch .slider::before {
  background: #fff !important;
}

/* Accepted state */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background-color: #F5A623 !important;
}

/* Required / always-on toggle */
.klaro .cm-list-input.required + .cm-list-label .slider,
.klaro .cm-list-input[disabled] + .cm-list-label .slider {
  background-color: #5B5298 !important;
  opacity:          0.55 !important;
  cursor:           not-allowed !important;
}

/* ── Tabs ────────────────────────────────────────────────── */
.klaro .cm-tabs {
  background:    #3D3460 !important;
  border-bottom: 1px solid rgba(201, 198, 214, 0.15) !important;
}

.klaro .cm-tabs-controls {
  display: flex;
}

.klaro .cm-tabs-controls .cm-tab-btn {
  color:           #C9C6D6 !important;
  font-family:     'DM Sans', 'Jost', system-ui, sans-serif !important;
  font-size:       0.78rem !important;
  border-bottom:   2px solid transparent !important;
  padding:         0.65rem 1.1rem !important;
  background:      none !important;
  border-radius:   0 !important;
  cursor:          pointer !important;
  transition:      color 0.15s, border-color 0.15s !important;
}

.klaro .cm-tabs-controls .cm-tab-btn.active,
.klaro .cm-tabs-controls .cm-tab-btn:hover {
  color:             #F5A623 !important;
  border-bottom-color: #F5A623 !important;
}

/* ── Footer ──────────────────────────────────────────────── */
.klaro .cm-footer {
  background:  #3D3460 !important;
  border-top:  1px solid rgba(201, 198, 214, 0.15) !important;
  padding:     1.2rem 1.75rem !important;
}

/* ── Buttons ─────────────────────────────────────────────── */
.klaro .cm-footer-buttons {
  display:         flex !important;
  gap:             0.5rem !important;
  flex-wrap:       wrap !important;
}

/* Base button */
.klaro .cm-btn {
  font-family:    'DM Sans', 'Jost', system-ui, sans-serif !important;
  font-size:      0.82rem !important;
  font-weight:    500 !important;
  letter-spacing: 0.02em !important;
  border-radius:  6px !important;
  padding:        0.6rem 1.1rem !important;
  cursor:         pointer !important;
  transition:     opacity 0.15s, transform 0.1s !important;
  border:         2px solid transparent !important;
  flex:           1 1 auto !important;
  text-align:     center !important;
  line-height:    1.25 !important;
  text-decoration: none !important;
}

.klaro .cm-btn:hover  { opacity: 0.87 !important; transform: translateY(-1px) !important; }
.klaro .cm-btn:active { transform: translateY(0) !important; }

/*
 * GDPR — equal visual weight between Deny and Allow all.
 * Both are filled buttons; Allow selection is the lighter ghost option.
 */

/* Deny — filled dark purple */
.klaro .cm-btn.cm-btn-decline {
  background:   #5B5298 !important;
  color:        #F4F2FF !important;
  border-color: #5B5298 !important;
}

/* Allow selection — ghost */
.klaro .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background:   transparent !important;
  color:        #C9C6D6 !important;
  border-color: rgba(201, 198, 214, 0.38) !important;
}

/* Allow all — amber CTA (same visual weight as Deny) */
.klaro .cm-btn.cm-btn-success,
.klaro .cm-btn.cm-btn-accept-all {
  background:   #F5A623 !important;
  color:        #1B1B1B !important;
  border-color: #F5A623 !important;
}

/* ── General links inside Klaro ──────────────────────────── */
.klaro a       { color: #F5A623 !important; }
.klaro a:hover { opacity: 0.82 !important; text-decoration: underline !important; }

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width: 540px) {
  .klaro .cm-modal {
    border-radius: 12px 12px 0 0 !important;
    max-height:    92vh !important;
    margin:        auto 0 0 !important;
  }

  .klaro .cm-footer-buttons {
    flex-direction: column !important;
  }

  .klaro .cm-btn {
    width: 100% !important;
    flex:  none !important;
  }
}

/* ── Cookie notice (mustConsent: false) ─────────────────────
   Klaro renders .cookie-notice instead of .cm-modal when
   mustConsent is false. This is the bottom-right banner.
   .cm-modal still renders for the "Ajustes / Settings" sheet.
   ─────────────────────────────────────────────────────────── */

/* Wrapper — fixed, bottom-right, no overlay */
.klaro .cookie-notice {
  position:      fixed !important;
  bottom:        1.5rem !important;
  right:         1.5rem !important;
  left:          auto !important;
  top:           auto !important;
  transform:     none !important;
  width:         340px !important;
  max-width:     calc(100vw - 3rem) !important;
  background:    #2D2450 !important;
  color:         #F4F2FF !important;
  font-family:   'DM Sans', 'Jost', system-ui, sans-serif !important;
  font-size:     0.875rem !important;
  border-radius: 12px !important;
  border:        1px solid rgba(201, 198, 214, 0.18) !important;
  box-shadow:    0 8px 32px rgba(0, 0, 0, 0.45) !important;
  overflow:      hidden !important;
  z-index:       9999 !important;
  /* no backdrop — content beneath stays interactive */
}

/* Suppress any overlay Klaro might inject for the notice */
.klaro .cookie-notice-backdrop,
.klaro .cn-backdrop {
  display: none !important;
}

/* Diamond brandmark — top-right of notice */
.klaro .cookie-notice::before {
  content:  '';
  position: absolute;
  top:   0.9rem;
  right: 1.1rem;
  width:  14px;
  height: 22px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 20 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10 1.5L18 16L10 30.5L2 16Z' stroke='%23FFB000' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size:   contain;
  opacity:           0.60;
  pointer-events:    none;
  z-index:           10;
}

/* Text body */
.klaro .cookie-notice .cn-body {
  padding: 1.2rem 1.4rem 0.9rem !important;
}

.klaro .cookie-notice .cn-body p,
.klaro .cookie-notice .cn-body .cn-text {
  font-size:   0.8rem !important;
  color:       #C9C6D6 !important;
  line-height: 1.55 !important;
  margin:      0 0 0.75rem !important;
  padding-right: 1.6rem !important; /* clear diamond */
}

.klaro .cookie-notice .cn-body a {
  color: #F5A623 !important;
}

/* Button row */
.klaro .cookie-notice .cn-buttons {
  display:         flex !important;
  gap:             0.4rem !important;
  padding:         0 1.4rem 1.2rem !important;
  flex-wrap:       wrap !important;
}

/* Base notice button — inherits .cm-btn sizing */
.klaro .cookie-notice .cm-btn {
  font-size:   0.78rem !important;
  padding:     0.5rem 0.85rem !important;
  flex:        1 1 auto !important;
  border-radius: 6px !important;
}

/* Deny */
.klaro .cookie-notice .cm-btn.cm-btn-decline {
  background:   #5B5298 !important;
  color:        #F4F2FF !important;
  border-color: #5B5298 !important;
}

/* Accept all — amber */
.klaro .cookie-notice .cm-btn.cm-btn-success,
.klaro .cookie-notice .cm-btn.cm-btn-accept-all {
  background:   #F5A623 !important;
  color:        #1B1B1B !important;
  border-color: #F5A623 !important;
}

/* Settings link-style button */
.klaro .cookie-notice .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background:   transparent !important;
  color:        #C9C6D6 !important;
  border-color: rgba(201, 198, 214, 0.35) !important;
}

/* Mobile — snap to bottom full-width */
@media (max-width: 540px) {
  .klaro .cookie-notice {
    bottom:        0 !important;
    right:         0 !important;
    left:          0 !important;
    width:         100% !important;
    max-width:     100% !important;
    border-radius: 12px 12px 0 0 !important;
  }

  .klaro .cookie-notice .cn-buttons {
    flex-direction: column !important;
  }

  .klaro .cookie-notice .cm-btn {
    width: 100% !important;
    flex:  none !important;
  }
}

/* ── Hide Klaro branding ─────────────────────────────────── */
.klaro .cm-powered-by,
.klaro .cm-footer .cm-powered-by {
  display: none !important;
}