/* =========================================================
   Benefit India - E-commerce mobile responsive styles
   Linked at the END of <head> on every e-commerce page.
   Everything below 768px / 576px only, so desktop is unchanged.
   ========================================================= */

/* ---------- Global safety rules (all screen sizes) ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }
img, video, iframe, svg { max-width: 100%; }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ---------- Tablets and phones ---------- */
@media (max-width: 991.98px) {
  .summary-sticky { position: static !important; }
}

/* ---------- Phones and small tablets (< 768px) ---------- */
@media (max-width: 767.98px) {

  /* Spacing + type */
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.4rem; }
  h3 { font-size: 1.2rem; }

  /* Stop iOS from zooming when an input is tapped */
  input, select, textarea,
  .form-control, .form-select { font-size: 16px !important; }

  /* Bigger tap targets */
  .btn { min-height: 38px; }
  .btn-sm { min-height: 34px; }

  /* Floating call / WhatsApp buttons: smaller, so they don't cover page buttons */
  .Phone_btn, .Whatsapp_btn { width: 64px; height: 64px; bottom: 6px; }
  .Phone_btn { right: 8px; }
  .Whatsapp_btn { left: 8px; }
  .Phone_btn img, .Whatsapp_btn img { width: 44px; height: 44px; }
  .Phone_icon, .Whatsapp_icon { width: 44px; height: 44px; }

  /* Floating alerts (profile / reviews) fit the screen */
  .alert-floating { left: 10px !important; right: 10px !important; min-width: 0 !important; width: auto; }

  /* Login / Register */
  body.bg-light > .container.mt-5 { margin-top: 1.25rem !important; }
  .container > .card.mx-auto { padding: 1.25rem !important; }

  /* ----- Tables that turn into cards (add class "table-stack" + data-label on <td>) ----- */
  .table-stack thead { display: none; }
  .table-stack,
  .table-stack tbody,
  .table-stack tr,
  .table-stack td { display: block; width: 100%; }
  .table-stack,
  .table-stack tr,
  .table-stack td { box-sizing: border-box; }
  .table-stack { border: 0 !important; }
  .table-stack tr {
    border: 1px solid #dee2e6;
    border-radius: 10px;
    margin-bottom: 14px;
    background: #fff;
    overflow: hidden;
  }
  .table-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    text-align: right;
    border: 0 !important;
    border-bottom: 1px dashed #e5e5e5 !important;
    padding: 9px 14px !important;
  }
  .table-stack td:last-child { border-bottom: 0 !important; }
  .table-stack td::before {
    content: attr(data-label);
    flex: 0 0 38%;
    text-align: left;
    font-weight: 600;
    color: #555;
  }
  .table-stack td.stack-title {
    display: block;
    text-align: left;
    font-weight: 600;
    background: #f8f9fa;
  }
  .table-stack td.stack-title::before { display: none; }

  /* Cart summary */
  .cart-summary { text-align: left !important; }
  .cart-summary .btn { width: 100%; }

  /* ----- Account pages (orders / profile): sidebar becomes a scrolling tab bar ----- */
  .sidebar.account-sidebar {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    min-height: 0 !important;
    padding: 10px 12px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
  }
  .sidebar.account-sidebar h5 { display: none; }
  .sidebar.account-sidebar a {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 8px 14px !important;
    white-space: nowrap;
    background: #fff;
    border: 1px solid #cfe8d9;
    font-size: 14px;
  }
  .sidebar.account-sidebar a i { margin-right: 6px !important; font-size: 1rem !important; }

  /* ----- Policy pages (privacy, terms, shipping, refund) ----- */
  .page_header { padding: 36px 0 28px !important; }
  .page_header h1 { font-size: 1.6rem; }
  .policy_section { padding: 22px 0 !important; }
  .policy_section .policy_content { padding: 1.25rem !important; }
  .policy_section .policy_content h2 { font-size: 1.25rem; }
  .policy_section .policy_content h4 { font-size: 1.05rem; }

  /* ----- Checkout ----- */
  .checkout-page { padding: 20px 0 40px !important; }
  .checkout-page h2.page-title { font-size: 1.4rem; }
  .checkout-page .panel-box { padding: 14px !important; }
  .checkout-page .cart-line { font-size: .85rem; }

  /* ----- Product page: related products 2 per row ----- */
  .related-products-section { padding-left: 0; padding-right: 0; }
  .related-product-img { height: 115px !important; }
  .related-product-name { font-size: .85rem !important; }
  .related-product-info { padding: 10px !important; }
  .main-image-container { max-width: 100% !important; }
  .featured-images-gallery { padding: 0 6px !important; }

  /* ----- item-products (old product page) ----- */
  .product-container { padding: 1rem !important; margin: 1rem 0 !important; }
  .product-container h1 { font-size: 1.5rem; }
  .product-container .d-flex[style*="height: 450px"] { height: 300px !important; }
  .product-container .product-image { max-height: 260px !important; padding: 10px !important; }
  .reviews-section { padding: 1rem !important; }
  .review-form { padding: 1rem !important; }

  /* ----- category_one (old category page): sidebar becomes a chip bar ----- */
  .main-wrapper { flex-direction: column; }
  .main-wrapper .category-sidebar {
    width: 100%;
    height: auto;
    position: static;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px;
    border-right: 0;
    border-bottom: 1px solid #eee;
    -webkit-overflow-scrolling: touch;
  }
  .main-wrapper .category-sidebar h4 { display: none; }
  .main-wrapper .category-item {
    flex: 0 0 auto;
    white-space: nowrap;
    margin-bottom: 0;
    padding: 8px 14px;
  }
  .main-wrapper .product-area { padding: 14px 10px; }
  .main-wrapper .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .main-wrapper .product-card { padding: 8px; }
  .main-wrapper .product-card img { height: 110px !important; }

  /* ----- category_list (categories grid) ----- */
  .section-header h2 { font-size: 1.4rem !important; }
  .section-header p { font-size: 13px; padding: 0 8px; }
}

/* ---------- Small phones (< 576px) ---------- */
@media (max-width: 575.98px) {

  /* category_list: 2 category cards per row */
  .categories-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .categories-grid .category-img-wrapper { height: 120px !important; }
  .categories-grid .category-img-container { width: 90px !important; height: 90px !important; }
  .categories-grid .category-content { padding: 12px 10px !important; }
  .categories-grid .category-card h5 { font-size: .95rem !important; margin-bottom: 8px !important; }
  .categories-grid .category-badge { font-size: .6rem !important; padding: 3px 7px !important; }
  .categories-grid .explore-btn { font-size: .8rem !important; padding: 8px 10px !important; }
  .categories-grid .category-footer { padding-top: 8px !important; }
}