/* feat/auctions-v2 (2026-10-06) — the auction card sheet (shared/auction-card.js, Track 2).
   Neon glass, phone-first (375 px wide), every tap target ≥ 44 px, neon fills with BLACK text, no white text on a
   light background, placeholders at ≥ .68 alpha. The sheet links this file itself if the page didn't.
   z-index 9700: above the page and the "Get the app" banner (9400), below the sign-in modal (9999), which can open
   on top of it. */
.aucc-overlay {
  position: fixed; inset: 0; z-index: 9700;
  display: none; align-items: flex-end; justify-content: center;
  background: rgba(4, 4, 8, 0.74);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.aucc-overlay.open { display: flex; }
.aucc-sheet {
  box-sizing: border-box;
  width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: #14141b; color: #f5f5fa;
  border: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 0 40px rgba(0, 200, 255, 0.18), 0 -10px 40px rgba(0, 0, 0, 0.5);
  font-family: var(--font-body, 'Nunito', system-ui, -apple-system, sans-serif);
  animation: aucc-up .22s ease-out;
}
.aucc-sheet *, .aucc-sheet *::before, .aucc-sheet *::after { box-sizing: border-box; }
@media (min-width: 560px) {
  .aucc-overlay { align-items: center; }
  .aucc-sheet { border-radius: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.16); margin: 0 16px; }
}
@keyframes aucc-up { from { transform: translateY(18px); opacity: 0.4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .aucc-sheet { animation: none; } .aucc-btn:active { transform: none; } }

.aucc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.aucc-steps { display: flex; gap: 6px; flex: 1; max-width: 170px; }
.aucc-steps i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.15); }
.aucc-steps i.on { background: #ff2d78; box-shadow: 0 0 8px rgba(255, 45, 120, 0.6); }
.aucc-x {
  min-width: 44px; min-height: 44px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.04);
  color: #f5f5fa; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.aucc-x:focus-visible, .aucc-btn:focus-visible, .aucc-ghost:focus-visible, .aucc-link:focus-visible { outline: 3px solid #00c8ff; outline-offset: 2px; }

.aucc-title {
  font-family: var(--font-display, 'Fredoka One', sans-serif); font-weight: normal;
  font-size: 1.45rem; line-height: 1.15; color: #ffffff; margin: 6px 0 10px;
}
.aucc-p { font-size: 0.95rem; font-weight: 700; line-height: 1.5; color: rgba(245, 245, 250, 0.88); margin: 0 0 12px; }
.aucc-p b { color: #ffffff; }
.aucc-note { font-size: 0.8rem; font-weight: 800; line-height: 1.45; color: rgba(245, 245, 250, 0.78); text-align: center; margin: 10px 0 0; }

/* Neon fill, BLACK text (one brand button), offset shadow. */
.aucc-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 52px; padding: 0 16px; margin: 4px 0 0;
  border: 2px solid #111111; border-radius: 14px; box-shadow: 3px 3px 0 #111111;
  background: #00e676; color: #111111;
  font-family: var(--font-display, 'Fredoka One', sans-serif); font-size: 1.05rem; line-height: 1.1;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.aucc-btn.pink { background: #ff2d78; }
.aucc-btn.cyan { background: #00c8ff; }
.aucc-btn.yellow { background: #ffe600; }
.aucc-btn:active { transform: translateY(2px); box-shadow: 1px 1px 0 #111111; }
.aucc-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: 3px 3px 0 #111111; }
.aucc-btn[hidden], .aucc-field[hidden] { display: none; }
.aucc-ghost {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 48px; padding: 6px 12px; margin: 10px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 14px; background: rgba(255, 255, 255, 0.04);
  color: #ffffff; font-family: inherit; font-size: 0.92rem; font-weight: 900; text-decoration: none; cursor: pointer;
}
.aucc-ghost:disabled { opacity: 0.5; cursor: not-allowed; }
.aucc-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; margin-top: 4px;
  background: none; border: 0; color: #00c8ff; font-family: inherit; font-size: 0.9rem; font-weight: 900;
  text-decoration: underline; cursor: pointer;
}
.aucc-link:disabled { color: rgba(245, 245, 250, 0.74); text-decoration: none; cursor: default; }

.aucc-field { margin: 0 0 12px; }
.aucc-btn + .aucc-field { margin-top: 16px; }
.aucc-label {
  display: block; margin-bottom: 6px;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(245, 245, 250, 0.8);
}
.aucc-input {
  width: 100%; min-height: 52px; padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.26); border-radius: 12px; background: #0b0b10; color: #ffffff;
  font-family: inherit; font-size: 16px; font-weight: 800;   /* 16 px: iOS never zooms the page */
}
.aucc-input.code { font-size: 1.5rem; letter-spacing: 0.3em; text-align: center; }
.aucc-input::placeholder { color: rgba(245, 245, 250, 0.7); -webkit-text-fill-color: rgba(245, 245, 250, 0.7); opacity: 1; }
.aucc-input:focus { outline: none; border-color: #00c8ff; box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.25); }

.aucc-stripe { min-height: 110px; margin: 4px 0 6px; }
.aucc-consent {
  display: flex; gap: 12px; align-items: flex-start; margin: 12px 0;
  padding: 12px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 14px; background: rgba(255, 255, 255, 0.04);
  font-size: 0.84rem; font-weight: 700; line-height: 1.5; color: rgba(245, 245, 250, 0.9); cursor: pointer;
}
.aucc-consent input { width: 24px; height: 24px; flex: none; margin: 1px 0 0; accent-color: #00e676; cursor: pointer; }
.aucc-err { min-height: 1.2em; margin: 10px 0 0; font-size: 0.9rem; font-weight: 800; line-height: 1.45; color: #ff8fb5; }
.aucc-err:empty { margin: 0; min-height: 0; }

.aucc-test { margin-top: 14px; padding: 12px; border: 1px dashed rgba(255, 230, 0, 0.6); border-radius: 14px; background: rgba(255, 230, 0, 0.06); }
.aucc-test .aucc-label { color: #ffe600; }
.aucc-test .aucc-note { text-align: left; margin: 0 0 8px; }
.aucc-row { display: flex; gap: 8px; flex-wrap: wrap; }
.aucc-row > .aucc-ghost { flex: 1 1 130px; margin: 0; }

.aucc-done { text-align: center; }
.aucc-big { font-size: 2.6rem; line-height: 1; margin: 4px 0 10px; }