/*
 * Luzapay checkout: styles.
 *
 * Rebrand here. Everything below the variables reads from them:
 *   --ink / --panel / --raise   page, card and raised-control backgrounds
 *   --border / --control-line   card hairlines and control outlines
 *   --paper / --muted           main and secondary text
 *   --muted-small               secondary text at 12px and under (4.5:1 contrast)
 *   --accent / --accent-hover   links, focus rings, selected state, success. config.js
 *                               ACCENT sets --accent at run time, and a merchant's own
 *                               colour from the API replaces it (USE_MERCHANT_COLOR).
 *   --accent-small              accent text at 12px and under (4.5:1 contrast)
 *   --button / --button-hover   primary button and selected tab (not merchant-coloured)
 *   --warn / --bad              attention and failure signals
 *   --radius-*                  corner scale (card, controls)
 *   --font / --mono             body text and amounts/addresses/order ids
 * Light theme only.
 */
@font-face {
  font-family: "Inter";
  src: url("fonts/Inter-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/JetBrainsMono-Variable.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #f4f5f7;
  --panel: #ffffff;
  --raise: #f4f5f7;
  --border: #e3e6ea;
  --control-line: #d7dbe0;
  --paper: #1a1d21;
  --muted: #6b7280;
  --muted-small: #5b6270;
  --accent: #0f8a5f;
  --accent-hover: #0c714e;
  --accent-contrast: #ffffff;
  --button: #1a1d21;
  --button-hover: #30353b;
  --warn: #b45309;
  --warn-bg: #fff7e6;
  --bad: #b91c1c;
  --bad-line: #ef4444;
  --radius-card: 12px;
  --radius-control: 8px;
  --radius-small: 4px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color-scheme: light;
}

/* ---- Derived tones (no need to edit) ------------------------------------- */
:root {
  /* A merchant accent gets a matching tint; the brand accent uses its exact one below. */
  --accent-tint: color-mix(in srgb, var(--accent) 10%, #ffffff);
  --accent-small: color-mix(in srgb, var(--accent) 80%, #000000);
  --accent-line: color-mix(in srgb, var(--accent) 55%, transparent);
  --ok: var(--accent);
  --ok-soft: var(--accent-tint);
  --warn-edge: color-mix(in srgb, var(--warn) 35%, transparent);
  --bad-soft: color-mix(in srgb, var(--bad-line) 10%, transparent);
  --bad-edge: color-mix(in srgb, var(--bad-line) 35%, transparent);
}
:root[style*="--accent: #0f8a5f" i] { --accent-tint: #e7f5ef; --accent-small: #0b6e4c; }

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html, body { margin: 0; }

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--paper);
  font: 16px/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Page chrome --------------------------------------------------------- */

/* The merchant header inside the card takes the place of the site header. */
.site-header { display: none; }

.page {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px 16px;
  outline: none;
}
.wrap { width: 100%; max-width: 520px; }

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px 32px;
  color: var(--muted-small);
  font-size: 11px;
}
.site-footer a { color: var(--muted-small); text-decoration: none; }
.site-footer a:hover { color: var(--accent-small); }
.site-links { display: inline-flex; align-items: center; gap: 6px; }
.site-footer .dot { opacity: 0.6; }

/* ---- The card ------------------------------------------------------------ */

.card {
  width: 100%;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 28px;
}

@media (max-width: 559px) {
  .page { align-items: flex-start; padding: 0; background: var(--panel); }
  .card { border: 0; border-radius: 0; padding: 20px 16px 28px; }
  .banner { margin-bottom: 0; border-radius: 0; }
  .site-footer { padding: 16px; background: var(--panel); }
}

h1, h2 { margin: 0; line-height: 1.25; }
h1 { font-size: 18px; font-weight: 600; }
h2 { font-size: 14px; font-weight: 500; }
h1:focus { outline: none; }
p { margin: 8px 0; }

.muted { color: var(--muted); }
.small { font-size: 12px; line-height: 1.6; }
.muted.small, .muted.tiny { color: var(--muted-small); }
.tiny { font-size: 11px; }
.label { font-size: 11px; color: var(--muted-small); }

.banner {
  margin-bottom: 8px;
  border-radius: var(--radius-control);
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}
.banner-test { background: var(--warn-bg); color: var(--warn); }

/* Merchant header: logo and name on the left, order id on the right, way back below. */
.merchant { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.merchant-text { min-width: 0; flex: 1; }
.merchant-label { display: none; }
.merchant-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar { width: 32px; height: 32px; border-radius: var(--radius-control); object-fit: cover; flex-shrink: 0; background: var(--panel); }
.avatar-initial { display: inline-flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--accent); font-size: 14px; font-weight: 600; }
.order-id { flex-shrink: 0; max-width: 45%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12px; color: var(--muted-small); }
.back { order: 1; flex-basis: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted-small); text-decoration: none; transition: color 0.15s; }
.back:hover { color: var(--accent-small); }

.total { margin-top: 24px; }
.total-label { font-size: 12px; color: var(--muted-small); }
.amount { margin-top: 2px; font-family: var(--mono); font-size: 40px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.15; }
.subtotal { margin-top: 4px; font-size: 12px; color: var(--muted-small); }
.product { margin-top: 6px; font-size: 14px; color: var(--muted); }

.section { margin-top: 24px; }
.section-split { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.stack { display: grid; gap: 8px; }
.row { display: flex; align-items: center; gap: 10px; }

.notice { margin: 20px 0 0; border-radius: var(--radius-control); border: 1px solid var(--border); padding: 10px 12px; font-size: 12px; line-height: 1.6; color: var(--muted-small); }
.notice-warn { border-color: transparent; background: var(--warn-bg); color: var(--warn); }

.hint { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; font-size: 12px; line-height: 1.6; color: var(--muted-small); }
.hint svg { flex-shrink: 0; margin-top: 3px; }

/* ---- Segmented control: Card | Crypto ------------------------------------ */

.segmented {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  margin-top: 24px;
  padding: 4px;
  border-radius: var(--radius-control);
  background: var(--raise);
}
.segment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--paper);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.segment[aria-pressed="true"] { background: var(--button); color: #ffffff; }
.segment-save { color: var(--accent-small); font-family: var(--mono); font-size: 12px; }
.segment[aria-pressed="true"] .segment-save { color: var(--accent-tint); }

/* ---- Buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s;
}
.btn:disabled { opacity: 0.5; cursor: progress; }
.btn-primary { background: var(--button); color: #ffffff; }
.btn-primary:hover:not(:disabled) { background: var(--button-hover); }
.btn-ghost { background: transparent; color: var(--paper); border-color: var(--control-line); font-weight: 500; }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent-line); }
.btn-small { width: auto; min-height: 30px; padding: 4px 10px; font-size: 12px; font-weight: 500; border-radius: 6px; }
.btn-inline { width: auto; min-height: 0; padding: 4px 8px; font-size: 12px; font-weight: 500; }
.btn-auto { width: auto; padding: 10px 20px; min-height: 42px; }

.link-btn {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 4px;
  background: none;
  border: 0;
  color: var(--muted-small);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: color 0.15s;
}
.link-btn:hover { color: var(--accent-small); }
.link-btn.inline { display: inline; width: auto; margin: 0; padding: 0; flex-shrink: 0; }

/* Method rows: one per card provider. */
.method {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--paper);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s;
}
.method:hover:not(:disabled) { border-color: var(--accent); }
.method:disabled { opacity: 0.6; cursor: progress; }
.method-text { min-width: 0; flex: 1; }
.method-name { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.method-detail { display: block; font-size: 11px; color: var(--muted-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chevron { flex-shrink: 0; color: var(--muted); transition: color 0.15s; }
.method:hover .chevron { color: var(--accent); }

.badge { flex-shrink: 0; padding: 2px 8px; border-radius: 999px; background: var(--accent-tint); color: var(--accent-small); font-size: 11px; font-weight: 600; white-space: nowrap; }

/* Provider logos and coin icons load from ASSET_BASE (config.js); lettermark
   badges stand in when there is no image or it fails to load. */
.logo-tile { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 6px; background: #fff; overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.logo-tile img { width: 100%; height: 100%; object-fit: contain; display: block; }
.coin-img { display: block; flex-shrink: 0; border-radius: 50%; }

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}
.coin { border-radius: 50%; font-size: 11px; letter-spacing: -0.02em; }
.coin-lg { width: 34px; height: 34px; font-size: 12px; }

/* ---- Coin and network selects -------------------------------------------- */
.picker { display: grid; gap: 12px; }
.select-wrap { position: relative; min-width: 0; }
.select-heading { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 500; color: var(--muted-small); }
.select {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px;
  padding: 9px 12px; border: 1px solid var(--control-line); border-radius: var(--radius-control);
  background: var(--panel); color: var(--paper); font: inherit; text-align: start; cursor: pointer;
  transition: border-color 0.15s;
}
.select:hover:not(:disabled) { border-color: var(--accent); }
.select:disabled { opacity: 0.55; cursor: progress; }
.is-open .select { border-color: var(--accent); }
.select-value { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.select-empty { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; border: 1px dashed var(--control-line); }
.select-text { min-width: 0; flex: 1; }
.select-label { display: block; font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-detail { display: block; font-size: 11px; color: var(--muted-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-caret { flex-shrink: 0; color: var(--muted); transition: transform 0.15s; }
.is-open .select-caret { transform: rotate(180deg); }
.select-list {
  position: absolute; z-index: 50; left: 0; right: 0; top: calc(100% + 6px);
  max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 4px;
  border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--panel);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 10%, transparent);
}
.opens-up .select-list { top: auto; }
.select-option { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.select-option.is-active { background: var(--raise); }
.select-option.is-selected { color: var(--accent); }
.select-tick { flex-shrink: 0; visibility: hidden; }
.is-selected .select-tick { visibility: visible; }

.pill { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px solid var(--border); border-radius: var(--radius-small); font-size: 10px; font-weight: 400; color: var(--muted-small); vertical-align: middle; }

/* Accepted-card marks under the provider rows. Help lives in the page footer. */
.card-marks { display: flex; align-items: center; gap: 6px; }
.card-marks span { display: inline-flex; align-items: center; height: 24px; padding: 0 6px; border-radius: var(--radius-small); background: #fff; font-size: 11px; font-weight: 800; }
.cm-visa { color: #1a1f71; font-style: italic; letter-spacing: -0.02em; }
.cm-amex { background: #1f72cd !important; color: #fff; font-size: 10px !important; }
.foot-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 16px; }
.foot-row .link-btn { display: none; }

/* ---- Form ---------------------------------------------------------------- */

.field { display: grid; gap: 6px; margin-bottom: 16px; font-size: 12px; font-weight: 500; color: var(--muted-small); }
.field input {
  padding: 11px 12px;
  border: 1px solid var(--control-line);
  border-radius: var(--radius-control);
  background: var(--panel);
  color: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.field input[aria-invalid="true"] { border-color: var(--bad-line); box-shadow: 0 0 0 1px var(--bad-line); }
.field-error { color: var(--bad); font-size: 12px; margin: -10px 0 16px; }
.field-error:empty { display: none; }

/* ---- Crypto invoice ------------------------------------------------------ */

.inv-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inv-coin { display: flex; align-items: center; gap: 10px; min-width: 0; }
.inv-title { font-size: 14px; font-weight: 600; }
#inv-expiry { font-family: var(--mono); }
.inv-field { margin-top: 12px; padding: 12px 14px; border-radius: var(--radius-control); background: var(--raise); }
.inv-value { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-top: 4px; }
.crypto-amount { font-family: var(--mono); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; word-break: break-all; }
.address { font-family: var(--mono); font-size: 13px; line-height: 1.5; word-break: break-all; }
.copy { flex-shrink: 0; background: var(--panel); }
.copy.done { color: var(--accent-small); border-color: var(--accent-line); }
.inv-status { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 0 2px; color: var(--muted-small); font-size: 12px; line-height: 1.6; }
.inv-status:empty { display: none; }
.inv-status .spinner { margin-top: 3px; flex-shrink: 0; }
.inv-status.is-ok { color: var(--accent-small); }
.inv-status.is-warn { color: var(--warn); }
.inv-note { margin: 8px 0 0; padding: 0 2px; font-size: 11px; line-height: 1.6; color: var(--muted-small); }
.inv-note:empty { display: none; }
.inv-note.is-accent { color: var(--accent-small); }

.spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, currentColor 25%, transparent);
  border-top-color: currentColor;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin 0.8s linear infinite;
}
.spinner-accent { color: var(--accent); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Outcomes ------------------------------------------------------------ */

.outcome { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.outcome p { margin: 0; }
.outcome-icon { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--accent-tint); color: var(--ok); }
.outcome-box { margin-top: 24px; padding: 12px 16px; border-radius: var(--radius-control); border: 1px solid var(--warn-edge); background: var(--warn-bg); }
.outcome-box h1 { font-size: 16px; display: flex; align-items: center; gap: 8px; }
.outcome-box h1 svg { flex-shrink: 0; color: var(--warn); }
.outcome-box p { margin: 4px 0 0; font-size: 14px; line-height: 1.6; color: var(--muted); }
.outcome-bad { border-color: var(--bad-edge); background: var(--bad-soft); }
.outcome-bad h1 svg { color: var(--bad); }
.outcome-actions { margin-top: 16px; }
.thank-you { font-size: 14px; line-height: 1.6; white-space: pre-line; max-width: 24rem; }

.centered { text-align: center; }
.centered p { color: var(--muted); font-size: 14px; }

.dev-hint { font-size: 12px; line-height: 1.6; background: var(--warn-bg); color: var(--warn) !important; border: 1px dashed var(--warn-edge); border-radius: var(--radius-control); padding: 10px 12px; }
.noscript { text-align: center; padding: 16px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  * { transition: none !important; }
}