/* =========================================================
   VANCE CEYLON — WHATSAPP + UNPAID RECEIPT ADD-ON
   SAFE CSS ONLY — NO EXISTING CSS NEEDS TO BE REMOVED
========================================================= */

/* ---------------------------------------------------------
   MY ORDERS — PENDING PAYMENT TOOLS
--------------------------------------------------------- */

.vance-pending-tools{
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid rgba(255,255,255,.12);
}

.vance-pending-status{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:5px 9px;
    margin-bottom:8px;

    border:1px solid rgba(255,255,255,.18);
    border-radius:999px;

    background:rgba(255,255,255,.055);
    color:#fff;

    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.vance-pending-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.vance-pending-receipt-button,
.vance-pending-whatsapp-button{
    min-height:36px;
    padding:0 12px;

    border-radius:10px;
    border:1px solid rgba(255,255,255,.18);

    font:inherit;
    font-size:9px;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;

    cursor:pointer;
}

.vance-pending-receipt-button{
    background:#f7f7f4;
    color:#090909;
}

.vance-pending-whatsapp-button{
    background:rgba(255,255,255,.06);
    color:#fff;
}


/* ---------------------------------------------------------
   FLOATING WHATSAPP SUPPORT
--------------------------------------------------------- */

.vance-whatsapp-float{
    position:fixed;
    right:18px;
    bottom:18px;
    z-index:8500;

    display:flex;
    align-items:center;
    gap:9px;

    min-height:48px;
    padding:7px 12px 7px 7px;

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

    background:#0b0b0b;
    color:#fff;

    box-shadow:0 12px 34px rgba(0,0,0,.28);

    font:inherit;
    cursor:pointer;
}

.vance-whatsapp-mark{
    display:grid;
    place-items:center;

    width:34px;
    height:34px;

    border-radius:50%;

    background:#fff;
    color:#090909;

    font-size:10px;
    font-weight:900;
    letter-spacing:.04em;
}

.vance-whatsapp-copy{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:1px;
}

.vance-whatsapp-copy strong{
    font-size:10px;
    line-height:1.1;
    letter-spacing:.05em;
}

.vance-whatsapp-copy small{
    opacity:.62;
    font-size:8px;
    line-height:1.1;
}


/* ---------------------------------------------------------
   UNPAID ORDER RECEIPT OVERLAY
--------------------------------------------------------- */

.vance-unpaid-overlay{
    position:fixed;
    inset:0;
    z-index:2147483000;

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

    overflow:auto;

    padding:26px 14px;

    background:rgba(0,0,0,.88);
    backdrop-filter:blur(8px);
}

.vance-unpaid-wrap{
    width:min(900px, 100%);
    margin:auto;
}

.vance-unpaid-actions{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:8px;

    margin-bottom:10px;
}

.vance-unpaid-actions button{
    min-height:40px;
    padding:0 14px;

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

    font:inherit;
    font-size:9px;
    font-weight:800;
    letter-spacing:.055em;
    text-transform:uppercase;

    cursor:pointer;
}

.vance-unpaid-secondary{
    background:#111;
    color:#fff;
}

.vance-unpaid-whatsapp{
    background:#fff;
    color:#090909;
}

.vance-unpaid-sheet{
    width:100%;

    padding:34px;

    border-radius:20px;

    background:#fff;
    color:#111;

    box-shadow:0 25px 80px rgba(0,0,0,.45);
}

.vance-unpaid-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:24px;

    padding-bottom:22px;
    border-bottom:1px solid #dedede;
}

.vance-unpaid-wordmark{
    font-size:24px;
    font-weight:950;
    letter-spacing:.09em;
    white-space:nowrap;
}

.vance-unpaid-tagline{
    margin-top:5px;

    font-size:8px;
    font-weight:700;
    letter-spacing:.18em;
}

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

.vance-unpaid-title small{
    display:block;
    margin-bottom:5px;

    font-size:9px;
    font-weight:800;
    letter-spacing:.10em;
    text-transform:uppercase;
}

