/**
 * beehome-forms.css — styling for our native HubSpot form renderer.
 * Layout (group/row, form-columns-N), color custom-props, feedback + errors,
 * E também os styles base de input/label/button (originalmente vinha do JS
 * embed HubSpot que strippamos — LPs novas não têm CSS legacy do HubSpot).
 */

/* ─── Base input/label/button (defensive — só aplica em forms renderizados
 *     pelo beehome-forms.js, identificados por .beehome-form) ───────────── */

.beehome-form .hs-form-label,
.beehome-form .hs-fieldtype-checkbox .hs-form-radio-display label,
.beehome-form label.hs-form-label {
  display: block;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--bh-label-color, #212d3a);
  margin-bottom: 6px;
  line-height: 1.3;
}

.beehome-form .hs-input:not([type="checkbox"]):not([type="radio"]):not([type="file"]) {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: #212d3a;
  background: #ffffff;
  border: 1.5px solid #d0d7de;
  border-radius: 8px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  appearance: none;
}

.beehome-form .hs-input:focus {
  outline: none;
  border-color: #ffdd00;
  box-shadow: 0 0 0 3px rgba(255, 221, 0, 0.25);
}

.beehome-form .hs-input::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.beehome-form select.hs-input,
.beehome-form .hs-fieldtype-select .hs-input {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23667' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.beehome-form textarea.hs-input {
  min-height: 110px;
  resize: vertical;
}

.beehome-form input[type="checkbox"].hs-input,
.beehome-form input[type="radio"].hs-input {
  width: 16px;
  height: 16px;
  margin-right: 8px;
  accent-color: #ffdd00;
}

.beehome-form-feedback {
  display: none;
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 0.95rem;
  line-height: 1.35;
}
.beehome-form-feedback:not(:empty) {
  display: block;
}
.beehome-form-feedback.error {
  background: #fee;
  color: #a11;
  border: 1px solid #f5b5b5;
}

.beehome-form-success {
  padding: 16px 18px;
  border-radius: 8px;
  background: #f0fdf4;
  color: #15803d;
  border: 1px solid #86efac;
  font-weight: 500;
}
.beehome-form-error {
  padding: 12px 14px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  border: 1px dashed #fdba74;
}

.beehome-form .hs-error-msgs:not(:empty) {
  margin-top: 4px;
}
.beehome-form .hs-error-msg {
  display: inline-block;
  color: #b91c1c;
  font-size: 0.85rem;
}

.beehome-form .hs-form-required {
  color: #dc2626;
  margin-left: 2px;
}

/* ─── Group/row layout (form-columns-N fieldsets) ───────────────────────── */
.beehome-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  min-width: 0;
}
.beehome-form fieldset.form-columns-0 { margin-bottom: 10px; }
.beehome-form fieldset.form-columns-1 { display: block; }
.beehome-form fieldset.form-columns-2 {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
}
.beehome-form fieldset.form-columns-2 > .hs-form-field { flex: 1 1 calc(50% - 7px); min-width: 0; }

.beehome-form .hs-form-field {
  margin-bottom: 14px;
  box-sizing: border-box;
}
.beehome-form fieldset > .hs-form-field:last-child { margin-bottom: 0; }

/* Stack 2-col em telas estreitas */
@media (max-width: 640px) {
  .beehome-form fieldset.form-columns-2 > .hs-form-field { flex: 1 1 100%; }
}

/* Dentro de containers estreitos (chat launcher, WhatsApp modal) stack sempre */
#bh-chat-panel .beehome-form fieldset.form-columns-2 > .hs-form-field,
.whatsapp-floating-button .beehome-form fieldset.form-columns-2 > .hs-form-field,
.hs-form.hs-form-compact fieldset.form-columns-2 > .hs-form-field {
  flex: 1 1 100% !important;
}

/* ─── RichText ───────────────────────────────────────────────────────────── */
.beehome-form .hs-richtext { margin: 0 0 10px; line-height: 1.45; }
.beehome-form .hs-richtext p { margin: 0 0 6px; }
.beehome-form .hs-richtext p:last-child { margin-bottom: 0; }

/* ─── Labels + color custom-props (populated from HubSpot displayOptions) ── */
.beehome-form .hs-form-label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: var(--bh-label-color, inherit);
}
.beehome-form .hs-field-desc {
  font-size: 0.85rem;
  color: var(--bh-help-color, #64748b);
  margin: 4px 0 0;
}

/* ─── Submit ─────────────────────────────────────────────────────────────── */
.beehome-form .hs-input[disabled],
.beehome-form .hs-button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}
.beehome-form .hs-submit { width: 100%; margin-top: 16px; }
.beehome-form .hs-submit .hs-button {
  width: 100%; min-width: 180px; padding: 16px 26px; font-weight: 500;
  font-size: 16px; border-radius: 8px;
  background-color: #ffdd00;
  color: #030503;
  border: 0;
  cursor: pointer;
}
#bh-chat-panel .beehome-form .hs-submit .hs-button {
  min-width: auto; padding: 12px 24px; font-weight: 700;
}

/* ─── Legal consent block ────────────────────────────────────────────────── */
.beehome-form .legal-consent-container,
.beehome-form .legal-consent-container .hs-richtext {
  color: var(--bh-legal-color, var(--bh-label-color, inherit));
  font-size: 14px;
  line-height: 1.45;
}
.beehome-form .legal-consent-container .hs-richtext { margin: 8px 0 6px; }
.beehome-form .legal-consent-container .hs-richtext:first-child { margin-top: 0; }

/* Checkbox rows (LGPD + custom single checkboxes) */
.beehome-form .hs-form-booleancheckbox-display { margin: 8px 0; }
.beehome-form .hs-form-booleancheckbox-display-label {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 14px; line-height: 1.4; font-weight: normal;
  cursor: pointer;
  color: var(--bh-legal-color, var(--bh-label-color, inherit));
}
.beehome-form .hs-form-booleancheckbox-display-label input[type="checkbox"] {
  margin-top: 3px; flex: 0 0 auto;
}
.beehome-form .hs-form-booleancheckbox-display-label span,
.beehome-form .hs-form-booleancheckbox-display-label p {
  color: inherit;
  margin: 0;
}

/* ─── Multi-checkboxes (non-legal) ───────────────────────────────────────── */
.beehome-form .hs-multi-checkboxes {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.beehome-form .hs-checkbox-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: normal;
}