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

@layer utilities {
  .scrollbar-stable {
    scrollbar-gutter: stable;
  }
}

@layer base {
  :host, :root {
    --reactour-accent: #0e172a;
    --background: 0 0% 100%;
    --foreground: 240 10% 3.92%;
 
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
 
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.92%;
 
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.92%;
 
    --border: 0 0% 88%;
    --input: 214.3 31.8% 91.4%;
 
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
 
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;

    --accent: 0 0% 93%;
    --accent-foreground: 0 0% 11.2%;
 
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
 
    --ring: 215 20.2% 65.1%;
 
    --radius: 0.5rem;
  }
 
  .rapidload-dark {
    --reactour-accent: #fafafa;
    --background: 240 10% 3.92%;
    --foreground: 210 40% 98%;
 
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
 
    --popover: 240 10% 3.92%;
    --popover-foreground: 210 40% 98%;
 
    --card: 240 10% 3.92%;
    --card-foreground: 210 40% 98%;
 
    --border: 0 0% 12%;
    --input:0 0% 12%;
 
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
 
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
 
    --accent-foreground: 0 0% 93%;
    --accent: 0 0% 11.2%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
 
    --ring: 217.2 32.6% 17.5%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

}

.rapidload-dark {
  color-scheme: dark;
}

.rpo-titan-tour {
  z-index: 150000 !important;
}

.reactour__popover {
  z-index: 150000 !important;
}

.reactour__popover:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  top: var(--rtp-arrow-top, auto);
  right: var(--rtp-arrow-right, auto);
  bottom: var(--rtp-arrow-bottom, auto);
  left: var(--rtp-arrow-left, auto);
  border-top: var(--rtp-arrow-border-top);
  border-right: var(--rtp-arrow-border-right);
  border-bottom: var(--rtp-arrow-border-bottom);
  border-left: var(--rtp-arrow-border-left);
}

.gradient-border {
  position: relative;
  border: solid 2px transparent;
  background-clip: padding-box, border-box;
  background-origin: border-box;
  /* Rotate the gradient 90 degrees */
  background-image: linear-gradient(white, white), linear-gradient(25deg, #b3bdcb, #4b5563);
}

.selectionBar {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
}

@keyframes draw {
  from {
    stroke-dashoffset: 1000; /* Start from left */
  }
  to {
    stroke-dashoffset: 0; /* End at right */
  }
}

@keyframes reverse-draw {
  from {
    stroke-dashoffset: -1000; /* Start from right */
  }
  to {
    stroke-dashoffset: 0; /* End at left */
  }
}

.draw {
  animation: draw 2s ease-in-out alternate forwards;
}

.reverse-draw {
  animation: reverse-draw 2s ease-in-out alternate forwards;
}


.optimizer-show-button-fade-in {
  animation: fadeIn 0.5s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInFromTopAnimation {
  opacity: 0;
  position: relative;
  top: -10px;
  animation: fadeInFromTop 3s ease forwards;
}



@keyframes wave {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.wave-animation {
  animation: wave 4s infinite ease-out;
}


.blinking {
  animation: blink-animation 5s infinite;
}

@keyframes blink-animation {
  0%, 50% {
    opacity: 1;
  }
  51%, 52% {
    opacity: 0;
  }
  53%, 100% {
    opacity: 1;
  }
}


.draw-aibot {
  stroke-dasharray: 67.1428;
  stroke-dashoffset: 67.1428;
  animation: draw 2s infinite, reset 10s infinite;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes reset {
  0% {
    stroke-dashoffset: 67.1428;
  }
  30% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}


#wpbody-content {
  display: none !important;
}


@keyframes slideInFromCenter {
  0% { 
      opacity: 0;
      transform: translateX(-50%);
  }
  50% { 
    opacity: 0;
    transform: translateX(-25%);
  }
  100% {
      opacity: 1;
      transform: translateX(0);
  }
}

.slide-in-from-center {
  animation: slideInFromCenter 0.5s ease-out forwards;
}

@keyframes slideOutFromCenter {
  0% { 
      transform: translateX(50%);
  }
  100% {
      transform: translateX(0%);
  }
}

.slide-out-from-center {
  animation: slideOutFromCenter 0.5s ease-out forwards;
}

@keyframes typing {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: white; }
}

.typing-text {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid transparent;
}

.typing-text.animate {
  animation: typing 1s steps(11, end), step-end infinite;
}