/* ER Sealcoating — additive form feedback (preview). Layered on top of the live styles.
   Changes nothing the form submits. Off under reduced motion. */

/* Smooth, calm focus on each field: gentle orange border + soft lift.
   The existing accessibility outline on :focus stays as-is. */
.fm .fld input,
.fm .fld textarea,
.fm .fld select{transition:border-color .18s ease,box-shadow .18s ease}
.fm .fld:focus-within input,
.fm .fld:focus-within textarea,
.fm .fld:focus-within select{border-color:var(--orange);box-shadow:0 0 0 3px rgba(248,83,1,.14)}
.fm .opt span{transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}
.fm .opt input:focus-visible+span{box-shadow:0 0 0 3px rgba(248,83,1,.14)}

/* Submit button: morph the label to a spinner while sending, then a checkmark. */
#est-send .fx-label{display:inline-flex;align-items:center;gap:.5rem}
#est-send .fx-spin,
#est-send .fx-check{display:none;width:1.25rem;height:1.25rem;flex:none}
#est-send.fx-sending .fx-label{display:none}
#est-send.fx-sending .fx-spin{display:inline-block;animation:fx-spin .7s linear infinite}
#est-send.fx-done .fx-label{display:none}
#est-send.fx-done .fx-spin{display:none}
#est-send.fx-done .fx-check{display:inline-block}
#est-send.fx-done{background:#17492A;border-color:#17492A}
#est-send .fx-check circle{stroke-dasharray:64;stroke-dashoffset:64;animation:fx-ring .45s ease forwards}
#est-send .fx-check path{stroke-dasharray:24;stroke-dashoffset:24;animation:fx-tick .3s .3s ease forwards}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-ring{to{stroke-dashoffset:0}}
@keyframes fx-tick{to{stroke-dashoffset:0}}

@media(prefers-reduced-motion:reduce){
  .fm .fld input,.fm .fld textarea,.fm .fld select,.fm .opt span{transition:none}
  #est-send.fx-sending .fx-spin{animation:none}
  #est-send .fx-check circle,#est-send .fx-check path{animation:none;stroke-dashoffset:0}
}