/* ==========================================================================
   EVOCHIP — shared card/chip toggle component system.

   Originated independently in the Fence Costing (type-chip family) and
   Pipe Modifier V3 (toggle-chip/swatch-chip/stepper/rate-card/nav-btn
   families) plugins under two different local prefixes (fc-/p2-), unified
   under a single evochip- prefix and centralised here 2026-08-01 so any
   future modal/helper can reuse the same classes instead of hand-copying a
   local stylesheet. Loaded globally (index.php), not gated on any plugin
   being active — the rules are inert without matching markup.

   Adding a new evochip- component: follow the evochip-{variant}-{part}
   naming pattern already used below (e.g. evochip-swatch-label) rather than
   inventing a new prefix.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Dimension card — a hero numeric field (e.g. an overall height/opening
   size) that drives everything else on the step but is still just a plain
   number. Needs to visually outweigh the chip pickers around it, not read as
   a leftover plain input buried among flashier chip rows — bigger type, a
   filled icon badge, and an accent border/background instead of a plain box.
   -------------------------------------------------------------------------- */
.evochip-dimension-row{
	display:flex;
	flex-wrap:wrap;
	gap:16px;
	margin:4px 0 22px;
}
.evochip-dimension-card{
	display:flex;
	align-items:center;
	gap:14px;
	flex:1 1 260px;
	min-width:220px;
	padding:16px 20px;
	border:2px solid #2f6fed;
	border-radius:16px;
	background:linear-gradient(180deg,#f3f7ff,#eaf1ff);
	box-shadow:0 4px 12px rgba(47,111,237,.12);
}
.evochip-dimension-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:52px;
	height:52px;
	border-radius:50%;
	background:#2f6fed;
	color:#fff;
	flex-shrink:0;
	box-shadow:0 2px 8px rgba(47,111,237,.35);
}
.evochip-dimension-icon i{ font-size:26px; }
.evochip-dimension-body{
	display:flex;
	flex-direction:column;
	gap:2px;
	flex:1;
	min-width:0;
}
.evochip-dimension-label{
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.4px;
	color:#3d5a99;
}
.evochip-dimension-value{
	display:flex;
	align-items:baseline;
	gap:6px;
}
.evochip-dimension-value input{
	border:none !important;
	background:transparent !important;
	padding:0 !important;
	font-size:28px;
	font-weight:700;
	color:#16305e;
	width:120px;
	line-height:1.15;
}
.evochip-dimension-value input:focus{ outline:none; box-shadow:none; }
.evochip-dimension-unit{
	font-size:14px;
	font-weight:600;
	color:#6f86b8;
}

/* --------------------------------------------------------------------------
   Summary section — READ-ONLY review/preview display (e.g. Fence Costing's
   generated-gate review step), not an interactive control like the chip
   families below. A labelled key/value grid instead of a plain vertical
   <table> of rows, so a review screen full of specs reads as scannable
   grouped cards rather than a wall of two-column table rows with no visual
   hierarchy.
   -------------------------------------------------------------------------- */
.evochip-summary-section{
	background:#f8f9fb;
	border:1px solid #e6e9ed;
	border-radius:18px;
	padding:20px 24px 24px;
	margin:0 0 20px;
}
.evochip-summary-heading{
	display:flex;
	align-items:center;
	gap:10px;
	font-size:15px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.4px;
	color:#3d4a58;
	margin-bottom:16px;
	padding-bottom:12px;
	border-bottom:1px solid #e1e5ea;
}
.evochip-summary-heading i{ font-size:22px; color:#6b7684; }
.evochip-summary-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(170px, 1fr));
	gap:16px 20px;
}
.evochip-summary-item{
	display:flex;
	flex-direction:column;
	gap:3px;
	min-width:0;
}
.evochip-summary-item.wide{ grid-column:1 / -1; }
.evochip-summary-label{
	display:flex;
	align-items:center;
	gap:5px;
	font-size:11px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	color:#9aa4af;
	white-space:nowrap;
}
.evochip-summary-label i{ font-size:14px; }
.evochip-summary-value{
	font-size:15px;
	font-weight:600;
	color:#2b333c;
	line-height:1.35;
	word-break:break-word;
}
.evochip-summary-value .evochip-summary-note{
	display:block;
	font-size:11.5px;
	font-weight:500;
	color:#9aa4af;
	margin-top:2px;
}
.evochip-summary-value.accent{
	color:#1fae62;
	font-size:20px;
	font-weight:700;
}

