/* Container */
#suntransfer-search-form {
  background: #fff8e1;
  border: 2px solid #ffcc00;
  border-radius: 8px;
  padding: 15px;
  max-width: 1100px;
  margin: 20px auto;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  display: grid;
  gap: 15px;
  font-family: Arial, sans-serif;
}

/* Generic row container */
.search-row {
  width: 100%;
}

/* TOP ROW: always 3 columns: left | swap | right */
.top-row {
  display: grid !important;
  grid-template-columns: 1fr 60px 1fr;
  gap: 12px;
  align-items: end;
}

/* Left & right wrappers contain the alternative inputs */
.input-wrap { position: relative; }

/* Make each inner input-group stack vertically inside wrappers */
.input-wrap .input-group { margin: 0; }

/* Bottom row layout */
.bottom-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 160px; /* last column for search button */
  gap: 12px;
  align-items: end;
}

/* Input group styling */
.input-group {
  display: flex;
  flex-direction: column;
}
.input-group label {
  margin-bottom: 6px;
  font-size: 13px;
  color: #444;
}
.input-group input,
.input-group select {
  padding: 10px;
  border: 1px solid #dcdcdc;
  border-radius: 6px;
  background: #fff;
  width: 100%;
  box-sizing: border-box;
}

/* Search button */
.search-btn {
  width: 100%;
  padding: 12px;
  background: #4caf50;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 16px;
  cursor: pointer;
}
.search-btn:hover { background: #45a049; }

/* Swap icon */
.swap-icon { display:flex; align-items:center; justify-content:center; }
.swap-icon button {
  font-size: 18px;
  background: #0073aa;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 46px;
  height: 46px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.swap-icon button:hover { background: #005f8d; }

/* Autocomplete child dropdown positioning - make sure dropdowns align inside wrappers */
.input-wrap .stsw-autocomplete, .input-wrap .autocomplete {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  z-index: 9999;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}

/* suggestion item style */
.stsw-suggestion, .suggestion { padding: 10px 12px; cursor: pointer; }
.stsw-suggestion:hover, .suggestion:hover { background:#f3f4f6; }

/* simple hidden class */
.hidden { display: none !important; }

/* Responsive: collapse to single column on small screens */
@media (max-width: 767px) {
  .top-row { grid-template-columns: 1fr; }
  .bottom-row { grid-template-columns: 1fr; }
  .swap-icon { order: 99; } /* put swap icon below on mobile if needed */
}