/* SPS UX — site tweaks */

/* 1. Sticky headers for embedded product spec tables.
   Covers DataTables output ("Show N entries" / "Search:") and any table the
   JS tags with .sps-sticky-head. The header row keeps its own background so
   text stays readable while the body scrolls underneath. */
.dataTables_wrapper table.dataTable thead th,
.dataTables_scrollHead table thead th,
table.sps-sticky-head thead th {
	position: -webkit-sticky;
	position: sticky;
	top: var(--sps-sticky-top, 0px);
	z-index: 6;
}
/* JS sets --sps-th-bg per table from the real header color; fall back to a
   neutral slate so the header is never see-through. */
.dataTables_wrapper table.dataTable thead th,
table.sps-sticky-head thead th {
	background-color: var(--sps-th-bg, #3f4a5a);
	background-clip: padding-box;
}

/* 3. Hide the decorative 01/02/03 counters the JS flags on the home
   service cards. */
.sps-ux-hide-num,
.sps-ux-hide-num.wp-block-kadence-advancedheading { display:none !important; visibility:hidden !important; }

/* 2. Pay Online moved next to the other top-bar links (single flex row). */
.sps-topbar-links{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.sps-topbar-links p{ margin:0 !important; }

/* 5. Product-table toolbar: Filter columns + Weight calculator.
   Controls are <span role="button"> because this theme force-restyles <button>
   (padding + colors + SVG collapse) in a way that beats !important. Every rule
   here is scoped + !important so the theme cannot bleed into them. */
.sps-dttools{ display:flex !important; flex-wrap:wrap; gap:10px; align-items:center;
	margin:18px 0 12px !important; padding:0 !important; }

.sps-dttools .sps-dtbtn{
	display:inline-flex !important; align-items:center; gap:8px;
	background:#fff !important; color:#1D2939 !important;
	border:1px solid #d0d5dd !important; border-radius:6px !important;
	padding:10px 16px !important; margin:0 !important;
	font-family:'Overpass',inherit !important; font-size:14px !important;
	font-weight:700 !important; line-height:1 !important; letter-spacing:0 !important;
	text-transform:none !important; text-decoration:none !important;
	cursor:pointer; box-shadow:none !important; white-space:nowrap;
	transition:background .15s, border-color .15s, color .15s; }
.sps-dttools .sps-dtbtn svg{ width:15px !important; height:15px !important;
	flex:0 0 15px !important; color:#BF0101 !important; display:block !important; }
.sps-dttools .sps-dtbtn:hover{ background:#f7f8fa !important; border-color:#98a2b3 !important; }
.sps-dttools .sps-dtbtn.is-open{ background:#1D2939 !important; border-color:#1D2939 !important;
	color:#fff !important; }
.sps-dttools .sps-dtbtn.is-open svg{ color:#fff !important; }
.sps-dttools .sps-dtbtn:focus-visible{ outline:2px solid #BF0101; outline-offset:2px; }

/* panels */
.sps-dtpanel{ background:#f7f8fa; border:1px solid #e3e6ec; border-top:3px solid #BF0101;
	border-radius:8px; padding:18px; margin:0 0 16px; display:grid;
	grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:16px; }
.sps-dtpanel label{ display:block; font-family:'Overpass',inherit; font-size:12px; font-weight:700;
	text-transform:uppercase; letter-spacing:.03em; color:#475467; margin:0 0 6px; }
.sps-dtpanel input,.sps-dtpanel select{ width:100%; padding:9px 11px;
	border:1px solid #d0d5dd !important; border-radius:6px; font:inherit; font-size:14px;
	background:#fff; color:#1D2939; box-shadow:none; }
.sps-dtpanel input:focus,.sps-dtpanel select:focus{ outline:none; border-color:#BF0101 !important; }
.sps-dtf-range{ display:flex; align-items:center; gap:6px; }
.sps-dtf-range span{ color:#98a2b3; }
.sps-dtf-range input{ width:0; flex:1 1 auto; }

.sps-dtpanel .sps-dtf-clear{ grid-column:1/-1; justify-self:start; display:inline-block;
	background:none !important; border:0 !important; padding:0 !important; margin:0 !important;
	color:#BF0101 !important; font-family:'Overpass',inherit !important; font-size:14px !important;
	font-weight:700 !important; cursor:pointer; text-decoration:underline; }

/* weight calculator */
.sps-dtcalc .sps-dtc-sizewrap{ grid-column:1/-1; }
.sps-dtc-out{ grid-column:1/-1; display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 20px;
	border-top:1px solid #e3e6ec; margin-top:2px; padding-top:16px; }
.sps-dtc-each{ font-family:'Overpass',inherit; font-weight:800; font-size:20px; color:#1D2939; }
.sps-dtc-total{ color:#475467; font-weight:600; font-size:14px; }