@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

#search_widget {
  min-width: 400px;
  margin-right: 3rem;

  &.user-logged {
    margin-right: 0;
    min-width: 300px;
    max-width: 300px;
    margin: 0 auto;
  }

  .search-border {
    padding: 2px;
    border-radius: 10px;
    background: conic-gradient(from var(--angle), transparent 50%, #06CCFF);
    animation: rotate-search-border 6s linear infinite;
    box-shadow: 3px 3px 26px 0 rgba(0, 0, 0, 0.10);

    &:focus-within {
      animation: none;
      background: #06CCFF;
    }
  }

  form {
    position: relative;
    border-radius: 8px;
    background-color: #fff;
    padding: 0.5rem 3rem 0.5rem 1.12rem;

    input {
      font-size: 14px;
      width: 100%;
      border: none;
      height: inherit;
      line-height: inherit;
      padding: 0 1px;

      &:focus {
        outline: none;
      }
      &:placeholder {
        color: #142D48;
        opacity: 0.3;
      }
    }

    i.clear {
      position: absolute;
      right: 3rem;
      top: 50%;
      transform: translateY(-50%);
      display: none;
      cursor: pointer;
    }

    i.search {
      display: none;
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      color: #b9c0c9;
      font-size: 1.8rem;
    }
    button.search-submit {
      display: none;
    }

    button.search-icon-submit {
      position: absolute;
      right: 1rem;
      top: 50%;
      transform: translateY(-50%);
      background-image: url('/themes/rexroth-2025/assets/img/icon-search.svg');
      background-repeat: no-repeat;
      background-position: center center;
      background-color: transparent;
      color: transparent;
      border: 0;
      width: 24px;
    }
  }
}
@media screen and (max-width: 1000px) {
  #search_widget {
    min-width: auto;
    margin: 0 1rem 0 2rem;
  }
}

@media screen and (max-width: 767px) {
  #search_widget {
    margin-left: 2rem;
    margin-right: 2rem;
  }
    i.clear {
      position: absolute;
      right: 3rem;
      top: 50%;
      transform: translateY(-50%);
      display: none;
    }
}

#mobile_top_menu_wrapper {
  #search_widget {
    margin: 0 1rem 1rem 1rem;
  }
}

.page-home #search_widget {
  width: 946px;
  max-width: 946px;
  margin: 0 auto;

  .search-border {
    padding: 0;
    background: none;
    animation: none;
  }

  form {
    background: #fff;
    border: 0;
    border-radius: 0;
    box-shadow: 3px 3px 26px 0 rgba(0, 0, 0, 0.10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 12px 12px 100px;

    @media screen and (max-width: 600px) {
      padding-left: 50px;
    }
   
    button.search-icon-submit {
      display: none;
    }

    button.search-submit {
      display: block !important;
      position: static;
      transform: none;
      background-color: #06CCFF;
      line-height: 62px;
      padding: 0 40px;
      border: 0;
      border-radius: 10px;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
      color: #142D48;
      @media screen and (max-width: 600px) {
        padding: 0 20px;
      }
      @media screen and (max-width: 400px) {
        padding: 0 1rem;
        line-height: 45px;
      }

      &:hover {
        background-color: #142D48;
        color: #fff;
      }
    }

    input[type="text"] {
      &::placeholder {
        color: #142D48;
      }
    }
  }

  i.search {
    display: block;
    position: absolute;
    left: 33px;
    top: 50%;
    transform: translateY(-50%);
    color: #142D48;
    font-size: 1.8rem;
    @media screen and (max-width: 600px) {
      left: 15px;
    }
  }

  i.clear {
    position: absolute;
    right: 10rem;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    cursor: pointer;
    @media screen and (max-width: 600px) {
      right: 7rem;
    }
    @media screen and (max-width: 400px) {
      right: 6rem;
    }
  }
}

@media screen and (max-width: 1060px) {
  .page-home #search_widget {
    max-width: auto;
    width: auto;
  }
}

