/* Mobile Landing Page Critical Fixes */

/* Ensure this file is loaded by adding !important to selector */
html[data-mobile-view="true"] {
  /* This attribute will be added via JS */
}

/* Enforce mobile styling with higher specificity */
@media only screen and (max-width: 768px) {
  /* Improved hero section with stronger styles */
  .landing-hero {
    background: linear-gradient(135deg, #166534 0%, #18a558 50%, #10b981 100%) !important;
    padding: 2rem 1.5rem !important;
    min-height: 60vh !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
  }
  
  /* Enhanced typography */
  .landing-hero h1 {
    font-size: 2.25rem !important;
    line-height: 1.2 !important;
    margin-bottom: 1rem !important;
    color: white !important;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
  }
  
  .landing-hero p {
    font-size: 1.125rem !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,0.9) !important;
    margin-bottom: 2rem !important;
  }
  
  /* Feature highlights */
  .feature-item {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 1.25rem !important;
    background-color: rgba(255,255,255,0.1) !important;
    padding: 0.75rem 1rem !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  }
  
  .feature-item-icon {
    background-color: rgba(255,255,255,0.2) !important;
    padding: 0.5rem !important;
    border-radius: 50% !important;
    margin-right: 1rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Input and form elements */
  .invite-input {
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    padding: 0 1rem !important;
    border: 2px solid rgba(0,0,0,0.1) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05) !important;
  }
  
  .verify-button {
    height: 44px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: 0 1rem !important;
    background-color: #166534 !important;
    color: white !important;
    font-weight: 500 !important;
  }
  
  /* Form section */
  .form-section {
    padding: 1.5rem !important;
    background-color: white !important;
  }
  
  .form-heading {
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
  }
  
  /* Invite box */
  .invite-notice {
    background-color: #fef3c7 !important;
    border: 1px solid #fcd34d !important;
    padding: 1rem !important;
    border-radius: 12px !important;
    margin-bottom: 1.5rem !important;
  }
  
  .invite-notice h3 {
    color: #92400e !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
  }
  
  .invite-notice p {
    color: #92400e !important;
    font-size: 0.875rem !important;
  }
  
  /* Glass effect */
  .glass-overlay {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background-color: rgba(255,255,255,0.7) !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
  }
  
  /* Action buttons */
  .action-button {
    height: 50px !important;
    border-radius: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    width: 100% !important;
    margin-bottom: 1rem !important;
    transition: all 0.2s ease !important;
  }
  
  .action-button.primary {
    background-color: #166534 !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(22, 101, 52, 0.25) !important;
  }
  
  .action-button.secondary {
    background-color: white !important;
    color: #166534 !important;
    border: 2px solid #166534 !important;
  }
}