/* bcard.css — business cards (bcard.js): 12 professional designs, front and back, sheets with crop marks.
   PDF-safe (jsPDF .html): solid colours only — no gradients, opacity or rgba; decorative shapes are inline SVG. */
@font-face{font-family:'BDSerif';src:url(../vendor/liberation/LiberationSerif-Regular.ttf) format('truetype');font-weight:400}
@font-face{font-family:'BDSerif';src:url(../vendor/liberation/LiberationSerif-Bold.ttf) format('truetype');font-weight:700}
.bc-card{--p:calc(5mm + var(--bl,0mm));position:relative;overflow:hidden;box-sizing:border-box;background:#fff;color:var(--ink);font:6.8pt/1.38 'BDSans','Noto Sans',Arial,sans-serif;padding:var(--p);display:flex;flex-direction:column;justify-content:space-between;text-align:left}
.bc-card.f-serif,.bc-card .f-serif{font-family:'BDSerif',Georgia,'Times New Roman',serif}
.bc-card *{box-sizing:border-box}
.bc-card>*:not(.bc-shape):not(i){position:relative;z-index:1}
.bc-card i{font-style:normal}
.bc-card>i{position:absolute;display:block;z-index:0}
.bc-shape{position:absolute!important;left:0;top:0;width:100%!important;height:100%!important;z-index:0;display:block}
.bc-card .bc-lines svg,.bc-card .bc-lines img{width:2.5mm;height:2.5mm;flex:none;color:var(--c1)}
.bc-card .bc-lines .bc-ic{width:3.3mm;height:3.3mm}
/* brand pieces */
.bc-lg{display:inline-flex;align-items:center;justify-content:center;flex:none}
.bc-logo{max-height:9mm;max-width:22mm;object-fit:contain;display:block}
.bc-lg.lg-light{background:#fff;border-radius:1.2mm;padding:1mm 1.4mm}
.bc-mono{width:8.5mm;height:8.5mm;border-radius:1.6mm;background:var(--c1);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12pt;font-weight:700;flex:none}
.bc-mono.lg-light{background:var(--c2);color:var(--c1)}
.bc-brand{display:flex;flex-direction:column;min-width:0}
.bc-co{font-weight:700;font-size:8pt;letter-spacing:.02em;color:var(--c1);line-height:1.2}
.bc-tag{font-size:5.8pt;color:color-mix(in srgb,var(--ink) 58%,#fff);margin-top:.3mm}
.bc-who{display:flex;flex-direction:column}
.bc-name{display:block;font-size:12pt;line-height:1.12;font-weight:700;color:var(--ink);letter-spacing:-.005em}
.bc-title{display:block;font-size:6.6pt;color:var(--c1);font-weight:600;margin-top:.6mm;letter-spacing:.02em}
.bc-lines{display:grid;gap:.9mm}
.bc-lines span{display:flex;align-items:center;gap:1.6mm;min-width:0}
.bc-lines span i{overflow-wrap:anywhere}
.bc-lines.r span{flex-direction:row-reverse;text-align:right}
.bc-lines.g2{grid-template-columns:1fr 1fr;column-gap:3mm}
.bc-lab{font-weight:700;color:var(--c1);width:2.4mm;flex:none}
.bc-rule{display:block;width:9mm;height:.45mm;background:var(--c2)}
.bc-dots{display:flex;flex-direction:column;align-items:center;line-height:1.55;max-width:100%}.bc-dots div{display:flex;flex-wrap:wrap;justify-content:center}
/* vertical cards: one contact per line */
.bc-card.v .bc-dots div{flex-direction:column;align-items:center}.bc-card.v .bc-dots b{display:none}.bc-dots span{white-space:nowrap}.bc-dots b{margin:0 1.4mm;color:var(--c2)}
.bc-frame{left:calc(2.6mm + var(--bl,0mm));top:calc(2.6mm + var(--bl,0mm));right:calc(2.6mm + var(--bl,0mm));bottom:calc(2.6mm + var(--bl,0mm));border:.25mm solid var(--c2)}
.bc-qr{position:absolute!important;right:var(--p);bottom:var(--p);width:13.5mm;height:13.5mm;background:#fff;padding:.8mm;border-radius:1mm}
.bc-qr svg,.bc-qr img{width:100%!important;height:100%!important;display:block}

/* 1 Executive — slim brand bar, name bottom-left, contacts right */
.t-executive{padding-left:calc(8.5mm + var(--bl,0mm))}
.t-executive .bc-bar{left:0;top:0;bottom:0;width:calc(2mm + var(--bl,0mm));background:var(--c1);border-top:calc(12mm + var(--bl,0mm)) solid var(--c2)}
.ex-top{display:flex;align-items:center;gap:2.4mm}
.ex-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:3mm}
.t-executive.qf .bc-qr{top:var(--p);bottom:auto}
.t-executive.v .ex-bot{flex-direction:column;align-items:flex-start}.t-executive.v .bc-lines.r span{flex-direction:row;text-align:left}

/* 2 Modern split — colour panel with the brand, contacts with icon discs */
.t-split{flex-direction:row;padding:0}
.t-split .sp-panel{left:0;top:0;bottom:0;width:37%;background:var(--c1)}
.t-split .sp-edge{left:37%;top:0;bottom:0;width:.8mm;background:var(--c2)}
.sp-l{width:37%;padding:var(--p) 3.5mm var(--p) var(--p);display:flex;flex-direction:column;justify-content:center;gap:2.2mm}
.sp-l .bc-co{color:#fff}.sp-l .bc-tag{color:var(--c2)}
.sp-r{flex:1;padding:var(--p) var(--p) var(--p) 5.5mm;display:flex;flex-direction:column;justify-content:center;gap:3.2mm}
.t-split.qf .sp-r{padding-right:calc(var(--p) + 15mm)}
.t-split.v{flex-direction:column}.t-split.v .sp-panel{width:auto;right:0;bottom:auto;height:36%}.t-split.v .sp-edge{left:0;right:0;width:auto;top:36%;bottom:auto;height:.8mm}
.t-split.v .sp-l{width:auto;height:36%;padding:var(--p)}.t-split.v .sp-r{padding:5mm var(--p) var(--p)}

/* 3 Geometric — layered angled shapes */
.t-geometric{flex-direction:row;justify-content:space-between;align-items:stretch}
.ge-l{width:54%;display:flex;flex-direction:column;justify-content:center;gap:2.4mm}
.ge-r{width:32%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.8mm;text-align:center}
.ge-r .bc-co{color:#fff}.ge-r .bc-tag{color:var(--c2)}
.t-geometric.qf .ge-r{justify-content:flex-start}
.t-geometric.v{flex-direction:column}.t-geometric.v .ge-l{width:auto;justify-content:flex-start;gap:3mm}.t-geometric.v .ge-r{width:auto;flex-direction:row;justify-content:flex-start;text-align:left;margin-bottom:-1mm}

/* 4 Luxury — dark card, fine gold frame, serif name */
.t-luxury{background:var(--c1);color:#e5e7eb;align-items:center;justify-content:center}
.lx{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.3mm;max-width:100%;padding:0 3mm}
.lx .bc-co{color:var(--c2);font-size:5.8pt;font-weight:700;letter-spacing:.32em;text-transform:uppercase}
.lx .bc-name{color:#fff;font-size:14pt;font-weight:400;letter-spacing:.03em;margin-top:.6mm}
.lx .bc-title{color:var(--c2);font-size:5.4pt;letter-spacing:.24em;text-transform:uppercase;margin:0}
.bc-orn{width:22mm;height:2.2mm;margin:.8mm 0}
.lx .bc-dots{color:#e5e7eb;font-size:5.8pt}
.t-luxury.qf .bc-qr{right:calc(4.2mm + var(--bl,0mm));bottom:calc(4.2mm + var(--bl,0mm));width:11mm;height:11mm}

/* 5 Wave — layered curves along the bottom */
.t-wave{padding-bottom:calc(12mm + var(--bl,0mm))}
.wv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3mm}
.t-wave .bc-name{font-size:12.5pt}
.t-wave.qf .bc-qr{bottom:calc(2.5mm + var(--bl,0mm))}
.t-wave.v{padding-bottom:calc(25mm + var(--bl,0mm))}.t-wave.v .wv-top{flex-direction:column-reverse}

/* 6 Swiss minimal — big name, lettered contact labels */
.sw-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3mm}
.t-swiss .bc-name{font-size:13.5pt;letter-spacing:-.015em}
.t-swiss .bc-title{color:var(--c1);font-size:5.5pt;letter-spacing:.18em;text-transform:uppercase;margin-top:1mm}
.t-swiss .bc-rule{background:var(--c1);width:7mm;margin:-1mm 0 0}
.sw-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:3mm}
.sw-bot .bc-brand{text-align:right;align-items:flex-end}.sw-bot .bc-co{color:var(--ink);font-size:6.6pt;letter-spacing:.06em;text-transform:uppercase}
.t-swiss.qf .sw-top .bc-lg,.t-swiss.qf .sw-top .bc-mono{visibility:hidden}.t-swiss.qf .bc-qr{top:var(--p);bottom:auto}
.t-swiss.v .sw-bot{flex-direction:column;align-items:flex-start}.t-swiss.v .sw-bot .bc-brand{text-align:left;align-items:flex-start}

/* 7 Monogram — circle monogram, divider */
.t-monogram{flex-direction:row;align-items:center;justify-content:flex-start}
.mn-l{position:relative;width:27%;aspect-ratio:1/1;flex:none}
.mn-c{position:absolute;left:0;top:0;width:100%!important;height:100%!important}
.mn-t{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;color:#fff;font:400 22pt 'BDSerif',Georgia,serif}
.mn-img{position:absolute;left:18%;top:18%;right:18%;bottom:18%}.mn-img .bc-logo{max-width:100%;max-height:100%}
.t-monogram .mn-div{position:relative;width:.3mm;align-self:stretch;margin:1mm 4.5mm;background:var(--c1)}
.mn-r{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2.8mm;min-width:0}
.t-monogram.qf .mn-r{padding-right:15mm}
.t-monogram.v{flex-direction:column;justify-content:center}.t-monogram.v .mn-l{width:42%}.t-monogram.v .mn-div{width:30%;height:.3mm;align-self:center;margin:4mm 0}.t-monogram.v .mn-r{flex:none;align-items:center;text-align:center}

/* 8 Corporate — header band with the brand */
.t-corporate{padding:0;justify-content:flex-start}
.t-corporate .cp-band{left:0;right:0;top:0;height:36%;background:var(--c1)}
.t-corporate .cp-line{left:0;right:0;top:36%;height:.7mm;background:var(--c2)}
.cp-top{height:36%;padding:var(--bl,0mm) var(--p) 0;display:flex;align-items:center;gap:2.4mm}
.cp-top .bc-co{color:#fff}.cp-top .bc-tag{color:var(--c2)}
.cp-bot{flex:1;padding:3.6mm var(--p) var(--p);display:flex;flex-direction:column;justify-content:space-between}
.t-corporate.qf .bc-qr{top:calc(2mm + var(--bl,0mm));bottom:auto;width:11mm;height:11mm}
.t-corporate.v .cp-band{height:24%}.t-corporate.v .cp-line{top:24%}.t-corporate.v .cp-top{height:24%}.t-corporate.v .bc-lines.g2{grid-template-columns:1fr}

/* 9 Bold block — colour block holds the contacts */
.t-block{padding:0}
.t-block .bk-band{left:0;right:0;bottom:0;height:42%;background:var(--c1)}
.bk-top{height:58%;padding:var(--p) var(--p) 0;display:flex;justify-content:space-between;align-items:center;gap:3mm}
.t-block .bc-name{font-size:14pt;letter-spacing:-.02em}
.bk-bot{height:42%;padding:0 var(--p) var(--bl,0mm);display:flex;align-items:center}
.bk-bot .bc-lines{width:100%;color:#fff}
.t-block.qf .bk-top .bc-lg,.t-block.qf .bk-top .bc-mono{visibility:hidden}.t-block.qf .bc-qr{top:var(--p);bottom:auto}
.t-block.v .bk-top{flex-direction:column-reverse;align-items:flex-start;justify-content:center}.t-block.v .bc-lines.g2{grid-template-columns:1fr}

/* 10 Diagonal — slanted colour band */
.dg-top{display:flex;justify-content:space-between;align-items:flex-start;gap:3mm}
.dg-bot{display:flex;justify-content:space-between;align-items:flex-end;gap:3mm}
.dg-bot .bc-lines{color:#fff}.t-diagonal .dg-bot .bc-lines svg{color:var(--c2)}
.dg-bot .bc-brand{text-align:right;align-items:flex-end}.dg-bot .bc-co{color:#fff}.dg-bot .bc-tag{color:var(--c2)}
.t-diagonal.qf .dg-top .bc-lg,.t-diagonal.qf .dg-top .bc-mono{visibility:hidden}.t-diagonal.qf .bc-qr{top:var(--p);bottom:auto}
.t-diagonal.v .dg-bot{flex-direction:column;align-items:flex-start}.t-diagonal.v .dg-bot .bc-brand{text-align:left;align-items:flex-start}

/* 11 Elegant — centred serif, fine frame */
.t-elegant{align-items:center;justify-content:center}
.t-elegant .bc-frame{border-color:var(--c1)}
.el{display:flex;flex-direction:column;align-items:center;text-align:center;gap:1.2mm;max-width:100%;padding:0 3mm}
.el .bc-logo{max-height:7mm}.el .bc-mono{width:7mm;height:7mm;font-size:10pt;border-radius:50%}
.el .bc-co{font-size:5.8pt;letter-spacing:.3em;text-transform:uppercase}
.el .bc-name{font-size:13pt;font-weight:400;letter-spacing:.02em;margin-top:.4mm}
.el .bc-title{color:color-mix(in srgb,var(--ink) 55%,#fff);font-size:5.4pt;letter-spacing:.22em;text-transform:uppercase;margin:0}
.el .bc-rule{width:7mm;height:.35mm}
.el .bc-dots{color:color-mix(in srgb,var(--ink) 75%,#fff);font-size:5.9pt;margin-top:.8mm}.el .bc-dots b{color:var(--c1)}
.t-elegant.qf .bc-qr{right:calc(4.2mm + var(--bl,0mm));bottom:calc(4.2mm + var(--bl,0mm));width:11mm;height:11mm}

/* 12 Tech — dark card, dot-grid accent */
.t-tech{background:var(--c1k);color:#cbd5e1}
.t-tech .tc-bar{left:var(--p);top:0;width:12mm;height:calc(1mm + var(--bl,0mm));background:var(--c2)}
.tc-top{display:flex;align-items:center;gap:2.4mm}.tc-top .bc-co{color:#fff}.tc-top .bc-tag{color:var(--c1m)}
.tc-bot{display:flex;flex-direction:column;gap:2.4mm}
.t-tech .bc-name{color:#fff}.t-tech .bc-title{color:var(--c2)}
.t-tech .bc-lines svg{color:var(--c2)}

/* backs — each design's matching back */
.bc-back{background:var(--c1);color:#fff;align-items:center;justify-content:center}
.bc-bk{display:flex;flex-direction:column;align-items:center;gap:2mm;text-align:center}
.bc-back .bc-logo{max-height:13mm;max-width:38mm}
.bc-back .bc-mono{width:13mm;height:13mm;font-size:19pt}
.bc-back .bc-co{color:#fff;font-size:8.5pt;letter-spacing:.2em;text-transform:uppercase}
.bc-back .bc-tag{color:var(--c2);font-size:6.4pt;letter-spacing:.04em}
.bc-back .bc-rule{width:8mm}
.bc-back .bc-qr{position:static!important;width:19mm;height:19mm;padding:1.2mm}
.bc-back .bc-bar{left:0;right:0;bottom:0;height:calc(1.8mm + var(--bl,0mm));background:var(--c2)}
.bc-back .bc-edge{left:0;top:0;bottom:0;width:calc(3mm + var(--bl,0mm));background:var(--c2)}
.bc-back.t-tech{background:var(--c1k)}
.bc-back.t-luxury .bc-co,.bc-back.t-elegant .bc-co{color:var(--c2);letter-spacing:.32em;font-size:7pt}
.bc-back.t-luxury .bc-mono,.bc-back.t-elegant .bc-mono{background:none;border:.3mm solid var(--c2);color:var(--c2);border-radius:50%;font-family:'BDSerif',Georgia,serif;font-weight:400}
.bc-back.t-elegant .bc-frame{border-color:var(--c2)}
.bc-ring{position:absolute!important;left:50%;top:50%;height:84%;width:auto;aspect-ratio:1/1;transform:translate(-50%,-50%);z-index:0}
.bc-back.t-monogram .bc-co{font-size:6.6pt}
.bc-back.bk-light{background:#fff;color:var(--ink)}
.bc-back.bk-light .bc-co{color:var(--ink)}.bc-back.bk-light .bc-tag{color:color-mix(in srgb,var(--ink) 60%,#fff)}
.bc-back.bk-light .bc-mono{background:var(--c1);color:#fff}.bc-back.bk-light .bc-rule{background:var(--c1)}
/* design thumbnails in the editor */
.bc-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;margin-bottom:12px}
.bc-th{display:flex;flex-direction:column;gap:5px;padding:6px;border:1.5px solid var(--border,#e4e9f2);border-radius:10px;background:var(--panel,#fff);cursor:pointer;font:600 12px inherit;font-family:inherit;color:var(--text,#1e2635);text-align:center}
.bc-th:hover{border-color:var(--accent,#4f6ef7)}.bc-th.on{border-color:var(--accent,#4f6ef7);box-shadow:0 0 0 3px var(--accent-soft,#eef1fe);color:var(--accent-dark,#3a52c4)}
.bc-th-box{position:relative;width:100%;contain:size layout paint;overflow:hidden;border-radius:4px;box-shadow:0 1px 4px rgba(15,23,42,.18);background:#fff}
.bc-th-box>.bc-card{position:absolute;left:0;top:0;transform-origin:top left}
/* preview and print */
.bc-stage{background:#e9edf4;border-radius:14px;padding:16px;display:flex;flex-direction:column;align-items:center;gap:6px}
.bc-lbl{font:700 12px system-ui,sans-serif;color:#64748b;text-transform:uppercase;letter-spacing:.06em;align-self:flex-start}
.bc-wrap{position:relative}
.bc-wrap>.bc-card{transform-origin:top left;box-shadow:0 6px 20px rgba(15,23,42,.18);border-radius:1.5mm}
.bc-sheet{position:relative;background:#fff}
.bc-sheet .bc-card{border-radius:0}
.bc-marks i{position:absolute;border-left:.2mm solid #000;border-top:.2mm solid #000}
.bc-bleed{box-sizing:border-box}
.bc-bleed .bc-card{border-radius:0}