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

@layer base {
  .tour.shepherd-element {
    @apply text-black bg-zinc-50 dark:bg-haiti-700 dark:text-white;
  }

  .tour.shepherd-element > .shepherd-arrow::before {
    @apply !bg-zinc-50 dark:!bg-haiti-700
   }

  .tour.shepherd-element .shepherd-arrow::before {
    @apply bg-zinc-50 dark:bg-haiti-700;
  }

  .tour.shepherd-element .shepherd-header {
    @apply bg-zinc-50 dark:bg-haiti-700;
  }

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

  .tour.shepherd-element .shepherd-text {
    @apply text-black dark:text-white;
  }

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

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

  .tour.shepherd-element .shepherd-footer {
    @apply bg-zinc-50 dark:bg-haiti-700;
  }

  .tour.shepherd-element .shepherd-footer .shepherd-button {
    @apply text-black dark: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: 20px;
  border: 1px solid #008CFF;
}
.tour.shepherd-has-title .shepherd-content .shepherd-header { background: none; }
.tour .shepherd-footer  { background: none; }

.tour.shepherd-element[data-popper-placement^=bottom]>.shepherd-arrow::before {
  border-left: 1px solid #008CFF;
  border-top: 1px solid #008CFF;
}

.tour.shepherd-element[data-popper-placement^=top]>.shepherd-arrow::before {
  border-right: 1px solid #008CFF;
  border-bottom: 1px solid #008CFF;
}
.tour .shepherd-text,
.tour .shepherd-header h3 { color: white; }

.tour .shepherd-button {
  font-size: 1.25rem;
  line-height: 1.75rem;
  background: none;
  border: inherit;
  border-radius: .75rem;
  border-image-slice: 1;
  border-width: 1px;
  border-image-source: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #008CFF, rgba(0, 0, 0, 0) 100%);
  border-left: 0;
  border-right: 0;
  border-top: 0;
}

.tour .shepherd-button:hover {
  background: none !important;
  color: #008CFF !important;
}

.shepherd-enabled.shepherd-target {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
    -webkit-box-shadow: 0px 2px 13px 3px #008CFF;
  -moz-box-shadow: 0px 2px 13px 3px #008CFF;
  box-shadow: 0px 2px 13px 3px #008CFF;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}