/* ================================
   KLARO — Estilo Grupo Herdez
   ================================ */
.klaro .cookie-modal .cm-modal,
.klaro .cookie-notice {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  transform: none !important;
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 0 !important;
  background: #145242 !important;
  padding: 24px 40px !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.3) !important;
}

.klaro .cookie-modal .cm-modal .cm-header,
.klaro .cookie-modal .cm-modal .cm-body {
  background: transparent !important;
}

.klaro .cookie-modal .cm-modal h1,
.klaro .cookie-notice h1 {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  color: #32cea4 !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.05em !important;
}

.klaro .cookie-modal .cm-modal p,
.klaro .cookie-modal .cm-modal .cm-body,
.klaro .cookie-notice p {
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif !important;
}

.klaro .cookie-modal .cm-modal a,
.klaro .cookie-notice a {
  color: #32cea4 !important;
}

.klaro .cookie-modal .cm-purposes,
.klaro .cookie-modal .cm-services {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.klaro .cookie-modal .cm-purpose,
.klaro .cookie-modal .cm-service {
  background: rgba(255,255,255,0.1) !important;
  border-radius: 8px !important;
  padding: 12px 16px !important;
  flex: 1 !important;
  min-width: 200px !important;
}

.klaro .cookie-modal .cm-purpose .title,
.klaro .cookie-modal .cm-service .title {
  color: #ffffff !important;
  font-family: 'Figtree', sans-serif !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  letter-spacing: 0.05em !important;
}

.klaro .cookie-modal .cm-purpose p,
.klaro .cookie-modal .cm-service p {
  color: rgba(255,255,255,0.8) !important;
  font-size: 0.8rem !important;
}

/* Toggles */
.klaro .cm-list-input:checked + .cm-list-label .slider {
  background: #32cea4 !important;
}

.klaro .cm-list-label .slider {
  background: rgba(255,255,255,0.3) !important;
}

/* SPAN */
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-opt-out, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-service span.cm-required, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-opt-out, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-services li.cm-purpose span.cm-required, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-opt-out, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-service span.cm-required, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-opt-out, 
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose span.cm-required
{color: #b3d200;}

.klaro .cookie-modal .cm-modal .cm-header h1 {display: inline;}

/* Botones */
.klaro .cookie-modal .cm-btn,
.klaro .cookie-notice .cm-btn {
  font-family: 'Figtree', sans-serif !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-radius: 4px !important;
  padding: 10px 24px !important;
  border: none !important;
  cursor: pointer !important;
}

.klaro .cm-btn-accept-all {
  background: #dc0031 !important;
  color: #ffffff !important;
}

.klaro .cm-btn-success:not(.cm-btn-accept-all) {
  background: #1a936f !important;
  color: #145242 !important;
}

.klaro .cm-btn-decline {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

button.cm-btn.cm-btn-decline.cm-btn-danger.cn-decline {
    background: #84021f !important;
    border: 0px !important;
}
button.cm-btn.cm-btn-success.cm-btn-accept-all {
    background: #4caf50 !important;
    border: 0px !important;
}

/* Footer de botones */
.klaro .cookie-modal .cm-footer,
.klaro .cookie-notice .cn-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  margin-top: 16px !important;
}

/* Overlay */
.klaro .cookie-modal-overlay {
  background: rgba(0,0,0,0.5) !important;
}

button.cm-btn.cm-btn-success.cm-btn-info.cm-btn-accept {color: #ffffff !important;}

/* Fix altura uniforme cm-purpose */
.klaro .cm-purpose {
  height: auto !important;
  min-height: unset !important;
}

/* Fix toggle */
.klaro .cm-switch {
  flex-shrink: 0 !important;
  margin-right: 8px !important;
  margin-left: 0 !important;
}

/* Fix servicios desplegados */
.klaro .cm-purpose .cm-services {
  margin-left: 0 !important;
  padding-left: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.klaro .cm-service {
  box-sizing: border-box !important;
  width: 100% !important;
}

.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose:first-child { margin-top: 9px; }
li.cm-purpose {border: solid 1px #ffffff57;}
.cm-services { margin-top: 10px; }
label.cm-list-label { color: #FFF; margin-left: 40px; }
.klaro .cookie-modal .cm-modal .cm-body ul.cm-purposes li.cm-purpose .cm-services .cm-content { margin-left: 5px;}
div#service-item-cms-description, div#service-item-klaro-description { margin-top: 10px; }

/* Responsivo: banner de cookies (Klaro) en móvil */
@media (max-width: 767px) {
  #klaro .cookie-modal .cm-modal {
    max-height: 90vh;
    width: 92vw;
    max-width: 92vw;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  #klaro .cookie-modal .cm-header {
    flex-shrink: 0;
  }

  #klaro .cookie-modal .cm-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
  }

  #klaro .cookie-modal .cm-footer {
    flex-shrink: 0;
  }

  #klaro .cookie-modal .cm-footer-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  #klaro .cookie-modal .cm-footer-buttons .cm-btn {
    width: 100%;
    margin: 0;
  }
}