/* ======================================================
   CBFC — AUTHORITATIVE REBUILD
   PASS A: SURFACES & CONTAINERS
   Scope:
   - Calculator shell
   - Fence basics stage (light purple)
   - Result cards (neutral)
   - Site visit card
   - Confirmation card
   No controls. No buttons. No slider.
====================================================== */


/* ======================================================
   CALCULATOR SHELL (QUIET BACKDROP)
====================================================== */

.jam-calculator {
  max-width: 1100px;
  margin: 30px auto 60px;
  padding: 16px;
  background: transparent;
}

/* ======================================================
   CBFC — HIDE NATIVE SELECTS (UX MODE)
   Purpose:
   - UX buttons are authoritative
   - Native selects remain functional, not visible
   - Prevent double controls / layout bugs
====================================================== */
/* Respect the hidden attribute */
.cbfc-fence-help-overlay[hidden] {
  display: none !important;
}


/* Fence type select */
.cbfc-fence-type-control select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Panel product select */
#panel_product,
label:has(#panel_product) {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Panel post type select */
#panel_post,
label:has(#panel_post) {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Height selector */
.cbfc-height-control select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
}

/* Gravel board selector */
.cbfc-gravel-control select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  height: 0 !important;
  margin: 0 !important;
}


/* ======================================================
   FENCE BASICS STAGE (LIGHT PURPLE SURFACE)
====================================================== */

.cbfc-fence-basics {
    background: #d9b0eb;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 20px 20px 22px;
    margin-bottom: 22px;
    box-shadow: 0 8px 20px rgba(88, 28, 135, 0.18);
}

/* Vertical rhythm inside the stage */
.cbfc-fence-basics > * + * {
  margin-top: 18px;
}


/* ======================================================
   RESULT CARDS — BASE (NEUTRAL)
====================================================== */

.cbfc-option {
  position: relative;

  margin-top: 18px;
  padding: 20px 20px 22px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.06);
}


/* ======================================================
   RESULTS WRAPPER (SPACING ONLY)
====================================================== */

#cbfc_results {
  margin-top: 28px;
}


/* ======================================================
   SITE VISIT CARD (SOLID, NEUTRAL)
====================================================== */

.cbfc-site-visit {
  margin-top: 16px;
  padding: 22px;

  background: #ffffff;
  color: #0f172a;

  border: 1px solid #e5e7eb;
  border-radius: 16px;

  box-shadow:
    0 12px 30px rgba(0,0,0,0.06),
    inset 0 0 0 1px rgba(0,0,0,0.04);
}


/* ======================================================
   CONFIRMATION CARD (REASSURING)
====================================================== */

.cbfc-confirmation {
  margin-top: 20px;
  padding: 20px;

  background: #eef2ff;
  border: 2px solid #818cf8;
  border-radius: 16px;
}


/* ======================================================
   MOBILE SPACING SANITY
====================================================== */

@media (max-width: 767px) {

  .cbfc-fence-basics {
    padding: 16px;
    border-radius: 14px;
  }

  .cbfc-option,
  .cbfc-site-visit,
  .cbfc-confirmation {
    padding: 16px;
    border-radius: 14px;
  }

}

/* ======================================================
   PASS B — TACTILE CONTROLS (OG AUTHORITATIVE)
   Exact reproduction of original calculator buttons
====================================================== */

/* ------------------------------------------------------
   OG surface tokens
------------------------------------------------------ */
:root {
  --cbfc-purple-top: #5b2ea6;
  --cbfc-purple-bottom: #4c2c92;
  --cbfc-purple-shadow: #3b1f73;

  --cbfc-green-top: #1e8f43;
  --cbfc-green-bottom: #15803d;
  --cbfc-green-shadow: #0f5f2b;
}


/* ======================================================
   CHOICE GROUP
====================================================== */

.cbfc-ux-choice-group {
  display: flex;
  gap: 16px;
  margin-top: 10px;
}


/* ======================================================
   BUTTON BASE (UNSELECTED)
====================================================== */

.cbfc-ux-choice {
  position: relative;
  flex: 1;

  padding: 14px 16px 13px;
  border-radius: 16px;

  background: linear-gradient(
    180deg,
    var(--cbfc-purple-top) 0%,
    var(--cbfc-purple-bottom) 100%
  );

  color: #ffffff;
  border: none;
  cursor: pointer;
  text-align: center;

  /* CRITICAL: vertical stacking, not inline */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  box-shadow:
    0 6px 0 var(--cbfc-purple-shadow),
    0 16px 28px rgba(76, 44, 146, 0.45);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.2s ease;
}


/* ======================================================
   OG TWO-LINE TEXT MODEL (NON-NEGOTIABLE)
====================================================== */

/* TOP LINE — product name */
.cbfc-ux-choice strong {
  display: block;
  width: 100%;
  margin-bottom: 2px;

  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  white-space: nowrap;
  color: #ffffff;
}

/* BOTTOM LINE — descriptor (anything after <strong>) */
.cbfc-ux-choice strong + * {
  display: block;
  width: 100%;

  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1.2;

  opacity: 0.9;
  text-align: center;
  color: #ffffff;
}

/* Safety catch for spans/em/small */
.cbfc-ux-choice span,
.cbfc-ux-choice em,
.cbfc-ux-choice small {
  display: block;
  width: 100%;
  text-align: center;
}


/* ======================================================
   SELECTED STATE (GREEN)
====================================================== */

.cbfc-ux-choice.is-active {
  background: linear-gradient(
    180deg,
    var(--cbfc-green-top) 0%,
    var(--cbfc-green-bottom) 100%
  );

  box-shadow:
    0 8px 0 var(--cbfc-green-shadow),
    0 20px 34px rgba(21, 128, 61, 0.55);

  transform: translateY(-2px);
}


/* ======================================================
   PRESS FEEDBACK
====================================================== */

.cbfc-ux-choice:active {
  transform: translateY(2px);
}

.cbfc-ux-choice.is-active:active {
  box-shadow:
    0 4px 0 var(--cbfc-green-shadow),
    0 8px 16px rgba(21, 128, 61, 0.4);
}

.cbfc-ux-choice:not(.is-active):active {
  box-shadow:
    0 4px 0 var(--cbfc-purple-shadow),
    0 8px 16px rgba(59, 31, 115, 0.4);
}


/* ======================================================
   HOVER (DESKTOP ONLY)
====================================================== */

@media (hover: hover) {

  .cbfc-ux-choice:hover {
    transform: translateY(-1px);
  }

  .cbfc-ux-choice.is-active:hover {
    box-shadow:
      0 10px 0 var(--cbfc-green-shadow),
      0 24px 42px rgba(21, 128, 61, 0.6);
  }

  .cbfc-ux-choice:not(.is-active):hover {
    box-shadow:
      0 10px 0 var(--cbfc-purple-shadow),
      0 24px 42px rgba(59, 31, 115, 0.6);
  }
}


/* ======================================================
   SELECTED TICK (OG DETAIL)
====================================================== */

.cbfc-ux-choice.is-active::after {
  content: "✓";
  position: absolute;
  top: 10px;
  right: 12px;

  width: 22px;
  height: 22px;
  line-height: 22px;

  font-size: 14px;
  font-weight: 800;

  text-align: center;
  color: #ffffff;

  background: #15803d;
  border-radius: 50%;

  animation: cbfcTickIn 0.15s ease-out;
}

@keyframes cbfcTickIn {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}


/* ======================================================
   MOBILE STACKING
====================================================== */

@media (max-width: 767px) {

  .cbfc-ux-choice-group {
    flex-direction: column;
    gap: 12px;
  }

  .cbfc-ux-choice {
    width: 100%;
    padding: 14px 16px;
  }

  .cbfc-ux-choice strong {
    font-size: 1.1rem;
  }

  .cbfc-ux-choice strong + * {
    font-size: 1rem;
  }

}

/* ======================================================
   PASS B — HEIGHT MICRO-TUNE (OG MATCH)
   Reduces button height without breaking structure
====================================================== */

