/* The Deengle loyalty-card visual — used identically by the public card
   viewer and the dashboard's live preview. Colours arrive as CSS custom
   properties set by card-render.js from the business's chosen theme. */

.dg-card {
  --c0: #1D1D1F; --c1: #3A3A3C; --c2: #1D1D1F;
  --c-accent: #0071E3;
  position: relative;
  width: 100%;
  aspect-ratio: 1.586;
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(135deg, var(--c0) 0%, var(--c1) 55%, var(--c2) 100%);
  box-shadow: var(--shadow-card, 0 18px 40px rgba(10, 30, 25, 0.30));
  overflow: hidden;
  container-type: inline-size;
}
.dg-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 72% 10%, rgba(255,255,255,0.20), transparent 55%);
  pointer-events: none;
}

/* Engraved inner ring — the premium-metal detail on every card */
.dg-card::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 15px;
  pointer-events: none;
  z-index: 1;
}

/* ---- Finishes ---------------------------------------------------------
   Thirty procedural surface treatments, layered over any palette with pure
   CSS — 60 palettes × 45 finishes = 2,700 designs, zero image bytes.
   Applied via data-finish on the card (or any preview tile).            */
[data-finish] { position: relative; }
[data-finish]::before { z-index: 1; }
[data-finish="brushed"] { background-blend-mode: normal; }
[data-finish="brushed"]::before {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: repeating-linear-gradient(115deg,
    rgba(255, 255, 255, 0.10) 0 1px, transparent 1px 3px);
}
[data-finish="carbon"]::before {
  border: 1px solid rgba(255, 255, 255, 0.12);
  background:
    conic-gradient(rgba(0, 0, 0, 0.30) 0 25%, transparent 0 50%,
                   rgba(0, 0, 0, 0.30) 0 75%, transparent 0) 0 0 / 9px 9px;
  opacity: 0.7;
}
[data-finish="rays"]::before {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: conic-gradient(from 210deg at 86% 8%,
    rgba(255, 255, 255, 0.14) 0 5deg, transparent 5deg 14deg,
    rgba(255, 255, 255, 0.14) 14deg 19deg, transparent 19deg 28deg,
    rgba(255, 255, 255, 0.14) 28deg 33deg, transparent 33deg 42deg,
    rgba(255, 255, 255, 0.14) 42deg 47deg, transparent 47deg 360deg);
}
[data-finish="waves"]::before {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: repeating-radial-gradient(circle at 115% -15%,
    rgba(255, 255, 255, 0.12) 0 2.5px, transparent 2.5px 26px);
}
[data-finish="dots"]::before {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: radial-gradient(rgba(255, 255, 255, 0.17) 1.6px, transparent 1.9px) 0 0 / 16px 16px;
}
[data-finish="stripe"]::before {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: repeating-linear-gradient(45deg,
    rgba(255, 255, 255, 0.09) 0 20px, transparent 20px 40px);
}
[data-finish="aurora"]::before {
  border: 1px solid rgba(255, 255, 255, 0.14);
  background:
    radial-gradient(120% 90% at 8% 0%, rgba(255, 255, 255, 0.24), transparent 55%),
    radial-gradient(120% 90% at 100% 110%, rgba(0, 0, 0, 0.3), transparent 55%);
}
[data-finish="gloss"]::before {
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: linear-gradient(105deg,
    transparent 38%, rgba(255, 255, 255, 0.28) 48%,
    rgba(255, 255, 255, 0.06) 55%, transparent 66%);
}

/* -- Weaves & lines -- */
[data-finish="pinstripe"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.11) 0 1px, transparent 1px 8px);
}
[data-finish="herringbone"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(55deg,  rgba(255,255,255,0.09) 0 2px, transparent 2px 8px) 0 0 / 22px 100%,
    repeating-linear-gradient(-55deg, rgba(255,255,255,0.09) 0 2px, transparent 2px 8px) 11px 0 / 22px 100%;
  background-blend-mode: screen;
}
[data-finish="chevron"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.10) 25%, transparent 25%) -11px 0 / 22px 22px,
    linear-gradient(225deg, rgba(255,255,255,0.10) 25%, transparent 25%) -11px 0 / 22px 22px,
    linear-gradient(315deg, rgba(255,255,255,0.10) 25%, transparent 25%) 0 0 / 22px 22px,
    linear-gradient(45deg,  rgba(255,255,255,0.10) 25%, transparent 25%) 0 0 / 22px 22px;
}
[data-finish="linen"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 4px);
}
[data-finish="fluted"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,0.12) 0, transparent 9px, rgba(0,0,0,0.10) 18px, transparent 27px);
}

