.mfb-form-wrapper{
  width:100%;
  font-family: inherit;
}

/*
 * Theme compatibility
 * Many themes add default margins to form elements (input/select/textarea/fieldset).
 * This can cause visual misalignment (including custom placeholder overlays).
 * We neutralize those margins ONLY inside EllaForms.
 */
.mfb-form-wrapper input,
.mfb-form-wrapper select,
.mfb-form-wrapper textarea,
.mfb-form-wrapper fieldset{
  margin-bottom:0 !important;
}

/* Honeypot field (spam protection) */
.mfb-hp{
  position:absolute !important;
  left:-9999px !important;
  width:1px !important;
  height:1px !important;
  overflow:hidden !important;
  opacity:0 !important;
  pointer-events:none !important;
}
.mfb-card{
  overflow:hidden;
}
.mfb-card-header{
  padding:18px 22px;
  text-align:center;
}
.mfb-card-title{
  font-size:28px;
  font-weight:800;
  line-height:1.2;
  margin:0;
}
.mfb-card-body{
  padding:26px 22px 28px;
}
.mfb-progress{
  text-align:center;
  margin-bottom:18px;
}
.mfb-progress-steps{
  list-style:none;
  padding:0;
  margin:0 auto 10px;
  display:flex;
  justify-content:center;
  gap:var(--mfb-progress-gap, 28px);
  position:relative;
  max-width:640px;
}
.mfb-progress-step{
  position:relative;
  z-index:1;
}

