@media print { 
    .no-print { display: none !important; } 
    body { margin: 0; padding: 20px; font-size: 12px; }
    .page-break { page-break-before: always; }
}

* { box-sizing: border-box; }
body { 
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 
    line-height: 1.6; 
    color: #333; 
    margin: 0; 
    padding: 20px; 
    background: #fff;
}

/* Header Styles */
.invoice-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    margin-bottom: 30px; 
    padding-bottom: 20px; 
    border-bottom: 3px solid #007bff; 
}

.company-section { flex: 1; }
.company-name { 
    color: #007bff; 
    margin: 0; 
    font-size: 24px; 
    font-weight: bold; 
}
.motto { 
    font-style: italic; 
    color: #666; 
    margin: 5px 0; 
}
.contact-info p { 
    margin: 2px 0; 
    font-size: 14px; 
}
.contact-info i { 
    width: 16px; 
    color: #007bff; 
    margin-right: 8px; 
}

.invoice-info { 
    text-align: right; 
    flex: 0 0 300px; 
}
.invoice-title { 
    font-size: 36px; 
    color: #007bff; 
    margin: 0 0 15px 0; 
    font-weight: bold; 
}
.invoice-details table { 
    width: 100%; 
    border-collapse: collapse; 
}
.invoice-details td { 
    padding: 4px 8px; 
    border: 1px solid #ddd; 
    background: #f8f9fa; 
}

/* Body Styles */
.invoice-body { margin-bottom: 30px; }

.customer-section, .service-section { 
    margin-bottom: 25px; 
    padding: 15px; 
    background: #f8f9fa; 
    border-radius: 6px; 
}

.customer-section h3, .service-section h3 { 
    color: #007bff; 
    margin: 0 0 15px 0; 
    font-size: 18px; 
    border-bottom: 2px solid #007bff; 
    padding-bottom: 5px; 
}

.customer-info table, .service-table { 
    width: 100%; 
    border-collapse: collapse; 
}
.customer-info td, .service-table td { 
    padding: 6px 10px; 
    border-bottom: 1px solid #e9ecef; 
}

/* Invoice Table */
.billing-section { margin: 25px 0; }
.invoice-table { 
    width: 100%; 
    border-collapse: collapse; 
    margin: 20px 0; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
}

.invoice-table th { 
    background: #007bff; 
    color: white; 
    padding: 12px; 
    text-align: left; 
    font-weight: bold; 
}
.invoice-table td { 
    padding: 10px 12px; 
    border-bottom: 1px solid #e9ecef; 
}

.invoice-table tbody tr:hover { background: #f8f9fa; }

.subtotal-row { 
    background: #e9ecef !important; 
    font-weight: bold; 
}
.total-row { 
    background: #007bff !important; 
    color: white !important; 
    font-size: 16px; 
    font-weight: bold; 
}

.text-right { text-align: right; }
.total-amount { 
    font-size: 18px; 
    font-weight: bold; 
}

.amount-words { 
    margin: 15px 0; 
    padding: 10px; 
    background: #e7f3ff; 
    border-left: 4px solid #007bff; 
    font-style: italic; 
}

/* Footer Styles */
.invoice-footer { margin-top: 30px; }

.payment-section { 
    margin-bottom: 25px; 
    padding: 15px; 
    background: #f8f9fa; 
    border-radius: 6px; 
}
.payment-section h3 { 
    color: #007bff; 
    margin: 0 0 15px 0; 
    border-bottom: 2px solid #007bff; 
    padding-bottom: 5px; 
}

.bank-accounts { 
    background: white; 
    padding: 12px; 
    border-radius: 4px; 
    border: 1px solid #ddd; 
    line-height: 1.8; 
}

.terms-section { 
    margin: 20px 0; 
    padding: 15px; 
    background: #fff3cd; 
    border: 1px solid #ffeaa7; 
    border-radius: 6px; 
}
.terms-section h4 { 
    color: #856404; 
    margin: 0 0 10px 0; 
}
.terms-section ul { 
    margin: 0; 
    padding-left: 20px; 
}
.terms-section li { 
    margin-bottom: 5px; 
    color: #856404; 
}

.contact-section { 
    display: flex; 
    justify-content: space-between; 
    margin: 20px 0; 
    padding: 15px; 
    background: #e7f3ff; 
    border-radius: 6px; 
}
.cs-info h4 { 
    color: #007bff; 
    margin: 0 0 10px 0; 
}
.cs-info p { 
    margin: 3px 0; 
}
.cs-info i { 
    width: 20px; 
    color: #007bff; 
}

.footer-note { 
    text-align: center; 
    margin-top: 30px; 
    padding-top: 20px; 
    border-top: 1px solid #ddd; 
    color: #666; 
}
.footer-note p { 
    margin: 5px 0; 
}

/* Responsive */
@media (max-width: 768px) {
    .invoice-header { 
        flex-direction: column; 
        text-align: left; 
    }
    .invoice-info { 
        text-align: left; 
        margin-top: 20px; 
    }
    .contact-section { 
        flex-direction: column; 
    }
    .invoice-table { 
        font-size: 12px; 
    }
}