/*
=========================================
The I G V2
Premium Invoice Generator
Blue & White Theme
=========================================
*/

body{

    background:#f4f8fc;

}

.igv2-invoice-wrapper{

    max-width:1200px;

    margin:40px auto;

    padding:40px;

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

}

.igv2-invoice-wrapper{

    max-width:1200px;

    margin:40px auto;

    padding:40px;

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

}
/*
=========================================
Premium Header Box
=========================================
*/


.igv2-header-box{

    background:

    linear-gradient(
        135deg,
        #2563eb,
        #0ea5e9
    );

    padding:45px 35px;

    border-radius:22px;

    text-align:center;

    color:#ffffff;

    margin-bottom:35px;

    box-shadow:

    0 15px 35px rgba(37,99,235,.25);

}



.igv2-header-box h1{

    margin:0;

    font-size:40px;

    font-weight:800;

    color:#ffffff;

    letter-spacing:-.5px;

}



.igv2-header-box p{

    margin-top:12px;

    margin-bottom:0;

    font-size:17px;

    color:#eff6ff;

    line-height:1.6;

}

/*
=========================================
Cards
=========================================
*/

.igv2-card{

    background:#ffffff;

    border-radius:18px;

    padding:30px;

    margin-bottom:28px;

    box-shadow:

        0 12px 35px rgba(15,23,42,.08);

    border:1px solid #e5e7eb;

}

.igv2-card h3{

    margin-top:0;

    margin-bottom:25px;

    color:#1d4ed8;

    font-size:22px;

    font-weight:700;

}

/*
=========================================
Grid Layout
=========================================
*/

.igv2-grid{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(250px,1fr));

    gap:20px;

}

/*
=========================================
Inputs
=========================================
*/

.igv2-section{

    margin-bottom:20px;

}

.igv2-section label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

    color:#334155;

}

.igv2-section input,

.igv2-section textarea,

.igv2-section select{

    width:100%;

    padding:14px;

    font-size:15px;

    border-radius:10px;

    border:1px solid #d1d5db;

    background:#ffffff;

    transition:.25s;

    box-sizing:border-box;

}

.igv2-section input:focus,

.igv2-section textarea:focus,

.igv2-section select:focus{

    border-color:#2563eb;

    outline:none;

    box-shadow:

        0 0 0 4px rgba(37,99,235,.12);

}
/*
=========================================
Buttons
=========================================
*/

.igv2-button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:14px 24px;

    border-radius:12px;

    border:none;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}


.igv2-button-primary{

    background:#2563eb;

    color:#ffffff;

}


.igv2-button-primary:hover{

    background:#1d4ed8;

    transform:translateY(-2px);

}


.igv2-button-secondary{

    background:#e2e8f0;

    color:#0f172a;

}


.igv2-button-secondary:hover{

    background:#cbd5e1;

}


.igv2-button-danger{

    background:#dc2626;

    color:#ffffff;

}


.igv2-button-danger:hover{

    background:#b91c1c;

}



/*
=========================================
Invoice Items Table
=========================================
*/


.igv2-items-table{

    width:100%;

    border-collapse:collapse;

    margin-top:20px;

}


.igv2-items-table th{

    background:#eff6ff;

    color:#1e3a8a;

    text-align:left;

    padding:14px;

    font-size:14px;

    font-weight:700;

    border-bottom:2px solid #bfdbfe;

}


.igv2-items-table td{

    padding:12px;

    border-bottom:1px solid #e5e7eb;

    vertical-align:middle;

}


.igv2-items-table input{

    width:100%;

    padding:12px;

    border-radius:8px;

    border:1px solid #d1d5db;

    box-sizing:border-box;

}


.igv2-items-table input:focus{

    border-color:#2563eb;

    outline:none;

}



/*
=========================================
Add Item Button
=========================================
*/


#add-item{

    margin-top:20px;

}



/*
=========================================
Totals Box
=========================================
*/


.igv2-total-box{

    margin-top:30px;

    margin-left:auto;

    max-width:350px;

    background:#f8fafc;

    padding:25px;

    border-radius:15px;

    border:1px solid #e2e8f0;

}


.igv2-total-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:15px;

    font-size:16px;

    color:#334155;

}


.igv2-total-row strong{

    font-weight:700;

    color:#0f172a;

}


.igv2-grand-total{

    border-top:2px solid #2563eb;

    padding-top:15px;

    margin-top:15px;

    font-size:22px;

}


.igv2-grand-total strong{

    color:#2563eb;

}



/*
=========================================
Preview Area
=========================================
*/


.igv2-preview{

    background:#ffffff;

    padding:40px;

    border-radius:18px;

    border:1px solid #e5e7eb;

    box-shadow:

        0 12px 35px rgba(15,23,42,.08);

}


.igv2-preview-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    margin-bottom:30px;

}


