/* ==========================================================
   PRESTIGE LAWN SERVICE — WIDGET SHELL
   Shared by every embedded lead form (quote-tool.html,
   aeration-form.html, any future one). Colors and fonts come
   from theme.css; edit there. This file is the reusable card
   shell, tap-cards and form controls — the same instant-feel
   input pattern everywhere a visitor is asked for information.
   ========================================================== */
:root{
  /* Local names used throughout this file — aliased to the
     shared brand palette in theme.css so a widget reskins
     itself the moment theme.css changes. */
  --green:var(--turf-lit); --green-bright:var(--blade); --green-light:var(--turf-tint); --green-dark:var(--turf);
  --ink-faint:var(--ink-mute);
  --bg:var(--chalk); --card:var(--white);
  --amber:var(--sun); --amber-light:var(--sun-tint); --red:var(--error);
  --display:var(--f);
  --body:var(--f);
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--body);background:transparent;color:var(--ink);line-height:1.55;
  -webkit-font-smoothing:antialiased;padding:8px;}
.wrap{max-width:620px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:16px;overflow:hidden;box-shadow:var(--shadow-card);}

.pad{padding:26px 28px 28px;}
@media(max-width:520px){.pad{padding:20px 18px 22px;}}

.eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;
  color:var(--green);margin-bottom:9px;}
h1{font-family:var(--display);font-size:25px;font-weight:800;line-height:1.1;margin-bottom:7px;
  letter-spacing:-.02em;font-variation-settings:'wdth' 110;}
@media(max-width:520px){h1{font-size:21px;}}
.sub{font-size:14px;color:var(--ink-dim);margin-bottom:22px;}

/* option cards — the tap-to-pick pattern used for towns, lot size, extras */
.opts{display:grid;gap:9px;}
.opts.two{grid-template-columns:1fr 1fr;}
@media(max-width:520px){.opts.two{grid-template-columns:1fr;}}
.opt{display:flex;align-items:center;gap:13px;width:100%;text-align:left;background:var(--card);
  border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;cursor:pointer;
  font-family:inherit;transition:border-color .12s,background .12s,transform .12s;}
.opt:hover{border-color:var(--green-bright);background:var(--green-light);}
.opt:active{transform:scale(.99);}
.opt.on{border-color:var(--green);background:var(--green-light);box-shadow:0 0 0 3px var(--focus-ring);}
.opt-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--green-light);
  display:grid;place-items:center;font-size:17px;}
.opt.on .opt-ic{background:var(--green);color:#fff;}
.opt-txt{flex:1;min-width:0;}
.opt-name{display:block;font-size:14.5px;font-weight:650;}
.opt-note{display:block;font-size:12px;color:var(--ink-dim);margin-top:1px;}
.opt-check{flex:0 0 auto;width:20px;height:20px;border:1.5px solid var(--line);border-radius:50%;
  display:grid;place-items:center;font-size:12px;color:#fff;}
.opt.on .opt-check{background:var(--green);border-color:var(--green);}

/* fields */
.field{margin-bottom:14px;}
label{display:block;font-size:12px;font-weight:650;color:var(--ink-dim);margin-bottom:5px;}
input,select,textarea{width:100%;border:1.5px solid var(--line);border-radius:9px;padding:11px 13px;
  font-size:15px;font-family:inherit;color:var(--ink);background:var(--card);}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-light);}
.err{border-color:var(--red)!important;}
.errmsg{font-size:12px;color:var(--red);margin-top:4px;display:none;}
.errmsg.show{display:block;}
.two-up{display:grid;grid-template-columns:1fr 1fr;gap:11px;}
@media(max-width:520px){.two-up{grid-template-columns:1fr;}}

/* buttons */
.row{display:flex;gap:9px;margin-top:20px;align-items:center;}
.btn{border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:10px;
  padding:12px 20px;font-size:14.5px;font-weight:650;font-family:inherit;cursor:pointer;}
.btn:hover{border-color:var(--ink-faint);}
.btn.go{background:var(--green);border-color:var(--green);color:#fff;flex:1;}
.btn.go:hover{background:var(--green-dark);}
.btn.go:disabled{opacity:.45;cursor:not-allowed;}
.btn.ghost{background:none;border:0;color:var(--ink-dim);padding:12px 8px;}

.note{background:var(--green-light);border:1px solid var(--turf-tint-line);border-radius:10px;padding:12px 15px;
  font-size:12.5px;color:var(--ink);line-height:1.5;margin-bottom:16px;}
.note.warn{background:var(--amber-light);border-color:var(--sun-tint-line);}

.trust{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line-soft);}
.trust span{font-size:11.5px;color:var(--ink-dim);display:flex;align-items:center;gap:5px;}

.done-ic{width:58px;height:58px;border-radius:50%;background:var(--green-light);color:var(--green);
  display:grid;place-items:center;font-size:29px;margin:0 auto 16px;}
.center{text-align:center;}
.big-num{font-family:var(--display);font-size:23px;font-weight:700;color:var(--green);
  text-decoration:none;display:inline-block;margin-top:4px;}
.hidden{display:none;}
.back{background:none;border:0;color:var(--ink-dim);font-size:13px;cursor:pointer;
  font-family:inherit;padding:6px 0;margin-bottom:12px;}
.back:hover{color:var(--green);}