/* DFI official invoice (scoped) */
.invoice{--navy:#0251b0;--gold:#f5a30a;--red:#ce1126;--green:#0251b0;--ink:#164cb0;--line:#dde7f5;color:#164cb0;line-height:1.3;text-align:left}
.invoice *{box-sizing:border-box}
.invoice p,.invoice h1,.invoice h2,.invoice h3,.invoice h4{margin:0}
.invoice img{max-width:none}
.invoice{width: 850px; max-width: 100%; background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.15); border: 1px solid var(--gold); position: relative; font-family: 'Times New Roman', Times, serif}
.invoice::before{content: "OFFICIAL"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-45deg); font-size: 70px; color: rgba(245,163,10,.05); font-weight: bold; letter-spacing: 15px; pointer-events: none; z-index: 0}
.invoice.paid::before{content: "PAID"; color: rgba(20,68,159,.08); font-size: 120px}
.invoice .top-strip{height: 6px; background: linear-gradient(to right, #ce1126 33.33%, #f4d03f 33.33%, #f4d03f 66.66%, #14449f 66.66%)}
.invoice .header{padding: 20px 30px; border-bottom: 3px double var(--gold); position: relative; z-index: 1; background: #fff; display: flex; align-items: center; gap: 20px}
.invoice .seal{width: 80px; height: 80px; min-width: 80px; object-fit: contain}
.invoice .header-text{flex: 1; text-align: center}
.invoice .header-text h1{font-size: 20px; color: var(--navy); letter-spacing: 1px; text-transform: uppercase; border-bottom: 1px solid var(--gold); padding-bottom: 5px; margin-bottom: 5px}
.invoice .header-text h2{font-size: 16px; color: var(--green); font-weight: normal; letter-spacing: 1px; margin-bottom: 3px}
.invoice .header-text p{font-size: 11px; color: #4d6fac; letter-spacing: .5px}
.invoice .title-section{display: flex; justify-content: space-between; align-items: center; padding: 12px 30px; background: #eff4fc; border-bottom: 1px dashed var(--gold); position: relative; z-index: 1}
.invoice .title-section h3{font-size: 26px; color: var(--navy); text-transform: uppercase; letter-spacing: 2px}
.invoice-meta{text-align: right } .invoice-meta p { font-size: 12px; margin: 2px 0 } .invoice-meta strong { color: var(--navy); min-width: 70px; display: inline-block}
.invoice .content{padding: 20px 30px; position: relative; z-index: 1; background: transparent}
.invoice .address-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px}
.invoice .address-box{border: 1px solid var(--line); padding: 12px; background: #eff4fc}
.invoice .address-box h4,.invoice .payment-info h4{color: var(--navy); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--gold); padding-bottom: 3px; margin-bottom: 6px}
.invoice .address-box p{font-size: 11px; line-height: 1.5}
.invoice .items-table{margin: 20px 0; border: 1px solid var(--gold); background: #fff}
.invoice table{width: 100%; border-collapse: collapse}
.invoice th{background: var(--navy); color: #fff; padding: 8px 12px; font-size: 12px; text-align: left; font-weight: normal; text-transform: uppercase; letter-spacing: .5px } th:last-child { text-align: right}
.invoice td{padding: 8px 12px; border-bottom: 1px solid var(--line); font-size: 12px } td:last-child { text-align: right; font-weight: bold } tr:last-child td { border-bottom: 0}
.invoice .total-section{display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 15px 0 20px}
.invoice .words{font-size: 11px; font-style: italic; color: #4d6fac; max-width: 460px; line-height: 1.4 } .words b { font-style: normal; color: var(--navy)}
.invoice .total-box{width: 310px; border: 2px solid var(--gold); background: #eff4fc; flex: none}
.invoice .total-row{white-space: nowrap; display: flex; justify-content: space-between; padding: 8px 12px; background: var(--navy); color: #fff; font-weight: bold; font-size: 14px; gap: 10px}
.invoice .payment-details{margin: 20px 0; padding: 15px; border: 1px solid var(--gold); background: #eff4fc}
.invoice .payment-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px}
.invoice .payment-item{font-size: 11px } .payment-item strong { display: block; margin-bottom: 2px } .payment-item p { color: #4d6fac; line-height: 1.3}
.invoice .footer{margin-top: 25px; padding-top: 15px; border-top: 3px double var(--gold)}
.invoice .sig-row{display: flex; justify-content: space-between; align-items: center}
.invoice .qr-left{display: flex; flex-direction: column; align-items: center; width: 120px}
.invoice .qr-code{width: 90px; height: 90px; background: #fff; border: 2px solid var(--navy); padding: 3px } .qr-code svg { width: 100%; height: 100%; display: block}
.invoice .qr-label{font-size: 8px; color: var(--navy); margin-top: 3px; font-weight: bold; text-transform: uppercase}
.invoice .signature-center{flex: 1; display: flex; justify-content: center } .signature-box { text-align: center}
.invoice .signature-line{width: 190px; border-top: 2px solid var(--navy); margin: 34px auto 3px } .signature-box p { font-size: 11px; color: #4d6fac; line-height: 1.25 } .signature-box .title { font-size: 10px; color: #7590c2}
.invoice .stamp-right{display: flex; flex-direction: column; align-items: center; width: 120px}
.invoice .stamp-circle{width: 78px; height: 78px; border: 3px double var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; transform: rotate(-5deg); background: rgba(206,17,38,.02)}
.invoice .stamp-circle span{color: var(--red); font-size: 9px; font-weight: bold; text-transform: uppercase; text-align: center; line-height: 1.2}
.invoice.paid .stamp-circle{border-color: var(--green) } .paid .stamp-circle span { color: var(--green)}
.invoice .date-stamp{text-align: center; font-size: 10px; color: #4d6fac; font-style: italic; margin-top: 4px; line-height: 1.25}
.invoice .footer-note{text-align: center; margin-top: 15px; padding: 8px; font-size: 9px; color: #7590c2; border-top: 1px dotted var(--gold); line-height: 1.5}
.invoice .ref-number{text-align: right; font-size: 9px; color: #a6b8d8; margin-top: 4px}
.invoice{font-family:'Times New Roman',Times,serif}
.invoice-wrap{display:flex;justify-content:center}
@media print{
 @page{size:A4;margin:.3in}
 body.pbody *{visibility:hidden!important}
 body.pbody .invoice,body.pbody .invoice *{visibility:visible!important}
 body.pbody .invoice{position:absolute!important;left:0;top:0;width:100%!important;max-width:100%!important;zoom:1!important;box-shadow:none!important;margin:0!important}
 .invoice .top-strip,.invoice th,.invoice .total-row,.invoice .stamp-circle,.invoice .address-box,.invoice .payment-details,.invoice .title-section,.invoice .total-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}