/**
 * Image to WEBP – Modern SaaS Blue theme
 * All page styles (moved from index.html)
 */

/* ----- Page & layout ----- */
.page-bg { background-color: #F8FAFC; }
.text-heading { color: #0F172A; }
.text-body { color: #475569; }
.text-muted { color: #94A3B8; }

/* ----- Upload hero ----- */
.upload-hero {
  border-color: #E5E7EB;
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08);
}
.upload-hero:hover {
  border-color: #2563EB !important;
  background-color: #DBEAFE !important;
  box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.08), 0 2px 6px -2px rgba(0, 0, 0, 0.06) !important;
}
.upload-hero:focus-within {
  border-color: #2563EB !important;
  outline: none;
  box-shadow: 0 0 0 2px #F8FAFC, 0 0 0 4px #2563EB !important;
}
.upload-hero.drag-over {
  border-color: #2563EB !important;
  background-color: #DBEAFE !important;
}
.upload-hero .upload-icon svg { color: #2563EB; }
.text-primary-accent { color: #2563EB; }

/* ----- Error alert ----- */
.error-alert {
  background-color: #FEF2F2;
  border: 1px solid #FECACA;
  color: #991B1B;
}

/* ----- Download All button ----- */
#download-all-btn { background-color: #2563EB; }
#download-all-btn:hover:not(:disabled) { background-color: #1D4ED8 !important; }
#download-all-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px #F8FAFC, 0 0 0 4px #2563EB;
}

/* ----- File cards: progress bar ----- */
.progress-bar {
  height: 4px;
  border-radius: 2px;
  background: #E5E7EB;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: #2563EB;
  transition: width 0.25s ease;
}

/* ----- Cards grid: Download WEBP buttons (same primary blue as Download All) ----- */
#cards-grid button:not([disabled]) {
  background-color: #2563EB !important;
  color: #fff !important;
}
#cards-grid button:not([disabled]):hover {
  background-color: #1D4ED8 !important;
}

/* ----- Footer ----- */
.footer-bar {
  border-color: #E5E7EB;
  background-color: #F1F5F9;
}
.footer-bar a { color: #475569; }
.footer-bar a:hover { color: #2563EB !important; }
.footer-bar p { color: #94A3B8; }