/*====================================================
        OFFBEAT SHIPPING LABEL V2
        Part 1
        Developed by Nisite Webcraft
====================================================*/

/*==========================
        RESET
==========================*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
}

body{

    background:#ececec;

    display:flex;

    justify-content:center;

    padding:15px;

    color:#000;

}

.page{

    width:100%;

    max-width:430px;

}

/*==========================
        LABEL
==========================*/

#label{

    width:105mm;

    min-height:148mm;

    background:#fff;

    margin:auto;

    border:2px solid #000;

    padding:8mm;

}

/*==========================
    COMPANY HEADER
==========================*/

.company-header{

    display:flex;

    align-items:center;

    gap:14px;

    border:2px solid #000;

    padding:10px;

    margin-bottom:10px;

}
.date-box{

    font-size:10px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:3px;
}

.company-logo{

    width:70px;

    height:70px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-right:2px solid #000;

    padding-right:10px;

}

.company-logo img{

    width:58px;

    height:58px;

    object-fit:contain;

}

.company-details{

    flex:1;
    text-align:center;

}

.company-details h1{

    font-size:22px;

    letter-spacing:1px;

    margin-bottom:3px;

}

.company-details p{

    font-size:11px;

    line-height:1.35;

}

/*==========================
      TABLE DEFAULT
==========================*/

table{

    width:100%;

    border-collapse:collapse;

    margin-bottom:10px;

}

table th{

    border:2px solid #000;

    background:#f4f4f4;

    padding:6px;

    font-size:13px;

    text-align:center;

}

table td{

    border:2px solid #000;

    padding:8px;

    vertical-align:top;

}

/*==========================
      SHIPPING TABLE
==========================*/

.shipping-table{

    table-layout:fixed;

}

.shipping-table th:first-child{

    width:70%;

}

.shipping-table th:last-child{

    width:30%;

}

.ship-address{

    height:150px;

}

.ship-address h2{

    font-size:18px;

    margin-bottom:6px;

    text-transform:uppercase;

}

.ship-address p{

    font-size:12px;

    line-height:1.45;

}

/*==========================
      QR CODE
==========================*/

.qr-cell{

    text-align:center;

    vertical-align:middle;

}

#qrcode{

    width:90px;

    height:90px;

    margin:auto;

    display:flex;

    justify-content:center;

    align-items:center;

}

#qrcode img{

    width:100%;

}

/*==========================
    PAYMENT TABLE
==========================*/

.payment-table{

    table-layout:fixed;

}

.payment-table td{

    font-size:13px;

}

.payment-table td:first-child{

    width:30%;

    font-weight:bold;

}

.payment-table td:last-child{

    font-weight:600;

}
/*====================================================
            PART 2
      PRODUCT + BARCODE + WARNING
====================================================*/

/*==========================
      PRODUCT TABLE
==========================*/

.product-table{

    table-layout:fixed;

}

.product-table th:first-child{

    width:18%;

}

.product-table th:last-child{

    width:60%;

}
/*==========================
      VERTICAL BARCODE
==========================*/
/*==========================
        VERTICAL BARCODE
==========================*/

.barcode-cell{

    width:110px;
    height:280px;
    padding:0;
    overflow:hidden;
    position:relative;
}

.barcode-container{

    width:280px;
    height:80px;

    position:absolute;

    top:50%;
    left:50%;

    transform:translate(-50%,-50%) rotate(-90deg);

}

#barcode{

    width:250px;
    height:80px;
    display:block;

}
/*==========================
      SIZE HIGHLIGHT
==========================*/

#size{

    display:inline-block;

    min-width:42px;

    text-align:center;

    border:2px solid #000;

    padding:3px 10px;

    font-size:15px;

    font-weight:700;

}

/*==========================
      WARNING BOX
==========================*/

.warning-box{

    margin-top:10px;

    border:2px solid #000;

    padding:10px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    font-size:12px;

    font-weight:700;

    text-align:center;

}

.warning-box i{

    font-size:20px;

}

/*==========================
      THANK YOU
==========================*/

