/* ═══════════════════════════════════════════════════
   ParaFree — PDF tools page (pdf-tools.css)
   Colours, fonts, tabs, panels and the output box are copied from index.html so this page
   looks like the homepage without sharing (or changing) its CSS.
   ═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface2: #f0ede6;
  --border: #e2ddd4;
  --text: #1a1814;
  --text2: #6b6660;
  --text3: #9e9890;
  --accent: #2d6a4f;
  --accent2: #52b788;
  --accent-light: #d8f3dc;
  --red: #e63946;
  --amber: #f4a261;
  --radius: 14px;
  --radius-sm: 8px;
}

html { overflow-x: hidden; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  font-size: 15px;
  line-height: 1.6;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
a { color: var(--accent); }

/* ── NAV (same look as the homepage) ── */
#mainNav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: transparent; padding: 0 40px; height: 68px;
  display: flex; align-items: center; justify-content: space-between;
  transition: all 0.3s ease;
}
#mainNav .nav-link {
  color: rgba(255,255,255,0.85); font-size: 14px; font-weight: 500; text-decoration: none;
  padding: 8px 12px; transition: color 0.2s;
}
#mainNav .nav-link:hover { color: #fff; }
#navCta {
  padding: 10px 22px; background: #ffffff; border-radius: 10px; color: #1a3a2a; font-weight: 800;
  font-size: 14px; text-decoration: none; box-shadow: 0 2px 12px rgba(0,0,0,0.15); transition: all 0.2s;
}
#homeNavLinks { display: flex; gap: 8px; align-items: center; }
#menuToggle {
  display: none; background: none; border: none; cursor: pointer; padding: 8px; flex-direction: column;
  gap: 5px; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
}
#menuToggle span { display: block; width: 22px; height: 2px; background: rgba(255,255,255,0.85); border-radius: 2px; }
#mainNav.pf-nav-scrolled {
  background: rgba(255,255,255,0.97); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0,0,0,0.08); box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
#mainNav.pf-nav-scrolled .nav-link { color: #64748b; }
#mainNav.pf-nav-scrolled #menuToggle span { background: #1a3a2a; }

#mobileMenu { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 9998; }
#mobileMenu .pf-menu-inner {
  position: absolute; top: 0; right: 0; width: 260px; height: 100%; background: #1a3a2a; padding: 20px;
  display: flex; flex-direction: column; overflow-y: auto;
}
#mobileMenu .pf-menu-close { align-self: flex-end; background: none; border: none; font-size: 28px; cursor: pointer; color: #aaa; line-height: 1; padding: 0 4px; margin-bottom: 16px; }
#mobileMenu a { color: #ccc; text-decoration: none; font-size: 16px; padding: 12px 8px; border-bottom: 1px solid rgba(255,255,255,0.08); display: block; }
#mobileMenu a:last-child { border-bottom: none; }

