/* =====================================================
   Professional Invoice Template
   Version : 1.0.0
   Invoice Create Free

   Design Reference:
   Weiner's Limited Professional Invoice
   ===================================================== */


/* =====================================================
   PAGE FOUNDATION
   ===================================================== */

.professional-invoice {

    width: 100%;
    max-width: 210mm;

    min-height: 297mm;

    margin: 0 auto;

    padding: 18mm 10mm 16mm 10mm;

    box-sizing: border-box;

    background: #ffffff;

    color: #111111;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 12px;

    line-height: 1.4;

}


/* =====================================================
   RESET INSIDE PROFESSIONAL TEMPLATE
   ===================================================== */

.professional-invoice *,
.professional-invoice *::before,
.professional-invoice *::after {

    box-sizing: border-box;

}


.professional-invoice h1,
.professional-invoice h2,
.professional-invoice h3,
.professional-invoice p {

    margin: 0;

}


.professional-invoice table {

    border-collapse: collapse;

}


/* =====================================================
   PROFESSIONAL HEADER
   Reference Layout:
   Logo Left / Supplier Information Right
   ===================================================== */

.professional-header {

    width: 100%;

    display: grid;

    grid-template-columns: 42% 58%;

    align-items: start;

    margin-bottom: 30px;

}


/* =====================================================
   LEFT — LOGO
   ===================================================== */

.professional-header-left {

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

}


.professional-logo-wrapper {

    width: 150px;

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: flex-start;

}


.professional-logo-image {

    display: block;

    width: auto;

    height: auto;

    max-width: 145px;

    max-height: 70px;

    object-fit: contain;

}


/* =====================================================
   LOGO FALLBACK
   ===================================================== */

.professional-logo-placeholder {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #111;

    font-size: 24px;

    font-weight: 700;

}


/* =====================================================
   RIGHT — SUPPLIER INFORMATION
   ===================================================== */

.professional-header-right {

    text-align: right;

    padding-top: 2px;

}


.professional-company-name {

    margin-bottom: 5px;

    font-size: 15px;

    line-height: 1.2;

    font-weight: 700;

    color: #111;

}


.professional-company-address,
.professional-company-phone,
.professional-company-email,
.professional-company-website {

    font-size: 9px;

    line-height: 1.55;

    color: #666;

}


.professional-company-registrations {

    margin-top: 2px;

}


.professional-registration-item {

    font-size: 9px;

    line-height: 1.45;

    color: #666;

}


.professional-registration-label {

    font-weight: 700;

}


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

@media (max-width: 650px) {

    .professional-header {

        grid-template-columns: 38% 62%;

    }


    .professional-logo-wrapper {

        width: 110px;

        height: 60px;

    }


    .professional-logo-image {

        max-width: 105px;

        max-height: 58px;

    }


    .professional-company-name {

        font-size: 13px;

    }


    .professional-company-address,
    .professional-company-phone,
    .professional-company-email,
    .professional-company-website,
    .professional-registration-item {

        font-size: 8px;

    }

}

/* =====================================================
   TOP INFORMATION
   INVOICE + ORDER INFO | SHIP TO | BILL TO
   Weiner's Reference Layout
   ===================================================== */

.professional-top-information {

    width: 100%;

    display: grid;

    grid-template-columns:
        30%
        70%;

    align-items: stretch;

    margin-bottom: 22px;

}


/* =====================================================
   LEFT — INVOICE + ORDER INFORMATION
   ===================================================== */

.professional-invoice-info-section {

    min-width: 0;

    padding-right: 28px;

    border-right: 1px solid #111111;

}


/* Remove old inner 2-column layout */

.professional-invoice-info {

    width: 100%;

    display: block;

    margin: 0;

    padding: 0;

}


/* =====================================================
   INVOICE TITLE
   ===================================================== */

.professional-invoice-title-wrap {

    display: block;

    padding: 0;

    margin: 0 0 22px 0;

}


