/* RentGuarantor CSS: search-bar.css (source: src/assets/scss/_search-bar.scss) */
/* Search Bar Styles - Figma Design */
/* Node: 66:13747 */
.search-bar-wrapper {
  display: inline-flex;
  align-items: center;
  width: 294px;
}

.search-bar-wrapper .search-input {
  flex: 1;
  min-width: 0;
  height: 44px;
  border: none;
  border-radius: 10px 0 0 10px;
  padding: 0 16px;
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  line-height: 26px;
  outline: none;
  transition: background-color 0.2s ease;
}
.search-bar-wrapper .search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 20px;
  cursor: pointer;
  margin-right: -10px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 33 32' fill='none'%3E%3Cpath d='M24.25 8L8.25 24' stroke='%23232D5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.25 8L24.25 24' stroke='%23232D5D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.search-bar-wrapper .search-input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.search-bar-wrapper .search-button {
  width: 44px;
  height: 44px;
  background-color: #232d5d;
  border: none;
  border-radius: 0 10px 10px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
  color: #ffffff;
}

.search-bar-light-blue .search-input {
  background-color: #c5d9f8;
  color: #000000;
}
.search-bar-light-blue .search-input::placeholder {
  color: #000000;
}
.search-bar-light-blue .search-input:hover {
  background-color: #b0c9f0;
}

.search-bar-white .search-input {
  background-color: #ffffff;
  color: #000000;
}
.search-bar-white .search-input::placeholder {
  color: #606873;
}
.search-bar-white .search-input:hover {
  background-color: #f5f5f5;
}

.search-bar-wrapper .search-input:focus {
  border: 1px solid var(--color-core-mid-blue);
}

.search-bar-wrapper .search-button:hover {
  background-color: #1a2347;
}

.search-button:focus {
  border: 1px solid var(--color-core-mid-blue);
}

.search-bar-wrapper .search-button:active {
  background-color: #0f1529;
}