/* =========================================================================
   WearUS Apparel Configurator — wizard skin for eForm (wp-fsqm-pro) form 8
   Page-scoped (enqueued only on the configurator page). Pure presentation
   layer: no eForm core or parent-theme edits. All rules scoped under
   .wearus-cfg (added to the form wrap) or body.wearus-cfg-page.
   ========================================================================= */

:root {
	--cfg-green:    #76A95A;
	--cfg-green-d:  #557F43;
	--cfg-ink:      #2b3a2b;
	--cfg-mute:     #7c887a;
	--cfg-line:     #e2e8de;
	--cfg-soft:     #f4f8f1;
	--cfg-card:     #ffffff;
	--cfg-shadow:   0 10px 30px rgba(36,42,32,.08);
	--cfg-shadow-h: 0 14px 34px rgba(85,127,67,.18);
	--cfg-radius:   14px;
}

/* ---- Page chrome: give the wizard room, drop the blog sidebar ---------- */
body.wearus-cfg-page .wd-sidebar,
body.wearus-cfg-page #secondary,
body.wearus-cfg-page .sidebar-container {
	display: none !important;
}
body.wearus-cfg-page .content-area,
body.wearus-cfg-page .col-lg-9.site-content,
body.wearus-cfg-page .wd-content-area {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
}
body.wearus-cfg-page .entry-content { max-width: none; }

/* ---- Standalone feel: drop the page title block + breadcrumb so the
   wizard reads as its own app, not a blog post. Scoped to this page only. */
body.wearus-cfg-page .wd-page-title,
body.wearus-cfg-page .page-title,
body.wearus-cfg-page .wd-breadcrumbs,
body.wearus-cfg-page .woocommerce-breadcrumb,
body.wearus-cfg-page .entry-header .entry-title,
body.wearus-cfg-page .entry-content > .entry-title {
	display: none !important;
}
/* tighten the top gap the now-removed title used to occupy */
body.wearus-cfg-page .wd-content-layout,
body.wearus-cfg-page .content-area { padding-top: 30px !important; }

/* ---- Two-column shell: form + sticky summary rail ---------------------- */
.wearus-cfg-grid {
	display: grid;
	grid-template-columns: minmax(0,1fr) 330px;
	gap: 30px;
	align-items: start;
}
@media (max-width: 960px) {
	/* Single column AND a 0-min track. Plain `1fr` is `minmax(auto,1fr)`,
	   and `auto` floors at the content's min-content width — which eForm's
	   nowrap stepper nav (~557px) blows out to ~607px, clipping every input
	   off the right edge of a phone. `minmax(0,1fr)` ignores that floor. */
	.wearus-cfg-grid { grid-template-columns: minmax(0, 1fr); }
	/* Let the stepper tabs wrap to multiple rows instead of forcing width. */
	.wearus-cfg .ui-tabs-nav {
		white-space: normal !important;
		flex-wrap: wrap !important;
	}
	/* Desktop crams 5 tabs onto one row via flex:1 1 0 (~160px each). On a
	   phone that collapses to ~48px boxes and the multi-word labels
	   (overflow:visible) spill out and collide. Give each tab a half-row
	   basis so the nav wraps to readable 2-up rows with real tap targets. */
	.wearus-cfg ul.ui-tabs-nav li.ui-tabs-tab {
		flex: 1 1 calc(50% - 4px) !important;
	}
	.wearus-cfg ul.ui-tabs-nav li.ui-tabs-tab a {
		overflow: hidden !important;
		padding: 11px 6px !important;
	}
	/* Flex/grid children default to min-width:auto and refuse to shrink
	   below content — pin them to 0/100% so the form fits the viewport. */
	.wearus-cfg .ipt-eform-tab-nav-wrap,
	.wearus-cfg .ipt-eform-width-restrain,
	.wearus-cfg .ipt-eform-content,
	.wearus-cfg .ipt_fsqm_main_tab,
	.wearus-cfg .ipt_fsqm_form_tab_panel,
	.wearus-cfg .ipt-eform-layout-wrapper,
	.wearus-cfg .ipt_uif_column,
	.wearus-cfg .ipt_uif_column_inner,
	.wearus-cfg .eform-button-container-inner,
	.wearus-cfg .ipt_fsqm_form_button_container {
		min-width: 0 !important;
		max-width: 100% !important;
	}
	.wearus-cfg-grid,
	body.wearus-cfg-page .wearus-cfg { overflow-x: hidden; }
}

