/* ═══════════════════════════════════════════════════════════════════════
   EGNATIA CARD — one component, everywhere (dashboard, cards page, public
   site). Real proportions (85.6 × 53.98mm = 1.586), real chip with its
   contact grid, a holographic patch, embossed numerals, a guilloche
   texture and a proper back with mag stripe, signature panel and CVV.
   Finishes: emerald (debit), gold (Reserve credit), graphite (business).
   ═══════════════════════════════════════════════════════════════════════ */
.egcard {
  --c-ink: #F4F2E9; --c-ink-d: rgba(244,242,233,.72);
  position: relative; aspect-ratio: 1.586; width: 100%; border-radius: 4.2% / 6.7%;
  padding: 6.5% 6.5% 6%; color: var(--c-ink); overflow: hidden; isolation: isolate;
  font-family: "Manrope", -apple-system, sans-serif;
  box-shadow: 0 30px 60px -18px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.12) inset, 0 -1px 0 rgba(0,0,0,.35) inset;
  display: flex; flex-direction: column; justify-content: space-between;
  container-type: inline-size;
}
/* base finish */
.egcard--emerald  { background: linear-gradient(128deg, #052E22 0%, #0A6B4A 38%, #10B981 78%, #4FE0B0 100%); }
.egcard--gold     { background: linear-gradient(128deg, #5C4218 0%, #A8874B 36%, #D8BC7C 70%, #F2E2B4 100%); --c-ink: #1C1408; --c-ink-d: rgba(28,20,8,.68); }
.egcard--graphite { background: linear-gradient(128deg, #0B0F0E 0%, #262C29 42%, #4A5350 78%, #6F7975 100%); }
/* guilloche: fine interlaced curves, very low contrast */
.egcard::before {
  content: ''; position: absolute; inset: 0; z-index: -1; opacity: .16; mix-blend-mode: soft-light;
  background:
    repeating-radial-gradient(circle at 20% 120%, transparent 0 9px, rgba(255,255,255,.7) 9px 10px),
    repeating-radial-gradient(circle at 110% -10%, transparent 0 11px, rgba(255,255,255,.6) 11px 12px);
}
/* light sweep */
.egcard::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 60%, rgba(255,255,255,.10) 100%);
}
.egcard__row { display: flex; align-items: center; justify-content: space-between; gap: 4%; }
.egcard__brand { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 500; font-size: 4.6cqw; letter-spacing: .22em; line-height: 1; }
.egcard__brand small { display: block; font-family: inherit; font-family: "Manrope", sans-serif; font-weight: 500; font-size: 1.9cqw; letter-spacing: .32em; margin-top: 3cqw; color: var(--c-ink-d); }
.egcard__kind { font-weight: 700; font-size: 2.4cqw; letter-spacing: .3em; color: var(--c-ink-d); text-align: right; }
/* chip: gold plate with the ISO contact grid */
.egcard__chip {
  width: 14cqw; height: 10.6cqw; border-radius: 1.6cqw; position: relative;
  background: linear-gradient(135deg, #F3E4B4 0%, #C9A54E 35%, #E9D28C 55%, #A8842E 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 -1px 0 rgba(0,0,0,.3) inset, 0 1px 2px rgba(0,0,0,.35);
}
.egcard__chip::before, .egcard__chip::after { content: ''; position: absolute; background: rgba(60,40,10,.45); }
.egcard__chip::before { left: 33%; right: 33%; top: 0; bottom: 0; border-left: 1px solid rgba(60,40,10,.45); border-right: 1px solid rgba(60,40,10,.45); background: none; }
.egcard__chip::after  { top: 32%; bottom: 32%; left: 0; right: 0; border-top: 1px solid rgba(60,40,10,.45); border-bottom: 1px solid rgba(60,40,10,.45); background: none; }
.egcard__chip i { position: absolute; left: 33%; right: 33%; top: 32%; bottom: 32%; border: 1px solid rgba(60,40,10,.45); border-radius: 1cqw; }
.egcard__wave { width: 6cqw; height: 6cqw; color: var(--c-ink-d); margin-left: 3cqw; }
/* hologram patch */
.egcard__holo {
  width: 9cqw; height: 9cqw; border-radius: 50%; margin-left: auto;
  background: conic-gradient(from 210deg, #fff3, #a8f5d2, #ffd6f0, #cfe6ff, #fff6c4, #a8f5d2, #fff3);
  opacity: .85; box-shadow: 0 0 0 1px rgba(255,255,255,.35) inset; filter: saturate(1.2);
}
/* embossed number */
.egcard__number {
  font-family: "OCR A Std", "Courier New", ui-monospace, monospace; font-size: 6.4cqw; letter-spacing: .12em;
  margin: 0; color: var(--c-ink); text-shadow: 0 1px 0 rgba(255,255,255,.35), 0 -1px 0 rgba(0,0,0,.35);
}
.egcard--gold .egcard__number { text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 -1px 0 rgba(0,0,0,.25); }
.egcard__meta { display: flex; align-items: flex-end; justify-content: space-between; gap: 4%; }
.egcard__label { font-size: 1.7cqw; letter-spacing: .22em; color: var(--c-ink-d); margin: 0 0 1cqw; }
.egcard__holder { font-family: "OCR A Std", "Courier New", ui-monospace, monospace; font-size: 3.6cqw; letter-spacing: .1em; margin: 0; text-shadow: 0 1px 0 rgba(255,255,255,.3), 0 -1px 0 rgba(0,0,0,.3); text-transform: uppercase; }
.egcard__exp { font-family: "OCR A Std", "Courier New", ui-monospace, monospace; font-size: 3.4cqw; letter-spacing: .08em; margin: 0; }
/* scheme marks */
.egcard__scheme { text-align: right; line-height: 1; }
.egcard__visa { font-family: "Arial Black", Arial, sans-serif; font-weight: 900; font-style: italic; font-size: 6.2cqw; letter-spacing: -.02em; color: var(--c-ink); }
.egcard__mc { display: inline-flex; }
.egcard__mc i { width: 7.5cqw; height: 7.5cqw; border-radius: 50%; display: block; }
.egcard__mc i:first-child { background: #EB001B; } .egcard__mc i:last-child { background: #F79E1B; margin-left: -3cqw; mix-blend-mode: multiply; }
.egcard__amex { font-family: Arial, sans-serif; font-weight: 900; font-size: 3.4cqw; letter-spacing: .06em; border: 2px solid currentColor; padding: 1cqw 1.6cqw; }
.egcard__tier { display: block; font-size: 1.6cqw; letter-spacing: .28em; color: var(--c-ink-d); margin-top: 1.4cqw; font-weight: 600; }
/* frozen */
.egcard.is-frozen { filter: grayscale(.6) brightness(.8); }
.egcard.is-frozen .egcard__frost { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-weight: 800; font-size: 4cqw; letter-spacing: .4em; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.6); background: repeating-linear-gradient(-45deg, rgba(255,255,255,.07) 0 8px, transparent 8px 16px); }

/* ─── BACK ────────────────────────────────────────────────────────────── */
.egcard--back { padding: 0; justify-content: flex-start; }
.egcard--back::before, .egcard--back::after { opacity: .1; }
.egcard__stripe { height: 17%; margin-top: 8%; background: linear-gradient(#111, #2b2b2b 40%, #0c0c0c); }
.egcard__backbody { padding: 5% 6.5% 4%; display: flex; flex-direction: column; gap: 3cqw; flex: 1; }
.egcard__sigrow { display: flex; align-items: center; gap: 3cqw; }
.egcard__sig { flex: 1; height: 9cqw; background: repeating-linear-gradient(0deg, #f3efe2 0 2px, #e5dfcf 2px 4px); border-radius: 1cqw; position: relative; overflow: hidden; }
.egcard__sig::after { content: 'AUTHORISED SIGNATURE — NOT VALID UNLESS SIGNED'; position: absolute; left: 2cqw; top: 50%; transform: translateY(-50%); font-size: 1.5cqw; letter-spacing: .12em; color: #7a7266; font-weight: 600; }
.egcard__cvv { background: #fff; color: #0B0F0E; padding: 1.4cqw 2.6cqw; font-family: "OCR A Std", "Courier New", ui-monospace, monospace; font-size: 3.6cqw; letter-spacing: .14em; border-radius: 1cqw; font-weight: 700; }
.egcard__details { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4cqw 4cqw; margin: 0; }
.egcard__details dt { font-size: 1.5cqw; letter-spacing: .18em; color: var(--c-ink-d); text-transform: uppercase; margin: 0 0 .6cqw; }
.egcard__details dd { margin: 0; font-family: ui-monospace, monospace; font-size: 2.3cqw; letter-spacing: .06em; }
.egcard__fine { font-size: 1.55cqw; line-height: 1.5; color: var(--c-ink-d); margin: auto 0 0; }