/* ── HERO ── */
.pf-hero {
  background: linear-gradient(135deg, rgba(10,28,20,0.97) 0%, rgba(26,58,42,0.95) 50%, rgba(45,106,79,0.92) 100%), #1a3a2a;
  padding: 116px 24px 48px; text-align: center; color: #fff;
}
.pf-hero-inner { max-width: 800px; margin: 0 auto; }
.pf-hero-badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; max-width: 100%;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25); border-radius: 24px;
  padding: 8px 20px; margin-bottom: 24px; color: rgba(255,255,255,0.95);
  font-size: clamp(11px, 3.5vw, 14px); font-weight: 600;
}
.pf-hero h1 {
  font-family: 'Syne', sans-serif; font-weight: 800; font-size: clamp(32px, 6vw, 54px); line-height: 1.08;
  letter-spacing: -1.5px; margin-bottom: 18px;
}
.pf-hero h1 em { font-style: normal; color: #52b788; }
.pf-hero p { font-size: 18px; color: rgba(255,255,255,0.85); line-height: 1.7; max-width: 620px; margin: 0 auto; }
.pf-privacy {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; padding: 9px 18px; border-radius: 20px;
  background: rgba(82,183,136,0.22); border: 1px solid rgba(82,183,136,0.55); color: #b7f0cf; font-weight: 700; font-size: 15px;
}

/* ── TOOL TABS (from the homepage) ── */
.tool-tabs-wrap { max-width: 1100px; margin: -26px auto 12px; padding: 0 16px; position: relative; z-index: 2; }
.tool-tabs {
  display: flex; flex-wrap: wrap; gap: 8px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px; width: fit-content; max-width: 100%; margin: 0 auto;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.tool-tab {
  background: transparent; border: none; border-radius: var(--radius-sm); padding: 10px 20px;
  font-family: 'Syne', sans-serif; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--text2);
  transition: all 0.2s ease; display: flex; align-items: center; gap: 8px; min-height: 44px;
}
.tool-tab:hover { background: var(--surface2); color: var(--text); }
.tool-tab.active { background: var(--accent); color: white; box-shadow: 0 2px 8px rgba(45,106,79,0.25); }

/* ── PANELS + OUTPUT BOX (from the homepage) ── */
.pf-tools { max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: box-shadow 0.2s;
}
.panel:hover { box-shadow: 0 4px 24px rgba(0,0,0,0.09); }
.panel-header {
  padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center;
  justify-content: space-between; background: var(--surface2); gap: 10px; flex-wrap: wrap;
}
.panel-label { font-family: 'Syne', sans-serif; font-weight: 600; font-size: 13px; color: var(--text2); text-transform: uppercase; letter-spacing: 0.8px; }
.panel-footer {
  padding: 12px 18px; border-top: 1px solid var(--border); display: flex; align-items: center;
  justify-content: space-between; background: var(--surface2); gap: 8px; flex-wrap: wrap;
}
.output-text {
  flex: 1; padding: 18px; font-size: 15px; line-height: 1.7; color: var(--text); min-height: 280px;
  word-break: break-word;
}
.fmt-btn {
  width: 28px; height: 28px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface);
  cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center;
  transition: border-color 0.15s, background 0.15s; font-family: inherit; flex-shrink: 0;
}
.fmt-btn:hover { border-color: var(--accent); background: var(--accent-light); }
.fmt-btn-active { border-color: var(--accent) !important; background: var(--accent-light) !important; color: var(--accent); }
.word-count, .pf-lib-status { font-size: 12px; color: var(--text3); }

