/* =========================================================
   NUCLEAR FIX: Legacy Find Doctors widget
   Forces all selects/inputs/buttons to become normal size
   Scope: only inside .ndsp-left
========================================================= */

.ndsp-left,
.ndsp-left *{
  box-sizing: border-box !important;
}

.ndsp-left select,
.ndsp-left input,
.ndsp-left textarea{
  width: 100% !important;
  min-width: 220px !important;
  max-width: 100% !important;
  height: 42px !important;
  padding: 8px 12px !important;
  border: 1px solid #e6ebf2 !important;
  border-radius: 12px !important;
  background: #fff !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Sometimes legacy CSS makes select tiny using "size" or fixed widths */
.ndsp-left select{
  appearance: auto !important;
}

/* Fix label overlap */
.ndsp-left label,
.ndsp-left .label,
.ndsp-left .needs_label{
  display: block !important;
  margin: 0 0 6px 0 !important;
  padding: 0 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
}

/* If legacy layout puts dropdowns in a row, force a clean grid */
.ndsp-left form{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
}

.ndsp-left form .row,
.ndsp-left form .form-row,
.ndsp-left .needs_row,
.ndsp-left .needs_cols{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

/* Submit button */
.ndsp-left button,
.ndsp-left input[type="submit"],
.ndsp-left .btn{
  width: 100% !important;
  min-height: 44px !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
}

/* Small screens: stack */
@media (max-width: 575.98px){
  .ndsp-left form .row,
  .ndsp-left form .form-row,
  .ndsp-left .needs_row,
  .ndsp-left .needs_cols{
    grid-template-columns: 1fr !important;
  }
  .ndsp-left select,
  .ndsp-left input{
    min-width: 0 !important;
  }
}


/* =========================================================
   Find Doctors form (country-widget.php modern markup)
   (this overrides only the new markup classes you added)
========================================================= */

.nd-find-form{
  margin: 0;
}

/* 2x2 grid: Speciality/Country + State/City */
.nd-form-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 10px;
}

.nd-field{
  min-width: 0;
}

.nd-label{
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #334155;
  margin: 0 0 6px 0;
}

.nd-find-form .selectfield{
  width: 100% !important;
  min-width: 0 !important;       /* important: prevents forcing 220px in grid */
  height: 44px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #e6ebf2 !important;
  background: #fff !important;
  font-size: 14px !important;
}

/* Bottom area + button */
.nd-form-bottom{
  margin-top: 14px;
}

.nd-help{
  font-size: 12px;
  color: #64748b;
  min-height: 16px;
  margin-bottom: 10px;
}

.nd-find-btn{
  width: 100%;
  height: 46px;
  border: 0;
  border-radius: 14px;
  font-weight: 800;
  background: #0ea5e9;
  color: #fff;
  box-shadow: 0 10px 24px rgba(14,165,233,.22);
}

.nd-find-btn:hover{
  background: #0284c7;
}

/* Mobile: stack 1 column */
@media (max-width: 575.98px){
  .nd-form-grid{
    grid-template-columns: 1fr;
  }
}