/* =====================================================================
   Soft Starter Selector — AutomationDirect webstore theme
   Brand color via the --adc-* tokens (Falcon.css), neutrals via Bootstrap's
   --bs-gray-* / --bs-body-color. No local palette. Scoped under .ss-page.
   ===================================================================== */

#nav_content, .tabbed-content {
	overflow: visible;
}
i {font-size:14px;}
.ss-page{background:#fff;color:var(--bs-body-color)}
.ss-page h1,.ss-page h2,.ss-page h3,.ss-page h4{margin:0;color:var(--bs-body-color)}
.ss-page p{margin:0}
.ss-wrap{max-width:1180px}

.ss-eyebrow{color:var(--adc-blue)}

.ss-page :focus-visible{outline:2px solid var(--adc-blue);outline-offset:2px;border-radius:4px}

/* ---------- compact hero ---------- */
.ss-hero{background:#EEF3F8}
.ss-hero-row{padding-top:10px}
.ss-hero h1{font-size:clamp(1.4rem,2.3vw,1.85rem);margin:0}
.ss-hero h1 .ss-hl{color:var(--adc-blue)}
.ss-lede{color:var(--bs-gray-700);margin:0;line-height:1.4}

/* ---------- selector (light working area) ---------- */
.ss-tool{background:#EEF3F8;padding-bottom:56px}
/* intro (short blurb + image) beneath the header */
.ss-intro-copy{color:var(--bs-gray-700);line-height:1.5;margin:0}
.ss-intro-img{width:100%;height:auto;max-width:320px;border-radius:8px}

/* About + FAQ (SEO / answer-engine content) */
.ss-about{margin-top:44px;max-width:860px}
.ss-about > h2{margin-bottom:12px}
.ss-about p{color:var(--bs-gray-700);margin:0 0 12px}
.ss-about p:last-child{margin-bottom:0}

/* FAQ */
.ss-faq{margin-top:44px;max-width:860px}
.ss-faq details{background:#fff;border:1px solid var(--bs-gray-300);border-radius:8px;padding:14px 18px;margin-bottom:10px}
.ss-faq summary{font-weight:700;color:var(--bs-body-color);cursor:pointer;list-style:none;position:relative;padding-right:26px}
.ss-faq summary::-webkit-details-marker{display:none}
.ss-faq summary::after{content:"+";position:absolute;right:2px;top:-1px;font-size:16px;line-height:1;color:var(--adc-blue);font-weight:700}
.ss-faq details[open] summary::after{content:"\2212"}
.ss-faq details[open] summary{margin-bottom:10px}
.ss-faq details p{color:var(--bs-gray-700);margin:0}

.ss-units{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--bs-gray-300);border-radius:8px}
.ss-units label{font-weight:600;padding:7px 15px;border-radius:5px;cursor:pointer;color:var(--bs-gray-700);margin:0;display:inline-flex;align-items:center;gap:6px}
.ss-units input{position:absolute;opacity:0;width:0;height:0}
.ss-units label.on{color:#fff}
.ss-tool-btn{font-weight:600;padding:9px 15px;border-radius:6px;border:1px solid var(--bs-gray-300);background:#fff;color:var(--adc-blue);cursor:pointer}
.ss-tool-btn:hover{border-color:var(--adc-blue)}

.ss-card{background:#fff;border:1px solid var(--bs-gray-300);border-radius:8px;padding:22px 24px;box-shadow:0 1px 3px rgba(20,40,60,.06)}
.ss-card-title{color:var(--bs-body-color);margin:0 0 10px}
.ss-forms .ss-card + .ss-card-title{margin-top:22px}

.ss-field{margin-bottom:16px}
.ss-field:last-child{margin-bottom:0}
.ss-field > .ss-flabel{display:block;font-weight:700;color:var(--bs-body-color);margin-bottom:8px}
.ss-field .ss-hint{font-size:12px;color:var(--bs-gray-600);font-weight:400;margin-left:6px}
.ss-field .fa-info-circle{cursor:pointer;margin-left:5px}

/* radios rendered as chips */
.ss-chips{display:flex;flex-wrap:wrap;gap:8px}
.ss-chips label{
	font-weight:600;
	border:1px solid var(--bs-gray-300);border-radius:6px;
	padding:9px 15px;cursor:pointer;color:var(--bs-body-color);margin:0;
	display:inline-flex;align-items:center;user-select:none;
	transition:border-color .12s ease,background .12s ease,color .12s ease;
}
.ss-chips label:hover{border-color:var(--adc-blue)}
.ss-chips input{position:absolute;opacity:0;width:0;height:0}
.ss-chips label.on{color:#fff;border-color:var(--adc-blue)}
.ss-chips label.disabled{opacity:.4;cursor:not-allowed;text-decoration:line-through}

.ss-page input[type=number],.ss-page select.ss-input{
	width:100%;padding:11px 12px;border:1px solid var(--bs-gray-300);border-radius:6px;background:#fff;color:var(--bs-body-color);
}
.ss-page input[type=number]:focus,.ss-page select.ss-input:focus{outline:none;border-color:var(--adc-blue);box-shadow:0 0 0 3px rgba(13,114,194,.16)}

/* Motor size and trip class are the only fields with no default. Blue reads as
   "do this next" on arrival; red is reserved for a value that's actually wrong,
   so is-invalid wins where a field is both empty and out of range. */
.ss-field.is-needed select.ss-input:not(.is-invalid),
.ss-field.is-needed .adc-number-input:not(.is-invalid){border-color:var(--adc-blue);background:rgba(13,114,194,.04)}
/* Bootstrap's is-invalid/is-valid only target .form-control/.form-select, so the
   classes already bound on the motor-size select branch had no effect. */
.ss-page select.ss-input.is-invalid{border-color:var(--bs-danger)}
.ss-page select.ss-input.is-valid{border-color:var(--adc-green)}

/* optional uprating toggles */
.ss-toggle{display:flex;align-items:flex-start;gap:12px;padding:13px 0;border-top:1px solid var(--bs-gray-200);cursor:pointer;user-select:none}
.ss-toggle:first-of-type{border-top:none;padding-top:4px}
.ss-toggle .ss-tlab{color:var(--bs-body-color)}
.ss-toggle .ss-tlab small{display:block;color:var(--bs-gray-600);font-size:12px;margin-top:2px}
.ss-toggle input[type=checkbox]{margin-top:3px;width:17px;height:17px;accent-color:var(--adc-blue);cursor:pointer;flex:0 0 auto}
.ss-range {
	padding-bottom: 20px;
}

/* summary rail — the sticky lives on an inner wrapper, NOT the Bootstrap flex
   column. The column stays full-height (stretched by the row), which gives the
   inner wrapper room to stay pinned through the form column, incl. Potential
   Uprating Factors; it releases at the bottom of the column so it never overlaps
   the results below. (Making the flex column itself sticky doesn't work: a
   stretched flex item has no travel room.) */
.ss-rail{margin-top:20px}
.ss-rail-sticky{position:sticky;top:18px}
.ss-rail .ss-card{padding:0;overflow:hidden}
.ss-rail-head{color:#fff;padding:15px 20px}
.ss-rail-head .ss-eyebrow{color:rgba(255,255,255,.85)}
.ss-rail-head h3{color:#fff}
.ss-rail-body{padding:6px 20px 16px}
.ss-spec-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--bs-gray-200)}
.ss-spec-row:last-child{border-bottom:none}
.ss-spec-row .k{color:var(--bs-gray-600)}
.ss-spec-row .v{font-weight:700;text-align:right;color:var(--bs-body-color)}
.ss-spec-row .v.empty{color:var(--bs-gray-500);font-weight:400}
.ss-go{padding:14px 20px 20px}
.ss-go .ss-msg{font-size:12px;color:var(--bs-gray-600);text-align:center;margin-top:10px}

/* ---------- results ---------- */
.ss-results{margin-top:44px}
#recommendations-header{scroll-margin-top:10px}
.ss-results-head{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
.ss-results-head h2{margin-right:auto}
.ss-recap{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.ss-recap .chip{background:#fff;border:1px solid var(--bs-gray-300);border-radius:18px;padding:6px 14px;color:var(--bs-body-color)}
.ss-recap .chip b{font-weight:700;margin-right:5px}
.ss-res-controls .ss-cbtn{font-weight:600;padding:9px 13px;border-radius:6px;background:#fff;border:1px solid var(--bs-gray-300);color:var(--bs-body-color);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ss-res-controls .ss-cbtn:hover{border-color:var(--adc-blue)}
.ss-res-controls .ss-cbtn.on{border-color:var(--adc-blue);color:var(--adc-blue)}
.ss-res-controls .stock-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%}
.ss-res-controls .stock-icon.fa-check{background:var(--adc-green-light);color:#fff}
.ss-res-controls .stock-icon.fa-xmark{background:var(--bs-gray-300);color:var(--bs-gray-600)}

.ss-page [v-cloak]{display:none}

/* cards grid: columns size to their own card, but a column whose card is expanded
   stretches, so two expanded cards on a line match height while a collapsed one stays short */
.ss-plates{align-items:flex-start}
.ss-plates > div:has(.family-result.is-expanded){align-self:stretch}
.ss-plates .family-result{height:100%}

/* family result card (store-style blue header) */
.ss-page .family-result{
	background:#fff;border:1px solid var(--bs-gray-300);border-radius:8px;overflow:hidden;padding:0;margin:0;
	box-shadow:0 2px 6px rgba(20,40,60,.08);
}
.ss-page .family-result-header{
	color:#fff;padding:15px 20px;margin:0;cursor:pointer;
}
.ss-page .family-result-header p.fw-bold{color:#fff}
.ss-page .family-result-toggle{cursor:pointer;color:rgba(255,255,255,.9)}
.ss-page .family-result-body{padding:18px 20px 20px;background:#fff}
.ss-nameplate-sub{display:flex;justify-content:space-between;gap:12px;color:rgba(255,255,255,.8)}
.ss-nameplate-sub span:last-child{color:#fff}

/* sizing story */
.ss-sizing{background:#EEF3F8;border:1px solid var(--bs-gray-200);border-radius:8px;padding:14px 16px;margin-top:2px}
.ss-sizing-head{color:var(--bs-gray-600);margin-bottom:10px;display:flex;justify-content:space-between;gap:12px}
.ss-bar{position:relative;height:8px;background:var(--bs-gray-300);border-radius:5px;margin:6px 0 4px}
.ss-bar .given{position:absolute;left:0;top:0;bottom:0;background:var(--bs-gray-500);border-radius:5px}
.ss-bar .eff{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,var(--adc-blue),var(--adc-green-light));border-radius:5px}
.ss-bar .cap{position:absolute;top:-4px;width:2px;height:16px;background:var(--bs-body-color)}
.ss-bar-legend{display:flex;justify-content:space-between;color:var(--bs-gray-700)}
.ss-adj{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.ss-adj .a{color:var(--bs-gray-700);display:flex;justify-content:space-between;gap:12px}
.ss-adj .a span:last-child{color:var(--adc-blue);font-weight:600}
.ss-stepup{font-size:12px;margin-top:10px;padding-top:9px;border-top:1px dashed var(--bs-gray-300)}

.ss-page .family-result-body .product-recommendation,
.ss-page .family-result-body .item-container{margin:12px 0 0}
.ss-fan-label{margin:14px 0 0}
/* recommended add-ons in the detail body */
.ss-rec{padding-top:14px;border-top:1px dashed var(--bs-gray-300)}
.ss-rec-item{padding:6px 0}
.ss-rec-check{display:flex;align-items:center;gap:8px;color:var(--bs-body-color);cursor:pointer}
.ss-rec-check input{cursor:pointer}
/* subtotal row: Bootstrap grid mirroring the product-component columns so
   "Subtotal $x" sits in the item-price column; Add to cart centered in the middle. */
.ss-subtotal-row{margin-top:16px}
.ss-subtotal-row .lbl{color:var(--bs-gray-700)}
.ss-subtotal-cell{white-space:nowrap;padding-left:1.2rem}
.ss-page .price{color:var(--adc-green);font-weight:700}

/* sizing note (legacy details) restyle if present */
.ss-page .sizing-details summary{color:var(--adc-blue)}
.ss-page .sized-as,.ss-page .sizing-details{font-size:12px;color:var(--bs-gray-700)}

/* no-match group */
.ss-nm-row{display:flex;gap:14px;padding:9px 0;border-top:1px solid var(--bs-gray-200)}
.ss-nm-row:first-of-type{border-top:none}
.ss-nm-row .nf{font-weight:700;color:var(--bs-body-color);min-width:90px}
.ss-nm-row .nr{color:var(--bs-gray-700)}

.ss-empty{color:var(--bs-gray-700);padding:32px 0;text-align:center}

/* ---------- card / table view toggle ---------- */
.ss-view-toggle{display:inline-flex;gap:0;border:1px solid var(--bs-gray-300);border-radius:6px;overflow:hidden;background:#fff}
.ss-view-toggle .ss-cbtn{font-weight:600;padding:9px 14px;border:none;border-radius:0;color:var(--bs-body-color);cursor:pointer;display:inline-flex;align-items:center;gap:7px}
.ss-view-toggle .ss-cbtn + .ss-cbtn{border-left:1px solid var(--bs-gray-300)}
.ss-view-toggle .ss-cbtn:hover{color:var(--adc-blue)}
.ss-view-toggle .ss-cbtn.on{color:#fff}

/* ---------- table view (fixed columns + slider-scrolled spec columns) ---------- */
/* div/flex, not a real table: rows are clipped to the container width so the spec
   track (offset by the slider) and the expand panel never overflow horizontally.
   --ss-fixed-w must equal the summed .ss-col-1/2/3 flex-basis widths below. */
.ss-tbl-outer{--ss-fixed-w:470px;border:1px solid var(--bs-gray-300);border-radius:8px;box-shadow:0 2px 6px rgba(20,40,60,.08);overflow:hidden;background:#fff}

/* top slider that offsets the spec track; padded to start above the spec window */
.ss-tbl-sliderbar{display:flex;align-items:center;gap:14px;padding:9px 16px 9px var(--ss-fixed-w);background:#EEF3F8}
.ss-tbl-slider{-webkit-appearance:none;appearance:none;flex:1 1 auto;height:8px;border-radius:5px;background:var(--adc-blue);outline:none;cursor:pointer}
.ss-tbl-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:38px;height:22px;border:none;border-radius:4px;background:var(--adc-blue) url('/images/icons/left-right-slider-no-shadow.png') center/20px no-repeat;cursor:grab}
.ss-tbl-slider:active::-webkit-slider-thumb{cursor:grabbing}
.ss-tbl-slider::-moz-range-thumb{width:38px;height:22px;border:none;border-radius:4px;background:var(--adc-blue) url('/images/icons/left-right-slider-no-shadow.png') center/20px no-repeat;cursor:grab}
.ss-tbl-morecue{flex:0 0 auto;font-weight:700;white-space:nowrap}

/* rows: flex, clipped to the container width */
.ss-trow{display:flex;flex-wrap:nowrap;overflow:hidden;align-items:stretch}
.ss-cell{padding:12px 16px;text-align:left}
.ss-col-1{flex:0 0 220px}
.ss-col-2{flex:0 0 120px}
.ss-col-3{flex:0 0 130px}

/* header */
.ss-thead{color:#fff}

/* body rows: banding + hover accent (inset shadow adds no width, so columns stay put) */
.ss-tbl-row{cursor:pointer;background:#fff;border-top:1px solid var(--adc-blue)}
.ss-tbl-row.ss-row-alt{background:var(--bs-gray-100)}
.ss-tbl-row:hover{box-shadow:inset 2px 0 0 0 var(--adc-blue)}
.ss-tbl-row .sub{display:block;font-size:12px;color:var(--bs-gray-600);margin-top:2px}
.ss-tbl-fam .chev{font-size:12px}
.ss-tbl-pn{display:inline-block;color:var(--adc-blue);font-weight:600;text-decoration:none;font-size:12px;margin-top:3px}
.ss-tbl-pn:hover{text-decoration:underline}
.ss-tbl-fam .pn-main{font-weight:700;margin-top:0}
.ss-tbl-stock .ok{color:var(--adc-green);font-weight:700;white-space:nowrap}
.ss-tbl-stock .no{color:var(--bs-danger);font-weight:700;white-space:nowrap}

/* spec columns: a clipped window over a no-wrap track shifted by the slider */
.ss-specwin{flex:1 1 auto;min-width:0;overflow:hidden}
.ss-spectrack{display:flex;flex-wrap:nowrap;transition:margin-left .12s ease}
.ss-spec-col{flex:0 0 180px}
.ss-spec-col.ss-col-bullets{flex:0 0 240px}
.ss-cell-bullets li{margin-bottom:3px}

/* expanded detail: a normal full-width block, bounded to the container width so it
   never stretches with the spec scroll (reuses the card's sizing/subtotal styles) */
/* an expanded row merges with its detail (no line between them); the detail's
   bottom border is the separator, so the following row drops its own top border */
.ss-expand{background:#fff;border-bottom:1px solid var(--adc-blue);padding:16px 20px}
.ss-row-open + .ss-expand + .ss-tbl-row{border-top:0}
.ss-expand .ss-subtotal-row{margin-top:14px}
/* table view: the sizing block shrinks to its content and sits left-aligned —
   no full-width container, no space-between spreading the label from the value */
.ss-sizing-compact{display:inline-block;width:auto}
.ss-sizing-compact .ss-sizing-head,
.ss-sizing-compact .ss-adj .a{justify-content:flex-start;gap:10px}
/* size the shared product-component's image in the detail panel without touching the component */
.ss-expand .product-image img{width:85px;height:auto}
/* the fan's product-component sits directly under its label, which already has mt-3 —
   drop the component's own baked-in mt-3 so the gap isn't doubled */
.ss-fan-label + .product-component{margin-top:0!important}

/* spinner / error */
.ss-loading{text-align:center;padding:52px 0;color:var(--bs-gray-700)}
.ss-loading #spinner{margin:0 auto 16px}
.ss-error{background:#fff;border:1px solid #e6b9ac;border-left:4px solid var(--bs-danger);border-radius:8px;padding:20px 22px;max-width:640px;margin:22px auto 0;color:var(--bs-body-color)}
.ss-error h3{color:var(--bs-danger);margin-bottom:10px}

/* ---------- responsive ---------- */
/* Layout columns are Bootstrap (col-*) and stack on their own breakpoints.
   Only the sticky rail needs releasing once the columns stack (below lg). */
@media(max-width:991px){
	.ss-rail{margin-top:0}
	.ss-rail-sticky{position:static}
}