/* =============================================================================
   AGI&M Battery Inquiry — Form Styles
   battery/inquiry/css/form.css
   VI: docs.agim.ca/vi/ v1.0 — fully compliant
   ============================================================================= */

.page-wrap { min-height:100vh; display:flex; flex-direction:column; background:var(--tint); }

/* Nav */
.nav { background:var(--white); border-bottom:1px solid var(--color-border); position:sticky; top:0; z-index:200; }
.nav-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); height:64px; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-l); }
.nav-logo { display:flex; align-items:center; text-decoration:none; flex-shrink:0; }
.nav-logo svg,.nav-logo img { height:36px; width:auto; }
.nav-back { font-size:var(--text-xs); font-weight:400; letter-spacing:.11em; text-transform:uppercase; color:var(--steel); text-decoration:none; display:flex; align-items:center; gap:6px; transition:color var(--t); }
.nav-back:hover { color:var(--navy); }

/* Hero — Navy ground per VI */
.hero { background:var(--navy); padding:var(--sp-3xl) 0 var(--sp-2xl); }
@media (max-width:768px) { .hero { padding:var(--sp-2xl) 0 var(--sp-xl); } }
.hero-inner { max-width:var(--max-w); margin:0 auto; padding:0 var(--gutter); }

.kicker { font-size:var(--text-label); font-weight:400; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); display:flex; align-items:center; gap:var(--sp-m); margin-bottom:var(--sp-l); }
.kicker::before { content:""; display:inline-block; width:32px; height:1px; background:var(--steel); flex-shrink:0; }

.hero h1 { font-size:clamp(32px,5vw,52px); font-weight:300; letter-spacing:-.025em; line-height:1.05; color:var(--white); max-width:600px; margin:0 0 var(--sp-l); }
.hero h1 strong { font-weight:600; }
.hero-sub { font-size:var(--text-body); color:rgba(255,255,255,.62); line-height:1.75; max-width:520px; margin:0; font-weight:400; }

/* Form area */
.form-area { flex:1; padding:var(--sp-2xl) var(--gutter) var(--sp-3xl); }
@media (max-width:768px) { .form-area { padding:var(--sp-xl) var(--gutter) var(--sp-2xl); } }
.form-shell { max-width:var(--max-w-form); margin:0 auto; }

/* Progress */
.progress-bar { display:flex; align-items:center; gap:var(--sp-xs); margin-bottom:var(--sp-xl); }
.progress-step { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:rgba(11,37,69,.28); font-weight:400; }
.progress-step.active { color:var(--navy); font-weight:600; }
.progress-step.done   { color:var(--steel); }
.progress-sep { width:20px; height:1px; background:var(--color-border-medium); flex-shrink:0; }

/* Section */
.form-section { margin-bottom:var(--sp-2xl); border:none; padding:0; min-width:0; }
.section-label { display:flex; align-items:center; gap:var(--sp-s); font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); font-weight:400; margin-bottom:var(--sp-xl); padding-bottom:var(--sp-m); border-bottom:1px solid var(--color-border); }
.section-label::before { content:attr(data-n); font-size:9px; font-weight:700; color:var(--color-border-strong); letter-spacing:.1em; }

/* Fields */
.field { margin-bottom:var(--sp-l); }
.field--half { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-m); margin-bottom:var(--sp-l); }
@media (max-width:540px) { .field--half { grid-template-columns:1fr; } }
.field-label { display:block; font-size:var(--text-label); font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--navy); margin-bottom:var(--sp-s); }
.field-label .req { color:var(--steel); margin-left:3px; font-weight:400; }
.field-hint { display:block; font-size:var(--text-xs); color:var(--steel); margin-top:6px; line-height:1.6; font-weight:400; }

/* Inputs */
.input,.select,.textarea { width:100%; height:var(--input-h); padding:0 var(--sp-m); background:var(--white); border:1px solid var(--color-border-medium); color:var(--navy); font-size:var(--text-body); font-family:var(--font); font-weight:400; border-radius:var(--radius); -webkit-appearance:none; appearance:none; transition:border-color var(--t); outline:none; }
.textarea { height:88px; padding:var(--sp-s) var(--sp-m); resize:vertical; line-height:1.65; }
.input::placeholder,.textarea::placeholder { color:rgba(11,37,69,.3); font-size:var(--text-sm); font-weight:400; }
.input:focus,.select:focus,.textarea:focus { border:2px solid var(--ocean); }
.input[aria-invalid="true"],.select[aria-invalid="true"],.textarea[aria-invalid="true"] { border-color:var(--color-error); }
.select-wrap { position:relative; }
.select-wrap::after { content:""; position:absolute; right:14px; top:50%; transform:translateY(-50%); width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--steel); pointer-events:none; }
.select { padding-right:32px; cursor:pointer; }