.vance-unpaid-title h2{
    margin:0;

    font-size:18px;
    font-weight:950;
    letter-spacing:.04em;
}

.vance-unpaid-status{
    margin:18px 0;

    padding:12px 14px;

    border:1px solid #111;
    border-radius:10px;

    font-size:11px;
    font-weight:950;
    letter-spacing:.10em;
    text-align:center;
}

.vance-unpaid-meta{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;

    margin-bottom:12px;
}

.vance-unpaid-box,
.vance-unpaid-customer{
    padding:15px;

    border:1px solid #dfdfdf;
    border-radius:12px;
}

.vance-unpaid-box small,
.vance-unpaid-customer small{
    display:block;

    margin-bottom:6px;

    font-size:8px;
    font-weight:800;
    letter-spacing:.09em;
    text-transform:uppercase;

    opacity:.58;
}

.vance-unpaid-box strong,
.vance-unpaid-customer strong{
    display:block;

    font-size:11px;
    overflow-wrap:anywhere;
}

.vance-unpaid-box p,
.vance-unpaid-customer p{
    margin:5px 0 0;

    font-size:10px;
    line-height:1.5;
}

.vance-unpaid-customer{
    margin-bottom:18px;
}

.vance-unpaid-table-wrap{
    overflow-x:auto;
}

.vance-unpaid-table{
    width:100%;
    border-collapse:collapse;
}

.vance-unpaid-table th,
.vance-unpaid-table td{
    padding:12px 8px;

    border-bottom:1px solid #e3e3e3;

    font-size:10px;
    text-align:left;
    vertical-align:top;
}

.vance-unpaid-table th{
    font-size:8px;
    letter-spacing:.07em;
    text-transform:uppercase;
}

.vance-unpaid-table .center{
    text-align:center;
}

.vance-unpaid-table .right{
    text-align:right;
}

.vance-unpaid-item-meta{
    margin-top:3px;

    font-size:8px;
    opacity:.60;
}

.vance-unpaid-total{
    width:min(360px, 100%);

    margin:18px 0 18px auto;
}

.vance-unpaid-total > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    padding:6px 0;

    font-size:10px;
}

.vance-unpaid-total .grand-total{
    margin-top:6px;
    padding-top:12px;

    border-top:1px solid #111;

    font-size:13px;
    font-weight:950;
}

.vance-unpaid-warning{
    margin-top:18px;
    padding:16px;

    border:1px solid #111;
    border-radius:12px;
}

.vance-unpaid-warning strong{
    display:block;

    margin-bottom:7px;

    font-size:10px;
    letter-spacing:.08em;
}

.vance-unpaid-warning p{
    margin:5px 0;

    font-size:10px;
    line-height:1.55;
}

.vance-unpaid-delivery{
    display:flex;
    flex-direction:column;
    gap:3px;

    margin-top:14px;
    padding:14px;

    border:1px solid #e0e0e0;
    border-radius:12px;

    font-size:10px;
}

.vance-unpaid-delivery small{
    opacity:.62;
}

.vance-unpaid-footer{
    display:flex;
    flex-direction:column;
    gap:4px;

    margin-top:22px;
    padding-top:18px;

    border-top:1px solid #dedede;

    font-size:9px;
}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media(max-width:650px){

    .vance-whatsapp-float{
        right:12px;
        bottom:12px;
    }

    .vance-whatsapp-copy small{
        display:none;
    }

    .vance-unpaid-overlay{
        padding:12px 8px;
    }

    .vance-unpaid-sheet{
        padding:20px 15px;
        border-radius:16px;
    }

    .vance-unpaid-header{
        flex-direction:column;
        gap:13px;
    }

    .vance-unpaid-title{
        text-align:left;
    }

    .vance-unpaid-meta{
        grid-template-columns:1fr;
    }

    .vance-unpaid-wordmark{
        font-size:20px;
    }

    .vance-unpaid-actions{
        justify-content:stretch;
    }

    .vance-unpaid-actions button{
        flex:1 1 auto;
    }

    .vance-pending-buttons{
        flex-direction:column;
    }

    .vance-pending-receipt-button,
    .vance-pending-whatsapp-button{
        width:100%;
    }
}


