*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#f8fafc;color:#1e293b;line-height:1.6}
.container{max-width:1200px;margin:0 auto;padding:0 20px}

/* Nav */
nav{background:#fff;border-bottom:1px solid #e2e8f0;padding:16px 0;position:sticky;top:0;z-index:100}
nav .container{display:flex;justify-content:space-between;align-items:center}
.logo{font-size:1.4rem;font-weight:800;color:#2563eb}
.logo span{color:#1e293b}
.nav-links{display:flex;gap:24px;align-items:center}
.nav-links a{text-decoration:none;color:#64748b;font-weight:500;font-size:.9rem}
.btn-premium{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff!important;padding:8px 20px;border-radius:8px;font-weight:600;transition:transform .2s}
.btn-premium:hover{transform:scale(1.05)}

/* Hero */
.hero{padding:60px 0 40px;text-align:center}
.hero h1{font-size:2.8rem;font-weight:800;margin-bottom:16px;background:linear-gradient(135deg,#1e293b,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero p{font-size:1.2rem;color:#64748b;max-width:600px;margin:0 auto 32px}
.trust-badges{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;margin-top:24px}
.trust-badges span{font-size:.85rem;color:#64748b;display:flex;align-items:center;gap:6px}

/* Ad Slot */
.ad-slot{background:#f1f5f9;border:2px dashed #cbd5e1;border-radius:12px;padding:20px;text-align:center;margin:24px 0;min-height:90px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.8rem}

/* Invoice Builder */
.invoice-section{padding:40px 0}
.invoice-card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.06);padding:40px;max-width:900px;margin:0 auto}
.invoice-header{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid #f1f5f9}
.form-group{margin-bottom:16px}
.form-group label{display:block;font-size:.8rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.form-group input,.form-group textarea,.form-group select{width:100%;padding:10px 14px;border:1.5px solid #e2e8f0;border-radius:8px;font-size:.95rem;font-family:inherit;transition:border-color .2s}
.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#2563eb}
textarea{resize:vertical;min-height:80px}
.section-title{font-size:1rem;font-weight:700;margin-bottom:16px;color:#1e293b}

/* Items Table */
.items-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.items-table th{text-align:left;padding:10px 12px;background:#f8fafc;font-size:.75rem;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;border-radius:6px}
.items-table td{padding:8px 12px}
.items-table input{width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:.9rem}
.items-table .col-desc{width:40%}
.items-table .col-qty,.items-table .col-rate{width:15%}
.items-table .col-amount{width:20%;text-align:right}
.items-table .col-action{width:10%;text-align:center}
.btn-remove{background:none;border:none;color:#ef4444;cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:4px}
.btn-remove:hover{background:#fef2f2}
.btn-add{background:#eff6ff;color:#2563eb;border:1.5px dashed #93c5fd;padding:10px 20px;border-radius:8px;cursor:pointer;font-weight:600;font-size:.9rem;width:100%;transition:background .2s}
.btn-add:hover{background:#dbeafe}

/* Totals */
.totals{display:flex;justify-content:flex-end;margin-top:24px}
.totals-box{width:280px}
.totals-row{display:flex;justify-content:space-between;padding:8px 0;font-size:.95rem}
.totals-row.total{border-top:2px solid #1e293b;padding-top:12px;margin-top:8px;font-weight:700;font-size:1.1rem}

/* Notes */
.notes-section{margin-top:32px;padding-top:24px;border-top:2px solid #f1f5f9}

/* Actions */
.actions{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}
.btn{padding:14px 32px;border-radius:10px;font-weight:600;font-size:1rem;cursor:pointer;border:none;transition:all .2s}
.btn-primary{background:#2563eb;color:#fff}
.btn-primary:hover{background:#1d4ed8;transform:translateY(-1px)}
.btn-secondary{background:#f1f5f9;color:#1e293b}
.btn-secondary:hover{background:#e2e8f0}
.btn-gold{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff}
.btn-gold:hover{transform:translateY(-1px)}

/* Premium Section */
.premium-section{padding:60px 0;text-align:center}
.premium-card{background:linear-gradient(135deg,#1e1b4b,#312e81);border-radius:20px;padding:48px;color:#fff;max-width:800px;margin:0 auto}
.premium-card h2{font-size:2rem;margin-bottom:12px}
.premium-card p{color:#a5b4fc;margin-bottom:32px;font-size:1.1rem}
.premium-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:left;margin-bottom:32px}
.premium-features li{list-style:none;display:flex;align-items:center;gap:10px;color:#e0e7ff;font-size:.95rem}
.premium-features li::before{content:"\2713";background:#22c55e;color:#fff;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;flex-shrink:0}
.price-tag{font-size:3rem;font-weight:800;margin-bottom:8px}
.price-tag span{font-size:1rem;font-weight:400;color:#a5b4fc}
.btn-upgrade{background:#fff;color:#312e81;padding:16px 48px;border-radius:12px;font-weight:700;font-size:1.1rem;border:none;cursor:pointer;transition:transform .2s}
.btn-upgrade:hover{transform:scale(1.05)}

/* Footer */
footer{padding:40px 0;text-align:center;color:#94a3b8;font-size:.85rem;border-top:1px solid #e2e8f0}

/* PDF Preview Modal */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.active{display:flex}
.modal{background:#fff;border-radius:16px;padding:32px;max-width:700px;width:90%;max-height:85vh;overflow-y:auto}
.modal h3{margin-bottom:20px;font-size:1.3rem}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px}
.invoice-preview{background:#fff;padding:40px;border:1px solid #e2e8f0;border-radius:8px;font-size:.85rem}
.preview-header{display:flex;justify-content:space-between;margin-bottom:32px}
.preview-table{width:100%;border-collapse:collapse;margin:20px 0}
.preview-table th,.preview-table td{padding:8px 12px;text-align:left;border-bottom:1px solid #f1f5f9}
.preview-table th{background:#f8fafc;font-weight:600;font-size:.75rem;text-transform:uppercase}

/* Responsive */
@media(max-width:768px){
.hero h1{font-size:2rem}
.invoice-header{grid-template-columns:1fr}
.premium-features{grid-template-columns:1fr}
.invoice-card{padding:20px}
.actions{flex-direction:column}
.btn{width:100%}
}

/* Language switcher */
.lang-switcher{background:#fff;border:1.5px solid #e2e8f0;border-radius:8px;padding:6px 10px;font-size:.85rem;font-family:inherit;cursor:pointer;color:#1e293b;transition:border-color .2s}
.lang-switcher:hover{border-color:#2563eb}
.lang-switcher:focus{outline:none;border-color:#2563eb}

/* RTL support — for Arabic */
[dir="rtl"] body{font-family:'Noto Sans Arabic','Inter',sans-serif}
[dir="rtl"] .trust-badges{direction:rtl}
[dir="rtl"] .items-table th,
[dir="rtl"] .items-table td{text-align:right}
[dir="rtl"] .items-table .col-amount{text-align:left}
[dir="rtl"] .totals{justify-content:flex-start}
[dir="rtl"] .form-group label{letter-spacing:0}
[dir="rtl"] .modal-actions{flex-direction:row-reverse}
[dir="rtl"] .hero h1{background:linear-gradient(225deg,#1e293b,#2563eb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* Devanagari (Hindi) and Japanese fonts */
html[lang="hi"] body{font-family:'Noto Sans Devanagari','Inter',sans-serif}
html[lang="ja"] body{font-family:'Noto Sans JP','Inter',sans-serif}

/* Responsive — stack language switcher on mobile */
@media(max-width:768px){
.nav-links{gap:12px;flex-wrap:wrap;justify-content:flex-end}
.lang-switcher{font-size:.8rem;padding:5px 8px}
}

/* ========= Phase 1: Responsive layout utilities ========= */

/* Form 4-column grid (invoice number, issue date, due date, currency) */
.form-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:16px;margin-bottom:32px}

/* PPE stats 3-column grid */
.stats-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px;max-width:700px;margin-left:auto;margin-right:auto}

/* Tools 2-column grid (follow-up email + late fee calc) */
.tools-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:900px;margin:0 auto;}

/* ≤768px — tablet / large phone */
@media(max-width:768px){
.form-grid-4{grid-template-columns:1fr 1fr}
.tools-grid-2{grid-template-columns:1fr}
}

/* ≤640px — most phones */
@media(max-width:640px){
.stats-grid-3{grid-template-columns:1fr;gap:12px;margin-top:24px}

/* Items table — transform to stacked card layout */
.items-table thead{display:none}
.items-table,
.items-table tbody,
.items-table tr,
.items-table td{display:block;width:100%}
.items-table tr{background:#f8fafc;border-radius:10px;padding:12px;margin-bottom:12px;border:1px solid #e2e8f0;position:relative}
.items-table td{padding:6px 0;border:none;display:flex;align-items:center;gap:12px}
.items-table td[data-label-key]::before{
    content:attr(data-label);
    font-size:.7rem;
    font-weight:600;
    color:#64748b;
    text-transform:uppercase;
    letter-spacing:.5px;
    min-width:90px;
    flex-shrink:0;
}
.items-table td.col-amount{justify-content:flex-start;text-align:left;font-weight:600}
.items-table td.col-action{position:absolute;top:8px;right:8px;padding:0;width:auto}
.items-table td.col-action::before{content:none}
.items-table .btn-remove{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;font-size:1.4rem;line-height:1}
.items-table input{min-height:40px;font-size:16px} /* 16px prevents iOS zoom on focus */

/* RTL variant for items table card layout */
[dir="rtl"] .items-table td.col-action{right:auto;left:8px}
}

/* ≤480px — very small phones */
@media(max-width:480px){
.form-grid-4{grid-template-columns:1fr;gap:12px}
}

/* Nav — ≤640px: two-row layout */
@media(max-width:640px){
nav .container{flex-wrap:wrap;gap:8px;row-gap:10px}
.nav-links{width:100%;justify-content:flex-end;gap:10px}
.nav-links a{font-size:.85rem}
.btn-premium{padding:6px 12px;font-size:.8rem}
}

/* ========= Phase 2: Typography and spacing ========= */

/* ≤640px — typography scaling and tighter spacing */
@media(max-width:640px){
/* Hero */
.hero{padding:32px 0 20px}
.hero p{font-size:1rem;margin-bottom:20px}
.trust-badges{gap:14px;margin-top:16px}
.trust-badges span{font-size:.8rem}

/* Section paddings — override inline styles on PPE and Tools */
#payment-engine,
#tools{padding:40px 0 !important}
.premium-section{padding:40px 0}

/* Section headings — override inline font-size on h2s */
#payment-engine h2,
#tools h2{font-size:1.5rem !important}
#payment-engine > .container > div > p,
#tools > .container > div > p{font-size:.95rem !important}

/* Premium card */
.premium-card{padding:28px 20px}
.premium-card h2{font-size:1.5rem}
.premium-card p{font-size:1rem;margin-bottom:20px}
.price-tag{font-size:2.2rem}
.btn-upgrade{padding:14px 28px;font-size:1rem}

/* Labels — uppercase + letter-spacing hurts at small sizes */
.form-group label{letter-spacing:0;margin-bottom:8px}
.section-title{letter-spacing:0}

/* Totals — full width instead of fixed 280px float */
.totals{justify-content:stretch}
.totals-box{width:100%}

/* Preview modal invoice content */
.invoice-preview{padding:16px;font-size:.8rem}
.modal{padding:20px}
}

/* ≤480px — extra compression for very small phones */
@media(max-width:480px){
.hero h1{font-size:1.6rem}
.hero p{font-size:.95rem}
.invoice-card{padding:16px}
.premium-card{padding:24px 16px}
.price-tag{font-size:1.9rem}
.modal{padding:16px}
}

/* ========= Phase 3: Touch targets and overflow safety ========= */

/* Global overflow guard — prevents horizontal scrolling from any stray wide element */
html,body{max-width:100%;overflow-x:hidden}

/* Defensive — images and embedded media never overflow their container */
img,video,iframe{max-width:100%;height:auto}

/* Long content in the invoice preview modal wraps instead of breaking layout */
.invoice-preview,
.invoice-preview *{max-width:100%;overflow-wrap:break-word;word-wrap:break-word}
.preview-table{table-layout:fixed}
.preview-table td,
.preview-table th{word-break:break-word}

/* Safety for long words in the premium card headline */
.premium-card h2{overflow-wrap:break-word}

/* ≤768px — touch target sizes and input zoom prevention */
@media(max-width:768px){
/* Nav touch targets */
.nav-links a{padding:8px 4px;min-height:32px;display:flex;align-items:center}
.btn-premium{min-height:36px;display:inline-flex;align-items:center}
.lang-switcher{min-height:36px}

/* Remove item button — bigger hit area across all mobile sizes */
.btn-remove{min-width:36px;min-height:36px;display:inline-flex;align-items:center;justify-content:center;padding:0}

/* Prevent iOS Safari from auto-zooming on input focus —
   Safari zooms whenever an input has font-size < 16px */
input,select,textarea,
.form-group input,.form-group textarea,.form-group select,
.items-table input{font-size:16px}

/* Tax rate inline input — was 60px wide with tiny font */
#taxRate{min-height:36px;font-size:16px}

/* Late fee calc inputs and follow-up stage select were 0.9rem */
#lfAmount,#lfDays,#lfRate,#followUpStage{font-size:16px;min-height:40px}
}

/* ≤360px — extra guard for very narrow phones */
@media(max-width:360px){
/* The "No Watermark" banner has an inline min-width:200px on its middle div.
   Override so the flex row does not force horizontal overflow. */
#generator > div:first-child > div:nth-child(2){min-width:0 !important}
}

/* Template Picker */
.tpl-option{background:#fff;border:2px solid #e2e8f0;border-radius:10px;padding:12px 8px 8px;cursor:pointer;text-align:center;transition:border-color .2s,box-shadow .2s;display:flex;flex-direction:column;align-items:center;gap:6px}
.tpl-option:hover{border-color:#93c5fd}
.tpl-option.selected{border-color:#2563eb;box-shadow:0 0 0 3px rgba(37,99,235,.15)}
.tpl-option span{font-size:.75rem;font-weight:600;color:#64748b}
.tpl-option.selected span{color:#2563eb}
.tpl-preview{width:100%;aspect-ratio:3/4;border-radius:4px;padding:6px;display:flex;flex-direction:column;gap:4px}
.tpl-preview .tpl-header{height:16%;border-radius:2px}
.tpl-preview .tpl-lines{flex:1;display:flex;flex-direction:column;gap:3px;justify-content:center}
.tpl-preview .tpl-lines div{height:4px;border-radius:1px}
.tpl-preview .tpl-total{height:10%;border-radius:2px;margin-top:auto}
/* Clean */
.tpl-clean{background:#f8fafc}.tpl-clean .tpl-header{background:#2563eb}.tpl-clean .tpl-lines div{background:#e2e8f0}.tpl-clean .tpl-total{background:#1e293b}
/* Bold */
.tpl-bold{background:#1e293b}.tpl-bold .tpl-header{background:#f59e0b;height:22%}.tpl-bold .tpl-lines div{background:#334155}.tpl-bold .tpl-total{background:#f59e0b}
/* Classic */
.tpl-classic{background:#fffbf0;border:1px solid #d4a574}.tpl-classic .tpl-header{background:#8b4513}.tpl-classic .tpl-lines div{background:#e8dcc8;border-bottom:1px solid #d4a574}.tpl-classic .tpl-total{background:#8b4513}
/* Minimal */
.tpl-minimal{background:#fff;border:1px solid #e5e5e5}.tpl-minimal .tpl-header{background:#fff;border-bottom:1px solid #000;height:12%}.tpl-minimal .tpl-lines div{background:#f5f5f5}.tpl-minimal .tpl-total{background:#000}
@media(max-width:480px){#templatePicker{grid-template-columns:repeat(2,1fr)}}