/* v2.4.0P — Security Doors two-step funnel
   Palette-locked to site theme (blue / black / dark gray / white).
   Scoped to #door-funnel so it cannot leak into any other card. */

#door-funnel .lead { margin: 0 0 18px; color: #cdd3dc; }

/* Step transitions */
#door-funnel .door-step { display: none; }
#door-funnel .door-step.is-active { display: block; }
#door-funnel .door-step[hidden] { display: none !important; }

/* Step-1 fade-in-once on reveal of Step 2 */
#door-funnel #door-step2.is-active {
  animation: dfFadeIn .25s ease-out;
}
@keyframes dfFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Product picker — three cards in a row on desktop, stacked on mobile */
#door-funnel .door-product-picker {
  border: 0;
  padding: 0;
  margin: 0 0 20px;
}
#door-funnel .door-product-picker > legend {
  font-weight: 600;
  margin-bottom: 10px;
  padding: 0;
  color: #f4f6fa;
}
#door-funnel .door-product-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}
@media (min-width: 640px) {
  #door-funnel .door-product-picker {
    grid-template-columns: repeat(3, 1fr);
  }
  #door-funnel .door-product-picker > legend {
    grid-column: 1 / -1;
  }
}
#door-funnel .door-prod {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 14px;
  border: 1px solid #2a3344;
  border-radius: 10px;
  background: #0f1724;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
#door-funnel .door-prod input[type="radio"] {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  accent-color: #2e6bff; /* site blue */
}
#door-funnel .door-prod .door-prod-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#door-funnel .door-prod .door-prod-label > strong { color: #f4f6fa; font-weight: 600; }
#door-funnel .door-prod .door-prod-label > span { color: #8a94a6; font-size: 13px; }
#door-funnel .door-prod:hover { border-color: #3a4a66; }
#door-funnel .door-prod:has(input:checked) {
  border-color: #2e6bff;
  background: #13223d;
  box-shadow: 0 0 0 1px #2e6bff inset;
}

/* Collapsible measurement reference */
#door-funnel .df-measure-ref {
  margin: 6px 0 14px;
  border: 1px solid #2a3344;
  border-radius: 8px;
  background: #0c121d;
}
#door-funnel .df-measure-ref > summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 14px;
  color: #cdd3dc;
  font-weight: 500;
}
#door-funnel .df-measure-ref > summary::-webkit-details-marker { display: none; }
#door-funnel .df-measure-ref > summary::before {
  content: "+";
  display: inline-block;
  width: 1em;
  color: #2e6bff;
  font-weight: 700;
}
#door-funnel .df-measure-ref[open] > summary::before { content: "−"; }
#door-funnel .df-measure-ref-body {
  padding: 0 14px 14px 14px;
  color: #cdd3dc;
  font-size: 14px;
  line-height: 1.55;
}
#door-funnel .df-measure-ref-body > p { margin: 0 0 8px; }
#door-funnel .df-measure-ref-body a {
  color: #6aa4ff;
  text-decoration: underline;
}

/* Frame-color swatches */
#door-funnel .door-swatches {
  border: 0;
  padding: 0;
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
@media (min-width: 640px) {
  #door-funnel .door-swatches {
    grid-template-columns: repeat(4, 1fr);
  }
}
#door-funnel .door-swatches > legend {
  grid-column: 1 / -1;
  font-weight: 600;
  margin-bottom: 6px;
  color: #f4f6fa;
}
#door-funnel .door-swatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #2a3344;
  border-radius: 8px;
  background: #0f1724;
  cursor: pointer;
  color: #cdd3dc;
  font-size: 14px;
}
#door-funnel .door-swatch input[type="radio"] { accent-color: #2e6bff; }
#door-funnel .door-swatch:has(input:checked) {
  border-color: #2e6bff;
  background: #13223d;
}
#door-funnel .sw {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(255,255,255,.25);
}
#door-funnel .sw-black      { background: #111418; }
#door-funnel .sw-bronze     { background: #4a2e1c; }
#door-funnel .sw-warm-white { background: #efe8dc; border-color: rgba(0,0,0,.15); }
#door-funnel .sw-white      { background: #ffffff; border-color: rgba(0,0,0,.2); }

/* Swing and hardware field visual consistency */
#door-funnel .bld-radio,
#door-funnel .bld-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 16px;
  color: #cdd3dc;
}
#door-funnel .bld-radio input,
#door-funnel .bld-check input { accent-color: #2e6bff; }
#door-funnel .door-hardware { border: 0; padding: 0; margin: 0 0 14px; }
#door-funnel .door-hardware > legend { font-weight: 600; margin-bottom: 6px; color: #f4f6fa; }
#door-funnel .door-hw-included {
  margin: 0 0 10px;
  padding: 10px 12px;
  background: #0c121d;
  border: 1px solid #1f2838;
  border-radius: 8px;
  color: #cdd3dc;
  font-size: 14px;
}
#door-funnel .door-hw-included strong { color: #f4f6fa; }
#door-funnel .door-hardware .bld-check { display: flex; margin: 6px 0; }

/* Total card */
#door-funnel .door-total-card {
  margin: 18px 0 12px;
  padding: 18px 20px;
  background: linear-gradient(180deg, #13223d 0%, #0f1724 100%);
  border: 1px solid #2e6bff;
  border-radius: 12px;
  text-align: center;
}
#door-funnel .door-total-label {
  margin: 0;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8a94a6;
}
#door-funnel .door-total-value {
  margin: 4px 0 8px;
  font-size: 34px;
  font-weight: 700;
  color: #f4f6fa;
}
#door-funnel .door-total-note {
  margin: 0;
  font-size: 12px;
  color: #8a94a6;
  line-height: 1.55;
}

/* Product-specific visibility: swing is hidden for sliders */
#door-funnel[data-product="slider"] #door-swing-field { display: none; }
/* French doors always come as a pair — swing is still picked (which leaf is active) */

/* Error messaging */
#door-funnel .bld-form-error {
  color: #ff9191;
  background: rgba(255,60,60,.08);
  border: 1px solid rgba(255,60,60,.25);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 8px 0 0;
}


/* ============================================================
   v2.4.0P — Live door preview (mirror + 4-color recolor).
   Palette-locked. Scoped to #door-funnel.
   ============================================================ */

#door-funnel .door-preview {
  margin: 6px 0 22px;
  background: #0c1117;
  border: 1px solid #1a2230;
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#door-funnel .door-preview[hidden] { display: none; }

#door-funnel .door-preview-frame {
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 5;
  background: linear-gradient(180deg, #050709 0%, #0d141d 100%);
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

#door-funnel .door-preview-frame img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Smooth swap when src changes */
  transition: transform .25s ease, opacity .25s ease;
}

/* Right-hand swing: mirror the door so the lock side flips to the other edge.
   Slider always renders flat (no mirror). */
#door-funnel .door-preview[data-swing="right"] .door-preview-frame img {
  transform: scaleX(-1);
}

/* v2.4.0R: Legacy CSS-filter recolor removed.
   Modern flat-mesh swaps between 4 real photographed finishes via img src.
   Scrollwork shows the single gallery image without any tonal filter.
   Customer's color choice on scrollwork is captured at checkout, not in preview. */

#door-funnel .door-preview-cap {
  margin: 12px 0 0;
  font-size: .9rem;
  color: #cdd3dc;
  letter-spacing: .02em;
}
#door-funnel .door-preview-cap span { color: #cdd3dc; }