/* === receipt.css === */
/* Premium Bordered Card Receipt Design - Auto Scaling & Centered */

@page {
    size: 80mm auto; /* Forces 80mm width, auto height */
    margin: 0;       /* Removes all printer margins */
}

html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
    width: 80mm;
    -webkit-print-color-adjust: exact !important; 
    print-color-adjust: exact !important;
}

.receipt-card {
    border: 3px solid #000;
    padding: 4mm;
    box-sizing: border-box;
    font-family: 'Courier New', Courier, monospace;
    color: #000;
    width: 100%;
}

.receipt-inner-border {
    border: 2px dashed #000;
    padding: 4mm;
    text-align: center; /* Centers all content inside */
}

.receipt-header {
    border-bottom: 2px solid #000;
    padding-bottom: 3mm;
    margin-bottom: 4mm;
}

.receipt-header h1 {
    font-size: 14px; /* Optimal size to prevent browser auto-scaling */
    font-weight: 800;
    letter-spacing: 2px;
    margin: 0;
    text-transform: uppercase;
}

.receipt-body {
    text-align: center; /* Centering the text block as requested */
}

.receipt-text {
    font-size: 10px; /* Small standard thermal font size */
    font-weight: 600;
    line-height: 1.8; /* Well distributed vertical spacing */
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0 auto;
    padding: 0;
    display: inline-block;
    text-align: center; /* Forces text to be centered */
}

.receipt-footer {
    margin-top: 4mm;
    padding-top: 3mm;
    border-top: 2px solid #000;
}

.receipt-footer .msg {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 3mm;
    letter-spacing: 1px;
}

/* CSS Generated Barcode */
.barcode-container {
    width: 100%;
    text-align: center;
    margin: 2mm 0;
}

.barcode {
    height: 40px;
    width: 85%;
    margin: 0 auto;
    background: repeating-linear-gradient(
        to right,
        #000 0,
        #000 2px,
        transparent 2px,
        transparent 3px,
        #000 3px,
        #000 5px,
        transparent 5px,
        transparent 6px,
        #000 6px,
        #000 8px,
        transparent 8px,
        transparent 9px
    );
}

.barcode-text {
    font-size: 10px;
    letter-spacing: 3px;
    text-align: center;
    margin-top: 1mm;
    font-weight: 700;
}

@media print {
    html, body {
        width: 80mm;
        height: auto;
        overflow: hidden;
    }
    body * {
        visibility: hidden;
    }
    .receipt-card, .receipt-card * {
        visibility: visible;
    }
    .receipt-card {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
}