/* CRITICAL OVERRIDE: Ensure specialty group is hidden by default */

/* This CSS loads LAST and overrides everything else */
#specialtyGroup {
  display: none !important;
}

/* Only show when profession is selected (JavaScript will add this class) */
.search-inputs.has-specialty #specialtyGroup {
  display: block !important;
}

/* Alternative: use inline style override */
#specialtyGroup[style*="display: none"] {
  display: none !important;
  visibility: hidden !important;
}

#specialtyGroup[style*="display: block"] {
  display: block !important;
  visibility: visible !important;
}

/* DESKTOP LAYOUT: Grid-based */
@media (min-width: 768px) {
  /* Ensure proper grid layout when hidden/shown */
  .search-inputs:not(.has-specialty) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

  .search-inputs:not(.has-specialty) #specialtyGroup {
    display: none !important;
  }

  .search-inputs.has-specialty {
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
  }
}

/* MOBILE LAYOUT: Stack vertically */
@media (max-width: 767px) {
  .search-inputs {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    grid-template-columns: none !important;
  }
  
  .search-group {
    width: 100% !important;
    grid-column: unset !important;
  }
  
  /* Mobile: Hide specialty until profession selected */
  #specialtyGroup {
    display: none !important;
  }
  
  /* Mobile: Show specialty only when profession selected */
  .search-inputs.has-specialty #specialtyGroup {
    display: block !important;
  }
  
  /* Override any grid positioning on mobile */
  .search-group:nth-child(1),
  .search-group:nth-child(2),
  .search-group:nth-child(3),
  .search-group:nth-child(4) {
    grid-column: unset !important;
  }
}