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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
    --media-brand: #f5f5f5;
    --media-focus-ring-color: #4e9cf6;
    --media-focus-ring: 0 0 0 0px var(--media-focus-ring-color);
    --media-border-radius: 6px;
    --media-tooltip-y-offset: 30px;
    --media-menu-y-offset: 30px;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
    --media-brand: #f5f5f5;
    --media-focus-ring-color: #4e9cf6;
    --media-focus-ring: 0 0 0 0px var(--media-focus-ring-color);
    --media-border-radius: 6px;
    --media-tooltip-y-offset: 30px;
    --media-menu-y-offset: 30px;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings:
      "rlig" 1,
      "calt" 1;
  }
}

.spinner {
  height: 70px;
  width: 70px;
}

@layer utilities {
  /* Hide scrollbar for Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  /* Hide scrollbar for IE, Edge and Firefox */
  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

#slider {
  padding-bottom: 350px;
}

@media screen and (min-width: 768px) {
  #slider {
    padding-bottom: 500px;
  }
}

.episode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(95px, 1fr));
  grid-gap: 10px;
}

.swiper-button-prev,
.swiper-button-next {
  display: none;
}

.swiper-pagination {
  position: absolute;
  display: block;
  width: 8px !important;
  bottom: auto !important;
  top: 50% !important;
  right: 20px;
  left: auto !important;
  transform: translateY(-50%);
  text-align: right;
  z-index: 10;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 3px;
  display: inline-block;
  border-radius: 100%;
  opacity: 1;
  background: #fff;
  vertical-align: middle;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
.swiper-pagination-bullet-active {
  opacity: 1;
  background: #6a55fa;
  margin: 0;
}

#nprogress {
  pointer-events: none !important;
}

#nprogress .bar {
  background-color: #6d28d9 !important;
  position: fixed !important;
  z-index: 99999 !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 3px !important;
}

#nprogress .peg {
  display: block !important;
  position: absolute !important;
  right: 0px !important;
  width: 100px !important;
  height: 100% !important;
  box-shadow:
    0 0 10px #6d28d9,
    0 0 5px #6d28d9 !important;
  opacity: 1 !important;
  -webkit-transform: rotate(3deg) translate(0px, -4px) !important;
  -ms-transform: rotate(3deg) translate(0px, -4px) !important;
  transform: rotate(3deg) translate(0px, -4px) !important;
}

#oplayer {
  width: 100%;
  aspect-ratio: 16/9;
}

.backward {
  left: 25%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.forward {
  right: 25%;
  top: 50%;
  transform: translate(50%, -50%);
}

.backward,
.forward {
  transition:
    0.4s opacity,
    0.4s visibility;
}

[data-ctrl-hidden="true"] .forward,
[data-ctrl-hidden="true"] .backward {
  visibility: hidden;
  opacity: 0;
}

.backward,
.forward {
  width: 3em;
  color: #fff;
  position: absolute;
  background: none;
  outline: none;
  border: none;
}

.backward:active svg {
  transform: rotate(-45deg);
  transition: 0.1s transform;
}

.forward:active svg {
  transform: rotate(45deg);
  transition: 0.1s transform;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
  color: var(--background);
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  animation-delay: -0.32s;
}
.loader:after {
  left: 3.5em;
}

@keyframes bblFadInOut {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }
  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

.player[data-view-type="audio"] .vds-poster {
  display: none;
  border-radius: 5rem;
}

.player[data-view-type="video"] {
  aspect-ratio: 16 /9;
}

.src-buttons {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin-top: 40px;
  margin-inline: auto;
  max-width: 300px;
}

.vds-poster {
  object-fit: cover;
}
