/*! @crucible/design-system 0.1.0 (e95a491) — built 2026-05-26T04:32:08.542Z */
/**
 * Crucible3D — wp3dprinting plugin overrides.
 *
 * WP-only. Never imported by Next. See WP_INTEGRATION_PHASE_4A.md for the
 * selector catalogue and WP_INTEGRATION_PHASE_4B.md for the styling policy
 * (light viewer island, accent budget, mono numerics, no `display:` on
 * .p3d-info).
 *
 * All rules scope under .p3d-product-form (P4a-4 / P4b-3). `!important` is
 * reserved for color tokens overriding plugin inline styles (P4a-6).
 */

/* -- Outer scope ----------------------------------------------------------- */

.p3d-product-form {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
}

/* -- 3D viewer — light visual island (P4a-8 / P4b-8) -----------------------
 *    #p3d-viewer renders OUTSIDE .p3d-product-form (in WC's .images column).
 *    Root-scoped, ID-anchored.
 *    P4a-8 readability exception: inside the island, descendant text would
 *    otherwise inherit --color-text-primary (near-white) from page chrome,
 *    invisible against the light-island bg. Set a dark color so plugin text
 *    ("Click here to upload", "Processing..", filename) reads. */

#p3d-viewer {
  background: var(--color-light-island);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-card);
  overflow: hidden;
  isolation: isolate;
  color: var(--color-bg) !important;
}
#p3d-viewer p,
#p3d-viewer span,
#p3d-viewer div,
#p3d-viewer label {
  color: inherit !important;
}

/* -- Upload CTA — single accent override inside the light island (P4b-9).
 *    Note: #p3d-pickfiles renders OUTSIDE .p3d-product-form (in WC's .images
 *    column), so this rule is root-scoped. The ID makes it specific enough.
 *    !important fights the plugin's own inline-styled background. */

#p3d-pickfiles.progress-button {
  background: var(--color-accent) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--radius-btn);
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: var(--tracking-body);
  text-transform: uppercase;
}
#p3d-pickfiles.progress-button:hover { background: var(--color-accent-hover) !important; }
#p3d-pickfiles.progress-button:active { background: var(--color-accent-pressed) !important; }
#p3d-pickfiles .content { background: var(--color-accent) !important; color: var(--color-text-primary) !important; }
#p3d-pickfiles .progress { background: var(--color-accent-pressed) !important; }
#p3d-pickfiles .progress-inner { background: var(--color-success) !important; }

/* -- Step / section headings ("1 Material", "2 Infill", "3 Finalize") ------
 *    The plugin wraps each step in <div class="p3d-list-group-item py-3">
 *    which carries a default light background. Override the wrapper *and*
 *    the inner <h5> heading so the whole row is dark. */

.p3d-product-form .p3d-list-group-item.py-3 {
  background: var(--color-surface-1) !important;
  border: 1px solid var(--color-border);
  border-bottom: none;
  padding: 0;
}
.p3d-product-form .p3d-list-group-item.py-3:last-child {
  border-bottom: 1px solid var(--color-border);
}
.p3d-product-form h5 {
  font-family: var(--font-sans);
  font-size: var(--text-h4);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  padding: 16px 20px;
  background: transparent;
}
/* Step number badge — the leading <span>1</span> inside h5. */
.p3d-product-form h5 > span:first-child {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 10px;
  background: var(--color-accent);
  color: var(--color-text-primary);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  font-weight: 600;
}

/* -- Section wrappers — DO NOT set display (P4a-7) ------------------------- */

.p3d-product-form .p3d-info {
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-top: none;
  padding: 16px 20px;
}

/* Strip default <fieldset> chrome — step heading + list provide structure. */
.p3d-product-form .p3d-fieldset {
  border: none;
  margin: 0;
  padding: 0;
}
/* The <legend> renders "Material : <selected>" — redundant with the active
 * radio state and the step heading. Visually hide while keeping a11y. */
