/* == Global Wrapper Style == */
#doosearchas_s-wrapper {
  font-family: "Inter", sans-serif; /* Use Inter font with fallback */
  font-style: normal;
  font-weight: 400;
  line-height: 1.55;
  color: #111111;
}
#doosearchas_s-result-item-count {
  margin-bottom: 14px;
  font-size: 18px;
}
#doosearchas_s-result-item-count span {
  font-weight: 800;
}

/* outside search input */
#doosearchas_s-primary-input::placeholder {
  color: inherit;
}

/* inside search input */
#doosearchas_s-top {
  padding: 0px 15px 20px 15px;
  border-bottom: 1px solid #ddd;
  grid-template-columns: 1fr min-content 6fr min-content 1fr;
  display: grid;
  grid-gap: 1%;
  align-items: center;
}
#doosearchas_s-secondary-input {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  outline: 0;
  line-height: 0;
}

/* Hide search clear (cancel) button on WebKit */
#doosearchas_s-secondary-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* popup logic */
#doosearchas_s-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
  opacity: 0;
  animation: popupShow 0.5s forwards; /* Fade-in animation */
}

/* Show popup when class is added */
#doosearchas_s-popup.doosearchas_s-show {
  display: block;
  opacity: 1;
}
@keyframes popupShow {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
#doosearchas_s-popup-content {
  position: relative;
  width: 100%;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  animation: slideDown 0.5s forwards ease-out; /* Slide from top */
}

/* Slide down animation */
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
#doosearchas_s-popup-close {
  position: absolute;
  top: 15px;
  right: 2%;
  font-size: 30px;
  cursor: pointer;
  color: #000;
  outline: none;
}

/* Responsive tweaks for close button position */
@media (min-width: 350px) and (max-width: 576px) {
  #doosearchas_s-popup-close {
    right: 8%;
  }
}
@media (min-width: 576px) and (max-width: 767.98px) {
  #doosearchas_s-popup-close {
    right: 8%;
  }
}
@media (min-width: 768px) and (max-width: 991.98px) {
  #doosearchas_s-popup-close {
    right: 5%;
  }
}
@media (min-width: 991.98px) and (max-width: 1111.98px) {
  #doosearchas_s-popup-close {
    right: 4%;
  }
}

/* Make popup take up full screen */
.doosearchas_s-fullscreen {
  height: 100vh !important;
  max-height: 100vh !important;
}

/* Highlight WooCommerce prices */
#doosearchas_s-wrapper .woocommerce-Price-amount {
  color: #b20808 !important;
}
.doosearchas_s-recent-items-title {
  margin: 24px 0px 24px 0;
}
#doosearchas_s-result {
  display: none;
  gap: 10px;
  height: calc(100% - 71px); /* Full height minus top bar */
}

/* product item */
#doosearchas_s-result-item-wrapper {
  flex: 3;
  padding: 10px;
}
#doosearchas_s-result-item-cs {
  display: flex;
  justify-content: space-between;
}
#doosearchas_s-result-item-wrapper {
  max-height: 87vh;
  overflow-x: hidden;
  overflow-y: auto; /* Enable vertical scroll if needed */
}

/* === Grid List of Product Items === */
#doosearchas_s-result-item-list {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(calc((1580px - 320px) / 6), 1fr)
  );
  gap: 15px;
  justify-items: center;
}

/* === Individual Product Card === */
#doosearchas_s-result-item-list .doosearchas_s-result-item {
  max-width: 275px !important;
  background-color: #fff;
  border: 2px solid transparent;
  border-radius: 10px !important;
  padding: 10px 10px 46px 10px;
  position: relative;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    90deg,
    rgba(211, 229, 211, 0.53),
    rgba(211, 229, 211, 0.53),
    rgba(211, 229, 211, 0.53)
  );
  transition: border-image-source 0.1s ease-in-out, border 0.1s ease-in-out;
}
#doosearchas_s-result-item-list .doosearchas_s-result-item:hover {
  border-image-source: linear-gradient(
    90deg,
    rgba(0, 128, 0, 0.404),
    rgba(144, 238, 144, 0.397),
    rgba(0, 100, 0, 0.407)
  );
}

/* === Zoom Image on Hover === */
#doosearchas_s-result-item-list
  .doosearchas_s-result-item:hover
  .doosearchas_s-img-scale {
  transform: scale(1.2);
  transition: all 0.6s ease;
}
#doosearchas_s-result-item-list .doosearchas_s-result-link {
  text-decoration: none !important;
}
#doosearchas_s-result-item-list .doosearchas_s-item-wrap {
  position: relative;
}

