/**
 * Upload Layout — shared "select / drop a file" screen
 * ─────────────────────────────────────────────────────────────────────
 * Used by every PDF tool. Scoped by .upload-layout / .upload-layout__*
 * so it can be dropped into any tool page without per-tool CSS copies.
 *
 * Layout and interaction match the Compress Image shared upload component
 * (iLoveIMG-style drop page). Brand colours use PDFSathi tokens.
 */

.upload-layout,
.upload-layout__empty-state {
  font-family: var(--font-base, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
}
.upload-layout *,
.upload-layout *::before,
.upload-layout *::after { box-sizing: border-box; }
.upload-layout button,
.upload-layout input { font-family: inherit; }

/* ── Noscript fallback ── */
.upload-layout__empty-state {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
  color: var(--color-text, #343a40);
}
.upload-layout__empty-state .hero-icon {
  width: 72px;
  height: 72px;
  background: var(--color-primary, #e5322d);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(229, 50, 45, 0.25);
}
.upload-layout__empty-state h1 {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 900;
  margin-bottom: 10px;
}
.upload-layout__empty-state p {
  font-size: 1rem;
  color: var(--color-text-muted, #6c757d);
}

/* ── Breadcrumb ── */
.upload-layout__breadcrumb {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  font-size: 0.82rem;
  color: var(--color-text-muted, #6c757d);
}
.upload-layout__breadcrumb a {
  color: var(--color-primary, #e5322d);
  font-weight: 700;
  text-decoration: none;
}
.upload-layout__breadcrumb a:hover { text-decoration: underline; }

/* ══════════════════════════════════════
   DROP PAGE — iLoveIMG-style layout
══════════════════════════════════════ */
.upload-layout {
  min-height: calc(100vh - var(--header-height, 68px));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 20px 24px 50px;
  background: var(--color-bg, #f3f4f8);
  text-align: center;
  color: var(--color-text, #343a40);
}

.upload-layout h1 {
  font-size: clamp(2.1rem, 5vw, 3.25rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-text, #2d3142);
  margin: 0 0 18px;
  line-height: 1.15;
}

/* Description with format links */
.upload-layout .drop-desc {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--color-text-muted, #4a4f63);
  line-height: 1.55;
  max-width: 640px;
  margin: 0 auto;
  font-weight: 500;
}
.upload-layout .drop-desc a {
  color: var(--color-primary, #e5322d);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
}
.upload-layout .drop-desc a:hover {
  color: var(--color-primary-dark, #c22622);
}
.upload-layout .drop-desc-sub {
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  color: var(--color-text-muted, #4a4f63);
  margin: 6px auto 42px;
  max-width: 640px;
  line-height: 1.5;
  font-weight: 500;
}

/* Drop zone = transparent hit area only (no box, no border) */
.upload-layout .drop-zone {
  position: relative;
  width: auto;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  border: none;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.upload-layout .drop-zone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 5;
}

/* CTA row + main button — same proportions as Compress Image */
.upload-layout .cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-layout .btn-select {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 340px;
  height: 68px;
  padding: 0 56px;
  background: var(--color-primary, #e5322d);
  color: #fff;
  border-radius: 16px;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  border: none;
  margin: 0;
  box-shadow: 0 10px 28px rgba(229, 50, 45, 0.35);
  transition: background 0.15s, box-shadow 0.15s, transform 0.15s;
}
.upload-layout .drop-zone:hover .btn-select,
.upload-layout .drop-zone.dragover .btn-select {
  background: var(--color-primary-dark, #c22622);
  box-shadow: 0 12px 32px rgba(194, 38, 34, 0.4);
  transform: translateY(-1px);
}

/* "or drop PDF here" */
.upload-layout .drop-hint {
  margin: 18px 0 0;
  font-size: 0.95rem;
  color: var(--color-text-muted, #6b7085);
  font-weight: 500;
  pointer-events: none;
}

/* Dark theme support */
:root[data-theme="dark"] .upload-layout {
  background: var(--color-bg, #14161c);
  color: var(--color-text, #edeef2);
}
:root[data-theme="dark"] .upload-layout h1 {
  color: var(--color-text, #edeef2);
}
:root[data-theme="dark"] .upload-layout .drop-desc,
:root[data-theme="dark"] .upload-layout .drop-desc-sub,
:root[data-theme="dark"] .upload-layout .drop-hint,
:root[data-theme="dark"] .upload-layout__breadcrumb {
  color: var(--color-text-muted, #9aa0ac);
}

@media (max-width: 768px) {
  .upload-layout {
    min-height: calc(100vh - var(--header-height, 68px));
    justify-content: flex-start;
    padding: 10px 16px 40px;
  }
  .upload-layout .btn-select {
    width: 92vw;
    max-width: 380px;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  .upload-layout h1 { font-size: 1.85rem; }
  .upload-layout .btn-select {
    width: 100%;
    min-width: 0;
    border-radius: 14px;
    height: 58px;
    font-size: 1.15rem;
  }
  .upload-layout__breadcrumb { margin-bottom: 4px; }
}