/* ---------------------------------------------------------
   PRINT / SAVE PDF — PRINT ONLY THE UNPAID ORDER RECEIPT
--------------------------------------------------------- */

@media print{

    body *{
        visibility:hidden !important;
    }

    #vancePendingReceiptOverlay,
    #vancePendingReceiptOverlay *{
        visibility:visible !important;
    }

    #vancePendingReceiptOverlay{
        position:absolute !important;
        inset:0 !important;

        padding:0 !important;

        background:#fff !important;
    }

    .vance-unpaid-actions{
        display:none !important;
    }

    .vance-unpaid-wrap{
        width:100% !important;
    }

    .vance-unpaid-sheet{
        padding:18mm !important;

        border-radius:0 !important;
        box-shadow:none !important;
    }

    .vance-whatsapp-float{
        display:none !important;
    }
}


/* =========================================================
   VANCE CEYLON — PENDING RECEIPT LEGAL NAME + DELIVERY READABILITY
   ========================================================= */

/* Legal company name directly under the visual brand name */
.vance-unpaid-legal-name{
    margin-top:5px;
    color:#111;
    font-size:12px;
    font-weight:900;
    letter-spacing:.10em;
    line-height:1.35;
}

/* Keep the tagline readable below the legal name */
.vance-unpaid-tagline{
    margin-top:6px !important;
    color:#111 !important;
    opacity:1 !important;
    font-size:10px !important;
    font-weight:800 !important;
}