/* === Product Title Styling === */
#doosearchas_s-result-item-list .doosearchas_s-item-wrap div h3 {
  font-size: 13px;
  font-family: "Roboto", Sans-serif;
  margin: 0;
  color: #161616;
  font-style: normal;
  font-weight: 600;
  word-spacing: 0px;
  line-height: 1.4;
}
#doosearchas_s-result-item-list .doosearchas_s-item-wrap div p {
  font-size: 14px;
  margin-top: 6px;
}
#doosearchas_s-result-item-list .doosearchas_s-img-wrapper {
  min-height: 175px;
  overflow: hidden;
}
#doosearchas_s-result-item-list .doosearchas_s-img-wrapper img {
  max-width: 100%;
  vertical-align: middle;
  height: auto;
  transition: all 0.6s ease;
}
#doosearchas_s-result-item-list .doosearchas_s-product-labels {
  position: absolute;
  top: 0px;
  left: 0px;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

/* === Red Label (e.g., NEW, HOT) === */
#doosearchas_s-result-item-list
  .doosearchas_s-product-labels
  .doosearchas_s-tag {
  color: #fff;
  background-color: #ed4b4b;
  height: 20px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
#doosearchas_s-result-item-list
  .doosearchas_s-product-labels
  .doosearchas_s-off {
  color: #ed4b4b;
  background-color: #ffd9d9;
  border-color: #ffbfc1;
  height: 20px;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

/* === Product ID Separator Line === */
#doosearchas_s-result-item-list .doosearchas_s-product-id {
  border-right: 0;
  border-style: solid;
  border-top-width: 1px;
  border-color: rgb(219 223 216 / 1);
  border-bottom: 0;
  border-left: 0;
  position: relative;
  margin-top: 0;
  margin-bottom: 10px;
}
#doosearchas_s-result-item-list .doosearchas_s-product-id span {
  background-color: #fff;
  text-transform: uppercase;
  line-height: 12px;
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  color: rgb(174, 176, 173);
  font-size: 10px;
}
#doosearchas_s-result-item-list .doosearchas_s-content-wrap {
  padding: 0px 17px 17px 17px;
}

/* === Product Price Styling === */
#doosearchas_s-result-item-list .doosearchas_s-price-style {
  color: #b20808;
  font-weight: 600;
  font-size: 13px;
}
#doosearchas_s-result-item-list .doosearchas_s-price-style del {
  color: #ed4b4b;
  margin-right: 4px;
}
#doosearchas_s-result-item-list .doosearchas_s-instock {
  color: #019267;
  font-size: 11px !important;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 1px !important;
}
#doosearchas_s-result-item-list .doosearchas_s-outofstock {
  color: #b20808;
  font-size: 11px !important;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 1px !important;
}

/* === Product Features List === */
#doosearchas_s-result-item-list .doosearchas_s-product-features {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 10px;
  text-transform: uppercase;
  list-style: none;
  color: #4e4e4e;
  line-height: 1.7;
  padding: 0;
  margin: 0;
}
#doosearchas_s-result-item-list
  .doosearchas_s-product-features
  .doosearchas_s-checked {
  color: #019267;
}

/* === filter === */
#categoryFilter-brand {
  padding: 0 0 5px 2px;
}
#categoryFilter-category {
  padding: 0 0 5px 2px;
}

.doosearchas_s-category-filter {
  border-bottom: 1px solid #dbdbdb;
}
#doosearchas_s-result-filter {
  border-bottom: 1px solid rgb(196, 196, 196);
  outline: 0;
  border-top: none;
  max-height: 88vh; /* Allow scroll if content overflows vertically */
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px;
  box-sizing: border-box;
  padding: 10px 0px 0px 0px;
  scrollbar-width: thin;
  scrollbar-color: #a1a1a1 #f1f1f1;
  width: 20%;
  height: 100%;
  border-right: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background-color: #f7f7f7;
  min-width: 259px;
}
#doosearchas_s-result-filter .doosearchas_s-filter {
  background-color: #fff;
}

/* ==== Accordion Button Style ==== */
#doosearchas_s-result-filter .doosearchas_s-btn-style {
  all: unset;
  position: relative;
  background-color: #f7f7f7;
  outline: 0;
  border-top: 1px solid rgb(196, 196, 196);
  border-left: none;
  border-right: none;
  border-bottom: none;
  width: 100%;
  text-align: left;
  padding: 10px;
  font-size: 14px;
}
#doosearchas_s-result-filter .doosearchas_s-btn-style.doosearchas_s-expanded {
  background-color: #fff;
}
#doosearchas_s-result-filter .doosearchas_s-btn-style::after {
  content: "+"; /* Plus by default */
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
}
#doosearchas_s-result-filter
  .doosearchas_s-btn-style.doosearchas_s-expanded::after {
  content: "-"; /* Minus when expanded */
}