.p3d-product-form .p3d-fieldset > legend {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* -- Material / infill list ------------------------------------------------ */

.p3d-product-form .p3d-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.p3d-product-form .p3d-list ul {
  list-style: none;
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Outer group rows (ABS / CF / PLA, and infill % rows).
 * Force surface-1 with !important to defeat any plugin-set inline / cascade
 * background (e.g. the stale light-gray "previously clicked" indicator). */
.p3d-product-form .p3d-list > li {
  background: var(--color-surface-1) !important;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 12px 16px;
  cursor: pointer;
  transition: border-color 100ms ease;
}
.p3d-product-form .p3d-list > li:hover {
  border-color: var(--color-accent-muted, var(--color-border-strong));
}
.p3d-product-form .p3d-list > li > a {
  color: var(--color-text-primary);
  font-weight: 500;
  text-decoration: none;
}

/* Inner items (PET-CF, ASA, PLA, ABS — nested inside material groups). */
.p3d-product-form .p3d-list li li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  color: var(--color-text-secondary);
  border-radius: var(--radius-btn);
  transition: background-color 100ms ease, color 100ms ease;
}
.p3d-product-form .p3d-list li li:hover {
  background: var(--color-surface-2);
  color: var(--color-text-primary);
}

/* Selected state — works for both nested items (materials) and direct-child
 * items (infill %). The plugin's own CSS sets a light-gray background on
 * the selected <li>; this rule wins via specificity + !important on bg. */
.p3d-product-form .p3d-list li:has(> input.p3d-control:checked) {
  background: var(--color-surface-2) !important;
  color: var(--color-text-primary);
  border-color: var(--color-accent);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

/* Inactive infill % rows (insufficient density for the chosen material).
 * Plugin disables the radio and adds .p3d-inactive-item to the li. */
.p3d-product-form .p3d-list li.p3d-inactive-item {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: var(--color-text-tertiary);
}
.p3d-product-form .p3d-list li.p3d-inactive-item:hover {
  background: var(--color-surface-1);
  border-color: var(--color-border);
}

/* For infill (top-level <li> with direct radio + label), drop the nested
 * indent and lay out flat. */
#infill-info .p3d-list {
  padding: 0;
}
#infill-info .p3d-list > li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
}
#infill-info .p3d-list > li a.p3d-dropdown-item {
  color: inherit;
  text-decoration: none;
  flex: 1;
}

/* -- Radio + color swatches ------------------------------------------------ */

.p3d-product-form input.p3d-control {
  accent-color: var(--color-accent);
  cursor: pointer;
}

/* Color samples carry the material color via inline style="background:#hex".
 * Many of our materials are near-black (#000, #404040) which is invisible
 * against surface-1 — a double ring (inner light + outer border) makes the
 * swatch visible regardless of the inline color. */
.p3d-product-form .p3d-color-sample {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-text-tertiary);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}

/* -- Plugin buttons (Next, etc.) ------------------------------------------- */

.p3d-product-form .p3d-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: var(--text-body-sm);
  padding: 8px 18px;
  border-radius: var(--radius-btn);
  border: 1px solid var(--color-border-strong);
  background: transparent;
  color: var(--color-text-primary);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 100ms ease, border-color 100ms ease, color 100ms ease;
}
.p3d-product-form .p3d-btn:hover {
  border-color: var(--color-accent);
}
.p3d-product-form .p3d-btn-primary {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}
.p3d-product-form .p3d-btn-primary:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.p3d-product-form .p3d-btn-primary:active { background: var(--color-accent-pressed); border-color: var(--color-accent-pressed); }

/* WooCommerce quantity input (rendered before add-to-cart). */
.p3d-product-form input.qty,
.p3d-product-form input.input-text.qty {
  font-family: var(--font-mono);
  font-size: var(--text-body);
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  padding: 6px 10px;
  width: 64px;
  text-align: center;
}
.p3d-product-form input.qty:focus,
.p3d-product-form input.input-text.qty:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* WooCommerce add-to-cart button. WC's default stylesheet (signature purple)
 * is dequeued in inc/woocommerce.php, so plain specificity wins — no
 * !important needed on the rules below. */
