/* ==========================================================================
   mobile-fixes.css  -  Mindware India
   Mobile usability layer. Loaded LAST so it wins over custom.css /
   modern-custom.css / bootstrap without editing them.

   Everything here is inside a max-width:767px media query, so desktop
   rendering is untouched.

   Fixes applied:
     1. Tap targets raised to the 44px minimum (Google mobile-usability)
     2. No text below 12px  (13px floor for the small-print classes)
     3. Form controls at 16px so iOS Safari stops zooming on focus
     4. Media / tables kept inside the viewport
   ========================================================================== */

@media (max-width: 767px) {

  /* ---- 0. Safety: nothing may push the page wider than the screen ------- */
  html,
  body {
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
  }

  img,
  video,
  iframe,
  embed,
  object {
    max-width: 100%;
    height: auto;
  }

  table {
    max-width: 100%;
  }

  .table-responsive,
  .mw-scroll-x {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  pre,
  code {
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
  }

  /* ---- 1. Minimum legible text: 13px floor on the small-print classes --- */
  #header-top .top-info a,
  .breadcrumb,
  .breadcrumb a,
  .breadcrumb-item,
  .breadcrumb-item a,
  .breadcrumb-custom,
  .breadcrumb-custom a,
  .breadcrumb-modern,
  .breadcrumb-modern a,
  .modern-breadcrumb,
  .modern-breadcrumb a,
  .ct-breadcrumb,
  .ct-breadcrumb a,
  .modern-view-all,
  .p-brand-tag,
  .btn-view,
  .blog-card-modern a,
  .blog-card-modern .meta,
  .ed-card-cat,
  .ed-side-title,
  .ed-featured-content .cat,
  .brand-item .brand-name,
  .product-card .product-brand-tag,
  .product-card .product-badge,
  .rel-view-btn,
  .mw-recaptcha-wrap p,
  #itemslider h6,
  .loginsubhead,
  small,
  .small {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /* ---- 2. Tap targets: 44px minimum ------------------------------------ */

  /* 2a. Buttons, pills and controls - grow the box itself */
  .btn,
  .btn-primary-custom,
  .btn-outline-custom,
  .btn-view,
  .brand-pill,
  .navbar-toggle,
  button,
  input[type="submit"],
  input[type="button"],
  .pagination-modern a,
  .pagination > li > a,
  .pagination > li > span {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Some buttons are sized purely by line-height, so min-height alone leaves
     them short - give them real vertical padding as well. */
  .btn-primary-custom,
  .btn-outline-custom,
  .btn-view {
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }

  /* Footer link columns and social icons */
  .footer-links li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  .social-icon {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Related-products strip and contact rows on the product page */
  .rel-view-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .contact-item-modern a,
  .contact-item-modern span > a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .pagination-modern a {
    width: 44px !important;
    height: 44px !important;
  }

  .brand-pill {
    padding: 11px 16px !important;
  }

  .navbar-toggle {
    padding: 10px 12px !important;
    margin-top: 8px;
    margin-bottom: 8px;
  }

  /* 2b. Standalone links that act as buttons - centre them in a 44px box */
  #header-top .top-info a,
  .breadcrumb a,
  .breadcrumb-item a,
  .breadcrumb-custom a,
  .breadcrumb-modern a,
  .modern-breadcrumb a,
  .ct-breadcrumb a,
  .modern-view-all,
  .modern-card > a,
  .blog-card-modern > div > a,
  .blog-card-modern a.read-more {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* 2c. Card title links wrap onto several lines, so pad instead of flex
         (inline-flex would fight the wrapping) */
  .product-card .product-info h4 a,
  .modern-product-card .p-title,
  .modern-product-card a .p-title {
    display: block;
    padding: 10px 0;
  }

  /* 2d. Breathing room so neighbouring targets are not mis-tapped */
  #header-top .top-info a + a {
    margin-left: 14px;
  }

  .pagination-modern {
    flex-wrap: wrap;
    gap: 10px !important;
    justify-content: center;
  }

  .brand-pill {
    margin: 0 6px 10px 0;
  }

  /* ---- 3. Form controls at 16px so iOS does not zoom on focus ---------- */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    font-size: 16px !important;
    min-height: 44px;
  }

  textarea {
    min-height: 96px;
  }

  /* ---- 4. Navigation drawer: comfortable rows ------------------------- */
  .navbar-nav > li > a,
  .dropdown-menu > li > a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* Coarse pointers (touch) on tablets too - keep the 44px rule where a
   finger is the input device, without changing mouse-driven layouts. */
@media (pointer: coarse) and (max-width: 1024px) {

  .pagination-modern a,
  .brand-pill,
  .btn-view,
  .btn-primary-custom {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}