/* Flick Planning Intake form. Every selector is scoped under .fl-intake so host theme styles do not bleed in. */
/* ---------- tokens ---------- */
.fl-intake{
  --fl-ink:#1f2937;
  --fl-ink-soft:#4b5563;
  --fl-line:#c9cdd3;
  --fl-paper:#ffffff;
  --fl-field-deep:#e5e7eb;
  --fl-navy:#1b365d;
  --fl-navy-deep:#122540;
  --fl-accent:#b8892b;
  --fl-error:#b42318;
}

/* ---------- scoped reset so the host theme cannot bleed in ---------- */
.fl-intake,.fl-intake *,.fl-intake *::before,.fl-intake *::after{box-sizing:border-box}
.fl-intake{font-family:"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;font-weight:400;letter-spacing:normal;text-align:left;text-transform:none;color:var(--fl-ink);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
.fl-intake h3,.fl-intake p,.fl-intake label,.fl-intake button,.fl-intake input,.fl-intake textarea{margin:0;padding:0;font:inherit;color:inherit;letter-spacing:inherit;text-transform:none;text-shadow:none;background:none;border:0;border-radius:0;box-shadow:none;appearance:none;-webkit-appearance:none}
.fl-intake button{cursor:pointer;text-align:center;touch-action:manipulation}
.fl-intake input::placeholder,.fl-intake textarea::placeholder{color:#9ca3af;opacity:1}

/* ---------- card ---------- */
.fl-intake.fl-form-card{margin:0;max-width:100%;background:var(--fl-paper);border-radius:12px;padding:32px 32px 28px;box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06);position:relative;overflow:hidden}
.fl-intake.fl-form-card::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:linear-gradient(90deg,var(--fl-accent),#e2c76a)}
.fl-intake .fl-form-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:6px}
.fl-intake h3{font-family:Georgia,serif;font-size:1.3rem;font-weight:400;color:var(--fl-navy);line-height:1.25}
.fl-intake .fl-step-count{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--fl-ink-soft);white-space:nowrap;padding-top:6px}
.fl-intake .fl-lead{font-size:.88rem;color:var(--fl-ink-soft);margin-bottom:20px}
.fl-intake .fl-progress{height:4px;background:var(--fl-field-deep);border-radius:2px;margin-bottom:24px;overflow:hidden}
.fl-intake .fl-progress i{display:block;height:100%;width:20%;background:linear-gradient(90deg,var(--fl-navy),var(--fl-accent));border-radius:2px;transition:width .35s ease}

/* ---------- steps ---------- */
.fl-intake .fl-step{display:none;animation:flStepIn .3s ease}
.fl-intake .fl-step.fl-active{display:block}
@keyframes flStepIn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
.fl-intake .fl-q{font-family:Georgia,serif;font-size:1.25rem;margin-bottom:16px;line-height:1.3;outline:none}

