@import "tailwindcss";

/* Hero Section Padding Adjustments */
@media (min-width: 48rem) {
    .md\:py-48 {
        padding-block: calc(var(--spacing) * 38);
    }
}

/* Calendar Dot Pulse */
@keyframes pulse {
  0% { transform: scale(0.95); opacity: 0.5; }
  50% { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(0.95); opacity: 0.5; }
}
.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Simple Calendar Overrides */
.simple-calendar table {
  border-collapse: separate;
  border-spacing: 4px;
}
.simple-calendar td {
  width: 14.28%;
}
.simple-calendar .prev-month, .simple-calendar .next-month {
  background-color: #f9fafb;
  opacity: 0.5;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
  
  /* 🚀 iOS PERFORMANCE, SNAPPING & VERTICAL SCROLL FIX */
  -webkit-overflow-scrolling: touch;   /* Momentum scrolling */
  overflow-x: auto;
  overflow-y: visible !important;      /* Never block vertical scroll */
  
  /* Snapping optimizations */
  scroll-snap-type: x mandatory;
  scroll-padding: 1.5rem;              /* Prevents cards from hugging the screen edge too tight */
  
  /* Speed & GPU acceleration */
  touch-action: pan-x pan-y;           /* Explicitly allow both axes */
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}

/* Map Styles */
#location-picker-map {
  height: 350px;
  width: auto;
  min-width: 100%;
  border-radius: 1.5rem;
  z-index: 10;
}

[data-map-display-target="map"] {
  height: 100%;
  width: 100%;
  z-index: 1;
}

/* Custom Map Popup Styling */
.custom-map-popup .leaflet-popup-content-wrapper {
  border-radius: 1.5rem;
  padding: 0;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.15);
}

.custom-map-popup .leaflet-popup-content {
  margin: 0;
  width: 240px !important;
}

.custom-map-popup .leaflet-popup-tip {
  box-shadow: none;
}

/* Ensure map popup buttons have white text */
.map-view-btn {
  color: white !important;
  text-decoration: none !important;
}

/* Print Styles for Legal Agreements */
@media print {
  nav, footer, .fixed, button, .bg-blue-600, .no-print {
    display: none !important;
  }
  .container {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .prose {
    font-size: 12pt !important;
    color: black !important;
  }
  .bg-gray-50 {
    background-color: white !important;
    border: 1px solid #eee !important;
  }
}

/* Flash Notification Progress Bar */
@keyframes progress {
  from { width: 100%; }
  to { width: 0%; }
}
.animate-progress {
  animation: progress 5s linear forwards;
}

/* Ensure Leaflet stays within its container on show pages */
.leaflet-container {
  font-family: inherit;
}

/* Skeleton Shimmer Effect */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.animate-shimmer {
  background: linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite linear;
}

/* Lightbox Modal Animations */
[data-lightbox-target="modal"] {
  transition: opacity 0.3s ease;
}

[data-lightbox-target="modal"].flex {
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

/* 🚀 BACKGROUND SCROLL LOCK FIX */
body.overflow-hidden {
  overflow: hidden !important;
  width: 100% !important;
}

html.overflow-hidden {
  overflow: hidden !important;
}

/* SortableJS Styles */
.workout-exercise-card.sortable-ghost {
  opacity: 0.4;
  border: 2px dashed #2563eb !important;
  background-color: #eff6ff !important;
}

.workout-exercise-card.sortable-chosen {
  background-color: white !important;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}