/* --------------------------------------------------------------------------
   Type picker — family-grouped icon chips, one section per family, one chip
   per option. Originally Fence Costing's step-0 module picker; sized
   generously (bigger cards, more padding) since it renders inside a
   full-screen modal, not a capped-width dialog.
   -------------------------------------------------------------------------- */
.evochip-nav-hidden {
     display: none !important;
}

.evochip-picker-heading {
     max-width: 720px;
     margin: 4px 0 26px;
}

.evochip-picker-subtitle {
     color: #6b7684;
     font-size: 14px;
     margin: 4px 0 0;
}

.evochip-family-section {
     background: #f8f9fb;
     border: 1px solid #e6e9ed;
     border-radius: 18px;
     padding: 22px 26px 26px;
     margin: 0 0 22px;
}

.evochip-family-heading {
     display: flex;
     align-items: center;
     gap: 10px;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .4px;
     color: #3d4a58;
     margin-bottom: 16px;
     padding-bottom: 12px;
     border-bottom: 1px solid #e1e5ea;
}

.evochip-family-heading i {
     font-size: 24px;
     color: #6b7684;
}

.evochip-type-row {
     display: flex;
     flex-wrap: wrap;
     gap: 16px;
}

.evochip-type-chip {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 6px;
     width: 190px;
     padding: 24px 16px 18px;
     border: 2px solid #e1e5ea;
     border-radius: 18px;
     background: #fff;
     cursor: pointer;
     user-select: none;
     text-align: center;
     transition: border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .08s ease;
}

.evochip-type-chip:hover {
     border-color: #c3cbd4;
     box-shadow: 0 6px 14px rgba(15,23,42,.08);
     transform: translateY(-2px);
}

.evochip-type-chip:active {
     transform: translateY(0) scale(.97);
}

.evochip-type-chip:focus-visible {
     outline: 2px solid #2f6fed;
     outline-offset: 2px;
}

.evochip-type-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 60px;
     height: 60px;
     border-radius: 50%;
     background: #eef1f5;
     margin-bottom: 4px;
     transition: background-color .2s ease, box-shadow .2s ease;
}

.evochip-type-icon i {
     font-size: 30px;
     color: #7c8894;
     transition: color .2s ease;
}

.evochip-type-label {
     font-size: 14px;
     font-weight: 700;
     line-height: 1.3;
     color: #313a44;
}

.evochip-type-sublabel {
     font-size: 11.5px;
     font-weight: 600;
     color: #9aa4af;
     text-transform: uppercase;
     letter-spacing: .3px;
}

.evochip-type-badge {
     position: absolute;
     top: 10px;
     left: 10px;
     font-size: 10px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .3px;
     color: #a56b1a;
     background: #fff3d9;
     border: 1px solid #f0dba8;
     border-radius: 999px;
     padding: 3px 9px;
}

.evochip-type-chip-comingsoon {
     border-style: dashed;
     background: #fbfcfd;
}

.evochip-type-chip-comingsoon .evochip-type-icon {
     background: #f1f3f5;
}

.evochip-type-check {
     position: absolute;
     top: -8px;
     right: -8px;
     width: 24px;
     height: 24px;
     border-radius: 50%;
     background: #1fae62;
     color: #fff;
     display: flex;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 5px rgba(15,23,42,.25);
     opacity: 0;
     transform: scale(.5);
     transition: opacity .18s ease, transform .18s ease;
}

.evochip-type-check i {
     font-size: 15px;
}