/* Strip eForm's boxy chrome so our card styling reads cleanly */
.wearus-cfg.ipt_fsqm_form,
.wearus-cfg .ipt-eform-content,
.wearus-cfg .ipt_fsqm_main_form {
	background: transparent !important;
	box-shadow: none !important;
	border: none !important;
}

/* =======================  STEPPER  ====================================== */
.wearus-cfg .ipt-eform-tab-nav-wrap {
	background: none !important;
	border: none !important;
	box-shadow: none !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}
.wearus-cfg ul.ui-tabs-nav {
	display: flex !important;
	gap: 8px;
	flex-wrap: nowrap;
	list-style: none;
	margin: 0 0 26px !important;
	padding: 0 !important;
	background: none !important;
	border: none !important;
	height: auto !important;
	overflow: visible !important;
}
.wearus-cfg ul.ui-tabs-nav li.ui-tabs-tab {
	flex: 1 1 0;
	min-width: 0;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	float: none !important;
	border-radius: 12px;
}
.wearus-cfg ul.ui-tabs-nav li.ui-tabs-tab a {
	display: block !important;
	text-align: center;
	padding: 13px 8px !important;
	margin: 0 !important;
	border-radius: 12px;
	background: var(--cfg-soft);
	color: var(--cfg-mute) !important;
	font-weight: 600;
	font-size: 12.5px;
	line-height: 1.3;
	border: 1.5px solid transparent;
	border-bottom-color: transparent !important;
	transition: .15s ease;
	float: none !important;
	white-space: normal;
	height: auto !important;
	min-height: 0 !important;
	overflow: visible !important;
}
.wearus-cfg ul.ui-tabs-nav .eform-tab-labels { display: block; line-height: 1.3; }
.wearus-cfg ul.ui-tabs-nav .ipt_uif_tab_subtitle { display: none !important; }
/* kill eForm tab notifier dots, scroll arrows, and the jQuery-UI container border */
.wearus-cfg .eform-tab-nav,
.wearus-cfg .eform-tab-passive-notifier,
.wearus-cfg .eform-tab-active-notifier { display: none !important; }
.wearus-cfg .ipt_fsqm_main_tab.ui-tabs {
	background: none !important;
	border: none !important;
	padding: 0 !important;
}
.wearus-cfg ul.ui-tabs-nav li.ui-tabs-tab:hover a { color: var(--cfg-green-d) !important; }
.wearus-cfg ul.ui-tabs-nav li.ui-state-active a,
.wearus-cfg ul.ui-tabs-nav li.ui-tabs-active a {
	background: var(--cfg-card) !important;
	color: var(--cfg-green-d) !important;
	border-color: var(--cfg-green) !important;
	box-shadow: 0 6px 18px rgba(85,127,67,.14);
}
/* mark completed steps */
.wearus-cfg ul.ui-tabs-nav li.wearus-step-done a {
	color: var(--cfg-green-d) !important;
	background: #eef5e9;
}
.wearus-cfg ul.ui-tabs-nav li.wearus-step-done a::after {
	content: "\2713";
	font-weight: 700;
	color: var(--cfg-green);
}

