/* ═══════════════════════════════════════════════════════════════════════════
   LD CRM Forms — Frontend Design System
   Two presets (clean/modern), floating labels, validation, success animation,
   column layout, responsive.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Base ───────────────────────────────────────────────────────────────── */
.ld-form { max-width: 640px; font-family: inherit; }
.ld-form__form { position: relative; }

/* ── Column layout ──────────────────────────────────────────────────────── */
.ld-form__row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.ld-form__row:last-of-type { margin-bottom: 0; }
.ld-form__field--full { flex: 0 0 100%; }
.ld-form__field--half { flex: 0 0 calc(50% - 0.375rem); }

/* ── Fields container (1.5.0+) ─────────────────────────────────────────────
   `.ld-form__fields` stacks the form's blocks (core flow layout: core adds
   `is-layout-flow` and the block spacing). Side-by-side fields sit in core
   Columns inside it. */
.ld-form__fields > .ld-form__actions:first-child,
.wp-block-column > .ld-form__actions:first-child { margin-top: 0; }

/* ── Per-field / per-button style settings (1.5.0+) ─────────────────────
   The field and submit blocks' Styles-tab settings arrive as custom
   properties on the field wrapper (--ld-field-{label|input|placeholder|help}-*
   typography, --ld-field-*-color, --ld-field-input-border-{width,style} and -radius) or the
   button row (--ld-button-*), set inline by render.php and the editor. Every
   rule that reads one keeps the preset's look as its fallback. For inherited
   properties the var() has no fallback on purpose: an unset variable makes
   the declaration behave as `unset`, i.e. plain inheritance, as before. */
.ld-form__actions { font-family: var(--ld-button-font-family); }

