/* =====================================================
   Audio Converter Tools – WordPress Plugin Stylesheet
   ===================================================== */

/* ── Reset / Base ──────────────────────────────────── */
.act-wrapper *,
.act-wrapper *::before,
.act-wrapper *::after {
  box-sizing: border-box;
}

.act-wrapper {
  --act-primary:   #2A56C6;
  --act-primary-d: pr;
  --act-success:   #22C55E;
  --act-success-d: #16A34A;
  --act-danger:    #EF4444;
  --act-gray-50:   #F9FAFB;
  --act-gray-100:  #F3F4F6;
  --act-gray-200:  #E5E7EB;
  --act-gray-400:  #9CA3AF;
  --act-gray-600:  #4B5563;
  --act-gray-800:  #1F2937;
  --act-radius:    14px;
  --act-shadow:    0 4px 24px rgba(0,0,0,.09);

  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, sans-serif;
  font-size: 15px;
  color: var(--act-gray-800);
  max-width: 680px;
  margin: 32px auto;
  background: #fff;
  border-radius: var(--act-radius);
  box-shadow: var(--act-shadow);
  border: 1px solid var(--act-gray-200);
  overflow: hidden;
}

/* ── Page header ─────────────────────────────────── */
.act-page-header {
  text-align: center;
  padding: 0 24px;
  margin-bottom: 4px;
}
.act-page-title {
  font-size: clamp(1.25rem, 3vw, 1.75rem);
  font-weight: 700;
  color: var(--act-gray-800);
  margin: 0 0 6px;
  line-height: 1.3;
}
.act-page-desc {
  font-size: .9rem;
  color: var(--act-gray-600);
  margin: 0 0 20px;
  line-height: 1.6;
}

/* ── Top gradient bar ────────────────────────────── */
.act-wrapper::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(90deg, #6366F1, #3B82F6, #06B6D4);
  border-radius: var(--act-radius) var(--act-radius) 0 0;
}

/* ── Steps ───────────────────────────────────────── */
.act-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 20px 24px 0;
}
.act-step {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.act-step-num {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--act-gray-200);
  color: var(--act-gray-600);
  font-size: .8rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s, color .3s;
}
.act-step-label {
  font-size: .8rem;
  color: var(--act-gray-600);
  font-weight: 500;
  transition: color .3s;
}
.act-step-line {
  flex: 1;
  max-width: 60px;
  height: 2px;
  background: var(--act-gray-200);
  margin: 0 8px;
  transition: background .3s;
}
.act-step.act-step-active .act-step-num {
  background: var(--act-primary);
  color: #fff;
}
.act-step.act-step-active .act-step-label { color: var(--act-primary); }
.act-step.act-step-done .act-step-num {
  background: var(--act-success);
  color: #fff;
}
.act-step.act-step-done .act-step-label { color: var(--act-success); }
.act-step-line.act-line-done { background: var(--act-success); }

/* ── Panels ──────────────────────────────────────── */
.act-panel { display: none; padding: 24px; }
.act-panel-visible { display: block; }

/* ── Upload / Dropzone ───────────────────────────── */
.act-dropzone {
  border: 2px dashed var(--act-gray-200);
  border-radius: 12px;
  background: var(--act-gray-50);
  padding: 40px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .25s, background .25s;
  outline: none;
}
.act-dropzone:hover,
.act-dropzone:focus,
.act-dropzone.act-drag-over {
  border-color: var(--act-primary);
  background: #EFF6FF;
}
.act-drop-icon {
  width: 60px; height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  border: 2px solid var(--act-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--act-primary);
}
.act-drop-icon svg { width: 28px; height: 28px; }
.act-drop-title {
  font-size: 1.05rem; font-weight: 700;
  color: var(--act-gray-800); margin: 0 0 4px;
}
.act-drop-sub {
  font-size: .85rem; color: var(--act-gray-600); margin: 0 0 8px;
}
.act-drop-formats {
  font-size: .75rem; color: var(--act-gray-400); margin: 0 0 20px;
}

/* ── Buttons ─────────────────────────────────────── */
.act-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 24px;
  border-radius: 10px;
  font-size: .9rem; font-weight: 600;
  border: none; cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  text-decoration: none;
}
.act-btn:active { transform: scale(.97); }
.act-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

.act-btn-primary {
  background: var(--act-primary);
  color: #fff;
  box-shadow: 0 2px 12px rgba(59,130,246,.35);
}
.act-btn-primary:hover { background: var(--act-primary-d); box-shadow: 0 4px 16px rgba(59,130,246,.4); }

.act-btn-convert {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 14px;
  background: var(--act-primary);
  color: #fff;
  font-size: 1rem; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer;
  box-shadow: 0 4px 16px rgba(99,102,241,.35);
  transition: opacity .2s, transform .1s;
  margin-top: 16px;
}
.act-btn-convert:hover { opacity: .92; }
.act-btn-convert svg { width: 20px; height: 20px; }

.act-btn-download {
  background: var(--act-primary);
  color: #fff;
  box-shadow: 0 2px 12px rgba(34,197,94,.35);
  padding: 14px 28px;
}
.act-btn-download:hover { background: var(--act-primary); }

.act-btn-secondary {
  background: var(--act-gray-100);
  color: var(--act-gray-800);
  border: 1px solid var(--act-gray-200);
  padding: 14px 24px;
}
.act-btn-secondary:hover { background: var(--act-gray-200); }

.act-choose-btn { margin: 0 auto; }