/* Reduce vertical padding slightly */
.cbfc-ux-choice {
  padding: 12px 16px 11px;
}

/* Tighten text rhythm */
.cbfc-ux-choice strong {
  margin-bottom: 4px;
  line-height: 0.95;
}

.cbfc-ux-choice strong + * {
  line-height: 1.15;
}

/* Mobile keeps same feel, just slightly tighter */
@media (max-width: 767px) {
  .cbfc-ux-choice {
    padding: 12px 14px;
  }
}

/* ======================================================
   PASS C — FENCE LENGTH HERO (AUTHORITATIVE, OG)
   Includes:
   - Length readout (value + unit)
   - Slider (track + thumb)
   - Ruler
   - Helper text (true-centred to slider)
====================================================== */


/* ======================================================
   LENGTH CONTROL WRAPPER
====================================================== */

.cbfc-length-control {
  width: 100%;
  margin-top: 18px;
}


/* ======================================================
   HERO READOUT (VALUE + UNIT)
====================================================== */

.cbfc-length-readout {
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;

  width: 100%;
  margin: 12px 0 16px;

  background: #ffffff;
  border: 2px solid #15803d;
  border-radius: 14px;
  overflow: hidden;
}

/* VALUE */
.cbfc-length-value {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 14px 0;

  font-size: 2.1rem;
  font-weight: 800;
  color: #14532d;

  white-space: nowrap;
}

/* UNIT */
.cbfc-length-unit {
  display: flex;
  align-items: center;
  justify-content: center;

  height: 100%;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: lowercase;

  color: #14532d;
  background: rgba(21, 128, 61, 0.12);
  border-left: 1px solid rgba(21, 128, 61, 0.3);
}

/* ======================================================
   CBFC — LENGTH HELPER ALIGNMENT (OG BEHAVIOUR)
   Helper and ruler share identical geometry
====================================================== */

/* Ensure length control is the single alignment owner */
.cbfc-length-control {
  width: 100%;
  position: relative;
}

/* Ruler stays full width (as in OG) */
.cbfc-length-ruler {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Helper centres naturally within same geometry */
.cbfc-length-control .cbfc-label-helper,
.cbfc-length-helper {
  display: block;
  width: 100%;
  text-align: center;

  margin-top: 6px;

  font-size: 0.85em;
  opacity: 0.95;
}

/* =========================================
   CBFC — Length Helper (SAFE, COSMETIC)
========================================= */
.cbfc-length-helper {
  margin-top: 8px;
  font-size: 0.9em;
  line-height: 1.45;
  color: #334155; /* darker slate for accessibility */
}

.cbfc-length-helper strong {
  color: #0f172a;
  font-weight: 700;
}

/* ======================================================
   SLIDER BASE (NUMERIC INPUT HIDDEN)
====================================================== */

.cbfc-length-control #cbfc_length {
  display: none;
}

#cbfc_length_slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
  cursor: pointer;
  outline: none;
}


/* ======================================================
   SLIDER TRACK
====================================================== */

#cbfc_length_slider::-webkit-slider-runnable-track {
  height: 40px;
  border-radius: 999px;

  background-color: #e5e7eb;
  background-image: linear-gradient(#15803d, #15803d);
  background-repeat: no-repeat;
  background-size: var(--cbfc-range-fill, 0%) 100%;
}

#cbfc_length_slider::-moz-range-track,
#cbfc_length_slider::-moz-range-progress {
  height: 40px;
  border-radius: 999px;
}

#cbfc_length_slider::-moz-range-track {
  background: #e5e7eb;
}

#cbfc_length_slider::-moz-range-progress {
  background: #15803d;
}


/* ======================================================
   SLIDER THUMB (OG SIZE & FEEL)
====================================================== */

#cbfc_length_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  width: 40px;
  height: 40px;
  border-radius: 50%;

  background: #15803d;
  border: 4px solid #ffffff;

  box-shadow: 0 6px 14px rgba(0,0,0,0.35);

  position: relative;
  top: 50%;
  transform: translateY(-50%);

  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

#cbfc_length_slider::-webkit-slider-thumb:hover {
  transform: translateY(-50%) scale(1.05);
}

#cbfc_length_slider::-webkit-slider-thumb:active {
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 8px 18px rgba(0,0,0,0.45);
}

#cbfc_length_slider::-moz-range-thumb {
  width: 40px;
  height: 40px;
  border-radius: 50%;

  background: #15803d;
  border: 4px solid #ffffff;

  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}


/* ======================================================
   RULER
====================================================== */

.cbfc-length-ruler {
  position: relative;
  width: 100%;
  height: 36px;
  margin-top: 18px;
  pointer-events: none;
}

.cbfc-ruler-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

.cbfc-ruler-tick::before {
  content: '';
  display: block;
  margin: 0 auto 4px;
  background: #000;
}

/* Major ticks */
.cbfc-ruler-tick.major {
  font-size: 0.85rem;
  font-weight: 600;
}

.cbfc-ruler-tick.major::before {
  width: 2px;
  height: 14px;
}

/* Minor ticks */
.cbfc-ruler-tick.minor::before {
  width: 1px;
  height: 8px;
  opacity: 0.6;
}

/* Active major tick */
.cbfc-ruler-tick.major.is-active {
  font-weight: 800;
}

.cbfc-ruler-tick.major.is-active::before {
  height: 16px;
}


/* ======================================================
   MOBILE TUNING (OG-COMPATIBLE)
====================================================== */

@media (max-width: 767px) {

  .cbfc-length-readout {
    margin: 10px 0 14px;
    border-radius: 12px;
  }

  .cbfc-length-value {
    font-size: 1.9rem;
    padding: 12px 0;
  }

  .cbfc-length-unit {
    font-size: 0.85rem;
  }

  .cbfc-length-ruler {
    height: 28px;
    margin-top: 12px;
  }

}

/* ======================================================
   CBFC — PASS D: MICRO-DEPTH POLISH
   Purpose:
   - Restore “floating on card” feel
   - Subtle, calm depth (no drama)
   - No layout or behaviour changes
====================================================== */

/* --------------------------------------
   Fence basics surface (light lift)
-------------------------------------- */
.cbfc-fence-basics,
.cbfc-card {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    0 6px 18px rgba(0,0,0,0.06);
}


/* --------------------------------------
   Fence type & length shared surface
-------------------------------------- */
.cbfc-fence-type-row,
.cbfc-length-control {
  position: relative;
}


/* --------------------------------------
   Length readout — gentle lift
-------------------------------------- */
.cbfc-length-readout {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 4px 10px rgba(0,0,0,0.06);
}


/* --------------------------------------
   Slider track depth (quiet)
-------------------------------------- */
#cbfc_length_slider::-webkit-slider-runnable-track {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.12);
}

#cbfc_length_slider::-moz-range-track {
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,0.12);
}


/* --------------------------------------
   Slider thumb — tactile but restrained
-------------------------------------- */
#cbfc_length_slider::-webkit-slider-thumb {
  box-shadow:
    0 4px 10px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
}

#cbfc_length_slider::-moz-range-thumb {
  box-shadow:
    0 4px 10px rgba(0,0,0,0.28),
    inset 0 1px 0 rgba(255,255,255,0.35);
}


/* --------------------------------------
   UX choice buttons — micro lift at rest
-------------------------------------- */
.cbfc-ux-choice {
  box-shadow:
    0 4px 0 var(--cbfc-purple-shadow),
    0 10px 22px rgba(76, 44, 146, 0.35);
}

.cbfc-ux-choice.is-active {
  box-shadow:
    0 6px 0 var(--cbfc-green-shadow),
    0 14px 28px rgba(21, 128, 61, 0.45);
}


/* --------------------------------------
   Reduce perceived flatness on hover
-------------------------------------- */
@media (hover: hover) {
  .cbfc-ux-choice:hover {
    box-shadow:
      0 6px 0 var(--cbfc-purple-shadow),
      0 14px 28px rgba(76, 44, 146, 0.45);
  }

  .cbfc-ux-choice.is-active:hover {
    box-shadow:
      0 8px 0 var(--cbfc-green-shadow),
      0 18px 34px rgba(21, 128, 61, 0.5);
  }
}


