/* Bippo card: Apple Card / Dankort look. Container gets class "bc" from card.js. */
.bc{
  --pc:#1C6B48; --pt:#FFFFFF; --rx:0deg; --ry:0deg; --mx:30%; --my:20%;
  --ta:transparent; --tt:transparent;
  display:grid; gap:10px; perspective:1100px; color:var(--pt); min-width:0; position:relative;
  font-family:"Figtree","Helvetica Neue",Arial,system-ui,sans-serif;
}
.bc-face{
  position:relative; isolation:isolate;
  min-width:0; width:100%; border-radius:22px; padding:20px 20px 16px;
  display:flex; flex-direction:column; gap:14px;
  aspect-ratio:10/13; /* tall like a Wallet pass, grows if needed */
  background:
    radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, #fff 26%, transparent) 0%, transparent 55%),
    radial-gradient(90% 80% at 100% 110%, color-mix(in srgb, #000 38%, transparent) 0%, transparent 60%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 2px, transparent 2px 6px),
    linear-gradient(135deg, color-mix(in srgb, var(--pc) 88%, #fff) 0%, var(--pc) 45%, color-mix(in srgb, var(--pc) 70%, #000) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 1px 2px rgba(0,0,0,.18),
    0 10px 18px -6px color-mix(in srgb, var(--pc) 45%, rgba(0,0,0,.45)),
    0 34px 60px -18px color-mix(in srgb, var(--pc) 55%, rgba(0,0,0,.55));
}

.bc-bg{position:absolute;inset:0;overflow:hidden;border-radius:inherit;z-index:0}
/* Glossy reflection that follows the tilt */
.bc-shine{position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:
    radial-gradient(60% 50% at var(--mx) var(--my), rgba(255,255,255,.30), transparent 60%),
    linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
  mix-blend-mode:soft-light}

.bc-banner{position:absolute;inset:0;z-index:0}
.bc-banner img{width:100%;height:100%;object-fit:cover;display:block}
.bc-banner::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg, color-mix(in srgb,var(--pc) 35%,transparent), color-mix(in srgb,var(--pc) 92%,transparent) 62%)}

.bc-top{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:2}
.bc-brand{display:flex;align-items:center;gap:10px;min-width:0;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.bc-brand b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-logo{width:36px;height:36px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;font-weight:800;
  background:var(--pt);color:var(--pc);box-shadow:0 2px 6px rgba(0,0,0,.25), inset 0 0 0 2px rgba(255,255,255,.4)}
.bc-logo img{width:100%;height:100%;object-fit:cover}
.bc-stats{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;position:relative;z-index:2}
.bc-count{display:flex;align-items:baseline;gap:2px;line-height:1;font-variant-numeric:tabular-nums}
.bc-count b{font-family:"Bricolage Grotesque","Figtree",system-ui,sans-serif;font-size:2.6rem;font-weight:800;letter-spacing:-.04em}
.bc-count span{font-size:1.15rem;font-weight:700;opacity:.7}
.bc-count small{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-left:8px}
.bc-holder{font-size:.85rem;font-weight:600;opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:60%}
.bc-stamps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,2.6%,14px);position:relative;z-index:2;
  padding:clamp(10px,3%,16px);border-radius:16px;
  background:color-mix(in srgb,var(--pt) 9%,transparent);
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--pt) 16%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--pt) 10%,transparent)}
.bc-stamp{aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:hidden;position:relative;color:var(--pc);
  background:color-mix(in srgb,#000 14%,transparent);
  box-shadow:inset 0 2px 5px rgba(0,0,0,.28), inset 0 -1px 0 color-mix(in srgb,var(--pt) 18%,transparent)}
.bc-stamp em{font-style:normal;font-weight:700;font-size:clamp(.7rem,2.4vw,.9rem);color:var(--pt);opacity:.42;font-variant-numeric:tabular-nums}
.bc-stamp.goal{background:color-mix(in srgb,var(--pt) 14%,transparent);box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--pt) 55%,transparent)}
.bc-stamp.goal:not(.on) svg{color:var(--pt);opacity:.85}
.bc-stamp.on{background:radial-gradient(circle at 32% 28%, color-mix(in srgb,var(--pt) 55%,#fff) 0%, var(--pt) 70%);
  box-shadow:0 3px 8px rgba(0,0,0,.28), inset 0 -2px 3px rgba(0,0,0,.14), inset 0 1px 0 color-mix(in srgb,var(--pt) 40%,#fff)}
.bc-theme .bc-stamp.on{color:var(--ti)}
.bc-stamp svg{width:56%;height:56%}
.bc-stamp img{width:100%;height:100%;object-fit:cover}

.bc-foot-row{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:2;margin-top:auto}
.bc-qr{position:relative;z-index:2;align-self:center;display:grid;justify-items:center;gap:4px;background:#fff;color:#111;border-radius:14px;padding:10px;width:min(52%,190px);
  box-shadow:0 6px 16px rgba(0,0,0,.18)}
.bc-qr img,.bc-qr svg{width:100%;height:auto;display:block;image-rendering:pixelated}
.bc-qr small{font-family:"DM Mono",ui-monospace,monospace;font-size:.68rem;letter-spacing:.12em;color:#444}
.bc-reward + .bc-qr,.bc-stamps + .bc-qr{margin-top:auto}
.bc-by{display:inline-flex;align-items:center;gap:5px;font-family:"Bricolage Grotesque","Figtree",system-ui,sans-serif;font-weight:800;
  font-size:.78rem;letter-spacing:-.02em;opacity:.62;white-space:nowrap}
.bc-by i{width:12px;height:12px;border-radius:50%;background:#FFCD38;display:grid;place-items:center;box-shadow:0 1px 2px rgba(0,0,0,.2)}
.bc-by i::after{content:"";width:4px;height:4px;border-radius:50%;background:#10261C}
.bc-reward{display:flex;gap:8px;align-items:center;position:relative;z-index:2;font-size:.88rem;font-weight:600;opacity:.92}
.bc-reward svg{width:18px;height:18px;flex:none}

.bc-full-msg,.bc-bday{position:relative;z-index:2;border-radius:12px;padding:8px 12px;font-weight:700;font-size:.9rem;
  background:color-mix(in srgb,var(--pt) 94%,transparent);color:var(--pc);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.bc-bday{display:flex;gap:8px;align-items:center;font-weight:500}
.bc-bday svg{width:22px;height:22px;flex:none}
.bc-full .bc-face{box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 0 0 3px #FFCD38, 0 34px 60px -18px color-mix(in srgb,var(--pc) 55%,rgba(0,0,0,.55))}

.bc-foot{font-size:.88rem;color:inherit;opacity:.9;padding:0 4px}
.bc > .bc-foot{color:var(--ink,#10261C)}

/* ---------- Themes ---------- */
.bc-theme .bc-face::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(160deg, transparent 40%, color-mix(in srgb,var(--tt) 45%,transparent) 100%)}
.bc-badge{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:.78rem;letter-spacing:.02em;
  padding:5px 10px 5px 8px;border-radius:999px;background:var(--ta);color:#1b1b1b;box-shadow:0 2px 8px rgba(0,0,0,.25);white-space:nowrap}
.bc-badge svg{width:15px;height:15px}
.bc-deco{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bc-flake{position:absolute;width:var(--s);height:var(--s);color:var(--ta);opacity:.35;
  transform:rotate(var(--r))}
.bc-flake svg{width:100%;height:100%;display:block}
.bc-dot{border-radius:2px;width:calc(var(--s) * .5);height:calc(var(--s) * .9);background:var(--ta)}
.bc-dot:nth-child(3n){background:#7bdff2}.bc-dot:nth-child(3n+1){background:#f7aef8}
.bc-t-jul .bc-flake{color:#fff;opacity:.8}
.bc-t-halloween .bc-flake{color:#111;opacity:.45}

/* ---------- Scratch card ---------- */
.bc-scratch{position:relative;overflow:hidden;border-radius:16px}
.bc-foil{position:absolute;inset:0;width:100%;height:100%;z-index:5;cursor:grab;touch-action:none;border-radius:inherit;transition:opacity .5s}
.bc-foil.gone{opacity:0;pointer-events:none}


/* ---------- Finish: flat (clean, no gloss) ---------- */
.bc-f-flat .bc-face{background:var(--pc);
  box-shadow:0 1px 2px rgba(0,0,0,.12), 0 14px 30px -12px color-mix(in srgb,var(--pc) 50%,rgba(0,0,0,.4))}
.bc-f-flat .bc-shine{display:none}
.bc-f-flat .bc-stamps{box-shadow:none}
.bc-f-flat .bc-stamp.on{background:var(--pt);box-shadow:none}
.bc-f-flat .bc-stamp{box-shadow:none;background:color-mix(in srgb,var(--pt) 12%,transparent)}

/* ---------- Finish: glass (inspired by Apple's Liquid Glass) ---------- */
.bc-amb{position:absolute;inset:2% 2%;z-index:0;pointer-events:none;filter:blur(28px);opacity:.9}
.bc-amb i{position:absolute;border-radius:50%}
.bc-amb i:nth-child(1){width:55%;aspect-ratio:1;left:-4%;top:-6%;background:var(--pc)}
.bc-amb i:nth-child(2){width:45%;aspect-ratio:1;right:-2%;top:18%;background:color-mix(in srgb,var(--pc) 45%,#7FD3FF)}
.bc-amb i:nth-child(3){width:50%;aspect-ratio:1;left:30%;bottom:-10%;background:color-mix(in srgb,var(--pc) 50%,#FFC4E1)}
.bc-f-glass .bc-face{
  background:
    linear-gradient(135deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.10) 38%, rgba(255,255,255,.04) 60%, rgba(255,255,255,.16) 100%),
    color-mix(in srgb, var(--pc) 42%, transparent);
  -webkit-backdrop-filter:blur(22px) saturate(180%); backdrop-filter:blur(22px) saturate(180%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 1px 0 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.18),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 -18px 40px -24px rgba(255,255,255,.45),
    0 18px 40px -16px color-mix(in srgb,var(--pc) 55%,rgba(0,0,0,.35));
  text-shadow:0 1px 2px rgba(0,0,0,.18)}
.bc-f-glass .bc-shine{mix-blend-mode:normal;opacity:.7;
  background:radial-gradient(70% 55% at var(--mx) var(--my), rgba(255,255,255,.35), transparent 60%)}
.bc-f-glass .bc-bg{background:linear-gradient(115deg, transparent 20%, rgba(255,255,255,.08) 35%, transparent 50%)}
.bc-f-glass .bc-stamps{background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(255,255,255,.18)}
.bc-f-glass .bc-stamp{background:rgba(255,255,255,.10);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 2px rgba(0,0,0,.12)}
.bc-f-glass .bc-stamp.on{background:radial-gradient(circle at 32% 26%, rgba(255,255,255,.98), rgba(255,255,255,.78) 70%);
  box-shadow:inset 0 1px 0 #fff, inset 0 -3px 6px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.18)}
.bc-f-glass .bc-stamp.on{color:color-mix(in srgb,var(--pc) 72%,#000)}
.bc-f-glass.bc-theme .bc-stamp.on{color:var(--ti)}
.bc-f-glass .bc-logo{box-shadow:0 2px 10px rgba(0,0,0,.18), inset 0 0 0 1.5px rgba(255,255,255,.7)}
.bc-f-glass .bc-full-msg,.bc-f-glass .bc-bday{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

@media (prefers-reduced-motion:reduce){
  .bc-face{animation:none;transition:none}

}