:root {
  --green: #0b5d3b;
  --green-deep: #073c26;
  --flow-gold: #d4af37;
  --gold-soft: #e9cd76;
  --cream: #faf7ef;
  --ink: #10241b;
  --flow-muted: #6b7a72;
  --flow-border: #e6e1d3;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'IBM Plex Sans Arabic', 'Noto Kufi Arabic', sans-serif;
}

.flow-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--green-deep);
}

.flow-topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f7f0da;
  font-weight: 700;
  font-size: 14px;
}

.flow-topbar .brand img {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.flow-topbar .back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f7f0da;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.4);
}

.flow-topbar .back-link:hover {
  background: rgba(212, 175, 55, 0.14);
}

.flow-topbar .back-link .arrow {
  color: var(--flow-gold);
  font-weight: 700;
}

/* ---------- Step tracker ---------- */

.step-tracker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  background: #ffffff;
  border-bottom: 1px solid var(--flow-border);
  direction: ltr; /* always 1 -> 2 -> 3 left to right, regardless of page RTL */
}

.step-tracker .dot {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  background: #eee7d3;
  color: var(--flow-muted);
  border: 1.5px solid var(--flow-border);
}

.step-tracker .dot.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.step-tracker .dot.done {
  background: var(--flow-gold);
  color: #fff;
  border-color: var(--flow-gold);
}

.step-tracker .connector {
  width: 34px;
  height: 1.5px;
  background: var(--flow-border);
}