/* Mobile-Specific Styles and Responsive Overrides */

/* Touch Target Accessibility - Mobile */
@media (max-width: 768px) {
  /* Ensure all buttons meet minimum 44px touch target */
  button, 
  input[type="submit"], 
  .mobile-menu-link {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Form inputs should be easier to tap on mobile */
  input[type="email"], 
  input[type="tel"] {
    min-height: 44px;
    padding: 0.75rem 0;
  }
  
  /* Video overlay should be easily tappable */
  #video-overlay {
    cursor: pointer;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10 !important; /* Above video but below navigation */
  }
  
  /* Video Component - Mobile Optimizations */
  #hero-video {
    width: 100% !important;
    height: 100dvh !important; /* Modern browsers with dynamic viewport units */
    height: calc(var(--vh, 1vh) * 100) !important; /* Fallback for older browsers */
    object-fit: cover !important;
  }
  
  /* Video container positioning for mobile */
  #hero .video-container {
    position: relative !important;
    overflow: hidden !important;
  }
  
  /* Hide desktop dual videos on mobile */
  .desktop-video {
    display: none !important;
  }
  
  /* Show mobile video with performance optimizations */
  .mobile-video {
    display: block !important;
    transition: opacity 0.3s ease !important; /* Smooth opacity transitions */
  }
  
  /* Mobile video optimizations */
  .mobile-video {
    background: white; /* White background to prevent flicker */
    position: absolute !important; /* Lock position to prevent shifts */
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important; /* Prevent any transform changes */
    margin: 0 !important;
    padding: 0 !important;
  }
  
  /* Mobile Fallback Image Optimizations */
  .mobile-fallback {
    height: 100dvh !important; /* Use dynamic viewport units */
    height: calc(var(--vh, 1vh) * 100) !important; /* Fallback for older browsers */
  }
  
  .mobile-fallback > img {
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    object-fit: cover !important;
  }
  
  .mobile-fallback .fallback-overlay {
    height: 100dvh !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    padding: 1rem !important;
  }
  
  /* Ensure mobile fallback elements are properly sized for small screens */
  .mobile-fallback .fallback-overlay img {
    margin-bottom: 1rem !important;
  }
  
  .mobile-fallback .fallback-overlay h2 {
    font-size: 1.125rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.75rem !important;
  }
  
  .mobile-fallback .fallback-overlay p {
    font-size: 0.875rem !important;
    margin-bottom: 1rem !important;
  }
  
  .mobile-fallback .fallback-overlay a {
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    min-height: 44px !important; /* Ensure touch target accessibility */
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* Mobile-Only: Clean Vertical Layout - FORCED OVERRIDE */
@media (max-width: 768px) {
  .bubble-circle-container {
    width: 100% !important;
    max-width: 400px !important;
    margin: -2rem auto 0 !important;
    display: block !important; /* Use block instead of flex */
    aspect-ratio: unset !important;
    overflow: visible !important;
    padding: 2rem 0 !important;
  }
  
  .bubble-circle-center {
    width: clamp(14rem, 18vw, 18rem) !important;
    height: clamp(14rem, 18vw, 18rem) !important;
    display: block !important;
    margin: 2rem auto !important;
    text-align: center !important;
    position: relative !important;
  }
  
  .bubble-circle-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(2rem, 3vw, 2.5rem) !important;
    height: clamp(2rem, 3vw, 2.5rem) !important;
    z-index: 3 !important;
  }
  
  /* Hide all bubbles by default on mobile */
  .bubble {
    display: none;
  }
  
  /* Show only the first bubble (top) - FORCED BLOCK LAYOUT */
  .bubble:nth-child(1) {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 0 auto 4rem auto !important; /* Center and add large bottom margin */
    padding: 0.6rem 1.2rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
  }
  
  /* Show only the fourth bubble (bottom) - FORCED BLOCK LAYOUT */
  .bubble:nth-child(4) {
    display: block !important;
    position: static !important;
    transform: none !important;
    width: auto !important;
    max-width: 320px !important;
    margin: 4rem auto 0 auto !important; /* Center and add large top margin */
    padding: 0.6rem 1.2rem !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    text-align: center !important;
  }
  
  .bubble:nth-child(1) p,
  .bubble:nth-child(4) p {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    text-align: center !important;
  }
  
  /* Override all bubble text on mobile - both desktop bubbles and mobile bubbles */
  .bubble p,
  .mobile-bubble p {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }
}

