/* Mobile-First Responsive Design for Bengal Passionate Riders */

/* Base Mobile Styles (320px and up) */
:root {
  --mobile-padding: 16px;
  --mobile-margin: 12px;
  --touch-target: 48px;
  --mobile-font-base: 16px;
  --mobile-line-height: 1.5;
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
}

/* Touch-friendly interactions */
* {
  -webkit-tap-highlight-color: rgba(140, 112, 220, 0.3);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Allow text selection for content */
p, span, h1, h2, h3, h4, h5, h6, li, td, th {
  -webkit-user-select: text;
  user-select: text;
}

/* Improved touch targets */
button, a, input, select, textarea {
  min-height: var(--touch-target);
  min-width: var(--touch-target);
}

/* Prevent zoom on input focus (iOS) */
input, select, textarea {
  font-size: 16px !important;
}

/* Safe area support for notched devices */
body {
  padding-top: var(--safe-area-inset-top);
  padding-bottom: var(--safe-area-inset-bottom);
  padding-left: var(--safe-area-inset-left);
  padding-right: var(--safe-area-inset-right);
}

/* Mobile Navigation Improvements - FIXED VERSION */
@media (max-width: 768px) {
  /* Ensure body has proper padding for fixed navbar */
  body {
    padding-top: calc(60px + var(--safe-area-inset-top)) !important;
    margin: 0 !important;
    overflow-x: hidden !important;
  }

  /* Fixed Mobile Navbar */
  .navbar {
    position: fixed !important;
    top: var(--safe-area-inset-top) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    border-radius: 0 !important;
    padding: 12px calc(16px + var(--safe-area-inset-left)) 12px calc(16px + var(--safe-area-inset-right)) !important;
    height: 60px !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(140, 112, 220, 0.2) !important;
    margin: 0 !important;
  }

  /* Override all navbar variants for mobile */
  .navbar.collapsed,
  .navbar.compact,
  .navbar.expanded {
    width: 100% !important;
    max-width: none !important;
    padding: 12px calc(16px + var(--safe-area-inset-left)) 12px calc(16px + var(--safe-area-inset-right)) !important;
    transform: none !important;
    left: 0 !important;
    top: var(--safe-area-inset-top) !important;
    border-radius: 0 !important;
    height: 60px !important;
    position: fixed !important;
    background: rgba(0, 0, 0, 0.95) !important;
  }

  /* Mobile Logo */
  .logo {
    flex-shrink: 0 !important;
    margin: 0 !important;
    z-index: 10001 !important;
  }

  .logo img {
    height: 40px !important;
    width: auto !important;
  }

  /* Mobile Navigation Links - Hidden by default */
  .nav-links {
    position: fixed !important;
    top: calc(60px + var(--safe-area-inset-top)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 40px calc(20px + var(--safe-area-inset-left)) calc(40px + var(--safe-area-inset-bottom)) calc(20px + var(--safe-area-inset-right)) !important;
    gap: 16px !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    list-style: none !important;
    margin: 0 !important;
    z-index: 9998 !important;
  }

  /* Active state for mobile menu */
  .nav-links.nav-active {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* Mobile Navigation Items */
  .nav-links li {
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 !important;
    display: block !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transition: all 0.3s ease !important;
  }

  /* Animation for nav items when menu is active */
  .nav-links.nav-active li {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .nav-links.nav-active li:nth-child(1) { transition-delay: 0.1s !important; }
  .nav-links.nav-active li:nth-child(2) { transition-delay: 0.15s !important; }
  .nav-links.nav-active li:nth-child(3) { transition-delay: 0.2s !important; }
  .nav-links.nav-active li:nth-child(4) { transition-delay: 0.25s !important; }
  .nav-links.nav-active li:nth-child(5) { transition-delay: 0.3s !important; }
  .nav-links.nav-active li:nth-child(6) { transition-delay: 0.35s !important; }
  .nav-links.nav-active li:nth-child(7) { transition-delay: 0.4s !important; }
  .nav-links.nav-active li:nth-child(8) { transition-delay: 0.45s !important; }

  /* Mobile Navigation Links Styling */
  .nav-links a, .nav-links button.login-btn {
    width: 100% !important;
    padding: 18px 24px !important;
    font-size: 18px !important;
    text-align: center !important;
    border-radius: 12px !important;
    background: rgba(140, 112, 220, 0.15) !important;
    border: 1px solid rgba(140, 112, 220, 0.3) !important;
    color: #fff !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    display: block !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
  }

  .nav-links a:active, .nav-links button.login-btn:active {
    transform: scale(0.98) !important;
  }

  .nav-links a:hover, .nav-links button.login-btn:hover,
  .nav-links a.active {
    background: rgba(140, 112, 220, 0.8) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(140, 112, 220, 0.4) !important;
    border-color: rgba(140, 112, 220, 0.6) !important;
  }

  /* Mobile Burger Menu */
  .burger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    padding: 10px !important;
    z-index: 10001 !important;
    background: rgba(140, 112, 220, 0.1) !important;
    border: 1px solid rgba(140, 112, 220, 0.2) !important;
    border-radius: 8px !important;
    width: 44px !important;
    height: 44px !important;
    transition: all 0.3s ease !important;
  }

  .burger:active {
    transform: scale(0.95) !important;
    background: rgba(140, 112, 220, 0.2) !important;
  }

  .burger div {
    width: 24px !important;
    height: 2.5px !important;
    background: #fff !important;
    margin: 2.5px 0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border-radius: 2px !important;
  }

  /* Burger Animation */
  .burger.toggle {
    background: rgba(140, 112, 220, 0.3) !important;
  }

  .burger.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px) !important;
  }

  .burger.toggle .line2 {
    opacity: 0 !important;
    transform: translateX(-20px) !important;
  }

  .burger.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px) !important;
  }

  /* Profile dropdown for mobile */
  .profile-dropdown {
    position: relative !important;
  }

  .profile-dropdown .dropdown-content {
    position: static !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    margin-top: 12px !important;
    box-shadow: none !important;
    padding: 8px 0 !important;
    display: none !important;
  }

  .profile-dropdown.open .dropdown-content {
    display: block !important;
  }

  .dropdown-content a {
    padding: 14px 20px !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    font-size: 16px !important;
    transition: all 0.2s ease !important;
  }

  .dropdown-content a:last-child {
    border-bottom: none !important;
  }

  .dropdown-content a:active {
    background: rgba(140, 112, 220, 0.3) !important;
  }

  /* Prevent body scroll when menu is open */
  body.menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
}