/* --------------------------------------
   Helper text — stays quiet
-------------------------------------- */
.cbfc-length-helper,
.cbfc-label-helper {
  text-shadow: 0 1px 0 rgba(255,255,255,0.35);
}


/* ======================================================
   CBFC — PASS E: TABLET RECONCILIATION
   Range: 768px–1024px
   Intent:
   - Preserve “floating controls on surface”
   - Prevent desktop flattening
   - Slightly relax mobile spacing
====================================================== */

@media (min-width: 768px) and (max-width: 1024px) {

  /* --------------------------------------
     Calculator surface
  -------------------------------------- */
  .jam-calculator {
    padding: 22px;
  }

  #cbfc-form {
    padding: 14px;
    border-radius: 14px;
  }

  /* --------------------------------------
     Fence basics stays ONE visual card
  -------------------------------------- */
  .cbfc-fence-basics {
    background: #e0b6f3;
    padding: 20px;
    border-radius: 16px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 8px 22px rgba(0,0,0,0.08);
  }

  /* Keep fence type + length visually unified */
  .cbfc-fence-type-row {
    margin-bottom: 14px;
  }

  .cbfc-length-control {
    margin-top: 8px;
  }

  /* --------------------------------------
     Fence type UX buttons
  -------------------------------------- */
  .cbfc-ux-choice-group {
    gap: 16px;
  }

  .cbfc-ux-choice {
    padding: 6px 8px;
  }

  .cbfc-ux-choice strong {
    font-size: 1.15rem;
  }

  /* --------------------------------------
     Length readout — no desktop inflation
  -------------------------------------- */
  .cbfc-length-readout {
    margin: 12px 0 16px;
  }

  .cbfc-length-value {
    font-size: 1.85rem;
  }

  /* --------------------------------------
     Slider + ruler spacing harmony
  -------------------------------------- */
  #cbfc_length_slider {
    margin-top: 6px;
  }

  .cbfc-length-ruler {
    margin-top: 8px;
  }

  .cbfc-length-helper {
    margin-top: 6px;
    font-size: 0.85em;
  }

  /* --------------------------------------
     Prevent desktop shadows from overpowering
  -------------------------------------- */
  .cbfc-ux-choice {
    box-shadow:
      0 4px 0 var(--cbfc-purple-shadow),
      0 10px 22px rgba(76, 44, 146, 0.38);
  }

  .cbfc-ux-choice.is-active {
    box-shadow:
      0 6px 0 var(--cbfc-green-shadow),
      0 14px 26px rgba(21, 128, 61, 0.45);
  }

}

/* ======================================================
   CBFC — CALCULATE BUTTON (AUTHORITATIVE)
   Restored from pre-refactor (LOCKED)
   - Locked / unlocked states
   - Two-line hierarchy
   - Indigo confidence gradient
====================================================== */

.cbfc-calculate {
    display: block;
    width: 100%;
    padding: 14px 18px;
    border-radius: 14px;
    border: none;
    font-size: 1.15rem;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(
    180deg,
    #4f46e5 0%,
    #3730a3 100%
  );
    color: #ffffff;
    box-shadow: 0 6px 0 #2c247d,
    0 12px 24px rgba(55, 48, 163, 0.35);
    transition: background 0.2s ease,
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

/* -------------------------------
   TEXT STRUCTURE — LOCKED (2 LINES)
-------------------------------- */

.cbfc-calc-label {
  display: block;
  font-size: 1.15em;
  font-weight: 800;
  line-height: 1.2;
}

.cbfc-calc-helper {
  display: block;
  margin-top: 4px;

  font-size: 0.85em;
  font-weight: 500;
  line-height: 1.25;

  opacity: 0.9;
}

/* -------------------------------
   HOVER / FOCUS (ACTIVE ONLY)
-------------------------------- */

.cbfc-calculate:hover,
.cbfc-calculate:focus-visible {
  background: linear-gradient(
    180deg,
    #6366f1 0%,
    #4338ca 100%
  );

  box-shadow:
    0 8px 0 #312e81,
    0 16px 28px rgba(67, 56, 202, 0.4);

  transform: translateY(-1px);
}

/* -------------------------------
   ACTIVE PRESS
-------------------------------- */

.cbfc-calculate:active {
  transform: translateY(2px);

  box-shadow:
    0 3px 0 #312e81,
    0 6px 12px rgba(67, 56, 202, 0.25);
}

/* -------------------------------
   DISABLED / LOCKED (PRE-SELECTION)
-------------------------------- */

.cbfc-calculate.is-disabled,
.cbfc-calculate:disabled {
  background: linear-gradient(
    180deg,
    #73afff 0%,
    #0249c3 100%
  );

  color: #ffffff;
  cursor: not-allowed;
  transform: none;

  box-shadow: none;
  border: 1px solid #4b98ff;
}

.cbfc-calculate.is-disabled .cbfc-calc-helper,
.cbfc-calculate:disabled .cbfc-calc-helper {
  opacity: 0.9;
}

/* -------------------------------
   MOBILE COMFORT
-------------------------------- */

@media (max-width: 767px) {
  .cbfc-calculate {
    padding: 16px 20px;
  }

  .cbfc-calc-label {
    font-size: 1.2em;
  }

  .cbfc-calc-helper {
    font-size: 0.9em;
  }
}

/* ======================================================
   CBFC — DECISION GAP AFTER FINAL OPTION GROUP (OG)
   Purpose:
   - Ensure space between last UX choices and Calculate
   - Works for panel + feather + mobile collapse
====================================================== */

/* Last UX choice group before Calculate */
.cbfc-ux-choice-group:last-of-type {
  margin-bottom: 28px;
}

/* Tablet / mobile slightly tighter */
@media (max-width: 1024px) {
  .cbfc-ux-choice-group:last-of-type {
    margin-bottom: 22px;
  }
}

/* Small mobile comfort */
@media (max-width: 767px) {
  .cbfc-ux-choice-group:last-of-type {
    margin-bottom: 20px;
  }
}

/* ======================================================
   CBFC — TIGHTEN FINAL INPUT RHYTHM (PRE-CALCULATE)
====================================================== */

/* Reduce excess space above last option group */
.cbfc-step:last-of-type {
  margin-bottom: 0;
}

/* Control spacing from header to buttons */
.cbfc-step:last-of-type .cbfc-section-heading,
.cbfc-step:last-of-type .cbfc-ux-label {
  margin-bottom: 8px;
}

/* Keep deliberate pause only BELOW the buttons */
.cbfc-step:last-of-type .cbfc-ux-choice-group {
  margin-bottom: 22px; /* this is the intentional pause */
}

/* ======================================================
   CBFC — OPTION HEADER ATTACHMENT (OG)
   Purpose: headers belong to the buttons below
====================================================== */

.cbfc-section-heading,
.cbfc-ux-label {
  display: block;
  margin-top: 0;
  margin-bottom: 6px;

  font-size: 0.85rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  opacity: 0.85;
}

/* Slight indent to align with button mass */
.cbfc-step .cbfc-section-heading,
.cbfc-step .cbfc-ux-label {
  padding-left: 2px;
}

/* ======================================================
   CBFC — FENCE LENGTH HEADER ATTACHMENT (OG)
   Purpose:
   - Fence length label belongs to slider + ruler
   - Match post type / panel type behaviour
====================================================== */

/* Fence length heading */
.cbfc-length-control > label,
.cbfc-length-control .cbfc-ux-label {
  display: block;
  margin-top: 0;
  margin-bottom: 6px; /* tight, intentional */

  font-size: 0.85rem;
  font-weight: 600;

  text-transform: uppercase;
  letter-spacing: 0.04em;

  opacity: 0.85;
  text-align: center; /* matches OG */
}

/* Prevent extra space sneaking in above readout */
.cbfc-length-control label + .cbfc-length-readout {
  margin-top: 6px;
}

/* ======================================================
   CBFC — RESULTS STAGE (AUTHORITATIVE)
   Pass 2: Surface + Hierarchy + Decision Clarity
   Baseline: current CSS
   Reference: pre-refactor visual language
====================================================== */

/* ------------------------------------------------------
   RESULT CARD — BASE SURFACE
------------------------------------------------------ */
.cbfc-option {
  position: relative;
  margin-top: 18px;
  padding: 20px 20px 22px;

  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;

  box-shadow:
    0 8px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255,255,255,0.6);

  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------------------------------
   RECOMMENDED / ALTERNATIVE SURFACES
------------------------------------------------------ */
.cbfc-option.recommended {
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 85%);
  border-color: rgba(34,197,94,0.55);
}