/* Collapsible Container */
#doosearchas_s-result-filter .doosearchas_s-collapsed {
  border-top: 1px solid rgb(196, 196, 196);
  outline: 0;
  max-height: min-content;
  overflow: hidden;
  opacity: 1;
  transition: opacity 0.3s;
}
#doosearchas_s-result-filter .doosearchas_s-collapsed.doosearchas_s-expanded {
  max-height: 0;
  opacity: 0;
  transition: opacity 0.5s;
}

/* ==== Filter Option Layout (Checkbox + Label) ==== */
#doosearchas_s-result-filter .doosearchas_s-selectorWrap {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-items: center;
  margin: 4px 11px 4px 4px;
}
#doosearchas_s-result-filter .doosearchas_s-selectorWrap label {
  all: unset;
  display: flex;
  align-items: center;
  cursor: pointer;
}
#doosearchas_s-result-filter label {
  all: unset;
}
/* Label Text */
#doosearchas_s-result-filter .doosearchas_s-selectorWrap label span {
  font-size: 14px;
  margin-left: 2px;
}
#doosearchas_s-result-filter .doosearchas_s-numberOfitem {
  all: unset;
  display: inline-block;
  background-color: #fff;
  padding: 0;
  border: 1px solid #858484;
  cursor: pointer;
  border-radius: 3px;
  width: 35px;
  height: 16px;
  text-align: center;
  font-size: 13px;
  line-height: normal;
  flex-shrink: 0;
  flex-grow: 0;
}

/* Style for View More/Less button */
/* Initially hide all items except the first 3 */
#doosearchas_s-result-filter
  .categoryFilter.doosearchas_s-collapsed
  .doosearchas_s-selectorWrap:nth-child(n + 4) {
  display: none;
}

/* Show all items when expanded */
#doosearchas_s-result-filter
  .categoryFilter.doosearchas_s-expanded
  .doosearchas_s-selectorWrap {
  display: flex;
}
#doosearchas_s-result-filter .doosearchas_s-view-more-btn {
  all: unset;
  background-color: transparent;
  border: none;
  outline: none;
  color: #87ad88;
  cursor: pointer;
  font-size: 13px;
  margin: 5px 0 7px 40%;
  transition: transform 0.2s ease-in-out;
}

/* Hover animation */
#doosearchas_s-result-filter .doosearchas_s-view-more-btn:hover {
  color: #4caf4f;
  animation: growShrink 0.6s infinite alternate;
}
/* Zoom in/out effect */
@keyframes growShrink {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.1);
  }
}

/*Checkmark */
/* Remove the default appearance of the checkbox */
#doosearchas_s-result-filter input[type="checkbox"] {
  all: unset;
  -webkit-appearance: none; /* For Safari and Chrome */
  -moz-appearance: none; /* For Firefox */
  appearance: none;
  width: 13px;
  height: 13px;
  border: 2px solid #ccc;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
  outline: none;
  background-clip: content-box; /* Creates space between the background and the border */
  padding: 2px; /* Adjust this for the gap size */
  flex-shrink: 0;
  flex-grow: 0;
}
#doosearchas_s-result-filter input[type="checkbox"]:checked::before {
  all: unset;
}

/* When the checkbox is checked */
#doosearchas_s-result-filter input[type="checkbox"]:checked::after {
  all: unset;
}
#doosearchas_s-result-filter input[type="checkbox"]:checked {
  background-color: #4caf50;
  border-color: #4caf50;
  position: relative;
  padding: 2px;
}

/* Large Devices (Desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  #doosearchas_s-result-filter input[type="checkbox"]:hover {
    background-color: #4caf4f62;
    border-color: #4caf4f62;
    position: relative;
    padding: 2px;
  }
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1200px) {
  #doosearchas_s-result-filter input[type="checkbox"]:hover {
    background-color: #4caf4f62;
    border-color: #4caf4f62;
    position: relative;
    padding: 2px;
  }
}

/* only price filter */
#doosearchas_s-result-filter .doosearchas_s-price-filter {
  max-width: 400px;
  margin: 20px;
  font-size: 16px;
}
#doosearchas_s-result-filter #doosearchas_s-minPriceText {
  max-width: 100px;
  min-width: 50px;
  margin-right: 2px;
}
#doosearchas_s-result-filter #doosearchas_s-minPriceText2 {
  max-width: 100px;
  min-width: 50px;
  margin-right: 2px;
}
#doosearchas_s-result-filter #doosearchas_s-maxPriceText {
  max-width: 100px;
  min-width: 50px;
  margin-left: 2px;
}
#doosearchas_s-result-filter #doosearchas_s-maxPriceText2 {
  max-width: 100px;
  min-width: 50px;
  margin-left: 2px;
}
#doosearchas_s-result-filter .doosearchas_s-slider-container {
  position: relative;
  height: 25px;
}
#doosearchas_s-result-filter .doosearchas_s-slider-container2 {
  position: relative;
  height: 25px;
}

