@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  .tour.shepherd-element {
    @apply bg-zinc-500 text-white !rounded-xl;
  }

  .tour.shepherd-element > .shepherd-arrow::before {
    @apply !bg-zinc-500;
   }

  .tour.shepherd-element .shepherd-arrow::before {
    @apply bg-zinc-500;
  }

  .tour.shepherd-element .shepherd-header {
    @apply bg-zinc-500 !p-0 !pb-3;
  }

  .tour.shepherd-element .shepherd-header h3 {
    @apply text-white;
  }

  .tour.shepherd-element .shepherd-text {
    @apply text-white !p-0 !pb-3;
  }

  .tour.shepherd-element .shepherd-button {
    @apply text-white;
  }

  .tour.shepherd-element .shepherd-button:hover {
    @apply text-white;
  }

  .tour.shepherd-element .shepherd-footer {
    @apply bg-zinc-500 !justify-start !p-0;
  }

  .tour.shepherd-element .shepherd-footer .shepherd-button {
    @apply text-white;
  }
}

.shepherd-modal-overlay-container {
  height: 100vh !important;
  pointer-events: inherit !important;
  opacity: .3 !important;
  z-index: 90 !important;
}

.tour.shepherd-element {
  border-radius: 1.5rem;
  backdrop-filter: blur(150px);
  -webkit-backdrop-filter: blur(150px);
  padding: 12px;
  max-width: 210px;
}
.tour.shepherd-has-title .shepherd-content .shepherd-header { background: none; }
.tour .shepherd-footer  { background: none; }

.tour.shepherd-element > .shepherd-arrow {
  background-color: transparent;
  width: 1.625rem;
  height: 1.625rem;
  width: 1.625rem;
  height: 1.625rem;
  background-color: transparent !important;
  background: url("/assets/tour_arrow-1d2a235e.svg") no-repeat center center;
  background-size: contain;
  transform: rotate(90deg);
 }

.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow { top: -13px !important; }
.shepherd-element[data-popper-placement^=top]>.shepherd-arrow { bottom: -13px !important; }
.shepherd-element[data-popper-placement^=left]>.shepherd-arrow { right: -13px !important; }
.shepherd-element[data-popper-placement^=right]>.shepherd-arrow { left: -13px !important; }

.tour.shepherd-element[data-popper-placement^=bottom] > .shepherd-arrow::before,
.tour.shepherd-element[data-popper-placement^=top] > .shepherd-arrow::before,
.tour.shepherd-element[data-popper-placement^=left] > .shepherd-arrow::before,
.tour.shepherd-element[data-popper-placement^=right] > .shepherd-arrow::before {
  background-color: transparent !important;
}

.tour .shepherd-text {
  font-size: 0.875rem;
  font-weight: 400;
}
.tour .shepherd-header h3 {
  line-height: 0.9rem;
  font-size: 0.75rem;
  color: #FFFFFF8F !important;
  font-weight: 400;
}

.tour .shepherd-button {
  font-size: 0.9rem;
  border-radius: 8px;
  padding: 6px 14px;
  background-color: white;
  color: black !important;
  opacity: 0.9;
}

.tour .shepherd-button:hover {
  cursor: pointer;
  background: white !important;
  opacity: 1;
}

.tour.shepherd-element .shepherd-cancel-icon {
  width: 1rem;
  height: 1rem;
  min-width: 1rem;
  min-height: 1rem;
  border-radius: 50%;
  background: #505157;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: none;
  box-shadow: none;
  padding: 0;
}
.tour.shepherd-element .shepherd-cancel-icon span { display: none !important; }

.tour.shepherd-element .shepherd-cancel-icon::before,
.tour.shepherd-element .shepherd-cancel-icon::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.6rem;
  height: 0.13rem;
  background: #B9B9BC;
  border-radius: 2px;
  transform: translate(-50%, -50%) rotate(45deg);
  z-index: 2;
}

.tour.shepherd-element .shepherd-cancel-icon::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}