/* ===============================
   PNG → WebP TOOL PAGE CSS
================================ */

.hide { display:none !important; }

/* Tool wrap */
.tool-wrap {
  margin-top:18px;
  padding:18px;
  border-radius:14px;
}

/* Drop zone */
.drop-zone {
  padding:28px 18px;
  border-radius:16px;
  border:2px dashed rgba(11,118,255,.2);
  background:linear-gradient(180deg,#fbfdff,#fff);
  text-align:center;
}

.file-count { margin-top:8px; color:#475569; }

/* Progress */
.progress-box {
  margin-top:18px;
  padding:14px;
  border-radius:14px;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

.progress-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-weight:700;
  margin-bottom:8px;
}

.progress-bar {
  width:100%;
  height:14px;
  background:#e5edff;
  border-radius:999px;
  overflow:hidden;
}

#progressFill {
  width:0%;
  height:100%;
  background:linear-gradient(90deg,#0b76ff,#2563eb);
  transition:width .25s ease;
}

/* Spinner */
.spinner {
  width:14px;
  height:14px;
  border-radius:50%;
  border:2px solid rgba(37,99,235,.25);
  border-top-color:#2563eb;
  animation:spin .6s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Results */
.results { margin-top:20px; }
.results-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:16px;
}

/* Result card */
.result-card {
  background:#fff;
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.result-card img {
  width:100%;
  height:160px;
  object-fit:contain;
  border-radius:12px;
  background:#f3f7ff;
}

/* ZIP */
.zip-row {
  display:flex;
  justify-content:center;
  margin:16px 0;
}

/* SEO */
.seo-section { margin-top:42px; }
.seo-grid {
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:28px;
}
@media(max-width:900px){
  .seo-grid { grid-template-columns:1fr; }
}


/* compare box */
.compare {
  margin-top: 12px;
  border: 1px solid #e6eefb;
  border-radius: 14px;
  overflow:hidden;
  background:#fff;
}
.compare-row {
  display:flex;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 14px;
  border-top: 1px solid #eef4ff;
}
.compare-row:first-child { border-top:none; }
.compare-left { color:#475569; }
.compare-right { color:#0f172a; }




.visual-card {
  position:sticky;
  top:92px;
  background:#fff;
  padding:18px;
  border-radius:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}
@media(max-width:900px){
  .visual-card { position:static; }
}