/*
 * SRW Product Calculator — scoped styles.
 *
 * Every color, radius, and font lives as a CSS custom property on .wljc so
 * admins can re-theme the entire widget from the Styling tab without
 * touching CSS. Token groups:
 *
 *   Core:      primary, accent, text, muted
 *   Surfaces:  bg, surface, surface-alt, border
 *   Buttons:   button-bg, button-bg-hover, button-text, btn-disabled
 *   Progress:  progress-active, progress-active-text,
 *              progress-done,   progress-done-text,
 *              progress-pending, progress-pending-text
 *   Status:    success, warn, warn-bg, block, block-bg, tip, tip-bg
 *   Layout:    radius, font, panel-min-height
 *
 * Frame stability: the .wljc__panel has a min-height so the widget doesn't
 * shrink and grow as the user moves between short and tall steps.
 */
.wljc {
	/* Core */
	--wljc-primary: #1f6feb;
	--wljc-accent:  #0a3d62;
	--wljc-text:    #1f2937;
	--wljc-muted:   #6b7280;

	/* Surfaces */
	--wljc-bg:          #ffffff;
	--wljc-surface:     #eef1f6;   /* unselected card background — visibly tinted */
	--wljc-surface-alt: #f7f8fa;   /* result cards, lead form, paver row */
	--wljc-border:      #c9cfd8;

	/* Option cards (Q1–Q4). Each state has its own token so a dark theme can
	 * control hover/selected independently of the page background. When left
	 * unset (empty in the CMS) they inherit the surface/bg tokens below, which
	 * preserves the original light-theme behavior with zero change. */
	--wljc-card-bg:              var(--wljc-surface);
	--wljc-card-bg-hover:        var(--wljc-bg);
	--wljc-card-bg-selected:     var(--wljc-bg);
	--wljc-card-text:            var(--wljc-text);
	--wljc-card-border:          var(--wljc-border);
	--wljc-card-border-hover:    var(--wljc-primary);  /* border when hovering a tile */
	--wljc-card-border-selected: var(--wljc-primary);  /* border on the chosen tile */

	/* Color swatches (Q6). The label sits over the swatch color, so its
	 * background and text are separate tokens. Blank in the CMS = inherit
	 * the fallbacks here. */
	--wljc-swatch-border:          var(--wljc-border);
	--wljc-swatch-border-selected: var(--wljc-primary);
	--wljc-swatch-label-bg:        rgba(255,255,255,.88);
	--wljc-swatch-label-text:      var(--wljc-text);

	/* Buttons */
	--wljc-button-bg:       var(--wljc-primary);
	--wljc-button-bg-hover: var(--wljc-accent);
	--wljc-button-text:     #ffffff;
	--wljc-btn-disabled:    #d4d8df;

	/* Secondary "ghost" buttons (Back / Skip — no preference / Start over).
	 * Resting + hover states are independently controllable; blank in the CMS
	 * inherits these fallbacks so the original outline style is preserved. */
	--wljc-btn-ghost-bg:           transparent;
	--wljc-btn-ghost-text:         var(--wljc-text);
	--wljc-btn-ghost-border:       var(--wljc-border);
	--wljc-btn-ghost-bg-hover:     transparent;
	--wljc-btn-ghost-text-hover:   var(--wljc-primary);
	--wljc-btn-ghost-border-hover: var(--wljc-primary);

	/* Progress bar (each state has independent fg + bg so brands can match) */
	--wljc-progress-active:        var(--wljc-primary);
	--wljc-progress-active-text:   #ffffff;
	--wljc-progress-done:          #2f855a;
	--wljc-progress-done-text:     #ffffff;
	--wljc-progress-pending:       #eef1f6;
	--wljc-progress-pending-text:  #6b7280;

	/* Status messaging */
	--wljc-empty-note: var(--wljc-block);  /* "no products match" notice on Q6 */
	--wljc-success:  #2f855a;
	--wljc-warn:     #b54708;
	--wljc-warn-bg:  #fff3e0;
	--wljc-block:    #b91c1c;
	--wljc-block-bg: #fef2f2;
	--wljc-tip:      #1d4ed8;
	--wljc-tip-bg:   #eff6ff;

	/* Segmented toggles (Step 7: unit system & "how do you know your pavers").
	 * Both toggles are the same control, so one set of tokens styles both. */
	--wljc-toggle-bar-bg:      var(--wljc-surface);  /* the pill/bar background */
	--wljc-toggle-text:        var(--wljc-muted);    /* inactive button text */
	--wljc-toggle-active-bg:   var(--wljc-bg);       /* selected button fill */
	--wljc-toggle-active-text: var(--wljc-primary);  /* selected button text */
	--wljc-toggle-hover-bg:    transparent;          /* button hover fill */
	--wljc-toggle-hover-text:  var(--wljc-toggle-text); /* button hover text */

	/* "+ Add another paver size" dashed box (Step 7). */
	--wljc-add-border: var(--wljc-primary);
	--wljc-add-text:   var(--wljc-primary);

	/* Results product cards (Step 9): the "3 Bags" headline. */
	--wljc-hero:      var(--wljc-primary);  /* the big number */
	--wljc-hero-unit: var(--wljc-muted);    /* the unit word ("Bags") */

	/* Results Project Summary card outline (Step 9). Default transparent = no
	 * visible outline until an admin sets one. */
	--wljc-summary-border: transparent;

	/* Results card fills (Step 9), each individually settable. Default to the
	 * shared soft surface so the cards look unchanged until overridden. */
	--wljc-summary-bg:  var(--wljc-surface-alt);  /* Project Summary card */
	--wljc-leadform-bg: var(--wljc-surface-alt);  /* "Get your results" card */

	/* Outline around the small color dots on product cards (Step 9). */
	--wljc-color-dot-border: rgba(0,0,0,.15);

	/* Layout */
	--wljc-radius:           10px;
	--wljc-font:             inherit;
	--wljc-panel-min-height: 520px;

	box-sizing: border-box;
	max-width: 880px;
	margin: 0 auto;
	padding: 1.5em;
	/* Anchor the widget's own base size. Everything inside is sized in `em`
	 * (relative to this), so the calculator renders at a consistent, readable
	 * size regardless of the host theme's root font-size. Some themes set the
	 * document root to 10px, which previously shrank this widget because its
	 * type was sized in `rem` (root-relative). A fixed base here decouples the
	 * widget from the theme. Override via the `--wljc-font` area if needed. */
	font-size: 16px;
	line-height: 1.5;
	font-family: var(--wljc-font), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--wljc-text);
	background: var(--wljc-bg);
	border: 1px solid var(--wljc-border);
	border-radius: var(--wljc-radius);
}
.wljc *, .wljc *::before, .wljc *::after { box-sizing: border-box; }

