/* ============================================================
   TapTron — Mini App Styles (2026)
   Usa variáveis CSS do Telegram (--tg-theme-*) + safe area insets
   ============================================================ */

:root {
  /* Cores de marca (fallback se tema Telegram não carregar) */
  --tp-brand: #2d8cff;
  --tp-brand-hover: #1a7af0;
  --tp-success: #2ecc71;
  --tp-danger: #ff5252;
  --tp-warning: #ffb300;
  --tp-radius: 16px;
  --tp-spacing: 16px;

  /* Mapeia para as variáveis do Telegram com fallback */
  --tp-bg: var(--tg-theme-bg-color, #ffffff);
  --tp-surface: var(--tg-theme-section-bg-color, #f0f2f5);
  --tp-surface-2: var(--tg-theme-secondary-bg-color, #f7f8fa);
  --tp-text: var(--tg-theme-text-color, #1a1a1a);
  --tp-text-muted: var(--tg-theme-subtitle-text-color, #7a8190);
  --tp-hint: var(--tg-theme-hint-color, #8e96a3);
  --tp-border: var(--tg-theme-section-separator-color, #e0e3e8);
  --tp-accent: var(--tg-theme-accent-text-color, #2d8cff);
  --tp-destructive: var(--tg-theme-destructive-text-color, #ff5252);
  --tp-button: var(--tg-theme-button-color, #2d8cff);
  --tp-button-text: var(--tg-theme-button-text-color, #ffffff);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  background: var(--tp-bg);
  color: var(--tp-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  /* Respeita safe area do dispositivo (notch, navegação) */
  padding-top: var(--tg-safe-area-inset-top, 0px);
  padding-bottom: var(--tg-safe-area-inset-bottom, 0px);
  padding-left: var(--tg-safe-area-inset-left, 0px);
  padding-right: var(--tg-safe-area-inset-right, 0px);
}

#app {
  max-width: 500px;
  margin: 0 auto;
  padding: var(--tp-spacing);
  /* Espaço extra para o MainButton nativo embaixo */
  padding-bottom: calc(var(--tp-spacing) + var(--tg-content-safe-area-inset-bottom, 0px));
}

/* ===== Splash ===== */
.splash {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 70vh; text-align: center;
}
.splash .logo { font-size: 56px; margin-bottom: 12px; }
.splash h1 { font-size: 24px; font-weight: 700; }
.splash p { color: var(--tp-text-muted); margin-top: 8px; font-size: 15px; }

/* ===== Cards ===== */
.card {
  background: var(--tp-surface);
  border-radius: var(--tp-radius);
  padding: var(--tp-spacing);
  margin-bottom: var(--tp-spacing);
}
.card.compact { padding: 12px; }
.card h2 { font-size: 17px; font-weight: 600; margin-bottom: 10px; }

/* ===== Stats grid ===== */
.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: var(--tp-spacing);
}
.stat-card {
  background: var(--tp-surface);
  border-radius: 12px;
  padding: 14px;
}
.stat-card .label { color: var(--tp-text-muted); font-size: 12px; font-weight: 500; }
.stat-card .value { font-size: 24px; font-weight: 700; margin-top: 4px; }
.stat-card .sub { color: var(--tp-text-muted); font-size: 11px; margin-top: 2px; }

/* ===== Amount display ===== */
.amount-display {
  text-align: center;
  padding: 8px 0;
}
.amount-display .amount {
  font-size: 42px; font-weight: 800; letter-spacing: -1px;
}
.amount-display .currency {
  font-size: 18px; color: var(--tp-text-muted); font-weight: 500; margin-left: 4px;
}
.amount-display .description {
  color: var(--tp-text-muted); font-size: 14px; margin-top: 6px;
}

/* ===== QR Code ===== */
.qr-wrap {
  display: flex; justify-content: center; margin: 20px 0;
}
.qr-wrap img {
  width: 260px; height: 260px;
  background: #fff; border-radius: 16px; padding: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

/* ===== Address box ===== */
.address-box {
  background: var(--tp-surface-2);
  border-radius: 12px;
  padding: 14px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  word-break: break-all;
  display: flex; align-items: center; gap: 10px;
  justify-content: space-between;
  cursor: pointer;
  transition: background 0.15s;
}
.address-box:active { background: var(--tp-border); }
.address-box .icon { font-size: 18px; flex-shrink: 0; }

/* ===== Status badge ===== */
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600;
}
.badge-pending  { background: rgba(255,179,0,.15); color: var(--tp-warning); }
.badge-paid     { background: rgba(46,204,113,.15); color: var(--tp-success); }
.badge-partial  { background: rgba(45,140,255,.15); color: var(--tp-accent); }
.badge-expired  { background: rgba(255,82,82,.15); color: var(--tp-danger); }

/* ===== Countdown ===== */
.countdown {
  text-align: center;
  color: var(--tp-text-muted);
  font-size: 14px;
  margin-top: 10px;
  font-variant-numeric: tabular-nums;
}

/* ===== Table ===== */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 10px 6px; text-align: left; border-bottom: 1px solid var(--tp-border); }
th { color: var(--tp-text-muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; }
td code { font-size: 12px; }

/* ===== Inputs ===== */
.label { color: var(--tp-text-muted); font-size: 13px; font-weight: 500; display: block; margin-bottom: 6px; margin-top: 12px; }
.input, select.input {
  width: 100%; padding: 14px;
  border-radius: 12px;
  border: 1px solid var(--tp-border);
  background: var(--tp-surface-2);
  color: var(--tp-text);
  font-size: 16px;
  margin-bottom: 4px;
  transition: border-color 0.15s;
}
.input:focus { outline: none; border-color: var(--tp-brand); }

/* ===== Buttons (custom — o MainButton nativo é usado via API) ===== */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 14px;
  border: none; border-radius: 14px;
  font-size: 16px; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
}
.btn:active { opacity: 0.7; }
.btn-primary { background: var(--tp-button); color: var(--tp-button-text); }
.btn-secondary { background: var(--tp-surface-2); color: var(--tp-text); }
.btn-row { display: flex; gap: 10px; margin-bottom: 10px; }
.btn-row > .btn { flex: 1; }

/* ===== Success screen ===== */
.success-screen {
  text-align: center; padding: 48px 0;
}
.success-screen .icon { font-size: 72px; margin-bottom: 20px; }
.success-screen h2 { font-size: 22px; margin-bottom: 8px; }

/* ===== Empty state ===== */
.empty-state {
  text-align: center; padding: 40px;
  color: var(--tp-text-muted);
}
.empty-state .icon { font-size: 48px; margin-bottom: 12px; }

/* ===== Muted text ===== */
.muted { color: var(--tp-text-muted); }
.hint { color: var(--tp-hint); font-size: 13px; }
.text-center { text-align: center; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }

/* ===== Divider ===== */
.divider { height: 1px; background: var(--tp-border); margin: 16px 0; border: none; }

/* ===== Fee table ===== */
.fee-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--tp-border);
}
.fee-row:last-child { border: none; }
.fee-row .tier { font-weight: 600; font-size: 13px; color: var(--tp-accent); }
.fee-row .range { font-size: 14px; }
.fee-row .fee { font-size: 14px; font-weight: 500; }

/* ===== Tab buttons ===== */
.tab-btn {
  background: var(--tp-surface);
  color: var(--tp-text-muted);
  border: none;
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.tab-btn.active {
  background: var(--tp-button);
  color: var(--tp-button-text);
}
.tab-btn:active { opacity: 0.7; }

/* ===== Amount chips (botões de valor rápido) ===== */
.amount-chip {
  background: var(--tp-surface-2);
  color: var(--tp-text);
  border: 2px solid var(--tp-border);
  border-radius: 12px;
  padding: 14px 8px;
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.amount-chip:active { transform: scale(0.95); }
.amount-chip.selected {
  background: var(--tp-button);
  color: var(--tp-button-text);
  border-color: var(--tp-button);
}