* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%);
     color: #1a202c;
 }

 /* Hero Section */
 .hero-gradient {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
     color: white;
     padding: 60px 0 40px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .hero-gradient::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, transparent 70%);
     border-radius: 50%;
 }

 .hero-gradient::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(234, 179, 8, 0.08) 0%, transparent 70%);
     border-radius: 50%;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .badge-ai {
     background: rgba(234, 179, 8, 0.2);
     backdrop-filter: blur(10px);
     padding: 8px 20px;
     border-radius: 60px;
     font-size: 0.85rem;
     font-weight: 600;
     display: inline-block;
     margin-bottom: 20px;
     border: 1px solid rgba(234, 179, 8, 0.3);
 }

 .hero-title {
     font-size: 3.5rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     margin-bottom: 20px;
 }

 .hero-title span {
     color: #eab308;
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 2rem;
     }
 }

 /* Breadcrumb */
 .breadcrumb-custom {
     background: white;
     padding: 12px 0;
     border-bottom: 1px solid #e2e8f0;
 }

 /* Main Dashboard */
 .dashboard {
     max-width: 1400px;
     margin: 40px auto;
     /* padding: 0 24px; */
     padding: 0 !important;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
 }

 @media (max-width: 1100px) {
     .dashboard {
         grid-template-columns: 1fr;
     }
 }

 /* Editor Panel */
 .editor-panel {
     background: white;
     border-radius: 7px;
     box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
     height: auto;
     overflow: hidden;
     padding: 10px;
 }

 .editor-header {
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     padding: 20px 28px;
     border-bottom: 2px solid #eab308;
 }

 .editor-header h2 {
     font-size: 1.5rem;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .editor-body {
     padding: 28px;
     max-height: 100%;
     overflow-y: auto;
 }

 .editor-footer {}

 /* Form Styles */
 .form-section {
     margin-bottom: 28px;
     padding-bottom: 20px;
     border-bottom: 1px dashed #e2e8f0;
 }

 .section-label {
     font-size: 0.7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #eab308;
     background: #fefce8;
     display: inline-block;
     padding: 4px 12px;
     border-radius: 20px;
     margin-bottom: 16px;
 }

 .form-label {
     font-size: 0.8rem;
     font-weight: 600;
     color: #334155;
     margin-bottom: 6px;
 }

 .form-control,
 .form-select {
     border: 1.5px solid #e2e8f0;
     border-radius: 14px;
     padding: 10px 14px;
     font-size: 0.9rem;
     transition: all 0.2s;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: #eab308;
     box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
 }

 /* Logo Upload Styles */
 .logo-upload-area {
     border: 2px dashed #e2e8f0;
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     background: #f8fafc;
     cursor: pointer;
     transition: all 0.2s;
 }

 .logo-upload-area:hover {
     border-color: #eab308;
     background: #fefce8;
 }

 .logo-preview {
     margin-top: 15px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }

 .logo-preview img {
     max-width: 80px;
     max-height: 80px;
     border-radius: 8px;
     object-fit: contain;
 }

 .btn-remove-logo {
     background: #fee2e2;
     border: none;
     padding: 5px 12px;
     border-radius: 20px;
     color: #dc2626;
     font-size: 12px;
     cursor: pointer;
 }

 /* Item Row */
 .item-row {
     background: #f8fafc;
     border-radius: 16px;
     padding: 12px;
     margin-bottom: 12px;
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
 }

 .item-row .item-desc {
     flex: 3;
     min-width: 150px;
 }

 .item-row .item-qty,
 .item-row .item-price {
     flex: 1;
     min-width: 80px;
 }

 .remove-item {
     background: #fee2e2;
     border: none;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     color: #dc2626;
     cursor: pointer;
     transition: 0.2s;
 }

 .remove-item:hover {
     background: #dc2626;
     color: white;
 }

 /* Buttons */
 .btn-add {
     background: #f1f5f9;
     border: 1.5px dashed #94a3b8;
     padding: 10px 20px;
     border-radius: 40px;
     font-weight: 600;
     font-size: 0.85rem;
     transition: 0.2s;
 }

 .btn-add:hover {
     background: #e2e8f0;
     border-color: #eab308;
 }

 .btn-sample {
     background: #fefce8;
     border: 1px solid #eab308;
     padding: 10px 20px;
     border-radius: 40px;
     font-weight: 600;
     font-size: 0.85rem;
 }

 /* Preview Panel */
 .preview-panel {
     position: sticky;
     top: 20px;
 }

 .invoice-preview {
     background: white;
     border-radius: 7px;
     box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }

 .invoice-actions {
     background: #f8fafc;
     padding: 16px 24px;
     border-bottom: 1px solid #e2e8f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
 }

 .btn-download {
     background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
     color: white;
     border: none;
     padding: 12px 28px;
     border-radius: 40px;
     font-weight: 700;
     font-size: 0.9rem;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     transition: all 0.2s;
     box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
 }

 .btn-download:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(234, 179, 8, 0.4);
 }

 /* Invoice Layout */
 .invoice-content {
     padding: 35px;
     font-family: 'Inter', sans-serif;
     background: white;
 }

 .invoice-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 35px;
     padding-bottom: 20px;
     border-bottom: 3px solid #eab308;
 }

 .company-section h2 {
     font-size: 28px;
     font-weight: 800;
     color: #1e293b;
     margin: 0 0 8px 0;
 }

 .company-details {
     font-size: 13px;
     color: #64748b;
     line-height: 1.6;
 }

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

 .invoice-badge {
     background: #eab308;
     color: #0f172a;
     padding: 6px 20px;
     border-radius: 30px;
     font-weight: 800;
     font-size: 0.9rem;
     display: inline-block;
     margin-bottom: 15px;
 }

 .invoice-numbers {
     font-size: 13px;
     color: #475569;
     line-height: 1.8;
 }

 .invoice-numbers strong {
     color: #1e293b;
 }

 .address-grid {
     display: flex;
     gap: 40px;
     margin-bottom: 35px;
     background: #f8fafc;
     padding: 20px 25px;
     border-radius: 12px;
 }

 .address-box {
     flex: 1;
 }

 .address-box h4 {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #eab308;
     margin-bottom: 12px;
 }

 .address-box p {
     font-size: 14px;
     color: #475569;
     margin: 0;
     line-height: 1.6;
 }

 .client-name {
     font-weight: 700;
     color: #1e293b;
     font-size: 15px;
 }

 .invoice-table {
     width: 100%;
     border-collapse: collapse;
     margin: 25px 0;
 }

 .invoice-table th {
     text-align: left;
     padding: 12px 10px;
     background: #f1f5f9;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     color: #475569;
     border-bottom: 2px solid #e2e8f0;
 }

 .invoice-table td {
     padding: 14px 10px;
     border-bottom: 1px solid #e2e8f0;
     font-size: 14px;
     color: #334155;
 }

 .text-center {
     text-align: center;
 }

 .text-right {
     text-align: right;
 }

 .totals-container {
     width: 45%;
     margin-left: auto;
     margin-top: 20px;
     margin-bottom: 30px;
 }

 .total-line {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
     font-size: 14px;
 }

 .total-line.grand-total {
     font-size: 18px;
     font-weight: 800;
     border-top: 2px solid #eab308;
     margin-top: 8px;
     padding-top: 15px;
     color: #1e293b;
 }

 .payment-section {
     background: #fefce8;
     padding: 18px 22px;
     border-radius: 12px;
     margin: 20px 0;
     border-left: 4px solid #eab308;
 }

 .payment-section h5 {
     font-size: 13px;
     font-weight: 700;
     color: #1e293b;
     margin-bottom: 10px;
 }

 .payment-section p {
     font-size: 13px;
     color: #475569;
     margin: 0;
     line-height: 1.6;
 }

 .notes-section {
     text-align: center;
     padding: 15px;
     background: #f8fafc;
     border-radius: 10px;
     margin-top: 20px;
 }

 .notes-section p {
     font-size: 12px;
     color: #64748b;
     margin: 0;
 }

 /* Info Cards */
 .info-card {
     background: white;
     border-radius: 7px;
     padding: 40px;
     margin-top: 40px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
 }

 .steps-grid {
     display: grid;
     grid-template-columns: auto auto;
     gap: 24px;
     margin: 32px 0;
 }

 .step-item {
     background: #f8fafc;
     padding: 24px;
     border-radius: 20px;
     text-align: center;
     transition: 0.2s;
 }

 .step-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
 }

 .step-number {
     width: 50px;
     height: 50px;
     background: #eab308;
     color: #0f172a;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     font-weight: 800;
     margin: 0 auto 16px;
 }

 .faq-item {
     background: #f8fafc;
     padding: 20px;
     border-radius: 16px;
     margin-bottom: 12px;
     cursor: pointer;
     transition: 0.2s;
 }

 .faq-questionn {
     font-weight: 700;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .faq-answer {
     display: none;
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid #e2e8f0;
     color: #475569;
     line-height: 1.6;
 }

 .faq-item.active .faq-answer {
     display: block;
 }

 .bottom-download {
     text-align: center;
     margin-top: 40px;
     padding: 40px;
     background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
     border-radius: 28px;
 }

 /* ========== PRINT STYLES - ONLY INVOICE ========== */
 @media print {

     /* Hide EVERYTHING except the invoice content */
     .hero-gradient,
     .breadcrumb-custom,
     .editor-panel,
     .info-card,
     .bottom-download,
     footer,
     .site-footer,
     .topbar,
     .navbar,
     header:not(.no-print),
     .btn-download,
     .btn-add,
     .btn-sample,
     .remove-item,
     .form-section,
     .faq-list,
     .steps-grid,
     .step-item,
     .faq-item,
     .container>.info-card,
     .dashboard>.editor-panel,
     .container>.bottom-download,
     .preview-panel .invoice-actions,
     .btn,
     button,
     .no-print,
     .print-hide,
     .invoice-actions,
     .download-btn-header,
     .invoice-actions button,
     .container,
     [class*="container"],
     .row,
     [class*="col-"]:not(.invoice-content *) {
         display: none !important;
         visibility: hidden !important;
         opacity: 0 !important;
         height: 0 !important;
         overflow: hidden !important;
         margin: 0 !important;
         padding: 0 !important;
         border: none !important;
     }

     /* Reset body background */
     body {
         background: white !important;
         margin: 0 !important;
         padding: 0 !important;
     }

     /* Show only the invoice preview panel */
     .dashboard {
         display: block !important;
         margin: 0 !important;
         padding: 0 !important;
         max-width: 100% !important;
         background: white !important;
     }

     .preview-panel {
         position: relative !important;
         top: 0 !important;
         margin: 0 !important;
         padding: 0 !important;
         width: 100% !important;
         display: block !important;
         visibility: visible !important;
         background: white !important;
     }

     .invoice-preview {
         box-shadow: none !important;
         border: none !important;
         margin: 0 !important;
         padding: 0 !important;
         background: white !important;
         border-radius: 0 !important;
     }

     .invoice-content {
         padding: 20px !important;
         margin: 0 auto !important;
         width: 100% !important;
         display: block !important;
         visibility: visible !important;
         background: white !important;
     }

     /* Ensure proper page breaks */
     .invoice-content {
         page-break-inside: avoid !important;
         break-inside: avoid !important;
     }

     /* Remove all backgrounds and shadows for print */
     * {
         background: white !important;
         box-shadow: none !important;
         text-shadow: none !important;
     }

     /* Ensure text is black for printing */
     body,
     .invoice-content,
     .invoice-preview,
     .invoice-header,
     .address-grid,
     .totals-container,
     .payment-section,
     .notes-section,
     .company-section,
     .invoice-title-section,
     .invoice-numbers,
     .address-box,
     .invoice-table,
     .total-line {
         color: black !important;
         background: white !important;
     }

     /* Keep table borders for print */
     .invoice-table th,
     .invoice-table td {
         border: 1px solid #ccc !important;
         padding: 8px !important;
     }

     /* Keep address section border */
     .address-grid {
         border: 1px solid #ccc !important;
         background: #f9f9f9 !important;
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
     }

     /* Keep payment section */
     .payment-section {
         border: 1px solid #ccc !important;
         background: #f9f9f9 !important;
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
     }

     /* Hide scrollbars */
     body {
         overflow: visible !important;
     }

     /* Page margins */
     @page {
         margin: 1.5cm;
         size: A4;
     }

     /* Ensure invoice header shows properly */
     .invoice-header {
         display: flex !important;
         justify-content: space-between !important;
         margin-bottom: 20px !important;
     }

     /* Ensure logo prints if present */
     #previewLogo img {
         max-width: 60px !important;
         max-height: 60px !important;
     }

     /* Hide any remaining elements */
     .no-print,
     .print-only-hide {
         display: none !important;
     }
 }

 @media (max-width: 768px) {
     .preview-panel {
         margin-top: 3rem;
     }
 }

 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
     background: linear-gradient(135deg, #f5f7fa 0%, #e9edf2 100%);
     color: #1a202c;
 }

 /* Hero Section */
 .hero-gradient {
     background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
     color: white;
     padding: 60px 0 40px;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .hero-gradient::before {
     content: '';
     position: absolute;
     top: -50%;
     right: -20%;
     width: 500px;
     height: 500px;
     background: radial-gradient(circle, rgba(234, 179, 8, 0.1) 0%, transparent 70%);
     border-radius: 50%;
 }

 .hero-gradient::after {
     content: '';
     position: absolute;
     bottom: -30%;
     left: -10%;
     width: 400px;
     height: 400px;
     background: radial-gradient(circle, rgba(234, 179, 8, 0.08) 0%, transparent 70%);
     border-radius: 50%;
 }

 .hero-content {
     position: relative;
     z-index: 2;
 }

 .badge-ai {
     background: rgba(234, 179, 8, 0.2);
     backdrop-filter: blur(10px);
     padding: 8px 20px;
     border-radius: 60px;
     font-size: 0.85rem;
     font-weight: 600;
     display: inline-block;
     margin-bottom: 20px;
     border: 1px solid rgba(234, 179, 8, 0.3);
 }

 .hero-title {
     font-size: 3.5rem;
     font-weight: 800;
     letter-spacing: -0.02em;
     margin-bottom: 20px;
 }

 .hero-title span {
     color: #eab308;
 }

 @media (max-width: 768px) {
     .hero-title {
         font-size: 2rem;
     }
 }

 /* Breadcrumb */
 .breadcrumb-custom {
     background: white;
     padding: 12px 0;
     border-bottom: 1px solid #e2e8f0;
 }

 /* Main Dashboard */
 .dashboard {
     max-width: 1400px;
     margin: 40px auto;
     padding: 0 24px;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 32px;
 }

 @media (max-width: 1100px) {
     .dashboard {
         grid-template-columns: 1fr;
     }
 }

 /* Editor Panel */
 .editor-panel {
     background: white;
     border-radius: 28px;
     box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.1);
     overflow: hidden;
 }

 .editor-header {
     background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
     padding: 20px 28px;
     border-bottom: 2px solid #eab308;
 }

 .editor-header h2 {
     font-size: 1.5rem;
     font-weight: 700;
     margin: 0;
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .editor-body {
     padding: 28px;
     max-height: 80vh;
     overflow-y: auto;
 }

 /* Form Styles */
 .form-section {
     margin-bottom: 28px;
     padding-bottom: 20px;
     border-bottom: 1px dashed #e2e8f0;
 }

 .section-label {
     font-size: 0.7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #eab308;
     background: #fefce8;
     display: inline-block;
     padding: 4px 12px;
     border-radius: 20px;
     margin-bottom: 16px;
 }

 .form-label {
     font-size: 0.8rem;
     font-weight: 600;
     color: #334155;
     margin-bottom: 6px;
 }

 .form-control,
 .form-select {
     border: 1.5px solid #e2e8f0;
     border-radius: 14px;
     padding: 10px 14px;
     font-size: 0.9rem;
     transition: all 0.2s;
 }

 .form-control:focus,
 .form-select:focus {
     border-color: #eab308;
     box-shadow: 0 0 0 3px rgba(234, 179, 8, 0.1);
 }

 /* Logo Upload Styles */
 .logo-upload-area {
     border: 2px dashed #e2e8f0;
     border-radius: 16px;
     padding: 20px;
     text-align: center;
     background: #f8fafc;
     cursor: pointer;
     transition: all 0.2s;
 }

 .logo-upload-area:hover {
     border-color: #eab308;
     background: #fefce8;
 }

 .logo-preview {
     margin-top: 15px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 10px;
 }

 .logo-preview img {
     max-width: 80px;
     max-height: 80px;
     border-radius: 8px;
     object-fit: contain;
 }

 .btn-remove-logo {
     background: #fee2e2;
     border: none;
     padding: 5px 12px;
     border-radius: 20px;
     color: #dc2626;
     font-size: 12px;
     cursor: pointer;
 }

 /* Item Row */
 .item-row {
     background: #f8fafc;
     border-radius: 16px;
     padding: 12px;
     margin-bottom: 12px;
     display: flex;
     gap: 10px;
     align-items: center;
     flex-wrap: wrap;
 }

 .item-row .item-desc {
     flex: 3;
     min-width: 150px;
 }

 .item-row .item-qty,
 .item-row .item-price {
     flex: 1;
     min-width: 80px;
 }

 .remove-item {
     background: #fee2e2;
     border: none;
     width: 32px;
     height: 32px;
     border-radius: 50%;
     color: #dc2626;
     cursor: pointer;
     transition: 0.2s;
 }

 .remove-item:hover {
     background: #dc2626;
     color: white;
 }

 /* Buttons */
 .btn-add {
     background: #f1f5f9;
     border: 1.5px dashed #94a3b8;
     padding: 10px 20px;
     border-radius: 40px;
     font-weight: 600;
     font-size: 0.85rem;
     transition: 0.2s;
 }

 .btn-add:hover {
     background: #e2e8f0;
     border-color: #eab308;
 }

 .btn-sample {
     background: #fefce8;
     border: 1px solid #eab308;
     padding: 10px 20px;
     border-radius: 40px;
     font-weight: 600;
     font-size: 0.85rem;
 }

 /* Preview Panel */
 .preview-panel {
     position: sticky;
     top: 20px;
 }

 .invoice-preview {
     background: white;
     border-radius: 28px;
     box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.15);
     overflow: hidden;
 }

 .invoice-actions {
     background: #f8fafc;
     padding: 16px 24px;
     border-bottom: 1px solid #e2e8f0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
 }

 .btn-download {
     background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
     color: white;
     border: none;
     padding: 12px 28px;
     border-radius: 40px;
     font-weight: 700;
     font-size: 0.9rem;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     cursor: pointer;
     transition: all 0.2s;
     box-shadow: 0 4px 12px rgba(234, 179, 8, 0.3);
 }

 .btn-download:hover {
     transform: translateY(-2px);
     box-shadow: 0 8px 20px rgba(234, 179, 8, 0.4);
 }

 /* Invoice Layout */
 .invoice-content {
     padding: 35px;
     font-family: 'Inter', sans-serif;
     background: white;
 }

 .invoice-header {
     display: flex;
     justify-content: space-between;
     margin-bottom: 35px;
     padding-bottom: 20px;
     border-bottom: 3px solid #eab308;
 }

 .company-section h2 {
     font-size: 28px;
     font-weight: 800;
     color: #1e293b;
     margin: 0 0 8px 0;
 }

 .company-details {
     font-size: 13px;
     color: #64748b;
     line-height: 1.6;
 }

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

 .invoice-badge {
     background: #eab308;
     color: #0f172a;
     padding: 6px 20px;
     border-radius: 30px;
     font-weight: 800;
     font-size: 0.9rem;
     display: inline-block;
     margin-bottom: 15px;
 }

 .invoice-numbers {
     font-size: 13px;
     color: #475569;
     line-height: 1.8;
 }

 .invoice-numbers strong {
     color: #1e293b;
 }

 .address-grid {
     display: flex;
     gap: 40px;
     margin-bottom: 35px;
     background: #f8fafc;
     padding: 20px 25px;
     border-radius: 12px;
 }

 .address-box {
     flex: 1;
 }

 .address-box h4 {
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1px;
     color: #eab308;
     margin-bottom: 12px;
 }

 .address-box p {
     font-size: 14px;
     color: #475569;
     margin: 0;
     line-height: 1.6;
 }

 .client-name {
     font-weight: 700;
     color: #1e293b;
     font-size: 15px;
 }

 .invoice-table {
     width: 100%;
     border-collapse: collapse;
     margin: 25px 0;
 }

 .invoice-table th {
     text-align: left;
     padding: 12px 10px;
     background: #f1f5f9;
     font-size: 12px;
     font-weight: 700;
     text-transform: uppercase;
     color: #475569;
     border-bottom: 2px solid #e2e8f0;
 }

 .invoice-table td {
     padding: 14px 10px;
     border-bottom: 1px solid #e2e8f0;
     font-size: 14px;
     color: #334155;
 }

 .text-center {
     text-align: center;
 }

 .text-right {
     text-align: right;
 }

 .totals-container {
     width: 45%;
     margin-left: auto;
     margin-top: 20px;
     margin-bottom: 30px;
 }

 .total-line {
     display: flex;
     justify-content: space-between;
     padding: 8px 0;
     font-size: 14px;
 }

 .total-line.grand-total {
     font-size: 18px;
     font-weight: 800;
     border-top: 2px solid #eab308;
     margin-top: 8px;
     padding-top: 15px;
     color: #1e293b;
 }

 .payment-section {
     background: #fefce8;
     padding: 18px 22px;
     border-radius: 12px;
     margin: 20px 0;
     border-left: 4px solid #eab308;
 }

 .payment-section h5 {
     font-size: 13px;
     font-weight: 700;
     color: #1e293b;
     margin-bottom: 10px;
 }

 .payment-section p {
     font-size: 13px;
     color: #475569;
     margin: 0;
     line-height: 1.6;
 }

 .notes-section {
     text-align: center;
     padding: 15px;
     background: #f8fafc;
     border-radius: 10px;
     margin-top: 20px;
 }

 .notes-section p {
     font-size: 12px;
     color: #64748b;
     margin: 0;
 }

 /* Info Cards */
 .info-card {
     background: white;
     border-radius: 28px;
     padding: 40px;
     margin-top: 40px;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
 }

 .steps-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: 24px;
     margin: 32px 0;
 }

 .step-item {
     background: #f8fafc;
     padding: 24px;
     border-radius: 20px;
     text-align: center;
     transition: 0.2s;
 }

 .step-item:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
 }

 .step-number {
     width: 50px;
     height: 50px;
     background: #eab308;
     color: #0f172a;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.5rem;
     font-weight: 800;
     margin: 0 auto 16px;
 }

 .faq-item {
     background: #f8fafc;
     padding: 20px;
     border-radius: 16px;
     margin-bottom: 12px;
     cursor: pointer;
     transition: 0.2s;
 }

 .faq-questionn {
     font-weight: 700;
     display: flex;
     justify-content: space-between;
     align-items: center;
 }

 .faq-answer {
     display: none;
     margin-top: 12px;
     padding-top: 12px;
     border-top: 1px solid #e2e8f0;
     color: #475569;
     line-height: 1.6;
 }

 .faq-item.active .faq-answer {
     display: block;
 }

 .bottom-download {
     text-align: center;
     margin-top: 40px;
     padding: 40px;
     background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%);
     border-radius: 28px;
 }

 /* ========== PRINT STYLES - ONLY INVOICE ========== */
 @media print {

     /* Hide EVERYTHING except the invoice content */
     .hero-gradient,
     .breadcrumb-custom,
     .editor-panel,
     .info-card,
     .bottom-download,
     footer,
     .site-footer,
     .topbar,
     .navbar,
     header:not(.no-print),
     .btn-download,
     .btn-add,
     .btn-sample,
     .remove-item,
     .form-section,
     .faq-list,
     .steps-grid,
     .step-item,
     .faq-item,
     .container>.info-card,
     .dashboard>.editor-panel,
     .container>.bottom-download,
     .preview-panel .invoice-actions,
     .btn,
     button,
     .no-print,
     .print-hide,
     .invoice-actions,
     .download-btn-header,
     .invoice-actions button,
     .container,
     [class*="container"],
     .row,
     [class*="col-"]:not(.invoice-content *) {
         display: none !important;
         visibility: hidden !important;
         opacity: 0 !important;
         height: 0 !important;
         overflow: hidden !important;
         margin: 0 !important;
         padding: 0 !important;
         border: none !important;
     }

     /* Reset body background */
     body {
         background: white !important;
         margin: 0 !important;
         padding: 0 !important;
     }

     /* Show only the invoice preview panel */
     .dashboard {
         display: block !important;
         margin: 0 !important;
         padding: 0 !important;
         max-width: 100% !important;
         background: white !important;
     }

     .preview-panel {
         position: relative !important;
         top: 0 !important;
         margin: 0 !important;
         padding: 0 !important;
         width: 100% !important;
         display: block !important;
         visibility: visible !important;
         background: white !important;
     }

     .invoice-preview {
         box-shadow: none !important;
         border: none !important;
         margin: 0 !important;
         padding: 0 !important;
         background: white !important;
         border-radius: 0 !important;
     }

     .invoice-content {
         padding: 20px !important;
         margin: 0 auto !important;
         width: 100% !important;
         display: block !important;
         visibility: visible !important;
         background: white !important;
     }

     /* Ensure proper page breaks */
     .invoice-content {
         page-break-inside: avoid !important;
         break-inside: avoid !important;
     }

     /* Remove all backgrounds and shadows for print */
     * {
         background: white !important;
         box-shadow: none !important;
         text-shadow: none !important;
     }

     /* Ensure text is black for printing */
     body,
     .invoice-content,
     .invoice-preview,
     .invoice-header,
     .address-grid,
     .totals-container,
     .payment-section,
     .notes-section,
     .company-section,
     .invoice-title-section,
     .invoice-numbers,
     .address-box,
     .invoice-table,
     .total-line {
         color: black !important;
         background: white !important;
     }

     /* Keep table borders for print */
     .invoice-table th,
     .invoice-table td {
         border: 1px solid #ccc !important;
         padding: 8px !important;
     }

     /* Keep address section border */
     .address-grid {
         border: 1px solid #ccc !important;
         background: transparent !important;
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
     }

     /* Keep payment section */
     .payment-section {
         border: 1px solid #ccc !important;
         background: transparent !important;
         -webkit-print-color-adjust: exact !important;
         print-color-adjust: exact !important;
     }

     /* Hide scrollbars */
     body {
         overflow: visible !important;
     }

     /* Page margins */
     @page {
         margin: 1.5cm;
         size: A4;
     }

     /* Ensure invoice header shows properly */
     .invoice-header {
         display: flex !important;
         justify-content: space-between !important;
         margin-bottom: 20px !important;
     }

     /* Ensure logo prints if present */
     #previewLogo img {
         max-width: 60px !important;
         max-height: 60px !important;
     }

     /* Hide any remaining elements */
     .no-print,
     .print-only-hide {
         display: none !important;
     }
 }