.professional-invoice-title {

    margin: 0;

    padding: 0;

    font-size: 34px;

    line-height: 1;

    font-weight: 400;

    letter-spacing: -1px;

    color: #111111;

}


/* =====================================================
   ORDER INFORMATION
   ===================================================== */

.professional-invoice-details {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    justify-content: flex-start;

    gap: 12px;

    min-height: 0;

    padding: 0;

    border: 0;

}


/* =====================================================
   ORDER DETAIL
   ===================================================== */

.professional-invoice-detail {

    display: flex;

    flex-direction: column;

    margin: 0;

    padding: 0;

}


.professional-invoice-detail-label {

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    color: #111111;

}


.professional-invoice-detail-value {

    margin-top: 2px;

    font-size: 10px;

    line-height: 1.35;

    color: #555555;

}


/* =====================================================
   RIGHT — PARTIES
   ===================================================== */

.professional-parties-section {

    min-width: 0;

    padding-left: 28px;

    margin: 0;

}


.professional-parties {

    width: 100%;

}


.professional-parties-inner {

    width: 100%;

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    column-gap: 34px;

    align-items: start;

}


.professional-party-block {

    min-width: 0;

}


.professional-party-heading {

    margin: 0 0 7px 0;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;

    color: #111111;

}


.professional-party-content {

    font-size: 10px;

    line-height: 1.45;

    color: #555555;

}


.professional-party-name {

    margin-bottom: 2px;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    color: #222222;

}


.professional-party-person {

    margin-bottom: 2px;

    font-size: 10px;

}


.professional-party-line {

    min-height: 14px;

}


.professional-party-contact {

    margin-top: 1px;

}

/* =====================================================
   PARTIES
   ===================================================== */

.professional-parties-section {

    width: 100%;

    margin-bottom: 20px;

}


.professional-parties-inner {

    display: grid;

    grid-template-columns:
        1fr
        1fr;

    gap: 34px;

    width: 100%;

}


.professional-party-block {

    min-width: 0;

}


.professional-party-heading {

    margin-bottom: 7px;

    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    text-transform: uppercase;

    color: #111111;

}


.professional-party-content {

    font-size: 10px;

    line-height: 1.45;

    color: #555555;

}


.professional-party-name {

    margin-bottom: 2px;

    font-size: 11px;

    line-height: 1.3;

    font-weight: 700;

    color: #222222;

}


.professional-party-person {

    margin-bottom: 2px;

    font-size: 10px;

}


.professional-party-line {

    min-height: 14px;

}


.professional-party-contact {

    margin-top: 1px;

}

/* =====================================================
   PROFESSIONAL PRODUCTS TABLE
   Final Professional Version
   ===================================================== */

.professional-products-section {

    width: 100%;

    margin: 18px 0 14px 0;

}


/* =====================================================
   TABLE WRAPPER
   ===================================================== */

.professional-products-table-wrapper {

    width: 100%;

    overflow: hidden;

}


/* =====================================================
   TABLE FOUNDATION
   ===================================================== */

