/* ============================================================
   On-Call Hauler — Material Calculator
   Design system ported from oncallhaulerfl.com:
   Anton display / Inter body, hard 2px rules, 4px radii.
   ============================================================ */

.och{
	--paper:#ffffff;
	--ink:#0b0b0b;
	--muted:#5d646c;
	--line:#e3e5e8;
	--wash:#f5f6f7;
	--bad:#a3271c;
	--r:4px;
	--tap:46px;
	--display:'Anton',Impact,'Haettenschweiler','Arial Narrow Bold',sans-serif;
	--body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;

	font-family:var(--body);
	color:var(--ink);
	background:var(--paper);
	line-height:1.5;
	font-size:16px;
	max-width:1180px;
	margin:2rem auto;
	color-scheme:light;
}
.och *,.och *::before,.och *::after{box-sizing:border-box}
.och button{font-family:var(--body)}

/* ---------- head ---------- */
.och-head{margin-bottom:clamp(22px,3vw,32px)}
.och-eyebrow{
	font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
	color:var(--muted);margin:0 0 10px;
}
.och-head h2{
	font-family:var(--display);font-weight:400;text-transform:uppercase;
	font-size:clamp(30px,5vw,52px);line-height:1;letter-spacing:.005em;margin:0 0 12px;
}
.och-lede{margin:0;font-size:clamp(15px,1.7vw,17px);color:var(--muted);max-width:62ch;line-height:1.55}

/* ---------- two column ---------- */
.och-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(26px,3.6vw,46px);align-items:start}
@media(max-width:900px){.och-grid{grid-template-columns:1fr}}

/* ---------- fields ---------- */
.och-field{margin-bottom:clamp(16px,2.2vw,22px)}
.och-field > label,.och-flabel{
	display:block;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;
	font-weight:700;margin-bottom:9px;color:var(--ink);
}
.och-field > label em{font-style:normal;color:var(--muted);letter-spacing:.07em}
.och-req{color:var(--bad)}
.och-ctrl{
	width:100%;font-family:var(--body);font-size:16px;font-weight:600;color:var(--ink);
	background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);
	padding:0 14px;height:52px;-webkit-appearance:none;appearance:none;
}
textarea.och-ctrl{height:auto;min-height:96px;padding:13px 14px;line-height:1.5;font-weight:500;resize:vertical}
select.och-ctrl{
	padding-right:42px;cursor:pointer;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230b0b0b' stroke-width='2'/%3E%3C/svg%3E");
	background-repeat:no-repeat;background-position:right 15px center;
}
.och-ctrl:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.och-hint{margin:9px 0 0;font-size:13px;color:var(--muted);line-height:1.45}
.och-hint b{color:var(--ink)}

.och-dims{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media(max-width:540px){.och-dims{grid-template-columns:repeat(2,1fr)}}
.och-dims .och-field{margin-bottom:0}
.och-dims .och-field.is-hidden{display:none}

/* ---------- segmented control ---------- */
.och-seg{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:3px;gap:3px;max-width:100%}
.och-seg button{
	font-size:clamp(12.5px,1.5vw,14px);font-weight:800;cursor:pointer;
	border:0;background:transparent;color:var(--ink);
	padding:0 clamp(11px,2.2vw,18px);height:38px;border-radius:999px;white-space:nowrap;
}
.och-seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}

.och-check{display:flex;align-items:center;gap:11px;font-size:clamp(14px,1.6vw,14.5px);color:var(--muted);cursor:pointer;margin-top:16px}
.och-check input{width:20px;height:20px;accent-color:var(--ink);flex:none;margin:0}

/* ---------- figure + quote ---------- */
.och-figure{border:1px solid var(--line);border-radius:var(--r);background:var(--paper);padding:8px}
.och-figure svg{width:100%;height:auto;display:block}

.och-qbox{border:2px solid var(--ink);border-radius:var(--r);margin-top:16px;padding:clamp(18px,2.6vw,24px)}
.och-qline{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:15px}
.och-qline span{color:var(--muted)}
.och-qline b{font-weight:800;white-space:nowrap}
.och-qtotal{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding-top:16px;flex-wrap:wrap}
.och-qtotal span{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700}
.och-qtotal b{font-family:var(--display);font-size:clamp(32px,5.8vw,48px);line-height:1}
.och-qmeta{margin-top:15px;border-top:1px solid var(--line);padding-top:14px;font-size:13px;color:var(--muted);line-height:1.55}
.och-qmeta b{color:var(--ink)}

/* ---------- buttons ---------- */
.och-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:18px}
.och-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;
	font-size:14.5px;font-weight:800;cursor:pointer;text-decoration:none;
	background:var(--ink);color:var(--paper);border:2px solid var(--ink);border-radius:var(--r);
	min-height:var(--tap);padding:0 clamp(16px,2.4vw,24px);flex:1 1 auto;
	transition:background .13s ease,color .13s ease;
}
.och-btn:hover{background:var(--paper);color:var(--ink)}
.och-btn--ghost{background:var(--paper);color:var(--ink)}
.och-btn--ghost:hover{background:var(--ink);color:var(--paper)}
.och-btn[disabled]{opacity:.45;cursor:default}
.och-link{background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline}

