/* .dropdown-search{
    display: flex;
    gap:1rem;
    text-transform: uppercase;
}
.dropdown-search{
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  
} */
/* General style for desktop */
.dropdown-container{
  /* background-color: red; */
  align-items: center;
  justify-content: center;
  /* width: 100%; */
  width: 800px;
  display: flex;
}
.dropdown-search {
  display: flex;
  gap:1rem;
  text-transform: uppercase;
  -webkit-touch-callout: none; 
  -webkit-user-select: none; 
  -khtml-user-select: none; 
  -moz-user-select: none; 
  -ms-user-select: none; 
  /* width:100%; */
}



/* Media query for mobile devices */
@media (max-width: 767px) {

  .bigparent{
    /* background-color: aquamarine; */
    /* margin-top: 30px; */
    /* overflow-x: hidden; */
    /* padding:30px; */
    /* height: 130vh; */
    border-radius: 5px;
    padding-left: 0px;
    padding-right: 0px;
    /* background-color: white; */
    width: 100%;
    display: flex;
    justify-content: center;
    /* position: absolute; */
    align-items: center;
    gap:20px;
    flex-direction: column;
    /* margin-left: 400px; */
    /* top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */
}
.error-plate{
  padding:2rem;
  
}
.error-plate h4{
  font-size: 1.1rem;
}
  .dropdown-search {
    /* padding:4rem; */
    display: flex;
    /* gap:1rem; */
    text-transform: uppercase;
    flex-wrap: wrap;
    justify-content: space-between; /* Ensures elements are spaced out */
  }
  .car-details-item{
    flex-direction: column;
  }
  
  .dropdown-search > div {
    flex: 1 1 50%; /* Flex grow, flex shrink, flex basis */
    box-sizing: border-box; /* Includes padding and border in the element's width */
    padding: 10px; /* Adds space around the content */
  }
  .dropdown-search {
      display: grid;
      grid-template-columns: 1fr 1fr; /* Creates a two-column grid */
      grid-template-rows: auto auto; /* Rows size according to content */
      gap: 0px; /* Space between grid items */
      /* width:400px; */
  }
  .service-item{
    width:45%;
  }
  .dropdown-search > div {
      /* Optional: Adjustments for padding or other styles on mobile */
      
  }
  #calculator{
    width: 400px;
  }
  .power-details{
    /* scale:1.3 */
    /* flex-direction: column; */
  }
  .side-rectangles{
    width: 40%;
  }
  .side-rectangles-item{
    width: 100%;
  }
  .power-container{
    /* padding-left:1rem;
    padding-right:1rem; */
  }
  .brand-image-container {
    max-width: 88%;
    min-width:79;
  }

  .select-menu {
    width: 9rem !important;
    /* cursor: pointer; */
    /* position: relative; */
  }

}

/* Additional style to handle disabled dropdowns visually */
.select.disabled {
  opacity: 0.5; /* Makes disabled sections visually distinct */
  pointer-events: none; /* Disables interaction */
}

.select-menu {
    width: 170px;
    cursor: pointer;
    position: relative;
    font-weight: 500;
  }


.select-menu > .select {
  border: 1.4px solid var(--border-color);
  box-shadow: var(--box-shadow-strong);
  padding: 7px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 9px;
  transition: all 350ms ease-in-out;
}

.select-menu > .select.active {
    border: var(--box-border-medium);
}



.select-menu > .select:hover {
  border: var(--box-border-medium);
}

.select-menu > .options-list {
  position: absolute;
  margin-top: 10px;
  width: 100%;
  border: 1px solid var(--secondary);
  box-shadow: var(--box-shadow-strong);
  border-radius: 6px;
  padding: 10px;
  max-height: 220px;
  overflow-y: auto;
  display: none;
  z-index: 999;
  background-color: #fff;
}

.select-menu > .options-list.active {
  display: block;
  border: var(--box-border-medium)
}

.select-menu > .options-list > .option {
  color: rgb(37, 37, 37);
  padding: 2px 0;
  border-bottom: 1px solid #d3d3d3;
  font-size: 14px;
  font-weight: 600;
}

.select-menu > .options-list > .option:hover,
.select-menu > .options-list > .option.selected {
  color: var(--secondary);
  border-color: var(--secondary);
  transition: all 0.2s linear 0.1s;
}

.select-menu > .options-list::-webkit-scrollbar {
  width: 2px;
  border-radius: 10px
}

.select-menu > .options-list::-webkit-scrollbar-thumb {
  background-color: var(--secondary);
  border-radius: 10px
}

#filterInput{
  /* border: 1px solid var(--secondary); */
  border: var(--box-border-hard);
  padding: 4px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
  width: 100%;
  height: 100%;
  margin-top: 5px;
  margin-bottom: 5px;
  /* make the input inside uppercase */
  text-transform: uppercase;
  /* disable suggestions */
 
}
.typer {
    transition: box-shadow 0.3s ease-in-out;
    /* box-shadow: 2px 2px 4px #ccc; Initial subtle shadow, adjust color as needed */
    box-shadow: var(--box-shadow-strong);
}

.typer {
    transition: box-shadow 0.3s ease-in-out;
    box-shadow: var(--box-shadow-strong); /* Initial subtle shadow, adjust color as needed */
    outline: none; /* This removes the default focus outline */
    border: var(--box-border-hard); /* Optional: Adds a light border that can be styled as needed */
}

.typer:hover, .typer:focus {
    border: 1px solid transparent; /* Optional: Makes border disappear on hover/focus */
}
.typer:active{
    border: var(--box-border-medium);
}

.disabled {
    /* Disable the cursor, and make the box blurry */
    cursor: not-allowed;
    /* disable hover effect */
    filter: blur(1px);
}
.disabled:hover {
    /* disable hover effect */
    filter: blur(1px);
}

.select.disabled + .options-list {
    /* Scale down the options-list that is a sibling of the disabled select */
    transform: scale(0);
}

.fa-angle-down{
    transition: transform 200ms ease-in-out; /* Smooth transition for rotation */
    color:var(--arrow-svg-color);


}

.select:not(.disabled) > .fa-angle-down.rotate {
    transform: rotate(180deg); /* Rotates the icon to point up */
  }

  
.select-menu > .options-list > .option:not(:only-child) {
    color: rgb(37, 37, 37);
    padding: 2px 0;
    border-bottom: 1px solid #d3d3d3;
    font-size: 14px;
    font-weight: 600;
    /* transition: all 350ms ease-in-out; */
  }