/* ==========================================================================
   HEPOYUNCU CS 1.6 & CS2 SERVER RENTAL - ULTIMATE RESPONSIVE STYLESHEET
   100% Mobile, Tablet & High-DPI Desktop Screen Adaptations
   ========================================================================== */

/* ==========================================================================
   1. DESKTOP & LARGE SCREENS (1024px and above)
   ========================================================================== */
@media (min-width: 1024px) {
  .desktop-nav {
    display: flex !important;
  }
}

/* ==========================================================================
   2. TABLET SCREENS (768px to 1023px)
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  h1 {
    font-size: 2.25rem !important;
    line-height: 2.75rem !important;
  }

  h2 {
    font-size: 1.75rem !important;
    line-height: 2.25rem !important;
  }

  .counter-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .tablet-col-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ==========================================================================
   3. MOBILE DEVICES (320px to 767px)
   ========================================================================== */
@media (max-width: 767px) {
  /* Prevent horizontal scroll */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
  }

  /* Typography Scaling for Mobile Readability */
  h1 {
    font-size: 1.75rem !important;
    line-height: 2.15rem !important;
    letter-spacing: -0.01em !important;
  }

  h2 {
    font-size: 1.35rem !important;
    line-height: 1.75rem !important;
  }

  h3 {
    font-size: 1.15rem !important;
    line-height: 1.5rem !important;
  }

  p, span, label, div {
    word-break: break-word;
  }

  /* Mobile Touch Target Rule: Minimum 44x44px */
  button, 
  a.btn, 
  input[type="button"], 
  input[type="submit"], 
  .mobile-touch-target {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Mobile Flexbox & Grid Stack (Flex Direction: Column) */
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4,
  .grid-cols-5,
  .grid-cols-6,
  .counter-grid {
    grid-template-columns: 1fr !important;
  }

  .mobile-stack {
    flex-direction: column !important;
  }

  /* Responsive Containers */
  .container,
  .max-w-7xl,
  .max-w-6xl,
  .max-w-5xl,
  .max-w-4xl,
  .max-w-3xl,
  .max-w-2xl,
  .max-w-xl {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Data Table Horizontal Scroll Container */
  .table-responsive,
  table {
    display: block !important;
    width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Mobile Button Widths */
  .city-btn,
  .btn-full-mobile {
    width: 100% !important;
    margin-bottom: 0.5rem;
  }

  /* Mobile Header Height & Padding */
  header, .navbar {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
  }

  header img.animate-logo-header,
  header img.logo-img,
  header img[alt*="Logo"],
  .navbar img {
    max-height: 52px !important;
    height: 52px !important;
    width: auto !important;
  }

  /* Mobile Modal Scaling */
  .modal-box {
    width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    margin: 1rem !important;
    padding: 1.25rem !important;
  }
}

/* ==========================================================================
   4. SMALL MOBILE SCREENS (320px to 480px)
   ========================================================================== */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem !important;
    line-height: 1.9rem !important;
  }

  h2 {
    font-size: 1.2rem !important;
    line-height: 1.6rem !important;
  }

  .px-6 {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .py-8 {
    padding-top: 1.25rem !important;
    padding-bottom: 1.25rem !important;
  }
}