/* ═══════════════════════════════════════════════════════════════
   PawnPilots — gift card visual
   Shared by /gift/ (live preview) and /gift/card.html (the real card).
   Kept in its own file so the two never drift apart.
   ═══════════════════════════════════════════════════════════════ */

.gc-wrap { width: 100%; max-width: 620px; margin: 0 auto; }

.gc {
  position: relative;
  aspect-ratio: 5 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(150deg, #3b2317 0%, #2e1b12 45%, #1d100a 100%);
  box-shadow: 0 20px 50px rgba(46, 27, 18, 0.35);
  color: #fdf6e9;
  font-family: 'Outfit', system-ui, sans-serif;
  container-type: inline-size;
}

/* Everything inside scales with the card width so one design works from a
   320px phone preview up to a full-width print. */
.gc-inner {
  position: absolute; inset: 0;
  padding: 6.5cqw 7cqw;
  display: flex; flex-direction: column; justify-content: space-between;
  border: 0.5cqw solid rgba(196, 134, 46, 0.55);
  border-radius: 18px;
}

.gc::after {
  content: ""; position: absolute; inset: 2.6cqw;
  border: 1px solid rgba(196, 134, 46, 0.28);
  border-radius: 12px; pointer-events: none;
}

/* Faint board texture in the corner */
.gc-tex {
  position: absolute; right: -6cqw; bottom: -8cqw;
  font-size: 34cqw; line-height: 1; opacity: 0.07;
  transform: rotate(-12deg); pointer-events: none; user-select: none;
}

.gc-top { display: flex; align-items: center; justify-content: space-between; gap: 3cqw; }
.gc-brand { display: flex; align-items: center; gap: 1.8cqw; font-weight: 600; font-size: 2.9cqw; letter-spacing: 0.02em; }
.gc-brand img { width: 5.4cqw; height: 5.4cqw; border-radius: 1.4cqw; }
.gc-kicker {
  font-size: 2.2cqw; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase;
  color: #e8b95f; white-space: nowrap;
}

.gc-mid { display: flex; align-items: flex-end; gap: 4cqw; }
.gc-amount { display: flex; align-items: baseline; gap: 2cqw; }
.gc-num {
  font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 800;
  font-size: 17cqw; line-height: 0.85;
  background: linear-gradient(160deg, #f3d489, #c4862e);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.gc-unit { font-size: 3.1cqw; font-weight: 600; line-height: 1.25; color: #f0e2cb; max-width: 22cqw; }
.gc-note {
  flex: 1; font-size: 2.7cqw; line-height: 1.45; font-style: italic;
  color: rgba(253, 246, 233, 0.82); padding-left: 3.4cqw;
  border-left: 1px solid rgba(196, 134, 46, 0.35);
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.gc-note:empty, .gc-note.is-empty { display: none; }

.gc-names { display: flex; gap: 7cqw; }
.gc-names div { min-width: 0; }
.gc-names label {
  display: block; font-size: 1.9cqw; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(232, 185, 95, 0.75); margin-bottom: 0.5cqw;
}
.gc-names strong {
  display: block; font-family: 'Baloo 2', system-ui, sans-serif; font-weight: 700;
  font-size: 4.2cqw; line-height: 1.1; color: #fdf6e9;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 34cqw;
}

.gc-foot {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 3cqw;
  padding-top: 3cqw; border-top: 1px solid rgba(196, 134, 46, 0.3);
}
.gc-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 3.4cqw; font-weight: 700; letter-spacing: 0.12em; color: #e8b95f;
}
.gc-code-label {
  display: block; font-size: 1.8cqw; font-weight: 800; letter-spacing: 0.18em;
  text-transform: uppercase; color: rgba(253, 246, 233, 0.5); margin-bottom: 0.6cqw;
  font-family: 'Outfit', sans-serif;
}
.gc-meta { text-align: right; font-size: 2.1cqw; line-height: 1.5; color: rgba(253, 246, 233, 0.6); }
.gc-meta b { display: block; color: rgba(253, 246, 233, 0.9); font-weight: 600; }