/* Range slider input (shared style) */
#doosearchas_s-result-filter input[type="range"] {
  all: unset;
  position: absolute;
  width: 100%;
  height: 8px;
  background: transparent;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  margin: 2px;
}

/* Webkit slider track styling */
#doosearchas_s-result-filter
  input[type="range"]::-webkit-slider-runnable-track {
  all: unset;
  width: 100%;
  height: 8px;
  background: transparent;
}

/* Webkit slider thumb styling */
#doosearchas_s-result-filter input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #4caf50 !important;
  color: #4caf50 !important;
  outline-color: #4caf50 !important;
  border-color: #4caf50 !important;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

/* Firefox slider thumb styling */
#doosearchas_s-result-filter input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #4caf50 !important;
  color: #4caf50 !important;
  outline-color: #4caf50 !important;
  border-color: #4caf50 !important;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
}

/* Default slider track background (first slider) */
#doosearchas_s-result-filter .doosearchas_s-slider-track {
  position: absolute;
  top: 50%;
  left: 3px;
  right: 0;
  height: 8px;
  background: #ddd;
  z-index: 1;
  transform: translateY(-50%);
  border-radius: 5px;
}

/* Default slider track background (second slider) */
#doosearchas_s-result-filter .doosearchas_s-slider-track2 {
  position: absolute;
  top: 50%;
  left: 3px;
  right: 0;
  height: 8px;
  background: #ddd;
  z-index: 1;
  transform: translateY(-50%);
  border-radius: 5px;
}
#doosearchas_s-result-filter .doosearchas_s-slider-track.active {
  background: #4caf50;
}
#doosearchas_s-result-filter .doosearchas_s-slider-track2.active {
  background: #4caf50;
}
#doosearchas_s-result-filter .doosearchas_s-price-display {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
#doosearchas_s-result-filter .doosearchas_s-price-display2 {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}
/* Styling for price text input fields (first slider) */
#doosearchas_s-result-filter .doosearchas_s-price-display input[type="text"] {
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
/* Styling for price text input fields (second slider) */
#doosearchas_s-result-filter .doosearchas_s-price-display2 input[type="text"] {
  width: 100px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px;
}
#doosearchas_s-result-filter .doosearchas_s-slider-wrap {
  display: none;
}
#doosearchas_s-result-filter .doosearchas_s-slider-wrap2 {
  display: none;
}

/* === filter popup === */
.doosearchas_s-filter-open {
  display: none;
  background-color: #4caf50;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 5px 7px;
  cursor: pointer;
  align-items: center;
  gap: 5px;
  grid-area: 1 / 2 / 2 / 3;
}
.doosearchas_s-filter-close {
  position: absolute;
  top: 27px;
  right: 17px;
  background-color: #ff6b6b;
  color: #ffffff;
  border: none;
  border-radius: 3px;
  padding: 5px 7px;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 5px;
  z-index: 10;
}

/* When the popup is active */
.filter-active {
  left: 0px !important;
}

/* Extra Small Devices (Mobile Portrait) */
@media (max-width: 575.98px) {
  .doosearchas_s-result-filter {
    position: absolute;
    z-index: 100;
    left: -578px;
    transition: left 0.3s ease-in-out;
    background-color: #ffffff;
    width: 100% !important;
  }
  .doosearchas_s-filter-open {
    display: flex;
  }
  .doosearchas_s-filter-close {
    display: flex;
  }
}

/* Small Devices (Mobile Landscape) */
@media (min-width: 576px) and (max-width: 767.98px) {
  .doosearchas_s-result-filter {
    position: absolute;
    z-index: 100;
    left: -296px;
    transition: left 0.3s ease-in-out;
    width: 40% !important;
  }
  .doosearchas_s-filter-open {
    display: flex;
  }
  .doosearchas_s-filter-close {
    display: flex;
  }
}

/* Medium Devices (Tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
  .doosearchas_s-result-filter {
    position: absolute;
    z-index: 100;
    left: -340px;
    transition: left 0.3s ease-in-out;
    width: 30% !important;
  }
  .doosearchas_s-filter-open {
    display: flex;
  }
  .doosearchas_s-filter-close {
    display: flex;
  }
}

/* Large Devices (Desktops) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .doosearchas_s-filter-open {
    display: none;
  }
  .close-popup-btn {
    right: 3%;
  }
}

/* Extra Large Devices (Large Desktops) */
@media (min-width: 1200px) {
  .doosearchas_s-filter-open {
    display: none;
  }
}

/* === pagination logic === */
#doosearchas_s-pagination {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  justify-content: center;
}

