/*
 * WISHARE DESIGN SYSTEM
 * Version: 1.0
 * Based on Pinterest Masonry prototypes
 * Mobile-first approach
 */

/* ===== COLOR SYSTEM ===== */

/* Primary Gradients - Rose/Pink/Purple */
:root {
  /* Rose Primary */
  --gradient-rose: linear-gradient(to right, rgb(244 63 94), rgb(225 29 72));
  --gradient-rose-hover: linear-gradient(to right, rgb(225 29 72), rgb(190 18 60));

  /* Purple Accent */
  --gradient-purple: linear-gradient(to right, rgb(168 85 247), rgb(147 51 234));
  --gradient-purple-hover: linear-gradient(to right, rgb(147 51 234), rgb(126 34 206));

  /* Pink Gradient */
  --gradient-pink: linear-gradient(to right, rgb(236 72 153), rgb(219 39 119));
  --gradient-pink-hover: linear-gradient(to right, rgb(219 39 119), rgb(190 24 93));

  /* Amber Warning */
  --gradient-amber: linear-gradient(to right, rgb(245 158 11), rgb(251 146 60));
  --gradient-amber-hover: linear-gradient(to right, rgb(217 119 6), rgb(245 158 11));

  /* Green Success */
  --gradient-green: linear-gradient(to right, rgb(34 197 94), rgb(22 163 74));
  --gradient-green-hover: linear-gradient(to right, rgb(22 163 74), rgb(21 128 61));

  /* Multi-color Gradients */
  --gradient-rainbow: linear-gradient(to right, rgb(244 63 94), rgb(168 85 247));
  --gradient-sunset: linear-gradient(135deg, rgb(251 146 60), rgb(244 63 94), rgb(168 85 247));
  --gradient-ocean: linear-gradient(135deg, rgb(59 130 246), rgb(147 51 234));

  /* Background Patterns */
  --bg-glass-light: rgba(255, 255, 255, 0.9);
  --bg-glass-dark: rgba(31, 41, 55, 0.9);
  --bg-gradient-page-light: linear-gradient(to bottom right, rgb(254 242 242), rgb(254 249 195), rgb(250 245 255));
  --bg-gradient-page-dark: linear-gradient(to bottom right, rgb(17 24 39), rgb(31 41 55), rgb(17 24 39));
}

/* ===== TYPOGRAPHY SYSTEM ===== */

/* Already defined in application.css, but documented here:
 *
 * Headings: Playfair Display (serif)
 * - .heading-hero    - 4rem (64px) - Hero sections
 * - .heading-page    - 3rem (48px) - Page titles
 * - .heading-section - 2.5rem (40px) - Section titles
 * - .heading-card    - 2rem (32px) - Card titles
 * - .heading-sub     - 1.5rem (24px) - Subsections
 *
 * Body Text: Inter (sans-serif)
 * - .text-lead      - 1.25rem (20px) - Lead paragraphs
 * - .text-body      - 1rem (16px) - Standard body
 * - .text-body-sm   - 0.875rem (14px) - Small body
 * - .text-caption   - 0.75rem (12px) - Captions/labels
 */

/* ===== COMPONENT PATTERNS ===== */

/* Standard Wishare Card Pattern (Pinterest-inspired) */
.card-wishare {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgb(254 205 211);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-wishare:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1), 0 0 20px rgba(236, 72, 153, 0.15);
}