/* ── Labels ─────────────────────────────────────────────────────────────── */
.ld-form__label {
  display: block; margin-bottom: 0.25rem;
  font-family: var(--ld-field-label-font-family);
  font-weight: var(--ld-field-label-font-weight, 600);
  font-size: var(--ld-field-label-font-size, 0.875rem);
  font-style: var(--ld-field-label-font-style);
  line-height: var(--ld-field-label-line-height);
  letter-spacing: var(--ld-field-label-letter-spacing);
  text-transform: var(--ld-field-label-text-transform);
  color: var(--ld-field-label-color);
}
.ld-form__label span[aria-hidden] { color: #dc2626; margin-left: 2px; }

/* ── Inputs — Clean preset (default) ────────────────────────────────────── */
.ld-form__input,
.ld-form__textarea,
.ld-form__select {
  display: block; width: 100%; padding: 0.5rem 0.75rem;
  font-family: var(--ld-field-input-font-family);
  font-size: var(--ld-field-input-font-size);
  font-weight: var(--ld-field-input-font-weight, 400);
  line-height: var(--ld-field-input-line-height, 1.5);
  font-style: var(--ld-field-input-font-style, normal);
  letter-spacing: var(--ld-field-input-letter-spacing, normal);
  text-transform: var(--ld-field-input-text-transform, none);
  color: var(--ld-field-input-color);
  background-color: var(--ld-field-input-bg, #fff);
  /* Core Background panel: gradient layer over image layer over color. */
  background-image: var(--ld-field-input-gradient, none), var(--ld-field-input-bg-image, none);
  background-size: 100% 100%, var(--ld-field-input-bg-size, cover);
  background-position: 0 0, var(--ld-field-input-bg-position, 50% 50%);
  background-repeat: no-repeat, var(--ld-field-input-bg-repeat, no-repeat);
  background-attachment: scroll, var(--ld-field-input-bg-attachment, scroll);
  border: var(--ld-field-input-border-width, 1px) var(--ld-field-input-border-style, solid) var(--ld-field-input-border, #d1d5db);
  border-radius: var(--ld-field-input-radius, 6px);
  transition: border-color 0.15s, box-shadow 0.15s; box-sizing: border-box;
}
.ld-form__input:focus, .ld-form__textarea:focus, .ld-form__select:focus {
  outline: none; border-color: var(--ld-form-highlight, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-form-highlight, #2563eb) 15%, transparent);
}
.ld-form__textarea { resize: vertical; min-height: 80px; }

/* Placeholder typography inherits from the input unless set. Its color is
   only overridden when set (keyed on the inline property), because an unset
   var() would replace the browser's default grey with the input text color. */
.ld-form__input::placeholder,
.ld-form__textarea::placeholder {
  font-family: var(--ld-field-placeholder-font-family);
  font-size: var(--ld-field-placeholder-font-size);
  font-weight: var(--ld-field-placeholder-font-weight);
  font-style: var(--ld-field-placeholder-font-style);
  line-height: var(--ld-field-placeholder-line-height);
  letter-spacing: var(--ld-field-placeholder-letter-spacing);
  text-transform: var(--ld-field-placeholder-text-transform);
}
[style*="--ld-field-placeholder-color"] .ld-form__input::placeholder,
[style*="--ld-field-placeholder-color"] .ld-form__textarea::placeholder {
  color: var(--ld-field-placeholder-color); opacity: 1;
}

/* Custom chevron for selects — replaces the browser-native arrow which is
   inconsistent across Chrome/Firefox/Safari and tends to look heavy. The
   SVG below is a thin grey caret; padding-right reserves space for it. */
.ld-form__select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 2.25rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.75l3 3 3-3'/%3E%3C/svg%3E"), var(--ld-field-input-gradient, none), var(--ld-field-input-bg-image, none);
  /* Caret layer, then the Background gradient and image layers. */
  background-repeat: no-repeat, no-repeat, var(--ld-field-input-bg-repeat, no-repeat);
  background-position: right 0.75rem center, 0 0, var(--ld-field-input-bg-position, 50% 50%);
  background-size: 12px 12px, 100% 100%, var(--ld-field-input-bg-size, cover);
  background-attachment: scroll, scroll, var(--ld-field-input-bg-attachment, scroll);
}
/* Hide IE/legacy Edge select arrow if anyone is still on those. */
.ld-form__select::-ms-expand { display: none; }

/* ── Modern preset ──────────────────────────────────────────────────────── */
[data-style="modern"] .ld-form__input,
[data-style="modern"] .ld-form__textarea,
[data-style="modern"] .ld-form__select {
  background-color: var(--ld-field-input-bg, #f3f4f6);
  border-color: var(--ld-field-input-border, transparent);
  border-radius: var(--ld-field-input-radius, 8px);
  padding: 0.625rem 0.875rem;
}
[data-style="modern"] .ld-form__select { padding-right: 2.5rem; }
[data-style="modern"] .ld-form__input:focus,
[data-style="modern"] .ld-form__textarea:focus,
[data-style="modern"] .ld-form__select:focus {
  background-color: #fff; border-color: var(--ld-form-highlight, #2563eb); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-form-highlight, #2563eb) 12%, transparent);
}
[data-style="modern"] .ld-form__button {
  border-radius: var(--ld-button-radius-tl, var(--ld-button-radius, 8px)) var(--ld-button-radius-tr, var(--ld-button-radius, 8px))
                 var(--ld-button-radius-br, var(--ld-button-radius, 8px)) var(--ld-button-radius-bl, var(--ld-button-radius, 8px));
}

/* ── Label positions ────────────────────────────────────────────────────────
   Three modes, set per-field via .ld-form__field--label-{top|float|none}.
   render.php and the editor's FieldCard always emit one of these classes
   for every field (resolveLabelPosition() returns the resolved mode); the
   per-field class is the single source of truth for label positioning.    */

/* Hidden label — visitor sees only placeholder + help text. Kept in DOM for
   forms tooling that pre-populates by label, but visually + a11y hidden. */
.ld-form__field--label-none .ld-form__label { display: none; }

/* Floating-label mode — keyed entirely on the per-field class.
 *
 * History note: pre-1.2 forms used a form-level [data-floating-labels]
 * attribute to enable floating labels for every field. That selector
 * matched ALL labels inside the form regardless of per-field overrides,
 * which broke any field type that needed to force 'top' (Checkboxes/Radios
 * legend, Phone with country-code selector). render.php and the editor's
 * FieldCard now always emit an explicit `.ld-form__field--label-{top|float|none}`
 * class on every field, so the per-field class is the single source of
 * truth for label positioning. The `data-floating-labels` attribute is
 * still emitted on the form wrapper for backward-compat with any custom
 * CSS that targets it, but our internal styles no longer use it. */
.ld-form__field--label-float { position: relative; }

.ld-form__field--label-float > .ld-form__label {
  position: absolute; top: 0.625rem; left: 0.75rem; margin: 0;
  font-weight: 400; font-size: var(--ld-field-label-font-size, 0.875rem);
  color: var(--ld-field-label-color, #6b7280);
  pointer-events: none; transition: transform 0.2s, font-size 0.2s, color 0.2s;
  transform-origin: left top; z-index: 1;
}
.ld-form__field--label-float .ld-form__input,
.ld-form__field--label-float .ld-form__textarea,
.ld-form__field--label-float .ld-form__select {
  padding-top: 1.25rem; padding-bottom: 0.25rem;
}
/* Use :focus-within (matches when ANY descendant is focused) instead of
   :focus + sibling combinator. The sibling combinator (~) requires the
   input and label to be direct siblings, which breaks for fields where
   the input is nested (e.g. typeahead combobox). :focus-within works
   regardless of nesting depth.
   For the "has value" state we rely entirely on the JS-driven
   .ld-form__field--has-value class set by initFloatingLabels() in view.ts.
   It tracks input/textarea/select values uniformly — :placeholder-shown
   doesn't help for selects or for nested inputs. */
.ld-form__field--label-float:focus-within > .ld-form__label,
.ld-form__field--label-float.ld-form__field--has-value > .ld-form__label {
  transform: translateY(-0.5rem); font-size: 0.6875rem; font-weight: 600; color: var(--ld-form-highlight, #2563eb);
}

/* Safety override: <legend> elements should NEVER get the floating-label
   transform. Legends are the visible group label for fieldsets (multi-
   checkboxes), not floating labels — when they share the .ld-form__label
   class with input labels, the descendant selector above would otherwise
   absolute-position the legend on top of the first option in the group. */
.ld-form__field--label-float legend.ld-form__label,
.ld-form__checkboxes > legend.ld-form__label {
  position: static !important;
  transform: none !important;
  font-size: var(--ld-field-label-font-size) !important;
  font-weight: var(--ld-field-label-font-weight, 600) !important;
  color: var(--ld-field-label-color) !important;
  pointer-events: auto !important;
}

/* ── Button ─────────────────────────────────────────────────────────────── */
.ld-form__actions { margin-top: 1.25rem; }
/* Submit button alignment (submit block, 1.5.0+). Full-width buttons ignore it. */
.ld-form__actions--align-center { text-align: center; }
.ld-form__actions--align-right { text-align: right; }
/* The submit block can sit between fields: space the row that follows it. */
.ld-form__actions + .ld-form__row { margin-top: 1rem; }
/* Submit block settings arrive as --ld-button-* (render.php / editor):
   core Border, Dimensions (padding), Shadow and Background panels, plus the
   States section's hover / active colors. Padding, border and radius are per
   side / per corner so a partial setting keeps the other sides' defaults.
   `.is-preview-{hover|active}` lets the editor show a state on the canvas. */
.ld-form__button {
  display: inline-flex; align-items: center; justify-content: center;
  box-sizing: border-box; max-width: 100%;
  width: var(--ld-button-width, auto);
  padding: var(--ld-button-padding-top, 0.625rem) var(--ld-button-padding-right, 1.5rem)
           var(--ld-button-padding-bottom, 0.625rem) var(--ld-button-padding-left, 1.5rem);
  font-family: inherit;
  font-size: var(--ld-button-font-size);
  font-weight: var(--ld-button-font-weight, 600);
  font-style: var(--ld-button-font-style, normal);
  letter-spacing: var(--ld-button-letter-spacing, normal);
  text-transform: var(--ld-button-text-transform, none);
  line-height: var(--ld-button-line-height, 1.5);
  color: var(--ld-button-color, #fff);
  background-color: var(--ld-button-bg, var(--ld-form-highlight, #2563eb));
  background-image: var(--ld-button-gradient, none), var(--ld-button-bg-image, none);
  background-size: 100% 100%, var(--ld-button-bg-size, cover);
  background-position: 0 0, var(--ld-button-bg-position, 50% 50%);
  background-repeat: no-repeat, var(--ld-button-bg-repeat, no-repeat);
  background-attachment: scroll, var(--ld-button-bg-attachment, scroll);
  border-top: var(--ld-button-border-top-width, 0) var(--ld-button-border-top-style, solid) var(--ld-button-border-top-color, transparent);
  border-right: var(--ld-button-border-right-width, 0) var(--ld-button-border-right-style, solid) var(--ld-button-border-right-color, transparent);
  border-bottom: var(--ld-button-border-bottom-width, 0) var(--ld-button-border-bottom-style, solid) var(--ld-button-border-bottom-color, transparent);
  border-left: var(--ld-button-border-left-width, 0) var(--ld-button-border-left-style, solid) var(--ld-button-border-left-color, transparent);
  border-radius: var(--ld-button-radius-tl, var(--ld-button-radius, 6px)) var(--ld-button-radius-tr, var(--ld-button-radius, 6px))
                 var(--ld-button-radius-br, var(--ld-button-radius, 6px)) var(--ld-button-radius-bl, var(--ld-button-radius, 6px));
  box-shadow: var(--ld-button-shadow, none);
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s, background-color 0.15s, color 0.15s, border-color 0.15s;
}
.ld-form__button:hover,
.ld-form__button.is-preview-hover {
  opacity: var(--ld-button-hover-opacity, 0.9);
  background-color: var(--ld-button-hover-bg, var(--ld-button-bg, var(--ld-form-highlight, #2563eb)));
  color: var(--ld-button-hover-color, var(--ld-button-color, #fff));
  border-color: var(--ld-button-hover-border, var(--ld-button-border-top-color, transparent));
}
.ld-form__button:active,
.ld-form__button.is-preview-active {
  transform: scale(0.98);
  background-color: var(--ld-button-active-bg, var(--ld-button-hover-bg, var(--ld-button-bg, var(--ld-form-highlight, #2563eb))));
  color: var(--ld-button-active-color, var(--ld-button-hover-color, var(--ld-button-color, #fff)));
  border-color: var(--ld-button-active-border, var(--ld-button-hover-border, var(--ld-button-border-top-color, transparent)));
}
.ld-form__button:focus-visible {
  outline: 2px solid var(--ld-form-highlight, #2563eb); outline-offset: 2px;
}
.ld-form__button:disabled { opacity: 0.6; cursor: not-allowed; }
/* Legacy Small / Large sizes (the old Button Size setting): padding and text
   size presets, still honored for buttons saved with them; Padding and
   Typography set on the block win. */
.ld-form__button--sm {
  padding: var(--ld-button-padding-top, 0.375rem) var(--ld-button-padding-right, 1rem)
           var(--ld-button-padding-bottom, 0.375rem) var(--ld-button-padding-left, 1rem);
  font-size: var(--ld-button-font-size, 0.875rem);
}
.ld-form__button--lg {
  padding: var(--ld-button-padding-top, 0.875rem) var(--ld-button-padding-right, 2rem)
           var(--ld-button-padding-bottom, 0.875rem) var(--ld-button-padding-left, 2rem);
  font-size: var(--ld-button-font-size, 1.0625rem);
}
.ld-form__button--full-width { width: 100%; }

/* ── Checkbox-style fields (consent, single checkbox, multi-checkbox/radio) ─
   The same .ld-form__checkbox row style works for both checkboxes and radios.
   We don't override the native shape — square for checkboxes, round for
   radios — since that visual difference signals the multi-vs-single
   constraint to visitors. */
.ld-form__consent,
.ld-form__checkbox {
  display: flex; align-items: flex-start; gap: 0.5rem;
  font-size: var(--ld-field-label-font-size, 0.875rem); cursor: pointer;
  font-family: var(--ld-field-label-font-family);
  font-weight: var(--ld-field-label-font-weight);
  font-style: var(--ld-field-label-font-style);
  letter-spacing: var(--ld-field-label-letter-spacing);
  text-transform: var(--ld-field-label-text-transform);
  color: var(--ld-field-label-color);
  line-height: 1.4;
}
.ld-form__consent input[type="checkbox"],
.ld-form__checkbox input[type="checkbox"],
.ld-form__checkbox input[type="radio"] {
  margin-top: 0.2rem; width: 16px; height: 16px;
  accent-color: var(--ld-form-highlight, #2563eb); flex-shrink: 0;
}
.ld-form__consent a { color: var(--ld-form-highlight, #2563eb); text-decoration: underline; }

/* Multi-checkbox group. The fieldset is left as a normal block (no flex,
   no grid) so the native legend rendering puts the label cleanly above
   the options without overlapping. The options themselves live inside a
   .ld-form__checkboxes__list grid that supports 1/2/3/4 column layouts. */
.ld-form__checkboxes {
  border: none; padding: 0; margin: 0;
  min-width: 0;  /* otherwise legend can blow out flex parents */
}
.ld-form__checkboxes > legend.ld-form__label {
  display: block; float: none; width: 100%;
  margin: 0 0 0.5rem; padding: 0;
}
.ld-form__checkboxes__list {
  display: grid; gap: 0.375rem 1rem;
  grid-template-columns: 1fr;
}
.ld-form__checkboxes__list[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ld-form__checkboxes__list[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ld-form__checkboxes__list[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Collapse multi-column layouts on narrow screens so options don't get cramped. */
@media ( max-width: 600px ) {
  .ld-form__checkboxes__list[data-cols="3"],
  .ld-form__checkboxes__list[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media ( max-width: 380px ) {
  .ld-form__checkboxes__list[data-cols="2"],
  .ld-form__checkboxes__list[data-cols="3"],
  .ld-form__checkboxes__list[data-cols="4"] { grid-template-columns: 1fr; }
}

/* ── Typeahead combobox (country field with typeahead enabled) ──────────── */
.ld-form__typeahead { position: relative; }
.ld-form__typeahead__display {
  /* Inherits .ld-form__input styles. The custom select chevron only applies
     to .ld-form__select, so the typeahead input doesn't show one — instead
     we let the focus-ring be the only visual cue. */
}
.ld-form__typeahead__list {
  position: absolute; top: calc( 100% + 4px ); left: 0; right: 0;
  margin: 0; padding: 0.25rem 0; list-style: none;
  max-height: 240px; overflow-y: auto;
  background: #fff; border: 1px solid #d1d5db; border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 100; font-size: 0.875rem;
}
.ld-form__typeahead__option {
  padding: 0.4375rem 0.75rem; cursor: pointer;
  color: #1f2937; line-height: 1.4;
  transition: background 0.1s;
}
.ld-form__typeahead__option:hover,
.ld-form__typeahead__option.is-highlighted {
  background: color-mix(in srgb, var(--ld-form-highlight, #2563eb) 10%, transparent); color: color-mix(in srgb, var(--ld-form-highlight, #2563eb) 80%, #000);
}
.ld-form__typeahead__empty {
  padding: 0.625rem 0.75rem; font-size: 0.8125rem;
  color: #6b7280; text-align: center; font-style: italic;
}
[data-style="modern"] .ld-form__typeahead__list { border-radius: 8px; }

/* ── Address (search box, then the individual parts) ────────────────────
   The parts are .ld-form__field elements of their own inside the address
   field, so labels, floating labels and errors behave as on any field. */
.ld-form__address [hidden] { display: none !important; }
.ld-form__address__fields {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem;
  margin: 0; padding: 0; border: 0; min-width: 0;
}
.ld-form__address__search ~ .ld-form__address__fields { margin-top: 0.75rem; }
.ld-form__address__fields > legend.ld-form__label { grid-column: 1 / -1; padding: 0; float: left; width: 100%; }
.ld-form__address__part--street,
.ld-form__address__part--street2 { grid-column: 1 / -1; }
.ld-form__address__manual {
  display: inline-block; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 0.8125rem; text-decoration: underline;
  color: var(--ld-form-highlight, #2563eb);
}
.ld-form__address__search + .ld-form__address__manual { margin-top: 0.375rem; }
.ld-form__address__option { display: flex; flex-direction: column; }
.ld-form__address__option-main { font-weight: 500; }
.ld-form__address__option-secondary { font-size: 0.8125rem; color: #6b7280; }
.ld-form__address__attribution {
  padding: 0.25rem 0.75rem 0.125rem; text-align: right;
  font-size: 0.6875rem; color: #9ca3af;
}
/* Conditional reveal caps height for its animation; an address is taller. */
.ld-form__field--address.ld-form__field--conditional-visible { max-height: none; }
.ld-form__sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
@media ( max-width: 480px ) {
  .ld-form__address__fields { grid-template-columns: minmax(0, 1fr); }
}

/* ── Help text ──────────────────────────────────────────────────────────── */
.ld-form__help {
  display: block; margin-top: 0.25rem;
  font-family: var(--ld-field-help-font-family);
  font-size: var(--ld-field-help-font-size, 0.75rem);
  font-weight: var(--ld-field-help-font-weight);
  font-style: var(--ld-field-help-font-style);
  line-height: var(--ld-field-help-line-height, 1.4);
  letter-spacing: var(--ld-field-help-letter-spacing);
  text-transform: var(--ld-field-help-text-transform);
  color: var(--ld-field-help-color, #6b7280);
}

/* ── Validation errors ──────────────────────────────────────────────────── */
.ld-form__error {
  margin-top: 0.25rem; font-size: 0.8125rem; color: #dc2626;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.25s ease, opacity 0.25s ease, margin 0.25s ease;
}
.ld-form__error--visible { max-height: 2rem; opacity: 1; margin-top: 0.375rem; }
.ld-form__input--invalid, .ld-form__textarea--invalid, .ld-form__select--invalid {
  border-color: #dc2626 !important;
}
.ld-form__input--invalid:focus, .ld-form__textarea--invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* ── Conditional visibility ─────────────────────────────────────────────── */
.ld-form__field--conditional-hidden {
  max-height: 0 !important; opacity: 0; overflow: hidden;
  margin: 0 !important; padding: 0 !important;
  transition: max-height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
}
.ld-form__field--conditional-visible {
  max-height: 300px; opacity: 1;
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* ── Success animation ──────────────────────────────────────────────────── */
.ld-form__success {
  text-align: center; padding: 2rem 1rem;
  animation: ldFormFadeIn 0.5s ease;
}
.ld-form__checkmark {
  width: 52px; height: 52px; color: #22c55e;
  margin: 0 auto 1rem; display: block;
}
.ld-form__checkmark circle {
  stroke-dasharray: 166; stroke-dashoffset: 166;
  animation: ldFormCircle 0.6s ease forwards;
}
.ld-form__checkmark path {
  stroke-dasharray: 48; stroke-dashoffset: 48;
  animation: ldFormCheck 0.4s 0.4s ease forwards;
}
.ld-form__success-text {
  font-size: 1.125rem; font-weight: 600; color: #166534; margin: 0 0 0.75rem;
}
.ld-form__reset-link {
  background: none; border: none; color: var(--ld-form-highlight, #2563eb); cursor: pointer;
  font-size: 0.875rem; text-decoration: underline; padding: 0; font-family: inherit;
}
.ld-form__reset-link:hover { color: color-mix(in srgb, var(--ld-form-highlight, #2563eb) 85%, #000); }
.ld-form__form--hiding {
  opacity: 0; max-height: 0; overflow: hidden;
  transition: opacity 0.3s, max-height 0.3s;
}

@keyframes ldFormFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ldFormCircle { to { stroke-dashoffset: 0; } }
@keyframes ldFormCheck { to { stroke-dashoffset: 0; } }

/* ── Messages (fallback) ────────────────────────────────────────────────── */
.ld-form__messages {
  margin-top: 1rem; padding: 0.75rem 1rem; border-radius: 6px;
  font-size: 0.875rem; display: none;
}
.ld-form__messages--success { display: block; background: #f0fdf4; border-left: 4px solid #22c55e; color: #166534; }
.ld-form__messages--error { display: block; background: #fef2f2; border-left: 4px solid #ef4444; color: #991b1b; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .ld-form__field--half { flex: 0 0 100%; }
}

/* ── Reduced motion ─────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ld-form__input, .ld-form__textarea, .ld-form__select, .ld-form__button,
  .ld-form__error, .ld-form__success, .ld-form__checkmark circle,
  .ld-form__checkmark path, .ld-form__field--conditional-hidden,
  .ld-form__field--conditional-visible, .ld-form__form--hiding,
  .ld-form__field--label-float .ld-form__label {
    transition: none !important; animation: none !important;
  }
}

/* ── Phone country selector ──────────────────────────────────────────────
   intl-tel-input style: a flag + dial-code button glued to the left edge of
   the local-number input. Border-radius is split — left side rounded on the
   button, right side rounded on the input — so they read as one control.
   The listbox floats below the wrapper as an absolute element. */

.ld-form__phone {
  position: relative;
  display: flex;
  align-items: stretch;
}
.ld-form__phone__country {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px 0 8px;
  border: var(--ld-field-input-border-width, 1px) var(--ld-field-input-border-style, solid) var(--ld-field-input-border, #d1d5db);
  border-right: none;
  border-radius: var(--ld-field-input-radius, 6px) 0 0 var(--ld-field-input-radius, 6px);
  background: var(--ld-field-input-bg, #fff);
  background-image: var(--ld-field-input-gradient, none);
  font-size: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.ld-form__phone__country:hover { background: #f9fafb; }
.ld-form__phone__country:focus-visible {
  outline: none;
  border-color: var(--ld-form-highlight, #2563eb);
  box-shadow: 0 0 0 1px var(--ld-form-highlight, #2563eb);
  z-index: 2;
}
/* Chip border tracks input focus — when either the chip button or the
   visible local input has focus, both elements' borders go blue together
   so they keep reading as one continuous control instead of two halves
   with mismatched states. */
.ld-form__phone:focus-within > .ld-form__phone__country {
  border-color: var(--ld-form-highlight, #2563eb);
}
/* Compact chip: flag stays prominent (it's the country signal); the dial
   code is secondary. Smaller dial + smaller chevron keeps the chip from
   crowding the input on narrower forms. */
.ld-form__phone__flag {
  font-size: 1em;
  line-height: 1;
}
.ld-form__phone__dial {
  font-size: 0.8125em;
  color: #4b5563;
}
.ld-form__phone__chevron {
  font-size: 0.6em;
  color: #6b7280;
  margin-left: 1px;
}
.ld-form__phone .ld-form__input {
  flex: 1 1 auto;
  border-radius: 0 var(--ld-field-input-radius, 6px) var(--ld-field-input-radius, 6px) 0;
  /* The chip's left/top/bottom borders + this input's top/right/bottom
     borders form one continuous outline around the combined control. The
     input's left border is suppressed so there's no visible seam between
     the chip and the input. */
  border-left: none;
}
/* Suppress the input's own focus glow — the wrapper carries it instead so
   the glow surrounds the chip + input together rather than just the input
   side, which would visually split the control on focus. */
.ld-form__phone .ld-form__input:focus {
  box-shadow: none;
}
.ld-form__phone:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-form-highlight, #2563eb) 15%, transparent);
  border-radius: 6px;
}

/* Modern preset overrides — chip mirrors the filled-style input. At rest
   both the chip and the input share the grey background. When the wrapper
   has :focus-within (visitor focuses either the chip button or the local
   input), the chip flips to white and a blue border, exactly matching the
   input's own focus state. Without this, the input goes white on focus
   while the chip stays grey, breaking the "one control" illusion. */
[data-style="modern"] .ld-form__phone__country {
  background: var(--ld-field-input-bg, #f3f4f6);
  background-image: var(--ld-field-input-gradient, none);
  border-color: var(--ld-field-input-border, transparent);
}
[data-style="modern"] .ld-form__phone__country:hover { background: #e5e7eb; }
[data-style="modern"] .ld-form__phone:focus-within > .ld-form__phone__country {
  background: #fff;
  border-color: var(--ld-form-highlight, #2563eb);
}
/* Modern preset re-declares the input focus glow with a slightly different
   alpha — suppress it inside the phone wrapper too, since the wrapper's
   own :focus-within glow handles the whole control. */
[data-style="modern"] .ld-form__phone .ld-form__input:focus {
  box-shadow: none;
}
[data-style="modern"] .ld-form__phone:focus-within {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ld-form-highlight, #2563eb) 12%, transparent);
}

/* ── Floating-label compatibility ─────────────────────────────────────────
   The label inherits the default `left: 0.75rem` from the base float-label
   rule, matching every other field on the form. At rest it sits in the
   chip's top-left corner; when floated up it sits at the input row's top-
   left, perfectly aligned with the labels above and below it. Z-index of
   the label keeps it readable against the chip's light grey background.

   The country button needs matching float padding so the flag + dial code
   stay vertically aligned with the visitor's typed digits — without it,
   the chip content sits centered while the input text sits low. */
.ld-form__field--has-phone-selector.ld-form__field--label-float .ld-form__phone__country {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
}

/* Dropdown panel: absolutely positioned just below the wrapper. Holds the
   visible search input (top) and the scrollable country list (below). The
   panel itself carries the box styling (border + shadow); inner elements
   stay flush with its rounded edges. */
.ld-form__phone__panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 100;
  margin: 4px 0 0;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  /* Min-width so the panel doesn't shrink below readability when the wrapper
     is in a half-width column. The browser will still expand to wrapper width
     when wrapper > 240px. */
  min-width: 240px;
}
.ld-form__phone__panel[hidden] { display: none; }

/* Search input — sticky-feeling header for the dropdown. Border-bottom is
   the only divider between search and list; no other styling fights with
   the panel's outer border. */
.ld-form__phone__search {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-bottom: 1px solid #e5e7eb;
  border-radius: 6px 6px 0 0;
  background: transparent;
  font: inherit;
  font-size: 0.9em;
  color: inherit;
  box-sizing: border-box;
}
.ld-form__phone__search::placeholder { color: #9ca3af; }
.ld-form__phone__search:focus { outline: none; }

/* Country list — scrollable when more options than fit. Lives inside the
   panel so its background + border come from the panel above. */
.ld-form__phone__list {
  margin: 0;
  padding: 4px 0;
  max-height: 240px;
  overflow-y: auto;
  list-style: none;
  border-radius: 0 0 6px 6px;
}
.ld-form__phone__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1.3;
}
.ld-form__phone__option:hover,
.ld-form__phone__option.is-highlighted { background: #eff6ff; }
.ld-form__phone__option.is-selected { background: #dbeafe; font-weight: 500; }
.ld-form__phone__option-name { flex: 1 1 auto; min-width: 0; }
.ld-form__phone__option-dial { color: #6b7280; font-size: 0.85em; }
.ld-form__phone__empty {
  padding: 12px;
  text-align: center;
  color: #9ca3af;
  font-size: 0.875em;
  font-style: italic;
}