/* ================================================================
   FIXEO — Reservation Modal V2-A
   Trust Cleanup, Unified Avatar System & Operational Language

   Append-only. Scoped to #fixeo-reservation-modal + .fxrva-* namespace.
   Never modifies existing reservation.css rules.

   Sections:
   V2A-RES-A  Unified avatar system (silhouette, 52px)
   V2A-RES-B  Picker avatar system (silhouette, 40px)
   V2A-RES-C  Category-gradient + glow for reservation avatar
   V2A-RES-D  Coordination strip (replaces fake "+23 réservations")
   V2A-RES-E  Step 1 operational footer (replaces SSL-heavy footer)
   V2A-RES-F  Step 2 honest trust row
   V2A-RES-G  Success state: WhatsApp-primary
   V2A-RES-H  Mobile-first adjustments
   V2A-RES-I  Reduced-motion guard
   ================================================================ */

/* ── V2A-RES-A: Unified avatar system (52px — reservation card) ── */
/*
   Mirrors V2-C silhouette system from artisan-profile-v2a.css.
   .fxrva-avatar replaces the initials rendering:
   - font-size:0 kills residual text node
   - dark base gradient + category override via [data-category]
   - ::before head circle / ::after shoulders arc
   Scoped to reservation modal context for isolation.
*/
#fixeo-reservation-modal .fixeo-res-artisan-avatar.fxrva-avatar {
  background: linear-gradient(135deg, #1a1a2e, #2d2d44) !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

/* ── Silhouette spans ── */
#fixeo-reservation-modal .fxrva-silhouette {
  display: block !important;
  position: relative !important;
  width: 64% !important;
  height: 64% !important;
  pointer-events: none !important;
  flex-shrink: 0 !important;
}

/* Head circle */
#fixeo-reservation-modal .fxrva-silhouette::before {
  content: "" !important;
  position: absolute !important;
  top: 8% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 38% !important;
  height: 38% !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.88) !important;
  box-shadow: 0 3px 10px rgba(0,0,0,0.18) !important;
}

/* Shoulders arc */
#fixeo-reservation-modal .fxrva-silhouette::after {
  content: "" !important;
  position: absolute !important;
  bottom: 4% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 74% !important;
  height: 42% !important;
  border-radius: 999px 999px 18px 18px !important;
  background: rgba(255,255,255,0.76) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.16) !important;
}

/* Category badge — positioned from the flex avatar */
#fixeo-reservation-modal .fxrva-cat-badge {
  position: absolute !important;
  bottom: -3px !important;
  right: -3px !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  line-height: 1 !important;
  background: rgba(8,8,24,0.88) !important;
  border: 1.5px solid rgba(255,255,255,0.20) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.40) !important;
  z-index: 4 !important;
  pointer-events: none !important;
}

/* ── V2A-RES-B: Picker avatar (40px) ─────────────────────────── */
#fixeo-reservation-modal .fixeo-res-picker-avatar.fxrva-avatar--sm {
  background: linear-gradient(135deg, #1a1a2e, #2d2d44) !important;
  font-size: 0 !important;
  color: transparent !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

#fixeo-reservation-modal .fxrva-avatar--sm .fxrva-silhouette {
  width: 60% !important;
  height: 60% !important;
}