/* Hero Section Mobile Optimization - RESPONSIVE AUTO-SIZING */
@media (max-width: 768px) {
  /* Main hero container - Auto-sizing based on screen */
  .hero, .hero-section {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    
    /* Auto-sizing: Moderate height, not too tall */
    min-height: 50vh !important;
    max-height: 60vh !important;
    height: auto !important;
  }

  /* Hero container wrapper */
  .hero-container {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: inherit !important;
  }

  /* Hero video mobile optimization */
  .hero-video {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    pointer-events: none !important;
  }

  /* Hero content mobile */
  .hero-content {
    position: relative !important;
    z-index: 2 !important;
    padding: 20px 16px !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 90% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Hero headings mobile - Responsive sizing */
  .hero h1, .hero-content h1, .hero-content h2 {
    font-size: clamp(1.8rem, 5vw, 2.5rem) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
  }

  /* Hero paragraphs mobile - Responsive sizing */
  .hero p, .hero-content p {
    font-size: clamp(1rem, 3vw, 1.2rem) !important;
    line-height: 1.5 !important;
    margin-bottom: 24px !important;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
    max-width: 300px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hero buttons mobile - Responsive sizing */
  .cta-button, .join-btn, .view-more-btn {
    padding: clamp(12px, 3vw, 16px) clamp(24px, 6vw, 32px) !important;
    font-size: clamp(1rem, 3vw, 1.1rem) !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 8px auto !important;
    display: block !important;
    text-align: center !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
  }

  /* Hide scroll indicator on mobile */
  .scroll-indicator {
    display: none !important;
  }

  /* Ensure proper stacking */
  .hero::before, .hero-section::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }
}

/* Tablet Portrait (768px - 1024px) - Medium height */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero, .hero-section {
    min-height: 70vh !important;
    max-height: 80vh !important;
  }
  
  .hero h1, .hero-content h1, .hero-content h2 {
    font-size: clamp(2.5rem, 6vw, 3.5rem) !important;
  }
}

