/* Flow Enhancer - Additions only */
:root {
  --flow-primary: var(--primary, #1b5e20);
  --flow-muted: rgba(0,0,0,0.06);
  --flow-text: var(--foreground, #1f2937);
}
.flow-stepper {
  display: flex;
  gap: .75rem;
  align-items: center;
  padding: .75rem 1rem;
  border: 1px solid var(--flow-muted);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  margin: 1rem auto;
  width: min(1100px, 95%);
  direction: rtl;
  position: sticky;
  top: .5rem;
  z-index: 60;
}
.flow-step {
  display: flex;
  align-items: center;
  gap: .5rem;
  color: #6b7280;
  font-weight: 600;
  white-space: nowrap;
}
.flow-step .dot {
  width: 10px; height: 10px; border-radius: 9999px;
  background: #d1d5db;
  outline: 3px solid transparent;
}
.flow-step.active { color: var(--flow-primary); }
.flow-step.active .dot { background: var(--flow-primary); outline-color: rgba(0,0,0,.10); }
.flow-sep { flex: 1; height: 2px; background: #e5e7eb; border-radius: 9999px; }
.flow-summary {
  width: min(1100px, 95%);
  margin: .25rem auto 1rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
  direction: rtl;
}
.flow-card {
  border: 1px solid var(--flow-muted);
  background: #fff;
  border-radius: 14px;
  padding: .75rem .9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,.05);
}
.flow-card h4 {
  margin: 0 0 .35rem 0;
  font-size: .85rem;
  color: #6b7280;
  font-weight: 600;
}
.flow-card p {
  margin: 0;
  font-size: 1rem;
  color: var(--flow-text);
  font-weight: 700;
  letter-spacing: .2px;
}
@media (max-width: 900px){
  .flow-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 540px){
  .flow-summary { grid-template-columns: 1fr; }
}