/* =============== MOBILE RESPONSIVENESS =============== */

/* General adjustments for tablets and smaller devices */
@media (max-width: 767.98px) {
  /* Reduce padding on major sections to save space */
  .category-section,
  .traders-section {
    padding: 1.5rem 1rem;
  }

  /* Adjust heading font sizes for better readability */
  h1, #categoriesheading, #featured-products {
    font-size: 1.75rem;
  }
  
  .dashboard-header {
    margin: 20px 0;
  }

  /* Ensure footer columns stack properly */
  .site-footer h5 {
    margin-top: 1.5rem;
  }
  .site-footer .col-md-4:first-child h5 {
    margin-top: 0;
  }
}

/* Specific adjustments for mobile phones */
@media (max-width: 575.98px) {
  /* --- Navigation and Search --- */
  /* Add space between the hamburger menu and the search bar when expanded */
  .navbar .form-inline {
    margin-top: 10px;
    width: 100%;
  }

  /* --- Filter Bar --- */
  /* Stack the filter dropdowns vertically for easy tapping */
  #filter-bar .form-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #filter-bar .col-auto {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
  #filter-bar .custom-select {
    width: 100%;
  }

  /* --- Product Cards --- */
  /* Adjust product grid padding and card content for smaller screens */
  .product-col {
    padding-left: 5px;
    padding-right: 5px;
  }
  .card-img-top {
    height: 180px; /* Reduce image height */
  }
  .card-body {
    padding: 0.8rem; /* Tighter padding inside cards */
  }
  .card-title {
    font-size: 1rem;
  }
  .card-text {
    font-size: 0.85rem;
  }
  .card .btn {
    font-size: 0.8rem;
    padding: 0.3rem 0.6rem;
  }
  
  /* --- Category Cards --- */
  .category-card {
    /* Make card width more flexible */
    flex: 0 0 280px; 
    height: 160px;
  }

  /* --- Authentication Modal --- */
  #authModal .modal-dialog {
    margin: 10px; /* Reduce modal margins */
  }
  .auth-form-box {
    width: 100%; /* Make auth forms full-width */
    padding: 24px;
  }

  /* --- Cart Table --- */
  /* Transform the table into a card-based list on mobile */
  #cart-container {
    padding: 15px;
  }
  #cart-container h2 {
    font-size: 1.5rem;
  }
  #cart-table thead {
    display: none; /* Hide table headers */
  }
  #cart-table, #cart-table tbody, #cart-table tr, #cart-table td {
    display: block;
    width: 100%;
  }
  #cart-table tr {
    margin-bottom: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px;
  }
  #cart-table td {
    border: none;
    padding: 5px;
    position: relative;
    padding-left: 50%; /* Make space for the label */
    text-align: right;
    min-height: 28px; /* Ensure empty cells are visible */
  }
  #cart-table td::before {
    /* Add labels to table cells */
    content: attr(data-label);
    position: absolute;
    left: 10px;
    width: 45%;
    padding-right: 10px;
    font-weight: bold;
    text-align: left;
  }
  /* Center the content of the last cell (remove button) */
  #cart-table td:last-child {
      padding-left: 5px;
      text-align: center;
  }
  
  /* --- Footer --- */
  .site-footer {
    text-align: center;
  }
  .footer-logo {
    margin-left: auto;
    margin-right: auto;
  }
  #subscribe-form .input-group {
    margin: 0 auto;
  }

  /* --- Banners --- */
  .banner-nav {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  .banner-prev { left: 10px; }
  .banner-next { right: 10px; }
  .banner-dots { bottom: 10px; }
}

/* Coder Note: I've added this code block to the end of mobile.css. */

/* Target screens where the navbar would normally collapse */
@media (max-width: 991.98px) {
  /* Allow items in the navbar to wrap to the next line */
  .navbar {
    flex-wrap: wrap;
  }

  /* Target the container for the cart/login buttons */
  #navbarContent {
    /* Force this container to take 100% width, pushing it to a new line */
    flex-basis: 100%;
    /* Align the buttons to the right */
    justify-content: flex-end !important;
    margin-top: 8px; /* Add some space above the buttons */
  }

  /* Keep the cart/login buttons in a row instead of stacking vertically */
  #navbarContent .navbar-nav {
    flex-direction: row;
  }
}