/* Mobile-only layout overrides. Loaded last to isolate phone UI. */
@media (max-width: 768px) {
  #search-volunteer-flex-row {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    gap: 8px !important;
  }
  #mobile-search-target {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }
  #search-box-wrapper {
    display: block !important;
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    overflow: visible !important;
  }
  #search-box-wrapper > div:first-child {
    display: flex !important;
    width: 100% !important;
    height: 42px !important;
    position: relative !important;
    align-items: center !important;
  }
  #search-box-wrapper .search-icon {
    left: 13px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 2 !important;
  }
  #search-box-wrapper #search-input {
    width: 100% !important;
    height: 42px !important;
    min-width: 0 !important;
    padding: 0 82px 0 40px !important;
    box-sizing: border-box !important;
  }
  #search-box-wrapper > div:first-child > div:last-child {
    position: absolute !important;
    right: 5px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    align-items: center !important;
    gap: 3px !important;
    width: auto !important;
    height: 32px !important;
    z-index: 3 !important;
  }
  #search-box-wrapper #btn-near-me,
  #search-box-wrapper #btn-toggle-filters {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 9px !important;
  }
  #search-box-wrapper #btn-near-me svg,
  #search-box-wrapper #btn-toggle-filters svg {
    width: 15px !important;
    height: 15px !important;
    flex: none !important;
  }
  #search-box-wrapper .btn-label-desktop {
    display: none !important;
  }
  #search-box-wrapper #filters-dropdown {
    margin-top: 8px !important;
  }

  #auth-modal .input-group label {
    top: 0 !important;
    transform: translateY(-50%) scale(.82) !important;
    transform-origin: left center !important;
    padding: 0 5px !important;
    background: #fff !important;
    color: #0284c7 !important;
    font-weight: 500 !important;
    z-index: 2 !important;
    pointer-events: none !important;
  }
  #auth-modal .input-group input,
  #auth-modal .input-group select {
    padding: 11px 14px 7px !important;
  }
  body.dark-theme #auth-modal .input-group label {
    background: #1c1c1e !important;
    color: #38bdf8 !important;
  }
}