/* ====================================================================
   iOS SPECIFIC FIXES - IPHONE SE AND SMALL SCREEN SUPPORT
   Critical fixes for iPhone SE (375px width) and similar devices
   ==================================================================== */

/* GENERAL MOBILE ROADMAP FIXES - ALL PHONES */
@media only screen and (max-width: 768px) {
  
  /* SIMPLE MOBILE NAVIGATION - HIDE LOGO, SHIFT ICONS LEFT */
  .nav-logo {
    display: none !important;
  }
  
  .nav-menu {
    display: none !important;
  }
  
  .nav-container {
    justify-content: flex-start !important;
    padding-left: 20px !important;
  }
  
  .nav-social {
    margin-left: 10px !important;
    display: flex !important;
    gap: 20px !important;
  }
  
  /* Fix roadmap section for ALL mobile devices */
  .roadmap-section {
    padding: 60px 15px !important;
  }
  
  .roadmap-timeline {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    max-width: 100% !important;
  }
  
  .timeline-item {
    display: block !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    position: relative !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }
  
  .timeline-content {
    padding: 24px 20px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(74, 144, 226, 0.4) !important;
    border-radius: 16px !important;
    text-align: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  .timeline-marker {
    position: relative !important;
    margin: 0 auto 20px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
  }
  
  .timeline-line {
    display: none !important;
  }
  
  .timeline-title {
    font-size: 1.4rem !important;
    margin-bottom: 12px !important;
  }
  
  .timeline-description {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 16px !important;
  }
  
  .timeline-features {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  
  .feature-item {
    font-size: 0.8rem !important;
    padding: 4px 8px !important;
  }
  
  .content-header {
    margin-bottom: 16px !important;
  }
  
  .phase-number {
    font-size: 40px !important;
  }
  
  /* Force all timeline items to be in a single column */
  .timeline-item:nth-child(odd),
  .timeline-item:nth-child(even) {
    display: block !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center !important;
  }
  
  .timeline-item:nth-child(odd) .timeline-content,
  .timeline-item:nth-child(even) .timeline-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    text-align: center !important;
  }
}

/* iPhone SE specific viewport fixes */
@supports (-webkit-touch-callout: none) {
  /* Only target iOS devices */
  
  /* Force mobile navigation to work on iOS */
  .nav-toggle {
    display: flex !important;
    position: fixed !important;
    top: env(safe-area-inset-top, 20px) !important;
    right: 20px !important;
    z-index: 100000 !important;
    width: 40px !important;
    height: 40px !important;
    background: rgba(0, 0, 0, 0.8) !important;
    border-radius: 8px !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 4px !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .nav-toggle span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    background: #ffffff !important;
    transition: all 0.3s ease !important;
    border-radius: 1px !important;
  }
  
  .nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px) !important;
  }
  
  .nav-toggle.active span:nth-child(2) {
    opacity: 0 !important;
  }
  
  .nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px) !important;
  }
  
  /* Force nav menu to work on iOS */
  .nav-menu {
    position: fixed !important;
    top: 0 !important;
    left: -100% !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important; /* Dynamic viewport height for iOS */
    background: rgba(0, 20, 40, 0.98) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    backdrop-filter: blur(20px) !important;
    transition: left 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    z-index: 99999 !important;
    padding: calc(env(safe-area-inset-top, 0px) + 80px) 30px 30px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: center !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .nav-menu.active {
    left: 0 !important;
  }
  
  .nav-menu .nav-link {
    display: block !important;
    width: 100% !important;
    padding: 20px 0 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 1.4rem !important;
    font-weight: 500 !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    transition: all 0.3s ease !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }
  
  .nav-menu .nav-link:hover,
  .nav-menu .nav-link:active {
    color: var(--primary-color, #0096ff) !important;
    background: rgba(255, 255, 255, 0.05) !important;
  }
}

/* iPhone SE and small screens (320px - 414px) */
@media only screen and (max-width: 414px) and (-webkit-min-device-pixel-ratio: 2) {
  
  /* Simple mobile navigation for small screens */
  .nav-logo {
    display: none !important;
  }
  
  .nav-menu {
    display: none !important;
  }
  
  .nav-container {
    justify-content: flex-start !important;
    padding: 0 15px !important;
  }
  
  .nav-social {
    margin-left: 10px !important;
    display: flex !important;
    gap: 15px !important;
  }
  
  .social-icon {
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Disable problematic typewriter text completely */
  .typewriter-text,
  .typewriter-text::before,
  .typewriter-text::after,
  #typewriter-content,
  .typewriter-container {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }
  
  /* Force step numbers to be visible in How to Buy */
  .step-number {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    top: -20px !important;
    left: 20px !important;
    background: linear-gradient(135deg, #0096ff, #00d4ff) !important;
    color: #ffffff !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 1.2rem !important;
    box-shadow: 0 6px 20px rgba(0, 150, 255, 0.4) !important;
    z-index: 100 !important;
    border: 3px solid rgba(255, 255, 255, 0.2) !important;
  }
  
  /* Fix buy steps layout */
  .buy-steps-grid {
    display: block !important;
    padding: 0 15px !important;
    gap: 0 !important;
  }
  
  .buy-step {
    display: block !important;
    position: relative !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 40px 20px 25px !important;
    margin-bottom: 40px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  /* Fix Philosophy section */
  .about-grid {
    display: block !important;
    padding: 0 15px !important;
  }
  
  .about-card {
    display: block !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 25px !important;
    margin-bottom: 25px !important;
    text-align: center !important;
  }
  
  /* Fix KOLs section for horizontal scroll */
  .kols-grid {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    gap: 20px !important;
    padding: 0 15px 20px !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .kol-card {
    flex: 0 0 280px !important;
    scroll-snap-align: center !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }
  
  /* Hide scrollbars */
  .kols-grid::-webkit-scrollbar {
    display: none !important;
  }
  
  /* Force container sizes */
  .container {
    max-width: 100% !important;
    padding: 0 15px !important;
    overflow-x: hidden !important;
  }
  
  /* Fix hero section */
  .hero-content {
    padding: 30px 15px !important;
    text-align: center !important;
  }
  
  .hero-title {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    margin-bottom: 20px !important;
  }
  
  .hero-subtitle {
    font-size: clamp(0.9rem, 4vw, 1.1rem) !important;
    margin-bottom: 25px !important;
  }
  
  .hero-buttons {
    flex-direction: column !important;
    gap: 15px !important;
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto !important;
  }
  
  .btn {
    width: 100% !important;
    padding: 15px 20px !important;
    font-size: 1rem !important;
  }
  
  /* Fix section spacing */
  .section {
    padding: 50px 0 !important;
  }
  
  .section-title {
    font-size: clamp(1.6rem, 6vw, 2.2rem) !important;
    margin-bottom: 15px !important;
  }
  
  .section-subtitle {
    font-size: clamp(0.9rem, 4vw, 1rem) !important;
    margin-bottom: 30px !important;
  }
  
  /* Fix roadmap section for small screens */
  .roadmap-section {
    padding: 50px 0 !important;
  }
  
  .roadmap-timeline {
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
  }
  
  .timeline-item {
    margin-bottom: 35px !important;
    width: 100% !important;
  }
  
  .timeline-content {
    padding: 20px 15px !important;
    margin: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(74, 144, 226, 0.4) !important;
    border-radius: 12px !important;
    text-align: center !important;
  }
  
  .timeline-title {
    font-size: 1.3rem !important;
    margin-bottom: 10px !important;
  }
  
  .timeline-description {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
  }
  
  .timeline-features {
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  
  .feature-item {
    font-size: 0.75rem !important;
    padding: 3px 6px !important;
  }
}

/* Ultra-specific iPhone SE (375px) fixes */
@media only screen and (max-width: 375px) and (-webkit-min-device-pixel-ratio: 2) {
  
  /* Ultra-compact navigation for iPhone SE */
  .nav-social {
    gap: 12px !important;
  }
  
  .social-icon {
    width: 36px !important;
    height: 36px !important;
  }
  
  .step-number {
    width: 45px !important;
    height: 45px !important;
    font-size: 1.1rem !important;
    top: -18px !important;
  }
  
  .buy-step {
    padding: 35px 15px 20px !important;
  }
  
  .kol-card {
    flex: 0 0 260px !important;
  }
  
  .container {
    padding: 0 10px !important;
  }
  
  .kols-grid {
    padding: 0 10px 20px !important;
  }
  
  .buy-steps-grid,
  .about-grid {
    padding: 0 10px !important;
  }
  
  /* Ultra-specific roadmap fixes for iPhone SE */
  .roadmap-section {
    padding: 40px 0 !important;
  }
  
  .timeline-content {
    padding: 18px 12px !important;
    border-radius: 10px !important;
  }
  
  .timeline-title {
    font-size: 1.2rem !important;
    margin-bottom: 8px !important;
  }
  
  .timeline-description {
    font-size: 0.8rem !important;
    line-height: 1.3 !important;
  }
  
  .timeline-marker {
    margin-bottom: 15px !important;
  }
  
  .phase-number {
    font-size: 28px !important;
  }
}

/* Force refresh on iOS Safari */
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
  body {
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
  }
  
  * {
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
  }
}