/* Header Text Responsive Control */
.mobile-header-text {
  display: none;
}

.desktop-header-text {
  display: inline;
}

@media (max-width: 768px) {
  .mobile-header-text {
    display: inline !important;
  }
  
  .desktop-header-text {
    display: none !important;
  }
  
  /* Make security text smaller on mobile */
  #text .text-primary {
    font-size: 1.875rem !important; /* text-3xl */
    line-height: 1.3 !important;
  }
  
  /* Make card subtexts larger on mobile */
  .text-white\/80.text-sm {
    font-size: 1.125rem !important; /* text-lg - larger for mobile readability */
    line-height: 1.4 !important;
  }
  
  /* Make how-reev-works hero subtext 30% smaller on mobile */
  #hero-subtext {
    font-size: 1.25rem !important; /* 30% smaller than text-2xl (1.5rem * 0.7 ≈ 1.25rem) */
    line-height: 1.3 !important;
  }
  
  /* Footer mobile adaptations */
  footer img[alt="Reev"] {
    height: 5rem !important; /* h-20 - smaller than desktop h-28 for mobile */
  }
  
  /* Adjust tagline positioning on mobile */
  footer .absolute.inset-x-0.bottom-0 {
    font-size: 0.75rem !important; /* text-xs - smaller on mobile */
    bottom: -0.25rem !important; /* Adjust positioning for smaller logo */
  }
  
  /* Company name stays readable on mobile */
  footer .text-gray-500 {
    font-size: 0.625rem !important; /* Even smaller for mobile footer */
  }
  
  /* Form validation popup mobile adaptations */
  .popup-container {
    padding: 1.5rem 1.25rem !important; /* Smaller padding on mobile */
    max-width: 350px !important; /* Smaller max width for mobile */
    width: 95% !important; /* More width usage on mobile */
  }
  
  .popup-container h3 {
    font-size: 1.25rem !important; /* text-xl - smaller heading on mobile */
    line-height: 1.3 !important;
  }
  
  .popup-container p {
    font-size: 0.875rem !important; /* text-sm - smaller message text on mobile */
    line-height: 1.4 !important;
  }
  
  /* Ensure footer navigation links remain tappable */
  footer a {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
  }
  
  /* Ensure modal close button is tappable */
  .modal-close, .coming-soon-modal-close {
    min-height: 44px !important;
    min-width: 44px !important;
  }
  
  /* Hide the entire SVG container with blue squares in mobile step cards */
  .mobile-steps-container .flex-shrink-0.w-12.h-12 {
    display: none !important;
  }
  
  /* Increase gap between mobile step cards */
  .mobile-steps-container .mb-6 {
    margin-bottom: 3rem !important; /* Increased to 3rem for more spacing */
  }
  
  /* Make form labels and inputs bigger on mobile */
  #join label {
    font-size: 1.125rem !important; /* text-lg */
  }
  
  #join input {
    font-size: 1.125rem !important; /* text-lg */
    padding-bottom: 0.75rem !important; /* More padding for larger text */
  }
  
  #join input::placeholder {
    font-size: 1.125rem !important; /* text-lg */
  }
}

/* Mobile-Only: Clean Bubble Stack Layout */
.mobile-bubble-stack {
  display: none; /* Hidden by default (desktop) */
}