/* ── V2A-RES-C: Category-specific gradients (T3 mirror) ────────── */
/*
   Same exact gradient values as artisan-profile-v2a.css V2C-C.
   User sees the same color from homepage card → profile → reservation.
   Scoped by #fixeo-reservation-modal for zero bleed to other surfaces.
*/
#fixeo-reservation-modal .fxrva-avatar[data-category="plomberie"] {
  background: linear-gradient(135deg, #0ea5e9, #2563eb) !important;
  box-shadow: 0 6px 20px rgba(14,165,233,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="electricite"] {
  background: linear-gradient(135deg, #facc15, #f97316) !important;
  box-shadow: 0 6px 20px rgba(250,204,21,0.25) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="climatisation"] {
  background: linear-gradient(135deg, #22d3ee, #06b6d4) !important;
  box-shadow: 0 6px 20px rgba(34,211,238,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="peinture"] {
  background: linear-gradient(135deg, #f472b6, #ec4899) !important;
  box-shadow: 0 6px 20px rgba(244,114,182,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="nettoyage"] {
  background: linear-gradient(135deg, #34d399, #10b981) !important;
  box-shadow: 0 6px 20px rgba(52,211,153,0.25) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="menuiserie"] {
  background: linear-gradient(135deg, #a16207, #78350f) !important;
  box-shadow: 0 6px 20px rgba(161,98,7,0.35) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="serrurerie"] {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  box-shadow: 0 6px 20px rgba(245,158,11,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="maconnerie"] {
  background: linear-gradient(135deg, #6b7280, #374151) !important;
  box-shadow: 0 6px 20px rgba(107,114,128,0.35) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="jardinage"] {
  background: linear-gradient(135deg, #84cc16, #16a34a) !important;
  box-shadow: 0 6px 20px rgba(132,204,22,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="bricolage"] {
  background: linear-gradient(135deg, #f97316, #ea580c) !important;
  box-shadow: 0 6px 20px rgba(249,115,22,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="demenagement"] {
  background: linear-gradient(135deg, #c084fc, #7c3aed) !important;
  box-shadow: 0 6px 20px rgba(192,132,252,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="carrelage"] {
  background: linear-gradient(135deg, #94a3b8, #475569) !important;
  box-shadow: 0 6px 20px rgba(148,163,184,0.25) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="toiture"] {
  background: linear-gradient(135deg, #ef4444, #991b1b) !important;
  box-shadow: 0 6px 20px rgba(239,68,68,0.28) !important;
}
#fixeo-reservation-modal .fxrva-avatar[data-category="informatique"] {
  background: linear-gradient(135deg, #818cf8, #4f46e5) !important;
  box-shadow: 0 6px 20px rgba(129,140,248,0.28) !important;
}

/* ── V2A-RES-D: Coordination strip (below artisan card, Step 1) ─── */
/*
   Replaces "+23 réservations aujourd'hui dans votre zone" (hardcoded fake).
   "✔ Coordonné par Fixeo · Paiement après intervention"
   Real platform promise. Calm. No scarcity.
*/
.fxrva-artisan-coord {
  font-size: 0.64rem !important;
  color: rgba(255,255,255,0.42) !important;
  margin: -6px 0 10px !important;
  padding-left: 2px !important;
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  letter-spacing: 0.01em !important;
}

/* ── V2A-RES-E: Step 1 operational footer ─────────────────────── */
/*
   Replaces: 🔒 SSL 256-bit · 🛡️ 3D Secure · ✅ PCI-DSS · 🔄 Remboursement 14j
   (e-commerce checkout anxiety at wrong moment — user hasn't chosen payment yet)

   Replaces with: ✔ Gratuit & sans engagement · 💳 Paiement après intervention · 💬 Coordination Fixeo
   These are the three most reassuring true signals at this moment.
*/
.fxrva-footer-step1 .fixeo-res-security {
  display: none !important; /* remove old ecommerce badges */
}

.fxrva-op-strip {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 6px 16px !important;
  font-size: 0.64rem !important;
  color: rgba(255,255,255,0.38) !important;
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  padding: 0 !important;
}

/* ── V2A-RES-F: Step 2 honest trust row ──────────────────────── */
/*
   Replaces: ✅ Artisan vérifié · 🛡️ Paiement sécurisé · 🔄 Support Fixeo
   (first item is factually false for all 861 artisans; second is e-commerce framing)

   Replaces with: 💳 Paiement après intervention · 💬 Coordination Fixeo · ✔ Sans engagement
   These are always true, and answer the user's real questions.
*/
.fxrva-trust-row.fixeo-res-trust-row .fixeo-res-trust-icon {
  /* de-emphasize the icon slightly — content > decoration */
  opacity: 0.75 !important;
}

/* ── V2A-RES-G: Success state — WhatsApp primary ──────────────── */
/*
   Replaces: ✅ icon (pink gradient) + "publiée" passive language
             + secondary WA button + equal-weight "Publier autre" button

   Replaces with: green checkmark icon + "prise en charge" active language
                  + PRIMARY WA button (full-width, WA green)
                  + text-only secondary button
*/
.fxrva-success {
  /* inherits .request-success */
}

.fxrva-success-icon {
  background: linear-gradient(135deg, rgba(52,211,153,0.18), rgba(16,185,129,0.14)) !important;
  border-color: rgba(52,211,153,0.22) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.22), 0 0 24px rgba(52,211,153,0.12) !important;
}

.fxrva-success-title {
  color: #fff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  margin: 10px 0 0 !important;
  line-height: 1.35 !important;
}

.fxrva-success-sub {
  font-size: 0.82rem !important;
  color: rgba(255,255,255,0.62) !important;
  line-height: 1.65 !important;
  margin: 6px 0 14px !important;
}

/* WhatsApp PRIMARY button — full-width, WA green */
.fxrva-wa-primary {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  padding: 13px 20px !important;
  border-radius: 14px !important;
  background: rgba(37,211,102,0.12) !important;
  border: 1.5px solid rgba(37,211,102,0.30) !important;
  color: rgba(37,211,102,0.92) !important;
  font-size: 0.90rem !important;
  font-weight: 800 !important;
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  margin-bottom: 8px !important;
}

.fxrva-wa-primary:hover {
  background: rgba(37,211,102,0.18) !important;
  color: rgba(37,211,102,1) !important;
  text-decoration: none !important;
}

.fxrva-wa-ico {
  font-size: 1.1rem !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

/* Secondary — text link, de-emphasised */
.fxrva-new-request {
  background: transparent !important;
  border: none !important;
  color: rgba(255,255,255,0.38) !important;
  font-size: 0.74rem !important;
  font-weight: 600 !important;
  font-family: 'Cairo', 'Tajawal', sans-serif !important;
  cursor: pointer !important;
  padding: 4px 0 !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  width: 100% !important;
  text-align: center !important;
}

.fxrva-new-request:hover {
  color: rgba(255,255,255,0.60) !important;
  background: transparent !important;
}

/* ── V2A-RES-H: Mobile-first adjustments ─────────────────────── */
@media (max-width: 767px) {
  #fixeo-reservation-modal .fxrva-cat-badge {
    width: 18px !important;
    height: 18px !important;
    font-size: 9px !important;
    bottom: -2px !important;
    right: -2px !important;
  }
  .fxrva-op-strip {
    gap: 4px 10px !important;
    font-size: 0.61rem !important;
  }
  .fxrva-wa-primary {
    font-size: 0.86rem !important;
    padding: 12px 16px !important;
  }
  .fxrva-success-title {
    font-size: 1.0rem !important;
  }
  .fxrva-artisan-coord {
    font-size: 0.61rem !important;
  }
}

@media (max-width: 360px) {
  .fxrva-wa-primary {
    font-size: 0.80rem !important;
    gap: 6px !important;
  }
  .fxrva-success-title {
    font-size: 0.94rem !important;
  }
  .fxrva-op-strip {
    font-size: 0.58rem !important;
  }
}

@media (max-width: 320px) {
  .fxrva-wa-primary {
    font-size: 0.75rem !important;
    padding: 11px 12px !important;
  }
  .fxrva-new-request {
    font-size: 0.68rem !important;
  }
}

/* ── V2A-RES-I: Reduced-motion guard ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fxrva-wa-primary {
    transition: none !important;
  }
}

/* ================================================================
   V2-B SUCCESS STATE — Operational Coordination UX
   Appended 2026-05-10 (resv2b-success)

   New elements: .fxrva-coord-steps, .fxrva-success-notice,
                 .fxrva-wa-main-label, .fxrva-wa-sub-label
   Scope: #request-success.fxrva-success
   ================================================================ */

/* ── Coordination steps row ─────────────────────────────────── */
/*
   Three-step visual: Demande enregistrée → Artisan sélectionné → WhatsApp
   Answers "what happens now?" immediately, before the user reads anything.
   Horizontal on desktop/tablet; wraps gracefully on 320px.
*/
.fxrva-coord-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px 0 14px;
  flex-wrap: wrap;
}
.fxrva-coord-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
}
.fxrva-coord-icon {
  font-size: 1.1rem;
  line-height: 1;
}
.fxrva-coord-label {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.52);
  letter-spacing: .02em;
  white-space: nowrap;
}
.fxrva-coord-sep {
  font-size: .75rem;
  color: rgba(255,255,255,.22);
  margin: 0 2px;
  margin-bottom: 14px; /* align with icon row visually */
  align-self: flex-start;
  padding-top: 6px;
}

/* ── Success notice — honest coordination guidance ─────────── */
/*
   Shows the WhatsApp coordination instruction.
   Populated and un-hidden by showSuccess() from REQUEST_COPY.successNotice.
   Positioned between steps and CTA — in the user's natural reading path.
*/
.fxrva-success-notice {
  font-size: .78rem;
  color: rgba(255,255,255,.52);
  line-height: 1.6;
  margin: 0 0 12px;
  padding: 8px 12px;
  background: rgba(37,211,102,.05);
  border: 1px solid rgba(37,211,102,.14);
  border-radius: 10px;
  text-align: center;
}

/* ── WA button inner label ──────────────────────────────────── */
/*
   .fxrva-wa-main-label: the visible text inside the WA primary button.
   Populated by showSuccess() from REQUEST_COPY.successWaLabel.
   Allows mode-specific labeling (urgent vs default vs marketplace)
   without changing the button element's identity or event bindings.
*/
.fxrva-wa-main-label {
  flex: 1 1 auto;
  text-align: center;
}

/* ── WA sub-label — contextual action hint ──────────────────── */
/*
   Appears below the primary WA button.
   "Partager une photo ou préciser l'intervention" (default/marketplace)
   "Envoyer ma localisation" (express/urgent)
   Low-emphasis: dims to not compete with primary button.
   Hidden by default — showSuccess() reveals + populates it.
*/
.fxrva-wa-sub-label {
  font-size: .72rem;
  color: rgba(37,211,102,.55);
  text-align: center;
  margin: -4px 0 8px;
  line-height: 1.4;
}

/* ── Mobile adjustments ─────────────────────────────────────── */
@media (max-width: 360px) {
  .fxrva-coord-label {
    font-size: .62rem;
    white-space: normal;
    max-width: 52px;
  }
  .fxrva-coord-sep {
    display: none; /* simplify on very narrow screens */
  }
  .fxrva-success-notice {
    font-size: .72rem;
    padding: 7px 10px;
  }
  .fxrva-wa-sub-label {
    font-size: .68rem;
  }
}
@media (max-width: 320px) {
  .fxrva-coord-steps {
    gap: 4px;
  }
  .fxrva-coord-icon {
    font-size: .95rem;
  }
}

/* ── Reduced-motion guard ────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .fxrva-success-notice,
  .fxrva-wa-sub-label {
    transition: none !important;
  }
}

/* ================================================================
   V2-C — INTERVENTION TIMELINE CONTINUITY
   Appended 2026-05-10 (resv2c-timeline)

   Surfaces:
     .fxv2c-timeline            — full horizontal timeline (confirmation.html)
     .fxv2c-mini                — compact inline timeline (dashboard cards)
   Namespace: .fxv2c-*
   ================================================================ */

/* ── V2-C Full Timeline — confirmation.html ─────────────── */
/*
   Replaces the V2-B .conf-status-row 4-item grid.
   Fully horizontal with connector line on desktop.
   Vertical single-column on mobile ≤ 390px.
   Four states: enregistrée | en coordination | confirmée | terminée.
   State classes: .fxv2c-done (past) | .fxv2c-active (current) | [none] (future)
*/
.fxv2c-timeline {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  position: relative;
  gap: 0;
  margin: 0 0 20px;
  padding: 0 4px;
}

/* Connector line behind all steps */
.fxv2c-timeline::before {
  content: '';
  position: absolute;
  top: 16px; /* vertically centered on the circle */
  left: 20px;
  right: 20px;
  height: 2px;
  background: rgba(255,255,255,.08);
  z-index: 0;
}

/* Progress fill — covers from step 1 to active step */
.fxv2c-timeline::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 20px;
  height: 2px;
  background: linear-gradient(90deg, #20C997, rgba(32,201,151,.4));
  z-index: 0;
  /* Width set per state via modifier classes on the timeline element */
  width: var(--fxv2c-progress, 0%);
  transition: width 0.4s ease-out;
}
/* State 1: just registered */
.fxv2c-timeline[data-state="1"]  { --fxv2c-progress: 0%; }
/* State 2: coordination active */
.fxv2c-timeline[data-state="2"]  { --fxv2c-progress: 33%; }
/* State 3: artisan confirmed */
.fxv2c-timeline[data-state="3"]  { --fxv2c-progress: 66%; }
/* State 4: complete */
.fxv2c-timeline[data-state="4"]  { --fxv2c-progress: 100%; }

.fxv2c-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Circle */
.fxv2c-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.05);
  color: rgba(255,255,255,.3);
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Done: filled green */
.fxv2c-step.fxv2c-done .fxv2c-circle {
  background: rgba(32,201,151,.18);
  border-color: rgba(32,201,151,.45);
  color: #20C997;
}

/* Active: prominent — amber/green gradient ring */
.fxv2c-step.fxv2c-active .fxv2c-circle {
  background: rgba(32,201,151,.1);
  border-color: #20C997;
  color: #20C997;
  box-shadow: 0 0 0 3px rgba(32,201,151,.12);
}

/* Label */
.fxv2c-label {
  font-size: .65rem;
  font-weight: 700;
  color: rgba(255,255,255,.3);
  line-height: 1.35;
  letter-spacing: .02em;
  word-break: break-word;
}
.fxv2c-step.fxv2c-done .fxv2c-label  { color: rgba(32,201,151,.75); }
.fxv2c-step.fxv2c-active .fxv2c-label { color: rgba(255,255,255,.85); }

/* ── V2-C Mini Timeline — dashboard booking cards ─────── */
/*
   Compact horizontal 4-dot row shown below each booking card.
   Does NOT use connector lines — just dots with labels.
   Mobile-safe: wraps cleanly, no overflow.
*/
.fxv2c-mini {
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 8px;
  overflow: hidden;
}
.fxv2c-mini-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 1;
  min-width: 0;
  position: relative;
}
/* Connector line between dots */
.fxv2c-mini-step + .fxv2c-mini-step::before {
  content: '';
  position: absolute;
  top: 5px;
  right: 50%;
  left: -50%;
  height: 1.5px;
  background: rgba(255,255,255,.08);
  z-index: 0;
}
.fxv2c-mini-step.fxv2c-done + .fxv2c-mini-step::before,
.fxv2c-mini-step.fxv2c-done + .fxv2c-mini-step.fxv2c-active::before {
  background: rgba(32,201,151,.3);
}
.fxv2c-mini-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.12);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.fxv2c-mini-step.fxv2c-done  .fxv2c-mini-dot { background: rgba(32,201,151,.6); border-color: #20C997; }
.fxv2c-mini-step.fxv2c-active .fxv2c-mini-dot {
  background: rgba(32,201,151,.2);
  border-color: #20C997;
  box-shadow: 0 0 0 2px rgba(32,201,151,.15);
}
.fxv2c-mini-label {
  font-size: .58rem;
  color: rgba(255,255,255,.28);
  text-align: center;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 52px;
}
.fxv2c-mini-step.fxv2c-done  .fxv2c-mini-label { color: rgba(32,201,151,.6); }
.fxv2c-mini-step.fxv2c-active .fxv2c-mini-label { color: rgba(255,255,255,.72); }

/* ── WhatsApp contextual hint (state-specific) ────────── */
/*
   Shown below the WA button on confirmation.html.
   Content injected by JS based on state.
   Low-emphasis — does not compete with primary WA button.
*/
.fxv2c-wa-context {
  font-size: .72rem;
  color: rgba(37,211,102,.5);
  text-align: center;
  margin: -2px 0 10px;
  line-height: 1.45;
}

/* ── Mobile ≤ 390px — compact circles ─────────────────── */
@media (max-width: 390px) {
  .fxv2c-circle {
    width: 28px;
    height: 28px;
    font-size: .78rem;
  }
  .fxv2c-label {
    font-size: .6rem;
  }
  .fxv2c-timeline::before,
  .fxv2c-timeline::after {
    top: 14px;
  }
}

/* ── Mobile ≤ 360px — hide labels, just dots ──────────── */
@media (max-width: 360px) {
  .fxv2c-label {
    display: none;
  }
  .fxv2c-timeline {
    justify-content: center;
    gap: 12px;
  }
  .fxv2c-timeline::before,
  .fxv2c-timeline::after {
    left: 16px;
    right: 16px;
  }
}

/* ── Mobile ≤ 320px — even tighter circles ────────────── */
@media (max-width: 320px) {
  .fxv2c-circle {
    width: 24px;
    height: 24px;
    font-size: .7rem;
  }
  .fxv2c-mini-label {
    font-size: .52rem;
    max-width: 40px;
  }
}

/* ── Reduced-motion — collapse connector transition ────── */
@media (prefers-reduced-motion: reduce) {
  .fxv2c-timeline::after {
    transition: none !important;
  }
  .fxv2c-circle,
  .fxv2c-mini-dot {
    transition: none !important;
  }
}