/* ==========================================================
   Lead Form Manager — front-end styles
   1) Base: only what the form needs to work. The DESIGN comes from your
      theme's Tailwind classes on the form (grid gap-4 p-6, text-steel, bg-ink…),
      exactly like the original HTML form.
   2) Skin (.lfm-skin): only used when the theme does NOT have those classes
      (Settings > Design > Automatic / Plugin styles).
   ========================================================== */

/* ---------- 1. Base (always) ---------- */
form.lfm-form [hidden] { display: none !important; }

.lfm-form .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lfm-form .lfm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Choice buttons: custom number per row (default 2 = grid-cols-2 from the theme) */
.lfm-form .lfm-choices[style*="--lfm-cols"] { grid-template-columns: repeat(var(--lfm-cols), minmax(0, 1fr)); }
.lfm-form .lfm-choice:focus-within { outline: 2px solid currentColor; outline-offset: 2px; }

/* Half-width fields (only if you set a field to "Half width") */
form.lfm-form.lfm-has-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
form.lfm-form.lfm-has-half > * { grid-column: 1 / -1; }
form.lfm-form.lfm-has-half > .lfm-half { grid-column: span 1; }
@media (max-width: 560px) { form.lfm-form.lfm-has-half > .lfm-half { grid-column: 1 / -1; } }

/* Two-column layout on desktop (Settings > Design), like the theme's original form */
@media (min-width: 768px) {
  form.lfm-form.lfm-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 16px !important;
    row-gap: 13px !important;
    align-items: start;
  }
  form.lfm-form.lfm-cols-2 > * { grid-column: 1 / -1 !important; }
  form.lfm-form.lfm-cols-2 > .lfm-col,
  form.lfm-form.lfm-cols-2 > .lfm-half { grid-column: span 1 !important; }
}

/* reCAPTCHA */
.lfm-form .lfm-rc-wrap { min-height: 78px; }
.lfm-form .lfm-rc-box { min-height: 78px; }
.lfm-form .lfm-rc-note { margin: 0; text-align: center; font-size: 11px; line-height: 1.5; }
.lfm-form .lfm-rc-note a { color: inherit !important; text-decoration: underline; }
@media (max-width: 360px) { .lfm-form .lfm-rc-box { transform: scale(.88); transform-origin: left top; } }

