/* Self-contained stylesheet for the standalone storefront — deliberately
   not a link/import back to the main app's style.css (this app has its own
   docroot and may be deployed on a different host/vhost entirely), just the
   same look: same palette, same fonts, trimmed to only the rules this
   app's two pages (index.php, success.php) actually use. */
:root {
  color-scheme: dark;
  font: 16px/1.5 'IBM Plex Sans', -apple-system, sans-serif;
  --ink: #14151a;
  --ink-2: #1b1d24;
  --ink-3: #22252e;
  --brass-rgb: 193, 154, 75;
  --line: rgba(241, 236, 225, .12);
  --line-strong: rgba(241, 236, 225, .22);
  --brass: #c19a4b;
  --brass-light: #d3ab5a;
  --brass-dim: #8a6f38;
  --verdigris-light: #7fa696;
  --verdigris-rgb: 92, 133, 119;
  --muted: #9a9689;
  --text-hi: #f4f1e9;
  --text-lo: #b7b2a4;
  --radius-sm: 3px;
  --radius-md: 4px;
  --radius-lg: 6px;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--ink); color: var(--text-hi); -webkit-font-smoothing: antialiased; }
[hidden] { display: none !important; }
::selection { background: var(--brass); color: var(--ink); }

button {
  border: 1px solid transparent; border-radius: var(--radius-sm); background: var(--brass);
  color: #1a1509; padding: 12px 20px; font-family: 'IBM Plex Mono', monospace; font-size: 13px;
  font-weight: 600; letter-spacing: .03em; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, opacity .15s ease;
}
button:hover { background: var(--brass-light); }
button:active { background: var(--brass-dim); }
button:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
button.secondary { background: transparent; color: var(--text-hi); border: 1px solid var(--line-strong); font-weight: 600; }
button.secondary:hover { border-color: var(--verdigris-light); color: var(--verdigris-light); background: transparent; }
button:disabled { opacity: .4; cursor: default; }

input[type="number"] {
  font: inherit; color: var(--text-hi); background: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="number"]:focus-visible { outline: none; border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass); }

.hint { color: var(--text-lo); font-size: 13px; margin: 10px 0 0; line-height: 1.5; }

/* --- Page shell --- */
.auth-screen {
  min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; position: relative; isolation: isolate;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(var(--brass-rgb), .08) 0%, transparent 60%),
    radial-gradient(700px 420px at 100% 100%, rgba(var(--verdigris-rgb), .06) 0%, transparent 60%),
    var(--ink);
}
.card { width: min(440px, 100%); padding: 38px 36px; border-radius: var(--radius-lg); background: var(--ink-2); border: 1px solid var(--line); }
.card h1 { margin: 0 0 8px; font-family: 'Newsreader', Georgia, serif; font-weight: 500; font-style: italic; font-size: 1.65rem; letter-spacing: -.01em; color: var(--text-hi); }
.card p#message { color: var(--text-lo); margin-top: 0; line-height: 1.55; }

#spinner { color: var(--verdigris-light); font-family: 'IBM Plex Mono', monospace; font-size: 13px; font-weight: 600; margin-top: 20px; display: flex; align-items: center; gap: 10px; }
#spinner::before {
  content: ''; width: 16px; height: 16px; border-radius: 50%; flex: none;
  border: 2px solid rgba(var(--verdigris-rgb), .3); border-top-color: var(--verdigris-light); animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* --- Storefront form (index.php) --- */
.store-card #buyForm { margin-top: 26px; }
.store-label { display: block; font-family: 'IBM Plex Mono', monospace; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--text-lo); margin-bottom: 8px; }
.store-amount-row { display: flex; align-items: center; gap: 12px; }
.store-amount-row input[type="range"] { flex: 1 1 auto; accent-color: var(--brass); }
.store-amount-row input[type="number"] { width: 84px; flex: none; font-family: 'IBM Plex Mono', monospace; text-align: right; }
.store-unit { color: var(--text-lo); font-size: 13.5px; flex: none; }
.store-price { margin: 14px 0 20px; font-family: 'Newsreader', Georgia, serif; font-style: italic; font-size: 1.3rem; color: var(--text-hi); }
.store-card button[type="submit"] { width: 100%; }
.store-back { margin: 22px 0 0; font-size: 13.5px; }
.store-back a { color: var(--text-lo); text-decoration: none; }
.store-back a:hover { color: var(--verdigris-light); }

/* --- Result (success.php) --- */
.store-code-box { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.store-code {
  font-family: 'IBM Plex Mono', monospace; font-size: 1.15rem; font-weight: 600; letter-spacing: 1px;
  color: var(--brass-light); background: var(--ink-3); border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  padding: 14px 16px; margin-bottom: 12px; word-break: break-all;
}
.store-code-box button { width: 100%; }
.store-code-box .hint { margin: 12px 0 0; }