/* Dimensions */
.dim-row { display:grid; grid-template-columns:1fr 1fr 1fr; gap:var(--sp-s); }
@media (max-width:400px) { .dim-row { grid-template-columns:1fr; } }
.dim-unit { position:relative; }
.dim-unit .input { padding-right:44px; }
.dim-suffix { position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:var(--text-xs); color:var(--steel); letter-spacing:.06em; pointer-events:none; }

/* Radio groups */
.radio-group { display:flex; flex-direction:column; gap:2px; }
.radio-group--inline { flex-direction:row; flex-wrap:wrap; gap:2px; }
.radio-opt { display:flex; align-items:center; gap:var(--sp-s); padding:11px var(--sp-m); border:1px solid transparent; cursor:pointer; transition:background var(--t),border-color var(--t); user-select:none; min-height:44px; background:var(--white); }
.radio-opt:hover { background:var(--tint); border-color:var(--color-border-medium); }
.radio-opt.is-selected { background:var(--tint); border-color:var(--color-border-strong); }
.radio-opt input[type="radio"] { flex-shrink:0; width:16px; height:16px; margin:0; accent-color:var(--navy); cursor:pointer; }
.radio-opt input[type="radio"]:focus-visible { outline:2px solid var(--ocean); outline-offset:2px; }
.radio-opt input[type="radio"]:checked + .radio-text { color:var(--navy); font-weight:500; }
.radio-text { font-size:var(--text-sm); color:var(--body); line-height:1.4; font-weight:400; }
.radio-sub  { display:block; font-size:11px; color:var(--steel); margin-top:2px; font-weight:400; }

/* Checkbox groups */
.check-group { display:flex; flex-direction:column; gap:2px; }
.check-opt { display:flex; align-items:center; gap:var(--sp-s); padding:10px var(--sp-m); border:1px solid transparent; cursor:pointer; min-height:44px; user-select:none; background:var(--white); transition:background var(--t); }
.check-opt:hover { background:var(--tint); }
.check-opt input[type="checkbox"] { flex-shrink:0; width:16px; height:16px; margin:0; accent-color:var(--navy); cursor:pointer; }
.check-text { font-size:var(--text-sm); color:var(--body); font-weight:400; }

/* Error messages */
.field-error { display:none; font-size:var(--text-xs); color:var(--color-error); margin-top:6px; letter-spacing:.02em; font-weight:400; }
.field-error.is-visible { display:block; }

/* Error banners */
.error-banner { display:none; background:var(--color-error-bg); border-left:3px solid var(--color-error); padding:var(--sp-m) var(--sp-l); margin-top:var(--sp-l); font-size:var(--text-sm); color:var(--color-error); line-height:1.65; }
.error-banner strong { font-weight:600; }
.error-banner a { color:var(--color-error); text-decoration:underline; }

/* Submit */
.form-footer { margin-top:var(--sp-2xl); padding-top:var(--sp-xl); border-top:1px solid var(--color-border); }
.submit-note { font-size:var(--text-xs); color:var(--steel); line-height:1.75; margin-bottom:var(--sp-l); font-weight:400; }
.btn-submit { display:block; width:100%; background:var(--navy); color:var(--white); padding:16px var(--sp-xl); font-size:var(--text-xs); letter-spacing:.14em; text-transform:uppercase; font-weight:700; font-family:var(--font); border:none; cursor:pointer; transition:opacity var(--t); text-align:center; border-radius:var(--radius); }
.btn-submit:hover { opacity:.88; }
.btn-submit:focus-visible { outline:2px solid var(--ocean); outline-offset:3px; }
.btn-submit:disabled { opacity:.42; cursor:not-allowed; }

/* Page footer */
.page-foot { border-top:1px solid var(--color-border); padding:var(--sp-l) var(--gutter); background:var(--white); }
.page-foot-inner { max-width:var(--max-w); margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-l); flex-wrap:wrap; }
.foot-logo { display:flex; align-items:center; text-decoration:none; }
.foot-logo svg,.foot-logo img { height:28px; width:auto; }
.foot-copy { font-size:var(--text-xs); color:var(--steel); letter-spacing:.04em; font-weight:400; }
@media (max-width:480px) { .page-foot-inner { flex-direction:column; align-items:flex-start; gap:var(--sp-s); } }

/* Conditional: sample quantity */
#sample-qty-wrap { display:none; margin-top:var(--sp-m); }



  /* reversed SVG used directly */