/* Free Images to PDF Converter — additive to utility.css, which already
   supplies the hero, drop zone, and status line. */

.itp-workspace { border: 1px solid var(--line); border-radius: 20px; padding: 22px; box-shadow: var(--shadow); }
/* An author `.result-actions{display:flex}` rule already exists in
   utility.css with no [hidden] handling, so the UA stylesheet's [hidden]
   rule loses to it on source order — this restores it. Also covers
   pdf-to-images.blade.php, which loads this file too. */
.itp-workspace[hidden], .drop-zone[hidden], .result-actions[hidden] { display: none; }

.itp-options { display: flex; flex-wrap: wrap; align-items: end; gap: 14px; margin-bottom: 18px; }
.itp-options label { display: grid; gap: 5px; font-size: 12px; color: var(--muted); }
.itp-options select { border: 1px solid var(--line); border-radius: 8px; padding: 9px; font: inherit; min-width: 200px; }
.itp-add-more { min-height: 44px; display: inline-flex; align-items: center; cursor: pointer; }

.itp-list { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.itp-row { display: grid; grid-template-columns: 48px 1fr auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.itp-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); }
.itp-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.itp-dims { font-size: 12px; color: var(--muted); white-space: nowrap; }
.itp-row-actions { display: flex; gap: 6px; }
.itp-row-actions .button { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.itp-row-actions .button:disabled { opacity: .35; cursor: not-allowed; }

#itpStatus { margin: 0 0 16px; min-height: 1.4em; }
#itpStatus.error { color: #991b1b; }
#itpStatus.success { color: var(--purple); }
#itpStatus.busy { color: var(--muted); }

.itp-actions { display: flex; flex-wrap: wrap; gap: 9px; }
.itp-actions .button, .result-actions .button { min-height: 46px; }

@media (max-width: 700px) {
  .itp-row { grid-template-columns: 40px 1fr; }
  .itp-dims { display: none; }
  .itp-row-actions { grid-column: 1 / -1; justify-content: flex-end; }
  .itp-options { flex-direction: column; align-items: stretch; }
  .itp-actions .button { flex: 1 1 100%; }
}