/* Estilos personalizados para el sitio de recaudación de donaciones */

/* Importamos fuentes desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800&display=swap');

body {
  font-family: 'Inter', sans-serif;
  background: radial-gradient(circle at 10% 20%, rgba(253, 244, 245, 1) 0%, rgba(247, 249, 252, 1) 100%);
  min-height: 100vh;
}

h1, h2, h3, .font-display {
  font-family: 'Outfit', sans-serif;
}

/* Efecto de Vidrio Esmerilado (Glassmorphism) */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Animaciones personalizadas */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pulse-soft {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.9;
  }
}

.animate-pulse-soft {
  animation: pulse-soft 3s infinite ease-in-out;
}

/* Estilo para los inputs validados */
.form-input {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.form-input:focus {
  border-color: #f97316; /* Tailwind orange-500 */
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* Ocultar input number spin buttons */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}

/* Efecto para los botones de monto sugerido */
.suggested-amount-btn {
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Estilos de PayPal Button wrapper */
#paypal-button-container {
  min-height: 50px;
  position: relative;
  z-index: 10;
}

/* Contenedor del Modal de agradecimiento */
.thank-you-card {
  box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.1);
  border-top: 6px solid #10b981; /* Tailwind emerald-500 */
}