.thankyou{

    text-align:center;

    margin-top:10px;

    font-size:13px;

    font-weight:600;

    letter-spacing:.5px;

}

.thankyou strong{

    font-size:15px;

}

/*==========================
    STRONG PRINT COLORS
==========================*/

.company-header,
.shipping-table,
.payment-table,
.product-table,
.details-table,
.warning-box{

    border-color:#000;

}

table th{

    color:#000;

}

table td{

    color:#000;

}
/*====================================================
            PART 3
      BUTTONS • FOOTER • PRINT • EXPORT
====================================================*/

/*==========================
      BUTTON AREA
==========================*/

.button-area{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:12px;

    margin-top:22px;

}

.button-area button{

    height:52px;

    border:none;

    outline:none;

    background:#111;

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.button-area button i{

    display:block;

    font-size:18px;

    margin-bottom:5px;

}

.button-area button:hover{

    background:#000;

    transform:translateY(-2px);

}

.button-area button:active{

    transform:scale(.97);

}

/*==========================
        FOOTER
==========================*/

footer{

    margin-top:18px;

    text-align:center;

    font-size:12px;

    color:#555;

}

footer strong{

    color:#000;

}

/*==========================
      EXPORT MODE
==========================*/

.export-mode,
.export-mode *{

    color:#000 !important;

    background:#fff !important;

    border-color:#000 !important;

    opacity:1 !important;

    box-shadow:none !important;

    text-shadow:none !important;

    filter:none !important;

}

/*==========================
      LABEL QUALITY
==========================*/

#label{

    -webkit-print-color-adjust:exact;

    print-color-adjust:exact;

}

/*==========================
      RESPONSIVE
==========================*/

@media(max-width:430px){

    body{

        padding:10px;

    }

    #label{

        width:100%;

        min-height:auto;

        padding:15px;

    }

    .company-header{

        gap:10px;

    }

    .company-logo{

        width:60px;

        height:60px;

    }

    .company-logo img{

        width:48px;

        height:48px;

    }

    .company-details h1{

        font-size:20px;

    }

    .company-details p{

        font-size:10px;

    }

    #qrcode{

        width:80px;

        height:80px;

    }

    .ship-address{

        height:auto;

    }

    .barcode-wrapper{

        height:170px;

    }

    #barcode{

        width:150px;

    }

    .button-area{

        grid-template-columns:1fr;

    }

}

/*==========================
      PRINT SETTINGS
==========================*/

@page{

    size:A6 portrait;

    margin:5mm;

}

@media print{

    body{

        background:#fff;

        padding:0;

    }

    .button-area{

        display:none;

    }

    footer{

        display:none;

    }

    .page{

        max-width:none;

    }

    #label{

        width:105mm;

        min-height:148mm;

        margin:0;

        border:2px solid #000;

        box-shadow:none;

        page-break-after:avoid;

    }

}

/*==========================
      SMOOTH EFFECTS
==========================*/

.company-header,
.shipping-table,
.payment-table,
.product-table,
.warning-box,
.button-area button{

    transition:.25s ease;

}

.company-header:hover,
.shipping-table:hover,
.payment-table:hover,
.product-table:hover{

    box-shadow:0 3px 10px rgba(0,0,0,.08);

}

/*==========================
      BARCODE IMAGE
==========================*/

#barcode{

    display:block;

    margin:auto;

}

/*==========================
      QR IMAGE
==========================*/

#qrcode img{

    display:block;

    width:100%;

    height:100%;

}

/*==========================
      END
==========================*/

/* =====================================
   QR CODE RESPONSIVE FIX
===================================== */


#qrcode{

    width:100%;

    max-width:100px;

    height:auto;

    display:flex;

    justify-content:center;

    align-items:center;

    margin:auto;

    overflow:hidden;

}



#qrcode img,
#qrcode canvas{

    width:100% !important;

    height:auto !important;

    max-width:100px !important;

}




/* QR table cell */

.qr-box{

    width:100px;

    text-align:center;

    vertical-align:middle;

}




@media(max-width:600px){


    #qrcode{

        max-width:80px;

    }


    #qrcode img,
    #qrcode canvas{

        max-width:80px !important;

    }


}