.och-disclaim{margin:clamp(22px,3vw,30px) 0 0;font-size:13px;color:var(--muted);line-height:1.6;max-width:76ch}

/* ---------- install step ---------- */
/* step numbering — signals how many inputs remain */
.och-stepnum{
	font-family:var(--display);font-weight:400;font-size:12.5px;
	color:var(--muted);margin-right:9px;letter-spacing:.08em;
}
.och-bands{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
@media(max-width:400px){.och-bands{grid-template-columns:1fr}}
.och-band{
	text-align:left;padding:13px 15px;background:var(--paper);border:2px solid var(--line);
	border-radius:var(--r);cursor:pointer;color:var(--ink);
	transition:border-color .13s ease,background .13s ease;
}
.och-band:hover{border-color:var(--muted)}
.och-band[aria-pressed="true"]{border-color:var(--ink);background:var(--wash)}
.och-band b{display:block;font-weight:800;font-size:14.5px;margin-bottom:3px;color:var(--ink)}
.och-band span{display:block;font-size:12.5px;color:var(--muted);line-height:1.4;font-weight:500}

/* ---------- booking ---------- */
.och-book{margin-top:clamp(26px,3.4vw,36px);padding:clamp(20px,3vw,28px);background:var(--wash);border:1px solid var(--line);border-radius:var(--r)}
.och-book h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(20px,3vw,26px);margin:0 0 10px;line-height:1.05}
.och-days{display:flex;flex-direction:column;gap:16px;margin-top:16px}
.och-day h4{font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin:0 0 8px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.och-slots{display:flex;flex-wrap:wrap;gap:8px}
.och-slot{
	font-size:14px;font-weight:700;padding:0 14px;height:42px;cursor:pointer;
	background:var(--paper);border:2px solid var(--ink);border-radius:var(--r);color:var(--ink);
}
.och-slot:hover{background:var(--ink);color:var(--paper)}
.och-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:540px){.och-pair{grid-template-columns:1fr}}
.och-err{background:#fdecec;border-left:3px solid var(--bad);color:#7e2f27;padding:11px 14px;font-size:14px;margin-bottom:16px}
.och-status{margin:0;color:var(--muted);font-size:15px}
.och-booked{margin-top:clamp(26px,3.4vw,36px);padding:clamp(20px,3vw,28px);border:2px solid var(--ink);border-radius:var(--r)}
.och-booked h3{font-family:var(--display);font-weight:400;text-transform:uppercase;font-size:clamp(22px,3.4vw,30px);margin:0 0 10px;line-height:1.05}
.och-booked p{margin:0 0 8px;font-size:15px}
.och-booked p:last-child{margin-bottom:0}

/* ---------- published price list ---------- */
.och-plist{max-width:1180px;margin:2rem auto;font-family:var(--body);color:var(--ink)}
.och-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.och-tab{
	font-size:13.5px;font-weight:800;cursor:pointer;padding:0 16px;height:40px;
	background:var(--paper);border:2px solid var(--ink);border-radius:999px;color:var(--ink);
}
.och-tab[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.och-table{width:100%;border-collapse:collapse;font-size:15px}
.och-table th{
	text-align:left;font-size:11px;letter-spacing:.15em;text-transform:uppercase;
	padding:10px 12px;border-bottom:2px solid var(--ink);white-space:nowrap;
}
.och-table th:not(:first-child),.och-table td:not(:first-child){text-align:right}
.och-table td{padding:11px 12px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.och-table tr.och-cat td{
	background:var(--wash);font-family:var(--display);text-transform:uppercase;
	font-size:15px;letter-spacing:.02em;padding:9px 12px;
}
.och-table .och-na{color:var(--muted)}

.och-noscript{padding:20px;border:2px solid var(--ink);border-radius:var(--r)}
@media(max-width:600px){
	.och{margin:1rem auto;font-size:15px}
	.och-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){.och *{transition:none!important;animation:none!important}}

/* ============================================================
   v2.1 — flow restructure + inherited-color fixes
   ============================================================ */

/* Step numbers in the controls column. */
.och-n{
	font-style:normal;font-family:var(--display);font-size:13px;letter-spacing:.04em;
	color:var(--muted);margin-right:7px;
}

/* Install is step 04, inside the controls column. */
.och-install{margin-top:clamp(22px,3vw,30px);padding-top:clamp(20px,2.6vw,26px);border-top:2px solid var(--ink)}
.och-install .och-bands{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}

/* Prompt shown in place of the booking CTA until step 04 is answered. */
.och-nudge{
	margin-top:18px;padding:13px 16px;background:var(--wash);
	border-left:3px solid var(--ink);font-size:14px;line-height:1.5;color:var(--muted);
}
.och-nudge b{color:var(--ink)}

/* The quote follows you down the page on desktop. */
@media(min-width:901px){
	.och-out{position:sticky;top:24px}
}

/* --- COLOR FIX ---------------------------------------------------------
   Themes (GeneratePress among them) style bare <button> elements with a
   light color. Anything inside .och that renders text on paper has to set
   its own color rather than inherit — the band titles were rendering white
   on white and only appeared on hover.
   --------------------------------------------------------------------- */
.och button{color:var(--ink);background-color:transparent}
.och-band,
.och-band b,
.och-band span{color:var(--ink)}
.och-band span{color:var(--muted)}
.och-band[aria-pressed="true"] b{color:var(--ink)}
.och-seg button{color:var(--ink)}
.och-seg button[aria-pressed="true"]{color:var(--paper)}
.och-slot{color:var(--ink)}
.och-slot:hover{color:var(--paper)}
.och-tab{color:var(--ink)}
.och-tab[aria-pressed="true"]{color:var(--paper)}
.och-btn{color:var(--paper);background-color:var(--ink)}
.och-btn:hover{color:var(--ink);background-color:var(--paper)}
.och-btn--ghost{color:var(--ink);background-color:var(--paper)}
.och-btn--ghost:hover{color:var(--paper);background-color:var(--ink)}
.och-link{color:var(--ink)}

/* Theme resets that would otherwise leak in. */
.och button:hover,.och button:focus{text-decoration:none}
.och .och-table td,.och .och-table th{color:var(--ink)}

/* ============================================================
   v2.4 — self-sufficiency and mobile
   The plugin previously relied on the site stylesheet to survive
   theme styling. It no longer does: everything below makes the
   calculator render correctly on its own, in any theme.
   ============================================================ */

/* --- the calculator carries its own gutters ------------------- */
.och-calc-pad{padding-inline:clamp(16px,3.5vw,28px)}

/* --- themes style bare form fields; ours override -------------- */
.och .och-ctrl,
.och input.och-ctrl,
.och select.och-ctrl,
.och textarea.och-ctrl{
	background-color:var(--paper)!important;
	color:var(--ink)!important;
	-webkit-text-fill-color:var(--ink)!important;
	border:2px solid var(--ink)!important;
	border-radius:var(--r)!important;
	opacity:1!important;
	box-shadow:none!important;
	font-weight:600!important;
	line-height:normal;
}
.och select.och-ctrl{
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230b0b0b' stroke-width='2'/%3E%3C/svg%3E")!important;
	background-repeat:no-repeat!important;
	background-position:right 15px center!important;
}
.och .och-ctrl::placeholder{color:#a8adb4!important;-webkit-text-fill-color:#a8adb4!important;opacity:1}
.och .och-field > label,.och .och-flabel{background:none!important;color:var(--ink)!important}

/* --- headings and buttons against theme defaults --------------- */
.och h2,.och h3,.och h4,
.och .och-head h2,.och .och-book h3,.och .och-booked h3{color:var(--ink)!important}
.och-head h2{font-family:var(--display)!important}
.och .och-btn{
	display:inline-flex!important;align-items:center!important;justify-content:center!important;
	min-height:var(--tap)!important;padding:12px 22px!important;
	border:2px solid var(--ink)!important;border-radius:var(--r)!important;
	background-color:var(--ink)!important;color:var(--paper)!important;
	font-weight:800!important;text-decoration:none!important;line-height:1.2!important;
}
.och .och-btn:hover{background-color:var(--paper)!important;color:var(--ink)!important}
.och .och-btn--ghost{background-color:var(--paper)!important;color:var(--ink)!important}
.och .och-btn--ghost:hover{background-color:var(--ink)!important;color:var(--paper)!important}
.och .och-btn[disabled]{opacity:.45!important}
.och .och-seg button{color:var(--ink)!important;background-color:transparent!important;border:0!important}
.och .och-seg button[aria-pressed="true"]{background-color:var(--ink)!important;color:var(--paper)!important}
.och .och-slot{color:var(--ink)!important;background-color:var(--paper)!important}
.och .och-slot:hover{background-color:var(--ink)!important;color:var(--paper)!important}
.och .och-tab{color:var(--ink)!important;background-color:var(--paper)!important}
.och .och-tab[aria-pressed="true"]{background-color:var(--ink)!important;color:var(--paper)!important}
.och .och-band{background-color:var(--paper)!important}
.och .och-band b{color:var(--ink)!important}
.och .och-band span{color:var(--muted)!important}

/* --- mobile ---------------------------------------------------- */
@media(max-width:640px){
	.och{font-size:15px}
	.och-calc-pad{padding-inline:18px}
	.och-figure svg{max-height:180px}
	.och-figure{padding:4px}
	.och-qbox{padding:18px 16px}
	.och-book,.och-booked{padding:18px 16px}
	.och-install{margin-top:24px;padding-top:22px}
	.och-seg{width:100%}
	.och-seg button{flex:1 1 0;padding:0 8px;text-align:center}
	.och-bands{grid-template-columns:1fr}
	.och-cta .och-btn{flex:1 1 100%}
	.och-grid{gap:26px}
	.och-field{margin-bottom:18px}
	.och-head h2{font-size:1.5rem}
}

/* iOS zooms any field under 16px on focus. */
@media(max-width:820px){
	.och .och-ctrl{font-size:16px!important;height:50px}
	.och textarea.och-ctrl{height:auto;min-height:96px}
}