/*
 * EQQPLUS+ Mobile Responsive Fixes
 *
 * Comprehensive media queries and improvements for mobile (320px-768px)
 * This should COMPLEMENT the existing site.css and app.css
 *
 * Integration: Add these rules at the END of your CSS files or in a separate
 * mobile-fixes.css file that loads after site.css
 */

/* ================================================================
 * CRITICAL FIXES for Mobile (320px+)
 * ================================================================ */

/* Fix DataTables select width - MAJOR issue */
@media (max-width: 768px) {
  div.dataTables_length select {
    width: 100% !important;
    max-width: 200px;
  }
}

/* Hero section - prevent overflow */
@media (max-width: 767.98px) {
  .site-hero {
    overflow: hidden;
  }

  .site-hero .hero-logo {
    display: none !important;
  }

  .site-hero h1 {
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    letter-spacing: -0.4px;
  }

  .site-hero .lead {
    font-size: 0.95rem;
  }

  .site-hero-card {
    transform: none;
    margin: 1.5rem auto;
    max-width: 100%;
  }

  /* Vertical only: .container already supplies the horizontal gutter */
  .site-section,
  .site-section-muted {
    padding: 2rem 0;
  }
}

/* ================================================================
 * Tablet Breakpoint (576px - 767px)
 * ================================================================ */

