body { margin:0;background:linear-gradient(-45deg, #ffd5c2, #fff5eb, #ffb347);background-size:400% 400%;animation:15s infinite gradientAnimation;position:relative;overflow-x:hidden;} body::before { content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:radial-gradient(circle at 20% 20%, rgba(78,84,200,.2) 0, transparent 15%), radial-gradient(circle at 80% 80%, rgba(22,33,62,.2) 0, transparent 15%);animation:20s linear infinite particleMovement;pointer-events:none;} body::after { content:"";position:fixed;top:-50%;left:-50%;width:200%;height:200%;background-image:linear-gradient(0deg, transparent 48%, rgba(78,84,200,.1) 50%, transparent 52%), linear-gradient(90deg, transparent 48%, rgba(255,255,255,.1) 50%, transparent 52%);background-size:3px 3px;opacity:.15;transform:rotate(15deg);pointer-events:none;} @keyframes gradientAnimation { 0%, 100% { background-position:0 50%;} 50% { background-position:100% 50%;} } @keyframes particleMovement { 0% { transform:translateY(0) translateX(0);opacity:.4;} 100% { transform:translateY(-100vh) translateX(50vw);opacity:0;} } .converter-form { width:90%;max-width:800px;margin:120px auto 0;background:linear-gradient(140deg, #ffdee9, #b5fffc) !important;padding:25px;border-radius:8px;box-shadow:0 2px 5px rgba(0, 0, 0, 0.1);text-align:center;} .converter-form h1 { color:#280274;margin-bottom:10px;} .converter-form .subtitle { color:#7f8c8d;margin-bottom:20px;} .invoice-form-section { background:transparent;padding:15px;border-radius:8px;margin-bottom:20px;} .invoice-section-title { font-size:1.1rem;margin:15px 0 10px;color:#280274;border-bottom:1px solid #fe7a36;padding-bottom:8px;display:flex;align-items:center;gap:8px;} .invoice-form-group { margin-bottom:12px;text-align:left;} .invoice-form-group label { font-weight:500;color:#280274;margin-bottom:5px;display:block;font-size:0.9rem;} .invoice-form-group input, .invoice-form-group select, .invoice-form-group textarea { width:100%;padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;background:transparent !important;color:#000;} .invoice-form-group textarea { min-height:60px;} .invoice-item-row { display:flex;gap:8px;margin-bottom:8px;align-items:center;} .invoice-item-row input { padding:10px;border:1px solid #ccc;border-radius:4px;font-size:14px;background:transparent !important;color:#000;} .invoice-item-row .item-desc { flex:3;} .invoice-item-row .item-qty, .invoice-item-row .item-price { flex:1;} .remove-item { color:#e74c3c;background:none;border:none;cursor:pointer;padding:5px;} .invoice-btn { background-image:linear-gradient(120deg, #f6d365, #fda085);color:#fff;padding:8px 16px;border:none;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;margin:10px 5px 0;transition:opacity 0.3s;} .invoice-btn:hover { opacity:.9;} .invoice-btn-clear { background:transparent;color:#e74c3c;padding:8px 16px;border:1px solid #e74c3c;border-radius:10px;cursor:pointer;font-size:14px;font-weight:700;margin:10px 5px 0;transition:all 0.3s;} .invoice-btn-clear:hover { background:#e74c3c;color:white;} .tax-options { display:flex;gap:10px;margin:15px 0;flex-wrap:wrap;} .tax-option { display:flex;align-items:center;gap:5px;} .tax-option input { width:auto;} .tax-option label { margin-bottom:0;font-size:0.9rem;} .logo-upload { margin-bottom:15px;} .logo-placeholder { width:100px;height:60px;margin-top:10px;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;color:#7f8c8d;font-size:0.7rem;background:transparent !important;} .logo-placeholder img { max-width:100%;max-height:100%;object-fit:contain;} .modal { display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.7);} .modal-content { background:linear-gradient(140deg, #ffdee9, #b5fffc) !important;margin:5% auto;padding:20px;border-radius:8px;width:90%;max-width:600px;position:relative;} .invoice-preview { background:linear-gradient(135deg, #cfd9df, #e2ebf0) !important;padding:15px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);font-family:Arial, sans-serif;font-size:12px;color:#263238;margin-bottom:15px;} .info-box { width:90%;max-width:800px;margin:25px auto 0;text-align:left;background:linear-gradient(140deg, #ffdee9, #b5fffc) !important;padding:20px;border-radius:8px;box-shadow:0 2px 5px rgba(0,0,0,0.1);} .invoice-table th, .invoice-table td { background:transparent !important;} .close { position:absolute;right:15px;top:10px;color:#aaa;font-size:28px;font-weight:bold;cursor:pointer;} .close:hover { color:black;} .invoice-header { display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:15px;} .invoice-title { font-size:18px;color:#280274;font-weight:bold;margin-bottom:5px;} .invoice-logo { max-width:100px;max-height:60px;object-fit:contain;} .invoice-details { display:grid;grid-template-columns:1fr 1fr;gap:15px;margin-bottom:15px;font-size:11px;} .detail-title { font-weight:bold;margin-bottom:5px;color:#280274;} .invoice-meta { display:flex;justify-content:space-between;margin-bottom:15px;flex-wrap:wrap;gap:10px;font-size:11px;} .meta-item { min-width:100px;} .meta-label { color:#7f8c8d;margin-bottom:3px;} .meta-value { font-weight:500;} .invoice-table { width:100%;border-collapse:collapse;margin-bottom:15px;font-size:11px;} .invoice-table th { text-align:left;padding:8px;color:#280274;font-weight:bold;border-bottom:1px solid #ddd;} .invoice-table td { padding:8px;border-bottom:1px solid #eee;} .invoice-totals { margin-top:15px;width:100%;font-size:11px;} .total-row { display:flex;justify-content:space-between;padding:6px 0;border-bottom:1px solid #eee;} .total-row:last-child { border-bottom:none;font-weight:bold;} .notes-section { margin-top:15px;padding:10px;border-top:1px solid #eee;font-size:11px;} .watermark { margin-top:15px;text-align:center;font-size:9px;color:#95a5a6;padding-top:10px;border-top:1px solid #eee;} .invoice-actions { display:flex;justify-content:center;gap:10px;margin-top:15px;flex-wrap:wrap;} .info-box h3 { color:#280274;margin-bottom:15px;font-weight:700;} .info-box p { color:#000;line-height:1.6;margin-bottom:15px;} .faq-item { padding:10px 0;} .rank-math-question { cursor:pointer;margin:0;color:#280274;font-size:1.2rem;font-weight:700;} .rank-math-question::before { content:"+ ";font-size:1.2rem;color:#fe7a36;margin-right:5px;} .rank-math-answer { display:none;padding-top:5px;color:#000;font-size:1rem;border-bottom:1px solid #fe7a36;padding-bottom:5px;margin-bottom:10px;} @media (max-width:768px) { .invoice-details { grid-template-columns:1fr;} .invoice-actions { flex-direction:column;} .invoice-btn, .invoice-btn-clear { width:100%;} }