/* Form-3 Caste Affidavit + Family Tree v3 — Paid tool */
@font-face { font-family:'TiroMarathi'; src:url('/assets/fonts/TiroDevanagariMarathi-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }

.f3-page { display:flex; flex-direction:column; height:calc(100vh - 64px); overflow:hidden; }

/* Topbar */
.f3-topbar { display:flex; align-items:center; justify-content:space-between; padding:8px 16px; background:var(--bg-secondary); border-bottom:1px solid var(--gray-100); flex-shrink:0; gap:8px; flex-wrap:wrap; }
.f3-topbar__left { display:flex; align-items:center; gap:8px; }
.f3-topbar__back { text-decoration:none; color:var(--text-primary); padding:4px 8px; display:flex; align-items:center; }
.f3-topbar__title { font-size:14px; font-weight:700; margin:0; display:flex; align-items:center; gap:6px; }
.f3-topbar__title svg { flex-shrink:0; }
.f3-topbar__right { display:flex; align-items:center; gap:8px; }

.f3-lang-toggle { display:flex; gap:2px; background:var(--gray-100); padding:2px; border-radius:var(--radius-md); }
.f3-lang-btn { padding:5px 12px; border:none; border-radius:var(--radius-sm); background:transparent; font-size:12px; font-weight:600; cursor:pointer; color:var(--text-secondary); }
.f3-lang-btn.active { background:var(--bg-primary); color:var(--primary-700); box-shadow:var(--shadow-sm); }

/* Buttons */
.f3-btn { padding:7px 14px; border:1px solid var(--gray-200); border-radius:var(--radius-md); background:var(--bg-primary); font-size:12px; font-weight:600; cursor:pointer; color:var(--text-primary); transition:all 0.15s; display:inline-flex; align-items:center; gap:5px; }
.f3-btn svg { flex-shrink:0; }
.f3-btn:hover { background:var(--gray-50); }
.f3-btn:disabled { opacity:0.4; cursor:not-allowed; }
.f3-btn--primary { background:var(--primary-600); color:#fff; border-color:var(--primary-600); }
.f3-btn--primary:hover { background:var(--primary-700); }
.f3-btn--danger { background:#ef4444; color:#fff; border-color:#ef4444; }
.f3-btn--sm { padding:5px 10px; font-size:11px; }
.f3-btn--full { width:100%; justify-content:center; }

.f3-workspace { display:flex; flex:1; overflow:hidden; }

/* Left panel */
.f3-left { width:320px; flex-shrink:0; display:flex; flex-direction:column; background:var(--bg-primary); border-right:1px solid var(--gray-100); overflow:hidden; }

/* Tabs */
.f3-tabs { display:flex; border-bottom:1px solid var(--gray-100); flex-shrink:0; }
.f3-tab { flex:1; padding:10px; border:none; background:var(--bg-secondary); font-size:13px; font-weight:600; cursor:pointer; text-align:center; color:var(--text-secondary); display:flex; align-items:center; justify-content:center; gap:5px; }
.f3-tab svg { flex-shrink:0; }
.f3-tab.active { background:var(--bg-primary); color:var(--primary-700); border-bottom:2px solid var(--primary-600); }
.f3-tab-body { flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:8px; }

/* Form elements */
.f3-notice { font-size:11px; padding:8px 10px; background:#fef3c7; border:1px solid #fbbf24; border-radius:var(--radius-md); color:#92400e; }
.f3-card { background:var(--bg-secondary); border:1px solid var(--gray-100); border-radius:var(--radius-lg); padding:12px; }
.f3-card__h { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--text-tertiary); margin-bottom:8px; padding-bottom:5px; border-bottom:1px solid var(--gray-100); }
.f3-row { display:flex; gap:8px; margin-bottom:6px; }
.f3-row:last-child { margin-bottom:0; }
.f3-col { flex:1; }
.f3-lbl { display:block; font-size:10px; font-weight:600; color:var(--text-secondary); margin-bottom:2px; text-transform:uppercase; letter-spacing:0.3px; }
.f3-lbl .rq { color:#ef4444; }
.f3-inp { width:100%; padding:6px 8px; border:1.5px solid var(--gray-200); border-radius:var(--radius-md); font-size:12px; background:var(--bg-primary); color:var(--text-primary); box-sizing:border-box; }
.f3-inp:focus { outline:none; border-color:var(--primary-400); }

/* Gender */
.f3-gender-row { display:flex; gap:4px; margin-bottom:6px; }
.f3-gender { flex:1; padding:5px; border:2px solid var(--gray-200); border-radius:var(--radius-md); background:var(--bg-primary); font-size:11px; font-weight:600; cursor:pointer; text-align:center; }
.f3-gender--m.active { border-color:#3b82f6; background:#eff6ff; color:#1d4ed8; }
.f3-gender--f.active { border-color:#ec4899; background:#fdf2f8; color:#be185d; }

/* Tree builder */
.f3-tree-btns { display:flex; flex-direction:column; gap:4px; }
.f3-sel-info { font-size:11px; color:var(--text-secondary); margin-bottom:6px; padding:4px 8px; background:var(--bg-tertiary); border-radius:var(--radius-sm); }
.f3-edit-row { display:flex; gap:4px; }
.f3-edit-row .f3-btn { flex:1; }
.f3-help ul { margin:0; padding-left:14px; font-size:10px; color:var(--text-secondary); line-height:1.7; }

/* Right side */
.f3-right { flex:1; position:relative; overflow:auto; }

/* A4 preview */
.f3-a4-wrap { width:100%; min-height:100%; overflow-y:auto; background:#e2e8f0; display:flex; justify-content:center; padding:20px 20px 40px; box-sizing:border-box; align-items:flex-start; }
.f3-a4 { width:794px; padding:45px 50px; box-sizing:border-box; transform-origin:top center; font-family:'Inter',system-ui,sans-serif; font-size:14px; color:#1a1a1a; line-height:1.6; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.12); flex-shrink:0; margin-bottom:20px; -webkit-user-select:none; user-select:none; }
.f3-page[data-lang="mr"] .f3-a4 { font-family:'Tiro Devanagari Marathi',serif; }
.f3-doc-body { font-size:14px; line-height:1.9; text-indent:25px; }
.f3-v { font-weight:700; color:#0d2757; border-bottom:1.5px solid #333; padding:0 3px; min-width:40px; display:inline-block; text-align:center; }
.f3-v.filled { border-bottom:none; min-width:0; padding:0; display:inline; }
.f3-doc-sign { display:flex; justify-content:space-between; margin-top:40px; }
.f3-sign-l { display:flex; flex-direction:column; align-items:flex-start; }
.f3-sign-r { display:flex; flex-direction:column; align-items:flex-start; margin-left:auto; padding-right:40px; }
.f3-sign-lbl { font-size:14px; font-weight:600; }

/* Canvas */
.f3-canvas-wrap { position:absolute; inset:0; background:#f8fafc; background-image:radial-gradient(circle,#e2e8f0 1px,transparent 1px); background-size:20px 20px; cursor:grab; }
.f3-canvas-wrap:active { cursor:grabbing; }
.f3-canvas-wrap canvas { position:absolute; top:0; left:0; }
.f3-canvas-empty { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.f3-canvas-empty.hidden { display:none; }
.f3-zoom-info { position:absolute; bottom:10px; right:10px; background:var(--bg-primary); border:1px solid var(--gray-200); border-radius:var(--radius-md); padding:3px 8px; font-size:11px; font-weight:600; color:var(--text-secondary); pointer-events:none; }

/* Document branding */
.f3-doc-branding { position:absolute; bottom:12px; right:16px; font-size:9px; color:#b0b8c4; font-family:Inter,system-ui,sans-serif; letter-spacing:0.5px; }

/* Watermark overlay — hidden after payment */
.f3-doc-watermark { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:72px; font-weight:800; color:rgba(0,0,0,0.06); font-family:Inter,system-ui,sans-serif; letter-spacing:6px; transform:rotate(-35deg); pointer-events:none; z-index:1; text-transform:uppercase; }
.f3-doc-watermark.hidden { display:none; }

/* Pricing badge */
.f3-pricing { padding:8px 12px; background:rgba(245,158,11,0.08); border:1px solid rgba(245,158,11,0.2); border-radius:var(--radius-md); font-size:11px; color:#b45309; font-weight:500; text-align:center; display:flex; align-items:center; justify-content:center; gap:6px; }
.f3-pricing svg { flex-shrink:0; }

/* Confirm dialog */
.f3-confirm-overlay { position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; }
.f3-confirm-box { background:var(--bg-primary); border-radius:16px; padding:28px 24px; max-width:380px; width:100%; box-shadow:0 20px 60px rgba(0,0,0,0.3); text-align:center; }
.f3-confirm-icon { color:#f59e0b; margin-bottom:12px; }
.f3-confirm-title { font-size:18px; font-weight:700; margin-bottom:8px; }
.f3-confirm-msg { font-size:14px; color:var(--text-secondary); line-height:1.5; margin-bottom:8px; }
.f3-confirm-note { font-size:11px; color:var(--text-tertiary); margin-bottom:20px; padding:8px; background:var(--bg-tertiary); border-radius:8px; }
.f3-confirm-btns { display:flex; gap:10px; }
.f3-confirm-btns .f3-btn { flex:1; padding:10px; justify-content:center; font-size:13px; }

@media (max-width:900px) {
    .f3-workspace { flex-direction:column; }
    .f3-left { width:100%; max-height:50vh; }
}