/* FlowPOS Website - Custom Styles */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #2563eb;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1d4ed8;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInFromLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInFromRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

.animate-fade-in {
  animation: fadeIn 0.6s ease-out;
}

.animate-slide-left {
  animation: slideInFromLeft 0.6s ease-out;
}

.animate-slide-right {
  animation: slideInFromRight 0.6s ease-out;
}

.animate-pulse-slow {
  animation: pulse 2s ease-in-out infinite;
}

/* Gradient backgrounds */
.gradient-blue {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
}

.gradient-green {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.gradient-purple {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* Card hover effects */
.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button effects */
.btn-primary {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
  transition: all 0.3s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4);
}

/* WhatsApp float button animation */
.whatsapp-float {
  animation: pulse 2s ease-in-out infinite;
}

/* Loading spinner */
.spinner {
  border: 3px solid #f3f3f3;
  border-top: 3px solid #2563eb;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Details/Summary custom styling */
details[open] summary i {
  transform: rotate(180deg);
}

details summary i {
  transition: transform 0.3s ease;
}

/* Code blocks */
code {
  background-color: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Courier New', monospace;
  font-size: 0.9em;
}

/* Hero section text shadow */
.hero-text {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Glass morphism effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive utilities */
@media (max-width: 768px) {
  /* Mobile menu styles */
  .mobile-menu {
    display: block;
  }

  /* Adjust hero text for mobile */
  h1 {
    font-size: 2rem !important;
  }

  /* Stack cards on mobile */
  .grid {
    grid-template-columns: 1fr;
  }
}

/* Print styles */
@media print {
  nav, footer, .whatsapp-float {
    display: none;
  }
}

/* Accessibility improvements */
:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  left: -9999px;
  z-index: 999;
  padding: 1em;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
}

.skip-to-main:focus {
  left: 50%;
  transform: translateX(-50%);
  top: 1em;
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles if needed */
}

/* Badge styles */
.badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  border-radius: 9999px;
}

.badge-blue {
  background-color: #dbeafe;
  color: #1e40af;
}

.badge-green {
  background-color: #d1fae5;
  color: #065f46;
}

.badge-yellow {
  background-color: #fef3c7;
  color: #92400e;
}

.badge-red {
  background-color: #fee2e2;
  color: #991b1b;
}

/* Progress bar */
.progress-bar {
  height: 4px;
  background: linear-gradient(90deg, #2563eb 0%, #1e40af 100%);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: width 0.3s ease;
}

/* Toast notification styles */
.toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: white;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  z-index: 9999;
  animation: slideInFromRight 0.3s ease-out;
}

.toast.success {
  border-left: 4px solid #10b981;
}

.toast.error {
  border-left: 4px solid #ef4444;
}

.toast.info {
  border-left: 4px solid #3b82f6;
}

/* Icon animations */
.icon-rotate {
  transition: transform 0.3s ease;
}

.icon-rotate:hover {
  transform: rotate(15deg);
}

/* Pricing card popular badge */
.popular-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  color: #1f2937;
  padding: 0.5rem 1rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Feature grid animations */
.feature-card {
  transition: all 0.3s ease;
}

.feature-card:hover {
  transform: translateY(-8px);
}

.feature-card:hover .feature-icon {
  transform: scale(1.1);
}

.feature-icon {
  transition: transform 0.3s ease;
}

/* Download button states */
.download-btn {
  position: relative;
  overflow: hidden;
}

.download-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.download-btn:active::before {
  width: 300px;
  height: 300px;
}

/* Section dividers */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #e5e7eb, transparent);
  margin: 3rem 0;
}

/* Timeline styles (for activation steps) */
.timeline-connector {
  position: absolute;
  left: 32px;
  top: 64px;
  bottom: -32px;
  width: 2px;
  background: linear-gradient(180deg, #2563eb, transparent);
}

/* Custom checkbox/radio styles */
.custom-checkbox {
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #d1d5db;
  border-radius: 4px;
  transition: all 0.2s;
}

.custom-checkbox:checked {
  background-color: #2563eb;
  border-color: #2563eb;
}

.custom-checkbox:checked::after {
  content: '✓';
  display: block;
  text-align: center;
  color: white;
  font-size: 14px;
  line-height: 16px;
}

/* Utility classes */
.text-shadow {
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.bg-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.blur-edge {
  mask-image: linear-gradient(to bottom, black 80%, transparent 100%);
}

/* ==========================================================================
   Señalador de descarga
   --------------------------------------------------------------------------
   Al iniciar una descarga, una flecha viva en el borde superior derecho lleva
   la mirada al ícono de descargas del navegador. La página NO puede dibujar
   sobre la barra del navegador, así que se ubica lo más cerca posible: pegada
   arriba a la derecha, apuntando hacia él.

   Se define acá y no con clases de Tailwind por CDN: esas se generan un
   instante después de agregarse por JS, y un elemento que aparece y desaparece
   solo no puede depender de esa demora.
   ========================================================================== */
.download-pointer {
  position: fixed;
  top: 6px;
  right: 14px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none; /* nunca tapa un clic */
  animation: dp-in 0.35s ease-out both, dp-bounce 1.1s ease-in-out 0.35s infinite;
}

/* Ámbar y no azul: el indicador es fijo y puede quedar sobre el encabezado azul o
   sobre el blanco de más abajo. En azul sobre azul directamente desaparecía. El
   ámbar es además el color con el que se lee "mirá acá" sin explicarlo. */
.download-pointer__arrow {
  color: #0f172a;
  /* Misma sombra que la pastilla, para que se lean como una sola pieza. Ya no hace
     falta contorno: el gris oscuro contrasta contra el azul (3.45) y contra el
     blanco (17.08), que son los dos fondos posibles. */
  filter: drop-shadow(0 4px 10px rgba(15, 23, 42, 0.4));
}

.download-pointer__label {
  background: #0f172a;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 13px;
  border-radius: 9999px;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.18);
}

.download-pointer--out {
  animation: dp-out 0.4s ease-in both;
}

@keyframes dp-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes dp-out {
  to { opacity: 0; transform: translateY(-8px); }
}

/* El rebote sube y baja: acompaña la mirada hacia el ícono, arriba. */
@keyframes dp-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* Quien pidió menos animación ve la flecha quieta, no la pierde. */
@media (prefers-reduced-motion: reduce) {
  .download-pointer {
    animation: dp-in 0.01s both;
  }
}

/* En pantallas chicas no aplica: ahí la descarga no se ofrece. */
@media (max-width: 640px) {
  .download-pointer { display: none; }
}