/* -- Grids & tiles -- */
[data-finish="grid"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.08) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 14px);
}
[data-finish="tartan"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.06) 0 7px, transparent 7px 30px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 7px, transparent 7px 30px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.10) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 15px);
}
[data-finish="harlequin"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(45deg,  rgba(0,0,0,0.14) 25%, transparent 25% 75%, rgba(0,0,0,0.14) 75%) 0 0 / 26px 26px,
    linear-gradient(-45deg, rgba(0,0,0,0.14) 25%, transparent 25% 75%, rgba(0,0,0,0.14) 75%) 0 0 / 26px 26px;
}
[data-finish="facet"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-conic-gradient(from 30deg,
    rgba(255,255,255,0.11) 0 120deg, rgba(0,0,0,0.14) 120deg 240deg,
    rgba(255,255,255,0.04) 240deg 360deg) 0 0 / 34px 58px;
}
[data-finish="basketweave"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.07) 0 6px, transparent 6px 12px) 0 0 / 24px 24px,
    repeating-linear-gradient(90deg, rgba(255,255,255,0.07) 0 6px, transparent 6px 12px) 12px 12px / 24px 24px;
}

/* -- Dots & specks -- */
[data-finish="polka"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(rgba(255,255,255,0.12) 4px, transparent 4.6px) 0 0 / 34px 34px,
    radial-gradient(rgba(255,255,255,0.12) 4px, transparent 4.6px) 17px 17px / 34px 34px;
}
[data-finish="stardust"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(rgba(255,255,255,0.20) 1px,   transparent 1.4px) 0 0     / 23px 23px,
    radial-gradient(rgba(255,255,255,0.12) 0.7px, transparent 1px)   9px 14px / 17px 17px,
    radial-gradient(rgba(255,255,255,0.08) 0.6px, transparent 0.9px) 4px 6px  / 11px 11px;
}
[data-finish="bubbles"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle, transparent 5px, rgba(255,255,255,0.11) 5.5px 6.5px, transparent 7px) 0 0 / 28px 28px,
    radial-gradient(circle, transparent 3px, rgba(255,255,255,0.08) 3.5px 4.3px, transparent 4.8px) 14px 14px / 28px 28px;
}
[data-finish="constellation"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(rgba(255,255,255,0.22) 1.3px, transparent 1.7px) 0 0 / 36px 36px,
    radial-gradient(rgba(255,255,255,0.14) 1px, transparent 1.4px) 18px 24px / 36px 36px,
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.03) 0 1px, transparent 1px 18px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.03) 0 1px, transparent 1px 18px);
}

/* -- Circles & curves -- */
[data-finish="rings"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-radial-gradient(circle at 50% 50%,
    rgba(255,255,255,0.10) 0 1.5px, transparent 1.5px 19px);
}
[data-finish="fishscale"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 50% 115%, transparent 8px, rgba(255,255,255,0.10) 8.5px 9.5px, transparent 10px) 0 0 / 18px 13px,
    radial-gradient(circle at 50% 115%, transparent 8px, rgba(255,255,255,0.10) 8.5px 9.5px, transparent 10px) 9px 6.5px / 18px 13px;
}
[data-finish="guilloche"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-radial-gradient(circle at 28% 50%, rgba(255,255,255,0.06) 0 1.5px, transparent 1.5px 15px),
    repeating-radial-gradient(circle at 72% 50%, rgba(255,255,255,0.06) 0 1.5px, transparent 1.5px 15px);
}

