/* Stylized InQuire Menu Item */
.menu-items .inquire {
  display: inline-flex;
  align-items: center;
  margin-left: -5px;
  text-decoration: none; /* Remove underline from the menu item */
}

.menu-items .inquire .menu-label {
  display: inline-block;
  padding: 10px 5px;
  transition: background-color 0.3s;
  position: relative;
}

.menu-items .inquire .menu-label a:hover {
  background-color: white;
  color: #979729;
}
.menu-items .inquire .search-box {
  display: inline-flex;
  background-color: white;
  border: 2px solid var(--accent-color);
  border-radius: 10px 0 0 10px; /* Rounded left corner */
  align-items: center;
  padding: 0 5px;
  margin-left: 0; /* Adjusted margin to touch "n" in "In" */
}

/* Style for the search icon container */

.search-icon-container {
  display: inline-block;
  background-color: white; /* Add white background */
  padding: 0px; /* Add padding to create the prefill effect */
  border-radius: 50%;
}

.menu-items .inquire .inquire-search-input {
 border: none;
  background-color: transparent;
  width: 100%;
  height: 100%;
  padding-left: 4px;
  font-family: Arial, sans-serif;
  font-size: 14px;
  outline: none;
}

.menu-items .inquire .inquire-search-input::placeholder {
  color: #971797;
}

.menu-items .inquire .inquire-search-input:focus::placeholder {
  color: #aaa;
}

.menu-items .inquire .menu-label:nth-child(2) {
  padding-left: 5px; /* Add padding to separate "Re:" from search box */
}

.menu-items .inquire:hover .menu-label:nth-child(2) {
  background-color: var(--accent-color); /* Highlight on hover */
  color: var(--primary-color); /* Set text color on hover */
}

.menu-items .inquire:hover {
  background-color: #971797; /* Highlight the entire region */
}

/* Style for search icon in Inquire */
#searchIcon svg {
  transition: color 0.3s; /* Add a smooth color transition */
stroke: #971797;
}

/* Style for ellipsis */
.re-and-ellipsis {
  display: flex;
  align-items: center;
  width: auto; /* Add this line to allow the search box to maintain its width */
}


/* Style for ellipsis */
.vertical-ellipsis {
  transition: color 0.3s; /* Add a smooth color transition */
}

.menu-items .inquire:hover .vertical-ellipsis rect {
  fill: white; /* Change the color on hover to #971797 */
}


.vertical-ellipsis rect {
  fill: #971797; /* Change the color on hover to #971797 */
}


/* FLOATING SEARCH BOX */

/* Style for search icon in Inquire's floating searchbox */

#floating-searchIcon svg {
  transition: color 0.3s; /* Add a smooth color transition */
stroke: #971797;
}