/* Deloura V25 Arabic receipt print fix
   Safe for Android Chrome + laptop Chrome + 80mm thermal drivers that report printable width ~72mm.
   Main change from V24: content width reduced to 68mm and centered to stop left/right clipping,
   while font sizes stay large enough for readable receipt. */

:root {
  --deloura-paper-width: 80mm;
  --deloura-safe-width: 68mm;
  --deloura-bottom-feed: 14mm;
}

@media screen {
  #receiptModal #print {
    width: var(--deloura-paper-width) !important;
    max-width: var(--deloura-paper-width) !important;
    min-width: var(--deloura-paper-width) !important;
    background: #fff !important;
    color: #000 !important;
  }
  #receiptModal #print .modal-body {
    width: var(--deloura-safe-width) !important;
    max-width: var(--deloura-safe-width) !important;
    margin: 0 auto !important;
    padding: 4mm 0 var(--deloura-bottom-feed) !important;
    background: #fff !important;
    color: #000 !important;
    box-sizing: border-box !important;
  }
}

@media print {
  @page { size: 80mm auto; margin: 0 !important; }

  html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 80mm !important;
    max-width: 80mm !important;
    min-width: 80mm !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
    color-scheme: light !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body * { visibility: hidden !important; }

  #receiptModal,
  #receiptModal *,
  #print,
  #print * {
    visibility: visible !important;
  }

  #receiptModal {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 80mm !important;
    max-width: 80mm !important;
    min-width: 80mm !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #receiptModal .modal-dialog,
  #print {
    display: block !important;
    position: static !important;
    width: 80mm !important;
    max-width: 80mm !important;
    min-width: 80mm !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
    font-family: Tahoma, Arial, sans-serif !important;
  }

  #receiptModal .modal-body,
  #print .modal-body {
    display: block !important;
    box-sizing: border-box !important;
    width: 68mm !important;
    max-width: 68mm !important;
    min-width: 68mm !important;
    margin: 0 auto !important;
    padding: 4mm 0 14mm !important;
    background: #fff !important;
    color: #000 !important;
    font-family: Tahoma, Arial, sans-serif !important;
    font-size: 13px !important;
    line-height: 1.34 !important;
    direction: rtl !important;
    overflow: visible !important;
  }

  #receiptModal .modal-body *,
  #print .modal-body * {
    color: #000 !important;
    line-height: 1.34 !important;
    text-shadow: none !important;
    box-shadow: none !important;
    -webkit-filter: none !important;
    filter: none !important;
    box-sizing: border-box !important;
    background-image: none !important;
  }

  #receiptModal .modal-body > div,
  #receiptModal .modal-body span,
  #receiptModal .modal-body div,
  #print .modal-body > div,
  #print .modal-body span,
  #print .modal-body div {
    font-size: 13px !important;
  }

  #receiptModal .modal-body > div:first-child > div:first-child,
  #print .modal-body > div:first-child > div:first-child {
    font-size: 18px !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
  }

  #receiptModal .modal-body > div:first-child > div:nth-child(2),
  #receiptModal .modal-body > div:first-child > div:nth-child(3),
  #print .modal-body > div:first-child > div:nth-child(2),
  #print .modal-body > div:first-child > div:nth-child(3) {
    font-size: 12px !important;
    font-weight: 800 !important;
  }

  #receiptModal .modal-body > div:last-child,
  #print .modal-body > div:last-child {
    display: block !important;
    visibility: visible !important;
    margin-top: 5mm !important;
    padding-bottom: 12mm !important;
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  #receiptModal .modal-body > div:last-child *,
  #print .modal-body > div:last-child * {
    display: block !important;
    visibility: visible !important;
    color: #000 !important;
    font-size: 16px !important;
    font-weight: 900 !important;
  }

  #receiptModal .modal-body:after,
  #print .modal-body:after {
    content: "" !important;
    display: block !important;
    height: 14mm !important;
    min-height: 14mm !important;
    clear: both !important;
  }

  #receiptModal .modal-header,
  #receiptModal button,
  #receiptModal .hidden-print,
  #print .modal-header,
  #print button,
  #print .hidden-print {
    display: none !important;
  }

  #print table {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
    border-collapse: collapse !important;
    direction: rtl !important;
  }

  #print th, #print td {
    padding: 1mm .2mm !important;
    vertical-align: top !important;
    overflow: visible !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    background: #fff !important;
    color: #000 !important;
    font-size: 12.8px !important;
  }

  #print, #print * {
    box-sizing: border-box !important;
    background-image: none !important;
  }
}