/* ---------------------------------------------
   Mobile View for Filter Bar and Select Boxes
--------------------------------------------- */
@media (max-width: 600px) {
    .filter-bar {
      flex-direction: column;
      padding: 1rem 1.5rem; /* smaller padding on mobile */
      gap: 1rem; /* space between filters */
      align-items: stretch; /* full width filters */
    }
  
    .product-filter,
    .patch-type-filter {
      width: 100%;
      margin: 0;
      text-align: left; /* better UX: labels/filters align to left */
    }
  
    .product-filter select {
      width: 100%; /* Full width select box */
      padding: 12px;
      font-size: 1rem;
    }
  
    .patch-type-filter label {
      display: inline-block;
      margin: 0 0 0.5rem 0;
    }
  
    .pagination-controls {
        gap: 0.5rem;
      }
    
      .pagination-controls button,
      .page-number {
        font-size: 1rem;
        padding: 6px 10px;
      }/* Adjust Modal Content */
  .contact-modal .modal-content {
    width: 90%;  /* Use 90% of the screen width on mobile */
    max-width: 400px;  /* Cap width on smaller devices */
    padding: 15px;  /* Reduce padding for smaller screens */
  }

  /* Title */
  .modal-content h2 {
    font-size: 1.25em;  /* Smaller title font on mobile */
    margin-bottom: 15px;
  }

  /* Form Fields */
  .form-group label {
    font-size: 0.85em;  /* Slightly smaller labels */
  }

  .form-group input,
  .form-group textarea {
    font-size: 0.9em;  /* Slightly smaller input font */
  }

  /* Button */
  .submit-btn,
  .close-btn {
    font-size: 0.9em;  /* Smaller font on buttons */
    padding: 8px 16px;  /* Adjust button size */
  }

  /* Success Popup Content */
  .success-popup-content {
    padding: 1rem;  /* Reduce padding inside success popup */
  }

  /* Close Button */
  .close-btn {
    font-size: 0.9em;
    padding: 8px 16px;
  }

  .white-box {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem 1.5rem;
    gap: 1rem;
    text-align: left;
  }

  .white-box-content h3 {
    font-size: 1.1rem;
  }

  .white-box-content p {
    font-size: 0.95rem;
  }

  .white-box button {
    width: 100%;
    text-align: center;
    font-size: 1rem;
    padding: 10px;
  }
}