@tailwind base;
@tailwind components; 
@tailwind utilities;
@import "./../../node_modules/swiper/swiper-vars.scss";
@import "./../../node_modules/swiper/swiper.scss";

:root {
  --wpvt-color: #5c6ac4;
  /* ... */
}
.evr-filp {
  -webkit-transform: scaleX(-1) !important;
  transform: scaleX(-1) !important;
}
 

$font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
  Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
  "Segoe UI Symbol";

.evr-logo-icon {
  width: 25px;
  height: 20px;
  display: inline-block;
  margin: auto;
  background-image: url(../images/evr.svg);
  background-size: 100%;
}
.evr-modal-frame {
  @apply text-sm fixed top-0 left-0 w-full h-full flex items-center justify-center;
  z-index: 9999999999999999999 !important;

  .evr-overlay {
    @apply bg-gray-800 opacity-50 fixed top-0 left-0 w-full h-full;
  } 

  .evr-frame-modal-body {
    @apply relative mx-4 w-full rounded-md bg-white relative h-auto max-h-[650px] overflow-y-auto;
    z-index: 99999999999999999999 !important;
    max-width: 600px;
  }
}
.evr-recorder-container {
  @apply text-sm w-full h-full;

  font-family: $font-family;
  label {
    margin-bottom: 0;
  }
  .input-text {
    @apply py-2 px-3 border border-slate-300 rounded-sm bg-gray-50;
  }
  .input-label {
    @apply mb-1 text-left text-sm text-slate-800 cursor-pointer;
  }

  button,
  input,
  select {
    border: auto;
    box-shadow: none;
  }
  // .modal {
  //   z-index: 99999999999999999999999 !important;
  //   width: 350px
  // }
  .top_icon {
    @apply absolute  left-1/2 rounded-t-full w-20 h-20 bg-white text-sky-400  transition duration-100 pt-1 px-4 transform -translate-x-1/2;    
    margin-top: -45px;
    z-index: -9;
    color: var(--wpvt-color) !important;
    i {
      @apply w-6 h-6 h-auto w-auto;
      transform: scale(2.3)      
    }
  }
  .evr-recorder-body {
    @apply relative w-full rounded-md bg-white relative h-auto;
    z-index: 99999999999999999999 !important;
    max-width: 100%;

    .evr-close {
      @apply transition duration-150 h-6 w-6 cursor-pointer z-10 absolute rounded-sm -right-6 -top-6  hover:bg-red-400 hover:text-white inline-flex items-center justify-center;
    }
    .evr-error {
      @apply px-4 py-4;
      .evr-error-message {
        @apply py-4 px-3 bg-red-50 text-lg text-red-500 rounded-md text-center;
      }
      .evr-error-footer {
        @apply py-4 px-3 bg-red-50 text-lg text-red-500 rounded-md text-center;
      }
    }
    .evr-recorder-wrapper {

      & > section {
        @apply p-4;
      }

      .evr-button {
        @apply cursor-pointer mb-2 sm:mb-0 px-[50px] py-[11px] shadow-sm bg-[#3858E9] transition duration-100 rounded-3xl text-white hover:opacity-80 hover:text-white font-semibold text-base flex items-center justify-center gap-2;
        &.evr-button-outline {
          @apply bg-slate-200 text-slate-600 border border-slate-200;
        }
        &.evr-button-small {
          @apply py-1 px-2 text-xs;
        }
        &:focus {
          @apply border-none;
        }
        .evr-icon {
          @apply w-auto;
        }
      }

      .evr-title {
        @apply text-sm block rounded-md z-50 bg-white py-4 uppercase   font-semibold w-full text-center text-gray-700;
      }

      .evr-button-area {
        @apply mt-3 flex flex-col sm:flex-row  justify-center sm:justify-between items-center;
        &.button-group {
          @apply flex-row items-center justify-start;
          & > * {
            @apply mr-3;
          }
          & > &:last-child {
            @apply mr-0;
          }
        }
      }
      .evr-recorder {
        @apply bg-white z-50 flex-col w-full p-0;
        .evr-recorder-mirror {
          @apply relative  rounded-t-md;
          &.evr-rounded {
            @apply rounded-md;
          }

          .evr-recorder-video {
            @apply w-full overflow-hidden flex items-center justify-center relative;

            video {
              @apply bg-black h-auto w-full;
            }
            .evr-preview-controls {
              @apply absolute w-full h-full top-0 left-0 flex items-center justify-center;
              &.evr-preview-controls-bottom {
                @apply items-end;

                .evr-buttons {
                  @apply p-4 flex items-center gap-2;
                  .evr-button {
                    @apply opacity-100 px-4 py-2;
                  }
                }
              }
              .evr-button {
                @apply opacity-30;
              }

              &:hover {
                .evr-button {
                  @apply opacity-100;
                }
              }
            }
          }
          .evr-counter {
            @apply absolute transform -translate-y-1/2 top-1/2 w-full text-center text-8xl text-gray-200 tracking-wider;
          }
          .evr-recording-icon {
            @apply absolute bottom-4 left-4 flex items-center;
            i {
              @apply inline-block cursor-pointer mr-1 uppercase text-xs text-gray-200 mx-auto  animate-pulse w-4 h-4 bg-red-500 rounded-full transition hover:bg-red-600;
            }
            div {
              @apply text-white opacity-70 text-xl;
            }
          }
          .evr-recording-start-area {
            @apply absolute bottom-4 w-full flex items-center justify-center;

            * {
              @apply border-none;
            }

            .evr-recording-start {
              @apply mr-4 p-0 uppercase  text-gray-200 cursor-pointer mx-auto w-14 h-14 bg-red-500 rounded-full transition hover:bg-red-600 text-xs  inline-flex items-center justify-center;
            }
            .evr-recording-close {
              @apply inline-flex items-center justify-center cursor-pointer mx-auto w-12 h-12 transition text-red-400;
            }
            .evr-recording-stop {
              @apply p-0 m-0 cursor-pointer  mx-auto w-12 h-12 transition bg-white rounded-full  block opacity-30 hover:opacity-100;
              div {
                @apply w-6 h-6 bg-gray-700 rounded-sm transition duration-150 m-auto;
              }
            }
          }
        }
        .evr-message {
          @apply my-1 text-center text-sm tracking-wide text-gray-600;
        }
        .evr-options {
          @apply p-3;
          .evr-delay {
            @apply my-3 flex items-center justify-between;

            & > div {
              @apply flex items-center;
            }

            .evr-delay-input {
              @apply focus:ring-2 rounded-sm text-gray-500 focus:ring-sky-400 border border-gray-200 rounded-sm text-lg text-right px-2 h-8 py-1 w-10;
            }

            span {
              @apply text-sm text-gray-500 ml-2;
            }
          }
        }
        .evr-chooseoption {
          @apply mt-0 block;
          button {
            @apply mt-0 flex items-center justify-center gap-2;
          }
        }
        .evr-option-select {
          @apply my-3;

          label {
            @apply text-xs font-semibold text-gray-400;
          }

          select {
            @apply appearance-none text-gray-500 cursor-pointer rounded-sm text-sm w-full  py-2 px-3 border border-gray-200 bg-white;
          }
        }
        .evr-mirror-box {
          @apply text-sm w-full flex flex-col sm:flex-row p-3 items-center justify-center;

          &.evr-divice-found {
            @apply justify-between;
          }
        }
      }
      .evr-dropzone {
        @apply relative flex flex-col p-4 text-gray-400 border border-gray-200 rounded;

        & > div {
          @apply relative flex flex-col text-gray-400 border border-gray-200 border-dashed rounded cursor-pointer;

          .evr-uploader-file {
            @apply absolute inset-0 z-50 w-full h-full p-0 m-0 outline-none opacity-0 cursor-pointer;
          }
          .evr-dropzone-area {
            @apply flex flex-col items-center justify-center py-10 text-center;
            i {
              @apply text-xl mb-2;
            }
          }
        }
      }
      .evr-uploader-file-info {
        @apply flex items-center text-gray-400 m-3 justify-center;
      }
      .evr-uploader-file-info {
        @apply bg-red-50 text-red-400 text-center px-3 py-2 rounded-md mt-3 tracking-wide;
      }
      .evr-send {
        @apply flex items-center justify-center text-gray-500;
      }
      .evr-send-sending {
        @apply animate-spin h-5 w-5 border-b-2 border-t-2 border-sky-400 rounded-full mr-2;
      }
      .evr-send-message {
        @apply p-2 rounded-md text-center text-gray-500 bg-red-100 text-base;
        &.evr-sent {
          @apply bg-sky-100;
        }
      }
      .evr-send-recorder-button {
        @apply text-center mt-3;
      }
      .evr-recorder-buttons {
        @apply text-sm flex justify-center mt-12 flex-row;
      }
      .evr-input-group {
        @apply mb-3 flex flex-col;
        &.evr-input-group-inline {
          @apply flex-row justify-center;
        }
        .evr-radio-label {
          @apply mr-2 mb-1 text-gray-500;
        }
        .evr-input-radio {
          @apply border-gray-300 h-3 w-3 bg-gray-100 ring-red-200 focus:ring-0 text-sky-500;
        }
        .evr-input-select {
          @apply bg-gray-50 rounded-md   border border-gray-200;
        }
        .evr-input-checkbox {
          @apply rounded-md w-3 h-3 bg-gray-100 border border-gray-300 text-sky-500 mr-2 focus:ring-0;
        }
        .evr-input-rating {
          @apply flex items-center gap-0.5;
          i {
            @apply w-6 ml-0 cursor-pointer text-gray-300 hover:text-sky-500 text-2xl transition duration-150;

            &.evr-rating-active {
              @apply text-sky-500;
            }
          }
        }
      }
      .evr-publish-policy {
        @apply mb-3 flex items-center;
      }
    }
  }
}
.flip-camera {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.swiper-container {
  z-index: 0;
}

.left-18 {
  left: 4.5rem;
}

.evr-recorder-button {
  @apply no-underline inline transition duration-100 py-2 px-4 rounded-sm hover:opacity-80 cursor-pointer transition duration-100 py-2 px-4 rounded-sm;
}

.evr-review-overlay {
  .evr-review-stop {
    opacity: 0 !important;
  }
  &:hover {
    .evr-review-stop {
      opacity: 1 !important;
    }
  }
}

.evr-reviews {
  justify-content: center;
  margin: 10px 0;
}

.gallery-swiper-slider {
  @apply px-[35px] sm:px-[45px];
  
  .swiper-button-next, .swiper-button-prev { 
    @apply min-w-[30px] w-[30px] h-[30px] bg-white rounded-full shadow border border-gray-400;

    &::after {
      @apply text-xs text-gray-400;
    }

    // &.swiper-button-disabled {
    //   opacity: 1 !important;
    //   pointer-events: initial !important;
    // }

    &:not(.swiper-button-disabled) {
      &:hover {
        @apply bg-blue-600 border-blue-600;
  
        &::after {
          @apply text-white;
        }
      }
    }

  }

  .swiper-button-prev {
    @apply left-[-5px] sm:left-0;
  }
  
  .swiper-button-next {
    @apply right-[-5px] sm:right-0;
  }
}

.modal-animation-enter-active,
.modal-animation-leave-active {
  transition: opacity 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}

.modal-animation-enter-from,
.modal-animation-leave-to {
  opacity: 0;
}

.modal-animation-inner-enter-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02) 0.15s;
}