/* -- Rays & facets -- */
[data-finish="sunburst"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-conic-gradient(from 8deg at 50% 50%,
    rgba(255,255,255,0.09) 0 4deg, transparent 4deg 13deg);
}
[data-finish="deco"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-radial-gradient(circle at 50% 130%, rgba(255,255,255,0.10) 0 1.5px, transparent 1.5px 9px) 0 0 / 46px 33px,
    repeating-radial-gradient(circle at 50% 130%, rgba(255,255,255,0.10) 0 1.5px, transparent 1.5px 9px) 23px 16.5px / 46px 33px;
}

/* -- Geometry -- */

/* -- Atmospherics -- */
[data-finish="velvet"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(140% 120% at 30% 18%, rgba(255,255,255,0.10), transparent 45%),
    radial-gradient(130% 120% at 82% 92%, rgba(0,0,0,0.35), transparent 60%);
}
[data-finish="marble"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.11) 41%, transparent 45%),
    linear-gradient(99deg,  transparent 60%, rgba(255,255,255,0.07) 63%, transparent 67%),
    linear-gradient(112deg, transparent 20%, rgba(255,255,255,0.05) 23%, transparent 27%),
    radial-gradient(120% 100% at 80% 100%, rgba(0,0,0,0.18), transparent 60%);
}

/* -- Added finishes (v2) — brings the set to 45 (60 palettes = 2,700 designs) -- */
[data-finish="crosshatch"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.08) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 7px);
}
[data-finish="lattice"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.10) 0 1.2px, transparent 1.2px 16px),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.10) 0 1.2px, transparent 1.2px 16px);
}
[data-finish="twill"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-linear-gradient(63deg,
    rgba(255,255,255,0.10) 0 2px, transparent 2px 5px);
}
[data-finish="corduroy"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.10) 0 3px, transparent 3px 10px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.12) 0 1.4px, transparent 1.4px 10px) 5px 0;
}
[data-finish="pindot"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: radial-gradient(rgba(255,255,255,0.16) 0.9px, transparent 1.3px) 0 0 / 8px 8px;
}
[data-finish="waffle"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.09) 0 3px, transparent 3px 13px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.09) 0 3px, transparent 3px 13px);
}
[data-finish="argyle"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(45deg,  rgba(0,0,0,0.14) 25%, transparent 25% 75%, rgba(0,0,0,0.14) 75%) 0 0 / 30px 30px,
    linear-gradient(-45deg, rgba(0,0,0,0.14) 25%, transparent 25% 75%, rgba(0,0,0,0.14) 75%) 0 0 / 30px 30px,
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.10) 0 1px, transparent 1px 30px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.10) 0 1px, transparent 1px 30px);
}
[data-finish="ripple"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background: repeating-radial-gradient(circle at 100% 115%,
    rgba(255,255,255,0.10) 0 1.6px, transparent 1.6px 16px);
}
[data-finish="quilt"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    linear-gradient(45deg,  rgba(0,0,0,0.12) 25%, transparent 25% 75%, rgba(0,0,0,0.12) 75%) 0 0 / 28px 28px,
    linear-gradient(-45deg, rgba(0,0,0,0.12) 25%, transparent 25% 75%, rgba(0,0,0,0.12) 75%) 0 0 / 28px 28px,
    radial-gradient(rgba(255,255,255,0.16) 1.4px, transparent 1.8px) 14px 14px / 28px 28px;
}
[data-finish="mosaic"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    conic-gradient(rgba(0,0,0,0.16) 0 25%, transparent 0 50%, rgba(0,0,0,0.16) 0 75%, transparent 0) 0 0 / 12px 12px,
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.06) 0 0.8px, transparent 0.8px 12px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 0.8px, transparent 0.8px 12px);
}
[data-finish="scallop"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle at 50% 115%, transparent 11px, rgba(255,255,255,0.10) 11.5px 13px, transparent 13.5px) 0 0 / 26px 19px,
    radial-gradient(circle at 50% 115%, transparent 11px, rgba(255,255,255,0.10) 11.5px 13px, transparent 13.5px) 13px 9.5px / 26px 19px;
}
[data-finish="plaid"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.06) 0 5px, transparent 5px 9px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.06) 0 5px, transparent 5px 9px),
    repeating-linear-gradient(0deg,  rgba(0,0,0,0.10) 0 1.5px, transparent 1.5px 18px),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.10) 0 1.5px, transparent 1.5px 18px);
}
[data-finish="denim"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(70deg, rgba(255,255,255,0.08) 0 1.2px, transparent 1.2px 4px),
    repeating-linear-gradient(70deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 4px) 2px 0;
}
[data-finish="pique"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(circle, transparent 2px, rgba(255,255,255,0.11) 2.4px 3.2px, transparent 3.6px) 0 0 / 11px 11px;
}
[data-finish="tweed"]::before {
  border: 1px solid rgba(255,255,255,0.14);
  background:
    repeating-linear-gradient(45deg,  rgba(255,255,255,0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,0.07) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(0deg,   rgba(0,0,0,0.06) 0 0.8px, transparent 0.8px 5px);
}

.dg-card-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 6.5cqw;
  z-index: 2;
}

