/* Modern Responsive & Mobile UI/UX Engine for myDigiBill */

/* 1. Prevent Horizontal Page Overflow on Mobile */
html, body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  touch-action: manipulation;
}

/* 2. Responsive Image & Media Scaling */
img, svg, video, iframe {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* 3. Table Responsiveness Wrapper */
.table-responsive-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
}

.table-responsive-wrapper::-webkit-scrollbar {
  height: 6px;
}
.table-responsive-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 99px;
}
.table-responsive-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 99px;
}

/* 4. Touch Targets & Input Field Optimization (Mobile Auto-Zoom Fix) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="number"],
  input[type="email"],
  input[type="tel"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on input tap */
    min-height: 48px;
  }

  button,
  .hero-btn,
  .luxury-mobile-menu__btn,
  .btn {
    min-height: 44px;
  }

  /* WhatsApp Float Stacking on Mobile */
  .whatsapp-float {
    bottom: 84px !important;
    right: 16px !important;
    width: 48px !important;
    height: 48px !important;
  }
}

/* 5. Utility Visibility Classes */
@media (max-width: 640px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 641px) {
  .show-mobile-only {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .stat-chip-v2 {
    min-width: 0;
  }
}