/* ---------- options ---------- */
.fl-intake .fl-opts{display:grid;gap:10px}
.fl-intake .fl-opt{border:1.5px solid var(--fl-line);border-radius:8px;padding:14px 16px;background:#fff;text-align:left;font-size:.98rem;display:flex;align-items:center;gap:12px;transition:border-color .15s,box-shadow .15s,transform .15s,background .15s}
.fl-intake .fl-opt:focus-visible{outline:2px solid var(--fl-accent);outline-offset:2px}
.fl-intake .fl-opt.fl-sel{border-color:var(--fl-navy);background:#f3f6fb;box-shadow:inset 0 0 0 1px var(--fl-navy)}
.fl-intake .fl-box{width:20px;height:20px;border:1.5px solid #9ca3af;border-radius:50%;flex:none;position:relative;background:#fff;transition:background .15s,border-color .15s}
.fl-intake [data-multi] .fl-box{border-radius:5px}
.fl-intake .fl-sel .fl-box{background:var(--fl-navy);border-color:var(--fl-navy)}
.fl-intake .fl-sel .fl-box::after{content:"";position:absolute;left:6px;top:2.5px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* ---------- fields ---------- */
.fl-intake .fl-field{margin-bottom:14px}
.fl-intake label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--fl-ink-soft);margin-bottom:6px}
.fl-intake input,.fl-intake textarea{display:block;width:100%;padding:13px 14px;border:1.5px solid var(--fl-line);border-radius:8px;font-size:16px;background:#fff;transition:border-color .15s,box-shadow .15s}
.fl-intake textarea{resize:vertical;min-height:64px}
.fl-intake input:focus,.fl-intake textarea:focus{outline:none;border-color:var(--fl-navy);box-shadow:0 0 0 3px rgba(27,54,93,.12)}
.fl-intake input[aria-invalid="true"]{border-color:var(--fl-error);box-shadow:0 0 0 3px rgba(180,35,24,.10)}
.fl-intake .fl-err{display:none;font-size:.8rem;color:var(--fl-error);margin-top:6px;line-height:1.35}
.fl-intake .fl-err.fl-show{display:block}
.fl-intake .fl-form-err{display:none;font-size:.86rem;color:var(--fl-error);margin-bottom:12px;line-height:1.4}
.fl-intake .fl-form-err.fl-show{display:block}
.fl-intake .fl-req{color:var(--fl-error);font-weight:700;margin-left:2px}
.fl-intake .fl-req-note{font-size:.76rem;color:var(--fl-ink-soft);margin:-8px 0 14px}
.fl-intake .fl-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}
.fl-intake .fl-q-small{font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--fl-ink-soft);margin-bottom:8px}
.fl-intake .fl-opts-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.fl-intake .fl-opts-row .fl-opt{padding:11px 12px;font-size:.92rem;gap:9px}
.fl-intake .fl-opts-row .fl-box{width:16px;height:16px}
.fl-intake .fl-opts-row .fl-sel .fl-box::after{left:4.5px;top:1.5px;width:4px;height:8px}
.fl-intake .fl-inline-group[hidden]{display:none}
.fl-intake .fl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.fl-intake .fl-field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* ---------- buttons ---------- */
.fl-intake .fl-btn{background:var(--fl-navy);color:#fff;border-radius:8px;font-weight:600;transition:transform .15s,box-shadow .15s,opacity .15s,background .15s}
.fl-intake .fl-btn:focus-visible{outline:2px solid var(--fl-accent);outline-offset:2px}
.fl-intake .fl-next{padding:13px 26px;font-size:1rem;letter-spacing:.01em;box-shadow:0 6px 16px rgba(27,54,93,.25)}
.fl-intake .fl-next:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
.fl-intake .fl-submit{width:100%;padding:15px;font-size:1.02rem;box-shadow:0 8px 20px rgba(27,54,93,.3)}
.fl-intake .fl-submit:disabled{opacity:.6;cursor:progress;box-shadow:none}
.fl-intake .fl-back{color:var(--fl-ink-soft);font-size:.9rem;padding:8px 0;display:inline-flex;align-items:center;gap:6px}
.fl-intake .fl-back::before{content:"";width:6px;height:6px;border-left:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg)}
.fl-intake .fl-back:focus-visible{outline:2px solid var(--fl-accent);outline-offset:2px;border-radius:4px}
.fl-intake .fl-contact-back{margin-top:10px}
.fl-intake .fl-nav-row{display:flex;justify-content:space-between;align-items:center;margin-top:22px}
.fl-intake .fl-fine{font-size:.74rem;color:var(--fl-ink-soft);margin-top:14px;display:flex;align-items:center;gap:8px;line-height:1.4}
.fl-intake .fl-fine svg{width:14px;height:14px;flex:none;color:var(--fl-accent)}

/* hover only on devices that have a real pointer, so taps on iOS do not leave a stuck hover state */
@media (hover:hover){
  .fl-intake .fl-opt:hover{border-color:var(--fl-navy);box-shadow:0 4px 14px rgba(18,37,64,.10);transform:translateY(-1px)}
  .fl-intake .fl-next:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 22px rgba(27,54,93,.3)}
  .fl-intake .fl-submit:hover:not(:disabled){transform:translateY(-1px);background:var(--fl-navy-deep);box-shadow:0 12px 26px rgba(27,54,93,.35)}
  .fl-intake .fl-back:hover{color:var(--fl-navy)}
}

/* ---------- confirmation ---------- */
.fl-intake .fl-done{text-align:center;padding:28px 0 12px}
.fl-intake .fl-check{width:60px;height:60px;border-radius:50%;background:var(--fl-navy);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:1.6rem;box-shadow:0 10px 24px rgba(27,54,93,.3)}
.fl-intake .fl-done h3{margin-bottom:8px;outline:none}
.fl-intake .fl-done p{max-width:34ch;margin:0 auto;color:var(--fl-ink-soft)}

@media (max-width:520px){
  .fl-intake.fl-form-card{padding:24px 20px 22px}
  .fl-intake .fl-req{color:var(--fl-error);font-weight:700;margin-left:2px}
.fl-intake .fl-req-note{font-size:.76rem;color:var(--fl-ink-soft);margin:-8px 0 14px}
.fl-intake .fl-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}
.fl-intake .fl-q-small{font-family:inherit;font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--fl-ink-soft);margin-bottom:8px}
.fl-intake .fl-opts-row{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.fl-intake .fl-opts-row .fl-opt{padding:11px 12px;font-size:.92rem;gap:9px}
.fl-intake .fl-opts-row .fl-box{width:16px;height:16px}
.fl-intake .fl-opts-row .fl-sel .fl-box::after{left:4.5px;top:1.5px;width:4px;height:8px}
.fl-intake .fl-inline-group[hidden]{display:none}
.fl-intake .fl-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.fl-intake .fl-field-row{grid-template-columns:1fr}
  .fl-intake .fl-form-head{flex-direction:column;gap:4px}
  .fl-intake .fl-step-count{padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .fl-intake .fl-step{animation:none}
  .fl-intake *{transition:none !important}
}