.cbfc-option.alt-option {
  background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 85%);
  border-color: #c4b5fd;
}

/* ------------------------------------------------------
   CARD IDENTITY (ICON + TITLE)
------------------------------------------------------ */
.cbfc-result-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.cbfc-option h3 {
  margin: 10px 0 6px;
  font-size: 1.9em;
  font-weight: 700;
  line-height: 1.25;
}

/* ------------------------------------------------------
   FACTS ZONE — SCANNABLE COMPARISON
------------------------------------------------------ */
.cbfc-core-facts {
  margin: 8px 0 14px;
  padding-left: 18px;
  font-size: 0.95em;
}

.cbfc-core-facts li {
  margin-bottom: 6px;
  line-height: 1.35;
  color: #1f2937;
}

.cbfc-core-facts li strong {
  font-weight: 700;
  color: #0f5f2b;
}

/* Purple carry-through for alternative */
.cbfc-option.alt-option .cbfc-core-facts li strong {
  color: #4c1d95;
}

/* ------------------------------------------------------
   DIVIDER BEFORE PRICE
------------------------------------------------------ */
.cbfc-quote-divider {
  margin: 16px 0 14px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    #e5e7eb,
    transparent
  );
}

/* ------------------------------------------------------
   PRICE ZONE — COMMIT ANCHOR (PRE-REFACTOR PARITY)
------------------------------------------------------ */
.cbfc-total {
  width: 100%;
  margin: 18px 0 8px;
  padding: 18px 16px;

  text-align: center;

  background: #f8fafc;
  border-top: 2px solid #e5e7eb;
  border-radius: 0 0 14px 14px;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.7),
    0 4px 10px rgba(0,0,0,0.05);
}

.cbfc-option.recommended .cbfc-total {
    background: #ffffff;
    border-top-color: #22c55e;
}

.cbfc-option.alt-option .cbfc-total {
  background: #ffffff;
  border-top-color: #7c3aed;
}

.cbfc-total-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #475569;
}

.cbfc-total-amount {
  display: block;
  margin-top: 8px;

  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.05;
  color: #0f172a;
}

.cbfc-option.recommended .cbfc-total-amount {
  color: #166534;
}

.cbfc-option.alt-option .cbfc-total-amount {
  color: #4c1d95;
}

/* ------------------------------------------------------
   TOTAL PRICE ASTERISK (RESTORED)
------------------------------------------------------ */

.cbfc-total-amount::after {
  content: " *";
  margin-left: 2px;
  font-size: 0.75em;
  vertical-align: super;
  color: #475569;
}

/* Mobile balance */
@media (max-width: 767px) {
  .cbfc-option .cbfc-cta-primary,
  .cbfc-option .cbfc-cta-secondary {
    margin-bottom: 14px;
  }
}

/* ======================================================
   CBFC — RESULTS CTA SYSTEM (AUTHORITATIVE)
   Restores calculator parity:
   - Green = Recommended
   - Purple = Alternative
   - Correct CTA visibility rules
====================================================== */

/* ------------------------------------------------------
   CTA BASE (shared geometry)
------------------------------------------------------ */
.cbfc-option .cbfc-cta-primary,
.cbfc-option .cbfc-cta-secondary {
  display: block;
  width: 100%;
  margin-top: 16px;

  min-height: 54px;
  padding: 14px 18px;

  border-radius: 14px;
  border: none;

  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;

  cursor: pointer;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease,
    background 0.2s ease;
}

/* ------------------------------------------------------
   PRIMARY CTA — Arrange site visit (GREEN)
------------------------------------------------------ */
.cbfc-option .cbfc-cta-primary {
  background: linear-gradient(
    180deg,
    var(--cbfc-green-top) 0%,
    var(--cbfc-green-bottom) 100%
  );
  color: #ffffff;

  box-shadow:
    0 6px 0 var(--cbfc-green-shadow),
    0 12px 24px rgba(21, 128, 61, 0.45);
}

@media (hover: hover) {
  .cbfc-option .cbfc-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow:
      0 8px 0 var(--cbfc-green-shadow),
      0 18px 30px rgba(21, 128, 61, 0.5);
  }
}

.cbfc-option .cbfc-cta-primary:active {
  transform: translateY(2px);
  box-shadow:
    0 3px 0 var(--cbfc-green-shadow),
    0 6px 12px rgba(21, 128, 61, 0.35);
}

/* ------------------------------------------------------
   SECONDARY CTA — Select alternative (PURPLE)
------------------------------------------------------ */
.cbfc-option .cbfc-cta-secondary {
  background: linear-gradient(
    180deg,
    var(--cbfc-purple-top) 0%,
    var(--cbfc-purple-bottom) 100%
  );
  color: #ffffff;

  box-shadow:
    0 6px 0 var(--cbfc-purple-shadow),
    0 12px 24px rgba(76, 44, 146, 0.45);
}

@media (hover: hover) {
  .cbfc-option .cbfc-cta-secondary:hover {
    transform: translateY(-1px);
    box-shadow:
      0 8px 0 var(--cbfc-purple-shadow),
      0 18px 30px rgba(59, 31, 115, 0.5);
  }
}

.cbfc-option .cbfc-cta-secondary:active {
  transform: translateY(2px);
  box-shadow:
    0 3px 0 var(--cbfc-purple-shadow),
    0 6px 12px rgba(76, 44, 146, 0.35);
}

/* ------------------------------------------------------
   CTA VISIBILITY RULES (LOCKED)
   These prevent duplicate Arrange buttons
------------------------------------------------------ */

/* PANEL: single path → no secondary CTA */
.cbfc-option.single-option .cbfc-cta-secondary {
  display: none;
}

/* FEATHER — RECOMMENDED:
   Arrange site visit only */
.cbfc-option.recommended .cbfc-cta-secondary {
  display: none;
}

/* FEATHER — ALTERNATIVE:
   Select alternative only */
.cbfc-option.alt-option .cbfc-cta-primary {
  display: none;
}

/* ------------------------------------------------------
   MOBILE COMFORT
------------------------------------------------------ */
@media (max-width: 767px) {
  .cbfc-option .cbfc-cta-primary,
  .cbfc-option .cbfc-cta-secondary {
    min-height: 52px;
    font-size: 1.05rem;
  }
}

/* ======================================================
   CBFC — RESULTS MICRO-POLISH (AUTHORITATIVE)
   Fixes:
   1. CTA → note spacing
   2. Restores price asterisk
====================================================== */

/* ------------------------------------------------------
   CTA → NOTE SPACING
------------------------------------------------------ */

/* Give the CTA breathing room */
.cbfc-option .cbfc-cta-primary,
.cbfc-option .cbfc-cta-secondary {
  margin-bottom: 12px; /* ⬅ key fix */
}

/* Ensure note is visually secondary */
.cbfc-option .cbfc-cta-helper,
.cbfc-option .cbfc-site-note,
.cbfc-option .cbfc-note {
  margin-top: 20px;
  font-size: 0.85em;
  line-height: 1.4;
  color: #475569;
  text-align: center;
margin-bottom: 20px;
}

}



/* ======================================================
   CBFC — RESULTS PASS 3
   Badges + Visual Winner Emphasis
   Badge text unified at 1rem
====================================================== */

/* ----------------------------------------
   Result card baseline reinforcement
----------------------------------------- */
.cbfc-option {
  position: relative;
  transition:
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 180ms ease;
}

