/* @import url('https://fonts.googleapis.com/css2?family=Bytesized&display=swap'); */

@import url("https://fonts.googleapis.com/css2?family=Bytesized&family=Doto:wght,ROND@100..900,100&family=Nabla&family=Pixelify+Sans:wght@400..700&display=swap");

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

@layer components {
  .btn-primary {
    @apply flex justify-center w-1/12 bg-blue-400 rounded-lg hover:bg-blue-600 text-white cursor-pointer;
  }

  .pop-over-item3 {
    @apply shadow-2xl shadow-black flex flex-row text-center z-0 fixed bottom-10 right-3.5 h-8 lg:h-10 lg:w-72 mb-24 bg-white rounded-full border-[2.5px] lg:border-[3.5px] mr-12;
  }

  .pop-over-item2 {
    @apply shadow-2xl shadow-black flex flex-row text-center z-0 fixed bottom-10 right-3.5 h-8 lg:h-10 lg:w-72 mb-12 bg-white rounded-full border-[2.5px] lg:border-[3.5px] mr-12;
  }

  .pop-over-home {
    @apply shadow-2xl shadow-black flex flex-row text-center z-0 fixed bottom-10 right-3.5 h-8 lg:h-10 lg:w-72 bg-white rounded-full border-[2.5px] lg:border-[3.5px] mr-12;
  }

  .nav-button-base {
    @apply z-0 fixed bottom-10 right-3.5 h-8 w-8 lg:h-10 lg:w-10 bg-white rounded-full border-[2.5px] lg:border-[3.5px] shadow-xl shadow-gray-400;
  }

  .text-pop-over {
    @apply mt-1 mx-auto text-xs lg:text-base font-bold text-pretty;
  }

  .menu-item-base {
    @apply flex mx-auto mt-2 justify-center w-full my-12;
  }

  .menu-item {
    @apply rounded-lg transition-colors duration-200;
  }

  /* Faixa de navegação rolável sem a barra de rolagem visível */
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .glow-button {
    @apply before:blur-[30px] before:opacity-80 before:-z-10 before:absolute before:inset-[5px] before:bg-gradient-to-r;
  }

  .default-bg {
    @apply rounded-lg p-8 bg-[#202744] shadow-sm shadow-black w-5/6 mt-6 mx-auto border border-gray-700;
  }

  .admin-nav-buttons {
    @apply lg:px-4 px-2 py-2 rounded-md text-white hover:bg-indigo-300 transition duration-150 ease-in-out;
  }

  /* Tela de login (layouts/auth) */
  .label-auth {
    @apply mb-1.5 block text-xs font-semibold uppercase tracking-wide text-gray-400;
  }

  .input-auth {
    @apply w-full rounded-lg border-0 bg-[#191f37] px-4 py-3 text-white placeholder-gray-500 ring-1 ring-white/10 transition focus:outline-none focus:ring-2 focus:ring-[#00DFA2];
  }

  .btn-auth {
    @apply flex w-full cursor-pointer items-center justify-center rounded-lg bg-[#00DFA2] px-4 py-3 text-base font-bold text-[#0b1020] shadow-lg shadow-[#00DFA2]/20 transition hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-[#00DFA2] focus:ring-offset-2 focus:ring-offset-[#202744];
  }

  .standard-plan {
    @apply select-none rounded-lg font-extrabold text-white bg-gradient-to-r from-gray-400 via-gray-400 to-gray-600 px-4 py-2 transition duration-300 ease-in-out shadow-lg shadow-gray-600;
  }

  .pro-plan {
    @apply select-none rounded-lg font-extrabold text-white bg-gradient-to-r from-gray-600 via-gray-900 to-black px-4 py-2 transition duration-300 ease-in-out shadow-lg shadow-indigo-600;
  }

  .pro-plus-plan {
    @apply select-none rounded-lg font-extrabold text-white bg-gradient-to-r from-yellow-400 via-yellow-400 to-yellow-600 px-4 py-2 transition duration-300 ease-in-out shadow-lg shadow-yellow-600;
  }
}

/* Barra de progresso do carrossel de promoções (deals_carousel_controller.js) */
@keyframes carousel-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

.carousel-progress {
  transform-origin: left;
  animation: carousel-progress 7s linear forwards;
}

.carousel-paused .carousel-progress {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-progress {
    animation: none;
    transform: scaleX(1);
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */
@tailwind base;
@tailwind components;
@tailwind utilities;