/* ---------- Progress bar ---------- */
.wljc__progress { margin-bottom: 1.5em; }
.wljc__progress ol {
	display: flex; gap: .5em; list-style: none; margin: 0; padding: 0;
	counter-reset: wljc-step; flex-wrap: wrap;
}
.wljc__progress li {
	flex: 1 1 auto; min-width: 110px; padding: .55em .75em;
	background: var(--wljc-progress-pending);
	color: var(--wljc-progress-pending-text);
	border-radius: var(--wljc-radius);
	font-size: .85em; position: relative;
	counter-increment: wljc-step;
	transition: background .15s, color .15s;
}
.wljc__progress li::before {
	content: counter(wljc-step) ". "; font-weight: 600;
}
.wljc__progress li.is-active {
	background: var(--wljc-progress-active);
	color:      var(--wljc-progress-active-text);
}
.wljc__progress li.is-done {
	background: var(--wljc-progress-done);
	color:      var(--wljc-progress-done-text);
}

/* ---------- Panel (stable height) ---------- */
.wljc__panel {
	min-height: var(--wljc-panel-min-height);
	display: flex;
	flex-direction: column;
}
.wljc__panel > * { width: 100%; }
.wljc__panel > div:first-child {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
}
.wljc__panel .wljc__nav { margin-top: auto; }

/* ---------- Typography ----------
 * Headings carry explicit color + text-transform so the host theme's own
 * h2/h3 rules can't bleed in and override them (a plain `h2 {}` theme rule
 * otherwise beats our inherited color). Scoped under [data-wljc-panel] for
 * extra specificity against aggressive Elementor/theme selectors. */
.wljc h2,
.wljc h3,
.wljc [data-wljc-panel] h2,
.wljc [data-wljc-panel] h3 {
	color: var(--wljc-text);
	text-transform: none;
	letter-spacing: normal;
}
.wljc h2 { font-size: 1.4em; margin: 0 0 .25em; }
.wljc p.wljc__lede { color: var(--wljc-muted); margin: 0 0 1.25em; }

/* "No products match" notice on the Color step. Rendered as an <h2> so it
 * matches the heading font/size exactly; this rule only swaps the color to
 * its own admin-pickable token. Selectors are specific enough to beat the
 * heading-hardening block above (which would otherwise force --wljc-text). */
.wljc h2.wljc__empty-note,
.wljc [data-wljc-panel] h2.wljc__empty-note {
	color: var(--wljc-empty-note);
	margin: 0 0 1em;
}