.igv2-preview-logo{

    max-width:160px;

    height:auto;

}


.igv2-preview-title{

    font-size:34px;

    font-weight:800;

    color:#1d4ed8;

}



/*
=========================================
Responsive Design
=========================================
*/


@media(max-width:768px){


    .igv2-invoice-wrapper{

        padding:20px;

        margin:20px auto;

    }


    .igv2-invoice-wrapper h2{

        font-size:30px;

    }


    .igv2-card{

        padding:20px;

    }


    .igv2-items-table{

        display:block;

        overflow-x:auto;

    }


    .igv2-preview-header{

        flex-direction:column;

        gap:20px;

    }


}
/*
=========================================
Invoice Details / Meta Information
=========================================
*/


.igv2-invoice-meta{

    display:grid;

    grid-template-columns:

        repeat(auto-fit,minmax(220px,1fr));

    gap:20px;

    margin-bottom:30px;

}


.igv2-meta-box{

    background:#f8fafc;

    padding:18px;

    border-radius:12px;

    border:1px solid #e2e8f0;

}


.igv2-meta-box span{

    display:block;

    font-size:13px;

    font-weight:600;

    color:#64748b;

    margin-bottom:6px;

}


.igv2-meta-box strong{

    font-size:16px;

    color:#0f172a;

}



/*
=========================================
Status Badges
=========================================
*/


.igv2-status{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

}


.igv2-status-paid{

    background:#dcfce7;

    color:#166534;

}


.igv2-status-pending{

    background:#fef3c7;

    color:#92400e;

}


.igv2-status-overdue{

    background:#fee2e2;

    color:#991b1b;

}



/*
=========================================
Payment Terms Section
=========================================
*/


.igv2-payment-box{

    background:#eff6ff;

    border-left:5px solid #2563eb;

    padding:20px;

    border-radius:12px;

    margin-top:25px;

}


.igv2-payment-box h4{

    margin-top:0;

    margin-bottom:10px;

    color:#1e3a8a;

    font-size:18px;

}


.igv2-payment-box p{

    margin:0;

    color:#334155;

    line-height:1.6;

}



/*
=========================================
Notes Section
=========================================
*/


.igv2-notes{

    margin-top:30px;

}


.igv2-notes textarea{

    min-height:120px;

    resize:vertical;

}



/*
=========================================
Footer Area
=========================================
*/


.igv2-footer{

    margin-top:40px;

    padding-top:25px;

    border-top:1px solid #e5e7eb;

    text-align:center;

    color:#64748b;

    font-size:14px;

}


.igv2-footer strong{

    color:#2563eb;

}



/*
=========================================
Action Area
=========================================
*/


.igv2-actions{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:15px;

    margin-top:35px;

}



/*
=========================================
Loading Animation
=========================================
*/


.igv2-loading{

    display:none;

    text-align:center;

    padding:20px;

}


.igv2-loading.active{

    display:block;

}


.igv2-spinner{

    width:40px;

    height:40px;

    border-radius:50%;

    border:4px solid #dbeafe;

    border-top-color:#2563eb;

    animation:igv2-spin 1s linear infinite;

    margin:auto;

}


@keyframes igv2-spin{


    from{

        transform:rotate(0deg);

    }


    to{

        transform:rotate(360deg);

    }

}



/*
=========================================
IGV2 PRINT / PDF OPTIMIZATION
=========================================
*/


@media print {


    /*
    Hide entire webpage
    */

    body * {

        visibility: hidden !important;

    }



    /*
    Show only generated invoice
    */

    #igv2-print-area,
    #igv2-print-area * {

        visibility: visible !important;

    }



    /*
    Position invoice at top of page
    */

    #igv2-print-area {

        position: absolute !important;

        left: 0 !important;

        top: 0 !important;

        width: 100% !important;

        display: block !important;

        background: #ffffff !important;

    }



    /*
    Invoice styling
    */

    .igv2-pdf-invoice {

        display: block !important;

        width: 100% !important;

        max-width: 100% !important;

        padding: 30px !important;

        margin: 0 !important;

        box-shadow: none !important;

        border: none !important;

        font-family: Arial, sans-serif;

        color: #000000;

    }



    /*
    Invoice tables
    */

    .igv2-pdf-invoice table {

        width: 100% !important;

        border-collapse: collapse !important;

    }



    .igv2-pdf-invoice th,
    .igv2-pdf-invoice td {

        border: 1px solid #ddd !important;

        padding: 8px !important;

        text-align: left;

    }



    /*
    Hide form controls and buttons
    */

    button,
    input,
    textarea,
    select,
    .igv2-actions,
    #add-item,
    .igv2-button {

        display: none !important;

    }



    /*
    Remove page margins
    */

    @page {

        margin: 0.5in;

    }


}