/* Make delivery information clearly visible */
.vance-unpaid-delivery{
    margin-top:18px !important;
    padding:16px !important;
    border:1px solid #cfcfcf !important;
    background:#f7f7f7 !important;
    color:#111 !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

/* "Estimated Delivery" */
.vance-unpaid-delivery > strong{
    color:#111 !important;
    font-size:16px !important;
    font-weight:900 !important;
    line-height:1.35 !important;
}

/* "1–8 working days..." */
.vance-unpaid-delivery > span{
    color:#111 !important;
    font-size:15px !important;
    font-weight:700 !important;
    line-height:1.5 !important;
}

/* Weekends / public holidays note */
.vance-unpaid-delivery > small{
    color:#111 !important;
    opacity:1 !important;
    font-size:14px !important;
    font-weight:700 !important;
    line-height:1.5 !important;
}

/* Footer legal seller name */
.vance-unpaid-footer strong{
    color:#111 !important;
    font-size:11px !important;
    font-weight:900 !important;
}

/* Mobile */
@media(max-width:650px){
    .vance-unpaid-legal-name{
        font-size:11px !important;
        letter-spacing:.08em !important;
    }

    .vance-unpaid-delivery{
        font-size:13px !important;
        padding:14px !important;
    }

    .vance-unpaid-delivery > strong{
        font-size:15px !important;
    }

    .vance-unpaid-delivery > span{
        font-size:14px !important;
    }

    .vance-unpaid-delivery > small{
        font-size:13px !important;
    }
}


/* =========================================================
   VANCE CEYLON — ONE A4 PAGE PRINT FIX
   Chrome / Edge / Android print
   ========================================================= */
@media print {

    @page {
        size: A4 portrait;
        margin: 7mm;
    }

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    /* IMPORTANT:
       display:none removes the rest of the website from print layout.
       visibility:hidden alone can still leave many blank print pages. */
    body > *:not(#vancePendingReceiptOverlay) {
        display: none !important;
    }

    #vancePendingReceiptOverlay {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    #vancePendingReceiptOverlay,
    #vancePendingReceiptOverlay * {
        visibility: visible !important;
    }

    .vance-unpaid-actions,
    .vance-whatsapp-float {
        display: none !important;
    }

    .vance-unpaid-wrap {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Compact receipt so a normal order fits one A4 sheet */
    .vance-unpaid-sheet {
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 7mm !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;

        /* Chromium print scaling */
        zoom: 0.78 !important;
    }

    /* Reduce vertical gaps only for printing */
    .vance-unpaid-header {
        padding-bottom: 10px !important;
        gap: 12px !important;
    }

    .vance-unpaid-status {
        margin: 9px 0 !important;
        padding: 7px 10px !important;
    }

    .vance-unpaid-meta {
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    .vance-unpaid-box,
    .vance-unpaid-customer {
        padding: 9px !important;
    }

    .vance-unpaid-customer {
        margin-bottom: 9px !important;
    }

    .vance-unpaid-table th,
    .vance-unpaid-table td {
        padding: 6px 5px !important;
    }

    .vance-unpaid-total {
        margin: 9px 0 9px auto !important;
    }

    .vance-unpaid-total > div {
        padding: 3px 0 !important;
    }

    .vance-unpaid-warning {
        margin-top: 9px !important;
        padding: 9px !important;
    }

    .vance-unpaid-delivery {
        margin-top: 9px !important;
        padding: 9px !important;
    }

    .vance-unpaid-footer {
        margin-top: 10px !important;
        padding-top: 8px !important;
    }

    /* Keep important receipt sections together */
    .vance-unpaid-header,
    .vance-unpaid-status,
    .vance-unpaid-meta,
    .vance-unpaid-customer,
    .vance-unpaid-total,
    .vance-unpaid-warning,
    .vance-unpaid-delivery,
    .vance-unpaid-footer,
    .vance-unpaid-table tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Avoid accidental extra print pages from fixed/min-height rules */
    #vancePendingReceiptOverlay::before,
    #vancePendingReceiptOverlay::after,
    .vance-unpaid-sheet::before,
    .vance-unpaid-sheet::after {
        display: none !important;
    }
}


/* =========================================================
   VANCE CEYLON — A5 ONE-SHEET CLEAR RECEIPT PRINT
   Final print override
   ========================================================= */
@media print {

    @page {
        size: A5 portrait;
        margin: 5mm;
    }

    html,
    body {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    /* Print ONLY the receipt. This prevents extra blank pages. */
    body > *:not(#vancePendingReceiptOverlay) {
        display: none !important;
    }

    #vancePendingReceiptOverlay {
        display: block !important;
        visibility: visible !important;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        background: #fff !important;
    }

    #vancePendingReceiptOverlay,
    #vancePendingReceiptOverlay * {
        visibility: visible !important;
    }

    .vance-unpaid-actions,
    .vance-whatsapp-float {
        display: none !important;
    }

    .vance-unpaid-wrap {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .vance-unpaid-sheet {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 4.5mm !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        overflow: visible !important;

        /* Do not shrink the entire receipt like the old A4 version */
        zoom: 1 !important;

        font-size: 11px !important;
        line-height: 1.32 !important;
        color: #111 !important;
    }

    /* ---------- HEADER ---------- */
    .vance-unpaid-header {
        gap: 8px !important;
        padding-bottom: 7px !important;
        margin-bottom: 0 !important;
    }

    .vance-unpaid-wordmark {
        font-size: 20px !important;
        line-height: 1.05 !important;
        letter-spacing: .075em !important;
    }

    .vance-unpaid-legal-name {
        margin-top: 2px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
        letter-spacing: .07em !important;
    }

    .vance-unpaid-tagline {
        margin-top: 2px !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
    }

    .vance-unpaid-title small {
        margin-bottom: 2px !important;
        font-size: 8.5px !important;
    }

    .vance-unpaid-title h2 {
        font-size: 17px !important;
        line-height: 1.05 !important;
    }

    /* ---------- STATUS ---------- */
    .vance-unpaid-status {
        margin: 6px 0 !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    /* ---------- ORDER / PAYMENT BOXES ---------- */
    .vance-unpaid-meta {
        gap: 6px !important;
        margin-bottom: 6px !important;
    }

    .vance-unpaid-box,
    .vance-unpaid-customer {
        padding: 7px !important;
        border-radius: 7px !important;
    }

    .vance-unpaid-box small,
    .vance-unpaid-customer small {
        margin-bottom: 3px !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
        opacity: 1 !important;
        color: #222 !important;
    }

    .vance-unpaid-box strong,
    .vance-unpaid-customer strong {
        font-size: 11px !important;
        line-height: 1.25 !important;
    }

    .vance-unpaid-box p,
    .vance-unpaid-customer p {
        margin: 2px 0 0 !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        color: #222 !important;
    }

    .vance-unpaid-customer {
        margin-bottom: 6px !important;
    }

    /* ---------- ITEMS TABLE ---------- */
    .vance-unpaid-table th,
    .vance-unpaid-table td {
        padding: 4px 4px !important;
        font-size: 9.5px !important;
        line-height: 1.25 !important;
    }

    .vance-unpaid-table th {
        font-size: 8px !important;
        letter-spacing: .04em !important;
    }

    .vance-unpaid-item-meta {
        margin-top: 1px !important;
        font-size: 8.5px !important;
        line-height: 1.2 !important;
        opacity: .8 !important;
    }

    /* ---------- TOTALS ---------- */
    .vance-unpaid-total {
        width: min(245px, 100%) !important;
        margin: 5px 0 5px auto !important;
    }

    .vance-unpaid-total > div {
        padding: 2px 0 !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .vance-unpaid-total .grand-total {
        margin-top: 2px !important;
        padding-top: 5px !important;
        font-size: 12px !important;
    }

    /* ---------- PAYMENT REQUIRED ---------- */
    .vance-unpaid-warning {
        margin-top: 6px !important;
        padding: 7px !important;
        border-radius: 7px !important;
    }

    .vance-unpaid-warning strong {
        margin-bottom: 3px !important;
        font-size: 10px !important;
        line-height: 1.2 !important;
    }

    .vance-unpaid-warning p {
        margin: 2px 0 !important;
        font-size: 9.5px !important;
        line-height: 1.3 !important;
    }

    /* ---------- DELIVERY ---------- */
    .vance-unpaid-delivery {
        gap: 1px !important;
        margin-top: 6px !important;
        padding: 7px !important;
        border-radius: 7px !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .vance-unpaid-delivery > strong {
        font-size: 13px !important;
        line-height: 1.2 !important;
    }

    .vance-unpaid-delivery > span {
        font-size: 11.5px !important;
        line-height: 1.3 !important;
    }

    .vance-unpaid-delivery > small {
        font-size: 10px !important;
        line-height: 1.3 !important;
        opacity: 1 !important;
        color: #111 !important;
    }

    /* ---------- FOOTER ---------- */
    .vance-unpaid-footer {
        gap: 1px !important;
        margin-top: 6px !important;
        padding-top: 5px !important;
        font-size: 8.5px !important;
        line-height: 1.25 !important;
    }

    .vance-unpaid-footer strong {
        font-size: 9.5px !important;
        line-height: 1.2 !important;
    }

    /* Keep important blocks together on one A5 sheet */
    .vance-unpaid-header,
    .vance-unpaid-status,
    .vance-unpaid-meta,
    .vance-unpaid-customer,
    .vance-unpaid-total,
    .vance-unpaid-warning,
    .vance-unpaid-delivery,
    .vance-unpaid-footer,
    .vance-unpaid-table tr {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
    }

    /* Remove any decorative pseudo-elements that can create overflow */
    #vancePendingReceiptOverlay::before,
    #vancePendingReceiptOverlay::after,
    .vance-unpaid-sheet::before,
    .vance-unpaid-sheet::after {
        display: none !important;
    }
}