/* ============================================================
   card.css — for individual customer card pages only
   Full-screen, no site chrome. Theme determined by body class.
   ============================================================ */

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Barlow', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

.card {
  position: relative;
  border-radius: 18px;
  padding: 36px 28px 28px;
  max-width: 420px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pfp {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  font-weight: 900;
  overflow: hidden;
  border: 3px solid;
}
.pfp img { width: 100%; height: 100%; object-fit: cover; }

.nm {
  font-size: 28px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 6px;
  letter-spacing: -0.015em;
}
.rl {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 14px;
}
.tg {
  font-size: 15px;
  text-align: center;
  line-height: 1.55;
  margin-bottom: 28px;
  max-width: 320px;
}

.btn {
  display: block;
  width: 100%;
  padding: 15px 20px;
  border-radius: 11px;
  font-family: 'Barlow', sans-serif;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  margin-bottom: 10px;
  border: none;
  transition: filter 0.15s ease, transform 0.1s ease;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

/* QR text link — quiet secondary action, sits between the 3 main buttons and the footer */
.qr-link {
  display: block;
  margin-top: 14px;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}
.qr-link:hover { opacity: 1; }


.ft {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
}
.ft img { width: 20px; height: 20px; border-radius: 4px; }
.ft span {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}

/* ===== SERIO (light / professional) ===== */
body.theme-serio { background: #F5F1E8; }
.theme-serio .card { background: #FFFFFF; box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.06); }
.theme-serio .pfp { background: #DCE6F2; border-color: #C8D3E1; color: #1F3A5F; }
.theme-serio .nm { color: #111827; }
.theme-serio .rl { color: #C69214; }
.theme-serio .tg { color: #4B5563; }
.theme-serio .btn-primary  { background: #1F3A5F; color: #FFF; }
.theme-serio .btn-fallback { background: #DCE6F2; color: #1F3A5F; }
.theme-serio .btn-proof    { background: transparent; border: 1.5px solid #C8D3E1; color: #4B5563; }
.theme-serio .qr-link      { color: #4B5563; }
.theme-serio .ft { border-top-color: #C8D3E1; }
.theme-serio .ft span { color: #4B5563; opacity: .6; }

/* ===== NATURAL (warm / approachable) ===== */
body.theme-natural { background: #F6F4EF; }
.theme-natural .card { background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,33,43,.04), 0 8px 24px rgba(23,33,43,.06); }
.theme-natural .pfp { background: #DDEAE4; border-color: #C8D8D0; color: #4C7A67; }
.theme-natural .nm { color: #17212B; }
.theme-natural .rl { color: #A98E5F; }
.theme-natural .tg { color: #5B6570; }
.theme-natural .btn-primary  { background: #4C7A67; color: #FFF; }
.theme-natural .btn-fallback { background: #DDEAE4; color: #4C7A67; }
.theme-natural .btn-proof    { background: transparent; border: 1.5px solid #C8D8D0; color: #5B6570; }
.theme-natural .qr-link      { color: #5B6570; }
.theme-natural .ft { border-top-color: #C8D8D0; }
.theme-natural .ft span { color: #5B6570; opacity: .6; }

/* ===== VIVA (dark / bold) ===== */
body.theme-viva { background: #0B0D12; }
.theme-viva .card { background: #161A22; }
.theme-viva .pfp { background: #2B3445; border-color: #3B455A; color: #F7F7F5; }
.theme-viva .nm { color: #F7F7F5; }
.theme-viva .rl { color: #FFD166; }
.theme-viva .tg { color: #C8CED8; }
.theme-viva .btn-primary  { background: #FF6A3D; color: #FFF; }
.theme-viva .btn-fallback { background: #2B3445; color: #F7F7F5; }
.theme-viva .btn-proof    { background: transparent; border: 1.5px solid #3B455A; color: #C8CED8; }
.theme-viva .qr-link      { color: #C8CED8; }
.theme-viva .ft { border-top-color: #3B455A; }
.theme-viva .ft span { color: #C8CED8; opacity: .5; }

/* ===== UNDERGROUND (pure black / minimal) ===== */
body.theme-underground { background: #000; }
.theme-underground .card { background: #0F0F0F; border: 1px solid #1A1A1A; }
.theme-underground .pfp { background: #161616; border-color: #444; color: #E5E5E5; }
.theme-underground .nm { color: #E5E5E5; }
.theme-underground .rl { color: #FFFFFF; }
.theme-underground .tg { color: #AAAAAA; }
.theme-underground .btn-primary  { background: #2A2A2A; color: #E5E5E5; border: 1px solid #555; }
.theme-underground .btn-fallback { background: #161616; color: #E5E5E5; border: 1px solid #444; }
.theme-underground .btn-proof    { background: transparent; border: 1.5px solid #555; color: #AAA; }
.theme-underground .qr-link      { color: #AAA; }
.theme-underground .ft { border-top-color: #333; }
.theme-underground .ft span { color: #AAA; opacity: .5; }

/* ===== VOLCAN (jet black / high gloss) ===== */
body.theme-volcan { background: #080808; }
.theme-volcan .card {
  background: linear-gradient(145deg, #1A1A1A 0%, #0A0A0A 40%, #111 60%, #0D0D0D 100%);
  border: 1px solid #1F1F1F;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px rgba(0,0,0,.6);
  overflow: hidden;
}
.theme-volcan .card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.04) 40%, rgba(255,255,255,0) 100%);
  pointer-events: none;
  border-radius: 16px 16px 0 0;
}
.theme-volcan .card > * { position: relative; z-index: 1; }
.theme-volcan .pfp { background: #1C1C1C; border-color: #333; color: #FFF; }
.theme-volcan .nm { color: #FFF; }
.theme-volcan .rl { color: #FFF; }
.theme-volcan .tg { color: #888; }
.theme-volcan .btn-primary  { background: #FFF; color: #000; }
.theme-volcan .btn-fallback { background: #1C1C1C; color: #FFF; border: 1px solid rgba(255,255,255,.2); }
.theme-volcan .btn-proof    { background: transparent; border: 1.5px solid rgba(255,255,255,.18); color: rgba(255,255,255,.5); }
.theme-volcan .qr-link      { color: rgba(255,255,255,0.6); }
.theme-volcan .ft { border-top-color: #333; }
.theme-volcan .ft span { color: #888; opacity: .6; }

/* "Card pending" overlay if the customer hasn't paid yet — for testing/debugging */
.pending-banner {
  position: fixed;
  top: 0; left: 0; right: 0;
  background: #FFD166;
  color: #0B0D12;
  font-family: 'Barlow', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  padding: 8px 12px;
  z-index: 100;
}