/* Ko Te Šiša — /tester. Nadogradnja na /pretplata/assets/app.css (isti tokeni: gold paleta, kartice, .btn).
   Zlatni glow samo na glavnim dugmadima koraka (.btn iz app.css). */

.page--tester { max-width: 640px; }
.site-footer--tester { max-width: 640px; }

.hero { gap: 12px; padding-top: 4px; }
.hero h1 { font-size: 1.875rem; }

/* ---------- šta ti treba ---------- */

.needs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.needs li { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.needs__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--gold-muted);
  border: 1px solid var(--gold-border);
  color: var(--gold-light);
}
.needs__icon svg { width: 20px; height: 20px; }

.ios-note { border-color: var(--gold-border); }
.ios-note--top { order: -1; }

/* ---------- važna kutija ---------- */

.warn {
  background: var(--gold-muted);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.warn h2 { font-size: 1.125rem; color: var(--gold-light); }
.warn strong { color: var(--gold-light); }

/* ---------- koraci ---------- */

.step { display: flex; flex-direction: column; gap: 14px; }
.step__head { display: flex; align-items: center; gap: 14px; }
.step__num {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--gold-light);
  background: var(--gold-muted);
  border: 1px solid var(--gold-border);
}
.step__head h2 { font-size: 1.25rem; }

.see {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 14px;
  background: var(--field);
  border: 1px solid var(--border);
  border-radius: 12px;
  font-size: .9375rem;
  color: #D9D4C7;
}
.see__label { font-weight: 700; color: var(--gold-light); font-size: .875rem; letter-spacing: .03em; text-transform: uppercase; }

.checklist { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.checklist ul { margin: 6px 0 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 4px; color: #D9D4C7; }

/* ---------- podijeli ---------- */

.share-status { text-align: center; color: var(--success); font-weight: 600; min-height: 1.5em; }

.thanks { color: var(--muted); }

@media (min-width: 768px) {
  .hero h1 { font-size: 2.25rem; }
}