/* HealthyPaws.in — Global Styles */

/* Scrollbar hiding */
.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom QR Pattern */
.qr-pixel { transition: background-color 0.2s; }

/* Smooth transitions */
* { transition-property: color, background-color, border-color, opacity, transform, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }

/* Bottom nav safe area */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .pb-nav { padding-bottom: calc(5rem + env(safe-area-inset-bottom)); }
}

/* Map container */
#map { z-index: 10; }
.custom-marker { background: transparent; border: none; }
.leaflet-popup-content-wrapper { border-radius: 12px !important; box-shadow: 0 4px 24px rgba(0,0,0,0.12) !important; border: 1px solid #f3f4f6; }
.leaflet-popup-tip { background: white !important; }

/* PWA install button */
#pwa-install { display: none; }

/* Toast animations */
@keyframes slideDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes slideUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.toast-animate { animation: slideDown 0.3s ease forwards; }

/* Card hover effects */
.vet-card:hover { transform: translateY(-1px); }

/* Pet ID Card Print */
@media print {
  header, nav, .fixed, .sticky, footer, button, a:not(.print-link) { display: none !important; }
  #pet-id-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; margin: 0 auto; }
  body { background: white; }
}

/* Pulse animation for live indicators */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Mobile-first responsive helpers */
@media (max-width: 768px) {
  .max-w-4xl { max-width: 100%; }
}

/* Gradient text */
.gradient-text {
  background: linear-gradient(135deg, #16a34a, #0d9488);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Loading skeleton */
@keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: calc(200px + 100%) 0; } }
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400px 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 8px;
}

/* Input focus ring */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15);
}

/* Hero section gradient */
.hero-gradient {
  background: linear-gradient(135deg, #f0fdf4 0%, #ccfbf1 50%, #ecfdf5 100%);
}

/* Status dot */
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.status-dot.online { background: #22c55e; }
.status-dot.offline { background: #d1d5db; }
.status-dot.busy { background: #f59e0b; }

/* Feature card hover */
.feature-card { transition: transform 0.2s, box-shadow 0.2s; }
.feature-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.08); }

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

/* Insurance coverage bar */
.coverage-bar { background: linear-gradient(90deg, #22c55e, #16a34a); }

/* Map pin bounce */
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.pin-bounce { animation: bounce 1s ease infinite; }