/* ============================================================
   HEIC-zu-JPG Konverter
   ============================================================ */

.heic-card {
  max-width: 900px;
  margin: 40px auto var(--space-8);
  padding: var(--space-8);
  background: var(--bg-primary);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

@media (max-width: 640px) {
  .heic-card { margin-top: 30px; padding: var(--space-5); }
}

/* ---- Dropzone ---- */
.heic-dropzone {
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-2xl);
  padding: var(--space-10) var(--space-6);
  text-align: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}

.heic-dropzone:hover, .heic-dropzone.drag-over {
  border-color: var(--color-primary);
  border-style: solid;
  background: var(--color-primary-light, rgba(37, 99, 235, 0.05));
  transform: scale(1.005);
}

.heic-dropzone-title {
  font-size: 18px;
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.heic-dropzone-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

.heic-privacy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: 12px;
  color: var(--text-secondary);
  margin: var(--space-3) 0 0;
}
.heic-privacy svg { color: var(--color-success, #22c55e); }

/* ---- Optionen ---- */
.heic-options {
  display: grid;
  grid-template-columns: repeat(2, 1fr) auto auto;
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 760px) {
  .heic-options { grid-template-columns: 1fr; }
}

.heic-row { display: flex; flex-direction: column; gap: var(--space-2); }

.heic-label {
  font-size: 13px;
  font-weight: var(--font-medium);
  color: var(--text-secondary);
}

.heic-input {
  padding: 10px 12px;
  border: 1.5px solid var(--border-color);
  border-radius: var(--radius-lg);
  font-size: 14px;
  background: var(--bg-primary);
  color: var(--text-primary);
}

.heic-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light, rgba(37, 99, 235, 0.15));
}

.heic-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  cursor: pointer;
}

.heic-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  cursor: pointer;
}

.heic-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-primary);
  border-radius: 50%;
  border: 3px solid var(--bg-primary);
  cursor: pointer;
}

/* ---- Ergebnisliste ---- */
.heic-results { display: flex; flex-direction: column; gap: var(--space-2); }

.heic-item {
  display: grid;
  grid-template-columns: 64px 1fr auto 32px;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  transition: border-color var(--transition-fast);
}

.heic-item:hover { border-color: var(--color-primary); }

.heic-item-working { border-color: var(--color-primary); animation: heic-pulse 1.4s infinite ease-in-out; }
.heic-item-error   { border-color: #ef4444; background: #fef2f2; }
.heic-item-done    { border-color: #22c55e; }

@keyframes heic-pulse {
  0%, 100% { background: var(--bg-secondary); }
  50%      { background: var(--color-primary-light, rgba(37, 99, 235, 0.08)); }
}

.heic-thumb {
  width: 64px;
  height: 64px;
  background: var(--bg-primary);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--text-tertiary, #94a3b8);
  flex-shrink: 0;
}

.heic-thumb img { width: 100%; height: 100%; object-fit: cover; }

.heic-item-info { min-width: 0; }

.heic-item-name {
  font-weight: var(--font-medium);
  color: var(--text-primary);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.heic-item-status {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.heic-item-download {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.heic-item-remove {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-full);
}

.heic-item-remove:hover { background: #fef2f2; color: #ef4444; }

@media (max-width: 640px) {
  .heic-item { grid-template-columns: 56px 1fr 28px; }
  .heic-item-action { grid-column: 1 / -1; }
  .heic-thumb { width: 56px; height: 56px; }
}

/* ---- SEO Content ---- */
.heic-content {
  padding: var(--space-10) 0;
  background: var(--bg-secondary);
}

.heic-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  max-width: 1100px;
  margin: var(--space-6) auto 0;
}

.heic-content-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.heic-content-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.heic-content-card h3 { font-size: 16px; margin: 0 0 var(--space-3); color: var(--text-primary); }
.heic-content-card p { margin: 0; color: var(--text-secondary); line-height: var(--leading-relaxed); font-size: 13px; }

/* ===== Animated Spinner waehrend Konvertierung ===== */
.heic-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(220, 38, 38, 0.18);
  border-top-color: var(--color-primary, #DC2626);
  border-radius: 50%;
  animation: heic-spin 0.7s linear infinite;
}

@keyframes heic-spin {
  to { transform: rotate(360deg); }
}

/* Working item: subtler Hintergrund + leichtes Glow */
.heic-item-working {
  background: linear-gradient(90deg, rgba(220,38,38,0.04) 0%, rgba(220,38,38,0.08) 50%, rgba(220,38,38,0.04) 100%);
  background-size: 200% 100%;
  animation: heic-pulse 1.5s ease-in-out infinite;
}

@keyframes heic-pulse {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 0%; }
}

/* ===== compress-image: Gesamt-Ersparnis-Box (reused heic-* layout) ===== */
.heic-summary {
  margin: 14px 0 4px;
  padding: 12px 16px;
  border-radius: 10px;
  background: #F0F9FF;
  border: 1px solid #BAE6FD;
  font-size: 15px;
  color: #0C4A6E;
  text-align: center;
}
.heic-summary .imgc-saved {
  font-weight: 700;
  color: #15803D;
}