.evochip-type-chip.active {
     border-color: #1fae62;
     background: linear-gradient(180deg,#eefcf3,#e3faec);
     box-shadow: 0 6px 16px rgba(31,174,98,.18);
}

.evochip-type-chip.active .evochip-type-icon {
     background: #1fae62;
     box-shadow: 0 2px 8px rgba(31,174,98,.35);
}

.evochip-type-chip.active .evochip-type-icon i { color: #fff; }
.evochip-type-chip.active .evochip-type-label { color: #116b3a; }
.evochip-type-chip.active .evochip-type-sublabel { color: #1fae62; }
.evochip-type-chip.active .evochip-type-check { opacity: 1; transform: scale(1); }

/* Placeholder "coming soon" step used by scaffolded modules that have no
   real wizard steps yet. */
.evochip-comingsoon-icon {
     font-size: 48px;
     color: #c3cbd4;
}

/* --------------------------------------------------------------------------
   Toggle chip — single-click on/off chips, originally replacing Pipe
   Modifier V3's old two-click Yes/No dropdowns for simple post features.
   -------------------------------------------------------------------------- */
.evochip-toggle-row{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
	margin:4px 0 22px;
}
.evochip-toggle-chip{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:6px;
	width:120px;
	padding:16px 10px 12px;
	border:2px solid #e1e5ea;
	border-radius:16px;
	background:#fbfcfd;
	cursor:pointer;
	user-select:none;
	text-align:center;
	transition:border-color .18s ease, background-color .18s ease, box-shadow .18s ease, transform .08s ease;
}
.evochip-toggle-chip:hover{
	border-color:#c3cbd4;
	box-shadow:0 4px 10px rgba(15,23,42,.07);
	transform:translateY(-1px);
}
.evochip-toggle-chip:active{
	transform:translateY(0) scale(.96);
}
.evochip-toggle-chip:focus-visible{
	outline:2px solid #2f6fed;
	outline-offset:2px;
}
.evochip-toggle-chip .evochip-toggle-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:46px;
	height:46px;
	border-radius:50%;
	background:#eef1f5;
	transition:background-color .2s ease, box-shadow .2s ease;
}
.evochip-toggle-chip .evochip-toggle-icon i{
	font-size:24px;
	color:#7c8894;
	transition:color .2s ease;
}
.evochip-toggle-chip .evochip-toggle-label{
	font-size:12.5px;
	font-weight:600;
	line-height:1.25;
	color:#4c5866;
	letter-spacing:.1px;
	transition:color .2s ease;
}
.evochip-toggle-chip .evochip-toggle-state{
	font-size:10.5px;
	font-weight:700;
	letter-spacing:.6px;
	text-transform:uppercase;
	color:#9aa4af;
	transition:color .2s ease;
}
.evochip-toggle-chip .evochip-toggle-check{
	position:absolute;
	top:-7px;
	right:-7px;
	width:22px;
	height:22px;
	border-radius:50%;
	background:#1fae62;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 2px 5px rgba(15,23,42,.25);
	opacity:0;
	transform:scale(.5);
	transition:opacity .18s ease, transform .18s ease;
}
.evochip-toggle-chip .evochip-toggle-check i{
	font-size:14px;
}
.evochip-toggle-chip.active{
	border-color:#1fae62;
	background:linear-gradient(180deg,#eefcf3,#e3faec);
	box-shadow:0 4px 12px rgba(31,174,98,.18);
}
.evochip-toggle-chip.active .evochip-toggle-icon{
	background:#1fae62;
	box-shadow:0 2px 8px rgba(31,174,98,.35);
}
.evochip-toggle-chip.active .evochip-toggle-icon i{ color:#fff; }
.evochip-toggle-chip.active .evochip-toggle-label{ color:#116b3a; }
.evochip-toggle-chip.active .evochip-toggle-state{ color:#1fae62; }
.evochip-toggle-chip.active .evochip-toggle-check{ opacity:1; transform:scale(1); }
/* display:contents keeps a conditionally-hidden chip's wrapper out of the
   flex box model so the chip still lays out as a direct .evochip-toggle-row
   item when shown. */
.evochip-toggle-wrap{ display:contents; }

/* Collapsed-by-default trigger for a "settings summary" panel — static
   config most users don't need open by default. */
.evochip-settings-toggle{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	font-weight:600;
	color:#5b6b7c;
	border:1px solid #e1e5ea;
	border-radius:999px;
	background:#fafbfc;
	padding:6px 14px;
	transition:background-color .15s ease, border-color .15s ease, color .15s ease;
}
.evochip-settings-toggle:hover{
	background:#f0f2f5;
	border-color:#c3cbd4;
	color:#33404d;
}
.evochip-settings-toggle i{ font-size:16px; }
.evochip-settings-toggle .evochip-settings-toggle-chevron{
	transition:transform .2s ease;
	margin-left:2px;
}
.evochip-settings-toggle[aria-expanded="true"] .evochip-settings-toggle-chevron{
	transform:rotate(180deg);
}
.evochip-attr-preview{
	list-style:none;
	margin:0;
	padding:0;
	font-size:12.5px;
}
.evochip-attr-preview li{
	padding:4px 0;
	border-bottom:1px dashed #e6e9ed;
	color:#4c5866;
}
.evochip-attr-preview li:last-child{ border-bottom:none; }
.evochip-attr-preview li strong{ color:#2b333c; }
.evochip-attr-preview li .evochip-attr-name{ color:#9aa4af; }
.evochip-attr-preview li .evochip-attr-missing{ color:#c0392b; }

/* Compact pill variant of .evochip-toggle-chip — same markup/JS, smaller
   footprint for rows with more options (bore size, crank type, sub-type). */
.evochip-toggle-chip.evochip-pill{
	flex-direction:row;
	width:auto;
	min-width:56px;
	padding:9px 16px;
	border-radius:999px;
	gap:8px;
}
.evochip-toggle-chip.evochip-pill .evochip-toggle-icon{
	width:26px;
	height:26px;
}
.evochip-toggle-chip.evochip-pill .evochip-toggle-icon i{ font-size:15px; }
.evochip-toggle-chip.evochip-pill .evochip-toggle-label{ font-size:13px; }
.evochip-toggle-chip.evochip-pill .evochip-toggle-check{
	top:-6px;
	right:-6px;
	width:18px;
	height:18px;
}
.evochip-toggle-chip.evochip-pill .evochip-toggle-check i{ font-size:11px; }
.evochip-toggle-chip.evochip-pill.evochip-pill-plain .evochip-toggle-icon{ display:none; }

/* --------------------------------------------------------------------------
   Swatch chip — color picker (e.g. post coating). Blue active-state accent
   (not the usual green) so a selected e.g. "Powdercoated Green" swatch is
   still visibly distinct from its own colour.
   -------------------------------------------------------------------------- */
.evochip-swatch-chip{
	position:relative;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:104px;
	padding:14px 8px 10px;
	border:2px solid #e1e5ea;
	border-radius:14px;
	background:#fbfcfd;
	cursor:pointer;
	user-select:none;
	text-align:center;
	transition:border-color .18s ease, box-shadow .18s ease, transform .08s ease;
}
.evochip-swatch-chip:hover{
	border-color:#c3cbd4;
	box-shadow:0 4px 10px rgba(15,23,42,.07);
	transform:translateY(-1px);
}
.evochip-swatch-chip:active{ transform:translateY(0) scale(.96); }
.evochip-swatch-chip:focus-visible{ outline:2px solid #2f6fed; outline-offset:2px; }
.evochip-swatch-circle{
	width:36px;
	height:36px;
	border-radius:50%;
	border:2px solid rgba(0,0,0,.08);
	box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
.evochip-swatch-circle.evochip-swatch-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	background:#eef1f5;
	border-color:#e1e5ea;
}
.evochip-swatch-circle.evochip-swatch-icon i{ font-size:18px; color:#7c8894; }
.evochip-swatch-label{
	font-size:12px;
	font-weight:600;
	color:#4c5866;
	line-height:1.25;
}
.evochip-swatch-check{
	position:absolute;
	top:-7px;
	right:-7px;
	width:20px;
	height:20px;
	border-radius:50%;
	background:#2f6fed;
	color:#fff;
	display:flex;
	align-items:center;
	justify-content:center;
	box-shadow:0 2px 5px rgba(15,23,42,.3);
	opacity:0;
	transform:scale(.5);
	transition:opacity .18s ease, transform .18s ease;
}
.evochip-swatch-check i{ font-size:12px; }
.evochip-swatch-chip.active{
	border-color:#2f6fed;
	background:#eef4ff;
	box-shadow:0 4px 12px rgba(47,111,237,.18);
}
.evochip-swatch-chip.active .evochip-swatch-label{ color:#1a4fc4; }
.evochip-swatch-chip.active .evochip-swatch-check{ opacity:1; transform:scale(1); }

/* --------------------------------------------------------------------------
   Numeric stepper — small on/off-style counts (e.g. barb rows, qty, gusset
   count).
   -------------------------------------------------------------------------- */
.evochip-stepper{
	display:inline-flex;
	align-items:stretch;
	height:35px;
	border:1px solid #d7dce2;
	border-radius:10px;
	overflow:hidden;
	max-width:160px;
}
.evochip-stepper-btn{
	display:flex;
	align-items:center;
	justify-content:center;
	width:38px;
	height:35px;
	background:#f3f5f7;
	border:none;
	cursor:pointer;
	color:#4c5866;
	font-size:18px;
	line-height:1;
	transition:background-color .15s ease;
}
.evochip-stepper-btn:hover{ background:#e6e9ed; }
.evochip-stepper-btn:active{ background:#dbe0e5; }
.evochip-stepper input{
	border:none !important;
	border-left:1px solid #d7dce2 !important;
	border-right:1px solid #d7dce2 !important;
	border-radius:0 !important;
	height:35px;
	text-align:center;
	width:64px;
	font-weight:600;
}
.evochip-stepper input:focus{ outline:none; box-shadow:none; }

/* --------------------------------------------------------------------------
   Rate cards — e.g. FACT production-rate cards, replacing a plain
   label/input stack.
   -------------------------------------------------------------------------- */
.evochip-rate-section-title{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.4px;
	color:#5b6b7c;
	margin:18px 0 10px;
}
.evochip-rate-section-title i{ font-size:18px; color:#8b95a1; }
.evochip-rate-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
	gap:12px;
	margin-bottom:8px;
}
.evochip-rate-card{
	border:1px solid #e6e9ed;
	border-radius:12px;
	padding:10px 12px;
	background:#fbfcfd;
}
.evochip-rate-card .evochip-rate-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:6px;
	margin-bottom:6px;
}
.evochip-rate-card .evochip-rate-title{
	display:flex;
	align-items:center;
	gap:6px;
	font-size:11.5px;
	font-weight:700;
	color:#4c5866;
	text-transform:uppercase;
	letter-spacing:.3px;
	white-space:nowrap;
}
.evochip-rate-card .evochip-rate-title i{ font-size:16px; color:#8b95a1; }
.evochip-rate-card .manage-fact{ font-size:11px; white-space:nowrap; }
.evochip-rate-card input{ font-weight:600; }

/* --------------------------------------------------------------------------
   Step/label icon prefixes — consistent small icon prefix on a tab heading
   or an inline form label.
   -------------------------------------------------------------------------- */
.evochip-step-title{
	display:flex;
	align-items:center;
	gap:10px;
}
.evochip-step-title i{
	font-size:22px;
	color:#5b6b7c;
}
.evochip-label-icon{
	display:flex;
	align-items:center;
	gap:6px;
}
.evochip-label-icon i{
	font-size:16px;
	color:#8b95a1;
}

/* --------------------------------------------------------------------------
   Nav/action buttons — pill-shaped Reset/Previous/Next/Finish-style action
   row, replacing plain Bootstrap .btn/.form-control buttons.
   -------------------------------------------------------------------------- */
.evochip-nav-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	width:auto;
	padding:11px 22px;
	border:none;
	border-radius:999px;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.3px;
	cursor:pointer;
	transition:background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .08s ease;
}
.evochip-nav-btn i{ font-size:18px; }
.evochip-nav-btn:active{ transform:translateY(0) scale(.97); }
.evochip-nav-btn-secondary{
	background:#fafbfc;
	border:1px solid #e1e5ea;
	color:#5b6b7c;
}
.evochip-nav-btn-secondary:hover{
	background:#f0f2f5;
	border-color:#c3cbd4;
	color:#33404d;
}
.evochip-nav-btn-primary{
	background:#2f6fed;
	color:#fff;
	box-shadow:0 2px 8px rgba(47,111,237,.3);
}
.evochip-nav-btn-primary:hover{
	background:#255ecb;
	box-shadow:0 4px 12px rgba(47,111,237,.35);
}
.evochip-nav-btn-success{
	background:#1fae62;
	color:#fff;
	box-shadow:0 2px 8px rgba(31,174,98,.3);
}
.evochip-nav-btn-success:hover{
	background:#188a4e;
	box-shadow:0 4px 12px rgba(31,174,98,.35);
}
.evochip-nav-btn-danger{
	background:#fbecec;
	border:1px solid #f3c8c8;
	color:#c0392b;
}
.evochip-nav-btn-danger:hover{
	background:#f7dcdc;
	border-color:#eaa9a9;
}
/* Cautionary-but-not-destructive action (e.g. Cancel mid-wizard — closes
   without deleting anything, but may lose unsaved progress). Distinct from
   -danger, which implies an irreversible/destructive action. */
.evochip-nav-btn-warning{
	background:#fff3d9;
	border:1px solid #f0dba8;
	color:#a56b1a;
}
.evochip-nav-btn-warning:hover{
	background:#ffe9b8;
	border-color:#e0c68c;
}