/* FenceQuote
   Light, clean and neutral - every page tints itself from --fq-brand, which
   fq_head() sets per company so the funnel reads as the fence company's own site. */

:root{
  --fq-brand:#2c7a3f;
  --fq-ink:#1c2126;
  --fq-muted:#6a7480;
  --fq-line:#e2e6ea;
  --fq-bg:#f6f7f9;
}

body{
  background:var(--fq-bg);
  color:var(--fq-ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* branded bar --------------------------------------------------------- */
.fq-brandbar{
  background:#fff;
  border-bottom:3px solid var(--fq-brand);
  padding:.7rem 0;
  margin-bottom:1.5rem;
}
.fq-logo{ height:38px; width:auto; }
.fq-coname{ font-weight:700; font-size:1.15rem; }
.fq-cophone{
  color:var(--fq-brand);
  text-decoration:none;
  font-weight:600;
  white-space:nowrap;
}

/* step rail ----------------------------------------------------------- */
.fq-steps{
  display:flex;
  gap:.25rem;
  margin-bottom:1.5rem;
  overflow-x:auto;
}
.fq-step{
  display:flex;
  align-items:center;
  gap:.45rem;
  flex:1;
  min-width:88px;
  color:var(--fq-muted);
  font-size:.85rem;
}
.fq-step-dot{
  width:26px; height:26px;
  flex:0 0 26px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--fq-line);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.8rem;
}
.fq-step.active{ color:var(--fq-ink); font-weight:600; }
.fq-step.active .fq-step-dot{ border-color:var(--fq-brand); color:var(--fq-brand); }
.fq-step.done .fq-step-dot{ background:var(--fq-brand); border-color:var(--fq-brand); color:#fff; }
@media (max-width:575px){ .fq-step-label{ display:none; } }

/* cards and forms ----------------------------------------------------- */
.fq-card{
  background:#fff;
  border:1px solid var(--fq-line);
  border-radius:12px;
  padding:1.5rem;
  box-shadow:0 1px 3px rgba(16,24,40,.05);
}
.fq-h1{ font-size:1.6rem; font-weight:700; margin-bottom:.4rem; }
.fq-sub{ color:var(--fq-muted); margin-bottom:1.4rem; }

.btn-fq{
  background:var(--fq-brand);
  border:1px solid var(--fq-brand);
  color:#fff;
  font-weight:600;
  padding:.65rem 1.4rem;
  border-radius:8px;
}
.btn-fq:hover{ filter:brightness(.92); color:#fff; }
.btn-fq:disabled{ opacity:.55; }

.form-control:focus, .form-select:focus{
  border-color:var(--fq-brand);
  box-shadow:0 0 0 .2rem rgba(0,0,0,.06);
}

/* honeypot - hidden from people, visible to bots ----------------------- */
.fq-hp{
  position:absolute !important;
  left:-9999px !important;
  opacity:0 !important;
  height:0 !important;
  width:0 !important;
}

/* map ----------------------------------------------------------------- */
#fq-map{
  width:100%;
  height:460px;
  border-radius:10px;
  border:1px solid var(--fq-line);
  background:#e9ecef;
}
@media (max-width:575px){ #fq-map{ height:340px; } }

.fq-readout{
  background:var(--fq-brand);
  color:#fff;
  border-radius:10px;
  padding:.9rem 1.2rem;
  text-align:center;
}
.fq-readout .num{ font-size:2rem; font-weight:800; line-height:1; }
.fq-readout .unit{ font-size:.8rem; opacity:.85; text-transform:uppercase; letter-spacing:.05em; }

.fq-maphint{
  background:#fff8e1;
  border:1px solid #ffe08a;
  border-radius:8px;
  padding:.7rem .9rem;
  font-size:.9rem;
  margin-bottom:.9rem;
}

/* photo upload -------------------------------------------------------- */
.fq-drop{
  border:2px dashed var(--fq-line);
  border-radius:12px;
  padding:2.5rem 1rem;
  text-align:center;
  cursor:pointer;
  background:#fff;
  transition:border-color .15s, background .15s;
}
.fq-drop:hover, .fq-drop.dragover{
  border-color:var(--fq-brand);
  background:#fbfdfb;
}
.fq-drop i{ font-size:2.4rem; color:var(--fq-brand); }
#fq-preview{ max-width:100%; border-radius:10px; margin-top:1rem; }

/* results ------------------------------------------------------------- */
.fq-render-card{
  background:#fff;
  border:1px solid var(--fq-line);
  border-radius:12px;
  overflow:hidden;
  height:100%;
  display:flex;
  flex-direction:column;
}
.fq-render-img{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  background:#eef1f4;
  display:block;
}
.fq-render-body{ padding:1rem 1.1rem 1.2rem; flex:1; display:flex; flex-direction:column; }
.fq-render-name{ font-weight:700; font-size:1.1rem; margin-bottom:.2rem; }
.fq-render-blurb{ color:var(--fq-muted); font-size:.9rem; flex:1; margin-bottom:.9rem; }
.fq-price{
  font-size:1.35rem;
  font-weight:800;
  color:var(--fq-brand);
}
.fq-price-note{ font-size:.78rem; color:var(--fq-muted); }

.fq-render-loading{
  aspect-ratio:4/3;
  background:#eef1f4;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:.6rem;
  color:var(--fq-muted);
  font-size:.88rem;
}

.fq-disclaimer{
  font-size:.82rem;
  color:var(--fq-muted);
  border-top:1px solid var(--fq-line);
  padding-top:1rem;
  margin-top:1.5rem;
}

/* admin --------------------------------------------------------------- */
.fq-admin-nav{
  background:#1c2126;
  padding:.6rem 0;
  margin-bottom:1.5rem;
}
.fq-admin-nav a{
  color:#c9d1d9;
  text-decoration:none;
  padding:.35rem .8rem;
  border-radius:6px;
  font-size:.93rem;
}
.fq-admin-nav a:hover{ background:rgba(255,255,255,.08); color:#fff; }
.fq-admin-nav a.active{ background:var(--fq-brand); color:#fff; }
.fq-admin-brand{ color:#fff; font-weight:700; margin-right:1rem; }

.fq-ref-thumb{
  width:64px; height:48px;
  object-fit:cover;
  border-radius:6px;
  border:1px solid var(--fq-line);
  background:#eef1f4;
}

.fq-stat{
  background:#fff;
  border:1px solid var(--fq-line);
  border-radius:10px;
  padding:1rem 1.2rem;
}
.fq-stat .n{ font-size:1.7rem; font-weight:800; line-height:1; }
.fq-stat .l{ font-size:.8rem; color:var(--fq-muted); text-transform:uppercase; letter-spacing:.04em; }

.fq-badge-new{ background:#dbeafe; color:#1e40af; }
.fq-badge-contacted{ background:#fef3c7; color:#92400e; }
.fq-badge-won{ background:#d1fae5; color:#065f46; }
.fq-badge-lost{ background:#e5e7eb; color:#4b5563; }