/*
 * Combatwear Factory 4.0.0 — quote wizard.
 *
 * The form ships as three stacked fieldsets that work on their own. Everything
 * that turns them into a stepped wizard is scoped under .cf-wizard-on, a class
 * only quote-form.js adds, so a visitor without JavaScript gets the long form
 * rather than a form with two thirds of it missing.
 */

/* ---------- shared shell ---------- */

.cf-wizard{position:relative}
.cf-wizard .cf-step{border:0;margin:0;padding:0;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;grid-column:1/-1}
.cf-wizard .cf-step + .cf-step{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)}
.cf-wizard-on .cf-step + .cf-step{margin-top:0;padding-top:0;border-top:0}

.cf-wizard .field.full,.cf-wizard .cf-chipset{grid-column:1/-1}
.cf-wizard .cf-step-head{grid-column:1/-1;margin:0 0 2px}
.cf-step-count{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.cf-step-title{margin:0 0 6px;font-size:clamp(21px,2.2vw,26px);line-height:1.25;letter-spacing:-.03em}
.cf-step-title:focus{outline:none}
.cf-step-title:focus-visible{outline:3px solid #d6434d;outline-offset:4px}
.cf-step-blurb{margin:0;font-size:14px;line-height:1.7;color:var(--muted)}
.cf-req{color:var(--accent);margin-left:2px}

/* Selects should read as a choice, not as an empty box waiting for typing. */
.cf-wizard select{
  width:100%;
  min-height:50px;
  padding:12px 42px 12px 14px;
  border:1px solid #cbd0d0;
  border-radius:6px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2360676c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 15px center;
  background-size:12px 8px;
  font-size:16px;
  line-height:1.4;
  color:var(--ink);
  appearance:none;-webkit-appearance:none;
  cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.cf-wizard select:hover{border-color:#a9b0b0}
.cf-wizard select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(188,32,44,.13)}
.cf-wizard select:invalid{color:#6b7276}

/* ---------- chips ---------- */

.cf-chipset{border:0;margin:0;padding:0;min-width:0}
.cf-chipset legend{padding:0;font-size:12px;font-weight:650;color:inherit}
.cf-chip-hint{margin:4px 0 12px;font-size:12.5px;line-height:1.6;color:var(--muted)}
.cf-chips{display:flex;flex-wrap:wrap;gap:9px}

.cf-chip{display:inline-flex;margin:0;cursor:pointer}
.cf-chip input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cf-chip span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:10px 16px;
  border:1px solid #cbd0d0;
  border-radius:999px;
  background:#fff;
  font-size:13.5px;
  font-weight:650;
  line-height:1.3;
  color:#3d4448;
  transition:background-color .18s ease,border-color .18s ease,color .18s ease,transform .18s ease;
}
/* The tick box is drawn with the chip, so nothing shifts when it fills in. */
.cf-chip span:before{
  content:"";
  width:15px;height:15px;
  flex:0 0 auto;
  border:1.5px solid #b6bcbc;
  border-radius:4px;
  background:#fff no-repeat center/9px 7px;
  transition:background-color .18s ease,border-color .18s ease;
}
.cf-chip:hover span{border-color:#9aa1a1;background:#fafaf7}
.cf-chip input:focus-visible + span{outline:3px solid #d6434d;outline-offset:3px}

.cf-chip input:checked + span,
.cf-chip.is-on span{
  border-color:var(--accent);
  background:#fdf2f2;
  color:#8e1620;
}
.cf-chip input:checked + span:before,
.cf-chip.is-on span:before{
  border-color:var(--accent);
  background-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4.2 3.6 6.8 9 1.4' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cf-chip:active span{transform:scale(.97)}

/* ---------- progress ---------- */

.cf-progress{display:none;grid-column:1/-1;margin:0 0 4px}
.cf-wizard-on .cf-progress{display:block}
.cf-progress-bar{display:block;height:4px;border-radius:999px;background:#e2e4de;overflow:hidden}
.cf-progress-bar > i{display:block;height:100%;width:33.33%;border-radius:999px;background:linear-gradient(90deg,var(--accent),#e0555f);transition:width .45s cubic-bezier(.22,.61,.36,1)}

/* ---------- navigation ---------- */

/* .field sets flex-direction:column for ordinary inputs; the button row is the
   one place that has to override it. */
.cf-wizard-nav{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px;align-items:center;margin-top:6px}
.cf-wizard-nav .btn{min-width:132px}
.cf-wizard-nav .cf-back{min-width:104px}
/* Without the script every step is on screen at once, so only "send" applies. */
.cf-wizard:not(.cf-wizard-on) .cf-back,
.cf-wizard:not(.cf-wizard-on) .cf-next{display:none}
.cf-wizard-foot{grid-column:1/-1;margin:2px 0 0;font-size:12px;line-height:1.7;color:var(--muted)}

/* ---------- step entrance ---------- */

@keyframes cfStepIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
html.cf-motion .cf-wizard-on .cf-step:not([hidden]){animation:cfStepIn .34s cubic-bezier(.16,1,.3,1) both}

@media(prefers-reduced-motion:reduce){
  html.cf-motion .cf-wizard-on .cf-step:not([hidden]){animation:none}
  .cf-progress-bar > i{transition:none}
}

/* ---------- the wizard inside the dark CTA panel ---------- */

.cta .cf-wizard .cf-step-blurb,
.cta .cf-wizard .cf-wizard-foot,
.cta .cf-wizard .cf-chip-hint{color:#c8ced0}
.cta .cf-wizard .cf-step + .cf-step{border-top-color:#333a3e}
.cta .cf-wizard .cf-progress-bar{background:#333a3e}
.cta .cf-wizard .cf-step-count{color:#f0888f}
.cta .cf-wizard .cf-chip span{background:#232a2e;border-color:#454d52;color:#dfe3e4}
.cta .cf-wizard .cf-chip span:before{background-color:#171d20;border-color:#5c6469}
.cta .cf-wizard .cf-chip:hover span{background:#2b3236;border-color:#6a7276}
.cta .cf-wizard .cf-chip input:checked + span,
.cta .cf-wizard .cf-chip.is-on span{background:#3a1a1d;border-color:var(--accent);color:#f6c9cc}
.cta .cf-wizard .cf-chip input:checked + span:before,
.cta .cf-wizard .cf-chip.is-on span:before{background-color:var(--accent);border-color:var(--accent)}

/* ---------- the short footer enquiry form ---------- */

.cf-inquiry-form select{
  width:100%;
  min-height:44px;
  padding:10px 38px 10px 12px;
  border:1px solid #cbd0d0;
  border-radius:5px;
  background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2360676c' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 13px center;
  background-size:12px 8px;
  font:inherit;font-size:16px;line-height:1.4;color:var(--ink);
  appearance:none;-webkit-appearance:none;cursor:pointer;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.cf-inquiry-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(188,32,44,.13)}

/* ---------- responsive ---------- */

@media(max-width:760px){
  .cf-wizard .cf-step{grid-template-columns:minmax(0,1fr);gap:18px}
  .cf-wizard-nav{gap:9px}
  .cf-wizard-nav .btn{flex:1 1 auto;min-width:0}
  .cf-chips{gap:8px}
  .cf-chip span{padding:10px 14px;font-size:13px}
}
@media(max-width:400px){
  .cf-wizard-nav{flex-direction:column-reverse;align-items:stretch}
  .cf-wizard-nav .btn{width:100%}
}