:root {
        --line: rgba(11, 18, 32, .12);
        --shadow: 0 12px 36px rgba(11, 18, 32, .12);
        --theme: #e6ba27 ;
}
.toggle-search {
    background: url("../images/search-icon.png") no-repeat center center;
    width: 16px;
    height: 18px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    cursor: pointer;
    display: block;
}
/* *******************************
    SEARCH MODULE
******************************* */
#block-bootstrap-subtheme-search {
  position: absolute;
  right: 30px;
  bottom: 0;
  /* transform: translateY(100%); */
  z-index: 99;
  visibility: hidden;
  opacity: 0;
  transform: translateY(0);
  transition: transform 0.4s ease;
}
#block-bootstrap-subtheme-search.active {
  visibility: visible;
  opacity: 1;
  transform: translateY(100%);
}
#search-block-form {
  padding: 14px;
  background: #ffff;
  width: min(460px, calc(100vw - 24px)) !important;
  border: 1px solid var(--line);
  border-radius: 18px;
  z-index: 60;
  box-shadow: var(--shadow);
}
/* #search-block-form > div {
    margin: 0;
} */
#search-block-form > div:first-child {
  margin: 0;
  border: 1px solid var(--line);
  padding: 10px 12px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.96),
    rgba(255, 255, 255, 0.88)
  );
  border-radius: 999px;
}
#search-block-form input[type="search"] {
  box-shadow: unset;
  -webkit-box-shadow: unset;
  border-radius: 0;
  border: 1px solid transparent;
  background: transparent;
  height: 100%;
}
#search-block-form input[type="search"]:hover,
#search-block-form input[type="search"]:focus {
  border: none;
  outline: none;
  box-shadow: unset;
  -webkit-box-shadow: unset;
}
#search-block-form button[type="submit"] {
}
#search-block-form button[type="submit"] span.icon {
  display: none;
}
#search-block-form button[type="submit"] span.sr-only {
  width: auto;
  height: auto;
  position: unset;
  display: block;
  clip: unset;
  border: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0)),
    var(--theme);
  color: #fff;
  border-radius: 999px;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(11, 18, 32, 0.12);
}
#search-block-form button[type="submit"] {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
}

#search-block-form button[type="submit"]:hover,
#search-block-form button[type="submit"]:focus {
  outline: none;
}

/* search icon feature */
/* Parent button ko relative kar dein */
#searchWrap .icon-btn {
  position: relative;
}

/* Dono SVG same position par */
#searchWrap svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}

/* Close icon initially hidden */
#searchWrap .iconclose {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(-90deg);
}

/* Active state */
#searchWrap.active .searchicon {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.8) rotate(90deg);
}

#searchWrap.active .iconclose {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
}