.dg-card-top {
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Logo as a minted coin: circular, ringed, always a perfect centre-crop
   (the browser resizes to a 512px square before upload — stable for every
   image, tiny to store). */
.dg-card-logo {
  width: 11.5cqw; height: 11.5cqw;
  border-radius: 50%;
  object-fit: cover;
  background: #FFFFFF;
  border: 0.45cqw solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 0.6cqw 1.8cqw rgba(0, 0, 0, 0.35);
  flex: none;
}
.dg-card-name {
  font-weight: 700;
  font-size: 5.4cqw;
  letter-spacing: -0.01em;
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dg-card-live {
  margin-left: auto;
  font-size: 3cqw;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 1.6cqw 3cqw;
  border-radius: 999px;
  background: var(--c-accent);
  flex: none;
}

.dg-card-mid { margin-top: auto; }
.dg-card-big {
  font-size: 13.5cqw;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1;
}
.dg-card-big small {
  font-size: 4.2cqw;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--c-accent);
  vertical-align: 0.5cqw;
  margin-left: 1.4cqw;
}
.dg-card-sub {
  font-size: 3.8cqw;
  opacity: 0.85;
  margin-top: 0.6cqw;
}

/* Stamp track on the card face */
.dg-stamps {
  display: flex;
  gap: 2.2cqw;
  margin-top: 2.6cqw;
  flex-wrap: wrap;
}
.dg-stamp {
  width: 6.6cqw; height: 6.6cqw;
  border-radius: 50%;
  border: 0.55cqw solid rgba(255,255,255,0.45);
  display: grid;
  place-items: center;
  font-size: 3.4cqw;
}
.dg-stamp.filled {
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.dg-card-bottom {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 4.5cqw;
}
.dg-card-field .k {
  display: block;
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.7;
  text-transform: uppercase;
}
.dg-card-field .v {
  font-size: 3.6cqw;
  font-weight: 600;
}

/* ---- Light cards (Silver, Platinum, Pearl, Champagne): dark ink ---- */
.dg-card.dg-light { color: #26272E; }
.dg-card.dg-light::after {
  background: radial-gradient(circle at 72% 10%, rgba(255, 255, 255, 0.6), transparent 55%);
}
.dg-card.dg-light::before { border-color: rgba(0, 0, 0, 0.10); }
.dg-card.dg-light[data-finish]::before { filter: invert(1); opacity: 0.4; }
.dg-card.dg-light .dg-stamp { border-color: rgba(0, 0, 0, 0.30); }
.dg-card.dg-light .dg-stamp.filled { color: #fff; }
.dg-card.dg-light .dg-card-brand { color: #26272E; }
.dg-card.dg-light .dg-card-live { color: #fff; }
.dg-card.dg-light .dg-card-logo {
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: 0 0.6cqw 1.8cqw rgba(0, 0, 0, 0.18);
}

/* The Deengle hallmark — small, centred at the foot of every card */
.dg-card-brand {
  position: absolute;
  left: 50%;
  bottom: 1.9cqw;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 1.3cqw;
  z-index: 2;
  opacity: 0.6;
  color: #fff;
  font-size: 2.6cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
  pointer-events: none;
}
.dg-card-brand img { width: 3.8cqw; height: 3.8cqw; object-fit: contain; }

/* Reward positions on the stamp track */
.dg-stamp.gift { font-size: 7.5cqw; line-height: 1; }