/* GOODLOAD — दुकान का QR
   ═══════════════════════════════════════════════════════════════
   यह पर्दा दुकानदार को उसका अपना QR दिखाता है, और वही QR कागज़
   पर छपकर दुकान की दीवार पर चिपकता है।

   ⚠️ छपाई सबसे ज़रूरी है — पर्दे पर सुंदर दिखना दूसरी बात है।
      इसलिए नीचे @media print में QR का नाप mm में बाँधा गया है,
      screen के pixel में नहीं। घर के सस्ते printer पर भी QR
      कम से कम 30mm का छपे, वरना दूर से फ़ोन नहीं पकड़ता।
   ═══════════════════════════════════════════════════════════════ */

.qr-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:18px 16px 16px;
  text-align:center;
}

/* दुकान का नाम और GL ID */
.qr-naam{
  font-weight:800;
  font-size:1.05rem;
  color:var(--p);
  line-height:1.35;
  word-break:break-word;
}
.qr-id{
  font-size:.82rem;
  font-weight:700;
  color:var(--txt3);
  letter-spacing:.5px;
  margin-top:2px;
}

/* QR ख़ुद — सफ़ेद चौखट के अंदर, ताकि रंगीन background पर भी पढ़ा जाए */
.qr-dabba{
  display:inline-block;
  margin:14px auto 10px;
  padding:11px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
}
.qr-dabba canvas{
  display:block;
  width:100%;
  max-width:15rem;
  height:auto;
  /* बड़ा करते वक़्त खाने धुँधले न हों — QR के लिए यह ज़रूरी है */
  image-rendering:pixelated;
}

.qr-pata{
  font-size:.75rem;
  font-weight:700;
  color:var(--p2);
  word-break:break-all;
  line-height:1.5;
}
.qr-samjhao{
  font-size:.75rem;
  font-weight:600;
  color:var(--txt3);
  margin-top:6px;
  line-height:1.6;
}

/* चार बटन — दो-दो की जोड़ी */
.qr-batan{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-top:12px;
}
.qr-batan .btn{ margin:0; }

/* ── छपने वाला काग़ज़ ─────────────────────────────────────────
   पर्दे पर यह छिपा रहता है; सिर्फ़ printer के लिए बनता है।     */
#qr-kagaz{ display:none; }

@media print{
  body.chhap-raha #app,
  body.chhap-raha .botnav,
  body.chhap-raha #bina-net,
  body.chhap-raha #toast{ display:none !important; }
  body.chhap-raha #print-area{ display:block !important; }

  #print-area .qrp{
    text-align:center;
    font-family:system-ui, sans-serif;
    padding:14mm 8mm;
    color:#000;
  }
  #print-area .qrp-naam{ font-size:20pt; font-weight:800; line-height:1.3; }
  #print-area .qrp-id{ font-size:11pt; color:#444; margin-top:2mm; }
  /* नाप mm में — यही असली बात है */
  #print-area .qrp-qr{ margin:8mm auto 6mm; width:62mm; }
  #print-area .qrp-qr img{ width:100%; height:auto; display:block; }
  #print-area .qrp-bada{ font-size:15pt; font-weight:800; margin-top:2mm; }
  #print-area .qrp-pata{ font-size:10pt; color:#444; margin-top:2mm; word-break:break-all; }
  #print-area .qrp-chet{
    margin-top:6mm; font-size:9pt; color:#000;
    border:1pt solid #000; border-radius:2mm; padding:3mm;
  }
}