@import "tailwindcss";

/* Tailwind v4 sets `cursor: default` on buttons; restore the pointer for all
   interactive elements (matches v3 / native link behavior). */
@layer base {
  a,
  button:not(:disabled),
  [type="button"]:not(:disabled),
  [type="submit"]:not(:disabled),
  [type="reset"]:not(:disabled),
  [role="button"]:not(:disabled),
  summary,
  label[for] {
    cursor: pointer;
  }

  /* Drop the default browser focus ring on form controls (keep a subtle
     border highlight so focus is still visible). */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    @apply focus:outline-none focus:border-indigo-400;
  }
}

/* Reusable button styles so every CTA looks the same. */
@layer components {
  .btn-primary {
    @apply inline-flex w-full items-center justify-center rounded-lg px-4 py-2.5
           font-semibold text-sm uppercase tracking-wide text-white bg-indigo-500 transition-colors duration-300
           hover:bg-indigo-600 active:bg-indigo-700
           disabled:opacity-50 disabled:pointer-events-none;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2.5
           font-semibold text-sm uppercase tracking-wide text-gray-700 bg-gray-100 transition-colors duration-300
           hover:bg-gray-200 disabled:opacity-50 disabled:pointer-events-none;
  }

  .btn-danger {
    @apply inline-flex items-center justify-center rounded-lg px-4 py-2.5
           font-semibold text-sm uppercase tracking-wide text-white bg-rose-500 transition-colors duration-300
           hover:bg-rose-600 active:bg-rose-700
           disabled:opacity-50 disabled:pointer-events-none;
  }

  /* Size variants — defined last so their padding/size win when combined. */
  .btn-mini {
    @apply w-auto rounded-md px-3 py-1.5 text-xs;
  }
  .btn-large {
    @apply py-3.5 text-base;
  }

  /* Creator screens — category chips + cards (match public/demo prototype). */
  .wc-chip {
    @apply inline-flex items-center gap-1 px-3 py-1.5 rounded-full text-[11px] font-bold
           whitespace-nowrap border transition-colors no-underline
           sm:text-xs;
  }
  .wc-chip-on  { @apply bg-[#1D1733] text-white border-transparent; }
  .wc-chip-off { @apply bg-white text-gray-500 border-gray-200 hover:text-gray-900; }
  .wc-card {
    @apply bg-white rounded-xl;
  }
  /* The Discover search renders its own clear button — hide WebKit's native one. */
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
  }
}

/* Modal open/close transition (opacity + subtle scale, 200ms), driven by the
   `.modal-visible` class toggled in lib/modals.js — same pattern as Vouched.
   Put `.wc-modal` on any modal overlay to opt in. */
.wc-modal {
  opacity: 0;
  transition: opacity 200ms;
}
.wc-modal > div {
  transform: scale(0.95);
  transition: transform 200ms;
}
.wc-modal.modal-visible {
  opacity: 1;
}
.wc-modal.modal-visible > div {
  transform: scale(1);
}