.p3d-product-form .single_add_to_cart_button {
  background: var(--color-accent);
  color: var(--color-text-primary);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-btn);
  padding: 12px 24px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--text-body);
  text-transform: none;
  letter-spacing: var(--tracking-body);
  cursor: pointer;
  transition: background-color 100ms ease;
}
.p3d-product-form .single_add_to_cart_button:hover { background: var(--color-accent-hover); }
.p3d-product-form .single_add_to_cart_button:active { background: var(--color-accent-pressed); }
.p3d-product-form .single_add_to_cart_button[disabled],
.p3d-product-form .single_add_to_cart_button.disabled,
.p3d-product-form .single_add_to_cart_button.wc-variation-selection-needed {
  background: var(--color-surface-2);
  border-color: var(--color-border);
  color: var(--color-text-tertiary);
  cursor: not-allowed;
}

/* -- Dimension / scale / unit controls (P4b-10 mono numerics) --------------
 *    Note: these render in WC's .images column, OUTSIDE .p3d-product-form.
 *    Root-scoped, ID-anchored. */

#p3d-unit-controls,
#p3d-scale-controls,
#p3d-dim-controls,
#p3d-rotation-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  margin: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-1);
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}
.p3d-unit-label {
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
}
input.p3d-dim-input,
#p3d-scale-controls input[type="number"],
#p3d-scale-controls input[type="text"],
#p3d-dim-controls input[type="number"],
#p3d-dim-controls input[type="text"] {
  font-family: var(--font-mono);
  font-size: var(--text-body-sm);
  background: var(--color-bg);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-btn);
  padding: 4px 8px;
  width: 64px;
  text-align: right;
}
input.p3d-dim-input:focus,
#p3d-scale-controls input:focus,
#p3d-dim-controls input:focus {
  outline: 2px solid color-mix(in srgb, var(--color-accent) 40%, transparent);
  outline-offset: 1px;
  border-color: var(--color-accent);
}

/* The plugin colors X/Y/Z labels via inline style. Force token. */
#p3d-dim-controls span[style*="color"] {
  color: var(--color-text-secondary) !important;
}

/* -- Stats table (numbers in mono per P4b-10) ------------------------------
 *    Class is `p3d-stats` (single class). Phase 4a catalogue had this as
 *    `p3d.-stats` (dotted) — that was wrong; corrected here. Table renders
 *    OUTSIDE .p3d-product-form (in WC's .images column area). */

table.p3d-stats {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  margin: 12px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
table.p3d-stats td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  vertical-align: middle;
}
table.p3d-stats tr:last-child td { border-bottom: none; }
table.p3d-stats td:first-child {
  color: var(--color-text-secondary);
  background: var(--color-surface-1);
  width: 60%;
}
table.p3d-stats td:last-child {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  text-align: right;
  background: var(--color-bg);
}
/* Stats values like "8.00 cm3" — the unit suffix is plain text after the
 * <span> value; render whole cell mono so units align with numbers. */
table.p3d-stats td span[id^="stats-"] {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--color-text-primary);
}

/* -- Price display (mono per P4b-10) --------------------------------------- */

p.price,
.price {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  font-size: var(--text-h3);
  font-weight: 600;
  margin: 16px 0;
}
#p3d-amount-text,
#p3d-amount-support-text {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  display: inline-block;
  padding: 8px 12px;
}
#p3d-amount-text b,
#p3d-amount-support-text b {
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-weight: 500;
  margin-right: 4px;
}
.amount {
  font-family: var(--font-mono);
  color: var(--color-text-primary);
}

/* -- noUiSlider (scale control) — scoped to the configurator's slider ----- */