/* Default Button Style */
#doosearchas_s-pagination button {
  padding: 6px 12px;
  border: 1px solid #ccc;
  background-color: #f2f2f2;
  color: #333;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s;
}
#doosearchas_s-pagination button:hover {
  background-color: #ddd;
}
#doosearchas_s-pagination button.active {
  background-color: #007bff;
  color: white;
  font-weight: bold;
  border-color: #007bff;
}

/* loading spinner logic */
.doosearchas_s-relative {
  position: relative;
  grid-area: 1 / 3 / 2 / 4;
}
.doosearchas_s-spinnerSpan {
  display: none;
  background-color: transparent;
}
.doosearchas_s-spinnerSpan.visible {
  display: inline-block;
}
.doosearchas_s-spinnerSpan {
  position: absolute;
  top: 4px;
  right: 8px;
}

/* Inline loading spinner animation */
.doosearchas_s-spinnerSpan .spinner-4 {
  width: 30px;
  --b: 8px; /* Border width */
  aspect-ratio: 1; /* Makes the spinner a perfect square */
  border-radius: 50%; /* Makes it circular */
  padding: 1px;

  /* Spinner fill using conic gradient */
  background: conic-gradient(#0000 10%, #adadad) content-box;

  /* Creates rotating segments using masks */
  -webkit-mask: repeating-conic-gradient(
      #0000 0deg,
      #000 1deg 20deg,
      #0000 21deg 36deg
    ),
    radial-gradient(
      farthest-side,
      #0000 calc(100% - var(--b) - 1px),
      #000 calc(100% - var(--b))
    );
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;

  /* Animation loop */
  animation: s4 1s infinite steps(10);
}

/* Keyframes for spinner rotation */
@keyframes s4 {
  to {
    transform: rotate(1turn);
  }
}
.doosearchas_s-spinnerSpan2 {
  background: #fff;
  display: none;
  height: 10vh;
  justify-content: center;
  align-items: center;
}
.doosearchas_s-spinnerSpan2.visible {
  display: flex;
}

/* Larger spinner variant for fullscreen loading */
.doosearchas_s-spinnerSpan2 .spinner-4 {
  width: 50px; /* Larger than inline spinner */
  --b: 8px;
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 1px;
  background: conic-gradient(#0000 10%, #adadad) content-box;

  /* Same mask effect as inline version */
  -webkit-mask: repeating-conic-gradient(
      #0000 0deg,
      #000 1deg 20deg,
      #0000 21deg 36deg
    ),
    radial-gradient(
      farthest-side,
      #0000 calc(100% - var(--b) - 1px),
      #000 calc(100% - var(--b))
    );
  -webkit-mask-composite: destination-in;
  mask-composite: intersect;
  animation: s4 1s infinite steps(10);
}

/* Re-using the same keyframe animation for spinner rotation */
@keyframes s4 {
  to {
    transform: rotate(1turn);
  }
}

/* === Search History === */
#doosearchas_s-info {
  max-height: 75vh;
  overflow-y: auto; /* Allows vertical scrolling */
  display: grid;
  grid-template-columns: 1fr minmax(420px, 3fr) 5fr 1fr; /* Four-column layout with flexible center */
}

/* === Custom Scrollbar for doosearchas_s-info (Webkit Browsers) === */
#doosearchas_s-info::-webkit-scrollbar {
  width: 8px;
}
#doosearchas_s-info::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
#doosearchas_s-info::-webkit-scrollbar-thumb {
  background: #a1a1a1;
  border-radius: 10px;
}
#doosearchas_s-info::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === Custom Scrollbar for Firefox === */
#doosearchas_s-info {
  scrollbar-width: thin;
  scrollbar-color: #a1a1a1 #f1f1f1;
}
#doosearchas_s-history-wrapper {
  display: grid;
  grid-template-columns: 1fr 2fr;
  grid-column: 2 / -4;
  margin: 20px 40px 1px 0px;
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.2);
}

/* Extra Small Devices (Mobile Portrait) */
@media (max-width: 575.98px) {
  #doosearchas_s-history-wrapper {
    grid-column: 2 / 3;
    margin: 20px 0px 1px 0px;
    grid-template-columns: 1fr;
  }
  #doosearchas_s-info {
    grid-template-columns: 1fr 5fr 1fr;
    grid-template-rows: min-content min-content;
  }
}

/* Small Devices (Mobile Landscape) */
@media (min-width: 576px) and (max-width: 767.98px) {
  #doosearchas_s-history-wrapper {
    grid-column: 2 / 3;
    margin: 20px 0px 1px 0px;
  }
  #doosearchas_s-info {
    grid-template-columns: 1fr 4fr 1fr;
    grid-template-rows: min-content min-content;
  }
}

