/* 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 - FORCE OVERRIDE FLEXBOX FROM MAIN.CSS AND RESPONSIVE.CSS */
@media (min-width: 768px) {
  /* CRITICAL: Force search-container to column layout with MAXIMUM specificity */
  html body section.search div.container form div.search-container,
  html body section div.container form div.search-container,
  html body div.container form div.search-container,
  body section.search div.container form div.search-container,
  section.search div.container form div.search-container,
  div.container form div.search-container,
  form div.search-container,
  div.search-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: unset !important;
    gap: 1rem !important;
  }

  /* CRITICAL: Force grid display to override flexbox from main.css with MAXIMUM specificity */
  html body section.search div.container form div.search-container div.search-inputs,
  html body section div.container form div.search-container div.search-inputs,
  html body div.container form div.search-container div.search-inputs,
  body section.search div.container form div.search-container div.search-inputs,
  section.search div.container form div.search-container div.search-inputs,
  div.container form div.search-container div.search-inputs,
  form div.search-container div.search-inputs,
  div.search-container div.search-inputs {
    display: grid !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 1rem !important;
    align-items: center !important;
  }

  /* Ensure proper grid layout when hidden/shown */
  .search-container .search-inputs:not(.has-specialty) {
    grid-template-columns: 1fr 1fr 1fr !important;
  }

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

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

  /* Grid positioning - default 3-column layout */
  .search-container .search-inputs .search-group:nth-child(1) { grid-column: 1 !important; } /* Profesión */
  .search-container .search-inputs .search-group:nth-child(3) { grid-column: 2 !important; } /* Ubicación (when specialty hidden) */
  .search-container .search-inputs .search-group:nth-child(4) { grid-column: 3 !important; } /* Salario (when specialty hidden) */

  /* Grid positioning - 4-column layout when specialty visible */
  .search-container .search-inputs.has-specialty .search-group:nth-child(2) { grid-column: 2 !important; } /* Especialidades */
  .search-container .search-inputs.has-specialty .search-group:nth-child(3) { grid-column: 3 !important; } /* Ubicación */
  .search-container .search-inputs.has-specialty .search-group:nth-child(4) { grid-column: 4 !important; } /* Salario */
}

/* 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;
  }
}