/* ============================================================================
   Shared look for the six PDF tools at /tools/pdf-*.

   Layout and controls only — each page keeps its own copy, its own hero wording
   and its own accent, set with --pdft-accent on the wrapper.
   ========================================================================== */

.pdft-scope {
  --pdft-accent: #1a6aff;
  --pdft-accent-2: #6c3fff;
}

/* Every panel on these pages starts hidden and is revealed by script. This lived in
   pdf-merge's own <style> block until that page moved onto this sheet - without it the
   error, progress and result panels are all permanently visible, and the page shows a
   success message next to a failure. */
.hidden { display: none !important; }

/* ── Hero ──────────────────────────────────────────────────────────────── */

.pdft-hero {
  background: linear-gradient(135deg, var(--pdft-accent) 0%, var(--pdft-accent-2) 100%);
  color: #fff; text-align: center;
  padding: 78px 20px 92px;
  position: relative; overflow: hidden;
}
.pdft-hero::before {
  content: ''; position: absolute;
  width: 480px; height: 480px; background: rgba(255, 255, 255, .06);
  border-radius: 50%; top: -160px; right: -110px; pointer-events: none;
}
.pdft-badge {
  display: inline-block;
  background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50px; padding: 6px 18px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 16px; position: relative; z-index: 1;
}
.pdft-hero h1 {
  font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
  margin: 0 0 14px; position: relative; z-index: 1;
}
.pdft-hero h1 .hl { color: #ffd93d; }
.pdft-hero p {
  font-size: 1.05rem; opacity: .88; max-width: 560px;
  margin: 0 auto; line-height: 1.7; position: relative; z-index: 1;
}

/* ── Tool card ─────────────────────────────────────────────────────────── */

.pdft-wrap { max-width: 780px; margin: -56px auto 70px; padding: 0 20px; position: relative; z-index: 10; }
.pdft-card {
  background: #fff; border-radius: 22px;
  box-shadow: 0 18px 56px rgba(10, 37, 64, .14);
  border: 1.5px solid #eef0f8; overflow: hidden;
}

.pdft-drop {
  display: block; margin: 24px; padding: 40px 24px;
  border: 2.5px dashed #cbd5e8; border-radius: 18px;
  text-align: center; cursor: pointer; background: #fbfcff;
  transition: border-color .18s, background .18s;
}
.pdft-drop:hover, .pdft-drop.over { border-color: var(--pdft-accent); background: #f4f8ff; }
.pdft-drop-icon { font-size: 2.8rem; line-height: 1; margin-bottom: 10px; }
.pdft-drop-title { font-size: 1.05rem; font-weight: 800; color: #0f1b2d; margin-bottom: 6px; }
.pdft-drop-sub { font-size: .85rem; color: #7a869a; }
.pdft-drop input { display: none; }

/* ── File rows ─────────────────────────────────────────────────────────── */

.pdft-files { padding: 0 24px; display: flex; flex-direction: column; gap: 10px; }
.pdft-file {
  display: flex; align-items: center; gap: 12px;
  background: #f8faff; border: 1.5px solid #e6ecf7;
  border-radius: 14px; padding: 12px 14px;
}
.pdft-file.dragging { opacity: .45; }
.pdft-file-grip { cursor: grab; color: #b6c0d4; font-size: 1.1rem; user-select: none; line-height: 1; flex: none; }
.pdft-file-icon { font-size: 1.4rem; flex: none; }
.pdft-file-meta { flex: 1; min-width: 0; }
.pdft-file-name {
  display: block; font-size: .9rem; font-weight: 700; color: #0f1b2d;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pdft-file-size { display: block; font-size: .76rem; color: #8a94a6; margin-top: 2px; }
.pdft-file-status { font-size: .72rem; font-weight: 700; color: var(--pdft-accent); flex: none; }
.pdft-file-status.err { color: #dc2626; }
.pdft-file-x { border: none; background: none; cursor: pointer; flex: none; color: #b6c0d4; font-size: 1.15rem; line-height: 1; padding: 4px; }
.pdft-file-x:hover { color: #dc2626; }

/* ── Options ───────────────────────────────────────────────────────────── */

.pdft-options {
  margin: 18px 24px 0; padding: 18px 20px;
  background: #f8faff; border: 1.5px solid #e6ecf7; border-radius: 16px;
  /* flex-start, not flex-end: only some fields carry a hint line beneath them, and
     aligning to the bottom pushes their inputs out of line with the rest. */
  display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-start;
}
.pdft-field { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 140px; }
.pdft-field label {
  font-size: .72rem; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: #6b7280;
}
.pdft-field input, .pdft-field select {
  border: 1.5px solid #dbe3f0; border-radius: 12px;
  padding: 11px 14px; font-size: .95rem; font-family: inherit;
  color: #0f1b2d; background: #fff; width: 100%;
}
.pdft-field input:focus, .pdft-field select:focus {
  outline: none; border-color: var(--pdft-accent);
  box-shadow: 0 0 0 3px rgba(26, 106, 255, .12);
}
.pdft-field-hint { font-size: .74rem; color: #8a94a6; }

.pdft-choices { display: flex; gap: 8px; flex-wrap: wrap; }
.pdft-choice {
  border: 1.5px solid #dbe3f0; background: #fff; border-radius: 12px;
  padding: 10px 18px; cursor: pointer; font-family: inherit;
  font-size: .9rem; font-weight: 700; color: #4a5568;
  transition: border-color .12s, background .12s, color .12s;
}
.pdft-choice.on { border-color: var(--pdft-accent); background: var(--pdft-accent); color: #fff; }

/* ── Actions, progress, result ─────────────────────────────────────────── */

.pdft-actions { padding: 22px 24px 26px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pdft-btn {
  background: linear-gradient(135deg, var(--pdft-accent), var(--pdft-accent-2));
  color: #fff; border: none; border-radius: 50px;
  padding: 14px 34px; font-size: 1rem; font-weight: 800;
  cursor: pointer; font-family: inherit;
  box-shadow: 0 8px 24px rgba(26, 106, 255, .3);
  transition: transform .12s, opacity .12s;
}
.pdft-btn:active { transform: scale(.97); }
.pdft-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.pdft-btn-ghost {
  background: none; border: 2px solid #e6ecf7; color: #6b7280;
  border-radius: 50px; padding: 12px 24px;
  font-size: .88rem; font-weight: 700; cursor: pointer; font-family: inherit;
}
.pdft-note { font-size: .78rem; color: #8a94a6; flex: 1; min-width: 180px; }

.pdft-progress { height: 6px; background: #eef2fa; border-radius: 3px; overflow: hidden; margin: 0 24px; }
.pdft-progress span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--pdft-accent), var(--pdft-accent-2));
  transition: width .25s;
}

.pdft-result {
  margin: 0 24px 26px; padding: 22px;
  background: #ecfdf5; border: 1.5px solid #6ee7b7;
  border-radius: 16px; text-align: center;
}
.pdft-result h3 { margin: 0 0 6px; font-size: 1.1rem; font-weight: 800; color: #065f46; }
.pdft-result p { margin: 0 0 16px; font-size: .86rem; color: #047857; }
.pdft-dl {
  display: inline-block; background: #059669; color: #fff;
  border-radius: 50px; padding: 13px 32px; text-decoration: none;
  font-size: .95rem; font-weight: 800;
}
.pdft-error {
  margin: 0 24px 22px; padding: 14px 18px;
  background: #fef2f2; border: 1.5px solid #fecaca;
  border-radius: 14px; color: #b91c1c; font-size: .86rem; font-weight: 600;
}

/* ── Long-form content ─────────────────────────────────────────────────── */

.pdft-content { max-width: 780px; margin: 0 auto 60px; padding: 0 20px; }
.pdft-content h2 { font-size: 1.5rem; font-weight: 800; color: #0f1b2d; margin: 44px 0 14px; }
.pdft-content h3 { font-size: 1.05rem; font-weight: 800; color: #0f1b2d; margin: 26px 0 8px; }
.pdft-content p, .pdft-content li { font-size: .95rem; color: #4a5568; line-height: 1.8; }
.pdft-content ul, .pdft-content ol { margin: 10px 0 10px 22px; }
.pdft-content a { color: var(--pdft-accent); }

.pdft-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 20px 0; }
.pdft-step { background: #f8faff; border: 1.5px solid #e6ecf7; border-radius: 16px; padding: 20px; }
.pdft-step-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--pdft-accent); color: #fff; font-weight: 800; font-size: .85rem;
  margin-bottom: 10px;
}
.pdft-step h4 { margin: 0 0 6px; font-size: .95rem; font-weight: 800; color: #0f1b2d; }
.pdft-step p { margin: 0; font-size: .85rem; color: #5a6a7a; line-height: 1.6; }

.pdft-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.pdft-related a {
  background: #eef4ff; color: var(--pdft-accent); text-decoration: none;
  border-radius: 50px; padding: 8px 18px; font-size: .85rem; font-weight: 700;
}
.pdft-related a:hover { background: #dce8ff; }