/* =========================================================
   VANCE CEYLON — CLEAN PAYMENT RECEIPT / INVOICE CSS
   IMPORTANT:
   This file contains CSS ONLY.
   JavaScript that had accidentally been pasted into the old
   .css file has been removed, which is what caused VS Code
   to show many red errors.
========================================================= */

/* =========================================================
   VANCE CEYLON — PAYMENT RECEIPT / INVOICE
   Invoice opens ABOVE My Orders dialog
========================================================= */


/* VIEW INVOICE BUTTON */

.vance-invoice-button{
    margin-top:14px;
    min-height:44px;
    padding:0 18px;

    border:1px solid rgba(255,255,255,.20);
    border-radius:12px;

    background:#fff;
    color:#080808;

    font:800 11px/1 Arial,Helvetica,sans-serif;

    letter-spacing:.08em;
    text-transform:uppercase;

    cursor:pointer;

    transition:
        transform .25s ease,
        opacity .25s ease;
}


.vance-invoice-button:hover{
    transform:translateY(-2px);
}


.vance-invoice-button:active{
    transform:scale(.97);
}


/* =========================================================
   INVOICE MODAL DIALOG
========================================================= */

dialog.vance-invoice-overlay{

    position:fixed !important;

    inset:0 !important;

    width:100vw !important;
    height:100dvh !important;

    max-width:none !important;
    max-height:none !important;

    margin:0 !important;

    padding:34px 18px !important;

    border:0 !important;

    box-sizing:border-box !important;

    overflow-y:auto !important;

    background:
        rgba(0,0,0,.88) !important;

    color:#111;

    z-index:999999 !important;

    justify-content:center;
    align-items:flex-start;
}


/*
 showModal() places this dialog
 in the browser's TOP LAYER.

 This is what makes it appear
 ABOVE My Orders.
*/

dialog.vance-invoice-overlay[open]{
    display:flex !important;
}


/* DARK BACKDROP BEHIND INVOICE */

dialog.vance-invoice-overlay::backdrop{

    background:
        rgba(0,0,0,.68);

    backdrop-filter:
        blur(9px);

    -webkit-backdrop-filter:
        blur(9px);
}


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

.vance-invoice-wrap{

    width:
        min(
            920px,
            100%
        );

    margin:auto;
}


/* =========================================================
   TOP BUTTONS
========================================================= */

.vance-invoice-actions{

    display:flex;

    justify-content:
        flex-end;

    gap:10px;

    margin-bottom:12px;
}


.vance-invoice-actions button{

    min-height:42px;

    padding:
        0 17px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius:11px;

    font-weight:800;

    cursor:pointer;
}


.vance-invoice-actions
.vance-invoice-print{

    background:#fff;
    color:#111;
}


.vance-invoice-actions
.vance-invoice-close{

    background:#151515;
    color:#fff;
}


/* =========================================================
   INVOICE SHEET
========================================================= */

