/* ============================================================
   Brazilian Forms — Base Stylesheet
   CSS custom properties are set inline per widget instance.
   ============================================================ */

/* ── Reset ── */
.bf-wrapper *,
.bf-wrapper *::before,
.bf-wrapper *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Wrapper ── */
.bf-wrapper {
  width: 100% !important;
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif) !important;
}

/* ── Grid ── */
.bf-wrapper .bf-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--bf-grid-gap, 14px) !important;
}

/* ── Field containers ── */
.bf-wrapper .bf-field {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--bf-label-spacing, 6px) !important;
}

.bf-wrapper .bf-field.w-100 {
  flex: 1 1 100% !important;
}

.bf-wrapper .bf-field.w-50 {
  flex: 1 1 calc(50% - (var(--bf-grid-gap, 14px) / 2)) !important;
  min-width: 200px !important;
}

.bf-wrapper .bf-field.w-33 {
  flex: 1 1 calc(33.333% - (var(--bf-grid-gap, 14px) * 0.67)) !important;
  min-width: 160px !important;
}

/* ── Labels ── */
.bf-wrapper label,
.bf-wrapper .bf-check-label {
  display: block !important;
  font-size: var(--bf-label-size, 0.78rem);
  font-weight: 700;
  color: var(--bf-label-color, #3a5a3a) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
}

.bf-wrapper .bf-req {
  color: var(--bf-req-color, var(--bf-focus-color, #01A050)) !important;
  margin-left: 2px !important;
}

.bf-wrapper .bf-opt {
  color: var(--bf-opt-color, #9aab9a) !important;
  font-weight: 400;
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

/* ── Inputs, selects, textareas ── */
.bf-wrapper input[type="text"],
.bf-wrapper input[type="email"],
.bf-wrapper input[type="tel"],
.bf-wrapper input[type="number"],
.bf-wrapper input[type="password"],
.bf-wrapper input[type="date"],
.bf-wrapper select,
.bf-wrapper textarea {
  display: block !important;
  width: 100% !important;
  padding: var(--bf-input-py, 12px) var(--bf-input-px, 14px) !important;
  border: var(--bf-input-border-width, 1.5px) solid var(--bf-input-border-color, #d0ddd0) !important;
  border-radius: var(--bf-input-radius, 10px) !important;
  font-size: var(--bf-input-font-size, 0.95rem);
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif);
  color: var(--bf-input-color, #1a2e1a) !important;
  background: var(--bf-input-bg, #ffffff) !important;
  outline: none !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  line-height: 1.5;
  height: auto !important;
  min-height: unset !important;
  max-height: unset !important;
}

.bf-wrapper input::placeholder,
.bf-wrapper textarea::placeholder {
  color: var(--bf-input-placeholder-color, #b0bdb0) !important;
  opacity: 1 !important;
}

.bf-wrapper input:focus,
.bf-wrapper select:focus,
.bf-wrapper textarea:focus {
  border-color: var(--bf-focus-color, #01A050) !important;
  box-shadow: 0 0 0 3px var(--bf-focus-shadow, rgba(1, 160, 80, 0.12)) !important;
}

/* ── Error state ── */
.bf-wrapper input.bf-error,
.bf-wrapper select.bf-error,
.bf-wrapper textarea.bf-error {
  border-color: var(--bf-error-color, #e53e3e) !important;
  box-shadow: 0 0 0 3px var(--bf-error-shadow, rgba(229, 62, 62, 0.10)) !important;
}

.bf-wrapper .bf-errmsg {
  display: none !important;
  font-size: 0.74rem;
  color: var(--bf-error-color, #e53e3e) !important;
}

.bf-wrapper .bf-field.has-error .bf-errmsg {
  display: block !important;
}

/* ── Select — custom arrow ── */
.bf-wrapper select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233a5a3a' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  padding-right: 36px !important;
  cursor: pointer !important;
}

/* ── State UF select with flag image ── */
.bf-wrapper .bf-sel-wrap {
  position: relative !important;
  display: block !important;
}

.bf-wrapper .bf-flag-img {
  position: absolute !important;
  left: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  pointer-events: none !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}

.bf-wrapper select[data-bf-type="state-uf"] {
  padding-left: 40px !important;
}

/* reCAPTCHA injeta uma textarea oculta — garantir que nunca apareça */
.bf-wrapper .g-recaptcha textarea,
.bf-wrapper textarea[name="g-recaptcha-response"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
}

/* ── Textarea ── */
.bf-wrapper textarea {
  resize: vertical !important;
  min-height: 120px !important;
}

/* ── Checkboxes & Radios ── */
.bf-wrapper .bf-checkboxes-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px 24px !important;
  padding: 4px 0 !important;
}

.bf-wrapper .bf-check-item {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bf-wrapper .bf-check-item input[type="checkbox"],
.bf-wrapper .bf-check-item input[type="radio"] {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: var(--bf-check-size, 19px) !important;
  height: var(--bf-check-size, 19px) !important;
  min-width: var(--bf-check-size, 19px) !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1.5px solid var(--bf-check-border-color, var(--bf-input-border-color, #d0ddd0)) !important;
  border-radius: 5px !important;
  background: var(--bf-input-bg, #ffffff) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s !important;
  vertical-align: middle !important;
}

.bf-wrapper .bf-check-item input[type="checkbox"]:focus,
.bf-wrapper .bf-check-item input[type="radio"]:focus {
  outline: none !important;
  border-color: var(--bf-check-color, var(--bf-focus-color, #01A050)) !important;
  box-shadow: 0 0 0 3px var(--bf-focus-shadow, rgba(1, 160, 80, 0.12)) !important;
}

/* Checked state — background */
.bf-wrapper .bf-check-item input[type="checkbox"]:checked {
  background: var(--bf-check-color, var(--bf-focus-color, #01A050)) !important;
  border-color: var(--bf-check-color, var(--bf-focus-color, #01A050)) !important;
}

/* Checkmark via ::before */
.bf-wrapper .bf-check-item input[type="checkbox"]:checked::before {
  content: '' !important;
  position: absolute !important;
  left: 5px !important;
  top: 2px !important;
  width: 5px !important;
  height: 9px !important;
  border: 2px solid #ffffff !important;
  border-top: none !important;
  border-left: none !important;
  transform: rotate(42deg) !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Radio */
.bf-wrapper .bf-check-item input[type="radio"] {
  border-radius: 50% !important;
}

.bf-wrapper .bf-check-item input[type="radio"]:checked {
  border-color: var(--bf-check-color, var(--bf-focus-color, #01A050)) !important;
  background: var(--bf-input-bg, #ffffff) !important;
}

/* Filled dot via ::before */
.bf-wrapper .bf-check-item input[type="radio"]:checked::before {
  content: '' !important;
  position: absolute !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  background: var(--bf-check-color, var(--bf-focus-color, #01A050)) !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
}

.bf-wrapper .bf-check-item span {
  font-size: 0.9rem;
  color: var(--bf-check-text-color, var(--bf-input-color, #1a2e1a)) !important;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.4;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ── Submit button ── */
.bf-wrapper .bf-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: var(--bf-btn-py, 14px) var(--bf-btn-px, 24px) !important;
  background: var(--bf-btn-bg, #01A050) !important;
  color: var(--bf-btn-color, #ffffff) !important;
  border: none !important;
  border-radius: var(--bf-btn-radius, 10px) !important;
  font-size: var(--bf-btn-font-size, 1rem);
  font-weight: 700;
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif);
  cursor: pointer !important;
  letter-spacing: 0.02em;
  margin-top: 4px !important;
  transition: background 0.2s, transform 0.1s !important;
  text-decoration: none !important;
  box-shadow: none !important;
  outline: none !important;
  line-height: 1.5;
  height: auto !important;
}

.bf-wrapper .bf-btn:hover:not(:disabled) {
  background: var(--bf-btn-hover, #007234) !important;
}

.bf-wrapper .bf-btn:active:not(:disabled) {
  transform: scale(0.99) !important;
}

.bf-wrapper .bf-btn:disabled {
  opacity: 0.85 !important;
  cursor: not-allowed !important;
}

.bf-wrapper .bf-btn svg {
  flex-shrink: 0 !important;
}

/* ── Spinner ── */
.bf-wrapper .bf-spinner {
  width: 18px !important;
  height: 18px !important;
  border: 2.5px solid rgba(255, 255, 255, 0.35) !important;
  border-top-color: #fff !important;
  border-radius: 50% !important;
  animation: bfSpin 0.7s linear infinite !important;
  display: none !important;
  flex-shrink: 0 !important;
}

@keyframes bfSpin {
  to { transform: rotate(360deg); }
}

.bf-wrapper .bf-btn.loading .bf-spinner  { display: block !important; }
.bf-wrapper .bf-btn.loading .bf-btn-icon { display: none !important; }

/* ── Success message ── */
.bf-wrapper .bf-success {
  display: none !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 3rem 2rem !important;
  animation: bfFadeIn 0.4s ease !important;
}

.bf-wrapper .bf-success.bf-visible {
  display: flex !important;
}

@keyframes bfFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.bf-wrapper .bf-success-icon {
  width: 72px !important;
  height: 72px !important;
  background: var(--bf-success-icon-bg, #e8f7ef) !important;
  color: var(--bf-success-icon-color, #01A050) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 1.5rem !important;
}

.bf-wrapper .bf-success-icon svg {
  stroke: currentColor !important;
}

.bf-wrapper .bf-success h3 {
  font-size: 1.5rem;
  color: var(--bf-success-title-color, #1a2e1a) !important;
  margin-bottom: 0.5rem !important;
  font-weight: 700;
  line-height: 1.3;
}

.bf-wrapper .bf-success p {
  color: var(--bf-success-subtitle-color, #5a7a5a) !important;
  font-size: 0.95rem;
  max-width: 380px !important;
  line-height: 1.6;
}

/* ── Button icon image ── */
.bf-wrapper .bf-btn-icon--img {
  width: 20px !important;
  height: 20px !important;
  object-fit: contain !important;
  flex-shrink: 0 !important;
}

/* ── Button icon (SVG inline + default) ── */
.bf-wrapper .bf-btn-icon {
  width: var(--bf-btn-icon-size, 20px) !important;
  height: var(--bf-btn-icon-size, 20px) !important;
  flex-shrink: 0 !important;
  /* color cascades para fill/stroke="currentColor" nos filhos do SVG */
  color: var(--bf-btn-icon-color, currentColor) !important;
}
.bf-wrapper .bf-btn:hover:not(:disabled) .bf-btn-icon {
  color: var(--bf-btn-icon-hover-color, var(--bf-btn-icon-color, currentColor)) !important;
}

/* ── Custom state select dropdown ── */
.bf-wrapper .bf-custom-select {
  position: relative !important;
  display: block !important;
  width: 100% !important;
}

.bf-wrapper .bf-custom-select__trigger {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  padding: var(--bf-dd-py, var(--bf-input-py, 12px)) var(--bf-dd-px, var(--bf-input-px, 14px)) !important;
  border: var(--bf-dd-border-width, var(--bf-input-border-width, 1.5px)) solid var(--bf-dd-border-color, var(--bf-input-border-color, #d0ddd0)) !important;
  border-radius: var(--bf-dd-radius, var(--bf-input-radius, 10px)) !important;
  font-size: var(--bf-input-font-size, 0.95rem);
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif);
  color: var(--bf-dd-color, var(--bf-input-color, #1a2e1a)) !important;
  background: var(--bf-dd-bg, var(--bf-input-bg, #ffffff)) !important;
  cursor: pointer !important;
  user-select: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
  box-sizing: border-box !important;
}

.bf-wrapper .bf-custom-select__trigger:focus {
  outline: none !important;
  border-color: var(--bf-dd-active-color, var(--bf-focus-color, #01A050)) !important;
  box-shadow: 0 0 0 3px var(--bf-focus-shadow, rgba(1, 160, 80, 0.12)) !important;
}

.bf-wrapper .bf-custom-select__trigger.bf-error {
  border-color: var(--bf-error-color, #e53e3e) !important;
  box-shadow: 0 0 0 3px var(--bf-error-shadow, rgba(229, 62, 62, 0.10)) !important;
}

.bf-wrapper .bf-custom-select.bf-cs-open .bf-custom-select__trigger {
  border-color: var(--bf-dd-active-color, var(--bf-focus-color, #01A050)) !important;
  box-shadow: 0 0 0 3px var(--bf-focus-shadow, rgba(1, 160, 80, 0.12)) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

.bf-wrapper .bf-cs-flag,
.bf-wrapper .bf-cs-opt-flag {
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bf-wrapper .bf-cs-text {
  flex: 1 !important;
  text-align: left !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.bf-wrapper .bf-cs-placeholder {
  color: var(--bf-dd-placeholder-color, var(--bf-input-placeholder-color, #b0bdb0)) !important;
}

.bf-wrapper .bf-cs-arrow {
  flex-shrink: 0 !important;
  transition: transform 0.2s !important;
  color: var(--bf-label-color, #3a5a3a) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bf-wrapper .bf-custom-select.bf-cs-open .bf-cs-arrow {
  transform: rotate(180deg) !important;
}

.bf-wrapper .bf-custom-select__dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  background: var(--bf-dd-panel-bg, var(--bf-dd-bg, var(--bf-input-bg, #ffffff))) !important;
  border: var(--bf-dd-border-width, var(--bf-input-border-width, 1.5px)) solid var(--bf-dd-active-color, var(--bf-focus-color, #01A050)) !important;
  border-top: none !important;
  border-bottom-left-radius: var(--bf-dd-radius, var(--bf-input-radius, 10px)) !important;
  border-bottom-right-radius: var(--bf-dd-radius, var(--bf-input-radius, 10px)) !important;
  max-height: 260px !important;
  overflow-y: auto !important;
  z-index: 99999 !important;
  display: none !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.10) !important;
}

.bf-wrapper .bf-custom-select.bf-cs-open .bf-custom-select__dropdown {
  display: block !important;
}

.bf-wrapper .bf-custom-select__dropdown::-webkit-scrollbar {
  width: 5px !important;
}

.bf-wrapper .bf-custom-select__dropdown::-webkit-scrollbar-track {
  background: transparent !important;
}

.bf-wrapper .bf-custom-select__dropdown::-webkit-scrollbar-thumb {
  background: var(--bf-input-border-color, #d0ddd0) !important;
  border-radius: 3px !important;
}

.bf-wrapper .bf-custom-select__option {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px var(--bf-dd-px, var(--bf-input-px, 14px)) !important;
  cursor: pointer !important;
  transition: background 0.12s !important;
  font-size: var(--bf-input-font-size, 0.95rem);
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif);
  color: var(--bf-dd-color, var(--bf-input-color, #1a2e1a)) !important;
  margin: 0 !important;
}

.bf-wrapper .bf-custom-select__option:hover {
  background: var(--bf-dd-option-hover-bg, rgba(1, 160, 80, 0.07)) !important;
}

.bf-wrapper .bf-custom-select__option.bf-cs-selected {
  background: var(--bf-dd-option-selected-bg, rgba(1, 160, 80, 0.13)) !important;
  font-weight: 600 !important;
}

/* ── File upload field ── */
.bf-wrapper .bf-upload-wrap {
  position: relative !important;
  width: 100% !important;
}

.bf-wrapper .bf-upload-input {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  z-index: -1 !important;
  left: 0 !important;
  top: 0 !important;
  pointer-events: none !important;
}

.bf-wrapper .bf-upload-ui {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 28px 20px !important;
  border: 2px dashed var(--bf-input-border-color, #d0ddd0) !important;
  border-radius: var(--bf-input-radius, 10px) !important;
  background: var(--bf-input-bg, #ffffff) !important;
  color: var(--bf-input-placeholder-color, #b0bdb0) !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: border-color 0.2s, background 0.2s, color 0.2s !important;
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif) !important;
  user-select: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.bf-wrapper .bf-upload-ui:hover,
.bf-wrapper .bf-upload-wrap.bf-upload-drag .bf-upload-ui {
  border-color: var(--bf-focus-color, #01A050) !important;
  background: rgba(1, 160, 80, 0.04) !important;
  color: var(--bf-focus-color, #01A050) !important;
}

.bf-wrapper .bf-upload-ui svg {
  flex-shrink: 0 !important;
  width: 28px !important;
  height: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.bf-wrapper .bf-upload-text {
  font-size: var(--bf-input-font-size, 0.95rem);
  font-weight: 600;
  color: inherit !important;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0 !important;
}

.bf-wrapper .bf-upload-hint {
  font-size: 0.75rem;
  color: inherit !important;
  opacity: 0.75 !important;
  line-height: 1.4;
  margin: 0 !important;
  padding: 0 !important;
}

.bf-wrapper .bf-upload-info {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: var(--bf-input-py, 12px) var(--bf-input-px, 14px) !important;
  border: var(--bf-input-border-width, 1.5px) solid var(--bf-focus-color, #01A050) !important;
  border-radius: var(--bf-input-radius, 10px) !important;
  background: rgba(1, 160, 80, 0.04) !important;
  font-size: var(--bf-input-font-size, 0.95rem) !important;
  font-family: var(--bf-font, 'Segoe UI', system-ui, sans-serif) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.bf-wrapper .bf-upload-filename {
  flex: 1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: var(--bf-input-color, #1a2e1a) !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--bf-input-font-size, 0.95rem) !important;
}

.bf-wrapper .bf-upload-remove {
  flex-shrink: 0 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  border: none !important;
  background: var(--bf-error-shadow, rgba(229, 62, 62, 0.10)) !important;
  color: var(--bf-error-color, #e53e3e) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background 0.15s !important;
  font-family: inherit !important;
}

.bf-wrapper .bf-upload-remove:hover {
  background: var(--bf-error-color, #e53e3e) !important;
  color: #ffffff !important;
}

/* Error state on upload UI */
.bf-wrapper .bf-field.has-error .bf-upload-ui {
  border-color: var(--bf-error-color, #e53e3e) !important;
  color: var(--bf-error-color, #e53e3e) !important;
}

/* ── Captcha field ── */
.bf-wrapper .bf-captcha-field {
  justify-content: flex-start !important;
}

/* ── Responsive ── */
@media (max-width: 520px) {
  .bf-wrapper .bf-field.w-50,
  .bf-wrapper .bf-field.w-33 {
    flex: 1 1 100% !important;
  }
}