/* ============================================================
   Image to PDF — export.css
   Step 3: build progress, summary badge, download button states
   ============================================================ */


/* ══════════════════════════════════════════
   1. PROGRESS BAR (shown while jsPDF builds pages)
   ══════════════════════════════════════════ */
.ip-img2pdf-progress {
  margin: 4px 0 20px;
}

.ip-img2pdf-progress[hidden] {
  display: none;
}

.ip-img2pdf-progress__bar {
  width: 100%;
  height: 8px;
  border-radius: 9999px;
  background: var(--ip-line);
  overflow: hidden;
}

.ip-img2pdf-progress__fill {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  background: var(--ip-brand);
  transition: width 0.2s ease;
}

.ip-img2pdf-progress__label {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ip-ink-soft);
}


/* ══════════════════════════════════════════
   2. DOWNLOAD BUTTON + DONE TICK
   The tick is a distinct circular badge that pops in *beside* the
   Download button once a build succeeds — not on the PDF card, so
   the card always just reads as "this is your PDF" and the tick is
   what actually says "done".
   ══════════════════════════════════════════ */
.ip-img2pdf-downloadgroup {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
}

.ip-img2pdf-downloadgroup .ip-img2pdf-btn {
  flex: 1;
}

.ip-img2pdf-donetick {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 9999px;
  background: var(--ip-success);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(30,142,90,0.35);
  transform: scale(0);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease;
}

.ip-img2pdf-donetick svg {
  width: 19px;
  height: 19px;
}

.ip-img2pdf-donetick.is-visible {
  transform: scale(1);
  opacity: 1;
}

.ip-img2pdf-btn--primary.is-busy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  pointer-events: none;
}

.ip-img2pdf-btn--primary.is-busy::before {
  content: '';
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid rgba(255,255,255,0.35);
  border-top-color: #fff;
  animation: ipSpin 0.7s linear infinite;
  flex-shrink: 0;
}

@keyframes ipSpin {
  to { transform: rotate(360deg); }
}


/* ══════════════════════════════════════════
   3. "START OVER" LINK — quiet exit back to Step 1
   ══════════════════════════════════════════ */
.ip-img2pdf-startover {
  display: block;
  margin: 18px auto 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ip-ink-soft);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ip-img2pdf-startover:hover {
  color: var(--ip-brand-dark);
}