@media (max-width: 768px) {
  /* Hide desktop bubble structure on mobile */
  .bubble-circle-container {
    display: none !important;
  }
  
  /* Show mobile bubble stack */
  .mobile-bubble-stack {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
    padding: 2rem 0 !important;
  }
  
  .mobile-bubble {
    background: var(--light-blue-bg) !important;
    border: 1px solid rgba(8, 75, 163, 0.1) !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
    padding: 0.6rem 1.2rem !important;
    max-width: 320px !important;
    width: auto !important;
    text-align: center !important;
  }
  
  .mobile-bubble-top {
    transform: translateX(-2.5rem) !important;
    margin-bottom: -1.5rem !important;
  }
  
  .mobile-bubble-bottom {
    transform: translateX(2.5rem) !important;
    margin-top: -1.5rem !important;
  }
  
  .mobile-bubble p {
    margin: 0 !important;
    font-family: 'DM Sans', sans-serif !important;
    font-style: italic !important;
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
    color: #4b5563 !important;
  }
  
  .mobile-circle-container {
    position: relative !important;
    width: clamp(14rem, 18vw, 18rem) !important;
    height: clamp(14rem, 18vw, 18rem) !important;
  }
  
  .mobile-circle-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  
  .mobile-circle-icon {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: clamp(2rem, 3vw, 2.5rem) !important;
    height: clamp(2rem, 3vw, 2.5rem) !important;
    z-index: 3 !important;
  }
}

@media (max-width: 480px) {
  /* Smaller mobile adjustments for new mobile stack */
  .mobile-bubble-stack {
    gap: 2rem !important;
    max-width: 320px !important;
  }
  
  .mobile-bubble {
    max-width: 280px !important;
    padding: 0.5rem 1rem !important;
  }
  
  .mobile-bubble p {
    font-size: 1.125rem !important;
    line-height: 1.4 !important;
  }
  
  .mobile-circle-container {
    width: clamp(12rem, 16vw, 16rem) !important;
    height: clamp(12rem, 16vw, 16rem) !important;
  }
  
  .bubble-circle-center {
    width: clamp(12rem, 16vw, 16rem);
    height: clamp(12rem, 16vw, 16rem);
  }
  
  .bubble:nth-child(1) {
    padding: 0.5rem 1rem;
    max-width: 280px;
    margin: 0; /* Let container gap handle spacing */
  }
  
  .bubble:nth-child(4) {
    padding: 0.5rem 1rem;
    max-width: 280px;
    margin: 0; /* Let container gap handle spacing */
  }
  
  .bubble:nth-child(1) p,
  .bubble:nth-child(4) p {
    font-size: 1.125rem;
    line-height: 1.4;
  }
}

/* Mobile responsive behavior for curve container */
@media (max-width: 768px) {
  #curve-container {
    min-height: 300px !important;
    padding-bottom: 2rem !important;
  }
  
  #curve-container .absolute {
    top: 16px !important;
    left: -20% !important;
    width: 140% !important;
    height: 250px !important;
  }
  
  /* Scale down cards and markers on mobile */
  #markers-container .absolute {
    width: 1.5rem !important;
    height: 1.5rem !important;
    font-size: 0.75rem !important;
  }
  
  #cards-container .absolute {
    max-width: 180px !important;
    padding: 0.75rem !important;
  }
  
  #cards-container h3 {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  
  #cards-container p {
    font-size: 0.75rem !important;
  }
}

/* Mobile Steps Container */
@media (max-width: 1024px) {
  #curve-container {
    display: none !important;
  }
  
  .mobile-steps-container {
    display: block !important;
  }
}