.modal-animation-inner-leave-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}

.modal-animation-inner-enter-from {
  opacity: 0;
  transform: scale(0.8);
}

.modal-animation-inner-leave-to {
transform: scale(0.8);
}

.evr-review-card{
  .review-card__media{
    .video-js{
      padding-top: 0;
      height: 100% !important;

      .vjs-tech{
        position: static;
        object-fit: cover;
      }
    }
  }
}

.evr-modal {
  z-index: 9999999999 !important;

  &.z-\[99\] {
    z-index: 9999999999 !important;
  }

  .evr-container {
    display: flex;
  }

  .evr-content {
    width: 100%;
    margin-top: auto;
    margin-left: auto;
    margin-bottom: auto;
    padding: 30px 15px 30px;
  }

  &.evr_gallery-popup {
    background-color: rgba(#2A2C32, 0.6) !important;

    .evr-content {
      padding: 50px 15px 30px;
      
      .evr-close-modal {
        z-index: 60;
        padding: 5px !important;
        @apply top-[15px] md:top-[22px] fixed right-[15px] md:right-[30px];

        svg {

          path {
            stroke: #fff;
          }
        }
      }

      .evr-modal-inner {
        max-width: 598px !important;
        width: 598px !important;
        border: 0 !important;

        .evr-modal-header {
          display: none !important;
        }
        .evr-modal-body {

          .review-card__media {

            .icon {
              display: flex;
              align-items: center;
              border-radius: 500px;
              justify-content: center;
              background: linear-gradient(270deg, rgba(128, 209, 255, 0.30) 2.15%, rgba(154, 172, 255, 0.30) 100%);
              @apply h-[50px] w-[50px] md:h-[82px] md:w-[82px];

              svg {
                margin-left: 3px;
                @apply h-[20px] md:h-[33px];
              }
            }
          }
        }

        .evr-modal-body, .evr-modal-footer {
          padding: 0 !important;
        }
      }
      &:has(.only-video-review){
        .evr-modal-inner{
          width: auto !important;
          max-width: initial !important;
          background-color: transparent !important;

          .video-js {
            height: 100%;
            padding-top: 0;

            .vjs-tech {
              position: initial;
            }
          }
        }
      }
    }
  }
}

.border-gradient-to-bottom {
  border: 1px solid transparent;
  background-clip: padding-box;

  .link {
    border-radius: 6px;
  }

  &::before {
    content: '';
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: -1px;
    right: -1px;
    border-radius: 6px;
    background-image: linear-gradient(to bottom, var(--currentColor), rgba(255, 255, 255, 1));
  }
}

.evr-line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evr-line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evr-line-clamp-5 {
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.evr-line-clamp-6 {
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.floating-button {
  
  .floating-hover-text {
    position: relative;
    filter: drop-shadow(0px 0px 10px rgba(97, 68, 159, 0.17));
    
    &::after {
      background-color: currentColor;
    }
  }
}

.evr-floating-widget {

  &.show {

    .evr-floating-widget__card {
      bottom: -26px !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
  }

  &.evr-floating-left {
    left: 46px;

    .floating-button {
  
      .floating-hover-text {
        left: 135%;
        
        &::after {
          left: -4px;
        }
      }
    }


    .evr-floating-widget__card {
      left: -26px;
    }
  }

  &.evr-floating-right {
    right: 46px;

    .floating-button {
      .floating-hover-text {
        right: 135%;
        
        &::after {
          right: -4px;
        }
      }
    }

    .evr-floating-widget__card {
      right: -26px;
    }
  }
}

.evr-switch-effect {

  &-wobble {
    animation: wobble 1s linear 2;
  }

  @keyframes wobble {
      0% {
          transform: rotate(0deg);
      }
      15% {
          transform: rotate(-5deg);
      }
      30% {
          transform: rotate(3deg);
      }
      45% {
          transform: rotate(-3deg);
      }
      60% {
          transform: rotate(2deg);
      }
      75% {
          transform: rotate(-1deg);
      }
      100% {
          transform: rotate(0deg);
      }
  }

  // vibrate
  &-vibrate {
      animation: vibrate 0.3s linear 4;
  }

  @keyframes vibrate {
      0% {
          transform: translateX(0);
      }
      25% {
          transform: translateX(2px); /* Shift the element to the right */
      }
      50% {
          transform: translateX(-2px); /* Shift the element to the left */
      }
      75% {
          transform: translateX(2px); /* Shift the element to the right again */
      }
      100% {
          transform: translateX(0); /* Back to the initial position */
      }
  }
  

  // flicker
  &-flicker {
      animation: flicker 0.6s linear 1;
  }

  @keyframes flicker {
      0% {
          opacity: 1;
      }
      25% {
          opacity: 0.5;
      }
      50% {
          opacity: 1;
      }
      75% {
          opacity: 0.5;
      }
      100% {
          opacity: 1;
      }
  }

  // shake
  &-shake {
      animation: shake 0.3s linear 1;
  }

  @keyframes shake {
      0% {
          transform: translate(0px);
      }
      25% {
          transform: translate(-2px, 0px);
      }
      50% {
          transform: translate(0px);
      }
      75% {
          transform: translate(2px, 0px);
      }
      100% {
          transform: translate(0px);
      }
  }

  // jello
  &-jello {
      animation: jello 0.9s 1;
  }

  @keyframes jello {
      0% {
          transform: scale3d(1, 1, 1);
      }
      30% {
          transform: scale3d(1.25, 0.75, 1);
      }
      40% {
          transform: scale3d(0.75, 1.25, 1);
      }
      50% {
          transform: scale3d(1.15, 0.85, 1);
      }
      65% {
          transform: scale3d(0.95, 1.05, 1);
      }
      75% {
          transform: scale3d(1.05, 0.95, 1);
      }
      100% {
          transform: scale3d(1, 1, 1);
      }
  }

  // bounce
  &-bounce {
      animation: bounce 1s linear 1;
  }
  @keyframes bounce {
      0%, 20%, 50%, 80%, 100% {
          transform: translateY(0);
      }
      40% {
          transform: translateY(-30px);
      }
      55% {
          transform: translateY(0);
      }
      65% {
          transform: translateY(-15px);
      }
      75% {
          transform: translateY(0);
      }
  }
  
  

  // heartbeat
  &-heartbeat {
      animation: heartbeat 1s linear 1;
  }

  @keyframes heartbeat {
      0% {
          transform: scale(1);
      }
      25% {
          transform: scale(1.1);
      }
      50% {
          transform: scale(1);
      }
      75% {
          transform: scale(1.1);
      }
      100% {
          transform: scale(1);
      }
  }

  // blink
  &-blink {
      animation: blink .3s linear 1;
  }

  @keyframes blink {
      0% {
          opacity: 1;
      }
      50% {
          opacity: 0;
      }
      100% {
          opacity: 1;
      }
  }


}



@tailwind utilities;