:root{
  --hec-bg-grad-start:#f2ebff; --hec-bg-grad-end:#e9f5ff;
  --hec-pill-bg:rgba(255,255,255,.6); --hec-pill-border:rgba(255,255,255,.9);
  --hec-text:#0f172a; --hec-muted:#6b7280;
  --hec-btn:#f36b61; --hec-btn-hover:#e75b52;
  --hec-green:#24c17a; --hec-red:#ff6b6b; --hec-orange:#f59e0b;
}
.hec-widget{ text-align:center; font-family:system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", "Liberation Sans", sans-serif; color:var(--hec-text);
  padding:18px 16px; background:linear-gradient(135deg,var(--hec-bg-grad-start),var(--hec-bg-grad-end)); border-radius:28px; box-shadow:0 8px 30px rgba(16,24,40,.08);}
.hec-title{ margin:4px 6px 16px; font-weight:800; font-size:clamp(22px, 3.0vw, 42px); line-height:1.1;}
.hec-bar{ display:flex; align-items:center; gap:10px; background:var(--hec-pill-bg); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  padding:12px; border-radius:999px; border:1px solid var(--hec-pill-border); max-width:780px; margin:0 auto;}
.hec-input{ flex:1 1 auto; min-width:0; background:transparent; border:0; color:var(--hec-text); padding:16px 16px 16px 18px; font-size:18px; outline:none;}
.hec-input::placeholder{ color:var(--hec-muted); }
.hec-btn{ flex:0 0 auto; border:0; border-radius:999px; padding:14px 24px; font-size:16px; font-weight:700; cursor:pointer; color:#fff; background:var(--hec-btn);
  transition:transform .06s ease, background-color .15s ease, box-shadow .15s ease; box-shadow:0 10px 20px rgba(243,107,97,.25);}
.hec-btn:hover{ background:var(--hec-btn-hover); } .hec-btn:active{ transform:translateY(1px);} .hec-btn[disabled]{ opacity:.7; cursor:not-allowed; }

/* Consent (single checkbox) — styled to match the pill */
.hec-consent{ max-width:780px; margin:12px auto 0; text-align:left; }
.hec-check{ display:flex; align-items:center; gap:10px; }
.hec-check input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  width:22px; height:22px; border-radius:8px;
  border:1px solid var(--hec-pill-border);
  background: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 2px 8px rgba(17,24,39,.06);
  position: relative; cursor: pointer;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.hec-check input[type="checkbox"]:checked{
  border-color: transparent;
  background: linear-gradient(135deg, #8ad3ff, #f5b3ff);
  box-shadow: 0 6px 16px rgba(100,116,139,.25);
}
.hec-check input[type="checkbox"]:checked::after{
  content:""; position:absolute; left:6px; top:3px; width:8px; height:14px; border:3px solid #fff; border-top:0; border-left:0; transform:rotate(45deg);
}
.hec-check-label{ color:var(--hec-text); font-size:14px; }

.hec-badge{ display:inline-block; margin:16px 6px 0; padding:10px 18px; border-radius:16px; font-weight:800; color:#fff; visibility:hidden; box-shadow:0 6px 18px rgba(17,24,39,.12);}
.hec-badge.show{ visibility:visible; } .hec-badge.success{ background:var(--hec-green);} .hec-badge.danger{ background:var(--hec-red);} .hec-badge.warn{ background:var(--hec-orange);}
.hec-note{ margin:8px 10px 0; font-size:13px; color:var(--hec-muted);}
@media (max-width:600px){ .hec-title{ font-size:clamp(20px,7vw,30px);} .hec-btn{ padding:12px 18px;} }


/* === 1.4.2 — Stacked layout + native checkbox (2025‑10‑12) === */

/* 1) Always stack: input first row, button second row */
.hec-bar{
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 10px !important;
}
.hec-input, .hec-btn{
  width: 100% !important;
  min-height: 50px !important;
  border-radius: 12px !important;
}

/* 2) Native, larger checkbox without any custom graphics */
.hec-consent, .hec-check{ list-style: none !important; }
.hec-consent *::marker{ content: "" !important; } /* prevent theme bullets */
.hec-check{
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}
.hec-check input[type="checkbox"]{
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  position: static !important;
  width: 18px !important; height: 18px !important; /* baseline size */
  transform: scale(1.35) !important; /* make it clearly visible on mobile */
  transform-origin: top left !important;
  margin: 2px 8px 0 0 !important;
  border: initial !important;
  background: initial !important;
  box-shadow: none !important;
}
.hec-check input[type="checkbox"]::before,
.hec-check input[type="checkbox"]::after{ content:none !important; display:none !important; }

/* Typography of label for readability */
.hec-check-label{ font-size: 16px !important; line-height: 1.45 !important; }

/* 3) Minor spacing below the consent from the widget body */
.hec-consent{ margin-top: 10px !important; }

/* 4) Safe defaults on tiny screens as well */
@media (max-width: 480px){
  .hec-input, .hec-btn{ min-height: 48px !important; }
  .hec-check-label{ font-size: 15px !important; }
}


/* === 1.4.3 — Remove decorative pill background behind input/button === */
.hec-bar{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  padding: 0 !important;
  gap: 12px !important;
}


/* === 1.4.4 — Add extra spacing between button and checkbox text === */
.hec-consent{
  margin-top: 24px !important; /* increased spacing */
}


/* === 1.4.5 — Strong spacing between button and consent === */
.hec-widget .hec-bar{ margin-bottom: 28px !important; } /* create gap under the bar (button sits inside) */
.hec-widget .hec-btn{ margin-bottom: 0 !important; } /* ensure theme doesn't collapse it */
.hec-widget .hec-consent{ margin-top: 0 !important; } /* rely on bar margin for consistent spacing */