/* Desktop (1024px+) - Full height */
@media (min-width: 1025px) {
  .hero, .hero-section {
    min-height: 80vh !important;
    max-height: 90vh !important;
  }
  
  .hero h1, .hero-content h1, .hero-content h2 {
    font-size: clamp(3rem, 7vw, 4.5rem) !important;
  }
}

/* Slider Mobile Optimization */
@media (max-width: 768px) {
  .slider-section {
    margin-top: 0 !important;
    padding: 0 !important;
  }

  .slider {
    height: 60vh !important;
    min-height: 400px !important;
  }

  .slide-content {
    padding: 20px 16px !important;
    bottom: 0 !important;
  }

  .slide-content h2 {
    font-size: 2rem !important;
    margin-bottom: 12px !important;
  }

  .slide-content p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }

  .slider-controls {
    bottom: 20px !important;
    gap: 12px !important;
  }

  .prev-btn, .next-btn {
    width: 40px !important;
    height: 40px !important;
    font-size: 16px !important;
  }

  .slider-dots .dot {
    width: 8px !important;
    height: 8px !important;
    margin: 0 4px !important;
  }
}

/* Story Section Mobile */
@media (max-width: 768px) {
  .story-section {
    flex-direction: column !important;
    padding: 40px 16px !important;
    gap: 24px !important;
  }

  .story-text h2 {
    font-size: 2rem !important;
    text-align: center !important;
  }

  .story-text p {
    font-size: 1rem !important;
    text-align: center !important;
  }

  .story-image {
    height: 250px !important;
    order: -1 !important;
  }
}

/* Cards Mobile Optimization */
@media (max-width: 768px) {
  .cards-container {
    flex-direction: column !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .card {
    width: 100% !important;
    max-width: 320px !important;
    height: 300px !important;
    margin: 0 auto !important;
    background: transparent !important;
    background-color: transparent !important;
  }

  .flip-cards {
    padding: 40px 16px !important;
  }

  /* Ensure card backgrounds are correct on mobile */
  .card-front, .card-back {
    background: rgba(0, 0, 0, 0.8) !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
  }

  .flip-cards h2 {
    font-size: 2rem !important;
    margin-bottom: 32px !important;
  }
}

/* Footer Mobile */
@media (max-width: 768px) {
  .footer {
    padding: 30px 0 20px !important;
  }

  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 16px !important;
    text-align: center !important;
  }

  .footer-logo, .contact-info {
    text-align: center !important;
    padding: 0 !important;
  }

  .quick-links {
    border: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 20px 0 !important;
  }

  .social-icons {
    justify-content: center !important;
    gap: 20px !important;
  }

  .social-icons a {
    width: 44px !important;
    height: 44px !important;
    font-size: 1.2rem !important;
  }
}

/* Modal Mobile Optimization */
@media (max-width: 768px) {
  .modal-content {
    width: 95% !important;
    max-width: none !important;
    margin: 20px auto !important;
    padding: 20px !important;
    border-radius: 12px !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  #fresh-login-modal {
    width: 95% !important;
    max-width: 400px !important;
    margin: 20px auto !important;
    padding: 24px !important;
  }

  .auth-form input, .auth-form textarea {
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  .auth-form button {
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  .signup-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .floating-label {
    width: 100% !important;
  }
}

/* Chat Button Mobile */
@media (max-width: 768px) {
  #openChatBtn {
    bottom: 20px !important;
    right: 20px !important;
    width: 56px !important;
    height: 56px !important;
    font-size: 1.5rem !important;
  }

  #chatModal .modal-dialog {
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }

  #chatModal .modal-content {
    height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
}

