/* ══════════════════════════════════════════════════════════════
   IMGSWIFT v7 — ZIP-DOWNLOAD.CSS
   Styles for the ZIP / Download-Files toggle button pair.
   Uses existing CSS variables from styles.css — zero overrides.
══════════════════════════════════════════════════════════════ */

/* ── Toggle wrapper ── */
.zip-toggle-wrap {
  display: inline-flex;
  gap: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--border2);
  background: var(--card);
  margin-top: 10px;
  flex-shrink: 0;
}

/* Convert tab: centre the toggle below the status row */
#zip-toggle-convert {
  display: flex;
  justify-content: center;
  margin: 8px auto 0;
  width: 100%;
}

/* ── Individual toggle buttons ── */
.zip-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  border: none;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.18s, color 0.18s;
  white-space: nowrap;
  /* Divider between the two buttons */
  border-right: 1px solid var(--border2);
}

.zip-toggle-btn:last-child {
  border-right: none;
}

.zip-toggle-btn:hover {
  background: var(--border);
  color: var(--text);
}

.zip-toggle-btn.active {
  background: var(--accent, #6c63ff);
  color: #fff;
}

.zip-toggle-btn.active:hover {
  background: var(--accent-hover, #5a52d5);
}

/* Emoji in the button stays full-size */
.zip-toggle-btn > span {
  font-weight: 600;
}

/* ── Disabled state while ZIP is building ── */
.zip-toggle-btn:disabled {
  opacity: 0.65;
  cursor: wait;
}

/* ── compress-header layout fix ──
   The existing .compress-header uses flex; we just add the toggle
   to the right edge automatically via margin-left:auto on the toggle.
   No structural changes needed.                                  */

/* ── Responsive: stack on very narrow screens ── */
@media (max-width: 380px) {
  .zip-toggle-wrap {
    flex-direction: column;
    border-radius: 10px;
  }
  .zip-toggle-btn {
    border-right: none;
    border-bottom: 1px solid var(--border2);
    justify-content: center;
  }
  .zip-toggle-btn:last-child {
    border-bottom: none;
  }
}