/* =========================================================
   Hub Selector Widget
   ========================================================= */

.uct-hub-widget {
  display: flex;
  flex-direction: row; /* Ensure horizontal alignment */
  flex-wrap: nowrap; /* Prevent wrapping on larger screens */
  align-items: center;
  justify-content: center;
  gap: 15px;
  background: #333;
  padding: 30px;
  border-radius: 12px;
  font-family: Arial, sans-serif;
  color: #fff;
  margin: 40px auto;
  max-width: 800px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* On smaller screens, allow wrapping but keep it neat */
@media (max-width: 600px) {
  .uct-hub-widget {
    flex-wrap: wrap;
  }
}

.uct-hub-label {
  font-size: 20px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap; /* Keep label text on one line */
}

.uct-hub-select {
  padding: 12px 16px;
  font-size: 18px;
  border-radius: 6px;
  border: 1px solid #555;
  background-color: #222;
  color: #fff;
  cursor: pointer;
  min-width: 120px;
  appearance: none; /* Custom arrow */
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 12px top 50%;
  background-size: 12px auto;
  padding-right: 40px;
}

.uct-hub-select:focus {
  outline: none;
  border-color: #2f80ed;
}

.uct-hub-btn {
  padding: 12px 28px;
  font-size: 18px;
  background-color: #1d6adb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap; /* Keep button text on one line */
}

.uct-hub-btn:hover {
  background-color: #ffa500;
}