/* Medium Devices (Tablets) */
@media (min-width: 768px) and (max-width: 991.98px) {
  #doosearchas_s-history-wrapper {
    grid-column: 2 / 3;
    margin: 20px 0px 1px 0px;
  }
  #doosearchas_s-info {
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: min-content min-content;
  }
}
.doosearchas_s-history {
  background-color: #f8f8f7;
}
.doosearchas_s-history h4 {
  color: rgb(59 66 56 /1);
  flex: 0 0 116px;
  font-size: 16px;
  font-weight: 600;
  padding: 8px 4px 0 12px;
  text-shadow: 0 1px #fff;
  text-transform: capitalize;
  font-family: proxima_nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Ubuntu, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* Container for History List */
.doosearchas_s-history-list {
  position: relative;
  min-height: 44.5vh;
}
#doosearchas_s-wrapper .doosearchas_s-history-ul {
  height: 90%;
  list-style: none;
  padding: 0;
  margin: 0;
}
#doosearchas_s-wrapper .doosearchas_s-history-ul {
  overflow-y: auto;
}

/* === Custom Scrollbar for History List (Webkit) === */
#doosearchas_s-wrapper .doosearchas_s-history-ul::-webkit-scrollbar {
  width: 8px;
}
#doosearchas_s-wrapper .doosearchas_s-history-ul::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
#doosearchas_s-wrapper .doosearchas_s-history-ul::-webkit-scrollbar-thumb {
  background: #a1a1a1;
  border-radius: 10px;
}
#doosearchas_s-wrapper
  .doosearchas_s-history-ul::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* === Custom Scrollbar for History List (Firefox) === */
#doosearchas_s-wrapper .doosearchas_s-history-ul {
  scrollbar-width: thin;
  scrollbar-color: #a1a1a1 #f1f1f1;
}

/*  "Clear All" Button at Bottom of History  */
#doosearchas_s-wrapper .doosearchas_s-clear-all {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #f8f8f7;
  margin: 0;
  cursor: pointer;
  text-align: center;
  padding-top: 8px;
  padding-bottom: 8px;

  color: #84b636;
  flex: 0 0 116px;
  font-size: 16px;
  font-weight: 600;
  text-shadow: 0 1px #fff;
  text-transform: capitalize;
  font-family: proxima_nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Ubuntu, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.doosearchas_s-history-li {
  border-bottom: 1px solid #eee;
}
.doosearchas_s-history-li:hover {
  background-color: #eeeeee;
}
.doosearchas_s-histroy-layout {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px 10px 10px;
}

/* History Icon Style */
.doosearchas_s-history-icon div {
  all: unset;
  display: inline-block;
  width: 15px;
  height: 15px;
  transform: translateY(5px);
  margin-right: 5px;
}

/* Text Styling for Each History Entry */
.doosearchas_s-history-text {
  color: rgb(77, 84, 74);
  flex: 0 0 116px;
  font-size: 14px;
  font-weight: 600;
  padding: 0;
  text-shadow: 0 1px #fff;
  cursor: default;
  text-transform: capitalize;
  font-family: proxima_nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Ubuntu, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
}
.doosearchas_s-history-remove {
  all: unset;
  outline: none;
  padding: 0px;
  display: inline-block;
  border: none;
  background: #ffffff00;
  color: #dc3545;
  cursor: pointer;
  font-size: 14px;
}

/* === suggtions === */
.doosearchas_s-suggestions-wrapper {
  position: absolute;
  top: 42px;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background-color: white;
  border: 1px solid #ddd;
  display: none;
  z-index: 1000;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  border-radius: 8px;
}
.doosearchas_s-suggestion-item {
  text-align: center;
  font-size: 15px;
  padding: 10px;
  cursor: pointer;
}
.doosearchas_s-suggestion-item:hover {
  background-color: #f0f0f0;
}
.doosearchas_s-suggestion-item.doosearchas_s-active {
  background-color: #f0f0f0;
  color: #000;
}

/* === cart === */
/* Prevents default underline on cart action links */
.doosearchas_s-cart-actions a {
  text-decoration: none !important;
}
#doosearchas_s-result-item-list .doosearchas_s-add-to-cart {
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: inline-block;
  background-color: #84b636;
  cursor: pointer;
  text-decoration: none !important;
  max-width: calc(100% - 30px);
  width: 100%;
  min-height: 40px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
#doosearchas_s-result-item-list .doosearchas_s-add-to-cart:hover {
  background-color: #4caf50;
  color: #fff;
}

/* Icon inside Add to Cart button */
#doosearchas_s-result-item-list .doosearchas_s-icon-add-to-cart {
  display: inline-block;
  margin-top: 7px;
  fill: #fff;
  transform: translateY(2px);
}
#doosearchas_s-result-item-list .doosearchas_s-icon-add-to-cart div {
  display: inline-block;
}
#doosearchas_s-result-item-list .doosearchas_s-cart-text {
  display: inline-block;
  transform: translateY(-3px);
}

