/* Styling for directory, single, and add form */
*{box-sizing:border-box}
:root{--bg:#0b0f19;--card:#111827;--muted:#6b7280;--text:#e5e7eb;--accent:#06b6d4;--top-offset:140px}
.cpqrcards .container{max-width:1100px;margin:0 auto;padding:24px;color:var(--text) padding-top:var(--top-offset); }
.cpqrcards .header{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-bottom:16px}
.cpqrcards .header h1{font-size:22px;margin:0}
.cpqrcards .hint{color:var(--muted);font-size:14px}
.cpqrcards .grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:8px}
.cpqrcards .card{background:var(--card);border:1px solid #1f2937;border-radius:16px;padding:24px;box-shadow:0 8px 24px rgba(0,0,0,.2);color:var(--text)}
.cpqrcards .card:hover{transform:translateY(-2px);transition:transform .12s ease}
.cpqrcards .top{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.cpqrcards .meta{color:var(--muted);font-size:14px}
.cpqrcards .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.cpqrcards .badge{padding:6px 10px;border-radius:999px;background:#0e1726;border:1px solid #1f2937;color:#9ca3af;font-size:12px;font-weight:600}
.cpqrcards .btn{padding:12px 14px;border-radius:12px;border:1px solid #1f2937;background:#0b1220;color:#d1d5db;cursor:pointer;font-weight:600;text-decoration:none;display:inline-block;line-height:1.2}
.cpqrcards .btn:hover{background:#0e1526}
/* single */
.hero{border-radius:20px;overflow:hidden;border:1px solid #1f2937;margin:24px}
.banner{height:120px}
.bizcard{display:grid;gap:20px;grid-template-columns:110px 1fr;background:#0b1220;border:1px solid #1f2937;border-radius:16px;padding:24px;align-items:center}
.logo{width:100%;height:100px;object-fit:contain;background:rgba(255,255,255,.02);border-radius:12px;padding:10px;display:block}
.name{font-size:22px;margin:0}
.title{color:#9ca3af;margin:4px 0 0}
.actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.kv{display:grid;grid-template-columns:110px 1fr;gap:8px;margin-top:14px;color:#cbd5e1}
.notice{background:#0e1726;border:1px dashed #334155;border-radius:12px;padding:12px;color:#9ca3af;margin:24px}
/* form */
.cpqrcards-form label{display:flex;flex-direction:column;gap:6px;color:#cbd5e1}
.cpqrcards-form input{padding:10px;border-radius:10px;border:1px solid #1f2937;background:#0b1220;color:#e5e7eb}
.grid2{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:12px}
.colors{border:1px solid #1f2937;border-radius:12px;padding:12px;margin:10px 0}
.colors legend{padding:0 6px;color:#9ca3af}


/* extra breathing room on larger screens */
@media (min-width: 1024px){
  .cpqrcards .container{padding:40px padding-top:var(--top-offset); }
}


/* Ensure content sits below sticky headers/logos */
body.admin-bar .cpqrcards .container{ padding-top: calc(var(--top-offset) + 32px); }

/* Slightly more top offset on smaller screens where headers stack */
@media (max-width: 782px){
  .cpqrcards .container{ padding-top: calc(var(--top-offset) + 20px); }
}

/* Extra outer margin so theme elements don't butt up against the grid */
.cpqrcards{ margin-block: 16px 48px; }

.logo-sq{width:40px;height:40px;border-radius:8px;background:#06b6d4;object-fit:contain;padding:6px;display:block}

/* allow button inside card link wrapper */
.cpqrcards .card .btn{margin-top:8px;display:inline-block}
.cpqrcards .top + .row{margin-top:10px}


/* ---------- Mobile-friendly tweaks ---------- */
@media (max-width: 640px){
  .cpqrcards .container{padding-left:16px;padding-right:16px;padding-top:calc(var(--top-offset, 100px) + env(safe-area-inset-top));}
  .cpqrcards .grid{grid-template-columns:1fr;gap:16px;padding:4px}
  .cpqrcards .card{padding:18px;border-radius:16px}
  .bizcard{grid-template-columns:1fr;gap:14px;padding:18px}
  .logo{height:72px;margin:0 auto}
  .actions{display:flex;gap:8px;flex-wrap:wrap}
  .actions .btn{flex:1 1 48%;text-align:center;padding:14px 12px}
  .kv{grid-template-columns:1fr;gap:6px}
  .hero{margin:16px}
  /* Make QR larger but still fit */
  canvas#qr{width:220px !important;height:220px !important;margin:0 auto}
}
/* Very small devices */
@media (max-width: 380px){
  .actions .btn{flex-basis:100%}
  canvas#qr{width:200px !important;height:200px !important}
}