/* ----------------------------------------
   Recommended vs Alternative surfaces
----------------------------------------- */

/* RECOMMENDED */
.cbfc-option.recommended {
  border-color: rgba(34,197,94,0.55);
  background: linear-gradient(
    180deg,
    #ecfdf5 0%,
    #ffffff 85%
  );
}

/* ALTERNATIVE */
.cbfc-option.alt-option {
  border-color: #c4b5fd;
  background: linear-gradient(
    180deg,
    #f5f3ff 0%,
    #ffffff 85%
  );
}

/* ----------------------------------------
   Badge positioning (single source)
----------------------------------------- */
.cbfc-recommended-badge,
.cbfc-alternative-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;

  margin: 0;
  padding: 6px 16px;

  border-radius: 999px;

  font-size: 1rem;          /* 🔒 unified size */
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  line-height: 1;
  white-space: nowrap;
}

/* ----------------------------------------
   Recommended badge (GREEN)
----------------------------------------- */
.cbfc-option.recommended .cbfc-recommended-badge {
  background: linear-gradient(
    180deg,
    #22c55e 0%,
    #15803d 100%
  );
  color: #ffffff;

  box-shadow:
    0 3px 0 #14532d,
    0 6px 14px rgba(22,163,74,0.35);
}

.cbfc-option.recommended .cbfc-recommended-badge::before {
  content: "✓";
  margin-right: 6px;
  font-size: 0.95em;
  font-weight: 900;
  opacity: 0.95;
}

/* ----------------------------------------
   Alternative badge (PURPLE)
----------------------------------------- */
.cbfc-option.alt-option .cbfc-alternative-badge {
  background: linear-gradient(
    180deg,
    var(--cbfc-purple-top) 0%,
    var(--cbfc-purple-bottom) 100%
  );
  color: #ffffff;

  box-shadow:
    0 3px 0 var(--cbfc-purple-shadow),
    0 6px 14px rgba(76,44,146,0.35);
}

.cbfc-option.alt-option .cbfc-alternative-badge::before {
  content: "≈";
  margin-right: 6px;
  font-size: 1em;
  font-weight: 800;
  opacity: 0.9;
}

/* ----------------------------------------
   Title spacing to clear badge
----------------------------------------- */
.cbfc-option h3 {
  margin-top: 40px;
}

/* ----------------------------------------
   Selected / inactive emphasis
----------------------------------------- */
.cbfc-option.is-active {
  opacity: 1;
  transform: translateY(-4px) scale(1.005);
  border-width: 2px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.18);
  z-index: 2;
}

.cbfc-option.is-inactive {
  opacity: 0.45;
  filter: grayscale(0.15);
  pointer-events: none;
}

.cbfc-option.is-inactive .cbfc-cta-primary,
.cbfc-option.is-inactive .cbfc-cta-secondary {
  opacity: 0.5;
  box-shadow: none;
}

/* ----------------------------------------
   CTA VISIBILITY (product truth)
----------------------------------------- */

/* PANEL */
.cbfc-option.single-option .cbfc-cta-secondary {
  display: none;
}

/* FEATHER — Recommended */
.cbfc-option.recommended .cbfc-cta-secondary {
  display: none;
}

/* FEATHER — Alternative */
.cbfc-option.alt-option .cbfc-cta-primary {
  display: none;
}

/* ----------------------------------------
   Mobile refinement (no size change)
----------------------------------------- */
@media (max-width: 767px) {

  .cbfc-option h3 {
    margin-top: 36px;
  }

}

/* ======================================================
   CBFC — RESULTS PASS 4
   Grid Reinstatement + Height Balance
====================================================== */

/* ------------------------------------------------------
   DESKTOP + TABLET GRID
------------------------------------------------------ */
@media (min-width: 768px) {

  /* Grid owner */
  #cbfc_results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;

    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Slots are fixed and predictable */
  #cbfc_results .cbfc-result-slot[data-slot="primary"] {
    grid-column: 1;
  }

  #cbfc_results .cbfc-result-slot[data-slot="secondary"] {
    grid-column: 2;
  }

  /* Site visit participates in grid */
  #cbfc_results .cbfc-site-visit {
    grid-column: span 1;
  }

}

/* ------------------------------------------------------
   MOBILE — STACKED (LOCKED)
------------------------------------------------------ */
@media (max-width: 767px) {
  #cbfc_results {
    display: block;
  }
}

/* ======================================================
   CBFC — RESULT CARD HEIGHT AUTHORITY
   Tablet needs more vertical slack than desktop
====================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
  .cbfc-option {
    min-height: 620px;
    display: flex;
    flex-direction: column;
  }

  .cbfc-option .cbfc-core-facts,
  .cbfc-option .cbfc-explanation,
  .cbfc-option .cbfc-description {
    flex-grow: 1;
  }

  .cbfc-option .cbfc-total {
    margin-top: auto;
  }

  .cbfc-option .cbfc-cta-primary,
  .cbfc-option .cbfc-cta-secondary {
    margin-top: 14px;
  }
}




/* DESKTOP */
@media (min-width: 1025px) {
  .cbfc-option {
    min-height: 540px;   /* desktop needs less */
    display: flex;
    flex-direction: column;
  }

  /* ✅ SINGLE FLEX ANCHOR */
  .cbfc-option .cbfc-cta-primary,
  .cbfc-option .cbfc-cta-secondary {
    margin-top: auto;
  }
}


.cbfc-option .cbfc-total {
  margin-top: 16px; /* or whatever your natural spacing is */
}

/* ------------------------------------------------------
   SAFETY — Site visit card remains flexible
------------------------------------------------------ */
@media (min-width: 768px) {

  .cbfc-site-visit {
    min-height: auto;
  }

}

/* ------------------------------------------------------
   REDUCED MOTION SAFETY
------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .cbfc-option {
    transform: none !important;
    transition: none !important;
  }
}

/* ======================================================
   CBFC — RESULTS INTRO (GRID SAFE)
   Compresses header text to allow clean grid alignment
====================================================== */

.cbfc-results-intro {
  margin-bottom: 12px; /* 👈 critical reduction */
}

/* Heading */
.cbfc-results-intro h3 {
  margin-bottom: 4px;
  line-height: 1.2;
}

/* Fence height sub-line */
.cbfc-results-intro p:first-of-type {
  margin-bottom: 4px;
  font-size: 0.95rem;
  color: #475569;
}

/* Explanatory sentence */
.cbfc-results-intro p:last-of-type {
  margin-top: 0;
  margin-bottom: 10px; /* 👈 keeps cards close */
  font-size: 0.95rem;
  line-height: 1.35;
  color: #334155;
}

/* ------------------------------------------------------
   DESKTOP / TABLET ONLY — extra tightening
------------------------------------------------------ */
@media (min-width: 768px) {

  .cbfc-results-intro {
    margin-bottom: 8px; /* 👈 final grid lock */
  }

}

/* ======================================================
   CBFC — RESULTS INTRO GRID EXTRACTION
   Removes intro text from column flow
====================================================== */

@media (min-width: 768px) {

  /* Ensure results grid exists */
  #cbfc_results {
    grid-auto-flow: row;
  }

  /* Intro must span full width */
  .cbfc-results-intro {
    grid-column: 1 / -1;   /* 👈 spans both columns */
  }

  /* CRITICAL: prevent intro from affecting column height */
  .cbfc-results-group {
    display: contents;    /* 👈 pre-refactor behaviour */
  }

}

/* ======================================================
   CBFC — RESULTS PASS 5
   Micro polish (spacing + rhythm only)
====================================================== */

/* ----------------------------------------
   Intro → cards visual handoff
----------------------------------------- */
.cbfc-results-intro {
  margin-bottom: 6px;              /* was 8–12px */
}

.cbfc-results-intro h3 {
  margin-bottom: 2px;
}

.cbfc-results-intro p {
  margin-bottom: 4px;
}

/* ----------------------------------------
   Card internal rhythm
----------------------------------------- */
.cbfc-option {
  padding: 18px 20px 20px;         /* slightly tighter */
}