/* Animation class for icon flipping effect */
#doosearchas_s-result-item-list .doosearchas-animation-icon div {
  animation: flip 2s infinite;
}

/* Flip animation */
@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}
.doosearchas_s-cart-icon-svg {
  width: 26px;
  display: flex;
}
.doosearchas_s-cart-icon-wrapper {
  visibility: hidden;
  display: block;
  grid-area: 1 / 4 / 2 / 5;
}

/* Link styling for cart icon */
.doosearchas_s-cart-icon-link {
  text-decoration: none;
  color: white;
  font-size: 24px;
  position: relative;
  outline: none;
}

/* Item count bubble on cart icon */
.doosearchas_s-cart-item-count {
  position: absolute;
  top: -10px;
  right: -10px;
  color: white;
  align-items: center;
  border-radius: 1em;
  box-sizing: border-box;
  display: flex;
  font-size: 14px;
  font-weight: 600;
  height: 1.4285714286em;
  justify-content: center;
  min-width: 1.4285714286em;
  padding: 0 0.25em;
}
.doosearchas-cart-empty {
  background-color: rgb(166, 166, 166);
}
.doosearchas-cart-not-empty {
  background-color: red;
}

/* Disabled state (e.g. during processing) */
.doosearchas-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: not-allowed;
}

/* Animation for delete icon */
.doosearchas-delete-animation div {
  animation: flip 2s infinite;
}
@keyframes flip {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(-360deg);
  }
}
.doosearchas_s-cart-popup {
  all: unset;
  position: fixed;
  top: 0;
  right: -100%;
  width: 330px;
  height: 100vh;
  background: white;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  z-index: 1000;
  overflow-y: auto;
  display: grid;
  grid-template-rows: min-content 1fr min-content;
}

/* Active state (visible) of cart popup */
.doosearchas_s-cart-popup.active {
  right: 0;
}
.doosearchas_s-cart-popup-header {
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px 0;
  margin-bottom: 20px;
}
.doosearchas_s-cart-popup-header h3 {
  margin: 0;
  color: rgb(59 66 56 / 1);
  flex: 0 0 116px;
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 1px #fff;
  text-transform: capitalize;
  font-family: proxima_nova, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
    Ubuntu, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif;
}

/* Close button for cart */
.doosearchas_s-cart-popup-header #doosearchas_s-cart-popup-close {
  all: unset;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  transition: transform 0.3s, -webkit-transform 0.3s;
  outline: none;
}
.doosearchas_s-empty-cart-wrapper {
  text-align: center;
  display: none;
}

/* Icon for empty cart state */
.doosearchas_s-empty-cart-icon svg {
  fill: #ededed;
}

/* Individual cart item layout */
.doosearchas_s-cart-item {
  display: grid;
  grid-template-columns: min-content 1fr min-content;
  align-items: start;
  margin-bottom: 25px;
}

/* Item image */
.doosearchas_s-cart-item img {
  all: unset;
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-right: 10px;
  margin-left: 10px;
}
.doosearchas_s-cart-item-details {
  transform: translateY(-2px);
}
.doosearchas_s-cart-item-details h4 {
  margin: 0px;
  font-size: 15px;
  display: block;
  color: rgba(16, 16, 16, 0.9);
  word-wrap: break-word;
  font-weight: 600;
  font-family: "Lexend Deca (wd)", Arial, Helvetica, sans-serif;
  text-transform: var(--wd-entities-title-transform);
  line-height: 1.4;
}

/* Item price */
.doosearchas_s-cart-item-price {
  all: unset;
  color: #b20808;
  font-weight: 600;
  font-size: 13px;
}
.doosearchas_s-quantity-controls {
  display: flex;
  margin-top: 5px;
}

/* Decrease quantity button */
#doosearchas_s-wrapper .doosearchas_s-decrease-quantity {
  all: unset;
  padding: 0 5px;
  min-width: 25px;
  min-height: unset;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  box-shadow: none;
  border-start-start-radius: 5px;
  border-end-start-radius: 5px;
  height: 32px;
  cursor: pointer;
  outline: none;
  text-align: center;
}

/* Increase quantity button */
#doosearchas_s-wrapper .doosearchas_s-increase-quantity {
  all: unset;
  padding: 0 5px;
  min-width: 25px;
  min-height: unset;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background: rgb(255, 255, 255);
  box-shadow: none;
  height: 32px;
  cursor: pointer;
  outline: none;
  border-start-end-radius: 5px;
  border-end-end-radius: 5px;
  text-align: center;
}