/* Card with Elevated Shadow */
.card-elevated {
  background: white;
  border-radius: 1.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.card-elevated:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Card with Interactive Hover */
.card-interactive {
  @apply bg-white dark:bg-gray-800 rounded-2xl;
  @apply border-2 border-transparent;
  @apply hover:border-rose-300 dark:hover:border-rose-600;
  @apply cursor-pointer;
  @apply transition-all duration-300;
  @apply hover:shadow-xl;
}

/* Glass Morphism Card */
.card-glass {
  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-md;
  @apply rounded-3xl border border-white/20 dark:border-gray-700/20;
  @apply shadow-xl;
}

/* ===== BUTTON SYSTEM ===== */

/* Primary Button - Rose Gradient */
.btn-wishare-primary {
  background: linear-gradient(to right, rgb(244 63 94), rgb(225 29 72));
  color: white;
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.btn-wishare-primary:hover {
  background: linear-gradient(to right, rgb(225 29 72), rgb(190 18 60));
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Secondary Button - Outline Style */
.btn-wishare-secondary {
  background: white;
  border: 1px solid rgb(209 213 219);
  color: rgb(55 65 81);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  transition: all 0.2s ease;
}

.btn-wishare-secondary:hover {
  background: rgb(249 250 251);
}

/* Enhanced Button - With Shine Effect */
.btn-wishare-enhanced {
  background: linear-gradient(to right, rgb(236 72 153), rgb(219 39 119));
  color: white;
  font-weight: 600;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  box-shadow: 0 8px 25px rgba(236, 72, 153, 0.3);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-wishare-enhanced:hover {
  transform: translateY(-4px) scale(1.05);
  box-shadow: 0 12px 30px rgba(236, 72, 153, 0.4);
}

/* Ghost Button - Minimal Style */
.btn-wishare-ghost {
  @apply bg-transparent hover:bg-rose-50 dark:hover:bg-rose-900/20;
  @apply text-rose-600 dark:text-rose-400 font-medium;
  @apply px-4 py-2 rounded-xl;
  @apply transition-all duration-200;
}

/* Danger Button - Destructive Actions */
.btn-wishare-danger {
  @apply bg-gradient-to-r from-red-500 to-red-600;
  @apply hover:from-red-600 hover:to-red-700;
  @apply text-white font-medium;
  @apply px-4 py-2 rounded-xl;
  @apply shadow-lg hover:shadow-xl;
  @apply transition-all duration-300;
}

/* ===== BADGE SYSTEM ===== */

/* Event Type Badges */
.badge-event {
  background: linear-gradient(to right, rgb(254 243 199), rgb(253 230 138));
  border: 1px solid rgb(252 211 77);
  color: rgb(180 83 9);
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* Visibility Badges */
.badge-public {
  background: rgb(220 252 231);
  color: rgb(21 128 61);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.badge-friends {
  background: rgb(219 234 254);
  color: rgb(30 64 175);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

.badge-private {
  background: rgb(243 244 246);
  color: rgb(55 65 81);
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-weight: 500;
}

/* Status Badges */
.badge-purchased {
  @apply bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400;
  @apply text-xs px-2 py-1 rounded-full font-medium;
}

.badge-available {
  @apply bg-amber-100 dark:bg-amber-900/30 text-amber-700 dark:text-amber-400;
  @apply text-xs px-2 py-1 rounded-full font-medium;
}

/* ===== INPUT SYSTEM ===== */

/* Standard Input */
.input-wishare {
  width: 100%;
  background: white;
  border: 1px solid rgb(209 213 219);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  transition: all 0.2s ease;
}

.input-wishare:focus {
  outline: none;
  border-color: rgb(244 63 94);
  box-shadow: 0 0 0 2px rgba(244, 63, 94, 0.2);
}

/* Textarea */
.textarea-wishare {
  @apply w-full bg-white dark:bg-gray-800;
  @apply border border-gray-300 dark:border-gray-600;
  @apply rounded-xl px-4 py-3;
  @apply text-gray-900 dark:text-gray-100;
  @apply focus:ring-2 focus:ring-rose-500 focus:border-rose-500;
  @apply transition-all duration-200;
  @apply resize-none;
}

/* Select Dropdown */
.select-wishare {
  @apply w-full bg-white dark:bg-gray-800;
  @apply border border-gray-300 dark:border-gray-600;
  @apply rounded-xl px-4 py-3;
  @apply text-gray-900 dark:text-gray-100;
  @apply focus:ring-2 focus:ring-rose-500 focus:border-rose-500;
  @apply transition-all duration-200;
  @apply cursor-pointer;
}

/* File Input */
.file-input-wishare {
  @apply w-full bg-white dark:bg-gray-800;
  @apply border-2 border-dashed border-gray-300 dark:border-gray-600;
  @apply rounded-xl px-4 py-8;
  @apply text-center;
  @apply hover:border-rose-300 dark:hover:border-rose-600;
  @apply transition-all duration-300;
  @apply cursor-pointer;
}

/* ===== EMPTY STATES ===== */

.empty-state-wishare {
  @apply bg-gradient-to-br from-rose-50 to-amber-50 dark:from-rose-900/20 dark:to-amber-900/20;
  @apply rounded-3xl border-2 border-dashed border-rose-200 dark:border-rose-800;
  @apply p-12 text-center;
}

.empty-state-icon {
  @apply bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm;
  @apply rounded-full w-16 h-16 mx-auto mb-4;
  @apply flex items-center justify-center shadow-lg;
}

/* ===== LOADING STATES ===== */

/* Shimmer Loading */
.loading-shimmer {
  @apply animate-pulse;
  @apply bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 dark:from-gray-700 dark:via-gray-600 dark:to-gray-700;
  @apply bg-[length:200%_100%];
  @apply rounded-2xl;
}

/* Spinner */
.spinner-wishare {
  @apply animate-spin;
  @apply rounded-full;
  @apply border-4 border-gray-200 dark:border-gray-700;
  @apply border-t-rose-500;
  @apply w-8 h-8;
}

/* ===== SHADOW SYSTEM ===== */

.shadow-wishare-sm {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.shadow-wishare-md {
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.08),
    0 0 8px rgba(236, 72, 153, 0.05);
}

.shadow-wishare-lg {
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(236, 72, 153, 0.1);
}

.shadow-wishare-xl {
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(236, 72, 153, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ===== BORDER SYSTEM ===== */

.border-wishare-default {
  @apply border border-rose-100 dark:border-gray-700;
}

.border-wishare-accent {
  @apply border-2 border-rose-200 dark:border-rose-800;
}

.border-wishare-hover {
  @apply border border-rose-100 dark:border-gray-700;
  @apply hover:border-rose-200 dark:hover:border-gray-600;
  @apply transition-colors duration-200;
}

/* ===== SPACING SYSTEM ===== */

/* Following Tailwind defaults:
 * gap-2  = 0.5rem (8px)
 * gap-4  = 1rem (16px)
 * gap-6  = 1.5rem (24px)
 * gap-8  = 2rem (32px)
 *
 * p-4    = 1rem (16px)
 * p-6    = 1.5rem (24px)
 * p-8    = 2rem (32px)
 *
 * mb-4   = 1rem (16px)
 * mb-6   = 1.5rem (24px)
 * mb-8   = 2rem (32px)
 */

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Mobile-first approach:
 * sm:  640px  - Small tablets
 * md:  768px  - Tablets
 * lg:  1024px - Laptops
 * xl:  1280px - Desktops
 * 2xl: 1536px - Large desktops
 */

/* ===== GRADIENT TEXT ===== */

.gradient-text {
  background: linear-gradient(to right, rgb(244 63 94), rgb(168 85 247)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  display: inline-block !important;
}

/* ===== ANIMATION PRESETS ===== */

/* Fade-in animation */
@keyframes fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fade-in-up 0.6s ease-out forwards;
}

/* Stagger Delay Utility */
.stagger-delay-1 {
  animation-delay: 0.1s;
}

.stagger-delay-2 {
  animation-delay: 0.2s;
}

.stagger-delay-3 {
  animation-delay: 0.3s;
}

.stagger-delay-4 {
  animation-delay: 0.4s;
}

/* Stagger Delay Utility */
.stagger-delay-100 {
  animation-delay: 0.1s;
}

.stagger-delay-200 {
  animation-delay: 0.2s;
}

.stagger-delay-300 {
  animation-delay: 0.3s;
}

.stagger-delay-400 {
  animation-delay: 0.4s;
}

.stagger-delay-500 {
  animation-delay: 0.5s;
}

/* ===== ACCESSIBILITY ===== */

/* Focus Visible States */
.focus-wishare {
  @apply focus-visible:outline-none;
  @apply focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2;
  @apply dark:focus-visible:ring-rose-400 dark:focus-visible:ring-offset-gray-900;
}

/* Touch Targets (minimum 44x44px) */
.touch-target-wishare {
  @apply min-h-[44px] min-w-[44px];
}

/* Skip to Content Link */
.skip-to-content {
  @apply sr-only focus:not-sr-only;
  @apply focus:absolute focus:top-4 focus:left-4;
  @apply focus:z-50 focus:px-4 focus:py-2;
  @apply focus:bg-rose-500 focus:text-white focus:rounded-xl;
}

/* ===== DARK MODE UTILITIES ===== */

/* Ensure text readability */
.text-wishare-primary {
  @apply text-gray-800 dark:text-gray-100;
}

.text-wishare-secondary {
  @apply text-gray-600 dark:text-gray-400;
}

.text-wishare-tertiary {
  @apply text-gray-500 dark:text-gray-500;
}

/* Background colors */
.bg-wishare-surface {
  @apply bg-white dark:bg-gray-800;
}

.bg-wishare-elevated {
  @apply bg-gray-50 dark:bg-gray-900;
}

.bg-wishare-page {
  @apply bg-gradient-to-br from-rose-50 via-amber-50 to-purple-50;
  @apply dark:from-gray-950 dark:via-gray-900 dark:to-gray-950;
}

/* Dark mode card adjustments */
.dark .card-wishare {
  background: rgba(31, 41, 55, 0.9);
  border-color: rgb(75 85 99);
}

.dark .card-elevated {
  background: rgb(31 41 55);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.dark .card-interactive {
  background: rgb(31 41 55);
}

.dark .card-interactive:hover {
  border-color: rgb(225 29 72);
}

.dark .card-glass {
  background: rgba(31, 41, 55, 0.8);
  border-color: rgba(75, 85, 99, 0.2);
}

/* Dark mode button adjustments */
.dark .btn-wishare-secondary {
  background: rgb(55 65 81) !important;
  border: 1px solid rgb(156 163 175) !important;
  color: rgb(243 244 246) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark .btn-wishare-secondary:hover {
  background: rgb(75 85 99) !important;
  border-color: rgb(209 213 219) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Dark mode input adjustments */
.dark .input-wishare {
  background: rgb(31 41 55);
  border-color: rgb(75 85 99);
  color: rgb(243 244 246);
}

.dark .input-wishare::placeholder {
  color: rgb(156 163 175);
}

.dark .textarea-wishare,
.dark .select-wishare {
  background: rgb(31 41 55);
  border-color: rgb(75 85 99);
  color: rgb(243 244 246);
}

.dark .file-input-wishare {
  background: rgb(31 41 55);
  border-color: rgb(75 85 99);
}

.dark .file-input-wishare:hover {
  border-color: rgb(225 29 72);
}

/* Dark mode badge adjustments */
.dark .badge-event {
  background: rgba(254, 243, 199, 0.2);
  border-color: rgb(180 83 9);
  color: rgb(251 191 36);
}

.dark .badge-public {
  background: rgba(220, 252, 231, 0.2);
  color: rgb(134 239 172);
}

.dark .badge-friends {
  background: rgba(219, 234, 254, 0.2);
  color: rgb(147 197 253);
}

.dark .badge-private {
  background: rgba(243, 244, 246, 0.2);
  color: rgb(209 213 219);
}

.dark .badge-purchased {
  background: rgba(220, 252, 231, 0.2);
  color: rgb(134 239 172);
}

.dark .badge-available {
  background: rgba(254, 243, 199, 0.2);
  color: rgb(251 191 36);
}

/* Dark mode empty state */
.dark .empty-state-wishare {
  @apply bg-gradient-to-br from-rose-900/20 to-amber-900/20 border-rose-800;
}

.dark .empty-state-icon {
  @apply bg-gray-800/80;
}

/* Dark mode loading states */
.dark .loading-shimmer {
  @apply bg-gradient-to-r from-gray-700 via-gray-600 to-gray-700;
}

.dark .spinner-wishare {
  @apply border-gray-700 border-t-rose-500;
}

/* ===== MOBILE OPTIMIZATIONS ===== */

@media (max-width: 640px) {
  /* Reduce card hover effects */
  .card-wishare:hover {
    @apply scale-[1.01];
  }

  /* Optimize button sizes */
  .btn-wishare-primary,
  .btn-wishare-secondary,
  .btn-wishare-enhanced {
    @apply py-3 text-base;
  }

  /* Adjust heading sizes */
  .heading-hero {
    @apply text-4xl;
  }

  .heading-page {
    @apply text-3xl;
  }

  .heading-section {
    @apply text-2xl;
  }
}

/* ===== HIGH CONTRAST MODE ===== */

@media (prefers-contrast: high) {
  .card-wishare,
  .card-elevated,
  .card-interactive {
    @apply border-2 border-gray-900 dark:border-white;
  }

  .text-wishare-secondary {
    @apply text-gray-800 dark:text-gray-200;
  }
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .card-wishare,
  .card-elevated,
  .btn-wishare-primary,
  .btn-wishare-enhanced {
    @apply transition-none;
  }

  .card-wishare:hover,
  .card-elevated:hover,
  .btn-wishare-enhanced:hover {
    @apply scale-100 translate-y-0;
  }
}

/* ===== PRINT STYLES ===== */

@media print {
  .card-wishare,
  .card-elevated {
    @apply shadow-none border border-gray-300;
  }

  .bg-wishare-page {
    @apply bg-white;
  }
}
/*
 * WISHARE NAVIGATION COMPONENTS
 * Glass morphism nav, mobile bottom nav, toast notifications
 */

/* ===== GLASS MORPHISM NAVIGATION ===== */

.nav-glass {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.dark .nav-glass {
  background: rgba(31, 41, 55, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Navigation sticky positioning */
.nav-sticky {
  position: sticky;
  top: 0;
  z-index: 40;
}

/* ===== NAVIGATION LINKS ===== */

.nav-link-top {
  @apply px-4 py-2 rounded-xl text-sm font-medium;
  @apply text-gray-700 dark:text-gray-300;
  @apply hover:bg-rose-50 dark:hover:bg-rose-900/20;
  @apply transition-all duration-200;
  @apply flex items-center gap-2;
}

.nav-link-top.active {
  @apply bg-gradient-to-r from-rose-50 to-purple-50 dark:from-rose-900/20 dark:to-purple-900/20;
  @apply text-rose-600 dark:text-rose-400;
  @apply border-b-2 border-rose-500 dark:border-rose-400;
}

/* ===== SEARCH BAR ===== */

.search-bar {
  @apply relative w-full;
}

.search-input {
  @apply w-full px-4 py-2 pl-10 rounded-xl;
  @apply border border-gray-300 dark:border-gray-600;
  @apply bg-white dark:bg-gray-800;
  @apply text-gray-700 dark:text-gray-300;
  @apply focus:outline-none focus:border-rose-500 dark:focus:border-rose-400;
  @apply transition-all duration-200;
}

.search-input:focus {
  box-shadow: 0 0 0 4px rgba(244, 63, 94, 0.1);
}

.search-icon {
  @apply absolute left-3 top-1/2 transform -translate-y-1/2;
  @apply w-5 h-5 text-gray-400;
}

/* ===== USER DROPDOWN ===== */

.user-dropdown {
  @apply absolute right-0 mt-2 w-64;
  @apply bg-white dark:bg-gray-800;
  @apply rounded-xl shadow-xl;
  @apply border border-gray-100 dark:border-gray-700;
  @apply py-2;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.user-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.dropdown-item {
  @apply flex items-center gap-3 px-4 py-2.5;
  @apply text-sm text-gray-700 dark:text-gray-300;
  @apply hover:bg-gray-50 dark:hover:bg-gray-700;
  @apply transition-colors duration-200;
  @apply cursor-pointer;
}

.dropdown-divider {
  @apply border-t border-gray-100 dark:border-gray-700 my-2;
}

/* ===== NOTIFICATION BELL ===== */

.notification-bell {
  @apply relative p-2 rounded-lg;
  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
  @apply transition-colors duration-200;
}

.notification-badge {
  @apply absolute -top-1 -right-1;
  @apply w-5 h-5 rounded-full;
  @apply bg-gradient-to-r from-rose-500 to-pink-500;
  @apply text-white text-xs;
  @apply flex items-center justify-center;
  @apply font-bold;
  animation: pulse-badge 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===== MOBILE BOTTOM NAVIGATION ===== */

.bottom-nav {
  @apply fixed bottom-0 inset-x-0;
  @apply bg-white/95 dark:bg-gray-800/95;
  @apply backdrop-filter backdrop-blur-md;
  @apply border-t border-gray-200 dark:border-gray-700;
  @apply shadow-2xl;
  @apply z-50;
}

.bottom-nav-grid {
  @apply grid grid-cols-5 h-16;
}

.bottom-nav-item {
  @apply flex flex-col items-center justify-center;
  @apply text-gray-500 dark:text-gray-400;
  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
  @apply transition-all duration-200;
  @apply cursor-pointer;
}

.bottom-nav-item.active {
  @apply text-rose-600 dark:text-rose-400;
}

.bottom-nav-item.active svg {
  @apply text-rose-600 dark:text-rose-400;
}

/* Floating Action Button (FAB) in center */
.bottom-nav-fab {
  @apply flex flex-col items-center justify-center;
  @apply -mt-8;
}

.fab-button {
  @apply w-14 h-14 rounded-full;
  @apply bg-gradient-to-br from-rose-500 to-pink-500;
  @apply shadow-xl;
  @apply flex items-center justify-center;
  @apply hover:scale-110;
  @apply transition-transform duration-200;
  @apply cursor-pointer;
}

.fab-button svg {
  @apply w-7 h-7 text-white;
}

/* ===== TOAST NOTIFICATIONS ===== */

.toast-container {
  @apply fixed bottom-20 right-4;
  @apply z-[100];
  @apply pointer-events-none;
}

.toast {
  @apply bg-gradient-to-r from-rose-500 to-pink-500;
  @apply text-white;
  @apply px-6 py-4 rounded-xl;
  @apply shadow-xl;
  @apply flex items-center gap-3;
  @apply mb-4;
  @apply pointer-events-all;
  transform: translateY(100px);
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.toast.show {
  transform: translateY(0);
  opacity: 1;
}

.toast-icon {
  @apply text-2xl;
}

.toast-message {
  @apply font-medium;
}

.toast-success {
  @apply bg-gradient-to-r from-green-500 to-emerald-500;
}

.toast-error {
  @apply bg-gradient-to-r from-red-500 to-rose-500;
}

.toast-warning {
  @apply bg-gradient-to-r from-amber-500 to-orange-500;
}

.toast-info {
  @apply bg-gradient-to-r from-blue-500 to-indigo-500;
}

/* ===== LOGO ANIMATION ===== */

.logo-container {
  @apply flex items-center gap-3 group;
}

.logo-icon {
  @apply w-10 h-10 rounded-xl;
  @apply bg-gradient-to-br from-rose-500 to-pink-500;
  @apply flex items-center justify-center;
  @apply shadow-lg;
  @apply group-hover:scale-110;
  @apply transition-transform duration-200;
}

.logo-text {
  @apply text-xl font-bold;
  @apply bg-gradient-to-r from-rose-600 to-pink-600;
  @apply bg-clip-text text-transparent;
}

/* ===== DARK MODE TOGGLE ===== */

.dark-mode-toggle {
  @apply p-2 rounded-lg;
  @apply hover:bg-gray-100 dark:hover:bg-gray-700;
  @apply transition-colors duration-200;
  @apply cursor-pointer;
}

.dark-mode-icon-light {
  @apply w-6 h-6 text-gray-700;
  @apply dark:hidden;
}

.dark-mode-icon-dark {
  @apply w-6 h-6 text-gray-300;
  @apply hidden dark:block;
}

/* ===== AVATAR ===== */

.user-avatar {
  @apply w-10 h-10 rounded-full;
  @apply border-2 border-rose-500;
  @apply shadow-lg;
}

.user-avatar-small {
  @apply w-6 h-6 rounded-full;
  @apply border-2 border-transparent;
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

/* Hide desktop nav on mobile */
@media (max-width: 1024px) {
  .nav-desktop {
    @apply hidden;
  }
}

/* Hide mobile nav on desktop */
@media (min-width: 1024px) {
  .nav-mobile {
    @apply hidden;
  }
}

/* Adjust page content for bottom nav on mobile */
.page-content {
  min-height: calc(100vh - 64px);
  padding-bottom: 80px;
}

@media (min-width: 1024px) {
  .page-content {
    min-height: calc(100vh - 80px);
    padding-bottom: 0;
  }
}

/* ===== ACCESSIBILITY ===== */

.nav-link-top:focus-visible,
.bottom-nav-item:focus-visible,
.notification-bell:focus-visible,
.dark-mode-toggle:focus-visible {
  @apply outline-none ring-2 ring-rose-500 ring-offset-2;
  @apply dark:ring-rose-400 dark:ring-offset-gray-900;
}

/* ===== REDUCED MOTION ===== */

@media (prefers-reduced-motion: reduce) {
  .user-dropdown,
  .toast,
  .fab-button,
  .logo-icon,
  .nav-link-top,
  .bottom-nav-item {
    transition: none !important;
    animation: none !important;
  }

  .user-dropdown.show {
    transform: none;
  }

  .toast.show {
    transform: none;
  }

  .fab-button:hover,
  .logo-icon {
    transform: none !important;
  }
}
/* Micro-interactions and Animation Enhancements for Wishare */

/* ===== BUTTON ENHANCEMENTS ===== */
.btn-enhanced {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-origin: center;
}

.btn-enhanced:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(236, 72, 153, 0.1);
}

.btn-enhanced:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

.btn-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-enhanced:hover::before {
  left: 100%;
}

/* ===== CARD ENHANCEMENTS ===== */
.card-enhanced {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  transform-style: preserve-3d;
  backface-visibility: hidden;
}

.card-enhanced:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 0 20px rgba(236, 72, 153, 0.15),
    0 1px 3px rgba(0, 0, 0, 0.12);
}

.card-enhanced .card-content {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.card-enhanced:hover .card-content {
  transform: translateY(-2px);
}

/* Card shimmer effect */
.card-enhanced::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  transition: left 0.6s;
  pointer-events: none;
  z-index: 1;
}

.card-enhanced:hover::before {
  left: 100%;
}

/* ===== IMAGE ENHANCEMENTS ===== */
.image-enhanced {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  overflow: hidden;
}

.image-enhanced img {
  transition: transform 0.6s ease-out, filter 0.4s ease-out;
}

.image-enhanced:hover img {
  transform: scale(1.08);
  filter: brightness(1.1) contrast(1.05) saturate(1.1);
}

/* ===== TEXT ENHANCEMENTS ===== */
.text-enhanced {
  transition: all 0.2s ease-out;
  position: relative;
  display: inline-block;
}

.text-enhanced::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #ec4899, #f59e0b);
  transition: width 0.3s ease-out;
}

.text-enhanced:hover::after {
  width: 100%;
}

.text-enhanced:hover {
  color: #ec4899;
  text-shadow: 0 0 8px rgba(236, 72, 153, 0.3);
}

/* ===== LOADING ANIMATIONS ===== */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 0.5rem;
}

.dark .loading-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-loading {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Enhanced pulse */
.pulse-enhanced {
  animation: pulse-enhanced 2s ease-in-out infinite;
}

@keyframes pulse-enhanced {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.02);
  }
}

/* ===== FLOATING ANIMATIONS ===== */
.float-gentle {
  animation: float-gentle 3s ease-in-out infinite;
}

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

.float-bounce {
  animation: float-bounce 2s ease-in-out infinite;
}

@keyframes float-bounce {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-8px) scale(1.05); }
}

/* ===== ENTRANCE ANIMATIONS ===== */
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  animation: fade-in-up 0.6s ease-out forwards;
}

@keyframes fade-in-up {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-scale {
  opacity: 0;
  transform: scale(0.9);
  animation: fade-in-scale 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes fade-in-scale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
  animation: slide-in-left 0.5s ease-out forwards;
}

@keyframes slide-in-left {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.slide-in-right {
  opacity: 0;
  transform: translateX(50px);
  animation: slide-in-right 0.5s ease-out forwards;
}

@keyframes slide-in-right {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* ===== STAGGER ANIMATIONS ===== */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
}

.stagger-children.animate > *:nth-child(1) { animation: fade-in-up 0.6s ease-out 0.1s forwards; }
.stagger-children.animate > *:nth-child(2) { animation: fade-in-up 0.6s ease-out 0.2s forwards; }
.stagger-children.animate > *:nth-child(3) { animation: fade-in-up 0.6s ease-out 0.3s forwards; }
.stagger-children.animate > *:nth-child(4) { animation: fade-in-up 0.6s ease-out 0.4s forwards; }
.stagger-children.animate > *:nth-child(5) { animation: fade-in-up 0.6s ease-out 0.5s forwards; }
.stagger-children.animate > *:nth-child(6) { animation: fade-in-up 0.6s ease-out 0.6s forwards; }

/* ===== INTERACTIVE EFFECTS ===== */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* Magnetic effect */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  cursor: pointer;
}

/* Tilt effect */
.tilt-3d {
  transition: transform 0.3s ease-out;
  transform-style: preserve-3d;
}

/* ===== CELEBRATION ANIMATIONS ===== */
.celebrate-success {
  animation: celebrate-success 0.6s ease-out;
}

@keyframes celebrate-success {
  0% { transform: scale(1); }
  50% { transform: scale(1.1) rotate(2deg); }
  100% { transform: scale(1) rotate(0deg); }
}

.celebrate-bounce {
  animation: celebrate-bounce 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes celebrate-bounce {
  0% { transform: scale(1) translateY(0); }
  25% { transform: scale(1.05) translateY(-10px); }
  50% { transform: scale(1.1) translateY(-5px); }
  75% { transform: scale(1.02) translateY(-2px); }
  100% { transform: scale(1) translateY(0); }
}

/* ===== GLOW EFFECTS ===== */
.glow-primary {
  transition: all 0.3s ease-out;
}

.glow-primary:hover {
  box-shadow:
    0 0 20px rgba(236, 72, 153, 0.4),
    0 0 40px rgba(236, 72, 153, 0.2),
    0 0 60px rgba(236, 72, 153, 0.1);
  filter: brightness(1.1);
}

.glow-success {
  transition: all 0.3s ease-out;
}

.glow-success:hover {
  box-shadow:
    0 0 20px rgba(16, 185, 129, 0.4),
    0 0 40px rgba(16, 185, 129, 0.2);
}

/* ===== PROGRESS INDICATORS ===== */
.progress-shimmer {
  position: relative;
  overflow: hidden;
  background: #e5e7eb;
  border-radius: 0.5rem;
}

.progress-shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.8), transparent);
  transform: translateX(-100%);
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  100% { transform: translateX(100%); }
}

/* ===== ACCESSIBILITY & REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .card-enhanced:hover,
  .btn-enhanced:hover,
  .image-enhanced:hover img {
    transform: none !important;
  }

  .float-gentle,
  .float-bounce,
  .pulse-enhanced {
    animation: none !important;
  }
}

/* ===== FOCUS STATES FOR ACCESSIBILITY ===== */
.btn-enhanced:focus-visible,
.card-enhanced:focus-visible,
.text-enhanced:focus-visible {
  outline: 2px solid #ec4899;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(236, 72, 153, 0.2);
}

/* ===== UTILITY CLASSES ===== */
.animate-on-hover:hover {
  animation: pulse 0.5s ease-in-out;
}

.scale-on-hover {
  transition: transform 0.2s ease-out;
}

.scale-on-hover:hover {
  transform: scale(1.05);
}

.lift-on-hover {
  transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.lift-on-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.rotate-on-hover {
  transition: transform 0.3s ease-out;
}

.rotate-on-hover:hover {
  transform: rotate(5deg);
}

/* ===== EMOJI ANIMATIONS ===== */
.emoji-bounce {
  display: inline-block;
  animation: emoji-bounce 2s ease-in-out infinite;
}

@keyframes emoji-bounce {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-8px) scale(1.1); }
}

.emoji-wiggle {
  display: inline-block;
  animation: emoji-wiggle 1s ease-in-out infinite;
}

@keyframes emoji-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-10deg); }
  75% { transform: rotate(10deg); }
}

.emoji-pulse {
  display: inline-block;
  animation: emoji-pulse 1.5s ease-in-out infinite;
}

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

/* ===== MOBILE OPTIMIZATIONS ===== */
@media (max-width: 768px) {
  .card-enhanced:hover {
    transform: translateY(-4px) scale(1.01);
  }

  .btn-enhanced:hover {
    transform: translateY(-1px) scale(1.01);
  }

  /* Reduce animation intensity on mobile */
  .fade-in-up,
  .fade-in-scale,
  .slide-in-left,
  .slide-in-right {
    animation-duration: 0.4s;
  }
}/* Simple Mobile Optimizations */

/* Touch-friendly targets */
@media (max-width: 1023px) {
  button,
  a,
  [role="button"] {
    min-height: 44px;
    min-width: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

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

  /* Safe area support for devices with notches */
  .pb-safe-area {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .safe-area-padding {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }
}

/* Dark mode mobile optimizations */
@media (max-width: 1023px) and (prefers-color-scheme: dark) {
  .bg-gray-900 {
    background-color: rgb(17, 24, 39);
  }

  .bg-gray-800 {
    background-color: rgb(31, 41, 55);
  }
}

/* ===== LOGIN PAGE ANIMATIONS ===== */

/* Animated gradient background */
@keyframes gradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.animate-gradient {
  background-size: 200% 200%;
  animation: gradient 15s ease infinite;
}

/* Floating animation for decorative elements */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-20px); }
}

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

/* Fade in up animation for content entry */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

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

.dark .glass-strong {
  background: rgba(31, 41, 55, 0.9);
  border: 1px solid rgba(75, 85, 99, 0.2);
}

/* Input field with lift effect on focus */
.input-field {
  transition: all 0.3s ease;
}

.input-field:focus {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(139, 92, 246, 0.2);
}

/* Social login button with bounce effect */
.social-btn {
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.social-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Submit button with ripple effect */
.submit-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

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

.submit-btn:hover::before {
  width: 300px;
  height: 300px;
}

.submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 35px rgba(139, 92, 246, 0.4);
}

.submit-btn span {
  position: relative;
  z-index: 10;
}

/* Link hover slide animation */
.link-hover {
  transition: all 0.2s ease;
}

.link-hover:hover {
  transform: translateX(5px);
}

/* ===== LOGIN PAGE SWITCHER COMPONENTS ===== */

/* Switcher Pill - Glass Morphism */
.switcher-pill {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .switcher-pill {
  background: rgba(31, 41, 55, 0.9);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.switcher-pill:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(168, 85, 247, 0.3);
}

.dark .switcher-pill:hover {
  background: rgba(31, 41, 55, 0.95);
  border-color: rgba(168, 85, 247, 0.5);
}

/* Dropdown Menu for Language Switcher */
.switcher-dropdown {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.dark .switcher-dropdown {
  background: rgba(31, 41, 55, 0.95);
  border: 1px solid rgba(75, 85, 99, 0.3);
}

.switcher-dropdown.show {
  opacity: 1;
  transform: scale(1);
  pointer-events: all;
}

/* Mobile adjustments for switchers */
@media (max-width: 640px) {
  .switcher-pill {
    height: 36px;
    font-size: 0.75rem;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-gradient,
  .animate-float,
  .animate-fade-in-up,
  .input-field:focus,
  .social-btn:hover,
  .submit-btn:hover,
  .link-hover:hover,
  .switcher-pill,
  .switcher-dropdown {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }
}