/* =======================  PANELS / QUESTIONS  =========================== */
.wearus-cfg .ipt_fsqm_form_tab_panel {
	background: var(--cfg-card);
	border: 1px solid var(--cfg-line);
	border-radius: 18px;
	padding: 30px 30px 12px;
	box-shadow: var(--cfg-shadow);
}
.wearus-cfg .ipt_uif_question {
	border: none !important;
	background: none !important;
	margin: 0 0 26px !important;
	padding: 0 !important;
}
.wearus-cfg .ipt_uif_question:last-child { margin-bottom: 8px !important; }
/* breathing room between a question's prompt and its options */
.wearus-cfg .ipt_uif_question > .ipt_uif_question_content,
.wearus-cfg .ipt_uif_question .ipt_uif_data_column { margin-top: 12px; }
.wearus-cfg .ipt_uif_question > .ipt_uif_question_content > label,
.wearus-cfg .ipt_uif_heading_container .ipt_uif_heading {
	font-weight: 700;
	color: var(--cfg-ink);
	font-size: 16px;
	line-height: 1.4;
}
/* panel gets a touch more bottom room so the last row never kisses the edge */
.wearus-cfg .ipt_fsqm_form_tab_panel { padding-bottom: 24px !important; }

/* sequential reveal */
.wearus-cfg .wearus-cfg-locked { display: none !important; }
.wearus-cfg .wearus-reveal {
	animation: wearusReveal .28s ease both;
}
@keyframes wearusReveal {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Suppress eForm's default radio/checkbox circle markers — selection is shown
   by card border / pill fill / swatch ring instead. NB: colour swatches reuse
   label::before for the colour chip, so exclude .wearus-swatch. */
.wearus-cfg .eform-label-with-tabindex::after { display: none !important; }
.wearus-cfg .ipt_uif_thumbselect_wrap label.eform-label-with-tabindex::before { display: none !important; }
.wearus-cfg .ipt_uif_radio.as-eform-button + label:not(.wearus-swatch)::before { display: none !important; }
.wearus-cfg .ipt_uif_thumbselect_wrap label .ui-widget-content {
	background: none !important;
	border: none !important;
}

/* =======================  PRODUCT / METHOD CARDS  ====================== */
.wearus-cfg .ipt_uif_thumbselect_wrap { padding: 6px !important; }
.wearus-cfg .ipt_uif_thumbselect {
	position: absolute !important;
	opacity: 0 !important;
	width: 1px; height: 1px;
	pointer-events: none;
}
.wearus-cfg .ipt_uif_thumbselect_wrap label.eform-label-with-tabindex {
	display: block;
	border: 2px solid var(--cfg-line);
	border-radius: var(--cfg-radius);
	padding: 12px 12px 14px;
	cursor: pointer;
	background: var(--cfg-card);
	transition: .15s ease;
	text-align: center;
	margin: 0 !important;
}
.wearus-cfg .ipt_uif_thumbselect_wrap label.eform-label-with-tabindex:hover {
	border-color: #bcd3ad;
	transform: translateY(-2px);
}
.wearus-cfg .ipt_uif_thumbselect:checked + label.eform-label-with-tabindex,
.wearus-cfg .ipt_uif_thumbselect_wrap.wearus-sel label.eform-label-with-tabindex {
	border-color: var(--cfg-green);
	box-shadow: var(--cfg-shadow-h);
}
.wearus-cfg .thumbselect-img-wrapper { border-radius: 10px; overflow: hidden; }
.wearus-cfg .thumbselect-img-wrapper img { display:block; width:100%; height:auto; }
.wearus-cfg .ipt_uif_thumbselect_wrap label .ipt_uif_thumbselect_label,
.wearus-cfg .ipt_uif_thumbselect_wrap label > span:last-child {
	display:block; margin-top:10px; font-weight:600; color:var(--cfg-ink);
}

/* =======================  RADIO PILLS (fabric / placement) ============= */
.wearus-cfg .ipt_uif_radio.as-eform-button { position:absolute; opacity:0; pointer-events:none; }
.wearus-cfg .ipt_uif_radio.as-eform-button + label {
	display:flex; align-items:center; gap:8px;
	border:2px solid var(--cfg-line);
	border-radius: 11px;
	padding: 12px 16px;
	margin:0 !important;
	cursor:pointer;
	font-weight:600; color:var(--cfg-ink);
	background:var(--cfg-card);
	transition:.15s ease;
}
.wearus-cfg .ipt_uif_radio.as-eform-button + label:hover { border-color:#bcd3ad; }
.wearus-cfg .ipt_uif_radio.as-eform-button:checked + label {
	border-color:var(--cfg-green);
	background:#f3f8ef;
	box-shadow:0 6px 16px rgba(85,127,67,.14);
}

/* =======================  COLOUR SWATCHES  ============================= */
/* eForm lays options out as floated .column_6 cells; they collapse to full
   width here, so re-flow the colour question's option row as a wrap of chips.
   The same float-grid problem hits the 9 garment placement parts (uneven label
   widths), so placement reuses this proven flex-wrap layout. */
.wearus-cfg [data-cfg="colour"] .ipt_uif_question_content,
.wearus-cfg [data-cfg="placement"] .ipt_uif_question_content {
	display:flex !important; flex-wrap:wrap !important;
	gap:10px !important; align-items:stretch;
}
.wearus-cfg [data-cfg="colour"] .ipt_uif_label_column,
.wearus-cfg [data-cfg="placement"] .ipt_uif_label_column {
	width:auto !important; max-width:none !important;
	flex:0 0 auto !important; float:none !important;
	padding:0 !important; margin:0 !important;
}
.wearus-cfg [data-cfg="colour"] .ipt_clear,
.wearus-cfg [data-cfg="colour"] .ipt_uif_clear,
.wearus-cfg [data-cfg="placement"] .ipt_clear,
.wearus-cfg [data-cfg="placement"] .ipt_uif_clear { display:none !important; }
.wearus-cfg .wearus-swatch {
	display:flex !important; align-items:center; gap:10px;
	padding:10px 14px 10px 12px;
	border:2px solid var(--cfg-line);
	border-radius:11px;
	cursor:pointer; font-weight:600; color:var(--cfg-ink);
	background:var(--cfg-card); transition:.15s ease; margin:0 !important;
}
.wearus-cfg .wearus-swatch::before {
	content:""; flex:0 0 auto;
	width:22px; height:22px; border-radius:50%;
	background:var(--sw,#ccc);
	border:1px solid rgba(0,0,0,.18);
	box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.06);
}
.wearus-cfg .wearus-swatch:hover { border-color:#bcd3ad; }
.wearus-cfg [data-cfg="colour"] input:checked + .wearus-swatch {
	border-color:var(--cfg-green);
	box-shadow:0 6px 16px rgba(85,127,67,.16);
}

/* =======================  PLACEMENT PARTS  ============================ */
/* Garment-specific decoration locations (left chest, full front, sleeves…)
   render as selectable pills — same chip language as the colour swatches. */
.wearus-cfg [data-cfg="placement"] .ipt_uif_label_column label {
	display:flex !important; align-items:center; gap:8px;
	padding:11px 16px;
	border:2px solid var(--cfg-line);
	border-radius:11px;
	cursor:pointer; font-weight:600; color:var(--cfg-ink);
	background:var(--cfg-card); transition:.15s ease; margin:0 !important;
	white-space:nowrap;
}
.wearus-cfg [data-cfg="placement"] .ipt_uif_label_column label:hover {
	border-color:#bcd3ad;
}
.wearus-cfg [data-cfg="placement"] input:checked + label {
	border-color:var(--cfg-green);
	background:#f3f8ef;
	box-shadow:0 6px 16px rgba(85,127,67,.16);
}

/* =======================  UPLOAD / TEXT  ============================== */
.wearus-cfg .ipt_uif_upload_wrapper,
.wearus-cfg .eform-upload-container {
	border:2px dashed #bcd3ad !important;
	border-radius:var(--cfg-radius);
	background:#fafdf8;
	padding:18px !important;
}

/* =======================  SPINNERS (size x qty) ======================= */
.wearus-cfg .eform-spinner-container { text-align:center; }
.wearus-cfg .ipt_uif_uispinner {
	border:2px solid var(--cfg-line) !important;
	border-radius:10px !important;
	text-align:center; font-weight:700; color:var(--cfg-ink);
}

/* =======================  NAV BUTTONS  ================================ */
.wearus-cfg button.eform-material-button {
	border-radius:12px !important;
	font-weight:700 !important;
	letter-spacing:.01em;
	padding:13px 26px !important;
}
.wearus-cfg .ipt_fsqm_form_button_next,
.wearus-cfg .ipt_fsqm_form_button_submit {
	background:var(--cfg-green) !important;
	color:#fff !important;
}
.wearus-cfg .ipt_fsqm_form_button_next:hover,
.wearus-cfg .ipt_fsqm_form_button_submit:hover { background:var(--cfg-green-d) !important; }
/* Previous = quiet secondary */
.wearus-cfg .ipt_fsqm_form_button_prev {
	background:#fff !important; color:var(--cfg-ink) !important;
	border:2px solid var(--cfg-line) !important;
}
.wearus-cfg .ipt_fsqm_form_prev_tab {
	background:transparent !important;
	color:var(--cfg-mute) !important;
	box-shadow:none !important;
}

/* =========================================================================
   STICKY SUMMARY RAIL
   ========================================================================= */
.wearus-cfg-rail {
	position: sticky;
	top: 24px;
	background: var(--cfg-card);
	border: 1px solid var(--cfg-line);
	border-radius: 18px;
	padding: 22px 22px 20px;
	box-shadow: var(--cfg-shadow);
	font-size: 14px;
}
.wearus-cfg-rail .rail-head {
	font-size: 12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	color: var(--cfg-green-d); margin-bottom:14px;
}
.wearus-cfg-rail .rail-art {
	width:100%; aspect-ratio:1/1; border-radius:12px;
	background:var(--cfg-soft);
	border:1px dashed #c7d7bd;
	display:flex; align-items:center; justify-content:center;
	overflow:hidden; margin-bottom:16px; position:relative;
}
.wearus-cfg-rail .rail-art img { width:100%; height:100%; object-fit:contain; }
.wearus-cfg-rail .rail-art .rail-art-ph {
	color:#9bb091; font-size:12px; text-align:center; padding:0 18px; line-height:1.4;
}
.wearus-cfg-rail .rail-art .rail-art-tag {
	position:absolute; left:8px; bottom:8px;
	background:rgba(43,58,43,.82); color:#fff; font-size:11px; font-weight:600;
	padding:3px 8px; border-radius:6px; max-width:calc(100% - 16px);
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.wearus-cfg-rail .rail-list { list-style:none; margin:0; padding:0; }
.wearus-cfg-rail .rail-list li {
	display:flex; align-items:center; justify-content:space-between; gap:12px;
	padding:9px 0; border-bottom:1px solid #eef2eb;
}
.wearus-cfg-rail .rail-list li span { color:var(--cfg-mute); }
.wearus-cfg-rail .rail-list li b {
	color:var(--cfg-ink); font-weight:600; text-align:right;
	display:flex; align-items:center; gap:7px;
}
.wearus-cfg-rail .rail-list li b.is-empty { color:#c2ccbd; font-weight:500; }
.wearus-cfg-rail .rail-chip {
	width:15px; height:15px; border-radius:50%;
	border:1px solid rgba(0,0,0,.18); flex:0 0 auto;
	box-shadow: inset 0 0 0 2px #fff;
}
.wearus-cfg-rail .rail-price {
	display:flex; align-items:baseline; justify-content:space-between;
	margin-top:16px; padding-top:14px; border-top:2px solid var(--cfg-soft);
}
.wearus-cfg-rail .rail-price span { color:var(--cfg-ink); font-weight:700; }
.wearus-cfg-rail .rail-price strong { color:var(--cfg-green-d); font-size:26px; font-weight:800; }
.wearus-cfg-rail .rail-perunit {
	display:flex; align-items:baseline; justify-content:space-between;
	margin-top:6px;
}
.wearus-cfg-rail .rail-perunit span { color:var(--cfg-mute); font-size:13px; }
.wearus-cfg-rail .rail-perunit b { color:var(--cfg-ink); font-weight:700; font-size:15px; }
.wearus-cfg-rail .rail-perunit b.is-empty { color:#c2ccbd; font-weight:500; }
.wearus-cfg-rail .rail-note { margin:10px 0 0; font-size:11.5px; color:#9aa795; line-height:1.45; }