/* Form Improvements */
@media (max-width: 768px) {
  .contact-main-section {
    padding: 80px 16px 40px !important;
  }

  .contact-container {
    flex-direction: column !important;
    gap: 32px !important;
  }

  .contact-globe {
    min-width: auto !important;
    order: 2 !important;
  }

  #globe-canvas {
    width: 280px !important;
    height: 280px !important;
  }

  .contact-cards {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    order: 1 !important;
  }

  .contact-card {
    max-width: none !important;
    height: 200px !important;
  }

  #contact-form input,
  #contact-form textarea {
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }

  #contact-form button {
    padding: 16px !important;
    font-size: 16px !important;
  }
}

/* Gallery Mobile */
@media (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 8px !important;
  }

  .gallery-item {
    height: 150px !important;
  }

  .gallery-item img {
    border-radius: 8px !important;
  }
}

/* Blog Mobile */
@media (max-width: 768px) {
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .blog-card {
    width: 100% !important;
    max-width: none !important;
  }

  .blog-card img {
    height: 200px !important;
  }

  .blog-card-content {
    padding: 16px !important;
  }

  .blog-card h3 {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
  }

  .blog-card p {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
}

/* Team Page Mobile */
@media (max-width: 768px) {
  .team-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .team-member {
    max-width: 280px !important;
    margin: 0 auto !important;
  }
}

/* Events Mobile */
@media (max-width: 768px) {
  .events-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 0 16px !important;
  }

  .event-card {
    width: 100% !important;
    max-width: none !important;
  }
}

/* Utility Classes for Mobile */
.mobile-only {
  display: none !important;
}

.desktop-only {
  display: block !important;
}

@media (max-width: 768px) {
  .mobile-only {
    display: block !important;
  }

  .desktop-only {
    display: none !important;
  }

  .mobile-center {
    text-align: center !important;
  }

  .mobile-full-width {
    width: 100% !important;
  }

  .mobile-padding {
    padding: var(--mobile-padding) !important;
  }

  .mobile-margin {
    margin: var(--mobile-margin) !important;
  }
}

/* Landscape Mobile Optimization */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: 100vh !important;
    padding: 60px 16px 20px !important;
  }

  .hero h1 {
    font-size: 2rem !important;
  }

  .slider {
    height: 80vh !important;
  }

  .nav-links {
    height: calc(100vh - 60px) !important;
    padding: 20px !important;
  }
}

/* Small Mobile (320px - 480px) */
@media (max-width: 480px) {
  :root {
    --mobile-padding: 12px;
    --mobile-margin: 8px;
  }

  .hero h1 {
    font-size: 2rem !important;
  }

  .hero p {
    font-size: 1rem !important;
  }

  .slide-content h2 {
    font-size: 1.5rem !important;
  }

  .slide-content p {
    font-size: 0.9rem !important;
  }

  .story-text h2 {
    font-size: 1.8rem !important;
  }

  .flip-cards h2 {
    font-size: 1.8rem !important;
  }

  .card {
    height: 280px !important;
  }

  #globe-canvas {
    width: 240px !important;
    height: 240px !important;
  }

  .contact-card {
    height: 180px !important;
  }
}

/* Tablet Portrait (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .navbar {
    padding: 1rem 3rem !important;
  }

  .hero h1 {
    font-size: 4rem !important;
  }

  .story-section {
    padding: 60px 4% !important;
  }

  .cards-container {
    gap: 24px !important;
  }

  .footer-content {
    padding: 0 4% !important;
  }
}

/* Large Tablet/Small Desktop (1024px - 1200px) */
@media (min-width: 1025px) and (max-width: 1200px) {
  .navbar {
    width: 95% !important;
  }

  .hero h1 {
    font-size: 4.5rem !important;
  }

  .story-section {
    padding: 70px 5% !important;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .logo img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .slider {
    transform: none !important;
  }

  .card-inner {
    transition: none !important;
  }

  .burger div {
    transition: none !important;
  }
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #ffffff;
    --dark-bg: #000000;
    --light-bg: #1a1a1a;
  }
}

