/**
 * Gold Card — signature visual for the Invest Gift Card check & top-up pages.
 * Self-contained: no external fonts/images, system font stacks only
 * (matches the rest of the site's "no external CDN dependencies" policy).
 *
 * Design tokens
 * -------------
 *   --gc-shadow  #4a2f0a  deepest bronze-gold (gradient dark stop, ambient shadow)
 *   --gc-base    #8a651c  base metal
 *   --gc-mid     #d1a13a  mid gold
 *   --gc-bright  #f6d876  bright gold
 *   --gc-foil    #fff6da  foil highlight (near-white warm gold)
 *   --gc-ink     #362204  engraved ink — the text colour sitting ON the gold
 *
 * Display face: system serif (card wordmark + hero balance figure only).
 * Number face:  system monospace, wide tracking (embossed card-number look).
 * Everything else on the page keeps the site's normal sans/green theme —
 * the card is the one deliberate signature; nothing else competes with it.
 */

:root {
  --gc-shadow: #4a2f0a;
  --gc-base:   #8a651c;
  --gc-mid:    #d1a13a;
  --gc-bright: #f6d876;
  --gc-foil:   #fff6da;
  --gc-ink:    #362204;
  --gc-serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', serif;
  --gc-mono:  ui-monospace, 'SF Mono', 'JetBrains Mono', 'Fira Code', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* ══════════════════════════════════════════════════════════════════════
   THE CARD
   ══════════════════════════════════════════════════════════════════════ */

.gc-stage {
  max-width: 640px;
  margin: clamp(20px, 4vw, 32px) 0 0;
  perspective: 1200px;
}

.gold-card {
  position: relative;
  border-radius: clamp(16px, 3vw, 22px);
  padding: clamp(22px, 5vw, 40px) clamp(22px, 5.5vw, 44px);
  overflow: hidden;
  isolation: isolate;
  color: var(--gc-ink);
  min-height: clamp(200px, 42vw, 260px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(16px, 4vw, 28px);

  background:
    linear-gradient(135deg,
      var(--gc-base)   0%,
      var(--gc-mid)   24%,
      var(--gc-bright) 44%,
      var(--gc-foil)   52%,
      var(--gc-bright) 60%,
      var(--gc-mid)   78%,
      var(--gc-base)  100%);
  box-shadow:
    0 2px 0 rgba(255, 246, 218, .5) inset,
    0 -30px 50px rgba(74, 47, 10, .35) inset,
    0 22px 44px -14px rgba(20, 12, 2, .55),
    0 4px 14px rgba(20, 12, 2, .35);
  transition: transform .35s ease, box-shadow .35s ease;
}

/* Fine brushed-metal texture — very low-opacity diagonal hairlines */
.gold-card::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    115deg,
    rgba(255,255,255,.10) 0px,
    rgba(255,255,255,.10) 1px,
    transparent 1px,
    transparent 5px
  );
  mix-blend-mode: overlay;
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}

/* One-time light sweep on load */
.gold-card::after {
  content: '';
  position: absolute; top: -60%; left: -30%;
  width: 45%; height: 220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: rotate(12deg) translateX(-140%);
  animation: gc-sweep 1.8s ease-out .3s 1;
  pointer-events: none;
  z-index: 1;
}
@keyframes gc-sweep {
  to { transform: rotate(12deg) translateX(340%); }
}