.cbfc-result-title {
  margin-bottom: 4px;
}

.cbfc-finished-height {
  margin-bottom: 8px;
}

/* ----------------------------------------
   Core facts list tightening
----------------------------------------- */
.cbfc-core-facts {
  margin-bottom: 12px;
}

.cbfc-core-facts li {
  margin-bottom: 3px;
}

/* ----------------------------------------
   Divider rhythm (if present)
----------------------------------------- */
.cbfc-quote-divider {
  margin: 14px 0 12px;
}

/* ----------------------------------------
   Total price block polish
----------------------------------------- */
.cbfc-total {
  margin-top: 16px;
  margin-bottom: 6px;
  padding: 16px 16px;
}

.cbfc-total-label {
  margin-bottom: 2px;
}

.cbfc-total-amount {
  margin-top: 6px;
}

/* ----------------------------------------
   Asterisk note breathing room
----------------------------------------- */
.cbfc-option .cbfc-cta-helper {
  margin-top: 14px;                /* clearer separation */
  margin-bottom: 12px;
  line-height: 1.35;
}

/* ----------------------------------------
   CTA vertical rhythm
----------------------------------------- */
.cbfc-option .cbfc-cta-primary,
.cbfc-option .cbfc-cta-secondary {
  margin-top: 14px;
}

/* ----------------------------------------
   Mobile: do not over-tighten
----------------------------------------- */
@media (max-width: 767px) {

  .cbfc-option {
    padding: 18px;
  }

  .cbfc-option .cbfc-cta-helper {
    margin-top: 12px;
  }

}

/* ======================================================
   CBFC — RESULTS SLOT AUTHORITY (FINAL, GRID-CORRECT)
   Explicit grid placement — no flow guessing
====================================================== */

@media (min-width: 768px) {

  /* ---------------------------------
     Grid owner
  ---------------------------------- */
  #cbfc_results {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: auto;
    gap: 28px;
    align-items: start;
  }

  /* ---------------------------------
     Results intro — ALWAYS FIRST ROW
  ---------------------------------- */
  #cbfc_results > .cbfc-results-intro {
    grid-column: 1 / -1;
    grid-row: 1;
    margin-bottom: 12px;
  }

  /* ---------------------------------
     Slots start AFTER intro
  ---------------------------------- */
  #cbfc_results > .cbfc-result-slot {
    display: block;
    grid-row: 2;
  }

  /* ---------------------------------
     Reset state
  ---------------------------------- */
  #cbfc_results:not(.has-active-primary):not(.has-active-secondary)
    > .cbfc-result-slot {
    display: block;
  }

  /* ---------------------------------
     PRIMARY selected
     → hide secondary
     → site visit replaces it (col 2)
  ---------------------------------- */
  #cbfc_results.has-active-primary
    .cbfc-result-slot[data-slot="secondary"] {
    display: none;
  }

  #cbfc_results.has-active-primary
    .cbfc-result-slot[data-slot="site"] {
    display: block;
    grid-column: 2;
    grid-row: 2;
  }

  /* ---------------------------------
     SECONDARY selected
     → hide primary
     → site visit replaces it (col 1)
  ---------------------------------- */
  #cbfc_results.has-active-secondary
    .cbfc-result-slot[data-slot="primary"] {
    display: none;
  }

  #cbfc_results.has-active-secondary
    .cbfc-result-slot[data-slot="site"] {
    display: block;
    grid-column: 1;
    grid-row: 2;
  }

}

/* ======================================================
   CBFC — RESULT & SITE VISIT UI (SINGLE AUTHORITY)
   Scope:
   - Flat pill badges (top-right)
   - Result cards + Site Visit card
   - WhatsApp / Messenger buttons (2-col desktop)
====================================================== */


/* ======================================================
   RESULT CARD SURFACES
====================================================== */

/* Panel (single option) */
.cbfc-option.single-option {
  position: relative;

  background: linear-gradient(
    180deg,
    #eff6ff 0%,
    #ffffff 85%
  );
  border-color: rgb(146 186 251 / 55%);
}

/* Active elevation */
.cbfc-option.single-option.is-active {
  transform: translateY(-4px) scale(1.005);
  border-width: 2px;
  box-shadow: 0 12px 32px rgba(15,23,42,0.18);
  z-index: 2;
}

/* Total price accents */
.cbfc-option.single-option .cbfc-total {
  background: #ffffff;
  border-top-color: #3b82f6;
}

.cbfc-option.single-option .cbfc-total-amount {
  color: #1e3a8a;
}


/* ======================================================
   FLAT PILL BADGES — RESULT CARDS
   (Replaces all gradient badges)
====================================================== */

/* Kill legacy badge markup */
.cbfc-recommended-badge,
.cbfc-alternative-badge {
  display: none !important;
}

/* Shared badge geometry */
.cbfc-option::after {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;

  padding: 6px 16px;
  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;

  white-space: nowrap;
}

/* Recommended */
.cbfc-option.recommended::after {
  content: "Recommended";
  background: #dcfce7;
  color: #166534;
}

/* Alternative */
.cbfc-option.alt-option::after {
  content: "Alternative option";
  background: #ede9fe;
  color: #4c1d95;
}

/* Single / panel */
.cbfc-option.single-option::after {
  content: "Confirmed specification";
  background: #e0f2fe;
  color: #1e3a8a;
}


/* ======================================================
   SITE VISIT CARD — FINAL STEP
====================================================== */

.cbfc-site-visit {
  position: relative;

  margin-top: 8px;
  padding: 20px 20px 22px;

  background: linear-gradient(
    180deg,
    #f8fafc 0%,
    #ffffff 85%
  );

  border: 1px solid #c7d2fe;
  border-radius: 16px;

  box-shadow:
    0 6px 18px rgba(15,23,42,0.08),
    inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Desktop grounding */
@media (min-width: 768px) {
  .cbfc-site-visit {
    transform: translateY(2px);
  }
}

/* FINAL STEP badge — pill, card-owned */
.cbfc-site-visit::after {
  content: "Final step";
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 3;

  padding: 6px 16px;
  border-radius: 999px;

  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;

  background: #e0e7ff;
  color: #3730a3;
}

/* Mobile geometry */
@media (max-width: 767px) {
  .cbfc-site-visit {
    padding: 16px;
    border-radius: 14px;
  }
}


/* ======================================================
   SITE VISIT FORM CONTROLS
====================================================== */

.cbfc-site-visit form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 16px;
}

.cbfc-site-visit label {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #334155;
}

.cbfc-site-visit input,
.cbfc-site-visit textarea {
  width: 100%;
  padding: 14px;

  border-radius: 12px;
  border: 1px solid #c7d2fe;
  background: #ffffff;
  color: #0f172a;

  font-size: 1rem;
}

.cbfc-site-visit input:focus,
.cbfc-site-visit textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 2px rgba(99,102,241,0.18);
}


/* ======================================================
   SITE VISIT — WHATSAPP & MESSENGER (REFINED)
   Purpose:
   - Clearly secondary to final submit
   - Compact, calm, trustworthy
   - Two-column desktop / stacked mobile
====================================================== */

/* -------------------------------
   Button grid
-------------------------------- */
.cbfc-site-visit .cbfc-contact-buttons {
  margin-top: 10px;
  margin-bottom: 12px;
}