/* Waitlist Mobile Styles */
@media (max-width: 768px) {
  /* Make waitlist form labels and inputs bigger on mobile */
  .waitlist-page .form-label {
    font-size: 1.25rem !important; /* text-xl - bigger than contact form */
  }
  
  .waitlist-page .form-input {
    font-size: 1.25rem !important; /* text-xl - bigger than contact form */
    padding-bottom: 0.875rem !important; /* More padding for larger text */
  }
  
  .waitlist-page .form-input::placeholder {
    font-size: 1.25rem !important; /* text-xl - bigger than contact form */
  }
  
  .waitlist-page .contact-heading {
    font-size: 2.25rem !important; /* text-4xl - make heading bigger too */
    white-space: normal !important; /* Allow text wrapping on mobile */
    line-height: 1.2 !important; /* Tighter line height for wrapped text */
  }
  
  .waitlist-page .btn-outline-blue {
    font-size: 1.125rem !important; /* text-lg - make button text bigger */
    padding: 0.875rem 3rem !important; /* More padding */
  }
  
  /* Reduce top padding/margin for waitlist page */
  .waitlist-page main {
    padding-top: 0 !important; /* No top padding */
    margin-top: -3rem !important; /* Pull content much closer to nav */
  }
  
  .waitlist-page .contact-form-container {
    padding: 2rem 2rem 4rem 2rem !important; /* Increased bottom padding from 2rem to 4rem */
    align-items: flex-start !important; /* Align to top instead of center */
    justify-content: flex-start !important; /* Align to start */
    min-height: auto !important; /* Remove min-height constraint */
  }
  
  /* Target inner container */
  .waitlist-page .contact-form-container > div {
    margin-top: 0 !important; /* No top margin on inner container */
  }
  
  /* Reduce space above heading */
  .waitlist-page .contact-heading {
    margin-top: 0 !important; /* No top margin */
    margin-bottom: 1.5rem !important; /* Override mb-6 sm:mb-8 classes */
  }
  
  /* Reduce navigation height on mobile for waitlist page */
  .waitlist-page #navigation-container {
    min-height: 80px !important; /* Smaller nav height */
  }
}

/* Contact Page Mobile Styles */
@media (max-width: 768px) {
  /* Make contact form labels and inputs bigger on mobile */
  .contact-page .form-label {
    font-size: 1.25rem !important; /* text-xl */
  }
  
  .contact-page .form-input {
    font-size: 1.25rem !important; /* text-xl */
    padding-bottom: 0.875rem !important; /* More padding for larger text */
  }
  
  .contact-page .form-input::placeholder {
    font-size: 1.25rem !important; /* text-xl */
  }
  
  .contact-page .contact-heading {
    font-size: 2.25rem !important; /* text-4xl - make heading bigger */
    white-space: normal !important; /* Allow text wrapping on mobile */
    line-height: 1.2 !important; /* Tighter line height for wrapped text */
  }
  
  /* Force "from you" to appear on second line on mobile */
  @media (max-width: 639px) {
    .contact-page .mobile-break {
      display: block !important; /* Force the span to break to a new line */
    }
  }
  
  .contact-page .btn-outline-blue {
    font-size: 1.125rem !important; /* text-lg - make button text bigger */
    padding: 0.875rem 3rem !important; /* More padding */
  }
  
  /* Make textarea larger too */
  .contact-page textarea.form-input {
    font-size: 1.25rem !important; /* text-xl */
    padding-top: 0.875rem !important; /* More padding for larger text */
  }
  
  /* Reduce top padding/margin for contact page */
  .contact-page main {
    padding-top: 0 !important; /* No top padding */
    margin-top: -3rem !important; /* Pull content much closer to nav */
  }
  
  .contact-page .contact-form-container {
    padding: 2rem 2rem 6rem 2rem !important; /* More bottom padding to prevent button clipping */
    align-items: flex-start !important; /* Align to top instead of center */
    justify-content: flex-start !important; /* Align to start */
    min-height: auto !important; /* Remove min-height constraint */
  }
  
  /* Target inner container */
  .contact-page .contact-form-container > div {
    margin-top: 0 !important; /* No top margin on inner container */
  }
  
  /* Reduce space above heading */
  .contact-page .contact-heading {
    margin-top: 0 !important; /* No top margin */
    margin-bottom: 1.5rem !important; /* Override mb-6 sm:mb-8 classes */
  }
  
  /* Reduce navigation height on mobile for contact page */
  .contact-page #navigation-container {
    min-height: 80px !important; /* Smaller nav height */
  }
}