/* Errors + result message */
.lfm-form .lfm-help { margin: .4rem 0 0; font-size: 12.5px; line-height: 1.45; opacity: .75; }
html body .lfm-form.lfm-form.lfm-form .lfm-error { margin: .4rem 0 0; font-size: 12.5px; font-weight: 600; line-height: 1.4; color: #dc2626 !important; }
html body .lfm-form.lfm-form.lfm-form [aria-invalid="true"] { border-color: #dc2626 !important; }
.lfm-form .lfm-submit:disabled { opacity: .7; cursor: wait; }
.lfm-form .lfm-msg { margin: 0; text-align: center; font-size: 14px; font-weight: 700; line-height: 1.5; }
html body .lfm-form.lfm-form.lfm-form .lfm-msg--ok { color: #15803d !important; }
html body .lfm-form.lfm-form.lfm-form .lfm-msg--err { color: #dc2626 !important; }

/* Text colours: locked (using your theme's own colours, read by form.js) so a dark
   page section with white text can't make labels, notes or typed text invisible. */
.lfm-form .lfm-input,
html body .lfm-form.lfm-form.lfm-form .lfm-input option { color: var(--lfm-text, #0f172a) !important; }
html body .lfm-form.lfm-form.lfm-form .lfm-label { color: var(--lfm-label-final, #c2410c) !important; }
html body .lfm-form.lfm-form.lfm-form .lfm-note { color: var(--lfm-muted, #94a3b8) !important; }
html body .lfm-form.lfm-form.lfm-form .lfm-choice { color: var(--lfm-label, #475569) !important; }
html body .lfm-form.lfm-form.lfm-form .lfm-choice.lfm-choice--on { color: var(--lfm-accent-dark, #c2410c) !important; }
html body .lfm-form.lfm-form.lfm-form .lfm-submit { color: #fff !important; }

/* Thank-you message: shows under the form, then fades away slowly */
.lfm-form .lfm-success {
  position: relative;
  display: flex;
  align-items: center;
  gap: .875rem;
  margin: 0;
  padding: 1rem 1.125rem 1.125rem;
  overflow: hidden;
  text-align: left;
  background: var(--lfm-accent-light, #fff7ed) !important;
  border: 1px solid var(--lfm-accent, #f97316);
  border-radius: .75rem;
  max-height: 260px;
  transition: opacity 1.5s ease, transform 1.5s ease, max-height 1.5s ease, padding 1.5s ease, margin 1.5s ease, border-width 1.5s ease;
}
.lfm-form .lfm-success.is-in { animation: lfm-in .6s cubic-bezier(.2, .8, .2, 1); }
.lfm-form .lfm-success.is-out {
  opacity: 0;
  transform: translateY(-6px);
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-top: -1rem; /* closes the grid gap as it disappears */
  border-width: 0;
}
html body .lfm-form.lfm-form.lfm-form .lfm-success__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  color: #fff !important;
  background: var(--lfm-accent, #f97316);
  border-radius: 999px;
}
.lfm-form .lfm-success__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
html body .lfm-form.lfm-form.lfm-form .lfm-success__label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lfm-accent-dark, #c2410c) !important;
}
html body .lfm-form.lfm-form.lfm-form .lfm-success__title {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--lfm-text, #0f172a) !important;
}
html body .lfm-form.lfm-form.lfm-form .lfm-success__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--lfm-label, #475569) !important;
}
/* Thin bar that empties while the message is shown */
.lfm-form .lfm-success__bar {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  background: var(--lfm-accent, #f97316);
  transform-origin: left center;
  transform: scaleX(0);
}
.lfm-form .lfm-success.has-timer .lfm-success__bar { animation: lfm-bar var(--lfm-hide, 10s) linear forwards; }
@keyframes lfm-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lfm-bar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) {
  .lfm-form .lfm-success, .lfm-form .lfm-success.is-in { animation: none; transition: opacity .3s; }
  .lfm-form .lfm-success.has-timer .lfm-success__bar { animation: none; }
}

/* ---------- 2. Skin (fallback when the theme lacks the Tailwind classes) ---------- */
form.lfm-form.lfm-skin {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem;
  color: var(--lfm-text);
  box-sizing: border-box;
}
form.lfm-form.lfm-skin.lfm-has-half { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lfm-skin *, .lfm-skin *::before, .lfm-skin *::after { box-sizing: border-box; }

.lfm-skin .lfm-label {
  margin: 0;
  padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--lfm-label);
}
.lfm-skin .lfm-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }

.lfm-skin .lfm-input {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: .5rem 0 0;
  padding: .875rem 1rem;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.4;
  color: var(--lfm-text);
  background-color: var(--lfm-field-bg);
  border: 1px solid var(--lfm-border);
  border-radius: .75rem;
  box-shadow: none;
  outline: none;
  transition: border-color .15s, background-color .15s;
}
.lfm-skin textarea.lfm-input { resize: vertical; }
.lfm-skin .lfm-input::placeholder { color: var(--lfm-muted); opacity: 1; }
.lfm-skin .lfm-input:focus { border-color: var(--lfm-accent); background-color: #fff; }

.lfm-skin .lfm-choices {
  display: grid;
  grid-template-columns: repeat(var(--lfm-cols, 2), minmax(0, 1fr));
  gap: .5rem;
  margin-top: .625rem;
}
.lfm-skin .lfm-choice {
  display: block;
  margin: 0;
  padding: .75rem;
  cursor: pointer;
  text-align: center;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--lfm-label);
  background: var(--lfm-field-bg);
  border: 1px solid var(--lfm-border);
  border-radius: .75rem;
  transition: border-color .15s, background-color .15s, color .15s;
}
.lfm-skin .lfm-choice:hover { border-color: var(--lfm-accent); }
.lfm-skin .lfm-choice.lfm-choice--on {
  color: var(--lfm-accent-dark);
  background: var(--lfm-accent-light);
  border-color: var(--lfm-accent);
}

.lfm-skin .lfm-submit {
  display: block;
  width: 100%;
  margin: 0;
  padding: 1rem 1.5rem;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  background: var(--lfm-button);
  border: 0;
  border-radius: .75rem;
  cursor: pointer;
  transition: background-color .15s;
}
.lfm-skin .lfm-submit:hover,
.lfm-skin .lfm-submit:focus-visible { background: var(--lfm-button-hover); }

.lfm-skin .lfm-note {
  margin: 0;
  text-align: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 10.5px;
  color: var(--lfm-muted);
}