.vance-invoice-sheet{

    width:100%;

    box-sizing:border-box;

    padding:38px;

    border-radius:20px;

    background:#fff;
    color:#111;

    box-shadow:
        0 35px 110px
        rgba(0,0,0,.45);

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


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

.vance-invoice-header{

    display:flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:28px;

    padding-bottom:25px;

    border-bottom:
        2px solid #111;
}


/* =========================================================
   STRAIGHT ONE-LINE LOGO
========================================================= */

.vance-invoice-wordmark{

    white-space:
        nowrap !important;

    font-size:
        clamp(
            24px,
            4vw,
            42px
        );

    line-height:1;

    font-weight:900;

    letter-spacing:.12em;

    color:#111;
}


.vance-invoice-tagline{

    margin-top:9px;

    color:#777;

    font-size:9px;

    font-weight:800;

    letter-spacing:.25em;
}


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

.vance-invoice-title{
    text-align:right;
}


.vance-invoice-title small{

    display:block;

    color:#777;

    font-size:9px;

    font-weight:800;

    letter-spacing:.12em;

    text-transform:
        uppercase;
}


.vance-invoice-title h2{

    margin:
        7px 0 0;

    font-size:21px;

    overflow-wrap:anywhere;
}


/* =========================================================
   INFORMATION BOXES
========================================================= */

.vance-invoice-meta{

    display:grid;

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

    gap:12px;

    margin-top:24px;
}


.vance-invoice-box,
.vance-invoice-customer{

    padding:16px;

    border:
        1px solid #dedede;

    border-radius:14px;
}


.vance-invoice-customer{
    margin-top:12px;
}


.vance-invoice-box small,
.vance-invoice-customer small{

    display:block;

    margin-bottom:8px;

    color:#777;

    font-size:9px;

    font-weight:800;

    letter-spacing:.11em;

    text-transform:
        uppercase;
}


.vance-invoice-box strong,
.vance-invoice-customer strong{

    font-size:13px;
}


.vance-invoice-box p,
.vance-invoice-customer p{

    margin:
        6px 0 0;

    color:#555;

    font-size:11px;

    line-height:1.55;

    overflow-wrap:anywhere;
}


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

.vance-invoice-table-wrap{

    margin-top:24px;

    overflow-x:auto;
}


.vance-invoice-table{

    width:100%;

    border-collapse:
        collapse;
}


.vance-invoice-table th{

    padding:
        11px 8px;

    border-bottom:
        1px solid #111;

    text-align:left;

    font-size:9px;

    letter-spacing:.09em;

    text-transform:
        uppercase;
}


.vance-invoice-table td{

    padding:
        14px 8px;

    border-bottom:
        1px solid #e7e7e7;

    font-size:11px;

    vertical-align:top;
}


.vance-invoice-table
.right{

    text-align:right;
}


.vance-invoice-table
.center{

    text-align:center;
}


.vance-invoice-item-meta{

    margin-top:5px;

    color:#666;

    font-size:10px;
}


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

.vance-invoice-total{

    width:
        min(
            410px,
            100%
        );

    margin:
        24px 0 0 auto;
}


.vance-invoice-total
> div{

    display:flex;

    justify-content:
        space-between;

    gap:20px;

    padding:
        7px 0;

    font-size:12px;
}


.vance-invoice-total
.grand-total{

    margin-top:8px;

    padding-top:14px;

    border-top:
        2px solid #111;

    font-size:18px;
}


/* =========================================================
   PAYMENT VERIFIED
========================================================= */

.vance-invoice-paid{

    margin-top:12px;

    padding:13px;

    border-radius:12px;

    background:#111;

    color:#fff;

    text-align:center;

    font-size:11px;

    font-weight:900;

    letter-spacing:.11em;

    text-transform:
        uppercase;
}


/* =========================================================
   PAYMENT REFERENCE
========================================================= */

.vance-invoice-reference{

    margin-top:12px;

    padding:
        12px 14px;

    border:
        1px dashed #aaa;

    border-radius:12px;

    font-size:11px;
}


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

.vance-invoice-footer{

    display:flex;

    flex-wrap:wrap;

    justify-content:
        space-between;

    gap:12px;

    margin-top:28px;

    padding-top:18px;

    border-top:
        1px solid #ddd;

    color:#666;

    font-size:9px;

    letter-spacing:.06em;
}


/* =========================================================
   MOBILE
========================================================= */

@media(
    max-width:700px
){

    dialog.vance-invoice-overlay{

        padding:
            0 !important;
    }


    .vance-invoice-wrap{

        width:100%;
    }


    .vance-invoice-actions{

        position:sticky;

        top:0;

        z-index:5;

        margin:0;

        padding:10px;

        background:
            rgba(0,0,0,.92);
    }


    .vance-invoice-sheet{

        min-height:
            100dvh;

        border-radius:0;

        padding:22px;
    }


    .vance-invoice-header{

        display:block;
    }


    .vance-invoice-title{

        margin-top:23px;

        text-align:left;
    }


    .vance-invoice-meta{

        grid-template-columns:
            1fr;
    }


    .vance-invoice-wordmark{

        font-size:25px;

        letter-spacing:.08em;
    }
}


/* =========================================================
   PRINT / SAVE PDF
========================================================= */

@media print{

    body *{

        visibility:
            hidden !important;
    }


    #vanceInvoiceSheet,
    #vanceInvoiceSheet *{

        visibility:
            visible !important;
    }


    #vanceInvoiceSheet{

        position:absolute !important;

        inset:
            0 auto auto 0 !important;

        width:
            100% !important;

        padding:
            0 !important;

        border-radius:
            0 !important;

        box-shadow:
            none !important;
    }
}