/* ================================
   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: #1a3f16 !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: #f0c040 !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: #f0c040 !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: #f0c040 !important;
}

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

/* 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: #f0c040 !important;
  color: #1a3f16 !important;
}

.klaro .cm-btn-decline {
  background: transparent !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !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;
  }
}