/* ZAILARK Responsive Design Fixes */

/* Registration Forms Mobile Optimization */
@media (max-width: 768px) {
  .main-content {
    margin-left: 60px !important;
    padding: 1rem !important;
  }
  
  .form-container {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 1rem !important;
  }
  
  .form-step {
    padding: 1.5rem 1rem !important;
  }
  
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .step-indicator {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  
  .step-item {
    min-width: auto !important;
    flex: 1 !important;
  }
}

@media (max-width: 480px) {
  .main-content {
    margin-left: 50px !important;
    padding: 0.5rem !important;
  }
  
  .form-container {
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  
  .form-header h2 {
    font-size: 1.5rem !important;
  }
  
  .btn {
    width: 100% !important;
    margin: 0.25rem 0 !important;
  }
  
  .form-navigation {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }
  
  .form-navigation .btn {
    width: 100% !important;
  }
}

/* Support Page Mobile Fixes */
@media (max-width: 768px) {
  .support-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
  
  .support-card {
    margin: 0 1rem !important;
  }
  
  .cta-buttons {
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .cta-buttons .btn {
    width: 100% !important;
  }
}

/* Contact Form Mobile Optimization */
@media (max-width: 768px) {
  .contact-form {
    padding: 1rem !important;
  }
  
  .contact-info {
    padding: 1rem !important;
    text-align: center !important;
  }
}

/* Navigation Mobile Improvements */
@media (max-width: 768px) {
  .sidebar-nav a span {
    display: none !important;
  }
  
  .sidebar-nav a {
    justify-content: center !important;
    padding: 1rem 0 !important;
  }
}

/* Hero Section Mobile Fixes */
@media (max-width: 768px) {
  .hero {
    padding: 4rem 1rem 2rem !important;
  }
  
  .hero h1 {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }
  
  .hero p {
    font-size: 1rem !important;
  }
}

/* Footer Mobile Optimization */
@media (max-width: 768px) {
  .footer-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    text-align: center !important;
  }
  
  .footer-section {
    margin-bottom: 1.5rem !important;
  }
}

/* Table Responsiveness */
@media (max-width: 768px) {
  table {
    font-size: 0.875rem !important;
  }
  
  th, td {
    padding: 0.5rem !important;
  }
}

/* Image Responsiveness */
@media (max-width: 768px) {
  img {
    max-width: 100% !important;
    height: auto !important;
  }
  
  .hero-image, .feature-image {
    margin: 1rem 0 !important;
  }
}

/* Register Page Mobile Fixes */
@media (max-width: 768px) {
  .registration-types {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
    padding: 1rem !important;
  }
  
  .registration-card {
    margin: 0 !important;
    padding: 1.5rem !important;
    text-align: center !important;
  }
  
  .registration-icon {
    margin: 0 auto 1rem !important;
    width: 60px !important;
    height: 60px !important;
  }
  
  .registration-benefits ul {
    text-align: left !important;
    padding-left: 1rem !important;
  }
  
  .registration-benefits li {
    margin-bottom: 0.5rem !important;
    font-size: 0.9rem !important;
  }
  
  .btn-large {
    width: 100% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
  }
  
  .hero-content h1 {
    font-size: 2rem !important;
  }
  
  .hero-content p {
    font-size: 1rem !important;
    margin: 1rem 0 !important;
  }
}

@media (max-width: 480px) {
  .registration-card {
    padding: 1rem !important;
  }
  
  .registration-card h3 {
    font-size: 1.25rem !important;
  }
  
  .registration-description {
    font-size: 0.9rem !important;
    line-height: 1.4 !important;
  }
  
  .registration-benefits h4 {
    font-size: 1rem !important;
  }
  
  .btn-large {
    font-size: 0.9rem !important;
    padding: 0.75rem !important;
  }
}

/* Contact Page Mobile Fixes */
@media (max-width: 768px) {
  .contact-header {
    padding: 4rem 1rem !important;
  }
  
  .contact-header h1 {
    font-size: 2rem !important;
  }
  
  .contact-header p {
    font-size: 1rem !important;
  }
  
  /* Contact grid to single column */
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  /* Contact form mobile optimization */
  .contact-form {
    padding: 1.5rem !important;
  }
  
  /* Contact info mobile optimization */
  div[style*="background: white"][style*="border-radius: 12px"] {
    padding: 1.5rem !important;
    margin: 0 !important;
  }
}

@media (max-width: 480px) {
  .contact-header {
    padding: 3rem 0.5rem !important;
  }
  
  .contact-header h1 {
    font-size: 1.75rem !important;
  }
  
  div[style*="grid-template-columns: 1fr 1fr"] {
    padding: 0 0.5rem !important;
  }
  
  .contact-form {
    padding: 1rem !important;
  }
  
  div[style*="background: white"][style*="border-radius: 12px"] {
    padding: 1rem !important;
  }
}

/* Index Page Mobile Fixes */
@media (max-width: 768px) {
  .hero {
    padding: 4rem 1rem 2rem !important;
  }
  
  .hero-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
  }
  
  .hero h1 {
    font-size: 2.5rem !important;
    line-height: 1.2 !important;
  }
  
  .hero .subtitle {
    font-size: 1.1rem !important;
  }
  
  .cta-buttons {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: center !important;
  }
  
  .cta-buttons .btn {
    width: 100% !important;
    max-width: 300px !important;
  }
  
  .features-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .feature-card {
    text-align: center !important;
    padding: 2rem 1rem !important;
  }
}

/* About Page Mobile Fixes */
@media (max-width: 768px) {
  .about-hero {
    padding: 4rem 1rem !important;
  }
  
  .about-content {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1rem !important;
  }
}

/* Services Page Mobile Fixes */
@media (max-width: 768px) {
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .service-card {
    padding: 1.5rem !important;
    text-align: center !important;
  }
}

/* Feedback Page Mobile Fixes */
@media (max-width: 768px) {
  .feedback-form {
    padding: 1.5rem !important;
  }
  
  .feedback-categories {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Ambition Page Mobile Fixes */
@media (max-width: 768px) {
  .ambition-hero {
    padding: 4rem 1rem !important;
  }
  
  .innovation-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }
  
  .timeline-item {
    padding: 1rem !important;
  }
}

/* Universal Card Mobile Optimization */
@media (max-width: 768px) {
  /* All card types - universal mobile fixes */
  .modern-card, .benefit-card, .story-card, .level-card, 
  .partnership-card, .value-card, .crisis-card, .solution-card,
  .artisan-card, .brand-card, .vision-card, .support-card,
  .feature, .registration-card {
    padding: 1.5rem !important;
    margin: 1rem 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  }
  
  /* Card grids to single column */
  .benefits-grid, .stories-grid, .levels-grid, .partnerships-grid,
  .value-cards, .crisis-solutions, .artisan-showcase, .brand-cards,
  .vision-cards, .support-options, .features-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 0 1rem !important;
  }
  
  /* Card headings optimization */
  .modern-card h3, .benefit-card h3, .story-card h3, .level-card h3,
  .partnership-card h3, .value-card h3, .artisan-card h3, .brand-card h3,
  .vision-card h3, .support-card h3, .feature h3 {
    font-size: 1.25rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.3 !important;
  }
  
  /* Card content optimization */
  .modern-card p, .benefit-card p, .story-card p, .level-card p,
  .partnership-card p, .value-card p, .artisan-card p, .brand-card p,
  .vision-card p, .support-card p, .feature p {
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    margin-bottom: 1rem !important;
  }
  
  /* Card icons optimization */
  .modern-card i, .benefit-card i, .story-card i, .level-card i,
  .partnership-card i, .value-card i, .artisan-card i, .brand-card i,
  .vision-card i, .support-card i, .feature i {
    font-size: 2rem !important;
    margin-bottom: 1rem !important;
  }
  
  /* Remove hover effects on mobile */
  .modern-card:hover, .benefit-card:hover, .story-card:hover, .level-card:hover,
  .partnership-card:hover, .value-card:hover, .artisan-card:hover, .brand-card:hover,
  .vision-card:hover, .support-card:hover, .feature:hover {
    transform: none !important;
  }
  
  /* Card buttons optimization */
  .modern-card .btn, .benefit-card .btn, .story-card .btn, .level-card .btn,
  .partnership-card .btn, .value-card .btn, .artisan-card .btn, .brand-card .btn,
  .vision-card .btn, .support-card .btn, .feature .btn {
    width: 100% !important;
    margin-top: 1rem !important;
    padding: 0.75rem !important;
    font-size: 0.9rem !important;
  }
}

@media (max-width: 480px) {
  /* Extra small screens - further optimization */
  .modern-card, .benefit-card, .story-card, .level-card, 
  .partnership-card, .value-card, .crisis-card, .solution-card,
  .artisan-card, .brand-card, .vision-card, .support-card,
  .feature, .registration-card {
    padding: 1rem !important;
    margin: 0.75rem 0 !important;
    border-radius: 8px !important;
  }
  
  /* Smaller text for very small screens */
  .modern-card h3, .benefit-card h3, .story-card h3, .level-card h3,
  .partnership-card h3, .value-card h3, .artisan-card h3, .brand-card h3,
  .vision-card h3, .support-card h3, .feature h3 {
    font-size: 1.1rem !important;
  }
  
  .modern-card p, .benefit-card p, .story-card p, .level-card p,
  .partnership-card p, .value-card p, .artisan-card p, .brand-card p,
  .vision-card p, .support-card p, .feature p {
    font-size: 0.85rem !important;
  }
  
  /* Grid gaps for very small screens */
  .benefits-grid, .stories-grid, .levels-grid, .partnerships-grid,
  .value-cards, .crisis-solutions, .artisan-showcase, .brand-cards,
  .vision-cards, .support-options, .features-grid {
    gap: 1rem !important;
    padding: 0 0.5rem !important;
  }
}