/* Connector segments (no line before the first step) */
.mfb-progress-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:calc(100% + var(--mfb-progress-gap, 28px));
  height:6px;
  transform:translateY(-50%);
  background:var(--mfb-progress-line, #d9dee8);
  border-radius:999px;
  z-index:-1;
}
.mfb-progress-step.is-done:not(:last-child)::after{
  background: var(--mfb-progress-done-color, #16a34a);
}
.mfb-progress-dot{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:800;
  font-size:14px;
  box-shadow: 0 0 0 6px rgba(255,255,255,1);
}

.mfb-progress-dot svg{
  width:18px;
  height:18px;
  display:block;
}

/* Active step ring (blue dot with a light-gray outer ring) */
.mfb-progress-step.is-active .mfb-progress-dot{
  box-shadow: 0 0 0 6px rgba(255,255,255,1), 0 0 0 10px var(--mfb-progress-active-ring, var(--mfb-progress-inactive, #dfe6ee));
}
.mfb-step-text{
  display:none;
}
.mfb-step-title{
  text-align:center;
  font-size:20px;
  font-weight:800;
  margin:18px 0 18px;
}

/* Field layout */
.mfb-fields{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--mfb-field-gap, 10px);
}
.mfb-field{
  display:flex;
  flex-direction:column;
  grid-column: span 12;
}
.mfb-col-12{ grid-column: span 12; }
.mfb-col-6{ grid-column: span 6; }
.mfb-col-8{ grid-column: span 8; }
.mfb-col-9{ grid-column: span 9; }
.mfb-col-4{ grid-column: span 4; }
.mfb-col-3{ grid-column: span 3; }

.mfb-label{
  font-size:14px;
  font-weight:700;
  color:#334155;
  margin-bottom: var(--mfb-label-gap, 6px);
}
/* Hide labels (per-form) */
.mfb-form-wrapper.mfb-hide-labels .mfb-field{ position: relative; }
.mfb-form-wrapper.mfb-hide-labels .mfb-label{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Utility: hide visually but keep accessible */
.mfb-sr-only{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.mfb-required{ color:#ef4444; font-weight:900; }
.mfb-input{
  width:100%;
  box-sizing:border-box;
  border:1px solid #cbd5e1;
  border-radius:8px;
  padding:12px 14px;
  font-size:15px;
  line-height:1.2;
  outline:none;
  background:#fff;
}
/* Unified placeholder appearance across ALL ellaforms fields — same weight, same
   color, 0.2 lighter (alpha) than before. Native ::placeholder + overlay variants.
   Kept in separate rules: a vendor-invalid pseudo-element in a selector list will
   make browsers drop the entire rule. */
.mfb-input::placeholder{
  color:rgba(90,108,125,.62) !important;
  -webkit-text-fill-color:rgba(90,108,125,.62) !important;
  font-weight:600 !important;
  opacity:1 !important;
}
.mfb-input::-webkit-input-placeholder{
  color:rgba(90,108,125,.62) !important;
  -webkit-text-fill-color:rgba(90,108,125,.62) !important;
  font-weight:600 !important;
  opacity:1 !important;
}
.mfb-input::-moz-placeholder{
  color:rgba(90,108,125,.62) !important;
  font-weight:500 !important;
  opacity:1 !important;
}
.mfb-overlay-placeholder,
.mfb-textarea-placeholder,
.mfb-textarea-placeholder .mfb-ph-main{ color:rgba(90,108,125,.62) !important; font-weight:500 !important; }
.mfb-textarea-placeholder .mfb-ph-aux{ color:rgba(90,108,125,.45) !important; font-weight:400 !important; opacity:1 !important; }

/* Textarea sizing (25% shorter than browser default) */
textarea.mfb-input{
  min-height:84px;
  height:84px;
  resize:vertical;
  line-height:1.4;
}
/* Suppress the native textarea placeholder when our overlay placeholder is present;
   the overlay lets us render bold "Message" + light "(Optional)" as separate spans. */
.mfb-textarea-wrap{ position:relative; }
.mfb-textarea-wrap textarea.mfb-input::placeholder{ color:transparent; }
.mfb-textarea-wrap .mfb-textarea-placeholder{
  position:absolute;
  left:14px;
  top:12px;
  pointer-events:none;
  color:#9ca3af;
  font-size:15px;
  line-height:1.4;
  letter-spacing:.005em;
  transition:opacity .15s ease, visibility 0s linear .15s;
}
.mfb-textarea-wrap .mfb-textarea-placeholder .mfb-ph-main{ font-weight:600; color:#5a6c7d; }
.mfb-textarea-wrap .mfb-textarea-placeholder .mfb-ph-aux{ font-weight:400; color:#9ca3af; opacity:.85; }
.mfb-textarea-wrap.mfb-has-value .mfb-textarea-placeholder,
.mfb-textarea-wrap:focus-within .mfb-textarea-placeholder{
  opacity:0;
  visibility:hidden;
}

/*
  Selects need a bit more right padding so the native dropdown arrow
  (or theme-provided arrow) never overlaps the option text.
  We override only the right side so custom padding (Field Design)
  can still control top/left/bottom.
*/
select.mfb-input{
  padding-right:44px !important;
}

/* Dropdown (select) wrapper to provide a consistent arrow icon */
.mfb-select-wrap{
  position:relative;
  display:block;
}
.mfb-select-wrap select.mfb-input{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  background-image:none;
}
.mfb-select-arrow{
  position:absolute;
  right:16px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
}
.mfb-select-arrow:before{
  content:'';
  display:block;
  width:7px;
  height:7px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* When placeholder is selected, match the native input ::placeholder exactly
 * (same faded rgba + weight) — the previous solid color made the select
 * placeholder read DARKER than every other field's placeholder. */
.mfb-select-wrap.mfb-is-placeholder select.mfb-input{
  color: rgba(90,108,125,.62) !important;
  -webkit-text-fill-color: rgba(90,108,125,.62) !important;
  font-weight: 600 !important;
}

/*
  Date fields: most browsers ignore the placeholder attribute on <input type="date">
  and show a locale format hint (e.g., dd/mm/yyyy). To display the user-provided
  placeholder, we render an overlay placeholder inside .mfb-date-wrap.
*/
.mfb-date-wrap{
  position:relative;
}
/* The new typeable date field must NOT inherit the legacy
   "-webkit-text-fill-color:transparent" hack that was used to hide the native
   <input type="date"> format hint. Force the visible text + placeholder back. */
.mfb-date-wrap input.mfb-date-text,
.mfb-date-wrap input.mfb-date-text:not(:focus){
  -webkit-text-fill-color: currentColor !important;
  color: inherit;
}
/* Use the global unified placeholder color/weight — no per-field overrides. */
/* Visible text input takes the click — typing is the primary interaction.
   The hidden native <input type="date"> is offscreen but live for picker UI. */
.mfb-date-wrap input.mfb-date-picker{
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  width:1px;
  height:1px;
  border:0;
  padding:0;
  margin:0;
  overflow:hidden;
  clip-path:inset(50%);
}
.mfb-date-wrap input.mfb-date-text{
  padding-right:48px;
  cursor:text;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.mfb-date-wrap:hover input.mfb-date-text{ border-color:#114165; }
/* Calendar icon — actual clickable button, opens the picker. */
.mfb-date-wrap .mfb-date-icon{
  position:absolute;
  right:8px;
  top:50%;
  width:32px;
  height:32px;
  transform:translateY(-50%);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  margin:0;
  cursor:pointer;
  border-radius:8px;
  transition:background .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.mfb-date-wrap .mfb-date-icon:hover,
.mfb-date-wrap .mfb-date-icon:focus{
  background:rgba(17,65,101,.08);
  outline:none;
}
.mfb-date-wrap .mfb-date-icon::before{
  content:"";
  width:18px;
  height:18px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23114165' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='17' rx='3'/><path d='M3 9h18M8 2v4M16 2v4'/></svg>");
  background-repeat:no-repeat;
  background-size:contain;
  opacity:.85;
}
.mfb-date-wrap .mfb-date-icon:hover::before{ opacity:1; }
.mfb-date-wrap .mfb-overlay-placeholder{
  position:absolute;
  left: var(--mfb-input-pl, 14px);
  top: 50%;
  transform: translateY(-50%);
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: calc(100% - 44px);
  color: var(--mfb-ph-color, #9ca3af);
  /* Match the input's typography so the overlay placeholder aligns perfectly */
  font-size: var(--mfb-input-fs, inherit);
  line-height: var(--mfb-input-lh, normal);
  font-weight: var(--mfb-input-fw, inherit);
  font-family: var(--mfb-input-ff, inherit);
}
.mfb-date-wrap.mfb-has-value .mfb-overlay-placeholder,
.mfb-date-wrap:focus-within .mfb-overlay-placeholder{
  opacity:0;
  visibility:hidden;
}

/* Hide native date format hint when empty (so only our overlay placeholder shows) */
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input{
  color: transparent;
}
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input{
  color: inherit;
}
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input::-webkit-datetime-edit,
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input::-webkit-datetime-edit-fields-wrapper,
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input::-webkit-datetime-edit-text,
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input::-webkit-datetime-edit-month-field,
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input::-webkit-datetime-edit-day-field,
.mfb-date-wrap:not(.mfb-has-value) input.mfb-date-input::-webkit-datetime-edit-year-field{
  color: transparent;
}
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input::-webkit-datetime-edit,
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input::-webkit-datetime-edit-fields-wrapper,
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input::-webkit-datetime-edit-text,
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input::-webkit-datetime-edit-month-field,
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input::-webkit-datetime-edit-day-field,
.mfb-date-wrap:not(.mfb-has-value):focus-within input.mfb-date-input::-webkit-datetime-edit-year-field{
  color: inherit;
}
.mfb-input:focus{
  border-color:#0b3a5a;
  box-shadow:0 0 0 3px rgba(11,58,90,.12);
}
.mfb-error{
  /*
    Do not reserve space for errors by default.
    This keeps the spacing between fields equal to the configured field gap.
  */
  margin-top:0;
  font-size:13px;
  color:#dc2626;
  display:none;
}

/* Only show error spacing when there is an actual message */
.mfb-error:not(:empty){
  display:block;
  margin-top:6px;
}

/* Choice fields */
.mfb-choice-box{
  background: var(--mfb-choice-container-bg, transparent);
  border-color: var(--mfb-choice-container-border-color, transparent);
  border-width: var(--mfb-choice-container-border-width, 0);
  border-style: var(--mfb-choice-container-border-style, solid);
  border-radius: var(--mfb-choice-container-radius, 0);
  padding: var(--mfb-choice-container-padding-top, 0) var(--mfb-choice-container-padding-right, 0) var(--mfb-choice-container-padding-bottom, 0) var(--mfb-choice-container-padding-left, 0);
  box-sizing:border-box;
}
.mfb-choices{
  display:flex;
  flex-direction:column;
  /* spacing between checkbox/radio items (configurable per-field) */
  gap: var(--mfb-choice-gap, 10px);
  box-sizing:border-box;
}
.mfb-choice{
  display:inline-flex;
  align-items:center;
  align-self:center;
  gap:10px;
  line-height:1;
  /* Lock the row height to the radio control so all rows are identical. */
  min-height:var(--mfb-choice-size, 20px);
  /* Kill Flatsome/theme "label{margin-bottom:.4em}" that pushes Yes 5.76px taller
     than No and breaks alignment in the row. */
  margin:0 !important;
}
.mfb-choice input{
  margin:0;
  flex:0 0 auto;
  align-self:center;
  vertical-align:middle;
}
.mfb-choice span{
  align-self:center;
  line-height:1.2;
}
.mfb-choice span{
  display:inline-block;
  font-size: var(--mfb-choice-font-size, inherit);
  font-weight: var(--mfb-choice-font-weight, inherit);
  color: var(--mfb-choice-text-color, inherit);
}

/* Radio / Checkbox layout controls */
.mfb-choices--horizontal{
  flex-direction:row;
  flex-wrap:wrap;
}
.mfb-choices--align-left{
  justify-content:flex-start;
  align-items:flex-start;
  text-align:left;
}
.mfb-choices--align-center{
  justify-content:center;
  align-items:center;
  text-align:center;
}
.mfb-choices--align-right{
  justify-content:flex-end;
  align-items:flex-end;
  text-align:right;
}

/*
 * IMPORTANT: Vertical choice lists (column layout)
 *
 * When alignment is set to center/right, the previous styles centered each
 * individual row based on its own width. This makes the checkbox/radio control
 * column "zig-zag" instead of staying in a straight line.
 *
 * Desired behavior:
 * - The whole group can be centered/right-aligned.
 * - The controls (checkbox square / radio circle) should remain left-aligned
 *   in a straight vertical column.
 *
 * Solution:
 * - Make the list an inline-flex block for vertical layouts.
 * - Let the parent (.mfb-choice-box) handle overall alignment via text-align.
 * - Keep items inside left-aligned.
 */
.mfb-choices--vertical.mfb-choices--align-center,
.mfb-choices--vertical.mfb-choices--align-right{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:flex-start;
  text-align:left;
}

/* Parent alignment for the inline-flex choice list */
.mfb-field.mfb-choice-align-center .mfb-choice-box{ text-align:center; }
.mfb-field.mfb-choice-align-right  .mfb-choice-box{ text-align:right; }

.mfb-field.mfb-choice-align-left .mfb-label{ text-align:left; }
.mfb-field.mfb-choice-align-center .mfb-label{ text-align:center; }
.mfb-field.mfb-choice-align-right .mfb-label{ text-align:right; }

/* Custom-sized radio / checkbox controls (per-field via --mfb-choice-size) */
.mfb-choice input[type="radio"],
.mfb-choice input[type="checkbox"]{
  width: var(--mfb-choice-size, 18px);
  height: var(--mfb-choice-size, 18px);
  min-width: var(--mfb-choice-size, 18px);
  min-height: var(--mfb-choice-size, 18px);
  margin: 2px 0 0;
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: var(--mfb-choice-border-width, 2px) solid var(--mfb-choice-border-color, #cbd5e1);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.mfb-choice input[type="radio"]{ border-radius: 999px !important; }
.mfb-choice input[type="checkbox"]{ border-radius: 4px; }

.mfb-choice input[type="radio"]:checked{
  border-color: var(--mfb-choice-border-color, var(--mfb-radio-checked-color, #0b3a5a));
  background-image: radial-gradient(circle at center,
    var(--mfb-radio-dot-color, var(--mfb-radio-checked-color, #0b3a5a)) 0 var(--mfb-radio-dot-radius, calc(var(--mfb-choice-size, 18px) / 4)),
    transparent calc(var(--mfb-radio-dot-radius, calc(var(--mfb-choice-size, 18px) / 4)) + 1px)
  );
}
.mfb-choice input[type="checkbox"]:checked{
  border-color: var(--mfb-choice-border-color, #0b3a5a);
  background-color: #0b3a5a;
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--mfb-choice-size, 18px) - 6px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.0 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}

.mfb-choice input[type="radio"]:focus-visible,
.mfb-choice input[type="checkbox"]:focus-visible{
  outline: 2px solid rgba(11,58,90,.35);
  outline-offset: 2px;
}

.mfb-choice input.is-error{
  border-color:#dc2626 !important;
  outline-color: rgba(220,38,38,.35);
}

/* Multi-input (Name/Address) */
.mfb-subfields{
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap:12px;
}
.mfb-subfield{
  grid-column: span 6;
}
.mfb-subfield.mfb-col-12{ grid-column: span 12; }
.mfb-subfield.mfb-col-6{ grid-column: span 6; }
.mfb-subfield.mfb-col-4{ grid-column: span 4; }
.mfb-subfield.mfb-col-3{ grid-column: span 3; }

/* Content / section fields */
.mfb-section-divider{
  margin:10px 0 6px;
  padding-top:10px;
  border-top:1px solid #e2e8f0;
}
.mfb-section-title{
  font-size:18px;
  font-weight:800;
  color:#0f172a;
}
.mfb-html{
  font-size:14px;
  color:#334155;
}

/* Buttons */
.mfb-btn-row{
  margin-top:20px;
  width:100%;
  box-sizing:border-box;
}

/*
 * Keep submit/status messages from shrinking buttons.
 * The submit status element is rendered inside .mfb-btn-row.
 * In flex layouts, an empty status node can still steal horizontal space,
 * causing 100% width buttons to appear off-center.
 */
.mfb-btn-row{ flex-wrap: wrap; }
.mfb-btn-row .mfb-submit-status{ flex: 0 0 100%; width: 100%; }
.mfb-btn{
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  text-decoration:none;
  transition: all .18s ease;
  box-sizing:border-box;
  /* Theme compatibility: prevent global button margins from shifting alignment */
  margin:0 !important;
}
.mfb-btn[hidden]{ display:none !important; }
.mfb-btn-arrow{
  font-size:20px;
  line-height:1;
}
.mfb-submit-status{
  font-size:13px;
  color:#334155;
}
.mfb-submit-status:not(:empty){
  margin-top:10px;
}
.mfb-submit-status:empty{
  display:none;
}
.mfb-confirmation{
  margin-top:16px;
  padding:14px 14px;
  border:1px solid #bbf7d0;
  background:#f0fdf4;
  border-radius:10px;
  color:#166534;
  font-weight:700;
}

@media (max-width:767px){
  .mfb-card-title{ font-size:22px; }
  .mfb-card-body{ padding:22px 16px 24px; }
  .mfb-progress-steps{ --mfb-progress-gap:14px; }
  .mfb-progress-dot{ width:32px; height:32px; }
  /* per-field mobile override for checkbox/radio spacing */
  .mfb-choices{ gap: var(--mfb-choice-gap-mobile, var(--mfb-choice-gap, 10px)); }
  /* default mobile stack */
  .mfb-col-6, .mfb-col-4, .mfb-col-3{ grid-column: span 12; }
  .mfb-subfield{ grid-column: span 12; }
}


/* Consent box (below submit button) */
.mfb-step-footer{ margin-top:14px; }

.mfb-consent-wrap{ margin-top:14px; }
.mfb-consent-label{ display:flex; gap:12px; align-items:flex-start; }
.mfb-consent-checkbox{
  margin-top:4px;
  width: var(--mfb-consent-size, 18px);
  height: var(--mfb-consent-size, 18px);
  min-width: var(--mfb-consent-size, 18px);
  min-height: var(--mfb-consent-size, 18px);
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  border: var(--mfb-consent-border-width, 2px) solid var(--mfb-consent-border-color, #cbd5e1);
  border-radius: 4px;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
.mfb-consent-checkbox:checked{
  border-color: var(--mfb-consent-border-color, #0b3a5a);
  background-color: #0b3a5a;
  background-repeat: no-repeat;
  background-position: center;
  background-size: calc(var(--mfb-consent-size, 18px) - 6px);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9.0 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
.mfb-consent-content{ font-size:14px; line-height:1.4; color:#6b7280; }
.mfb-consent-content a{ color:inherit; text-decoration:underline; }
.mfb-consent-error{ margin-top:6px; }

/* Button icons */
.mfb-btn-icon{ display:inline-flex; line-height:1; font-size: var(--mfb-icon-size, 20px); transition: transform 160ms ease, opacity 160ms ease; will-change: transform; }
.mfb-btn-icon svg{ width:1em; height:1em; display:block; }
.mfb-btn-icon--image img{ width:1em; height:1em; display:block; object-fit:contain; }

/* Button icon hover animations (optional) */
.mfb-icon-anim-slide-right:hover .mfb-btn-icon{ transform: translateX(6px); }

@keyframes mfbIconBounceRight{
  0%{ transform: translateX(0); }
  50%{ transform: translateX(8px); }
  100%{ transform: translateX(0); }
}
.mfb-icon-anim-bounce-right:hover .mfb-btn-icon{ animation: mfbIconBounceRight 320ms ease-in-out; }

.mfb-icon-anim-pulse:hover .mfb-btn-icon{ transform: scale(1.12); }

/* Submitting button animated dots */
@keyframes mfbDotBounce{
  0%,60%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-4px); }
}
.mfb-submitting-dots{
  display:inline-flex;
  gap:3px;
  align-items:center;
  margin-left:5px;
  vertical-align:middle;
}
.mfb-submitting-dots span{
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:currentColor;
  animation:mfbDotBounce 1.2s ease-in-out infinite;
}
.mfb-submitting-dots span:nth-child(1){ animation-delay:0s; }
.mfb-submitting-dots span:nth-child(2){ animation-delay:0.2s; }
.mfb-submitting-dots span:nth-child(3){ animation-delay:0.4s; }


/* intl-tel-input — phone field integration */
.mfb-field-tel .iti {
  display: block;
  width: 100%;
}
.mfb-field-tel .iti input.mfb-input {
  border-radius: 8px;
}
.iti__country-list {
  z-index: 1100 !important;
  font-size: 14px;
}

/* Hide reCAPTCHA v3 badge — legal per Google if site shows reCAPTCHA branding text */
.grecaptcha-badge {
  visibility: hidden !important;
}