* {
  scroll-behavior: smooth;
  box-sizing: border-box;
}

/* ============================================
   CUSTOM POPUP NOTIFICATION
   ============================================ */

.popup-notification {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 10000;
  min-width: 300px;
  max-width: 500px;
  animation: popupSlideIn 0.3s ease-out;
}

.popup-notification.closing {
  animation: popupSlideOut 0.3s ease-out;
}

@keyframes popupSlideIn {
  from {
    opacity: 0;
    transform: translate(-50%, -60%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@keyframes popupSlideOut {
  from {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
  to {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
}

.popup-notification-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

.popup-notification-overlay.closing {
  animation: fadeOut 0.3s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.popup-close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #666;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color 0.2s;
}

.popup-close-btn:hover {
  background-color: #f0f0f0;
}

.popup-message {
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  padding-right: 10px;
}

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

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

.popup-notification.warning {
  border-left: 4px solid #f59e0b;
}

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

/* ============================================
   RESPONSIVE DESIGN ENHANCEMENTS
   Mobile-First Approach with Tailwind CSS
   ============================================ */

/* ============================================
   1. TYPOGRAPHY RESPONSIVE SCALING
   ============================================ */

@media (max-width: 640px) {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
  h3 {
    @apply text-lg;
  }
  p {
    @apply text-base leading-relaxed;
  }
}

/* ============================================
   2. CONTAINER QUERIES & PADDING
   ============================================ */

.container-responsive {
  @apply px-4 sm:px-6 lg:px-8;
}

.container-responsive-lg {
  @apply px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto;
}

.container-responsive-xl {
  @apply px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto;
}

/* ============================================
   3. GRID RESPONSIVE LAYOUTS
   ============================================ */

/* Responsive 2-column to 1-column */
.grid-responsive-2 {
  @apply grid gap-4 sm:gap-6 md:grid-cols-2;
}

/* Responsive 3-column to 1-column */
.grid-responsive-3 {
  @apply grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3;
}

/* Responsive 4-column to 1-column */
.grid-responsive-4 {
  @apply grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-4;
}

/* ============================================
   4. RESPONSIVE SPACING
   ============================================ */

.spacing-responsive {
  @apply p-4 sm:p-6 md:p-8 lg:p-10;
}

.spacing-responsive-lg {
  @apply p-6 sm:p-8 md:p-12 lg:p-16;
}

.gap-responsive {
  @apply gap-4 sm:gap-6 md:gap-8 lg:gap-10;
}

/* ============================================
   5. RESPONSIVE IMAGES
   ============================================ */

.image-responsive {
  @apply w-full h-auto;
}

.image-container-responsive {
  @apply relative w-full overflow-hidden rounded-lg;
}

.image-container-responsive > img {
  @apply w-full h-full object-cover;
}

/* ============================================
   6. RESPONSIVE BUTTONS
   ============================================ */

.btn-responsive {
  @apply px-4 py-2 sm:px-5 sm:py-2.5 text-sm sm:text-base;
}

.btn-responsive-lg {
  @apply px-6 py-3 sm:px-8 sm:py-4 text-base sm:text-lg;
}

/* ============================================
   7. RESPONSIVE FLEX LAYOUTS
   ============================================ */

.flex-responsive {
  @apply flex flex-col md:flex-row;
}

.flex-responsive-centered {
  @apply flex flex-col items-center justify-center md:flex-row md:items-start;
}

.flex-wrap-responsive {
  @apply flex flex-wrap gap-2 sm:gap-3 md:gap-4;
}

/* ============================================
   8. RESPONSIVE NAVIGATION
   ============================================ */

.nav-responsive {
  @apply flex flex-col sm:flex-row items-center gap-2 sm:gap-4;
}

.nav-responsive-center {
  @apply flex flex-col sm:flex-row items-center justify-center gap-2 sm:gap-4;
}

/* ============================================
   9. RESPONSIVE CARDS
   ============================================ */

.card-responsive {
  @apply rounded-lg sm:rounded-xl border shadow-sm hover:shadow-md transition-shadow p-4 sm:p-6;
}

.card-responsive-lg {
  @apply rounded-xl sm:rounded-2xl border shadow-sm hover:shadow-lg transition-shadow p-6 sm:p-8 md:p-10;
}

/* ============================================
   10. RESPONSIVE FORMS
   ============================================ */

.form-responsive {
  @apply w-full px-3 sm:px-4 py-2 sm:py-2.5 text-sm sm:text-base;
}

.form-group-responsive {
  @apply flex flex-col gap-2 sm:gap-3 mb-4 sm:mb-6;
}

/* ============================================
   11. TOUCH-FRIENDLY ELEMENTS
   ============================================ */

/* Minimum 44x44px for mobile touch targets */
.touch-target {
  @apply min-h-[44px] min-w-[44px] flex items-center justify-center;
}

/* ============================================
   12. RESPONSIVE TEXT
   ============================================ */

.text-responsive-sm {
  @apply text-sm sm:text-base;
}

.text-responsive-base {
  @apply text-base sm:text-lg;
}

.text-responsive-lg {
  @apply text-lg sm:text-xl md:text-2xl;
}

.text-responsive-xl {
  @apply text-xl sm:text-2xl md:text-3xl lg:text-4xl;
}

.text-responsive-2xl {
  @apply text-2xl sm:text-3xl md:text-4xl lg:text-5xl;
}

/* ============================================
   13. RESPONSIVE SECTIONS
   ============================================ */

.section-responsive {
  @apply mt-8 sm:mt-12 md:mt-16 lg:mt-20;
}

.section-padding-responsive {
  @apply py-8 sm:py-12 md:py-16 lg:py-20;
}

/* ============================================
   14. VISIBILITY UTILITIES
   ============================================ */

/* Show only on mobile (< 768px) */
.show-mobile {
  display: block;
}

@media (min-width: 768px) {
  .show-mobile {
    display: none;
  }
}

/* Hide on mobile (< 768px), show on desktop (768px+) */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: block;
  }
}

/* Show only on tablet (768px - 1024px) */
.show-tablet {
  display: none;
}

@media (min-width: 768px) {
  .show-tablet {
    display: block;
  }
}

@media (min-width: 1024px) {
  .show-tablet {
    display: none;
  }
}

/* Show only on desktop (1024px+) */
.show-desktop {
  display: none;
}

@media (min-width: 1024px) {
  .show-desktop {
    display: block;
  }
}

/* ============================================
   15. RESPONSIVE ASPECT RATIOS
   ============================================ */

.aspect-video-responsive {
  @apply aspect-video w-full;
}

.aspect-square-responsive {
  @apply aspect-square w-full;
}

/* ============================================
   16. UTILITIES FOR MOBILE OPTIMIZATION
   ============================================ */

/* Prevent text zoom on mobile when focusing input */
input,
textarea,
select {
  font-size: 16px;
}

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

/* ============================================
   17. RESPONSIVE Z-INDEX MANAGEMENT
   ============================================ */

.z-dropdown {
  @apply z-40;
}

.z-modal {
  @apply z-50;
}

.z-toast {
  @apply z-50;
}

/* ============================================
   18. OPTIMIZE FOR DIFFERENT DEVICES
   ============================================ */

/* Mobile devices (portrait) */
@media (max-width: 640px) {
  /* Stack everything vertically */
  .device-sm\:flex-col {
    @apply flex-col;
  }

  /* Reduce shadows on mobile for performance */
  .shadow-sm,
  .shadow,
  .shadow-md {
    @apply shadow-sm;
  }
}

/* ============================================
   19. HERO IMAGE OVERLAY ANIMATIONS
   ============================================ */

@keyframes hero-shine-move {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Add a subtle moving sheen over images */
.shine-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.shine-overlay::before {
  content: "";
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.45) 50%, rgba(255,255,255,0) 100%);
  filter: blur(2px);
  transform: skewX(-15deg);
  animation: hero-shine-move 6s linear infinite;
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.float-dot {
  position: absolute;
  border-radius: 9999px;
  background: rgba(16, 185, 129, 0.35); /* emerald-500 with opacity */
  pointer-events: none;
  animation: float-y 7s ease-in-out infinite;
}

.float-dot-sm { width: 8px; height: 8px; }
.float-dot-md { width: 12px; height: 12px; animation-duration: 8.5s; }
.float-dot-lg { width: 18px; height: 18px; animation-duration: 10s; background: rgba(34, 197, 94, 0.30); }

/* Tablets (landscape) */
@media (min-width: 768px) and (max-width: 1024px) {
  /* Optimize grid layouts for tablets */
  .grid-responsive-3 {
    @apply md:grid-cols-2;
  }

  .grid-responsive-4 {
    @apply md:grid-cols-2;
  }
}

/* Desktop devices */
@media (min-width: 1024px) {
  /* Use full width capabilities */
  .container-responsive {
    @apply max-w-7xl mx-auto;
  }
}