/* Strong Klaro style overrides for Blockbase Light */
html body .klaro .cm-modal,
html body .klaro .cm-modal *,
html body .klaro .cm-bar,
html body .klaro .cm-btn {
  all: unset;
  all: revert;
}

.klaro .cm-modal {
  background-color: #fff !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #eee !important;
  font-family: system-ui, sans-serif !important;
  color: #1a1a1a !important;
  padding: 2rem !important;
  max-width: 600px !important;
}

.klaro .cm-header h1 {
  color: #d32f2f !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.8rem !important;
}

.klaro .cm-btn {
  border-radius: 8px !important;
  padding: 0.6em 1.4em !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  border: none !important;
  cursor: pointer !important;
}

.klaro .cm-btn.cm-btn-accept {
  background: #d32f2f !important;
  color: #fff !important;
}

.klaro .cm-btn.cm-btn-accept:hover {
  background: #b71c1c !important;
}

.klaro .cm-btn.cm-btn-decline {
  background: #eaeaea !important;
  color: #333 !important;
}

.klaro .cm-btn.cm-btn-decline:hover {
  background: #d5d5d5 !important;
}

/* ===================================================
   Klaro – fix for current markup (cm-footer-buttons)
   Keeps red/white colours, makes vertical on mobile
   =================================================== */

/* ---- Responsive container width ---- */
.klaro .cm-modal {
  max-width: 90vw !important;
  width: auto !important;
  padding: 1.2rem !important;
  margin: 1rem auto !important;
  box-sizing: border-box !important;
}

/* ===================================================
   MOBILE FIX (stack all 3 buttons vertically)
   =================================================== */
@media (max-width: 600px) {
  /* Make the footer buttons container a column */
  .klaro .cm-footer-buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
  }

  /* All buttons take full width and center text */
  .klaro .cm-footer-buttons .cm-btn {
    width: 100% !important;
    text-align: center !important;
    white-space: normal !important;
    word-wrap: break-word !important;
  }

  /* Optional: slightly smaller font for long labels */
  .klaro .cm-footer-buttons .cm-btn {
    font-size: 1rem !important;
    padding: 0.7em 1em !important;
  }

  /* Ensure the container is centered */
  .klaro .cm-footer {
    text-align: center !important;
  }
}

/* ===== Klaro: increase vertical spacing between buttons ===== */
@media (max-width: 600px) {
  /* More space between each button */
  .klaro .cm-footer-buttons {
    gap: 18px !important; /* previously 10px */
  }

  /* Add some top padding so buttons don’t touch text above */
  .klaro .cm-footer {
    padding-top: 1rem !important;
  }

  /* Slight bottom margin for nicer visual rhythm */
  .klaro .cm-footer-buttons .cm-btn:last-child {
    margin-bottom: 0.5rem !important;
  }
}

/* ===================================================
   DESKTOP FIX (equal-width buttons, one row, full text visible)
   =================================================== */
@media (min-width: 601px) {
  /* Limit Klaro modal width for readability */
  .klaro .cm-modal {
    max-width: 520px !important;
    width: 90% !important;
    margin: 3rem auto !important;
    padding: 2rem !important;
  }

  /* Footer buttons – equal width, one row */
  .klaro .cm-footer-buttons {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  /* Equal-width buttons with visible full text */
  .klaro .cm-footer-buttons .cm-btn {
    flex: 1 1 0 !important;
    text-align: center !important;
    padding: 0.7em 1em !important;
    white-space: normal !important; /* allow wrapping */
    word-wrap: break-word !important;
    overflow: visible !important; /* don't clip */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
  }

  /* Subtle visual balance */
  .klaro .cm-footer {
    margin-top: 1rem !important;
    text-align: center !important;
  }
}