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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

@layer base {
  @font-face {
    font-family: "quicksand";
    src: url(/fonts/quicksand.ttf) format("truetype");
  }
}

details>summary::-webkit-details-marker {
  display: none;
}

.tirar-setinha-dupla select {
  @apply bg-none
}

@keyframes slide-up-then-down {

  0%,
  100% {
    transform: translateY(70px);
    opacity: 0;
  }

  5%,
  95% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.copy-success {
  animation: slide-up-then-down 4s both;
}

.animate-fadeIn {
  animation: fadeIn 0.2s ease-out;
}

.flavor-selector-card {
  @apply bg-gray-50 border border-gray-200;
}

.flavor-select {
  @apply block w-full rounded-md border border-gray-300 bg-white px-3 py-2.5 text-sm transition-all duration-150;
}

.flavor-select:hover {
  @apply border-gray-400;
}

.flavor-select:focus {
  @apply border-[#6f2c30] ring-1 ring-[#6f2c30]/30 outline-none;
}

.flavor-add-btn {
  @apply w-full flex items-center justify-center gap-2 px-4 py-2.5 font-medium rounded-md border border-gray-300 bg-white text-gray-700 transition-all duration-150;
}

.flavor-add-btn:hover {
  @apply bg-gray-50 border-gray-400;
}

.flavor-remove-btn {
  @apply flex-shrink-0 flex items-center justify-center w-8 bg-white text-gray-500 rounded-md border border-gray-300 transition-all duration-150;
  height: 2.625rem;
  /* Mesma altura do select (py-2.5 + borders) */
}

.flavor-remove-btn:hover {
  @apply bg-gray-50 text-gray-700 border-gray-400;
}
/*
 * 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.
 *


 */