@import url("https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css");
@import url("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css");
@import "pagy.tailwind.css";

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

/*

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

*/

/* ---------- Storefront app design (#236) ---------- */
@layer components {
  .sf-card { @apply rounded-2xl border border-slate-200 bg-white; }
  .sf-btn { @apply inline-flex h-12 w-full items-center justify-center gap-2 rounded-2xl bg-indigo-600 px-5 text-[15px] font-bold text-white shadow-sm transition hover:bg-indigo-700 active:scale-[.99] disabled:cursor-not-allowed disabled:opacity-50; }
  .sf-btn-sm { @apply inline-flex h-9 w-auto items-center justify-center gap-1.5 rounded-xl px-3.5 text-sm font-bold; }
  .sf-btn-ghost { @apply bg-white text-slate-700 shadow-none ring-1 ring-inset ring-slate-300 hover:bg-slate-50; }
  .sf-btn-light { @apply bg-indigo-50 text-indigo-700 shadow-none hover:bg-indigo-100; }
  .sf-btn-wa { @apply bg-green-600 hover:bg-green-700; }
  .sf-btn-danger { @apply bg-white text-red-600 shadow-none ring-1 ring-inset ring-red-200 hover:bg-red-50; }
  .sf-input { @apply block h-12 w-full rounded-xl border-[1.5px] border-slate-300 bg-white px-3.5 text-base text-slate-900 placeholder:text-slate-400 focus:border-indigo-600 focus:outline-none focus:ring-4 focus:ring-indigo-100; }
  .sf-input-error { @apply border-red-500 focus:border-red-500 focus:ring-red-100; }
  .sf-label { @apply mb-1.5 block text-[13px] font-semibold text-slate-700; }
  .sf-error { @apply mt-1.5 text-xs font-medium text-red-600; }
  .sf-chip { @apply inline-flex h-9 cursor-pointer select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-full border-[1.5px] border-slate-200 bg-white px-3.5 text-[13px] font-semibold text-slate-700 transition hover:border-slate-300; }
  .sf-chip-on { @apply border-indigo-600 bg-indigo-50 text-indigo-700 hover:border-indigo-600; }
  .sf-pill { @apply inline-flex items-center rounded-full px-2.5 py-0.5 text-[11.5px] font-bold; }
  .sf-h1 { @apply text-[22px] font-extrabold tracking-tight text-slate-900 md:text-[28px]; }
  .sf-h2 { @apply text-base font-bold text-slate-900 md:text-lg; }
  .sf-muted { @apply text-[13px] leading-snug text-slate-500; }
  .sf-row { @apply flex items-center gap-3 border-b border-slate-100 py-3 last:border-0; }
  .sf-icon-tile { @apply grid h-10 w-10 shrink-0 place-items-center rounded-xl bg-indigo-50 text-lg text-indigo-600; }
  .sf-page { @apply mx-auto w-full max-w-[1120px] px-4 pb-6 pt-4 md:px-8 md:pb-12 md:pt-8; }
  .sf-sticky-cta { @apply fixed inset-x-0 bottom-0 z-30 border-t border-slate-200 bg-white px-4 pt-2.5 md:static md:z-auto md:border-0 md:bg-transparent md:p-0; padding-bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .peer:checked + label .sf-radio-dot { border: 6px solid #4f46e5; }
  .sf-has-tabs .sf-sticky-cta { bottom: calc(64px + env(safe-area-inset-bottom)); padding-bottom: 0.75rem; }
}
/* No jumpy zoom on iPhone: inputs at 16px (#236). */
.sf-shell input, .sf-shell select, .sf-shell textarea { font-size: 16px; }
@media (min-width: 768px) { .sf-shell .sf-sticky-cta { padding-bottom: 0; } }
/* Bottom sheet on phones, centred dialog on desktop (#236). */
dialog.sf-sheet { margin: auto auto 0; width: 100%; max-width: 100%; max-height: 92vh; border: 0; padding: 0; border-radius: 22px 22px 0 0; background: #fff; box-shadow: 0 -12px 30px rgba(15,23,42,.18); }
dialog.sf-sheet::backdrop { background: rgba(15,23,42,.45); }
dialog.sf-sheet[open] { animation: sf-sheet-up .22s ease-out; }
@media (min-width: 768px) { dialog.sf-sheet { margin: auto; max-width: 520px; border-radius: 20px; box-shadow: 0 30px 60px rgba(15,23,42,.3); } dialog.sf-sheet[open] { animation: sf-fade .15s ease-out; } }
@keyframes sf-sheet-up { from { transform: translateY(40px); opacity: .5 } to { transform: none; opacity: 1 } }
@keyframes sf-fade { from { opacity: 0 } to { opacity: 1 } }
@media (prefers-reduced-motion: reduce) { dialog.sf-sheet[open] { animation: none; } }