/* Estilos complementares ao Tailwind: componentes reutilizáveis e animações. */
:root {
  --brand: #22a37f;
  --brand-hover: #1c8f6f;
  --brand-soft: rgba(34, 163, 127, 0.18);
  --ring: rgba(34, 163, 127, 0.28);
  --danger: #f87171;
}

/* Fundo decorativo */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(80px);
  opacity: 0.35;
}
.blob-1 { top: -120px; left: -80px; width: 380px; height: 380px; background: #22a37f; }
.blob-2 { bottom: -140px; right: -100px; width: 420px; height: 420px; background: #2563eb; }

/* Campos de formulário */
.label {
  display: block;
  margin-bottom: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #cbd5e1;
}
.input {
  width: 100%;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  color: #f1f5f9;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.input::placeholder { color: #94a3b8; }
.input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); }
.input[aria-invalid="true"] { border-color: var(--danger); }
.input[readonly] { color: #cbd5e1; }
input[type="date"].input { color-scheme: dark; }
input[type="date"].input::-webkit-calendar-picker-indicator { opacity: 0.7; cursor: pointer; }

.field-error { margin-top: 0.375rem; font-size: 0.8125rem; color: #fca5a5; }
.hint { margin-top: 0.375rem; font-size: 0.75rem; color: #94a3b8; }

.banner {
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  line-height: 1.4;
}
.banner-error { background: rgba(248, 113, 113, 0.1); border: 1px solid rgba(248, 113, 113, 0.3); color: #fecaca; }
.banner-warn { background: rgba(251, 191, 36, 0.1); border: 1px solid rgba(251, 191, 36, 0.3); color: #fde68a; }

/* Botões */
.btn-primary,
.btn-secondary {
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  padding: 0.8125rem 1rem;
  font-size: 0.9375rem;
  font-weight: 600;
  transition: background-color 0.15s ease, transform 0.05s ease, opacity 0.15s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.btn-secondary { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #e2e8f0; }
.btn-secondary:hover:not(:disabled) { background: rgba(255, 255, 255, 0.1); }
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled) { transform: scale(0.99); }
.btn-primary:disabled,
.btn-secondary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary:focus-visible,
.btn-secondary:focus-visible,
.btn-link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.btn-link {
  display: block;
  width: 100%;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.875rem;
  color: #94a3b8;
  border-radius: 0.5rem;
}
.btn-link:hover { color: #e2e8f0; text-decoration: underline; }

/* Indicador de etapas */
.step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.5rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #94a3b8;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.step-index {
  display: inline-flex;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
}
.step.is-active { color: #e2e8f0; border-color: rgba(34, 163, 127, 0.5); }
.step.is-active .step-index { background: var(--brand); color: #fff; }
.step.is-done { color: #7cd8b8; }
.step.is-done .step-index { background: var(--brand-soft); color: #7cd8b8; }
@media (max-width: 420px) {
  .step-label { display: none; }
  .step { justify-content: center; }
}

/* Status do pagamento */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 9999px;
  padding: 0.25rem 0.625rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-pill .dot { width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: currentColor; }
.status-pending { background: rgba(251, 191, 36, 0.12); border: 1px solid rgba(251, 191, 36, 0.3); color: #fcd34d; }
.status-pending .dot { animation: pulse 1.4s ease-in-out infinite; }
.status-paid { background: rgba(34, 163, 127, 0.15); border: 1px solid rgba(34, 163, 127, 0.4); color: #7cd8b8; }
.status-expired { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.3); color: #fca5a5; }

/* QR Code */
.qr-frame {
  display: flex;
  width: 16rem;
  height: 16rem;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  background: #fff;
  padding: 0.75rem;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
}
.qr-frame img,
.qr-frame canvas { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
#qr-generated { width: 100%; height: 100%; }
#qr-generated img,
#qr-generated canvas { width: 100% !important; height: 100% !important; }
.qr-frame .qr-fallback-text { color: #475569; }

/* Loading e feedback */
.spinner {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 9999px;
  border: 3px solid rgba(255, 255, 255, 0.12);
  border-top-color: var(--brand);
  animation: spin 0.8s linear infinite;
}
.btn-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 9999px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: #fff;
  animation: spin 0.8s linear infinite;
}
.success-check {
  display: inline-flex;
  width: 5rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  background: var(--brand-soft);
  color: #7cd8b8;
  animation: pop 0.35s cubic-bezier(0.2, 0.8, 0.2, 1.2);
}
.icon-circle {
  display: inline-flex;
  width: 5rem;
  height: 5rem;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .spinner, .btn-spinner { animation-duration: 1.5s; }
  .success-check, .status-pending .dot { animation: none; }
}