@media (min-width: 768px) {
  .cbfc-site-visit .cbfc-contact-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 767px) {
  .cbfc-site-visit .cbfc-contact-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* -------------------------------
   Shared button base
-------------------------------- */
.cbfc-site-visit .cbfc-whatsapp-btn,
.cbfc-site-visit .cbfc-messenger-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  width: 100%;
  min-height: 42px;        /* ⬇ reduced */
  padding: 10px 14px;      /* ⬇ reduced */

  border-radius: 12px;
  border: none;

  font-size: 0.95rem;      /* ⬇ calmer */
  font-weight: 700;
  line-height: 1.15;

  cursor: pointer;
  text-align: center;

  box-sizing: border-box;

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

/* -------------------------------
   WhatsApp (green, softened)
-------------------------------- */
.cbfc-site-visit .cbfc-whatsapp-btn {
  background: linear-gradient(
    180deg,
    #22c55e 0%,
    #16a34a 100%
  );
  color: #ffffff;

  box-shadow:
    0 4px 0 #14532d,
    0 8px 14px rgba(22,163,74,0.25);
}

/* -------------------------------
   Messenger (blue, softened)
-------------------------------- */
.cbfc-site-visit .cbfc-messenger-btn {
  background: linear-gradient(
    180deg,
    #3b82f6 0%,
    #2563eb 100%
  );
  color: #ffffff;

  box-shadow:
    0 4px 0 #1e40af,
    0 8px 14px rgba(37,99,235,0.25);
}

/* -------------------------------
   Hover (desktop only)
-------------------------------- */
@media (hover: hover) {
  .cbfc-site-visit .cbfc-whatsapp-btn:hover,
  .cbfc-site-visit .cbfc-messenger-btn:hover {
    transform: translateY(-1px);
  }
}

/* -------------------------------
   Active press
-------------------------------- */
.cbfc-site-visit .cbfc-whatsapp-btn:active,
.cbfc-site-visit .cbfc-messenger-btn:active {
  transform: translateY(2px);
  box-shadow:
    0 2px 0 rgba(0,0,0,0.25),
    0 4px 8px rgba(0,0,0,0.25);
}
/* ======================================================
   SITE VISIT — GO BACK ACTION (SECONDARY / SAFE)
====================================================== */

.cbfc-site-visit .cbfc-reset-choice {
  all: unset;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 12px;

  font-size: 0.95rem;
  font-weight: 600;

  color: #475569;
  cursor: pointer;

  padding: 6px 10px;
  border-radius: 8px;

  transition: background 0.15s ease, color 0.15s ease;
}

.cbfc-site-visit .cbfc-reset-choice:hover {
  background: #f1f5f9;
  color: #0f172a;
}

/* ======================================================
   SITE VISIT — FINAL SUBMIT (JOURNEY COMPLETE)
   AUTHORITATIVE — FULL WIDTH, CONTAINED
====================================================== */

.cbfc-site-visit button[type="submit"] {
  /* Explicit overrides only — no all:unset */
  appearance: none;
  -webkit-appearance: none;

  display: block;
  width: 100%;               /* ✅ full-width authority */
  max-width: 100%;

  margin: 8px 0 0;           /* ✅ no centering = no escape */
  padding: 16px 20px;

  border: none;
  border-radius: 16px;

  background: linear-gradient(
    180deg,
    #4f46e5 0%,
    #3730a3 100%
  );

  color: #ffffff;

  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  letter-spacing: 0.005em;

  cursor: pointer;

  box-sizing: border-box;    /* 🔒 critical containment */

  box-shadow:
    0 8px 0 #2c247d,
    0 16px 30px rgba(55,48,163,0.35);

  transition:
    transform 0.12s ease,
    box-shadow 0.12s ease;
}

/* Hover — desktop only */
@media (hover: hover) {
  .cbfc-site-visit button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow:
      0 10px 0 #312e81,
      0 20px 36px rgba(67,56,202,0.45);
  }
}

/* Active press */
.cbfc-site-visit button[type="submit"]:active {
  transform: translateY(3px);
  box-shadow:
    0 4px 0 #312e81,
    0 8px 16px rgba(67,56,202,0.3);
}messenger

/* ======================================================
   CBFC — CTA Helper Split Emphasis
   Restores “reassurance punch” for nervous users
====================================================== */

.cbfc-cta-helper {
  font-size: 0.9em;
  line-height: 1.45;
  color: #334155; /* slate-700 */
  margin-top: 8px;
}

/* Second line reassurance */
.cbfc-cta-helper strong {
  display: block;
  margin-top: 4px;
  font-weight: 600;
  color: #0f172a; /* slate-900 for authority */
}

@media (max-width: 767px) {
  .cbfc-cta-helper strong {
    font-weight: 700;
  }
}

/* ======================================================
   CBFC — RESULT CARD CONTENT BALANCER (AUTHORITATIVE)
   Purpose:
   - Allow variable copy above price
   - Keep price blocks aligned
====================================================== */

@media (min-width: 768px) {
  .cbfc-option {
    display: flex;
    flex-direction: column;
  }

  /* EVERYTHING above price grows */
  .cbfc-option > :not(.cbfc-total):not(.cbfc-cta-primary):not(.cbfc-cta-secondary) {
    flex-shrink: 0;
  }

  .cbfc-option .cbfc-core-facts,
  .cbfc-option .cbfc-explanation,
  .cbfc-option .cbfc-description {
    flex-grow: 1;
  }
}

/* ======================================================
   CBFC — RESULT CARD WHY BLOCK (AUTHORITATIVE FIX)
   Purpose:
   - Absorb variable explanation copy
   - Keep price blocks aligned (tablet + desktop)
====================================================== */

@media (min-width: 768px) {

  .cbfc-option {
    display: flex;
    flex-direction: column;
  }

  /* Allow explanation copy to grow UP, not down */
  .cbfc-option .cbfc-why {
    flex-grow: 1;
  }

}

/* ======================================================
   CBFC — MOBILE RESULT SLOT COLLAPSE (SAFE)
   Hide unused comparison slot during site visit
====================================================== */
@media (max-width: 767px) {

  /* When a site visit is active, collapse the non-selected slot */
  #cbfc_results.has-active-primary
    .cbfc-result-slot[data-slot="secondary"],
  #cbfc_results.has-active-secondary
    .cbfc-result-slot[data-slot="primary"] {
    display: none;
  }

}

/* ======================================================
   CBFC — MOBILE ALTERNATIVE OPTION HINT
====================================================== */
.cbfc-mobile-alt-hint {
  display: none;
  margin-top: 8px;
  text-align: center;
}

/* ======================================================
   CBFC — Mobile Alternative Option Button
====================================================== */

.cbfc-mobile-alt-hint button {
  appearance: none;
  border: 1px solid #d6ccff;
  background: #f5f3ff;
  color: #4c1d95;

  padding: 10px 16px;
  border-radius: 999px;

  font-weight: 700;
  font-size: 0.95em;
  line-height: 1;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  transition:
    background-color 0.15s ease,
    transform 0.1s ease,
    box-shadow 0.1s ease;
}

/* Hover / focus (desktop-safe) */
.cbfc-mobile-alt-hint button:hover,
.cbfc-mobile-alt-hint button:focus-visible {
  background: #ede9fe;
}

/* Active tap feedback (mobile) */
.cbfc-mobile-alt-hint button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(76, 29, 149, 0.15) inset;
}

/* Mobile only */
@media (max-width: 767px) {
  .cbfc-mobile-alt-hint {
    display: block;
  }
}

/* Hide once a site visit is active */
#cbfc_results.has-active-primary .cbfc-mobile-alt-hint,
#cbfc_results.has-active-secondary .cbfc-mobile-alt-hint {
  display: none;
}

/* ======================================================
   CBFC — Mobile Back to Recommended Button
   Mobile-only (authoritative)
====================================================== */

.cbfc-mobile-back-hint {
  display: none;              /* OFF by default */
  margin-top: 12px;
  text-align: center;
}

@media (max-width: 767px) {
  .cbfc-mobile-back-hint {
    display: block;
  }
}

.cbfc-mobile-back-hint button {
  appearance: none;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #1e3a8a;

  padding: 10px 16px;
  border-radius: 999px;

  font-weight: 700;
  font-size: 0.9em;
  line-height: 1;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

.cbfc-mobile-back-hint button:active {
  transform: translateY(1px);
}

/* Hide once site visit starts */
#cbfc_results.has-active-primary .cbfc-mobile-back-hint,
#cbfc_results.has-active-secondary .cbfc-mobile-back-hint {
  display: none;
}



