@import url("/assets/actiontext-2541ac0d.css");
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url("https://fonts.googleapis.com/css2?family=Yeseva+One&display=swap");

/* Shop bag animation */
@keyframes bag-bounce {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

.animate-bag-bounce {
  display: inline-block;
  animation: bag-bounce 0.3s ease-in-out;
}

/* Hotwire Combobox Full Width Styles */
@layer components {
  /* Ensure Hotwire Combobox takes full width in form containers */
  [data-controller*="hw-combobox"] {
    @apply w-full;
  }
  
  [data-controller*="hw-combobox"] .hw-combobox__main__wrapper {
    @apply w-full;
  }
  
  [data-controller*="hw-combobox"] input[role="combobox"] {
    @apply w-full;
  }
  
  /* Ensure dropdown listbox takes full width */
  [data-controller*="hw-combobox"] [role="listbox"] {
    @apply w-full;
    min-width: 100%;
  }
  
  /* Allow options to wrap text instead of truncating */
  [data-controller*="hw-combobox"] [role="option"],
  .hw-combobox__option {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    @apply text-sm;
  }
  
  /* Ensure the dropdown dialog is wide enough */
  [data-controller*="hw-combobox"] .hw-combobox__listbox {
    @apply w-full;
    min-width: 100%;
  }
}