/* FreshKart design tokens — ported 1:1 from the Node app's frontend/css/style.css
   so this Laravel edition looks identical. */
:root {
  --fk-green: #0aa66e;
  --fk-green-dark: #087a51;
  --fk-green-light: #e3f7ee;
  --fk-orange: #ff7a1a;
  --fk-orange-dark: #e2620a;
  --fk-orange-light: #fff1e5;
  --fk-ink: #14181f;
  --fk-text: #1c2128;
  --fk-text-muted: #667085;
  --fk-surface: #ffffff;
  --fk-surface-alt: #f5f7f6;
  --fk-border: #e7eae8;
  --fk-danger: #d5372b;
  --fk-warning: #b8863a;
  --fk-success: #0aa66e;
  --fk-font-display: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --fk-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fk-radius-sm: 8px;
  --fk-radius-md: 14px;
  --fk-radius-lg: 22px;
}

body {
  font-family: var(--fk-font-body);
  color: var(--fk-text);
  background: var(--fk-surface-alt);
}

h1, h2, h3, h4, .fk-brand, .navbar-brand {
  font-family: var(--fk-font-display);
}

.fk-navbar {
  background: var(--fk-surface);
  border-bottom: 1px solid var(--fk-border);
}

.fk-brand {
  font-weight: 700;
  color: var(--fk-green);
}
.fk-brand span { color: var(--fk-orange); }

.fk-btn-primary {
  background: var(--fk-green);
  border-color: var(--fk-green);
  color: #fff;
}
.fk-btn-primary:hover { background: var(--fk-green-dark); color: #fff; }

.fk-btn-outline {
  border: 1.5px solid var(--fk-border);
  background: transparent;
}

/* Selected state for the UPI-app quick-pick pills on checkout (Bootstrap's
   .btn-check pairs with its own .btn-outline-* variants for this, but
   fk-btn-outline is a custom class, so it needs its own :checked rule). */
.btn-check:checked + .fk-btn-outline {
  background: var(--fk-green-light);
  border-color: var(--fk-green);
  color: var(--fk-green-dark);
}

.fk-badge-discount {
  background: var(--fk-orange-light);
  color: var(--fk-orange-dark);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.75rem;
}

.fk-badge-combo {
  background: var(--fk-green-light);
  color: var(--fk-green-dark);
  font-weight: 600;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
}

.fk-badge-deal {
  background: var(--fk-danger);
  color: #fff;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  font-size: 0.7rem;
  z-index: 2;
  box-shadow: 0 2px 6px rgba(20,24,31,0.18);
}

/* Was a single horizontally-scrolling row with a fade-out mask hinting at
   more content off to the right — but the mask cut the last pill off
   awkwardly against the container edge rather than showing it cleanly, and
   on a catalog with several categories that pill (typically "Household
   Essentials", being one of the longer labels) visibly ran past the page's
   right boundary before the fade even kicked in. Switched to a wrapping
   row instead: every pill is always fully visible, wrapping onto a second
   line rather than ever being clipped or overflowing.
   On the Shop page, this div is itself a flex ITEM inside a
   `d-flex justify-content-between` row (alongside the "Top Deals only"
   toggle) — a flex item's default sizing is "shrink-to-fit its content",
   so without `min-width: 0` a flex item that itself contains flex-wrapped
   children can still size itself to fit ALL of them unwrapped and overflow
   its parent, rather than actually wrapping. `flex: 1 1 auto; min-width: 0`
   makes it take the row's real available width first, so its own
   `flex-wrap` has something to wrap against. Harmless on the Home page,
   where this div isn't inside another flex row. */
.category-nav {
  display: flex; flex-wrap: wrap; gap: 0.5rem; padding-bottom: 0.25rem;
  flex: 1 1 auto; min-width: 0;
}

.category-pill {
  flex-shrink: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  border: 1.5px solid var(--fk-border);
  font-size: 0.85rem; font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  color: var(--fk-text);
  background: var(--fk-surface);
}
.category-pill.active, .category-pill:hover {
  background: var(--fk-green);
  border-color: var(--fk-green);
  color: #fff;
}

.fk-card {
  background: var(--fk-surface);
  border: 1px solid var(--fk-border);
  border-radius: var(--fk-radius-md);
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.fk-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(20,24,31,0.08); }

.fk-price-mrp { color: var(--fk-text-muted); text-decoration: line-through; font-size: 0.85rem; }
.fk-price { font-weight: 700; font-size: 1.1rem; }

.fk-footer { border-top: 1px solid var(--fk-border); margin-top: 3rem; }

/* --- Big multi-column footer --- */
.fk-footer-big {
  margin-top: 3rem;
  background: var(--fk-surface);
  border-top: 1px solid var(--fk-border);
}
.fk-footer-heading {
  font-family: var(--fk-font-display);
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
}
.fk-footer-links a {
  color: var(--fk-text-muted);
  text-decoration: none;
  font-size: 0.9rem;
  display: inline-block;
}
.fk-footer-links li { margin-bottom: 0.6rem; }
.fk-footer-links a:hover { color: var(--fk-green); }
.fk-footer-bottom {
  background: var(--fk-surface-alt);
  border-top: 1px solid var(--fk-border);
}
.fk-social-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fk-ink); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; font-size: 0.95rem;
}
.fk-social-icon:hover { background: var(--fk-green); color: #fff; }

/* --- Assistant chat widget --- */
#fk-assistant-launcher {
  position: fixed; bottom: 24px; right: 24px; z-index: 1050;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--fk-green); color: #fff; border: none;
  font-size: 1.4rem; box-shadow: 0 8px 24px rgba(10,166,110,0.35);
}
#fk-assistant-panel {
  position: fixed; bottom: 92px; right: 24px; z-index: 1050;
  width: 340px; max-width: calc(100vw - 32px); height: 460px;
  background: var(--fk-surface); border-radius: var(--fk-radius-lg);
  border: 1px solid var(--fk-border); box-shadow: 0 20px 50px rgba(20,24,31,0.2);
  display: none; flex-direction: column; overflow: hidden;
}
#fk-assistant-panel.open { display: flex; }
#fk-assistant-panel .fk-chat-header {
  background: var(--fk-green); color: #fff; padding: 0.75rem 1rem; font-weight: 600;
}
#fk-assistant-panel .fk-chat-body { flex: 1; overflow-y: auto; padding: 0.75rem; font-size: 0.9rem; }
#fk-assistant-panel .fk-chat-msg { margin-bottom: 0.6rem; padding: 0.5rem 0.75rem; border-radius: var(--fk-radius-sm); max-width: 85%; white-space: pre-wrap; }
#fk-assistant-panel .fk-chat-msg.user { background: var(--fk-green-light); margin-left: auto; }
#fk-assistant-panel .fk-chat-msg.assistant { background: var(--fk-surface-alt); }
#fk-assistant-panel .fk-chat-footer { border-top: 1px solid var(--fk-border); padding: 0.5rem; display: flex; gap: 0.4rem; }