/* theme.css - Only the bits Tailwind CDN can't provide (icons + status animations). 
   Scoped to rp-* so it won't break the rest of the app. */

/* Upload icon (Lucide Upload) */
.rp-upload-icon{
  width:28px;height:28px;display:block;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="%232563eb" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="17 8 12 3 7 8"/><line x1="12" x2="12" y1="3" y2="15"/></svg>');
}

/* Idle gray circle icon (Lucide Circle) */
.rp-idle-circle{
  width:32px;height:32px;display:block;border-radius:9999px;
  box-shadow: inset 0 0 0 3px rgba(156,163,175,.55);
}

/* Success check icon */
.rp-check{
  width:32px;height:32px;display:block;
  background:no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="%23059669" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* Small checklist bullet with check */
.rp-check-mini{
  width:16px;height:16px;border-radius:9999px;display:inline-block;
  background:#d1fae5; position:relative; flex:0 0 auto;
}
.rp-check-mini::after{
  content:""; position:absolute; inset:0;
  background:no-repeat center/12px 12px url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%23059669" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>');
}

/* ===== Processing animation (ports Motion/Framer behaviour from Figma ZIP) ===== */
.rp-processing-anim{ position:relative; width:96px; height:96px; }

/* conic ring */
.rp-ring-outer{
  background: conic-gradient(from 0deg, transparent 0%, #635BFF 50%, transparent 100%);
  opacity: .2;
  animation: rp-rotate-360 2s linear infinite;
}

/* pulsing glow */
.rp-ring-glow{
  background: radial-gradient(circle, rgba(99,91,255,0.15) 0%, transparent 70%);
  animation: rp-glow 2s ease-in-out infinite;
}

/* inner dashed ring */
.rp-ring-circle{
  stroke:#635BFF;
  stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:140 40;
  transform-origin:32px 32px;
  animation: rp-rotate-360 1.5s linear infinite;
}

/* orbiting dots */
.rp-orbit{
  position:absolute; left:50%; top:50%;
  width:8px; height:8px; border-radius:9999px;
  background:#635BFF;
  margin-left:-4px; margin-top:-4px;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  animation: rp-orbit 2s linear infinite;
}
.rp-orbit-1{ animation-delay:0s; }
.rp-orbit-2{ animation-delay:.15s; }
.rp-orbit-3{ animation-delay:.30s; }

/* dots after "Duke përpunuar" */
.rp-dots::after{
  content:"…";
  display:inline-block;
  width:1.2em;
  text-align:left;
  animation: rp-dots 1.1s steps(3,end) infinite;
}

/* progress bar */
.rp-progress-bar{
  background: linear-gradient(90deg, #635BFF 0%, #5449E6 100%);
  animation: rp-progress 3s ease-in-out infinite;
  width:0%;
}

/* shimmer overlay */
.rp-shimmer{
  background: linear-gradient(90deg, transparent 0%, rgba(99, 91, 255, 0.1) 50%, transparent 100%);
  animation: rp-shimmer 2s ease-in-out infinite;
}

/* done success ring */
.rp-success-ring{
  border:2px solid rgba(52,211,153,.65); /* emerald-400-ish */
  animation: rp-success-ring .8s ease-out forwards;
  opacity:0;
}

/* checklist stagger */
.rp-done-item{
  opacity:0;
  transform: translateX(-10px);
  animation: rp-done-in .35s ease-out forwards;
}
.rp-done-item:nth-child(1){ animation-delay:.30s; }
.rp-done-item:nth-child(2){ animation-delay:.40s; }
.rp-done-item:nth-child(3){ animation-delay:.50s; }

@keyframes rp-rotate-360 { to { transform: rotate(360deg); } }
@keyframes rp-glow{
  0%{ transform:scale(1); opacity:.5; }
  50%{ transform:scale(1.2); opacity:.8; }
  100%{ transform:scale(1); opacity:.5; }
}
@keyframes rp-orbit{
  0%{ transform: translate(40px, 0); }
  100%{ transform: translate(40px, 0) rotate(360deg); }
}
/* orbit uses rotate around center trick */
.rp-orbit{ transform-origin: -40px 0px; }
@keyframes rp-dots{
  0%{ content:""; }
  33%{ content:"."; }
  66%{ content:".."; }
  100%{ content:"..."; }
}
/* workaround: animate opacity via steps (content can't animate reliably across browsers). Use mask via background dots */
.rp-dots{
  position:relative;
  display:inline-block;
  width:16px;
  height:1em;
  vertical-align:baseline;
}
.rp-dots::after{
  content:"";
  position:absolute; left:0; top:0;
  width:16px; height:1em;
  background:
    radial-gradient(circle, #635BFF 55%, transparent 56%) 0 60%/4px 4px no-repeat,
    radial-gradient(circle, #635BFF 55%, transparent 56%) 6px 60%/4px 4px no-repeat,
    radial-gradient(circle, #635BFF 55%, transparent 56%) 12px 60%/4px 4px no-repeat;
  opacity:.9;
  animation: rp-dotfade 1.1s infinite steps(3,end);
}
@keyframes rp-dotfade{
  0%{ clip-path: inset(0 12px 0 0); }
  33%{ clip-path: inset(0 6px 0 0); }
  66%{ clip-path: inset(0 0 0 0); }
  100%{ clip-path: inset(0 0 0 0); }
}

@keyframes rp-progress{
  0%{ width:0%; }
  50%{ width:100%; }
  100%{ width:0%; }
}
@keyframes rp-shimmer{
  0%{ transform: translateX(-100%); }
  100%{ transform: translateX(200%); }
}
@keyframes rp-success-ring{
  0%{ transform:scale(1); opacity:1; }
  100%{ transform:scale(1.5); opacity:0; }
}
@keyframes rp-done-in{
  to{ opacity:1; transform:translateX(0); }
}

/* Only show success ring animation when done-state is visible */
.rp-done-state:not(.hidden) .rp-success-ring{ opacity:1; }

#billingSection.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}