#doosearchas_s-wrapper .doosearchas_s-quantity-input {
  all: unset;
  width: 30px;
  border-radius: 0;
  border-right: none !important;
  border-left: none !important;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-size: 14px;
  appearance: none;
  max-width: 100%;
  vertical-align: middle;
  outline: none;
  text-align: center;
}

/* Firefox-specific fix */
.doosearchas_s-quantity-input {
  -moz-appearance: textfield;
}

/* Chrome/Safari spin button removal */
.doosearchas_s-quantity-input::-webkit-inner-spin-button,
.doosearchas_s-quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove button for cart item */
#doosearchas_s-wrapper .doosearchas_s-remove-cart-item {
  all: unset;
  padding: 0 15px 0 5px;
  margin: 0;
  cursor: pointer;
  border: 0;
  outline: 0;
  background-color: transparent;
}
.doosearchas_s-remove-cart-item div {
  display: inline-block;
}
.doosearchas_s-remove-cart-item div img {
  width: 21px;
  height: 21px;
}

/* Cart footer section */
.doosearchas_s-cart-footer {
  margin-bottom: 50px;
}
.doosearchas_s-cart-item-total-price {
  font-size: 16px;
  font-weight: bold;
  margin: 15px 0;
  border-top: 1px solid #ccc;
  padding-top: 15px;
  text-align: center;
}

/* Cart action buttons (e.g., checkout, view cart) */
.doosearchas_s-cart-actions {
  display: flex;
  justify-content: space-around;
}

/* Style for cart action buttons */
.doosearchas_s-cart-actions a {
  all: unset;
  text-decoration: none;
  padding: 5px 30px;
  background-color: #f7f7f8;
  color: black;
  transition: background-color 0.3s;
  font-size: 14px;
  outline: none;
  border: 2px solid #4caf50;
}

/* Hover effect for cart action buttons */
.doosearchas_s-cart-actions a:hover {
  background-color: #4caf50;
  color: white;
  cursor: pointer;
}
#doosearchas_s-cart-item-wrapper {
  overflow-y: auto;
}

/* Webkit scroll styling */
#doosearchas_s-cart-item-wrapper::-webkit-scrollbar {
  width: 8px;
}
#doosearchas_s-cart-item-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}
#doosearchas_s-cart-item-wrapper::-webkit-scrollbar-thumb {
  background: #a1a1a1;
  border-radius: 10px;
}
#doosearchas_s-cart-item-wrapper::-webkit-scrollbar-thumb:hover {
  background: #555;
}

/* Firefox scroll styling */
#doosearchas_s-cart-item-wrapper {
  scrollbar-width: thin;
  scrollbar-color: #a1a1a1 #f1f1f1;
}

/* Apply a dimming effect and disable interaction for specific result items */
.doosearchas_s-result-item.doosearchas-item-disabled {
  opacity: 0.7;
  pointer-events: none; /* Disable all mouse interactions */
  position: relative;
}

/* Success message shown after adding to cart */
.doosearchas-cart-success-msg {
  position: absolute;
  top: 12px;
  right: 35px;
  background-color: #ffffff;
  color: #28a745;
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  font-weight: 500;
  z-index: 1000; /* Ensure it's on top */
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: 0;
  animation: slideFadeIn 0.4s ease forwards,
    slideFadeOut 0.5s ease 2.8s forwards;
}

/* Add a checkmark icon before the success message */
.doosearchas-cart-success-msg::before {
  content: "✔️";
  font-size: 16px;
  display: inline-block;
}

/* Keyframe animation for fade-in effect with slide */
@keyframes slideFadeIn {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Keyframe animation for fade-out with upward slide */
@keyframes slideFadeOut {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

/* "View Cart" button styling */
.doosearchas_s-view-cart {
  z-index: -1; /* Initially behind other content */
  position: absolute;
  bottom: 15px;
  left: 15px;
  display: inline-block;
  background-color: #b68f36;
  cursor: pointer;
  text-decoration: none !important;
  max-width: calc(100% - 30px); /* Responsive max width */
  width: 100%;
  min-height: 40px;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  text-align: center;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.doosearchas_s-view-cart:hover {
  background-color: #54431d;
  color: #fff;
}

/* Icon within the "View Cart" button */
.doosearchas_s-view-cart-icon {
  display: inline-block;
  margin-top: 7px;
  fill: #fff;
  transform: translateY(2px);
}
.doosearchas_s-view-cart-icon div {
  display: inline-block;
}
.doosearchas_s-view-cart-text {
  display: inline-block;
  transform: translateY(-3px);
  margin-left: 2px;
}
/* shrot description */
.doosearchas_s-product-description {
  display: flex;
  flex-direction: column;
  gap: 0px;
  font-size: 10px !important;
  text-transform: uppercase;
  list-style: none;
  color: #4e4e4e;
  line-height: 1.7;
  padding: 0;
  margin: 0;
}
