/* WordToJPG.id: add-on converter styles. Loaded by $pageStyles in index.php.
   Keeps the approved header.css and style.css unchanged. */
.wj-hero [hidden], .wj-render-host[hidden] { display: none !important; }
.wj-upload-panel, .wj-result-section { box-sizing: border-box; }
.wj-upload-zone.is-dragging { border-color: #087C83; background: #E8F4EF; }
.wj-file-selected, .wj-convert-busy { width: 100%; display: flex; align-items: center; flex-direction: column; text-align: center; }
.wj-selected-note { color: #526573; }
.wj-converter-secondary {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; padding: 10px 16px; border: 1px solid #C8D7D2;
  border-radius: 12px; background: #FFFBF5; color: #102B3A;
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
.wj-converter-secondary:hover { background: #EDF4EF; border-color: #9DBBB3; }
.wj-selected-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px; }
.wj-convert-busy { padding: 22px 10px; }
.wj-convert-spinner {
  width: 58px; height: 58px; margin-bottom: 17px; border: 5px solid #DDEDE7;
  border-top-color: #087C83; border-radius: 50%; animation: wj-spin .9s linear infinite;
}
@keyframes wj-spin { to { transform: rotate(360deg); } }
.wj-convert-progress-text { color: #526573; font-size: 14px; margin: 11px 0 14px; }
.wj-progress-track { width: min(100%, 380px); height: 8px; border-radius: 100px; background: #DCE8E4; overflow: hidden; }
.wj-progress-track > span { display: block; width: 0%; height: 100%; background: #087C83; transition: width .2s linear; }
.wj-result-section {
  width: min(100%, 995px); margin: 22px auto 0; text-align: left;
  background: #FFFBF5; border: 1px solid #E5E5D6; border-radius: 24px;
  padding: clamp(16px, 3vw, 26px); box-shadow: 0 10px 28px rgba(16,43,58,.07);
}
.wj-result-heading-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; }
.wj-result-heading-row h2 { font-size: clamp(19px, 2.2vw, 25px); letter-spacing: -.025em; margin: 0 0 5px; }
.wj-result-heading-row p { font-size: 13px; color: #526573; margin: 0; }
.wj-result-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wj-result-zip, .wj-page-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 44px; padding: 10px 17px; background: #087C83; color: white;
  border: 0; border-radius: 11px; font: inherit; font-size: 13px; font-weight: 700;
  text-decoration: none; cursor: pointer;
}
.wj-result-zip:hover, .wj-page-download:hover { background: #06676D; }
.wj-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 23px; }
.wj-page-card { border: 1px solid #E1E7E3; background: #FFF; border-radius: 15px; padding: 12px; min-width: 0; }
.wj-page-img-wrap { background: #E7ECE9; border-radius: 9px; padding: 9px; aspect-ratio: 4/5; display: flex; align-items: center; justify-content: center; }
.wj-page-img-wrap img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; box-shadow: 0 3px 10px rgba(0,0,0,.12); }
.wj-page-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 12px; }
.wj-page-number { font-size: 13px; font-weight: 700; color: #102B3A; }
.wj-page-download { font-size: 12px; min-height: 36px; padding: 8px 12px; border-radius: 8px; }
.wj-result-footnote { color: #526573; font-size: 12px; line-height: 1.6; margin: 17px 0 0; }
/* DOCX rendering workspace: keep the full-size pages OUTSIDE the visible
   browser window, while retaining layout for html2canvas capture.
   Do not use display:none, visibility:hidden, opacity:0 or overflow:hidden:
   those can produce blank JPG files. */
.wj-render-host {
  position: fixed !important;
  left: -20000px !important;
  top: 0 !important;
  z-index: -1 !important;
  width: 1100px;
  height: auto;
  overflow: visible;
  pointer-events: none;
  opacity: 1;
  visibility: visible;
}
.wj-render-host .docx-wrapper { padding: 0 !important; background: transparent !important; }
.wj-render-host .docx-wrapper > section.docx {
  box-shadow: none !important; margin: 0 !important; background: white !important;
}
.wj-upload-error { max-width: 750px; margin: 11px auto 0; }
button:focus-visible, .wj-page-download:focus-visible { outline: 3px solid #102B3A; outline-offset: 3px; }
@media(max-width: 800px) { .wj-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media(max-width: 580px) {
 .wj-result-section { border-radius: 18px; }
 .wj-result-grid { grid-template-columns: 1fr; }
 .wj-result-actions { width: 100%; }
 .wj-result-zip, .wj-result-actions .wj-converter-secondary { flex: 1; }
 .wj-page-img-wrap { aspect-ratio: 3/4; }
 .wj-selected-actions { width: 100%; }
 .wj-selected-actions .wj-upload-button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
 .wj-convert-spinner { animation: none; }
 .wj-progress-track > span { transition: none; }
}