/* OfferKini — Global styles
   Design system: deep green (primary), lime green (secondary/accent),
   off-white/charcoal neutrals. Clean, minimal, conversion-focused. */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --ok-green-900: #0b3d2e;
  --ok-green-800: #0f4c3a;
  --ok-green-700: #145c45;
  --ok-green-600: #1a6e52;
  --ok-lime-500: #a6e22e;
  --ok-lime-400: #b9ec4f;
  --ok-lime-300: #ccf474;
  --ok-charcoal: #1c1f1e;
  --ok-gray-700: #3f4644;
  --ok-gray-500: #6b7472;
  --ok-gray-300: #d7dcda;
  --ok-off-white: #f6f8f6;
  --ok-white: #ffffff;
  --ok-red: #d9362f;
  --ok-red-bg: #fdecea;
}

* { box-sizing: border-box; }

html, body {
  font-family: 'Hind Siliguri', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ok-charcoal);
  background: var(--ok-off-white);
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

body { margin: 0; }

a { text-decoration: none; color: inherit; }

button { font-family: inherit; cursor: pointer; }

img { max-width: 100%; display: block; }

::selection { background: var(--ok-lime-400); color: var(--ok-green-900); }

/* Skeleton loading shimmer */
.skeleton {
  background: linear-gradient(90deg, #e9edea 25%, #f4f6f4 37%, #e9edea 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-loading {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* Toast */
#toast-root {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  max-width: 380px;
  padding: 0 16px;
  pointer-events: none;
}
.ok-toast {
  background: var(--ok-charcoal);
  color: #fff;
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: toast-in .25s ease-out;
  pointer-events: auto;
}
.ok-toast.success { background: var(--ok-green-800); }
.ok-toast.error { background: var(--ok-red); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
.ok-toast.hide { animation: toast-out .2s ease-in forwards; }
@keyframes toast-out { to { opacity: 0; transform: translateY(8px); } }

/* Line clamp helpers (in case Tailwind CDN plugin unavailable) */
.line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Custom scrollbar for horizontal product rails */
.ok-scroll-x { scrollbar-width: thin; }
.ok-scroll-x::-webkit-scrollbar { height: 6px; }
.ok-scroll-x::-webkit-scrollbar-thumb { background: var(--ok-gray-300); border-radius: 3px; }

/* Cart drawer transitions */
#cart-drawer-overlay, #cart-drawer {
  transition: opacity .25s ease, transform .25s ease;
}

/* Mobile bottom nav safe area */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom); }

/* Focus ring accessible */
.ok-focus:focus-visible {
  outline: 2px solid var(--ok-lime-500);
  outline-offset: 2px;
}

/* Drag handle for admin reorder */
.drag-handle { cursor: grab; }
.drag-handle:active { cursor: grabbing; }
.drag-over { outline: 2px dashed var(--ok-lime-500); }

/* Chart canvas container */
.chart-wrap { position: relative; width: 100%; }

/* Simple spinner */
.ok-spinner {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }