/* ==========================================================================
   Area anggota — garis waktu status, instruksi pembayaran, "Beli lagi".
   Memakai token dari style.css; tidak ada warna/ukuran baru yang berdiri sendiri.
   ========================================================================== */

/* --- Garis waktu status ------------------------------------------------- */
.fi-ao-steps {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0;
  margin: 0 0 var(--sp-6);
  padding: 0;
  list-style: none;
  counter-reset: fi-ao;
}

.fi-ao-step {
  position: relative;
  padding-top: 1.85rem;
  text-align: center;
  font-size: .85rem;
  color: var(--muted);
}

/* Garis penghubung antar langkah. Digambar dari titik ke titik, bukan dari tepi
   kolom, supaya tidak menjorok keluar pada langkah pertama dan terakhir. */
.fi-ao-step::before {
  content: "";
  position: absolute;
  top: .56rem;
  left: -50%;
  width: 100%;
  height: 2px;
  background: var(--line);
}
.fi-ao-step:first-child::before { display: none; }
.fi-ao-step.is-done::before,
.fi-ao-step.is-current::before { background: var(--brand-green); }

.fi-ao-step__dot {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--line);
  box-sizing: border-box;
}
.fi-ao-step.is-done .fi-ao-step__dot {
  background: var(--brand-green);
  border-color: var(--brand-green);
}
.fi-ao-step.is-current .fi-ao-step__dot {
  background: var(--paper);
  border-color: var(--brand-green);
  box-shadow: 0 0 0 4px rgba(125, 185, 63, .22);
}

.fi-ao-step__label { display: block; }
.fi-ao-step.is-done .fi-ao-step__label,
.fi-ao-step.is-current .fi-ao-step__label { color: var(--ink); font-weight: 600; }

.fi-ao-step__now {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  font-weight: 600;
  color: var(--brand-green-deep);
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* --- Status akhir (batal / gagal / dikembalikan) ------------------------- */
.fi-ao-terminal {
  display: flex;
  flex-direction: column;
  gap: .2rem;
  margin: 0 0 var(--sp-6);
  padding: .9rem 1.1rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: var(--r-md, 10px);
  background: var(--mist);
}
.fi-ao-terminal strong { color: var(--ink); }
.fi-ao-terminal span   { color: var(--muted); font-size: .9rem; }
.fi-ao-terminal--failed { border-left-color: #b32d2e; }

/* --- Instruksi pembayaran ----------------------------------------------- */
.fi-ao-pay {
  margin: 0 0 var(--sp-6);
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: var(--mist-2);
}
.fi-ao-pay__title { margin: 0 0 .35rem; font-size: 1.05rem; }
.fi-ao-pay__lead  { margin: 0 0 .9rem; color: var(--muted); font-size: .92rem; }

.fi-ao-pay__accounts { margin: 0 0 .9rem; padding: 0; list-style: none; display: grid; gap: .6rem; }

.fi-ao-acc {
  display: grid;
  gap: .1rem;
  padding: .7rem .9rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm, 8px);
}
.fi-ao-acc__bank   { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.fi-ao-acc__number { font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; color: var(--ink); }
.fi-ao-acc__holder { font-size: .86rem; color: var(--muted); }

.fi-ao-pay__warn { margin: 0 0 .9rem; color: #8a5300; font-size: .9rem; }
.fi-ao-pay__after { margin: 0 0 .9rem; font-size: .92rem; color: var(--ink); }

.fi-ao-pay__contact { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; align-items: center; }

/* --- Beli lagi ----------------------------------------------------------- */
.fi-ao-again {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin: var(--sp-5) 0 0;
}
.fi-ao-again__note { color: var(--muted); font-size: .85rem; }

/* --- Ponsel (audit menguji 390 px) --------------------------------------- */
@media (max-width: 600px) {
  /* Garis waktu jadi vertikal: empat label berdampingan tidak terbaca di 390 px. */
  .fi-ao-steps { grid-auto-flow: row; gap: .1rem; }

  .fi-ao-step {
    display: grid;
    grid-template-columns: 1.6rem 1fr;
    align-items: start;
    gap: .15rem .6rem;
    padding: 0 0 .9rem;
    text-align: left;
  }
  .fi-ao-step::before {
    top: 1.15rem;
    left: .52rem;
    width: 2px;
    height: 100%;
  }
  .fi-ao-step:last-child::before { display: none; }
  /* Vertikal, garis menyambung KE BAWAH, jadi yang digambar adalah milik langkah
     sebelumnya — bukan langkah ini seperti pada tata letak mendatar. */
  .fi-ao-step:first-child::before { display: block; }
  .fi-ao-step.is-todo::before     { background: var(--line); }

  .fi-ao-step__dot  { top: .1rem; left: 0; transform: none; grid-row: 1 / span 2; }
  .fi-ao-step__label { grid-column: 2; }
  .fi-ao-step__now   { grid-column: 2; margin-top: 0; }

  .fi-ao-pay__contact .fi-btn { flex: 1 1 100%; text-align: center; }
}