@media (max-width: 767.98px) {
  /* Buttons - ensure proper touch target size (48px minimum) */
  .site-btn {
    padding: 0.8rem 1.2rem;
    font-size: 0.95rem;
    min-height: 44px;
    display: inline-flex;
    justify-content: center;
  }

  .site-btn-primary,
  .site-btn-outline,
  .site-btn-accent {
    width: 100%;
    margin-bottom: 0.5rem;
  }

  /* Navbar Masuk / Daftar buttons sit side by side, not stacked */
  .site-navbar .site-btn {
    width: auto;
    flex: 1 1 0;
    margin-bottom: 0;
    white-space: nowrap;
  }

  /* Feature cards - stack better */
  .site-feature {
    padding: 1.2rem;
    margin-bottom: 1rem;
  }

  .site-feature .feature-icon {
    width: 48px;
    height: 48px;
    font-size: 1.4rem;
  }

  /* Pricing cards */
  .site-price-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .site-price-card .price {
    font-size: 2rem;
  }

  .site-price-card ul li {
    font-size: 0.85rem;
    padding: 0.25rem 0;
  }

  /* Steps - optimize for mobile */
  .site-step {
    padding: 1rem;
  }

  .site-step .step-circle {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
  }

  /* Stats strip */
  .site-stats .stat-number {
    font-size: 1.5rem;
  }

  .site-stats .stat-label {
    font-size: 0.8rem;
  }

  /* CTA section */
  .site-cta {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }

  .site-cta h3 {
    font-size: 1.5rem;
  }

  /* Testimonials */
  .site-testimonial {
    padding: 1.2rem;
    margin-bottom: 1rem;
  }

  .site-testimonial .quote {
    font-size: 1.6rem;
  }

  /* Footer */
  .site-footer {
    padding: 2rem 0 1rem;
  }

  .site-footer h6 {
    font-size: 0.75rem;
    margin-bottom: 0.75rem;
  }

  .site-footer .footer-bottom {
    margin-top: 1.5rem;
    padding-top: 1rem;
    font-size: 0.8rem;
  }

  /* Navbar improvements */
  .site-navbar {
    padding: 0.5rem 0;
  }

  .site-navbar .navbar-collapse {
    background: #fff;
    border: 1px solid #E7ECF3;
    border-radius: 12px;
    box-shadow: var(--site-shadow-card);
    padding: 0.5rem;
    margin-top: 0.35rem;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
  }

  .site-navbar .nav-link {
    font-size: 0.9rem;
    padding: 0.5rem 0.75rem;
    width: 100%;
    border-radius: 8px;
    margin-bottom: 0.25rem;
  }

  .site-navbar .nav-link::after {
    display: none;
  }

  .site-navbar .nav-link:hover,
  .site-navbar .nav-link.active {
    background: #EEF4FD;
    color: var(--site-primary);
  }

  /* Auth card optimized */
  .site-auth-card {
    border-radius: var(--site-radius-md);
  }

  .site-auth-card .auth-brand-panel {
    display: none;
  }

  .site-auth-wrap {
    min-height: auto;
    padding: 1rem 0;
  }

  .site-auth-card .auth-mobile-logo {
    display: flex;
    justify-content: center;
    margin-bottom: 1.5rem;
  }

  /* Form controls */
  .site-form-control {
    padding: 0.65rem 0.85rem;
    font-size: 16px; /* Prevent zoom on iOS */
    border-radius: 10px;
  }

  /* Generic text improvements */
  .site-subtitle {
    font-size: 0.95rem;
    line-height: 1.5;
  }

  /* Container margins */
  .container,
  .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* ================================================================
 * Small Mobile Breakpoint (< 576px)
 * ================================================================ */

@media (max-width: 575.98px) {
  /* Root font sizing */
  :root {
    font-size: 15px; /* Slight reduce for cramped screens */
  }

  /* Hero section ultra-mobile */
  .site-hero h1 {
    font-size: clamp(1.3rem, 6vw, 1.8rem);
    line-height: 1.2;
    margin-bottom: 0.75rem;
  }

  .site-hero .lead {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Section padding - aggressive reduce */
  .site-section {
    padding: 1.5rem 0;
  }

  .site-kicker {
    font-size: 0.7rem;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.75rem;
  }

  .site-title {
    font-size: 1.4rem;
  }

  /* Buttons stack vertically */
  .site-btn {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 0.9rem;
  }

  /* Feature grid */
  .site-feature {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .site-feature h6 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .site-feature p {
    font-size: 0.85rem;
  }

  /* Pricing - single column */
  .site-price-card {
    padding: 1.2rem;
    margin-bottom: 1rem;
  }

  .site-price-card .price {
    font-size: 1.8rem;
  }

  .site-price-card .price small {
    font-size: 0.9rem;
  }

  .site-price-card ul li {
    font-size: 0.8rem;
  }

  /* Steps */
  .site-step {
    padding: 0.75rem;
    text-align: center;
  }

  .site-step h6 {
    font-size: 0.95rem;
    margin-bottom: 0.5rem;
  }

  .site-step p {
    font-size: 0.8rem;
  }

  .site-step .step-circle {
    width: 56px;
    height: 56px;
    font-size: 1.4rem;
    margin-bottom: 0.75rem;
  }

  .site-step .step-circle .step-num {
    width: 22px;
    height: 22px;
    font-size: 0.7rem;
  }

  /* CTA section */
  .site-cta {
    padding: 1.25rem;
    border-radius: var(--site-radius-md);
    text-align: center;
  }

  .site-cta h3 {
    font-size: 1.3rem;
    margin-bottom: 0.5rem;
  }

  .site-cta p {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Testimonials */
  .site-testimonial {
    padding: 1rem;
    margin-bottom: 0.75rem;
  }

  .site-testimonial .quote {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }

  .site-testimonial h6 {
    font-size: 0.95rem;
    margin-bottom: 0.2rem;
  }

  .site-testimonial small {
    font-size: 0.75rem;
  }

  /* Stats strip */
  .site-stats {
    padding: 1.5rem 0;
  }

  .site-stats .stat-number {
    font-size: 1.3rem;
  }

  .site-stats .stat-label {
    font-size: 0.75rem;
  }

  /* Footer */
  .site-footer {
    padding: 1.5rem 0 1rem;
  }

  .site-footer h6 {
    font-size: 0.7rem;
    margin-bottom: 0.5rem;
  }

  .site-footer a {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .site-footer .footer-bottom {
    margin-top: 1rem;
    padding-top: 0.75rem;
    font-size: 0.75rem;
  }

  /* Navbar optimized */
  .brand-logo,
  .brand-logo-sm {
    width: 36px;
    height: 36px;
  }

  .site-navbar .navbar-brand {
    font-size: 1.1rem;
  }

  .site-navbar .nav-link {
    font-size: 0.85rem;
  }

  /* WhatsApp FAB - reposition for small screens */
  .wa-fab {
    width: 54px;
    height: 54px;
    right: 16px;
    bottom: 16px;
    font-size: 1.5rem;
  }

  /* Form improvements */
  .site-form-control {
    font-size: 16px; /* Critical for iOS - prevents zoom */
  }

  /* Container padding */
  .container,
  .container-fluid {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Table responsive fix */
  .table {
    font-size: 0.85rem;
  }

  /* Ensure content doesn't overflow */
  body {
    overflow-x: hidden;
  }

  main {
    overflow-x: hidden;
  }
}

/* ================================================================
 * Ultra Small Devices (< 360px - small phones)
 * ================================================================ */

@media (max-width: 359.98px) {
  :root {
    font-size: 14px;
  }

  .site-hero h1 {
    font-size: 1.2rem;
  }

  .site-section {
    padding: 1rem 0;
  }

  .site-feature,
  .site-price-card,
  .site-testimonial {
    padding: 0.9rem;
  }

  .container,
  .container-fluid {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}

/* ================================================================
 * Landscape Orientation Fixes
 * ================================================================ */

@media (max-height: 500px) and (orientation: landscape) {
  .site-section {
    padding: 1.5rem 0;
  }

  .site-hero {
    min-height: auto;
  }

  .site-hero h1 {
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
  }

  .site-cta {
    padding: 1rem;
  }
}

/* ================================================================
 * Utility Classes for Responsive Control
 * ================================================================ */

/* Touch-friendly spacing (no bare `button`: it would distort .btn-close
 * and .navbar-toggler) */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm),
  .site-btn {
    min-height: 44px;
  }

  .site-navbar .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* The 15px root size on small screens shrinks the toggler below 44px */
  .site-navbar .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }
}