.btn-paraphrase {
  background: var(--accent); color: white; border: none; border-radius: var(--radius); padding: 14px 40px;
  font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; cursor: pointer; transition: all 0.2s ease;
  letter-spacing: 0.3px; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 16px rgba(45,106,79,0.3); min-height: 50px;
}
.btn-paraphrase:hover { background: #245a41; transform: translateY(-2px); box-shadow: 0 6px 24px rgba(45,106,79,0.4); }
.btn-paraphrase:disabled { background: var(--text3); cursor: not-allowed; transform: none; box-shadow: none; }
.btn-sm {
  background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 16px;
  font-size: 14px; font-family: 'DM Sans', sans-serif; cursor: pointer; color: var(--text2); transition: all 0.15s;
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none;
}
.btn-sm:hover { background: var(--surface2); color: var(--text); border-color: var(--text3); }
.btn-sm:disabled { opacity: 0.6; cursor: wait; }
.btn-dl { background: var(--accent-light); color: var(--accent); border-color: var(--accent2); font-weight: 600; }
.btn-dl:hover { background: #c7f0d0; border-color: var(--accent); color: var(--accent); }

/* ── Tool UI ── */
.pf-panel-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.pf-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center;
  border: 2px dashed #b7e4c7; border-radius: var(--radius); background: #f3fbf5; padding: 34px 18px; cursor: pointer;
  transition: background 0.15s, border-color 0.15s; min-height: 150px;
}
.pf-drop:hover, .pf-drop:focus-within, .pf-drop.pf-drop-over { background: var(--accent-light); border-color: var(--accent); }
.pf-drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.pf-drop-btn {
  display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff; border-radius: 12px;
  padding: 13px 26px; font-family: 'Syne', sans-serif; font-weight: 700; font-size: 16px; min-height: 48px;
}
.pf-drop-hint { color: var(--text2); font-size: 13px; }
.pf-drop-hint .pf-desktop { display: inline; }
.pf-note { font-size: 13px; color: var(--text2); line-height: 1.6; }
.pf-note strong { color: var(--text); }
.pf-warn { font-size: 13px; color: #8a4b12; background: #fff4e8; border: 1px solid #f6cfa6; border-radius: var(--radius-sm); padding: 8px 12px; }
.pf-error { color: #9b1c25; background: #fdecee; border: 1px solid #f5c2c7; border-radius: var(--radius-sm); padding: 10px 14px; font-size: 14px; }
.pf-progress { display: flex; flex-direction: column; gap: 6px; }
.pf-progress-bar { height: 10px; background: var(--surface2); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.pf-progress-bar span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent), var(--accent2)); transition: width 0.2s ease; }
.pf-progress-label { font-size: 13px; color: var(--text2); }
.pf-summary { font-size: 14px; color: var(--text); }
.pf-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pf-row-end { justify-content: flex-end; }
.pf-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pf-options label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text2); font-weight: 500; }
.pf-options select {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size: 14px; color: var(--text); font-family: inherit; min-height: 44px; width: 100%;
}
.pf-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pf-mode {
  display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; cursor: pointer; background: var(--surface);
}
.pf-mode:has(input:checked) { border-color: var(--accent); background: #f3fbf5; }
.pf-mode input { margin-top: 4px; accent-color: var(--accent); width: 18px; height: 18px; flex-shrink: 0; }
.pf-mode strong { display: block; font-size: 14px; }
.pf-mode span { font-size: 13px; color: var(--text2); }
.pf-file-name { font-size: 14px; color: var(--text); font-weight: 500; word-break: break-all; }

.pf-list { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.pf-list:empty { display: none; }
.pf-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; cursor: grab;
}
.pf-item.pf-dragging { opacity: 0.5; }
.pf-item-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.pf-item-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.pf-item-meta { font-size: 12px; color: var(--text3); white-space: nowrap; margin-left: auto; }
.pf-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); flex-shrink: 0; background: var(--surface2); }
.pf-file-icon { font-size: 11px; font-weight: 800; color: #fff; background: var(--red); border-radius: 5px; padding: 6px 7px; flex-shrink: 0; letter-spacing: 0.5px; }
.pf-item-controls { display: flex; gap: 6px; flex-shrink: 0; }
.pf-icon-btn {
  width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
  cursor: pointer; font-size: 16px; color: var(--text2); display: inline-flex; align-items: center; justify-content: center;
}
.pf-icon-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-light); color: var(--accent); }
.pf-icon-btn:disabled { opacity: 0.35; cursor: default; }
.pf-icon-remove:hover:not(:disabled) { border-color: var(--red) !important; background: #fdecee !important; color: var(--red) !important; }

/* Output box holding a document */
.pf-output .output-text { background: #fff; max-height: 70vh; overflow: auto; outline: none; }
.pf-output .output-text[contenteditable="true"]:focus { box-shadow: inset 0 0 0 2px var(--accent-light); }
.pf-doc { font-family: Arial, Helvetica, sans-serif; color: #1a1814; white-space: normal; }
.output-text.pf-doc { line-height: 1.2; }
/* spacing matches the Word file: single line spacing, 6 pt after paragraphs, 12/6 pt round headings */
.pf-doc h1 { font-size: 26px; line-height: 1.2; margin: 12pt 0 6pt; }
.pf-doc h2 { font-size: 21px; line-height: 1.2; margin: 12pt 0 6pt; }
.pf-doc h3 { font-size: 17px; line-height: 1.2; margin: 12pt 0 6pt; }
.pf-doc > :first-child { margin-top: 0; }
.pf-doc p { margin: 0 0 6pt; }
.pf-doc ul, .pf-doc ol { margin: 0 0 6pt 1.6em; }
.pf-doc li { margin: 0 0 2pt; }
.pf-doc img { max-width: 100%; height: auto; }
.pf-doc .pf-page-break { border: none; border-top: 2px dashed var(--border); margin: 18px 0; height: 0; }
.pf-doc ul ul, .pf-doc ol ol, .pf-doc ul ol, .pf-doc ol ul { margin: 0.25em 0 0.25em 1.4em; }
/* columns from the source PDF (the Word file gets real columns too) */
.pf-doc .pf-cols { column-gap: 1cm; column-rule: 1px dashed var(--border); margin: 0 0 6pt; }
.pf-doc .pf-col > :first-child { margin-top: 0; }
.pf-doc table { border-collapse: collapse; margin: 0 0 6pt; max-width: 100%; }
.pf-doc td, .pf-doc th { border: 1px solid #8f8a82; padding: 3pt 5pt; vertical-align: top; text-align: left; }
.pf-docx-box { background: #e9e6df !important; padding: 12px !important; }
.pf-docx-box section.docx { margin: 0 auto 12px; box-shadow: 0 1px 6px rgba(0,0,0,0.12); }
.pf-next {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; background: #f3fbf5; border: 1px solid #b7e4c7;
  border-radius: var(--radius-sm); padding: 12px 14px;
}
.pf-next span { font-size: 13px; color: var(--text2); }
.pf-next .pf-unit { flex-basis: 100%; font-size: 12px; color: var(--text3); }

/* ── Content sections ── */
.pf-content { max-width: 900px; margin: 0 auto; padding: 8px 16px 40px; }
.pf-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 14px; }
.pf-section h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 8px; color: var(--text); }
.pf-section p { color: var(--text2); font-size: 15px; line-height: 1.7; }
.pf-section p + p { margin-top: 8px; }
.pf-section .pf-try { display: inline-block; margin-top: 10px; font-weight: 600; text-decoration: none; }
.faq { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; margin-top: 22px; }
.faq h2 { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 20px; margin-bottom: 8px; }
.faq-item { border-bottom: 1px solid var(--border); padding: 14px 0; }
.faq-item:last-child { border-bottom: none; padding-bottom: 0; }
.faq-q { font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.faq-a { font-size: 14px; color: var(--text2); line-height: 1.65; }

/* ── FOOTER (same look as the homepage) ── */
.pf-footer { background: #1a3a2a; color: #ccc; padding: 32px 24px; text-align: center; font-family: 'DM Sans', sans-serif; }
.pf-footer-links { display: flex; justify-content: center; gap: 10px 24px; flex-wrap: wrap; margin-bottom: 16px; }
.pf-footer-links a { color: #ccc; text-decoration: none; font-size: 14px; }
.pf-footer-group { display: flex; justify-content: center; gap: 4px 16px; flex-wrap: wrap; margin-bottom: 16px; padding: 10px 0; border-top: 1px solid rgba(255,255,255,0.08); }
.pf-footer-group .pf-footer-title { color: #888; font-size: 13px; width: 100%; margin-bottom: 6px; }
.pf-footer-group a { color: #52b788; text-decoration: none; font-size: 13px; font-weight: 600; }
.pf-footer-brand { display: flex; align-items: center; gap: 8px; justify-content: center; margin-bottom: 8px; }
.pf-footer-brand span { font-family: 'Syne', sans-serif; font-weight: 700; font-size: 14px; color: #ccc; }
.pf-footer p { margin: 0; font-size: 13px; color: #999; }

/* ── Responsive ── */
@media (max-width: 768px) {
  #mainNav { padding: 0 16px; }
  #homeNavLinks { display: none !important; }
  #menuToggle { display: flex !important; }
  .pf-hero { padding: 96px 16px 44px; }
  .pf-hero p { font-size: 16px; }
  .pf-options { grid-template-columns: 1fr; }
  .pf-modes { grid-template-columns: 1fr; }
  .pf-drop-hint .pf-desktop { display: none; }
}
@media (max-width: 480px) {
  .tool-tabs { gap: 4px; padding: 4px; }
  .tool-tab { padding: 8px 11px; font-size: 13px; }
  .pf-panel-body { padding: 14px; }
  .output-text { min-height: 180px; font-size: 14px; padding: 14px; }
  .panel-footer { padding: 10px 12px; }
  .pf-item { flex-wrap: wrap; }
  .pf-item-controls { width: 100%; justify-content: flex-end; }
  .pf-section { padding: 18px 16px; }
  .btn-paraphrase { width: 100%; padding: 14px 20px; }
}

/* ── Print / Save as PDF: only the rendered document ── */
#pfPrintArea { display: none; }
@media print {
  body.pf-printing > *:not(#pfPrintArea) { display: none !important; }
  body.pf-printing { background: #fff; }
  body.pf-printing #pfPrintArea { display: block; }
  #pfPrintArea section.docx { box-shadow: none !important; margin: 0 !important; page-break-after: always; break-after: page; }
  #pfPrintArea section.docx:last-child { page-break-after: auto; break-after: auto; }
  #pfPrintArea .pf-page-break { border: none; break-after: page; page-break-after: always; }
}
/* Complex scripts (Bengali, Devanagari, Arabic, CJK…): fonts that have the letters */
#pfPrintArea.pf-complex, #pfPrintArea.pf-complex * {
  font-family: "Noto Sans", "Noto Sans Bengali", "Noto Sans Devanagari", "Noto Sans Arabic", "Nirmala UI", "Vrinda",
    "Mangal", "Kohinoor Bangla", "Bangla Sangam MN", "Devanagari Sangam MN", "Segoe UI", "Arial Unicode MS",
    "Microsoft YaHei", "PingFang SC", "Hiragino Sans", "Noto Sans CJK SC", sans-serif !important;
}