/* --- Mobile: 2 items per row, with dividers --- */
@media (max-width: 600px) {

  /* Make inputs a 2-column grid on mobile */
  .inputs {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* two columns */
    gap: 10px !important;
    align-items: stretch !important;
    padding:7px !important;
  }

  /* Each input box becomes a grid item */
  .input-box {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px !important;
    border-radius: 10px !important;
    background: #fff !important;      /* keep white card look */
    border: 2px solid #007d81 !important; /* optional yellow border like screenshot */
    min-height: 56px !important;
    box-sizing: border-box !important;
  
  }

  /* Add a vertical divider between the two columns */
  /* Apply right border to left-column items (odd children) */
  .inputs > .input-box:nth-child(odd) {
    /* subtle divider — tweak color/width to taste */
  }

  /* Remove right border for items that are in the 2nd column */
  .inputs > .input-box:nth-child(2n) {
    border-right: none !important;
  }

  /* If you have a separate .divider element between items on desktop, hide it on mobile */
  .divider { display: none !important; }

  /* Make labels/value text match screenshot proportions */
  .input-box label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3c3c3c !important;
  }

  .input-box span {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.05 !important;
  }

  /* Make the search button full width and place it below the grid */
  .search-btn {
    width: 90% !important;
    grid-column: 1 / -1 !important; /* force button to span both columns */
    border-radius: 12px !important;
    padding: 14px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: 6px !important;
    height: 20px;
  }

  .search-btn img { width: 22px !important; }

  /* For ultra-small screens (optional): switch to 1 column */
  @media (max-width: 360px) {
    .inputs { grid-template-columns: 1fr !important; }
  }
}
@media (max-width: 480px) {
    .search-box {
        width: 92%;
        padding: 22px;
        margin-top: -200px;
            border-radius: 1px;
    box-shadow:none
    }
}