/* =====================================================================
   BUSINESS CARDS
   One HTML structure (views/partials/card.ejs), six designs via .tpl-*
   Card size: 525 x 300px (3.5in x 2in at 150dpi)
   ===================================================================== */

/* ---------- Nav ---------- */
.nav { display: flex; gap: 8px; justify-content: center; margin-top: 18px; }
.nav a {
  color: #fff; text-decoration: none; padding: 7px 16px; border-radius: 999px;
  font-size: 0.85rem; font-weight: 600; background: rgba(255,255,255,0.16);
}
.nav a.active { background: #fff; color: var(--primary); }

/* ---------- Card base ---------- */
.bc { --c1: #4f46e5; --c2: #f59e0b; display: flex; flex-direction: column; gap: 14px; width: 525px; transform-origin: top left; }

.bc-face {
  position: relative; width: 525px; height: 300px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden; background: #fff; color: #1f2430;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
.bc-face * { box-sizing: border-box; margin: 0; padding: 0; }

/* Scaled wrapper: shrink the 525px card without breaking layout flow */
.bc-scale { --s: 1; position: relative; width: calc(525px * var(--s)); height: calc(614px * var(--s)); max-width: 100%; }
.bc-scale.front-only { height: calc(300px * var(--s)); }
.bc-scale > .bc { transform: scale(var(--s)); }
.bc-scale.front-only .bc-back { display: none; }

.deco { position: absolute; pointer-events: none; }

.bc-info { position: absolute; left: 40px; top: 44px; right: 130px; bottom: 30px; display: flex; flex-direction: column; }
.bc-logo { display: none; align-items: center; justify-content: center; font-weight: 700; }
.bc-name { font-size: 26px; font-weight: 700; line-height: 1.15; overflow-wrap: anywhere; }
.bc-title { font-size: 13px; margin-top: 4px; opacity: 0.85; }
.bc-company { font-size: 13px; font-weight: 600; margin-top: 2px; }
.bc-title:empty, .bc-company:empty { display: none; }

.bc-contacts { list-style: none; margin-top: auto; padding-top: 8px; display: flex; flex-direction: column; gap: 5px; font-size: 11.5px; }
.bc-contacts li { display: flex; gap: 7px; align-items: flex-start; }
.bc-contacts li[hidden] { display: none; }
.bc-contacts .ic { width: 14px; flex-shrink: 0; text-align: center; font-size: 11px; }
.bc-contacts li { min-width: 0; }
/* One line per contact so the card height is predictable; long values are cut with an ellipsis */
.bc-contacts li span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Long names shrink instead of overflowing the card */
.bc .bc-name[data-size="md"] { font-size: 21px; }
.bc .bc-name[data-size="sm"] { font-size: 17px; }

/* QR on the front (small) */
.bc-qr {
  position: absolute; right: 26px; bottom: 26px; width: 86px; height: 86px;
  background: #fff; padding: 5px; border-radius: 6px; box-shadow: 0 2px 8px rgba(0,0,0,0.18); display: none;
}
.bc-qr img, .bc-back-qr img { width: 100%; height: 100%; display: block; }
.qr-front .bc-qr { display: block; }

/* Back of the card */
.bc-back {
  background: var(--c1); color: #fff; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 10px;
}
.bc-back-qr { display: none; width: 170px; height: 170px; background: #fff; padding: 10px; border-radius: 10px; }
.bc-back-cap { display: none; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.85; }
.bc-back-brand { font-size: 22px; font-weight: 700; padding: 0 30px; overflow-wrap: anywhere; }
.qr-back .bc-back-qr { display: block; }
.qr-back .bc-back-cap { display: block; }
.qr-back .bc-back-brand { font-size: 14px; font-weight: 600; opacity: 0.9; }

/* ---------- 1. Modern Minimal ---------- */
.tpl-modern .d1 { left: 0; top: 0; bottom: 0; width: 14px; background: var(--c1); }
.tpl-modern .d2 { right: -45px; top: -45px; width: 130px; height: 130px; border-radius: 50%; background: var(--c2); }
.tpl-modern .bc-info { left: 44px; }
.tpl-modern .bc-name { color: var(--c1); }
.tpl-modern .bc-title { color: #64748b; opacity: 1; }
.tpl-modern .bc-company { color: #334155; }
.tpl-modern .bc-contacts { color: #334155; }

/* ---------- 2. Bold Dark ---------- */
.tpl-dark .bc-front { background: #0f172a; color: #fff; }
.tpl-dark .d1 { right: -70px; top: -60px; width: 210px; height: 440px; background: var(--c1); transform: rotate(18deg); }
.tpl-dark .d2 { left: 0; right: 0; bottom: 0; height: 6px; background: var(--c2); }
.tpl-dark .bc-info { right: 170px; }
.tpl-dark .bc-title { color: var(--c2); opacity: 1; font-weight: 600; }
.tpl-dark .bc-company, .tpl-dark .bc-contacts { color: #cbd5e1; }
.tpl-dark .bc-back { background: #0f172a; }

/* ---------- 3. Gradient Glow ----------
   Layered translucent circles (not CSS gradients) so the design looks
   identical on screen and in the exported PNG. */
.tpl-gradient .bc-front, .tpl-gradient .bc-back { background: var(--c1); color: #fff; }
.tpl-gradient .bc-front::before { content: ''; position: absolute; left: -60px; top: -70px; width: 170px; height: 170px; border-radius: 50%; background: #fff; opacity: 0.12; }
.tpl-gradient .d1 { right: -110px; bottom: -130px; width: 340px; height: 340px; border-radius: 50%; background: var(--c2); opacity: 0.35; }
.tpl-gradient .d2 { right: -50px; bottom: -70px; width: 220px; height: 220px; border-radius: 50%; background: var(--c2); opacity: 0.5; }
.tpl-gradient .bc-logo { display: flex; width: 44px; height: 44px; border-radius: 12px; background: rgba(255,255,255,0.22); font-size: 22px; margin-bottom: 12px; }
.tpl-gradient .bc-back::before { content: ''; position: absolute; left: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; background: var(--c2); opacity: 0.35; }
.tpl-gradient .bc-back::after { content: ''; position: absolute; left: -40px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: var(--c2); opacity: 0.5; }
.tpl-gradient .bc-back > * { position: relative; z-index: 1; }

/* ---------- 4. Corporate Split ---------- */
.tpl-split .d1 { left: 0; top: 0; bottom: 0; width: 172px; background: var(--c1); }
.tpl-split .d2 { left: 172px; top: 0; bottom: 0; width: 6px; background: var(--c2); }
.tpl-split .bc-info { position: static; display: block; margin: 46px 24px 0 204px; }
.tpl-split .bc-logo { display: flex; position: absolute; left: 46px; top: 54px; width: 80px; height: 80px; border-radius: 50%; background: #fff; color: var(--c1); font-size: 38px; }
.tpl-split .bc-company { position: absolute; left: 14px; top: 152px; width: 144px; margin: 0; text-align: center; color: #fff; font-size: 15px; font-weight: 700; letter-spacing: 0.03em; }
.tpl-split .bc-name { color: var(--c1); font-size: 24px; }
.tpl-split .bc-title { color: #64748b; opacity: 1; }
.tpl-split .bc-contacts { margin-top: 18px; color: #334155; }
.tpl-split .bc-qr { width: 72px; height: 72px; right: 18px; bottom: 18px; }
.tpl-split.qr-front .bc-contacts { margin-right: 78px; }

/* ---------- 5. Elegant Classic ---------- */
.tpl-elegant .bc-front, .tpl-elegant .bc-back { background: #faf6ee; color: #3b2f1e; font-family: Georgia, 'Times New Roman', serif; }
.tpl-elegant .d1 { inset: 12px; border: 1px solid var(--c2); }
.tpl-elegant .d2 { left: 50%; top: 12px; width: 22px; height: 22px; transform: translate(-50%, -50%) rotate(45deg); background: #faf6ee; border: 1px solid var(--c2); }
.tpl-elegant .bc-info { left: 44px; top: 46px; right: 140px; bottom: 34px; }
.tpl-elegant .bc-name { font-size: 27px; letter-spacing: 0.04em; color: #2b2113; }
.tpl-elegant .bc-title { font-style: italic; color: var(--c2); opacity: 1; }
.tpl-elegant .bc-company { text-transform: uppercase; letter-spacing: 0.18em; font-size: 10.5px; margin-top: 10px; color: #6b5a3e; }
.tpl-elegant .bc-contacts { color: #4a3d29; font-family: 'Segoe UI', system-ui, sans-serif; }
.tpl-elegant .bc-back::after { content: ''; position: absolute; inset: 12px; border: 1px solid var(--c2); pointer-events: none; }
.tpl-elegant .bc-qr { right: 30px; bottom: 30px; border-radius: 2px; box-shadow: none; border: 1px solid var(--c2); }

/* ---------- 6. Creative Geometric ---------- */
.tpl-creative .d1 { right: -120px; top: -120px; width: 250px; height: 250px; background: var(--c1); transform: rotate(45deg); }
.tpl-creative .d2 { left: -55px; bottom: -55px; width: 110px; height: 110px; background: var(--c2); transform: rotate(45deg); }
.tpl-creative .bc-info { left: 64px; top: 46px; right: 150px; bottom: 34px; }
.tpl-creative .bc-name { color: var(--c1); }
.tpl-creative .bc-title { color: #64748b; opacity: 1; }
.tpl-creative .bc-company { color: #334155; }
.tpl-creative .bc-contacts { color: #334155; }
.tpl-creative .bc-back { background: var(--c1); }

/* =====================================================================
   PAGES
   ===================================================================== */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 36px 0 20px; flex-wrap: wrap; }
.page-head h2 { margin: 0; font-size: 1.35rem; }
.page-head + .generator-card { margin-top: 0; }

.cards-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 22px; margin-bottom: 60px; }
.card-tile { background: var(--card-bg); border-radius: var(--radius); padding: 14px; box-shadow: 0 4px 14px rgba(0,0,0,0.06); display: flex; flex-direction: column; gap: 12px; }
.card-tile .bc-scale { --s: 0.52; margin: 0 auto; }
.card-tile h3 { margin: 0; font-size: 1rem; }
.card-tile .meta { color: var(--muted); font-size: 0.8rem; margin-top: 2px; }

/* Editor */
.step { margin: 22px 0 12px; font-size: 1rem; }
.step:first-of-type { margin-top: 8px; }
.tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.tpl-option { cursor: pointer; display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 0.82rem; font-weight: 600; color: var(--muted); }
.tpl-option input { position: absolute; opacity: 0; pointer-events: none; }
.tpl-thumb { padding: 8px; border: 2px solid var(--border); border-radius: 12px; background: #f8f9fc; width: 100%; display: flex; justify-content: center; }
.tpl-thumb .bc-scale { --s: 0.4; }
.tpl-option input:checked + .tpl-thumb { border-color: var(--primary); box-shadow: 0 0 0 3px #e0e7ff; }
.tpl-option input:checked ~ span { color: var(--primary); }
.tpl-option input:focus-visible + .tpl-thumb { outline: 2px solid var(--primary); }

.editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 28px; align-items: start; }
.editor-fields { display: flex; flex-direction: column; gap: 14px; }
.editor-fields .form-row { grid-template-columns: 1fr 1fr; }
.editor-preview { position: sticky; top: 16px; }
.editor-preview .bc-scale { --s: 0.8; }
.editor-preview h3 { margin: 0 0 10px; font-size: 1rem; }

.radio-row { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.9rem; }
.radio-row label { font-weight: 500; color: var(--text); display: flex; gap: 6px; align-items: center; cursor: pointer; }
.radio-row input:disabled + span { opacity: 0.4; }

/* Detail page */
.card-view { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 0; overflow-x: auto; }
.card-view .bc-scale { --s: 1; }
.face-label { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); font-weight: 700; }
.action-bar { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 24px; }
.btn-outline { background: #fff; color: var(--text); border: 1px solid var(--border); }
.btn-outline:hover { background: #f4f6fb; }

@media (max-width: 900px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-preview { position: static; }
}
@media (max-width: 600px) {
  .card-view .bc-scale { --s: 0.62; }
  .editor-fields .form-row { grid-template-columns: 1fr; }
}

/* ---------- Print: just the card faces ---------- */
@media print {
  body { background: #fff; }
  .site-header, .site-footer, .no-print { display: none !important; }
  .generator-card { box-shadow: none; margin: 0; padding: 0; }
  .card-view .bc-scale { --s: 1 !important; }
  .bc-face { box-shadow: none !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .face-label { display: none; }
}

/* ---------- Drag-and-drop designer ---------- */
.img-field input[type=file] { font-size: 0.8rem; }
.img-prev { max-height: 46px; max-width: 120px; display: block; margin: 6px 0 2px; border-radius: 6px; border: 1px solid #ddd; }
.chk { font-size: 0.8rem; display: flex; gap: 6px; align-items: center; }
.de-wrap { display: grid; grid-template-columns: 210px minmax(0, 1fr) 210px; gap: 18px; align-items: start; }
.de-wrap[hidden], .de-side[hidden], .g-text[hidden], .g-shape[hidden] { display: none; }
.de-side { display: flex; flex-direction: column; gap: 9px; font-size: 0.85rem; }
.de-side h4 { margin-top: 6px; }
.de-side select, .de-side textarea, .de-side input[type=number] { width: 100%; padding: 6px; border: 1px solid #d6d9e0; border-radius: 6px; font: inherit; }
.de-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.de-btns button, .de-file, .de-row button, .de-tabs button { padding: 6px 10px; border: 1px solid #d6d9e0; border-radius: 6px; background: #fff; cursor: pointer; font-size: 0.8rem; }
.de-btns button:disabled { opacity: .4; cursor: not-allowed; }
.de-btns .danger { color: #dc2626; }
.de-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.de-tabs { display: flex; gap: 6px; margin-bottom: 10px; }
.de-tabs button.on { background: var(--primary, #4f46e5); color: #fff; border-color: transparent; }
.de-main { min-width: 0; overflow-x: auto; }
.de-stage { width: calc(525px * 1.4); height: calc(300px * 1.4); }
#stage { transform: scale(1.4); transform-origin: top left; cursor: default; user-select: none; touch-action: none; }
.de { cursor: move; }
.de.sel { outline: 2px dashed #4f46e5; outline-offset: 1px; }
.de-h { position: absolute; right: -6px; bottom: -6px; width: 12px; height: 12px; background: #4f46e5; border: 2px solid #fff; border-radius: 3px; cursor: nwse-resize; }
@media (max-width: 1000px) { .de-wrap { grid-template-columns: 1fr; } }