/* Payment UI: crypto panel on the order-received page, contact buttons, and the
   "How to pay" guide pages. Uses the Herbarium tokens from herbarium.css. */

.omm-contact-row { display: flex; gap: var(--space-2); flex-wrap: wrap; align-items: center; }

.omm-wa-btn,
.omm-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding: .85em 1.4em;
  cursor: pointer;
}
.omm-wa-btn { background: var(--omm-moss); color: var(--omm-paper) !important; border: 2px solid var(--omm-moss); }
.omm-wa-btn:hover { background: var(--omm-rust); border-color: var(--omm-rust); }
.omm-btn-ghost { background: transparent; color: var(--omm-ink) !important; border: 2px solid var(--omm-ink); }
.omm-btn-ghost:hover { color: var(--omm-rust) !important; border-color: var(--omm-rust); }

/* ---- crypto panel ---- */
.omm-crypto-panel {
  max-width: 780px;
  margin: var(--space-5) auto;
  padding: var(--space-4);
  background: var(--omm-paper-warm);
  position: relative;
}
.omm-crypto-panel::before,
.omm-crypto-panel::after { content: ''; position: absolute; width: 14px; height: 14px; pointer-events: none; }
.omm-crypto-panel::before { top: 6px; left: 6px; border-top: 2px solid var(--omm-ink); border-left: 2px solid var(--omm-ink); }
.omm-crypto-panel::after { bottom: 6px; right: 6px; border-bottom: 2px solid var(--omm-ink); border-right: 2px solid var(--omm-ink); }

.omm-crypto-panel__title { font-family: var(--font-display); margin: 0 0 .75rem; }
.omm-crypto-panel__lede { color: var(--omm-ink-soft); margin: 0 0 1rem; }
.omm-crypto-panel__warning {
  background: var(--omm-paper);
  border: 2px solid var(--omm-rust);
  color: var(--omm-ink);
  padding: .75rem 1rem;
  font-size: .9rem;
  margin: 0 0 1.5rem;
}

.omm-crypto-wallets { display: grid; gap: 1rem; margin-bottom: 2rem; }
.omm-crypto-wallet { background: var(--omm-paper); border: 1px solid var(--omm-line); }
.omm-crypto-wallet__head {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem;
  padding: .75rem 1rem; border-bottom: 1px solid var(--omm-line); background: var(--omm-moss-tint);
}
.omm-crypto-wallet__coin { font-family: var(--font-display); font-weight: 700; }
.omm-crypto-wallet__network { font-family: var(--font-mono); font-size: .75rem; color: var(--omm-ink-soft); }
.omm-crypto-wallet__body { display: flex; gap: 1rem; padding: 1rem; align-items: flex-start; flex-wrap: wrap; }
.omm-crypto-wallet__qr { flex: 0 0 auto; width: 120px; height: 120px; background: #fff; padding: 8px; display: flex; align-items: center; justify-content: center; }
.omm-crypto-wallet__qr svg { width: 100%; height: 100%; }
.omm-crypto-wallet__details { flex: 1 1 220px; min-width: 0; }
.omm-crypto-wallet__label {
  display: block; font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--omm-ink-soft); margin: .5rem 0 .25rem;
}
.omm-crypto-wallet__label:first-child { margin-top: 0; }
.omm-crypto-wallet__amount { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 600; margin: 0; }
.omm-crypto-wallet__amount--unknown { font-family: var(--font-body); font-weight: 400; font-size: .85rem; color: var(--omm-rust-dark); }
.omm-crypto-wallet__address-row { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.omm-crypto-wallet__address {
  font-family: var(--font-mono); font-size: .8rem; word-break: break-all;
  background: var(--omm-paper-warm); padding: .5rem .75rem; flex: 1 1 auto;
}
.omm-crypto-copy { padding: .6em 1em; }
.omm-crypto-copy.is-copied { background: var(--omm-moss); border-color: var(--omm-moss); color: var(--omm-paper) !important; }

.omm-crypto-panel__other { background: var(--omm-paper); padding: 1rem; margin-bottom: 1.5rem; }
.omm-crypto-panel__other p { margin: 0 0 .75rem; color: var(--omm-ink-soft); }
.omm-crypto-panel__other p:last-child { margin-bottom: 0; display: flex; gap: .5rem; flex-wrap: wrap; }

.omm-crypto-upload { border-top: 2px solid var(--omm-ink); padding-top: 1.5rem; }
.omm-crypto-upload h3 { font-family: var(--font-display); font-size: 1.15rem; margin: 0 0 .75rem; }
.omm-crypto-upload form { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }
.omm-crypto-upload input[type="file"] { color: var(--omm-ink-soft); }
.omm-crypto-upload__status { margin: .75rem 0 0; font-size: .85rem; }
.omm-crypto-upload__status.is-loading { color: var(--omm-ink-soft); }
.omm-crypto-upload__status.is-success { color: var(--omm-moss); font-weight: 600; }
.omm-crypto-upload__status.is-error { color: var(--omm-rust-dark); font-weight: 600; }

@media (max-width: 480px) {
  .omm-crypto-panel { padding: 1.25rem; }
  .omm-crypto-wallet__body { flex-direction: column; align-items: stretch; }
  .omm-crypto-wallet__qr { align-self: center; }
}

/* ---- "How to pay" guide pages ---- */
.omm-guide { max-width: 820px; margin: var(--space-5) auto; padding: 0 var(--space-3); }
.omm-guide__lede { color: var(--omm-ink-soft); font-size: 1.1rem; max-width: 62ch; }
.omm-guide h2 { margin: var(--space-5) 0 var(--space-2); }
.omm-guide__steps { list-style: none; margin: 0; padding: 0; counter-reset: omm-step; }
.omm-guide__steps li {
  counter-increment: omm-step; position: relative; padding: 0 0 var(--space-3) 3.25rem;
}
.omm-guide__steps li::before {
  content: counter(omm-step, decimal-leading-zero); position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 600; color: var(--omm-rust);
}
.omm-guide__steps h3 { margin: 0 0 .25rem; font-size: 1.1rem; }
.omm-guide__steps p { margin: 0; color: var(--omm-ink-soft); }
.omm-guide__note { background: var(--omm-paper-warm); border-left: 4px solid var(--omm-rust); padding: var(--space-2) var(--space-3); }