/* ======================================================
   CBFC — Fence Type Help Overlay (AUTHORITATIVE)
   Scope:
   - Modal overlay only
   - No header triggers
   - No floating buttons
   - No tooltips
====================================================== */

/* -------------------------------
   Overlay backdrop
-------------------------------- */
.cbfc-fence-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;

  background: rgba(15, 23, 42, 0.6);

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Respect hidden attribute */
.cbfc-fence-help-overlay[hidden] {
  display: none !important;
}

/* -------------------------------
   Modal container
-------------------------------- */
.cbfc-fence-help-modal {
  position: relative;

  width: min(92vw, 720px);
  max-height: 90vh;
  overflow-y: auto;

  background: #ffffff;
  border-radius: 16px;
  padding: 20px;

  transform: scale(0.96);
  opacity: 0;

  transition:
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Animate in */
.cbfc-fence-help-overlay:not([hidden]) .cbfc-fence-help-modal {
  transform: scale(1);
  opacity: 1;
}

/* -------------------------------
   Close button
-------------------------------- */
.cbfc-fence-help-close {
  position: absolute;
  top: 10px;
  right: 12px;

  background: none;
  border: none;

  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

/* -------------------------------
   Content grid
-------------------------------- */
.cbfc-fence-help-grid {
  display: grid;
  gap: 16px;
  margin-top: 16px;
}

@media (min-width: 768px) {
  .cbfc-fence-help-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.cbfc-fence-help-option img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 8px;
}

/* -------------------------------
   Mobile padding refinement
-------------------------------- */
@media (max-width: 480px) {
  .cbfc-fence-help-modal {
    padding: 16px;
  }

  .cbfc-fence-help-option p {
    font-size: 0.95rem;
  }
}


/* ======================================================
   CBFC — Fence Type Help Icon (FINAL, FIXED)
   - Tight hit area
   - Tooltip works
   - No interference with card selection
====================================================== */

.cbfc-help-dot {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);

  width: 16px;
  height: 16px;

  pointer-events: none;   /* 🔑 wrapper never captures hover */
  z-index: 2;
}

.cbfc-help-icon {
  width: 16px;
  height: 16px;
  display: block;

  color: rgba(255,255,255,0.8);
  opacity: 0.9;

  pointer-events: auto;   /* 🔑 icon is the hitbox */
  cursor: pointer;

  transition:
    color 0.15s ease,
    opacity 0.15s ease,
    transform 0.15s ease;
}
/* Hover / focus (desktop only) */
@media (hover: hover) {
  .cbfc-help-dot:hover .cbfc-help-icon,
  .cbfc-help-dot:focus-visible .cbfc-help-icon {
    opacity: 1;
    color: #ffffff;
    transform: scale(1.05);
  }
}

/* Selected card — keep icon neutral */
.cbfc-ux-choice.is-active .cbfc-help-icon {
  color: rgba(255,255,255,0.9);
}

/* =========================
   Tooltip — ICON ONLY
========================= */

.cbfc-help-icon::after {
  content: attr(data-tooltip);

  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);

  background: #0f172a;
  color: #ffffff;

  font-size: 0.7rem;
  font-weight: 500;
  white-space: nowrap;

  padding: 6px 8px;
  border-radius: 6px;

  opacity: 0;
  pointer-events: none;

  transition:
    opacity 0.15s ease,
    transform 0.15s ease;

  z-index: 9999;
}

/* Hover-capable devices only */
@media (hover: hover) {
  .cbfc-help-icon:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* ======================================================
   CBFC — Reference Number (Authoritative / Receipt)
====================================================== */

.cbfc-reference-block {
  margin: 12px 0 16px;
  padding: 14px;

  background: #f1f5f9;
  border: 2px solid #6366f1;
  border-radius: 14px;
}

.cbfc-reference-label {
  display: block;
  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #334155;
  margin-bottom: 8px;
}

.cbfc-reference-value {
  display: block;

  background: linear-gradient(
    180deg,
    #16a34a 0%,
    #15803d 100%
  );

  color: #ffffff;

  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-align: center;

  padding: 14px 16px;
  border-radius: 12px;

  box-shadow:
    0 6px 0 #14532d,
    0 12px 24px rgba(22, 163, 74, 0.35);
}

/* ======================================================
   CBFC — Change / Start New Quote Button
   Secondary recovery action
====================================================== */

.cbfc-change-option {
  margin-top: 12px;

  background: #ffffff;
  color: #1e293b;

  border: 2px solid #cbd5f5;
  border-radius: 12px;

  padding: 12px 18px;

  font-weight: 700;
  font-size: 0.95em;

  cursor: pointer;

  transition:
    background-color 0.15s ease,
    border-color 0.15s ease,
    transform 0.1s ease;
}

.cbfc-change-option:hover {
  background: #f8fafc;
  border-color: #a5b4fc;
}

.cbfc-change-option:active {
  transform: translateY(1px);
}

.cbfc-change-option.is-loading {
  opacity: 0.6;
  pointer-events: none;
}

/* ======================================================
   CBFC — Site Visit: Compare Options Badge
   Contextual action (not a CTA)
====================================================== */

.cbfc-site-visit .cbfc-reset-choice {
  margin: 6px 0 14px;
  padding: 6px 12px;

  font-size: 0.75em;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;

  color: #475569;            /* slate-600 */
  background: #cdebf7;      
  border: 1px solid #e2e8f0; /* slate-200 */
  border-radius: 999px;

  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.cbfc-site-visit .cbfc-reset-choice:hover {
  background: #e2e8f0;
}

.cbfc-site-visit .cbfc-reset-choice:active {
  transform: translateY(1px);
}

/* ======================================================
   CBFC — Site Visit Header Badge Clearance
   Prevents FINAL STEP badge overlapping heading text
====================================================== */

.cbfc-site-visit {
  position: relative;
}

/* Reserve space for the badge on the right */
.cbfc-site-visit > h3 {
  margin-top: 0;
  padding-right: 110px; /* badge + breathing room */
}

@media (max-width: 767px) {
  .cbfc-site-visit > h3 {
    padding-right: 90px;
  }
}

/* =========================================
   CBFC — PROTECTIVE FOOTER
   Ownership + anti-copy marker
========================================= */

.cbfc-protective-footer {
  
    padding: 12px 16px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #0f172a;
    text-align: center;
    border-top: 1px solid #e2e8f0;
    background: linear-gradient(180deg, #e8c7f7 0%, #e8c7f7 100%);
    user-select: none;
}

.cbfc-protective-footer p {
    margin: 0;
    max-width: 680px;
    margin-inline: auto;
}


/* =========================================
   CBFC — Calculate → Results Rhythm
========================================= */
.cbfc-calculate {
    margin-top: 40px;
    margin-bottom: 10px;
}

#cbfc_results {
    margin-top: 0 !important;
}

/* =========================================
   CBFC — FOOTER BRANDING (INLINE)
========================================= */

.cbfc-protective-footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;

  display: flex;
  align-items: center;
  gap: 12px;

  font-size: 0.75rem;
  color: #6b7280;
}

.cbfc-footer-logo {
  height: 22px;
  width: auto;
  opacity: 0.7;
  flex-shrink: 0;
}

/* ======================================================
   SELECTED TICK (ENCODING-SAFE, AUTHORITATIVE)
   No Unicode. No fonts. No surprises.
====================================================== */

.cbfc-ux-choice.is-active::after {
  content: "";
  position: absolute;
  top: 12px;
  right: 12px;

  width: 22px;
  height: 22px;

  background: #15803d;
  border-radius: 50%;

  display: grid;
  place-items: center;

  /* ❌ no shadow — avoids crescent artefact */
}

.cbfc-ux-choice.is-active::before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;

  width: 8px;
  height: 4px;

  border-left: 2.5px solid #ffffff;
  border-bottom: 2.5px solid #ffffff;

  transform: rotate(-45deg);
  z-index: 1;
}

outline: 2px solid rgba(255,255,255,0.25);
outline-offset: -1px;



/* ======================================================
Hide recaptcha logo  
====================================================== */
.grecaptcha-badge { visibility: hidden !important; }