/* ==========================================================================
   HuntPDF — shared tool UX layer  (tool-ux.css)
   Adds, on every tool page:
     · a 4-step flow indicator   Upload → Preview → Process → Download
     · a live file preview panel (PDF / image / Word)
     · a rename-before-download field
     · a compact "Popular tools" row above the download button

   IMPORTANT: this file only ADDS new `.hx-*` components. It does not touch
   .dropzone, .result, .actions, .trust or any existing class, so the restored
   live alignment is left exactly as it is.
   ========================================================================== */

/* ---------- step indicator ---------- */
.hx-steps {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; max-width: 760px; margin: 0 auto 22px; flex-wrap: nowrap;
}
.hx-step { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.hx-step-ic {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 2px solid #E7ECF3; color: #94A3B8; flex: none;
  transition: background .2s, border-color .2s, color .2s;
}
.hx-step-ic svg { width: 17px; height: 17px; }
.hx-step-tx {
  font-size: 13px; font-weight: 600; color: #94A3B8; white-space: nowrap;
  transition: color .2s;
}
.hx-step-line { flex: 1 1 auto; height: 2px; background: #E7ECF3; min-width: 14px; border-radius: 2px; transition: background .2s; }
.hx-step.is-active .hx-step-ic { background: #2563EB; border-color: #2563EB; color: #fff; }
.hx-step.is-active .hx-step-tx { color: #2563EB; font-weight: 700; }
.hx-step.is-done .hx-step-ic { background: #EFF4FF; border-color: #2563EB; color: #2563EB; }
.hx-step.is-done .hx-step-tx { color: #0B1220; }
.hx-step.is-done + .hx-step-line { background: #2563EB; }
@media (max-width: 640px) { .hx-step-tx { display: none; } .hx-steps { gap: 4px; } }

/* ---------- live preview ---------- */
.hx-preview {
  display: none; max-width: 860px; margin: 0 auto 22px; background: #fff;
  border: 1px solid #E7ECF3; border-radius: 12px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}
.hx-preview.show { display: block; }
.hx-prev-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px; border-bottom: 1px solid #F1F5F9; background: #F7F9FC;
}
.hx-prev-head .ic {
  width: 28px; height: 28px; border-radius: 7px; background: #2563EB; color: #fff;
  display: grid; place-items: center; flex: none;
}
.hx-prev-head .ic svg { width: 15px; height: 15px; }
.hx-prev-name {
  font-size: 13.5px; font-weight: 700; color: #0B1220;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hx-prev-meta { font-size: 12px; color: #94A3B8; margin-left: auto; flex: none; }
.hx-prev-body {
  max-height: 430px; overflow-y: auto; padding: 22px;
  background: #fff; text-align: center;
}
.hx-prev-body canvas,
.hx-prev-body img {
  max-width: 100%; height: auto; border: 1px solid #E7ECF3; border-radius: 6px;
}
.hx-prev-doc {
  text-align: left; padding: 6px 8px; font-size: 14px; line-height: 1.65; color: #334155;
}
.hx-prev-doc h1, .hx-prev-doc h2, .hx-prev-doc h3 { color: #0B1220; margin: 14px 0 7px; }
.hx-prev-doc table { border-collapse: collapse; width: 100%; }
.hx-prev-doc td, .hx-prev-doc th { border: 1px solid #E7ECF3; padding: 6px 9px; font-size: 13px; }
.hx-prev-msg { padding: 26px 10px; color: #94A3B8; font-size: 13.5px; }
.hx-prev-note {
  padding: 9px 16px; border-top: 1px solid #F1F5F9; background: #F7F9FC;
  font-size: 12px; color: #94A3B8; text-align: center;
}
.hx-prev-pager {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; border-top: 1px solid #F1F5F9; font-size: 12.5px; color: #64748B;
}
.hx-prev-pager button {
  border: 1px solid #E7ECF3; background: #fff; border-radius: 7px;
  width: 28px; height: 28px; cursor: pointer; color: #475569; font-family: inherit;
}
.hx-prev-pager button:hover:not(:disabled) { border-color: #2563EB; color: #2563EB; }
.hx-prev-pager button:disabled { opacity: .4; cursor: default; }

/* ---------- rename before download ---------- */
.hx-rename {
  display: none; align-items: center; gap: 8px; justify-content: center;
  flex-wrap: wrap; margin: 0 auto 14px;
}
.hx-rename.show { display: flex; }
.hx-rename label { font-size: 13px; font-weight: 600; color: #475569; }
.hx-rename-field {
  display: flex; align-items: center; border: 1px solid #E7ECF3;
  border-radius: 9px; overflow: hidden; background: #fff;
}
.hx-rename-field input {
  border: 0; outline: 0; padding: 9px 12px; font-size: 13.5px; font-family: inherit;
  color: #0B1220; width: 250px; background: transparent;
}
.hx-rename-field input:focus { background: #F7F9FC; }
.hx-rename-field .ext {
  padding: 9px 11px 9px 0; font-size: 13.5px; color: #94A3B8; font-weight: 600;
}
@media (max-width: 560px) { .hx-rename-field input { width: 150px; } }

/* ---------- popular tools (compact, above the download button) ---------- */
.hx-popular { display: none; max-width: 700px; margin: 0 auto 18px; }
.hx-popular.show { display: block; }
.hx-popular-h {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: #94A3B8; text-align: center; margin: 0 0 10px;
}
.hx-popular-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.hx-popular-row a {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px;
  border: 1px solid #E7ECF3; border-radius: 999px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: #475569; text-decoration: none;
  transition: border-color .15s, color .15s, background .15s;
}
.hx-popular-row a:hover { border-color: #2563EB; color: #2563EB; background: #EFF4FF; }
.hx-popular-row svg { width: 14px; height: 14px; flex: none; }