:root {
  --blimburn-bas-accent: #FF5C15;
  --blimburn-bas-white: #fff; 
  --blimburn-bas-light: #f1f1f1;
  --blimburn-bas-gray: #999;
  --blimburn-bas-black: #000;
  --blimburn-bas-font-size: 16px;
  --blimburn-bas-font-size-sm: 14px;
  --blimburn-bas-font-size-lg: 18px;
}

.blimburn-bas-wrapper,
.blimburn-bas-form {
  position: relative;
  z-index: 999;
}

.blimburn-bas-wrapper--desktop {
  display: none;

  @media only screen and (min-width: 768px) {
    display: block;
  }

}
.blimburn-bas-wrapper--mobile {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 800px;
  overflow: hidden;
  background-color: var(--blimburn-bas-white);
  padding: 2rem 1.5rem 1.5rem 1.5rem;
  
  @media only screen and (min-width: 768px) {
    display: none;
  }

  .blimburn-bas-results {
    position: relative;
    margin-top: 1rem;
    box-shadow: none;
    top: auto;
  }
}

.blimburn-bas-mobile-btn {
  display: flex;
  font-size: 20px;
  width: 20px;
  height: 20px;
  line-height: 20px;
  color: var(--blimburn-bas-black);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;

  @media only screen and (min-width: 768px) {
    display: none;
  }
}

#blimburn-bas-mobile-close {
  display: flex;
  margin: 0 0 1rem auto;
}

input[type=text].blimburn-bas-input {
  padding: 5px 16px;
  border-radius: 50px;
  border: 1px solid var(--blimburn-bas-black);
  font-size: var(--blimburn-bas-font-size);
  height: 36px;
  line-height: 36px;
  width: 100%;
}

input[type=text].blimburn-bas-input:focus,
input[type=text].blimburn-bas-input:focus-visible {
  outline: var(--blimburn-bas-accent) solid 1px;
  border-color: var(--blimburn-bas-accent);
}

.blimburn-bas-results {
  position: absolute;
  top: calc(100% + 1px);
  z-index: 9999;
  width: 100%;
  left: 0;
  background-color: var(--blimburn-bas-white);
  box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px;

  a, a:hover {
    color: var(--blimburn-bas-black);
    text-decoration: none;
  }
}

.blimburn-bas-results_list {
  padding: 0;
  list-style: none;
}

.blimburn-bas-product_link {

  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  padding: .5rem;
  height: auto !important;
  text-align: left !important;
  flex-direction: row !important;
  justify-content: flex-start !important;

  &:hover {
    background-color: var(--blimburn-bas-light);
  }
}

.blimburn-bas-more-strains-link {
  width: 100% !important;
  height: auto !important;
}

.blimburn-bas-product_image {
  width: 35px;
  height: 35px;
  margin-right: 1rem;
}

.blimburn-bas-product_name {
  font-size: var(--blimburn-bas-font-size);
  margin: 0;
}

.blimburn-bas-info {

  * {
    text-align: center;
    padding: .5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: var(--blimburn-bas-font-size);
  }

  a {
    color: var(--blimburn-bas-white);
    background-color: var(--blimburn-bas-accent);
    text-decoration: none;

    &:hover {
      color: var(--blimburn-bas-white);
    }
  }
}

.blimburn-bas-no-found-extra-message {
  padding: .5rem;
  text-align: center;

  a {
    color: var(--blimburn-bas-accent);
  }
}

button.blimburn-bas-submit {
  border: 0;
  background-color: transparent;
  position: absolute;
  right: 13px;
  top: calc(50% - 13px);
  width: 26px;
  height: 26px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--blimburn-bas-black);
  transition: all .3s;
  border-radius: 0;

  &:hover, &:focus {
    background-color: transparent;
    color: var(--blimburn-bas-black);
    outline: none;
  }
}
button.blimburn-bas-submit:hover {
  background-color: transparent;
  color: var(--blimburn-bas-black);
}

.blimburn-bas-loader {
  display: none;
  position: absolute;
  right: 1rem;
  top: calc(50% - 8px);
  width: 16px;
  height: 16px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 2px solid var(--blimburn-bas-black);
  animation:
    l20-1 0.8s infinite linear alternate,
    l20-2 1.6s infinite linear;
}
@keyframes l20-1{
   0%    {clip-path: polygon(50% 50%,0       0,  50%   0%,  50%    0%, 50%    0%, 50%    0%, 50%    0% )}
   12.5% {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100%   0%, 100%   0%, 100%   0% )}
   25%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 100% 100%, 100% 100% )}
   50%   {clip-path: polygon(50% 50%,0       0,  50%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   62.5% {clip-path: polygon(50% 50%,100%    0, 100%   0%,  100%   0%, 100% 100%, 50%  100%, 0%   100% )}
   75%   {clip-path: polygon(50% 50%,100% 100%, 100% 100%,  100% 100%, 100% 100%, 50%  100%, 0%   100% )}
   100%  {clip-path: polygon(50% 50%,50%  100%,  50% 100%,   50% 100%,  50% 100%, 50%  100%, 0%   100% )}
}
@keyframes l20-2{ 
  0%    {transform:scaleY(1)  rotate(0deg)}
  49.99%{transform:scaleY(1)  rotate(135deg)}
  50%   {transform:scaleY(-1) rotate(0deg)}
  100%  {transform:scaleY(-1) rotate(-135deg)}
}