#p3d-scale-controls .noUi-target,
#p3d-scale.noUi-target {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  box-shadow: none;
  height: 6px;
  flex: 1;
}
#p3d-scale-controls .noUi-base,
#p3d-scale.noUi-target .noUi-base { background: transparent; }
#p3d-scale-controls .noUi-handle,
#p3d-scale.noUi-target .noUi-handle {
  background: var(--color-accent);
  border: 2px solid var(--color-text-primary);
  border-radius: 999px;
  width: 16px;
  height: 16px;
  top: -6px;
  right: -8px;
  box-shadow: none;
  cursor: grab;
}
#p3d-scale-controls .noUi-handle:hover,
#p3d-scale.noUi-target .noUi-handle:hover { background: var(--color-accent-hover); }
#p3d-scale-controls .noUi-handle:active,
#p3d-scale.noUi-target .noUi-handle:active { background: var(--color-accent-pressed); cursor: grabbing; }
#p3d-scale-controls .noUi-handle::before,
#p3d-scale-controls .noUi-handle::after,
#p3d-scale.noUi-target .noUi-handle::before,
#p3d-scale.noUi-target .noUi-handle::after { display: none; }

/* -- File-Unit radios layout ----------------------------------------------- */

.p3d-product-form #p3d-unit-controls input[type="radio"] {
  margin: 0 4px 0 0;
}

/* -- Loading indicators ---------------------------------------------------
 *    The plugin's loading GIFs are (a) dated visually and (b) sometimes
 *    404 on this install (the plugin generates absolute URLs against
 *    siteurl, which is set to the marketing host). Hide them and replace
 *    with an inline CSS spinner in our accent color. */

img[src*="ajax-loader"] { display: none !important; }

@keyframes crucible-spin { to { transform: rotate(360deg); } }

/* File-loading indicator (during upload) — small inline ring + alt text. */
.p3d-product-form #p3d-file-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.p3d-product-form #p3d-file-loading::before {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 999px;
  animation: crucible-spin 800ms linear infinite;
  flex-shrink: 0;
}

/* Quote-loading indicator (price calculation in the Finalize step) —
 * larger block-level ring + descriptive label. Server round-trip is
 * 10-15s; without a clear signal users assume the page broke.
 *
 * The plugin dismisses this element via `visibility: hidden`, which still
 * reserves vertical space. Collapse to display:none in that state so the
 * Finalize panel doesn't carry a phantom row between Unit Price and the
 * Add-to-Cart row in the loaded state. */
.p3d-product-form #p3d-quote-loading[style*="visibility: hidden"] {
  display: none;
}
.p3d-product-form #p3d-quote-loading {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 24px 0;
  font-family: var(--font-sans);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}
.p3d-product-form #p3d-quote-loading::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 28px;
  border: 3px solid var(--color-border-strong);
  border-top-color: var(--color-accent);
  border-radius: 999px;
  animation: crucible-spin 800ms linear infinite;
  flex-shrink: 0;
}
.p3d-product-form #p3d-quote-loading::after {
  content: 'Calculating your price…';
}

/* Stats-row loading spinners (Material Volume etc. during recompute). */
.p3d-product-form table.p3d-stats img[id$="-loading"] { display: none !important; }

/* -- Finalize step inner layout (polish pass) ----------------------------
 *    The plugin renders #p3d-finalize with no padding, so Unit Price,
 *    the spinner, and the qty+button row all sit flush against the step
 *    container's left wall. Pad to match the Material/Infill step inner
 *    spacing visually. */
#p3d-finalize {
  padding: 16px 20px;
}

/* Add-to-Cart row — WC ships .quantity (block div) followed by the
 * <button> as separate block elements; they stack by default. Flex them
 * inline with a generous gap, vertically centered. */
.p3d-product-form .variations_button {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 16px 0 0;
}
.p3d-product-form .variations_button .quantity {
  margin: 0;
  flex-shrink: 0;
}

/* -- Cart-row thumbnail (cross-cutting; used outside the product form too) - */

.p3d-cart-thumbnail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-light-island);
  padding: 4px;
  max-width: 100px;
}