/* =====================================================================
   EgroFlow — cards6630.css
   Business card renderer: shared shape + 5 layout archetypes x 4 palettes.
   Card interior uses a plain default sans font; only the watermark uses Syne.
===================================================================== */

.biz-card{
  --p-a:#5b8cff; --p-b:#8a7bff; --p-ink:#f3f5fa; --p-plate:#0d0f1a;
  position:relative;
  width:350px; height:200px;
  border-radius:18px;
  overflow:hidden;
  background: var(--p-plate);
  color: var(--p-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  box-shadow: 0 24px 60px -22px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  user-select:none;
  flex: 0 0 auto;
}
.biz-card *{ box-sizing:border-box; }

/* palettes -------------------------------------------------- */
.palette-azure{   --p-a:#5b8cff; --p-b:#8a7bff; --p-ink:#f3f5fa; --p-plate:#0d0f1a; }
.palette-emerald{ --p-a:#22d3b6; --p-b:#1fae9a; --p-ink:#f3f5fa; --p-plate:#08130f; }
.palette-amber{   --p-a:#ffb15c; --p-b:#ff7d5c; --p-ink:#241804; --p-plate:#fff4e6; }
.palette-slate{   --p-a:#c7ccdb; --p-b:#8b90a3; --p-ink:#f3f5fa; --p-plate:#101114; }

.bc-bg{ position:absolute; inset:0; z-index:0; }
.bc-content{ position:relative; z-index:2; height:100%; display:flex; flex-direction:column; padding:20px 22px; }
.bc-watermark{
  position:absolute; z-index:3; left:0; right:0; bottom:9px; text-align:center;
  font-family:'Syne', sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.08em;
  text-transform:uppercase; color: var(--p-ink); opacity:0.16; pointer-events:none;
}
.palette-amber .bc-watermark{ opacity:0.20; }

.bc-head{ display:flex; align-items:center; gap:10px; }
.bc-logo{
  width:34px; height:34px; border-radius:9px; object-fit:cover; flex:0 0 auto;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
}
.bc-logo.empty{ display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--p-ink); opacity:.4; }
.bc-name{ font-weight:700; font-size:14.5px; line-height:1.2; letter-spacing:-.01em; }
.bc-name[contenteditable]:focus{ outline:1px dashed var(--p-a); border-radius:3px; }

.bc-body{ margin-top:auto; display:flex; flex-direction:column; gap:4px; }
.bc-row{ display:flex; align-items:flex-start; gap:6px; font-size:9.5px; line-height:1.4; opacity:.92; }
.bc-row svg{ width:10px; height:10px; margin-top:2px; flex:0 0 auto; opacity:.8; }
.bc-addresses{ display:flex; flex-direction:column; gap:2px; }
.bc-addr-label{ font-weight:700; opacity:.65; margin-right:3px; }

/* ----------------------------------------------------------------
   Layout: classic — logo+name top-left, details stacked bottom-left
---------------------------------------------------------------- */
.layout-classic .bc-bg{
  background: linear-gradient(160deg, color-mix(in srgb, var(--p-a) 20%, transparent) 0%, transparent 55%);
}
.layout-classic .bc-bg::after{
  content:''; position:absolute; left:0; top:0; bottom:0; width:5px;
  background: linear-gradient(180deg, var(--p-a), var(--p-b));
}
.layout-classic .bc-content{ padding-left:28px; }

/* ----------------------------------------------------------------
   Layout: centered — logo above name, everything centered
---------------------------------------------------------------- */
.layout-centered .bc-bg{
  background: radial-gradient(220px 140px at 50% -10%, color-mix(in srgb, var(--p-a) 26%, transparent), transparent 70%);
}
.layout-centered .bc-content{ align-items:center; text-align:center; justify-content:center; gap:10px; }
.layout-centered .bc-head{ flex-direction:column; gap:8px; }
.layout-centered .bc-body{ margin-top:6px; align-items:center; }
.layout-centered .bc-row{ justify-content:center; }

/* ----------------------------------------------------------------
   Layout: split — diagonal colour block dividing the card
---------------------------------------------------------------- */
.layout-split .bc-bg{
  background: linear-gradient(115deg, var(--p-a) 0%, var(--p-b) 38%, transparent 38.4%);
  opacity:.94;
}
.layout-split .bc-content{ color:#06070a; }
.layout-split.palette-slate .bc-content,
.layout-split.palette-azure .bc-content,
.layout-split.palette-emerald .bc-content{ color:#06070a; }
.layout-split .bc-content > .bc-body{ color: var(--p-ink); }
.layout-split .bc-head{ width:58%; }
.layout-split .bc-name{ color:#06070a; }
.layout-split .bc-watermark{ color:var(--p-ink); opacity:.22; }

/* ----------------------------------------------------------------
   Layout: corner — colour wedge in the corner, ribbon accent
---------------------------------------------------------------- */
.layout-corner .bc-bg{
  background: transparent;
}
.layout-corner .bc-bg::before{
  content:''; position:absolute; top:-60px; right:-60px; width:180px; height:180px; border-radius:50%;
  background: linear-gradient(135deg, var(--p-a), var(--p-b)); opacity:.9;
}
.layout-corner .bc-bg::after{
  content:''; position:absolute; bottom:-40px; left:-40px; width:120px; height:120px; border-radius:50%;
  background: var(--p-a); opacity:.12;
}
.layout-corner .bc-head{ position:relative; }

/* ----------------------------------------------------------------
   Layout: minimal — thin rule, generous whitespace, no fill
---------------------------------------------------------------- */
.layout-minimal .bc-bg{ background:transparent; }
.layout-minimal .bc-content{ padding:24px; }
.layout-minimal .bc-head{ padding-bottom:10px; border-bottom:1px solid color-mix(in srgb, var(--p-ink) 20%, transparent); margin-bottom:auto; }
.layout-minimal .bc-logo{ width:26px; height:26px; border-radius:6px; }
.layout-minimal .bc-watermark{ opacity:.14; }

/* small preview scaling helper (used in the design picker grid) */
.card-thumb{ transform-origin: center; pointer-events:none; }