/* ═══════════════════════════════════════════════════════════════════════
   Billing & Usage modal (2026-09-13), per Harding (urgent).
   Colors hardcoded, matching the project's standing palette (#185FA5 blue,
   #1D9E75 teal, #BA7517 amber, #1a1a18 ink, #f5f4f0 surface) -- no CSS
   variables, same rule css/faq-drawer.css follows.
   Centered modal, not a slide-out drawer -- this is a short, glanceable
   summary (plan, balance, recent purchases), not long-form content, so it
   doesn't need the FAQ drawer's drag/resize machinery. Backdrop DOES dim
   here (unlike the FAQ drawer, which Harding deliberately kept undimmed) --
   a billing summary is a focused, modal-style task, not reference material
   to read alongside the diagram.
   ═══════════════════════════════════════════════════════════════════ */
.billing-usage-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(26,26,24,0.55);
  z-index: 9999;
  align-items: center; justify-content: center;
}
.billing-usage-overlay.open { display: flex; }
.billing-usage-panel {
  width: 480px;
  max-width: 92vw;
  max-height: 86vh;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.30), 0 0 0 1px rgba(0,0,0,0.08);
  display: flex; flex-direction: column;
  overflow: hidden;
  font-family: 'Segoe UI', Arial, sans-serif;
}
.billing-usage-header {
  display: flex; align-items: center; justify-content: space-between;
  background: #1a1a18; color: #ffffff;
  padding: 16px 20px;
  flex-shrink: 0;
}
.billing-usage-header h2 {
  font-size: 16px; font-weight: 700; margin: 0;
  display: flex; align-items: center; gap: 8px;
}
.billing-usage-close {
  background: none; border: none; color: #ffffff; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px; opacity: 0.85;
}
.billing-usage-close:hover { opacity: 1; }
.billing-usage-body {
  padding: 20px; overflow-y: auto;
}
.billing-usage-loading, .billing-usage-error {
  color: #6b6a63; font-size: 14px; padding: 20px 0; text-align: center;
}
.billing-usage-error { color: #BA7517; }
.billing-usage-plan {
  display: flex; align-items: center; justify-content: space-between;
  background: #E6F1FB; border-radius: 9px; padding: 14px 16px;
  margin-bottom: 16px;
}
.billing-usage-plan .label { font-size: 12px; color: #6b6a63; margin-bottom: 3px; }
.billing-usage-plan .value { font-size: 17px; font-weight: 700; color: #1a1a18; }
.billing-usage-stats {
  /* 2026-09-14: was 1fr 1fr, for the tickets tile plus a money-balance tile.
     The money tile was removed (see js/billing-usage.js), so a two-column grid
     would leave a dead half. Tickets is the only tile a customer sees. */
  display: grid; grid-template-columns: 1fr; gap: 10px;
  margin-bottom: 18px;
}
.billing-usage-stat {
  background: #f5f4f0; border-radius: 9px; padding: 12px 14px;
}
.billing-usage-stat .num { font-size: 20px; font-weight: 700; color: #1a1a18; }
.billing-usage-stat .lbl { font-size: 12px; color: #6b6a63; margin-top: 2px; }
.billing-usage-nudge {
  background: #FAEEDA; border: 1px solid #BA7517; border-radius: 9px;
  padding: 12px 14px; margin-bottom: 18px;
  font-size: 13.5px; color: #1a1a18;
  display: flex; align-items: center; gap: 10px;
}
.billing-usage-nudge i { color: #BA7517; font-size: 18px; flex-shrink: 0; }
.billing-usage-nudge a { color: #185FA5; font-weight: 700; text-decoration: none; }
.billing-usage-nudge a:hover { text-decoration: underline; }
/* TZ-109 (2026-09-23): zero tickets is red, like the chip behind the modal. */
.billing-usage-nudge--none { background: #FCEBEB; border-color: #E24B4A; color: #791F1F; }
.billing-usage-nudge--none i { color: #A32D2D; }
.billing-usage-history h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  color: #6b6a63; margin: 0 0 10px;
}
.billing-usage-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,0.08);
  font-size: 13.5px;
}
.billing-usage-row:last-child { border-bottom: none; }
.billing-usage-row .product { color: #1a1a18; font-weight: 600; }
.billing-usage-row .date { color: #6b6a63; font-size: 12px; }
.billing-usage-row .tickets { color: #1D9E75; font-weight: 700; white-space: nowrap; }
.billing-usage-empty { color: #6b6a63; font-size: 13.5px; padding: 8px 0; }

/* TZ-195 (2026-09-30): Free Trial opt-in box (js/tz195-consent.js, switch tz195). */
.billing-usage-consent {
  border: 1px solid #d8d6ce; border-radius: 9px;
  padding: 12px 14px; margin-bottom: 18px;
  font-size: 13.5px; color: #1a1a18;
}
.billing-usage-consent-row {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  line-height: 1.4;
}
.billing-usage-consent-row input { margin: 2px 0 0; width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.billing-usage-consent-text { min-width: 0; overflow-wrap: anywhere; }
.billing-usage-consent-note { font-size: 12px; color: #6b6a63; margin: 6px 0 0 26px; line-height: 1.4; }
.billing-usage-consent-status { font-size: 12px; color: #1D9E75; margin: 4px 0 0 26px; min-height: 0; }
.billing-usage-consent-status.is-error { color: #BA7517; }