.searchbar-autocomplete.ui-autocomplete {
  border: 0;
  box-shadow: 3px 3px 26px 0 rgba(0, 0, 0, 0.10);
  padding: 0;
  border-radius: 0;
  align-items: center;
  max-height: 80vw;
  overflow: scroll;
  width: 600px !important;
  @media screen and (max-width: 767px) {
    width: 100% !important;
    left: 0 !important;
  }

  li.ui-menu-item {
    font-family: Sora, sans-serif;
    display: flex;
    justify-content: space-between;
    padding: 1.3rem 2rem;
    align-items: center;
    gap: 2rem;
    position: relative;

    a.result-wrapper {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 2rem;
      position: relative;
      flex-grow: 1;
      padding: 0;
      
      p {
        margin-bottom: 0;
      }

      span.img {
        flex-grow: 0;
        width: 80px;
        height: 80px;

        img {
          width: 100%;
        }
      }

      p.text {
        flex-grow: 1;

        h3 {
          color: #142d48;
          font-size: 18px;
          font-weight: 700;
          margin-bottom: 0;
        }
        
        p.ref, p.name {
          color: #142d48;
          opacity: 0.5;
          font-size: 13px;
          font-weight: 500;
          text-wrap: nowrap;
        }

        p.ref {
          margin-bottom: 0.5rem;
        }
      }


    }

    span.right-box {
      flex-grow: 0;
      text-align: center;

      .forced-login {
        color: red;
        text-decoration: underline;
        font-size: 16px;
      }

      .price {
        font-size: 13px;
        font-weight: 700;
        color: #142d48;
        line-height: 35px;
      }

      .cart-btn {
        width: 64px;
        height: 38px;
        display: block;
        border-radius: 7px;
        background-color: #06CCFF;
        background-repeat: no-repeat;
        background-position: center;
        background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M15%2015C13.8954%2015%2013%2015.8954%2013%2017C13%2018.1046%2013.8954%2019%2015%2019C16.1046%2019%2017%2018.1046%2017%2017C17%2015.8954%2016.1046%2015%2015%2015ZM15%2015H7.29395C6.83288%2015%206.60193%2015%206.41211%2014.918C6.24466%2014.8456%206.09938%2014.7291%205.99354%2014.5805C5.8749%2014.414%205.82719%2014.1913%205.73274%2013.7505L3.27148%202.26465C3.17484%201.81363%203.12587%201.58838%203.00586%201.41992C2.90002%201.27135%202.75477%201.15441%202.58732%201.08205C2.39746%201%202.16779%201%201.70653%201H1M4%204H16.8732C17.595%204%2017.9555%204%2018.1978%204.15036C18.41%204.28206%2018.5653%204.48862%2018.633%204.729C18.7104%205.00343%2018.611%205.34996%2018.411%206.04346L17.0264%2010.8435C16.9068%2011.2581%2016.8469%2011.465%2016.7256%2011.6189C16.6185%2011.7547%2016.4772%2011.861%2016.317%2011.9263C16.1361%2012%2015.9211%2012%2015.4921%2012H5.73047M6%2019C4.89543%2019%204%2018.1046%204%2017C4%2015.8954%204.89543%2015%206%2015C7.10457%2015%208%2015.8954%208%2017C8%2018.1046%207.10457%2019%206%2019Z%22%20stroke%3D%22%23142D48%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
      }
    }

    /* reset pro focus prvek*/
    a.result-wrapper.ui-state-focus {
      border: 0;
      margin: 0;
      border-radius: 0;
      background: none;
    }

    &::after {
      content: " ";
      display: block;
      position: absolute;
      top: 0;
      left: 5%;
      width: 90%;
      height: 1px;
      background-color: #f5f5f5;
    }
    
    &:hover {
      background: #f5f5f5;
    }
  }


  li:first-child a.result-wrapper::after {
      display: none;
  }
}

@media screen and (max-width: 767px) {
  .searchbar-autocomplete.ui-autocomplete {
  }
}

#ui-id-2.searchbar-autocomplete {
  width: 946px !important;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.60);
  backdrop-filter: blur(10px);

  li {
    position: relative;
    padding: 17px 30px;

    &::before {
      content: " ";
      position: absolute;
      top: 0;
      left: 30px;
      display: block;
      width: calc(100% - 60px);
      height: 1px;
      background: rgba(20, 45, 72, 0.1);
    }

    &::after {
      display: none;
    }
    
    &:first-child {
      &::before {
        display: none;
      }
    }

    &:hover {
      background: rgba(0, 0, 0, 0.02);
    }
    
    a {
      padding: 0;
    }

    .img {
      width: 51px;
      height: 51px;

      img {
        width: 100%;
      }
    }

    .name {
      position: absolute;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      @media screen and (max-width: 750px) {
        position: static;
        transform: none;
      }
    }

    .ref {
      margin-bottom: 0;
    }

    .right-box {
      display: none;
    }
  }
}

@media screen and (max-width: 1000px) {
  #ui-id-2.searchbar-autocomplete {
    width: 100% !important;
  }
}

@keyframes rotate-search-border {
  to {
    --angle: 360deg;
  }
}