@media (hover: hover) {
  .gold-card:hover {
    transform: translateY(-3px);
    box-shadow:
      0 2px 0 rgba(255, 246, 218, .55) inset,
      0 -30px 50px rgba(74, 47, 10, .35) inset,
      0 30px 56px -14px rgba(20, 12, 2, .6),
      0 6px 18px rgba(20, 12, 2, .4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .gold-card::after { animation: none; display: none; }
  .gold-card { transition: none; }
}

/* ── Header row: wordmark + status ─────────────────────────────────── */
.gc-row-top {
  position: relative; z-index: 2;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
}
.gc-brand {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--gc-serif);
  font-size: clamp(12px, 2.6vw, 15px);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.gc-mark {
  width: 15px; height: 15px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gc-shadow), var(--gc-ink));
  transform: rotate(45deg);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset;
}
.gc-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: clamp(11px, 2.2vw, 12px);
  font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(54, 34, 4, .12);
  white-space: nowrap;
}
.gc-status::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%;
  background: #1c8a4a; box-shadow: 0 0 0 3px rgba(28,138,74,.25);
}
.gc-status--blocked::before { background: #b53326; box-shadow: 0 0 0 3px rgba(181,51,38,.25); }

/* ── Chip glyph ─────────────────────────────────────────────────────── */
.gc-chip {
  position: relative; z-index: 2;
  width: clamp(38px, 8vw, 48px); height: clamp(28px, 6vw, 36px);
  border-radius: 6px;
  background: linear-gradient(155deg, #f3e2ae, #c9a54a 45%, #967322);
  box-shadow: 0 1px 0 rgba(255,255,255,.5) inset, 0 1px 3px rgba(0,0,0,.25);
}
.gc-chip::before {
  content: '';
  position: absolute; inset: 22% 14%;
  background:
    linear-gradient(rgba(90,64,16,.55), rgba(90,64,16,.55)) 0 50% / 100% 1.5px no-repeat,
    linear-gradient(rgba(90,64,16,.55), rgba(90,64,16,.55)) 50% 0 / 1.5px 100% no-repeat;
  border: 1.5px solid rgba(90,64,16,.55);
  border-radius: 2px;
}

/* ── Card number, embossed ─────────────────────────────────────────── */
.gc-number {
  position: relative; z-index: 2;
  font-family: var(--gc-mono);
  font-weight: 600;
  font-size: clamp(19px, 5.4vw, 32px);
  letter-spacing: clamp(.03em, .6vw, .1em);
  text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(74,47,10,.35);
  word-break: break-all;
}

/* ── Bottom row: balance + meta ────────────────────────────────────── */
.gc-row-bottom {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.gc-label {
  display: block;
  font-size: clamp(9.5px, 2vw, 10.5px);
  font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(54,34,4,.62);
  margin-bottom: 4px;
}
.gc-balance {
  font-family: var(--gc-serif);
  font-weight: 700;
  font-size: clamp(26px, 8vw, 42px);
  line-height: 1.05;
  letter-spacing: -.01em;
  text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.gc-balance small {
  font-family: var(--gc-mono);
  font-size: .42em;
  font-weight: 600;
  letter-spacing: .06em;
  margin-left: .25em;
  opacity: .75;
}
.gc-meta { text-align: right; }
.gc-meta .gc-label { margin-bottom: 4px; }
.gc-meta-value {
  font-family: var(--gc-mono);
  font-size: clamp(14px, 3.4vw, 17px);
  font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════════════
   STAT STRIP — quiet secondary details under the card (not a competing box)
   ══════════════════════════════════════════════════════════════════════ */
.gc-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: clamp(14px, 3vw, 22px);
  margin-top: clamp(18px, 4vw, 26px);
  padding: clamp(16px, 3.5vw, 22px) clamp(18px, 4vw, 26px);
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.gc-stat-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text3); margin-bottom: 5px;
}
.gc-stat-value {
  font-size: clamp(15px, 3.6vw, 18px);
  font-weight: 700;
  color: var(--text);
  word-break: break-word;
}
.gc-stat-value--accent { color: var(--gc-mid); }

/* ══════════════════════════════════════════════════════════════════════
   ACTIONS — buttons directly tied to the card
   ══════════════════════════════════════════════════════════════════════ */
.gc-actions {
  display: flex; gap: 12px; flex-wrap: wrap;
  margin-top: clamp(16px, 3.5vw, 22px);
}
.gc-btn {
  flex: 1 1 200px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: clamp(13px, 3vw, 16px) 20px;
  font-size: clamp(14px, 3vw, 15.5px);
  font-weight: 700;
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  border: none;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.gc-btn:active { transform: scale(.98); }
.gc-btn--gold {
  color: var(--gc-ink);
  background: linear-gradient(135deg, var(--gc-bright), var(--gc-mid) 60%, var(--gc-base));
  box-shadow: 0 8px 18px -6px rgba(138,101,28,.55), 0 1px 0 rgba(255,255,255,.4) inset;
}
.gc-btn--gold:hover { filter: brightness(1.06); box-shadow: 0 10px 22px -6px rgba(138,101,28,.65), 0 1px 0 rgba(255,255,255,.4) inset; }
.gc-btn--ghost {
  color: var(--text);
  background: var(--bg2);
  border: 1px solid var(--border);
}
.gc-btn--ghost:hover { background: var(--bg3); border-color: var(--gc-mid); }

/* ══════════════════════════════════════════════════════════════════════
   LARGE ADAPTIVE FORMS — search / top-up
   ══════════════════════════════════════════════════════════════════════ */
.gc-form {
  max-width: 640px;
  margin-top: clamp(18px, 4vw, 28px);
  padding: clamp(22px, 5vw, 34px);
  border-radius: 18px;
  background: var(--bg2);
  border: 1px solid var(--border);
}
.gc-form-title {
  font-size: clamp(17px, 3.6vw, 20px);
  font-weight: 800;
  margin: 0 0 clamp(14px, 3vw, 20px);
  display: flex; align-items: center; gap: 10px;
}
.gc-field { margin-bottom: clamp(16px, 3.5vw, 20px); }
.gc-field:last-of-type { margin-bottom: 0; }
.gc-field label {
  display: block;
  font-size: clamp(12.5px, 2.8vw, 13.5px);
  font-weight: 700; letter-spacing: .03em;
  color: var(--text2);
  margin-bottom: 8px;
}
.gc-field .gc-hint {
  font-size: 12px; color: var(--text3); font-weight: 400; letter-spacing: normal;
  display: block; margin-top: 4px;
}
.gc-input, .gc-textarea {
  width: 100%; box-sizing: border-box;
  font-size: clamp(16px, 3.6vw, 18px);
  font-family: var(--gc-mono);
  letter-spacing: .04em;
  padding: clamp(14px, 3.2vw, 17px) clamp(16px, 3.4vw, 18px);
  border-radius: 12px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  color: var(--text);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gc-textarea { font-family: inherit; letter-spacing: normal; font-size: clamp(14.5px, 3.2vw, 16px); resize: vertical; min-height: 90px; }
.gc-input::placeholder, .gc-textarea::placeholder { color: var(--text3); opacity: .8; }
.gc-input:focus, .gc-textarea:focus {
  outline: none;
  border-color: var(--gc-mid);
  box-shadow: 0 0 0 4px rgba(209, 161, 58, .18);
}
.gc-counter { text-align: right; font-size: 11px; color: var(--text3); margin-top: 6px; }

.gc-submit {
  width: 100%;
  margin-top: clamp(18px, 3.5vw, 22px);
  padding: clamp(15px, 3.4vw, 18px);
  font-size: clamp(15px, 3.4vw, 17px);
  font-weight: 800;
  letter-spacing: .02em;
  border: none; border-radius: 13px; cursor: pointer;
  color: var(--gc-ink);
  background: linear-gradient(135deg, var(--gc-bright), var(--gc-mid) 60%, var(--gc-base));
  box-shadow: 0 10px 22px -8px rgba(138,101,28,.6), 0 1px 0 rgba(255,255,255,.4) inset;
  transition: transform .15s ease, filter .15s ease;
}
.gc-submit:hover { filter: brightness(1.05); }
.gc-submit:active { transform: scale(.99); }

/* ══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .gc-row-bottom { align-items: flex-start; }
  .gc-meta { text-align: left; }
  .gc-actions { flex-direction: column; }
  .gc-btn { flex: 1 1 auto; width: 100%; }
}