/* Custom CSS for WeddingShare */\n\n/* Apple-style animations */\n@keyframes fadeUp {\n  from {\n    opacity: 0;\n    transform: translateY(30px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n\n@keyframes slideUp {\n  from {\n    opacity: 0;\n    transform: translateY(50px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n\n.animate-fade-up {\n  animation: fadeUp 0.8s ease-out;\n}\n\n.animate-fade-in {\n  animation: fadeIn 0.6s ease-out;\n}\n\n.animate-slide-up {\n  animation: slideUp 0.7s ease-out;\n}\n\n/* Glassmorphism effects */\n.glass {\n  background: rgba(255, 255, 255, 0.1);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.glass-dark {\n  background: rgba(0, 0, 0, 0.1);\n  backdrop-filter: blur(10px);\n  -webkit-backdrop-filter: blur(10px);\n  border: 1px solid rgba(255, 255, 255, 0.1);\n}\n\n/* Smooth scrolling */\nhtml {\n  scroll-behavior: smooth;\n}\n\n/* Custom scrollbar */\n::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n\n::-webkit-scrollbar-track {\n  background: rgba(0, 0, 0, 0.1);\n  border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb {\n  background: rgba(0, 0, 0, 0.3);\n  border-radius: 4px;\n}\n\n::-webkit-scrollbar-thumb:hover {\n  background: rgba(0, 0, 0, 0.5);\n}\n\n.dark ::-webkit-scrollbar-track {\n  background: rgba(255, 255, 255, 0.1);\n}\n\n.dark ::-webkit-scrollbar-thumb {\n  background: rgba(255, 255, 255, 0.3);\n}\n\n.dark ::-webkit-scrollbar-thumb:hover {\n  background: rgba(255, 255, 255, 0.5);\n}\n\n/* Button hover effects */\n.btn-hover {\n  transition: all 0.3s ease;\n}\n\n.btn-hover:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);\n}\n\n/* Card hover effects */\n.card-hover {\n  transition: all 0.3s ease;\n}\n\n.card-hover:hover {\n  transform: translateY(-5px);\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);\n}\n\n/* Photo grid masonry effect */\n.masonry {\n  columns: 5;\n  column-gap: 1rem;\n}\n\n@media (max-width: 1280px) {\n  .masonry {\n    columns: 4;\n  }\n}\n\n@media (max-width: 1024px) {\n  .masonry {\n    columns: 3;\n  }\n}\n\n@media (max-width: 640px) {\n  .masonry {\n    columns: 2;\n  }\n}\n\n.masonry-item {\n  break-inside: avoid;\n  margin-bottom: 1rem;\n}\n\n/* Upload area drag & drop */\n.upload-drag-over {\n  background-color: rgba(59, 130, 246, 0.1) !important;\n  border-color: rgb(59, 130, 246) !important;\n  transform: scale(1.02);\n}\n\n/* Progress bars */\n.progress-bar {\n  transition: width 0.3s ease;\n}\n\n/* Loading skeleton */\n.skeleton {\n  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);\n  background-size: 200% 100%;\n  animation: loading 1.5s infinite;\n}\n\n@keyframes loading {\n  0% {\n    background-position: 200% 0;\n  }\n  100% {\n    background-position: -200% 0;\n  }\n}\n\n.dark .skeleton {\n  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);\n  background-size: 200% 100%;\n}\n\n/* Theme transition */\n* {\n  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;\n}\n\n/* Mobile optimizations */\n@media (max-width: 640px) {\n  .mobile-padding {\n    padding-left: 1rem;\n    padding-right: 1rem;\n  }\n}\n\n/* Focus styles for accessibility */\n.focus-ring:focus {\n  outline: 2px solid rgb(59, 130, 246);\n  outline-offset: 2px;\n}\n\n/* iOS Safari fixes */\n@supports (-webkit-touch-callout: none) {\n  .ios-fix {\n    -webkit-appearance: none;\n  }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n  .card {\n    border: 2px solid;\n  }\n  \n  .btn {\n    border: 2px solid;\n  }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n\n/* Print styles */\n@media print {\n  .no-print {\n    display: none !important;\n  }\n  \n  .print-only {\n    display: block !important;\n  }\n}\n\n/* QR Code specific styles */\n.qr-code {\n  image-rendering: pixelated;\n  image-rendering: -moz-crisp-edges;\n  image-rendering: crisp-edges;\n}\n\n/* Modal animations */\n.modal-enter {\n  opacity: 0;\n  transform: scale(0.9);\n}\n\n.modal-enter-active {\n  opacity: 1;\n  transform: scale(1);\n  transition: all 0.3s ease;\n}\n\n.modal-exit {\n  opacity: 1;\n  transform: scale(1);\n}\n\n.modal-exit-active {\n  opacity: 0;\n  transform: scale(0.9);\n  transition: all 0.3s ease;\n}\n\n/* Custom file input styles */\n.file-input-custom {\n  position: relative;\n  overflow: hidden;\n  display: inline-block;\n}\n\n.file-input-custom input[type=file] {\n  position: absolute;\n  left: -9999px;\n}\n\n.file-input-label {\n  cursor: pointer;\n  display: inline-block;\n  padding: 0.75rem 1.5rem;\n  background: linear-gradient(135deg, rgb(59, 130, 246), rgb(99, 102, 241));\n  color: white;\n  border-radius: 0.75rem;\n  transition: all 0.3s ease;\n}\n\n.file-input-label:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);\n}\n\n/* Timeline styles */\n.timeline-item::before {\n  content: '';\n  position: absolute;\n  left: -8px;\n  top: 50%;\n  transform: translateY(-50%);\n  width: 16px;\n  height: 16px;\n  background: rgb(59, 130, 246);\n  border-radius: 50%;\n  border: 3px solid white;\n  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);\n}\n\n.timeline-line {\n  position: absolute;\n  left: 0;\n  top: 0;\n  bottom: 0;\n  width: 2px;\n  background: linear-gradient(to bottom, rgb(59, 130, 246), rgba(59, 130, 246, 0.3));\n}\n\n/* Gallery grid improvements */\n.photo-grid {\n  display: grid;\n  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n  gap: 1rem;\n  padding: 1rem;\n}\n\n@media (min-width: 640px) {\n  .photo-grid {\n    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n  }\n}\n\n@media (min-width: 1024px) {\n  .photo-grid {\n    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n  }\n}\n\n/* Lightbox styles */\n.lightbox-overlay {\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n}\n\n.lightbox-content {\n  max-height: 80vh;\n  max-width: 90vw;\n  object-fit: contain;\n}\n\n/* Success/Error states */\n.state-success {\n  background: linear-gradient(135deg, rgb(34, 197, 94), rgb(21, 128, 61));\n  color: white;\n}\n\n.state-error {\n  background: linear-gradient(135deg, rgb(239, 68, 68), rgb(185, 28, 28));\n  color: white;\n}\n\n.state-warning {\n  background: linear-gradient(135deg, rgb(245, 158, 11), rgb(217, 119, 6));\n  color: white;\n}\n\n/* Utility classes */\n.text-shadow {\n  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\n}\n\n.text-shadow-lg {\n  text-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n}\n\n.backdrop-blur-xs {\n  backdrop-filter: blur(2px);\n  -webkit-backdrop-filter: blur(2px);\n}\n"