/* ── File info bar ───────────────────────────────── */
.act-file-info {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--act-gray-50);
  border: 1px solid var(--act-gray-200);
  border-radius: 10px;
  margin-bottom: 20px;
}
.act-file-icon-wrap {
  width: 40px; height: 40px;
  background: #EFF6FF; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--act-primary); flex-shrink: 0;
}
.act-file-icon-wrap svg { width: 22px; height: 22px; }
.act-file-meta { flex: 1; overflow: hidden; }
.act-file-name { display: block; font-weight: 600; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.act-file-size { display: block; font-size: .8rem; color: var(--act-gray-400); }

.act-remove-btn {
  width: 30px; height: 30px;
  border-radius: 50%; border: none;
  background: #FEE2E2; color: var(--act-danger);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; flex-shrink: 0;
  transition: background .2s;
}
.act-remove-btn:hover { background: #FECACA; }
.act-remove-btn svg { width: 16px; height: 16px; }

/* ── Format select row ───────────────────────────── */
.act-format-row {
  display: flex; align-items: flex-end; gap: 12px;
}
.act-format-group {
  flex: 1; display: flex; flex-direction: column; gap: 4px;
}
.act-format-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  color: var(--act-gray-600); text-transform: uppercase;
}
.act-select {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--act-gray-200);
  border-radius: 8px;
  background: #fff;
  font-size: .9rem;
  color: var(--act-gray-800);
  appearance: auto;
  cursor: pointer;
  transition: border-color .2s;
}
.act-select:focus { outline: none; border-color: var(--act-primary); box-shadow: 0 0 0 3px rgba(59,130,246,.15); }

.act-arrow-icon {
  width: 36px; height: 36px;
  background: var(--act-gray-100);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--act-gray-600);
  flex-shrink: 0; margin-bottom: 2px;
}
.act-arrow-icon svg { width: 20px; height: 20px; }

/* ── Converting panel ────────────────────────────── */
.act-panel-converting { text-align: center; }

.act-converting-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin: 16px 0 24px;
}

/* File cards */
.act-file-card {
  display: flex; flex-direction: column; align-items: center;
}
.act-file-card-icon {
  position: relative;
  width: 72px;
}
.act-file-card-icon > svg {
  width: 72px; height: auto;
  display: block;
}
.act-card-format-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) translateY(4px);
  font-size: .7rem; font-weight: 800; letter-spacing: .03em;
  color: inherit;
  pointer-events: none;
  white-space: nowrap;
}
.act-file-card-input .act-card-format-label { color: #3B82F6; }
.act-file-card-output .act-card-format-label { color: #22C55E; }

/* Conversion animation */
.act-conv-anim {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.act-conv-wave {
  display: flex; align-items: flex-end; gap: 3px; height: 28px;
}
.act-conv-wave span {
  display: inline-block;
  width: 4px; border-radius: 2px;
  background: linear-gradient(to top, #6366F1, #3B82F6);
  animation: act-wave-bounce 1.2s ease-in-out infinite;
}
.act-conv-wave span:nth-child(1){ height:10px; animation-delay:0s; }
.act-conv-wave span:nth-child(2){ height:20px; animation-delay:.15s; }
.act-conv-wave span:nth-child(3){ height:28px; animation-delay:.3s; }
.act-conv-wave span:nth-child(4){ height:20px; animation-delay:.45s; }
.act-conv-wave span:nth-child(5){ height:10px; animation-delay:.6s; }

@keyframes act-wave-bounce {
  0%,100%{ transform: scaleY(1); }
  50%    { transform: scaleY(.4); }
}
.act-conv-arrows svg { width: 40px; }

/* Circular progress */
.act-progress-wrap {
  position: relative;
  width: 120px; height: 120px;
  margin: 0 auto 12px;
}
.act-progress-ring { width: 120px; height: 120px; transform: rotate(-90deg); }
.act-ring-bg   { fill: none; stroke: var(--act-gray-200); }
.act-ring-fill { fill: none; stroke: url(#act-grad); transition: stroke-dashoffset .4s ease; stroke-linecap: round; }

.act-progress-center {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.act-progress-pct {
  font-size: 1.35rem; font-weight: 800;
  background: linear-gradient(135deg, #3B82F6, #6366F1);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.act-progress-lbl { font-size: .7rem; color: var(--act-gray-400); font-weight: 500; }
.act-ffmpeg-status { font-size: .8rem; color: var(--act-gray-400); margin: 0; }

/* ── Done panel ──────────────────────────────────── */
.act-panel-done { text-align: center; }
.act-done-icon { margin: 0 auto 12px; width: 64px; height: 64px; }
.act-done-icon svg { width: 64px; height: 64px; }
.act-done-title { font-size: 1.4rem; font-weight: 800; color: var(--act-success); margin: 0 0 6px; }
.act-done-sub { color: var(--act-gray-600); font-size: .9rem; margin: 0 0 24px; }
.act-done-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }

/* ── Error panel ─────────────────────────────────── */
.act-panel-error { text-align: center; }
.act-error-icon { margin: 0 auto 12px; width: 64px; height: 64px; }
.act-error-icon svg { width: 64px; height: 64px; }
.act-error-title { font-size: 1.2rem; font-weight: 700; color: var(--act-danger); margin: 0 0 8px; }
.act-error-msg { color: var(--act-gray-600); font-size: .9rem; margin: 0 0 20px; }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 520px) {
  .act-wrapper { margin: 16px; border-radius: 10px; }
  .act-panel { padding: 16px; }
  .act-format-row { flex-direction: column; gap: 8px; }
  .act-arrow-icon { transform: rotate(90deg); align-self: center; }
  .act-converting-visual { flex-direction: column; gap: 8px; }
  .act-conv-arrows svg { transform: rotate(90deg); }
  .act-done-actions { flex-direction: column; width: 100%; }
  .act-btn-download, .act-btn-secondary { width: 100%; justify-content: center; }
  .act-steps { padding: 16px 12px 0; }
  .act-step-label { display: none; }
}