/* === Search Bar === */
.searchBarDiv {
  display: grid;
  grid-template-columns: 1fr minmax(min-content, 1fr); /* Two-column grid: flexible layout */
  position: relative;
}

/* === Preview Section Positioned to the Right === */
.searchBarPreview {
  position: absolute;
  right: 9%;
  width: 30%;
  transition: top 0.1s ease-out; /* Smooth animation for top position */
}

/* === Left Column Styling (Main Settings Area) === */
.searchBarLeft {
  border-right: 1px solid #ddd;
  padding-right: 20px;
}
.searchBarPreview-text {
  display: grid;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  text-align: center;
}
.searchBarPreview-text .preview {
  color: #3c434a;
  font-weight: 300;
  font-size: 35px;
  margin-bottom: 10px;
  display: block;
  line-height: 100%;
}
.searchBarPreview-text .bar {
  font-weight: 100;
  font-size: 25px;
  color: #aaa;
  margin-bottom: 10px;
  display: block;
  line-height: 100%;
  margin-top: -9px;
  -webkit-font-smoothing: subpixel-antialiased; /* Improves font rendering */
}

/* === Placeholder Inherits Color (for consistent look) === */
#doosearchas-search-preview-bar::placeholder {
  color: inherit;
}

/* === Responsive: Small Devices (< 500px) === */
@media (max-width: 499.98px) {
  .searchBarDiv {
    display: block;
  }
  .searchBarPreview {
    display: none;
  }
  .searchBarLeft {
    border-right: 0px solid #ddd;
    padding-right: 0px;
  }
}

/* === Responsive: Small Tablets (500px - 781.98px) === */
@media (min-width: 500px) and (max-width: 781.98px) {
  .searchBarPreview {
    right: 6%;
    width: 40%;
  }
}

/* === Responsive: Mid Tablets (783px - 859.98px) === */
@media (min-width: 783px) and (max-width: 859.98px) {
  .searchBarPreview {
    right: 3%;
    width: 27%;
  }
}

/* === Responsive: Tablets / Small Desktops (860px - 960.98px) === */
@media (min-width: 860px) and (max-width: 960.98px) {
  .searchBarPreview {
    right: 5%;
    width: 30%;
  }
}

/* === Responsive: Small Desktops (961px - 999.98px) === */
@media (min-width: 961px) and (max-width: 999.98px) {
  .searchBarPreview {
    right: 4%;
    width: 26%;
  }
}

/* === Responsive: Mid Desktops (1000px - 1049.98px) === */
@media (min-width: 1000px) and (max-width: 1049.98px) {
  .searchBarPreview {
    right: 5%;
  }
}

/* === Responsive: Desktops (1050px - 1149.98px) === */
@media (min-width: 1050px) and (max-width: 1149.98px) {
  .searchBarPreview {
    right: 7%;
  }
}