/* Print Styles */
@media print {
  .navbar, .burger, #openChatBtn, .slider-controls, .modal {
    display: none !important;
  }

  body {
    background: #000000 !important;
    color: #ffffff !important;
  }

  .hero, .story-section, .flip-cards {
    background: rgba(0, 0, 0, 0.8) !important;
    color: #ffffff !important;
  }
}


/* About Club Section Mobile - FIXED VERSION */
@media (max-width: 768px) {
  .about-club {
    padding: 40px 16px !important;
    margin: 0 !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(10px) !important;
  }

  .about-club .container {
    display: flex !important;
    flex-direction: column !important;
    gap: 32px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .club-info {
    width: 100% !important;
    text-align: center !important;
    order: 1 !important;
    flex: none !important;
  }

  .club-info h2 {
    font-size: 2rem !important;
    margin-bottom: 20px !important;
    color: #ffffff !important;
    text-align: center !important;
  }

  .club-info p {
    font-size: 1rem !important;
    line-height: 1.6 !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
    text-align: center !important;
    max-width: 100% !important;
  }

  .club-logo {
    width: 100% !important;
    text-align: center !important;
    order: 2 !important;
    margin: 0 !important;
    flex: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }

  .club-logo img, .about-logo-img {
    max-width: 200px !important;
    width: 200px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .club-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 16px !important;
    margin-top: 24px !important;
    width: 100% !important;
  }

  .join-btn, .view-more-btn {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    border-radius: 25px !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.3s ease !important;
  }

  .join-btn {
    background: linear-gradient(45deg, #ff4d00, #ff6a2e) !important;
    color: white !important;
    border: none !important;
  }

  .view-more-btn {
    background: rgba(140, 112, 220, 0.8) !important;
    color: white !important;
    border: 1px solid rgba(140, 112, 220, 0.6) !important;
  }

  .join-btn:hover, .view-more-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(140, 112, 220, 0.4) !important;
  }
}

/* Memories Section Mobile */
@media (max-width: 768px) {
  .memories-section {
    padding: 40px 16px !important;
  }

  .memories-section h2 {
    font-size: 2rem !important;
    margin-bottom: 24px !important;
    text-align: center !important;
  }

  .wgh-slider {
    height: 300px !important;
  }

  .wgh-slider-item {
    padding: 0 8px !important;
  }

  .wgh-slider-item-figure__image {
    border-radius: 12px !important;
    max-height: 280px !important;
    object-fit: cover !important;
  }

  .memories-btn {
    margin: 32px auto 0 !important;
    display: block !important;
    max-width: 200px !important;
  }
}

/* Partners Section Mobile */
/* Using inline styles in mobile/index.php - old styles removed */

/* Terms and Conditions Modal Mobile */
@media (max-width: 768px) {
  .tc-modal {
    padding: 16px !important;
  }

  .tc-content {
    width: 100% !important;
    max-width: none !important;
    max-height: 85vh !important;
    padding: 24px 16px !important;
    border-radius: 16px !important;
  }

  .tc-content h2 {
    font-size: 1.5rem !important;
    margin-bottom: 16px !important;
  }

  .tc-content h3 {
    font-size: 1.2rem !important;
    margin-top: 20px !important;
    margin-bottom: 12px !important;
  }

  .tc-content p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  .tc-text {
    max-height: 50vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding-right: 8px !important;
  }

  .tc-buttons {
    flex-direction: column !important;
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .tc-buttons button {
    width: 100% !important;
    padding: 14px 24px !important;
    font-size: 16px !important;
    border-radius: 8px !important;
  }
}

/* Login/Signup Modal Mobile */
@media (max-width: 768px) {
  #fresh-login-modal-overlay {
    padding: 16px !important;
  }

  #fresh-login-modal {
    width: 100% !important;
    max-width: none !important;
    min-width: auto !important;
    padding: 24px 20px !important;
    margin: 0 !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #fresh-login-modal h2 {
    font-size: 1.8rem !important;
    margin-bottom: 20px !important;
  }

  .auth-form {
    gap: 16px !important;
  }

  .auth-form input,
  .auth-form textarea,
  .auth-form select {
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .auth-form button {
    padding: 16px !important;
    font-size: 16px !important;
    border-radius: 10px !important;
  }

  .signup-row {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .floating-label {
    width: 100% !important;
  }

  .switch-form {
    margin-top: 16px !important;
    font-size: 14px !important;
  }
}

/* PWA Install Modal Mobile */
@media (max-width: 768px) {
  .pwa-modal-content {
    width: calc(100% - 32px) !important;
    max-width: none !important;
    padding: 32px 20px !important;
    margin: 16px !important;
  }

  .pwa-modal-icon {
    font-size: 56px !important;
    margin-bottom: 16px !important;
  }

  .pwa-modal-content h2 {
    font-size: 1.8rem !important;
    margin-bottom: 12px !important;
  }

  .pwa-modal-content p {
    font-size: 15px !important;
    margin-bottom: 16px !important;
  }

  .pwa-features {
    margin: 20px 0 !important;
  }

  .pwa-features li {
    font-size: 15px !important;
    padding: 8px 0 !important;
  }

  .pwa-install-action {
    font-size: 17px !important;
    padding: 16px 32px !important;
  }

  .pwa-modal-later {
    font-size: 15px !important;
    padding: 12px 24px !important;
  }
}

/* Offline/Update Banners Mobile */
@media (max-width: 768px) {
  .offline-banner,
  .update-banner {
    padding: 12px 16px !important;
    font-size: 14px !important;
  }

  .offline-content,
  .update-content {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .retry-btn,
  .update-btn,
  .dismiss-btn {
    padding: 6px 12px !important;
    font-size: 13px !important;
  }
}

/* Improved Scrollbar for Mobile */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 6px !important;
    height: 6px !important;
  }

  ::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1) !important;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(140, 112, 220, 0.5) !important;
    border-radius: 3px !important;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(140, 112, 220, 0.7) !important;
  }
}

