@import "../assets/vendor/select2/select2.css";

select,
input[type="number"] {
  @apply appearance-none;
  &::-webkit-outer-spin-button,
  &::-webkit-inner-spin-button {
    @apply appearance-none;
  }
  -moz-appearance: textfield !important;
}

.checkout-steps{

  .form--check input {
    &+ .input {
      @apply border-primary;
    }
    &:checked + .input {
      @apply border-primary text-primary;
    }
  }
}
.form {
  &--input {
    @apply relative;
    margin-bottom: 15px;
    &:only-child, &:last-child {
      margin-bottom: 0px;
    }

    input {

      @apply block w-full rounded-full px-4 py-3 leading-5 text-sm border outline-none shadow-none bg-white text-black border-grayLight focus:border-primary transition-colors duration-500 ease-in-out;
      font-size: 18px;
      &:disabled {
        @apply bg-grayLight text-gray border-gray border-opacity-50 opacity-75;
      }
    }

    textarea {
      @apply block w-full rounded-lg px-4 py-3 leading-5 text-sm border outline-none shadow-none bg-white text-black border-grayLight focus:border-primary transition-colors duration-500 ease-in-out resize-none h-40;
    font-size: 18px ;
      &:disabled {
        @apply bg-grayLight text-gray border-gray border-opacity-50 opacity-75;
      }
    }

    select {
      @apply block w-full rounded-full pl-4 pr-12 py-3 leading-5 text-sm border outline-none shadow-none bg-white text-black border-grayLight focus:border-primary transition-colors duration-500 ease-in-out;
      font-size-adjust: 0.3;

      option {
        @apply transition-colors duration-500 ease-in-out block py-2 text-black bg-white;

        &:checked {
          @apply bg-primary text-white;
        }

        &:hover {
          box-shadow: 0 0 100px 100px #F0CDC6 inset;
        }

        &:disabled {
          @apply bg-white text-gray;
        }
      }

      & + .caret {
        @apply absolute top-px right-px text-primary rounded-full p-3 transform transition duration-500 ease-in-out cursor-pointer;

        .icon {
          @apply block w-5 h-5 py-1;
        }
      }

      &:focus + .caret {
        @apply rotate-180;
      }

      &:disabled {
        @apply bg-grayLight text-gray border-gray border-opacity-50 opacity-75;

        & + .caret {
          @apply text-gray cursor-default opacity-75;
        }
      }
    }

    &__text {
      @apply hidden absolute top-full inset-x-0 leading-5 text-xs truncate px-4 font-semi;
      top: 42px;
    }

    &.is-error {
      @apply text-red;

      .form--input__text {
        @apply block text-red;
      }

      input,
      select {
        @apply border-red;
      }
    }

    &.counter {
      @apply w-smallqty md:w-mediumqty;
      input {
        @apply px-12 text-center appearance-none font-bold;
        border-radius: 30px;
        height: 45px;
        font-size: 18px;
      }
      .btn {
        @apply absolute text-black border-none;
        bottom: 2px;
        box-shadow: none;
        background: transparent;
        &:hover{
          @apply text-primary;
        }


        &-minus {
          top: 2px;
          @apply left-0;
        }

        &-plus {
          top: 2px;
          @apply right-0;
        }
      }
    }
    .old-price {
      padding-top: 10px;
    }
    .label-second {
      margin-bottom: 10px;
      font-weight: 600;
      font-size: 16px;
      line-height: 24px;
      color: #2b2a2a;
    }
    .select2-container--default .select2-selection--single {
      @apply w-full rounded-full border outline-none shadow-none bg-white text-black border-grayLight transition-colors duration-500 ease-in-out;
      height: 40px;
      //margin-bottom: 15px;
    }

    .select2-container--default .select2-selection--single .select2-selection__rendered {
      @apply pl-4 pr-12 leading-5 text-sm;
      margin-top: -10px;
      font-weight: normal;
      font-size: 18px;
      padding-left: 20px;
      color: #2B2A2A;
    }

    .select2-container--default .select2-selection--single .select2-selection__arrow {
      width:10px;
      height: 10px;
      margin-top: 5px;
      top: 32%;
      @apply border-0 border-r border-b border-black transform rotate-45 right-4 -my-1 origin-center transition duration-200 ease-in-out ;
      &:hover{
        border-color: #FF6E8E;
      }
      b {
        @apply hidden;
      }
    }
    .select2-dropdown {
      @apply shadow-md z-10;

      &--below {
        @apply border border-gray;
      }

      &--above {
        @apply -mt-2 border border-gray;
      }

      .select2-results {
        @apply py-2;
      }

      .select2-results__option {
        @apply rounded-full mx-2 py-2 pr-4 pl-3 my-col;
        color: #000;

        &--highlighted {
          @apply transition-all duration-300 text-black cursor-pointer bg-pinkLight;
          &:hover{
            @apply bg-pinkLight;
          }
        }

        &--selected {
          background: #F0CDC6 !important;
          @apply text-black cursor-pointer;
          &:hover{
            background: #F0CDC6;
          }
        }
      }
    }

    .select2-results__options {
      @apply overflow-hidden overflow-y-auto;
    }
    .select2-container--open {
      .select2-selection--single,
      .select2-selection--multiple {
        @apply border-gray;
        border-radius: 9999px !important;
      }

      .select2-selection--single .select2-selection__arrow {
        transform: rotate(-135deg);
      }

      .select2-dropdown--above,
      .select2-dropdown--below {
        @apply rounded-lg;
        border: 1px solid #999999 !important;
        border-radius: 0.5rem !important;
      }
    }
  }

  &--check {

    label {
      @apply flex items-center text-sm cursor-pointer select-none font-medium;
      font-size: 18px;
    }

    .text {
      @apply transition-colors duration-200;
      padding-left: 10px;
    }

    input {
      @apply hidden;
      + .input {
        @apply block relative rounded-md border border-grayDark border-current p-1 text-white transition-colors duration-200;
        width: 24px;
        height: 24px;
        border-radius: 8px;
        background: transparent;


        &:after {
          @apply block border-l border-b transform -rotate-45 border-current;
          content: "";
          width: 12px;
          height: 7px;
    //      border-bottom-width: 2px;
    //border-left-width: 2px;
    margin-top: 1px;
    margin-left: 1px;
        }
      }

      ~ .text {
        font-weight: 400;
        line-height: 27px;
        @apply text-grayDark;
      }

      &:checked + .input {
        @apply text-black border-black;
        border-radius: 8px;
      }

      &:checked ~ .text {
        @apply text-black;
      }
    }

    label {
      &:hover {
        .text, a {
          @apply text-primary;
        }
      }
    }
  }

  &--price {
    @apply relative;

    input {
      @apply block w-full rounded-full  py-3 leading-5 text-xs font-semi  border outline-none shadow-none bg-white text-black border-grayLight focus:border-gray transition-colors duration-500 ease-in-out;


      + label {
        @apply block leading-none absolute text-gray left-4 top-half transform -translate-y-half text-xs font-medium;
      }
    }

    &__steps {
      @apply mx-2;
    }

    .col {
      @apply relative;
    }
  }

  &--radio {
    input {
      @apply hidden;

      &:checked + label {
        @apply text-white shadow-none bg-primary cursor-default;
      }
    }
  }
}
.watch-more{
  background: #fff !important;
  color: #2B2A2A !important;
  border: 1px solid #FF6E8E !important;
  transition: all .3s;
  font-size: 18px;
  font-weight: normal;
  &:hover{
    box-shadow: 0px 0px 10px rgba(245, 101, 101, 0.6);
    transition: all .3s;
  }
}
.about-us{
  margin-bottom: 10px;
}
.section__header {
  h2.about-us {
    @apply pt-0 pb-5;
  }
}
.last-wraper-text{
  padding-bottom: 80px;
}
.btn--outline {
  border-radius: 60px !important;
  border: 1px solid #FF6E8E !important;
}
.btn-left{
  background: transparent !important;
  color: #2B2A2A;
  border: 1px solid #FF6E8E;
}
.btn {
  @apply inline-flex justify-center items-center leading-5 border text-sm font-medium shadow rounded-full cursor-pointer transition duration-200 ease-in-out select-none;
  padding: 8px 30px;
  &__text {
    @apply truncate px-spacer;
    text-overflow: clip !important;
  }

  .icon {
    @apply block w-5 h-5 flex-none;
  }

  &-minus,
  &-plus {
    @apply bg-white text-black hover:bg-black hover:text-white border-0 px-3.75;
  }

  &--primary {
    @apply bg-primary border-primary text-white shadow-sm;

    &:hover {
      box-shadow: 0px 0px 10px rgba(245, 101, 101, 0.6);
    }
    &:disabled {
      @apply bg-primary border-primary text-white shadow-sm hover:shadow-sm;
    }
  }

  &--pink {
    @apply bg-pink border-pink text-white shadow-sm;

    &:hover {
      box-shadow: 0px 0px 10px rgba(#e29c8f, 0.6);
    }
    &:disabled {
      @apply bg-pink border-pink text-white shadow-sm hover:shadow-sm;
    }
  }

  &--white {
    @apply bg-white border-white text-black hover:text-primary shadow-sm;

    &:hover {
      box-shadow: 0px 0px 10px rgba(245, 101, 101, 0.6);
    }
    &:disabled {
      @apply bg-white border-white text-black shadow-sm hover:shadow-sm;
    }
  }

  &--outline {
    @apply bg-white border-primary text-black hover:shadow-sm;

    &:hover {
      box-shadow: 0px 0px 8px rgba(245, 101, 101, 0.6);
    }

    &:disabled {
      @apply bg-white border-primary text-black shadow-sm hover:shadow-sm;
    }

    &.active {
      @apply text-white bg-primary;
    }
  }

  &:disabled {
    @apply opacity-50;
  }
}

.dropmenu {
  @apply relative;

  &__toggle {
    @apply relative z-0 space-x-5 flex items-center;


    + nav {
      @apply transition-opacity  absolute p-2 bg-white rounded-lg ;
    }

    }
}

.form--input.form-check-second{
    //margin-bottom: 10px !important;
}

.make-comand{
  padding-top:11px;
  padding-bottom:11px;
  font-weight: normal;
font-size: 18px;
margin-bottom: 40px;
}

.form-select::placeholder{
  font-size: 18px !important;
}

.btn.watch-more.home-bot.home-bot{
font-size: 18px;
padding: 7px 28px ;
font-weight: normal ;
line-height: 27px ;
text-align: center;
max-height: 45px;
}


.filters__list{
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
}

.filter{
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.15);
  border-radius: 20px;
}


span.end.first{
  position: relative;
}


.section.thanks-page .thanks-wraper .panel ul li span{
  position: absolute{
    left: 0px;
  }
}
.start.second-start{
  font-weight: normal;
}
.start.second-start.last-panel,
.end.second,
.start.start-first{
  font-weight: 600;
}

.return-home {
  max-height: 45px;
}

.row.thanks-row{
  justify-content: center;
}