/* ---------- Option cards (Q1–Q4) ---------- */
.wljc__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75em; }
.wljc__card {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	min-height: 110px; padding: 1em;
	background: var(--wljc-card-bg);
	border: 2px solid var(--wljc-card-border);
	border-radius: var(--wljc-radius);
	cursor: pointer; text-align: center; font-weight: 500;
	color: var(--wljc-card-text);
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.wljc__card:hover {
	border-color: var(--wljc-card-border-hover);
	background: var(--wljc-card-bg-hover);
}
.wljc__card.is-selected {
	border-color: var(--wljc-card-border-selected);
	background: var(--wljc-card-bg-selected);
	box-shadow: 0 0 0 3px rgba(31,111,235,.12);
}
.wljc__card-sub { display: block; font-size: .8em; color: var(--wljc-muted); margin-top: .35em; font-weight: 400; }

/* ---------- Form fields ---------- */
.wljc__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75em; margin-bottom: 1em; }
.wljc__field label { display: block; font-size: .85em; font-weight: 500; margin-bottom: .25em; color: var(--wljc-text); }
.wljc__field input, .wljc__field select, .wljc__field textarea {
	width: 100%; padding: .55em .65em;
	border: 1px solid var(--wljc-border);
	border-radius: 6px; font-size: 1em;
	background: var(--wljc-bg);
	color: var(--wljc-text);
}
.wljc__field input:focus, .wljc__field select:focus { outline: 2px solid var(--wljc-primary); outline-offset: 1px; }
.wljc__field-hint  { font-size: .75em; color: var(--wljc-muted); margin-top: .15em; }
.wljc__field-error { font-size: .8em;  color: var(--wljc-block); margin-top: .25em; }

/* ---------- Chips (Q5 joint width presets) ---------- */
.wljc__chips { display: flex; flex-wrap: wrap; gap: .4em; margin: .35em 0 .25em; }
.wljc__chip {
	padding: .35em .8em;
	background: var(--wljc-surface);
	border: 1px solid var(--wljc-border);
	border-radius: 999px; font-size: .85em; cursor: pointer;
	color: var(--wljc-text);
	transition: background .15s, color .15s, border-color .15s;
}
.wljc__chip:hover { border-color: var(--wljc-primary); }
.wljc__chip.is-selected {
	background: var(--wljc-primary);
	color: var(--wljc-button-text);
	border-color: var(--wljc-primary);
}

/* ---------- Toggles (unit system, paver mode) ---------- */
.wljc__toggle {
	display: inline-flex;
	background: var(--wljc-toggle-bar-bg);
	border-radius: 999px; padding: .25em;
	border: 1px solid var(--wljc-border);
	margin-bottom: 1em;
}
.wljc__toggle button {
	border: 0; background: transparent; padding: .4em 1em; border-radius: 999px;
	font-size: .85em; cursor: pointer; color: var(--wljc-toggle-text);
	transition: background .15s, color .15s;
}
/* Hover comes before .is-active so the selected button keeps its active look
 * even while hovered. */
.wljc__toggle button:hover {
	background: var(--wljc-toggle-hover-bg);
	color: var(--wljc-toggle-hover-text);
}
.wljc__toggle button.is-active {
	background: var(--wljc-toggle-active-bg);
	color: var(--wljc-toggle-active-text);
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
}

/* ---------- Paver rows ---------- */
.wljc__paver-row {
	display: grid; grid-template-columns: 2fr 2fr 2fr auto; gap: .5em; align-items: end;
	margin-bottom: .5em; padding: .65em;
	background: var(--wljc-surface-alt);
	border-radius: 6px;
}
.wljc__paver-row .wljc__remove {
	background: transparent; border: 1px solid var(--wljc-border); padding: .4em .6em;
	border-radius: 6px; cursor: pointer; color: var(--wljc-muted);
}
.wljc__paver-row .wljc__remove:hover { color: var(--wljc-block); border-color: var(--wljc-block); }

.wljc__add {
	background: transparent; color: var(--wljc-add-text);
	border: 1px dashed var(--wljc-add-border);
	padding: .55em 1em; border-radius: 6px; cursor: pointer; font-weight: 500;
}

.wljc__pct-summary { font-size: .85em; margin: .25em 0 .75em; }
.wljc__pct-summary.is-error { color: var(--wljc-block); }
.wljc__pct-summary.is-ok    { color: var(--wljc-success); }