/* Loading States Mobile */
@media (max-width: 768px) {
  .loading-spinner {
    width: 40px !important;
    height: 40px !important;
    border-width: 3px !important;
  }

  .skeleton-loader {
    height: 200px !important;
    border-radius: 12px !important;
  }
}

/* Accessibility Improvements Mobile */
@media (max-width: 768px) {
  /* Focus visible for keyboard navigation */
  *:focus-visible {
    outline: 3px solid rgba(140, 112, 220, 0.8) !important;
    outline-offset: 2px !important;
  }

  /* Skip to content link */
  .skip-to-content {
    position: absolute !important;
    top: -40px !important;
    left: 0 !important;
    background: #8c70dc !important;
    color: white !important;
    padding: 12px 16px !important;
    text-decoration: none !important;
    z-index: 10001 !important;
    border-radius: 0 0 8px 0 !important;
  }

  .skip-to-content:focus {
    top: 0 !important;
  }
}

/* Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce motion for better performance */
  @media (prefers-reduced-motion: reduce) {
    * {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  /* GPU acceleration */
  .hero-video,
  .slider,
  .card,
  .nav-links,
  .modal {
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
  }

  /* Optimize images */
  img {
    image-rendering: -webkit-optimize-contrast !important;
    image-rendering: crisp-edges !important;
  }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari specific styles */
  body {
    -webkit-overflow-scrolling: touch !important;
  }

  input,
  textarea,
  select {
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  /* Fix for iOS input zoom */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  textarea {
    font-size: 16px !important;
  }

  /* Fix for iOS safe areas */
  @media (max-width: 768px) {
    body {
      padding-top: calc(60px + env(safe-area-inset-top)) !important;
      padding-bottom: env(safe-area-inset-bottom) !important;
    }

    .navbar {
      top: env(safe-area-inset-top) !important;
    }

    .nav-links {
      top: calc(60px + env(safe-area-inset-top)) !important;
      height: calc(100vh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
      padding-bottom: calc(40px + env(safe-area-inset-bottom)) !important;
    }
  }
}

/* Android Specific Fixes */
@media (max-width: 768px) {
  /* Fix for Android Chrome address bar */
  .hero,
  .hero-section {
    min-height: 100vh !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
  }
}

/* Landscape Mode Optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  body {
    padding-top: 50px !important;
  }

  .navbar {
    height: 50px !important;
    padding: 8px calc(16px + var(--safe-area-inset-left)) 8px calc(16px + var(--safe-area-inset-right)) !important;
  }

  .logo img {
    height: 35px !important;
  }

  .nav-links {
    top: 50px !important;
    height: calc(100vh - 50px) !important;
    padding: 20px !important;
  }

  .hero,
  .hero-section {
    min-height: 100vh !important;
    padding: 70px 16px 40px !important;
  }

  .hero h1,
  .hero-content h2 {
    font-size: 2rem !important;
  }

  .hero p,
  .hero-content p {
    font-size: 1rem !important;
  }
}

/* Very Small Screens (< 360px) */
@media (max-width: 360px) {
  :root {
    --mobile-padding: 12px;
    --mobile-margin: 8px;
  }

  .navbar {
    padding: 10px 12px !important;
  }

  .logo img {
    height: 35px !important;
  }

  .hero h1,
  .hero-content h2 {
    font-size: 2rem !important;
  }

  .hero p,
  .hero-content p {
    font-size: 1rem !important;
  }

  .nav-links a,
  .nav-links button.login-btn {
    font-size: 16px !important;
    padding: 14px 20px !important;
  }

  .pwa-modal-content {
    padding: 24px 16px !important;
  }

  .pwa-modal-content h2 {
    font-size: 1.5rem !important;
  }
}

/* Large Mobile Devices (> 600px) */
@media (min-width: 600px) and (max-width: 768px) {
  .nav-links li {
    max-width: 400px !important;
  }

  .hero h1,
  .hero-content h2 {
    font-size: 3rem !important;
  }

  .partners-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* Additional Mobile Menu Fixes */
@media (max-width: 768px) {
  /* Ensure burger menu is always visible on mobile */
  .burger {
    display: flex !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  /* Hide burger on desktop */
  @media (min-width: 769px) {
    .burger {
      display: none !important;
    }
  }

  /* Ensure nav-links are properly hidden by default on mobile */
  .nav-links {
    display: flex !important;
  }

  /* Override any desktop styles that might interfere */
  .navbar.compact .nav-links,
  .navbar.collapsed .nav-links {
    position: fixed !important;
    top: calc(60px + var(--safe-area-inset-top)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(100vh - 60px - var(--safe-area-inset-top) - var(--safe-area-inset-bottom)) !important;
    background: rgba(0, 0, 0, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 40px 20px !important;
    gap: 16px !important;
    transform: translateX(-100%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    overflow-y: auto !important;
    list-style: none !important;
    margin: 0 !important;
    z-index: 9998 !important;
  }

  /* Force burger visibility in all navbar states */
  .navbar.compact .burger,
  .navbar.collapsed .burger,
  .navbar.expanded .burger {
    display: flex !important;
    position: relative !important;
    z-index: 10001 !important;
  }

  /* Ensure proper mobile layout */
  .navbar * {
    box-sizing: border-box !important;
  }

  /* Debug styles - remove after testing */
  .burger {
    border: 2px solid red !important; /* REMOVE THIS AFTER TESTING */
  }

  .nav-links.nav-active {
    border: 2px solid green !important; /* REMOVE THIS AFTER TESTING */
  }
}

/* Force mobile styles to override desktop dynamic island */
@media (max-width: 768px) {
  .navbar,
  .navbar.compact,
  .navbar.collapsed,
  .navbar.expanded {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    transform: none !important;
    border-radius: 0 !important;
    padding: 12px 16px !important;
    height: 60px !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid rgba(140, 112, 220, 0.2) !important;
    margin: 0 !important;
  }
}