/* Shared by esim-install-guide.html and payment-success.html — single
   source of truth so a content fix never needs to be applied twice. */
.guideToggle { display: flex; gap: 8px; margin: 0 0 14px; }
.guideToggle button {
  border: 1px solid #dde3ea; background: #fff; color: #445; font-weight: 700;
  font-size: 13px; padding: 8px 16px; border-radius: 100px; cursor: pointer;
}
.guideToggle button.active { background: #0f2740; color: #fff; border-color: #0f2740; }
.guideSteps { display: none; flex-direction: column; gap: 10px; }
.guideSteps.active { display: flex; }
.guideStep {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid #e7ecf1; border-radius: 10px; padding: 12px 14px; background: #fafbfc;
  text-align: left;
}
.guideStep.warn { background: #fbeae5; border-color: #e7c3b7; }
.guideStep .num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  background: #0f2740; color: #fff; font-weight: 800; font-size: 11px;
  display: flex; align-items: center; justify-content: center;
}
.guideStep.warn .num { background: #b5432a; }
.guideStep .title { font-weight: 700; font-size: .85rem; color: #16232f; margin: 0 0 2px; }
.guideStep .path { font-size: .75rem; color: #64748b; margin: 0; }
.guideStep .warnText { font-size: .72rem; color: #8a3b27; margin: 6px 0 0; line-height: 1.5; }
.guideNotes { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; display: flex; flex-direction: column; gap: 8px; }
.guideNote { font-size: .78rem; color: #444; line-height: 1.55; text-align: left; }
.guideNote b { color: #16232f; }