.professional-products-table {

    width: 100%;

    border-collapse: collapse;

    table-layout: fixed;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* =====================================================
   EXACT COLUMN WIDTHS
   ===================================================== */

/*
   ITEM          34%
   SKU            8%
   FULFILLMENT   13%
   QTTY           7%
   VAT            8%
   UNIT PRICE    15%
   TOTAL         15%

   TOTAL = 100%
*/


.professional-products-table th:nth-child(1),
.professional-products-table td:nth-child(1) {

    width: 34%;

}


.professional-products-table th:nth-child(2),
.professional-products-table td:nth-child(2) {

    width: 8%;

}


.professional-products-table th:nth-child(3),
.professional-products-table td:nth-child(3) {

    width: 13%;

}


.professional-products-table th:nth-child(4),
.professional-products-table td:nth-child(4) {

    width: 7%;

}


.professional-products-table th:nth-child(5),
.professional-products-table td:nth-child(5) {

    width: 8%;

}


.professional-products-table th:nth-child(6),
.professional-products-table td:nth-child(6) {

    width: 15%;

}


.professional-products-table th:nth-child(7),
.professional-products-table td:nth-child(7) {

    width: 15%;

}


/* =====================================================
   TABLE HEADER
   ===================================================== */

.professional-products-table thead {

    background: #fafafa;

}


.professional-products-table thead tr {

    border-top: 1px solid #d9d9d9;

    border-bottom: 2px solid #222222;

}


.professional-products-table th {

    height: 32px;

    padding: 8px 6px;

    font-size: 9px;

    line-height: 1.2;

    font-weight: 700;

    letter-spacing: 0.45px;

    text-transform: uppercase;

    white-space: nowrap;

    vertical-align: middle;

    color: #222222;

}


/* =====================================================
   HEADER ALIGNMENT
   ===================================================== */

.professional-products-table th:nth-child(1) {

    text-align: left;

}


.professional-products-table th:nth-child(2) {

    text-align: left;

}


.professional-products-table th:nth-child(3) {

    text-align: left;

}


.professional-products-table th:nth-child(4) {

    text-align: center;

}


.professional-products-table th:nth-child(5) {

    text-align: center;

}


.professional-products-table th:nth-child(6) {

    text-align: right;

}


.professional-products-table th:nth-child(7) {

    text-align: right;

}


/* =====================================================
   BODY ROW
   ===================================================== */

.professional-products-table tbody tr {

    border-bottom: 1px solid #e8e8e8;

}


.professional-products-table tbody tr:last-child {

    border-bottom: 1px solid #d8d8d8;

}


.professional-products-table td {

    padding: 9px 6px;

    font-size: 10px;

    line-height: 1.35;

    vertical-align: middle;

    color: #555555;

}


/* =====================================================
   ITEM
   ===================================================== */

.professional-product-item {

    text-align: left;

}


.professional-product-name {

    font-size: 10px;

    line-height: 1.35;

    font-weight: 500;

    color: #222222;

}


.professional-product-description {

    margin-top: 2px;

    font-size: 8.5px;

    line-height: 1.3;

    color: #888888;

}


/* =====================================================
   SKU
   ===================================================== */

.professional-product-sku {

    text-align: left;

    font-size: 9.5px;

    font-weight: 500;

    white-space: nowrap;

    color: #555555;

}


/* =====================================================
   FULFILLMENT
   ===================================================== */

.professional-product-fulfillment {

    text-align: left;

    white-space: nowrap;

    font-size: 9.5px;

    font-weight: 600;

    color: #333333;

}


/* =====================================================
   PROFESSIONAL FULFILLMENT STATUS
   ===================================================== */

.professional-product-fulfillment:not(:empty) {

    letter-spacing: 0.15px;

}


/* =====================================================
   QTTY
   ===================================================== */

.professional-product-qty {

    text-align: center;

    font-size: 9.5px;

    font-weight: 500;

    white-space: nowrap;

    color: #444444;

}


/* =====================================================
   VAT
   ===================================================== */

.professional-product-vat {

    text-align: center;

    font-size: 9.5px;

    white-space: nowrap;

    color: #555555;

}


/* =====================================================
   UNIT PRICE
   ===================================================== */

.professional-product-price {

    text-align: right;

    padding-right: 8px !important;

    font-size: 9.5px;

    font-weight: 500;

    white-space: nowrap;

    color: #444444;

}


/* =====================================================
   TOTAL
   ===================================================== */

.professional-product-total {

    text-align: right;

    padding-right: 6px !important;

    font-size: 9.5px;

    font-weight: 700;

    white-space: nowrap;

    color: #111111;

}


/* =====================================================
   EMPTY PRODUCTS
   ===================================================== */

.professional-empty-products {

    padding: 16px 8px !important;

    text-align: center;

    font-size: 10px;

    color: #888888;

}


/* =====================================================
   PREVENT COLUMN SHIFT
   ===================================================== */

.professional-products-table th,
.professional-products-table td {

    box-sizing: border-box;

    overflow: hidden;

}


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

@media print {

    .professional-products-table-wrapper {

        overflow: visible;

    }

    .professional-products-table {

        width: 100%;

        min-width: 0;

    }

}

/* =====================================================
   BOTTOM SECTION
   WEINER'S REFERENCE LAYOUT
   ORDER NOTE LEFT / TOTALS RIGHT
   SHIPPING BELOW ORDER NOTE
   ===================================================== */

.professional-bottom-section {

    width: 100%;

    display: grid;

    grid-template-columns:
        minmax(0, 58%)
        minmax(0, 42%);

    column-gap: 22px;

    align-items: start;

    margin-top: 0;

}


/* =====================================================
   LEFT COLUMN
   ===================================================== */

.professional-notes-section {

    grid-column: 1;

    grid-row: 1;

    width: 100%;

    min-width: 0;

}


/* =====================================================
   ORDER NOTE
   ===================================================== */

.professional-notes {

    width: 100%;

    display: grid;

    grid-template-columns:
        115px
        minmax(0, 1fr);

    column-gap: 12px;

    align-items: start;

    margin: 0;

    padding: 0;

}


/* =====================================================
   ORDER NOTE HEADING
   ===================================================== */

.professional-notes-heading {

    padding: 0;

    margin: 0;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 700;

    text-transform: uppercase;

    color: #111111;

}


/* =====================================================
   ORDER NOTE CONTENT
   ===================================================== */

.professional-notes-content {

    min-width: 0;

    margin: 0;

    padding: 0;

    font-size: 9.5px;

    line-height: 1.55;

    font-weight: 400;

    color: #666666;

    white-space: normal;

    overflow-wrap: anywhere;

}


/* =====================================================
   ORDER NOTE EACH LINE
   ===================================================== */

.professional-note-line {

    margin: 0;

    padding: 0;

    line-height: 1.55;

}


.professional-note-line:last-child {

    margin-bottom: 0;

}


/* =====================================================
   SHIPPING
   Below ORDER NOTE
   ===================================================== */

.professional-shipping-section {

    grid-column: 1;

    grid-row: 2;

    width: 100%;

    min-width: 0;

    margin-top: 24px;

}


/* =====================================================
   SHIPPING COMPANY
   ===================================================== */

.professional-shipping-company {

    width: 100%;

    display: grid;

    grid-template-columns:
        115px
        minmax(0, 1fr);

    column-gap: 12px;

    align-items: start;

    margin: 0;

    padding: 0;

}


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

.professional-shipping-company-label {

    margin: 0;

    padding: 0;

    font-size: 11px;

    line-height: 1.35;

    font-weight: 700;

    text-transform: uppercase;

    color: #111111;

}


/* =====================================================
   SHIPPING VALUE
   ===================================================== */

.professional-shipping-company-value {

    margin: 0;

    padding: 0;

    font-size: 9.5px;

    line-height: 1.45;

    color: #666666;

}


/* =====================================================
   RIGHT COLUMN
   TOTALS
   ===================================================== */

.professional-totals-section {

    grid-column: 2;

    grid-row: 1 / span 2;

    width: 100%;

    min-width: 0;

    margin: 0;

    padding: 0;

}


/* =====================================================
   TOTALS CONTAINER
   ===================================================== */

.professional-totals {

    width: 100%;

    margin: 0;

    padding: 0;

}


/* =====================================================
   TOTAL ROW
   ===================================================== */

.professional-total-row {

    width: 100%;

    min-height: 32px;

    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        82px;

    column-gap: 18px;

    align-items: center;

    margin: 0;

    padding: 0 0 0 0;

    border-bottom: 1px solid #eeeeee;

}


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

.professional-total-label {

    margin: 0;

    padding: 0;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 700;

    text-align: right;

    white-space: nowrap;

    color: #222222;

}


/* =====================================================
   TOTAL VALUE
   ===================================================== */

.professional-total-value {

    min-width: 0;

    margin: 0;

    padding: 0;

    font-size: 10px;

    line-height: 1.2;

    font-weight: 400;

    text-align: right;

    white-space: nowrap;

    color: #555555;

}


/* =====================================================
   GRAND TOTAL
   ===================================================== */

.professional-grand-total {

    min-height: 35px;

}


.professional-grand-total
.professional-total-value {

    font-weight: 700;

    color: #111111;

}


/* =====================================================
   AMOUNT DUE
   ===================================================== */

.professional-amount-due {

    min-height: 35px;

    margin-top: 0;

    border-bottom: 0;

}


.professional-amount-due
.professional-total-label {

    font-weight: 700;

    color: #111111;

}


.professional-amount-due
.professional-total-value {

    font-weight: 700;

    color: #111111;

}


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

@media print {

    .professional-bottom-section {

        display: grid;

        grid-template-columns:
            minmax(0, 58%)
            minmax(0, 42%);

        column-gap: 22px;

        align-items: start;

    }


    .professional-notes-section {

        grid-column: 1;

        grid-row: 1;

    }


    .professional-shipping-section {

        grid-column: 1;

        grid-row: 2;

    }


    .professional-totals-section {

        grid-column: 2;

        grid-row: 1 / span 2;

    }

}


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

.professional-footer {

    width: 100%;

    margin-top: 28px;

    padding-top: 12px;

    border-top: 0;

}


.professional-footer-heading {

    margin-bottom: 5px;

    font-size: 12px;

    line-height: 1.3;

    font-weight: 700;

    color: #222222;

}


.professional-footer-content {

    font-size: 9px;

    line-height: 1.5;

    color: #666666;

}


.professional-footer-line {

    margin-bottom: 2px;

}


.professional-footer-line:last-child {

    margin-bottom: 0;

}


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

@media (max-width: 900px) {

    .professional-invoice {

        padding: 14mm 7mm;

    }


    .professional-invoice .modern-header {

        grid-template-columns: 1fr;

        row-gap: 16px;

    }


    .professional-invoice .modern-company-grid {

        margin-top: 0;

        align-items: flex-start;

    }


    .professional-invoice .modern-company-grid
    .company-item,
    .professional-invoice .modern-registration-item {

        text-align: left;

    }


    .professional-invoice-info-inner {

        grid-template-columns: 1fr;

        row-gap: 14px;

    }


    .professional-invoice-title {

        padding-right: 0;

    }


    .professional-invoice-details {

        border-left: 0;

        border-top: 1px solid #111111;

        padding-left: 0;

        padding-top: 12px;

    }


    .professional-bottom-section {

        grid-template-columns: 1fr;

        row-gap: 20px;

    }

}


@media (max-width: 650px) {

    .professional-invoice {

        padding: 10mm 5mm;

        font-size: 11px;

    }


    .professional-parties-inner {

        grid-template-columns: 1fr;

        gap: 18px;

    }


    .professional-products-table {

        min-width: 700px;

    }


    .professional-products-table-wrapper {

        overflow-x: auto;

    }


    .professional-bottom-section {

        grid-template-columns: 1fr;

    }


    .professional-notes,
    .professional-shipping-company {

        grid-template-columns: 100px minmax(0, 1fr);

    }

}


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

@media print {

    @page {

        size: A4;

        margin: 0;

    }


    html,
    body {

        margin: 0 !important;

        padding: 0 !important;

        background: #ffffff !important;

    }


    .professional-invoice {

        width: 210mm;

        max-width: 210mm;

        min-height: 297mm;

        margin: 0;

        padding: 15mm 10mm 14mm 10mm;

        background: #ffffff;

    }


    .professional-products-table-wrapper {

        overflow: visible;

    }


    .professional-products-table {

        min-width: 0;

    }


    .professional-invoice-section {

        break-inside: avoid;

    }


    .professional-party-block {

        break-inside: avoid;

    }


    .professional-products-section {

        break-inside: auto;

    }


    .professional-total-row {

        break-inside: avoid;

    }


    .professional-footer {

        break-inside: avoid;

    }

}