/* ---------- Nav buttons ---------- */
.wljc__nav { display: flex; justify-content: space-between; gap: .75em; margin-top: 1.5em; }
/* Single-button nav rows (e.g. results screen "Start over") pin right. */
.wljc__nav--end { justify-content: flex-end; }
.wljc__btn {
	padding: .65em 1.4em; border-radius: 6px; border: 0; font-size: 1em;
	font-weight: 500; cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.wljc__btn--primary {
	background: var(--wljc-button-bg);
	color: var(--wljc-button-text);
}
.wljc__btn--primary:hover { background: var(--wljc-button-bg-hover); }
.wljc__btn--primary[disabled] {
	background: var(--wljc-btn-disabled);
	color: #fff;
	cursor: not-allowed;
	opacity: .85;
}
.wljc__btn--ghost {
	background: var(--wljc-btn-ghost-bg);
	color: var(--wljc-btn-ghost-text);
	border: 1px solid var(--wljc-btn-ghost-border);
}
.wljc__btn--ghost:hover {
	background: var(--wljc-btn-ghost-bg-hover);
	border-color: var(--wljc-btn-ghost-border-hover);
	color: var(--wljc-btn-ghost-text-hover);
}

/* ---------- Results ---------- */
.wljc__results { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
@media (max-width: 640px) { .wljc__results { grid-template-columns: 1fr; } }
.wljc__result-card {
	background: var(--wljc-surface-alt);
	border-radius: var(--wljc-radius); padding: 1.25em;
}
.wljc__result-card h3 { margin: 0 0 .5em; font-size: 1em; }
/* Project Summary card outline — its own token, default transparent so the
 * card looks unchanged until an admin sets an outline color. The product
 * cards keep their own border via .wljc__product-card below. */
.wljc__summary-card {
	background: var(--wljc-summary-bg);
	border: 1px solid var(--wljc-summary-border);
}
.wljc__hero { font-size: 2.25em; font-weight: 700; color: var(--wljc-hero); line-height: 1.1; }
.wljc__hero-unit { font-size: 1em; font-weight: 500; color: var(--wljc-hero-unit); margin-left: .35em; }
.wljc__exact { font-size: .85em; color: var(--wljc-muted); margin-top: .35em; }

.wljc__summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .35em .75em; font-size: .9em; }
.wljc__summary-grid dt { color: var(--wljc-muted); }
.wljc__summary-grid dd { margin: 0; font-weight: 500; }

.wljc__lead-form {
	background: var(--wljc-leadform-bg);
	padding: 1.25em; border-radius: var(--wljc-radius); margin-top: 1em;
}
.wljc__lead-form h3 { margin: 0 0 .5em; }
.wljc__noscript { padding: 1em; background: var(--wljc-warn-bg); border-radius: 6px; }

/* ---------- Color swatches (Q6) ---------- */
.wljc__swatches { display: flex; flex-wrap: wrap; gap: .75em; margin: .5em 0 1em; }
.wljc__swatch {
	position: relative; width: 84px; height: 84px; border-radius: var(--wljc-radius);
	border: 2px solid var(--wljc-swatch-border); cursor: pointer; padding: 0; overflow: hidden;
	box-shadow: 0 1px 2px rgba(0,0,0,.08);
	transition: border-color .15s, box-shadow .15s;
}
.wljc__swatch:hover { border-color: var(--wljc-swatch-border-selected); }
.wljc__swatch.is-selected {
	border-color: var(--wljc-swatch-border-selected);
	box-shadow: 0 0 0 3px rgba(31,111,235,.18);
}
.wljc__swatch-label {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: .2em .35em; font-size: .72em; font-weight: 600;
	background: var(--wljc-swatch-label-bg); color: var(--wljc-swatch-label-text); text-align: center;
}

/* ---------- Product result cards ---------- */
.wljc__product-grid {
	display: grid; gap: 1em; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	margin-bottom: 1em;
}
.wljc__product-card { background: var(--wljc-bg); border: 1px solid var(--wljc-border); }
.wljc__product-head { display: flex; align-items: center; gap: .5em; margin-bottom: .5em; }
.wljc__product-head h3 { margin: 0; }
.wljc__hero-row { display: flex; align-items: baseline; gap: .35em; }
.wljc__color-row { display: flex; align-items: center; gap: .35em; margin-top: .5em; }
.wljc__color-dot {
	width: 16px; height: 16px; border-radius: 50%;
	border: 1px solid var(--wljc-color-dot-border); display: inline-block;
}
.wljc__badge { font-size: .7em; padding: .15em .5em; border-radius: 999px; font-weight: 600; }
.wljc__badge--warn { background: var(--wljc-warn-bg); color: var(--wljc-warn); }

/* ---------- Warning/tip messages ---------- */
.wljc__warnings { display: flex; flex-direction: column; gap: .5em; margin-bottom: 1em; }
.wljc__warning {
	padding: .75em 1em; border-radius: var(--wljc-radius); font-size: .9em;
	border-left: 4px solid;
}
.wljc__warning--tip     { background: var(--wljc-tip-bg);   border-color: var(--wljc-tip);   color: var(--wljc-tip); }
.wljc__warning--warning { background: var(--wljc-warn-bg);  border-color: var(--wljc-warn);  color: var(--wljc-warn); }
.wljc__warning--block   { background: var(--wljc-block-bg); border-color: var(--wljc-block); color: var(--wljc-block); }

.wljc__disclaimer { font-size: .75em; color: var(--wljc-muted); margin-top: 1em; }