/* ==========================================================================
   PRODUCT CONFIGURATOR — "Choose Your Product"
   ==========================================================================
   Reuses .finder-fieldset / .finder-options / .finder-option (defined in
   styles.css for the homepage TDS finder) for the Dispensing and Design
   selectors, since they're the same real-radio/checkbox-with-label pattern.
   Only genuinely new UI (image panel, model tooltip cards, acrylic showcase)
   gets new classes below. ========================================================================== */

.configurator { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: var(--space-8); align-items: center; }
@media (max-width: 900px) { .configurator { grid-template-columns: 1fr; } }

/* ===== Image panel (left) — normal flow, vertically centered against the
   taller selectors column so it sits inline with "Choose Your Product"
   instead of trailing below it. */
.configurator-image-wrap { position: relative; background: var(--white); border: 1px solid var(--gray-100); border-radius: var(--radius-lg); box-shadow: var(--card-light-shadow); padding: var(--space-4); min-height: 440px; display: flex; align-items: center; justify-content: center; }
/* Most source product photos carry generous whitespace margins of their own
   (real crawled photography, not pre-cropped), so a small fixed max-height
   left a lot of unused box around the product. object-fit: contain never
   crops (the whole product always stays visible) — giving it a taller cap
   and a smaller padding frame just lets it use the space that's actually
   there, which is what reads as "zoomed in". */
.configurator-image-wrap img.configurator-image { max-width: 100%; max-height: 520px; object-fit: contain; }
.configurator-image-caption { position: absolute; left: var(--space-5); bottom: var(--space-4); font-size: var(--fs-xs); color: var(--text-on-light-muted); }

/* Acrylic 5-up static showcase — one real composite image, not a carousel */
.configurator-acrylic-showcase { width: 100%; }
.configurator-acrylic-showcase img { width: 100%; height: auto; display: block; }
.configurator-acrylic-label { text-align: center; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-on-light-muted); margin-top: var(--space-4); }

/* ===== Selector column (right) ===== */
.configurator-selectors { display: flex; flex-direction: column; gap: var(--space-7); }
.configurator-group-label { display: block; font-family: var(--font-display); font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.04em; color: var(--navy-900); margin-bottom: var(--space-4); }

/* Model selector — radio cards with a hover/focus tooltip */
.configurator-model-grid { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.configurator-model-option { position: relative; }
.configurator-model-option input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.configurator-model-option label { display: flex; align-items: center; justify-content: center; min-width: 52px; padding: var(--space-3) var(--space-4); border: 1.5px solid var(--border-on-light); border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--fs-sm); color: var(--text-on-light); cursor: pointer; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.configurator-model-option input:checked + label { border-color: var(--gold-500); background: var(--gold-500); color: var(--navy-900); font-weight: 600; }
.configurator-model-option input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.configurator-model-option label:hover { border-color: var(--gold-500); }
.configurator-model-option input:disabled + label { cursor: default; }

/* Tooltip: shown on hover AND on keyboard focus (for the label), plus a tap
   toggle on touch devices via the .is-tapped class set in JS */
.configurator-tooltip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%) translateY(4px); min-width: 200px; background: var(--navy-900); color: var(--white); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--fs-xs); line-height: var(--lh-normal); text-align: left; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); z-index: 5; }
.configurator-tooltip::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--navy-900); }
.configurator-tooltip strong { display: block; color: var(--accent); font-family: var(--font-display); text-transform: uppercase; font-size: 0.68rem; letter-spacing: 0.04em; margin-bottom: var(--space-1); }
.configurator-tooltip p { margin: 0 0 var(--space-2); }
.configurator-tooltip p:last-child { margin-bottom: 0; }
.configurator-model-option:hover .configurator-tooltip,
.configurator-model-option:focus-within .configurator-tooltip,
.configurator-model-option.is-tapped .configurator-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.configurator-tooltip-pending { color: var(--text-on-dark-muted); font-style: italic; }

/* Dispensing / Design fieldsets reuse .finder-fieldset/.finder-options/.finder-option
   from styles.css; only a light-surface override is needed since the finder's
   version was tuned for the finder's own card background. */
.configurator-selectors .finder-fieldset legend { color: var(--navy-900); font-weight: 700; }

/* Design options disabled per-model (Change 1) — availability rules live in
   product-config.js. Scoped under .configurator-selectors so this modifier
   never touches the homepage TDS finder, which reuses the same base
   .finder-option class but never sets .is-disabled. Kept visible-but-greyed
   rather than removed, so the option still communicates "exists, not
   available for this model" instead of silently disappearing. */
.configurator-selectors .finder-option.is-disabled { color: var(--gray-600); cursor: not-allowed; }
.configurator-selectors .finder-option.is-disabled input { accent-color: var(--gray-300); cursor: not-allowed; }
.configurator-selectors .configurator-option-unavailable { font-size: 0.78em; font-style: italic; color: var(--gray-600); }

/* Enquiry handoff */
.configurator-enquiry { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding-top: var(--space-2); }
.configurator-selection-summary { font-size: var(--fs-xs); color: var(--text-on-light-muted); }

@media (max-width: 560px) {
  .configurator-image-wrap { padding: var(--space-4); min-height: 320px; }
  .configurator-image-wrap img.configurator-image { max-height: 380px; }
  .configurator-model-option label { min-width: 44px; padding: var(--space-2) var(--space-3); }
  /* The tooltip's 200px min-width, centered on its own (often narrow, wrapped)
     Model button via left:50%/translateX(-50%), can push past the right edge
     of the screen on mobile when that button lands near the end of a wrapped
     row. It stays in the layout even while hidden (opacity/visibility, not
     display:none — needed for the hover/focus transition), so the overflow
     was there whether or not the tooltip was actually showing, forcing the
     whole page wider than the viewport. overflow-x: clip (not hidden)
     contains that within the button row without forcing overflow-y along
     with it, so the tooltip's upward hover/focus/tap popup for every button
     that isn't right at that edge is completely unaffected. */
  .configurator-model-grid { overflow-x: clip; overflow-y: visible; }
}