/* ============================================================================
   NEEMALK SUPERMARKET UMOJA - storefront styles
   Brand: green #00A859 กค orange #F36F21 กค deep blue #0B2545
   Fonts: Plus Jakarta Sans (headings) / Inter (body)
   ========================================================================== */

:root {
  --neem-green: #00A859;
  --neem-green-dark: #00894a;
  --neem-orange: #F36F21;
  --neem-orange-dark: #d65a12;
  --neem-blue: #0B2545;
  --neem-blue-soft: #12325c;
  --neem-ink: #1f2937;
  --neem-muted: #6b7280;
  --neem-border: #e5e7eb;
  --neem-bg: #f7f9fb;
  --neem-white: #ffffff;
  --neem-danger: #dc2626;
  --neem-amber: #f59e0b;
  --font-head: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--neem-ink);
  background: var(--neem-white);
  -webkit-text-size-adjust: 100%;
}

html { scroll-behavior: smooth; }
:focus-visible { outline: 3px solid rgba(0,168,89,.45); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

h1, h2, h3, h4, h5, h6, .font-head {
  font-family: var(--font-head);
  color: var(--neem-blue);
}

a { color: var(--neem-green-dark); }

/* ---------------- Top utility bar ---------------- */
.topbar { background: #081A30; border-bottom: 3px solid var(--neem-green); font-size: 12px; overflow: hidden; max-height: 44px; }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 36px; }
.topbar-links { display: flex; align-items: center; flex-wrap: nowrap; gap: .25rem .85rem; min-width: 0; }
.topbar-item { display: inline-flex; align-items: center; gap: .35rem; color: #b9c7da; text-decoration: none; white-space: nowrap; }
.topbar-item i { color: var(--neem-green); font-size: 13px; line-height: 1; }
a.topbar-item:hover { color: #fff; }
.topbar-promo { color: #e8f5ee; font-weight: 600; }
.topbar-promo > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 190px; }
.topbar-sep { width: 1px; height: 14px; background: rgba(255,255,255,.18); }
.topbar-signout { color: #8fa1b8; }
.topbar-signout:hover { color: #fff; }

/* ---------------- Main header ---------------- */
.site-header { background: var(--neem-white); border-bottom: 1px solid var(--neem-border); box-shadow: 0 1px 2px rgba(11,37,69,.04); }
.brand-logo { border-radius: 10px; object-fit: cover; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.brand-name { display: block; font-family: var(--font-head); font-weight: 800; font-size: 19px; color: var(--neem-blue); letter-spacing: .5px; line-height: 1; }
.brand-sub { display: block; font-size: 9px; color: var(--neem-orange); letter-spacing: 2.4px; font-weight: 700; }

.search-form { max-width: 620px; margin-inline: auto; }
.search-input { border-radius: 24px; padding: .55rem 3rem .55rem 1.1rem; border: 1.5px solid #d4dae2; background: #f8fafc; font-size: 14px; }
.search-input:focus { background: #fff; border-color: var(--neem-green); box-shadow: 0 0 0 .2rem rgba(0,168,89,.12); }
.btn-search { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); border: 0; background: var(--neem-green); color: #fff; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; }
.btn-search:hover { background: var(--neem-green-dark); color: #fff; }

.search-suggest { width: 100%; border-radius: 14px; box-shadow: 0 12px 32px rgba(11,37,69,.18); border: 1px solid var(--neem-border); max-height: 380px; overflow-y: auto; z-index: 1080; }
.search-suggest .suggest-item { display: block; padding: .55rem .9rem; text-decoration: none; color: var(--neem-ink); border-bottom: 1px solid #f1f5f9; }
.search-suggest .suggest-item:hover { background: #f0fdf6; }
.search-suggest .suggest-item img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; }
.search-suggest .suggest-empty { padding: .9rem; color: var(--neem-muted); font-size: 13px; }

.header-actions .header-icon { color: var(--neem-blue); font-size: 22px; position: relative; }
.header-actions .header-icon span { color: var(--neem-muted); font-size: 11px; }
.header-actions .header-icon:hover { color: var(--neem-green); }
.cart-badge { position: absolute; top: -6px; right: -9px; background: var(--neem-orange); color: #fff; font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }

/* Mobile menu button: high-contrast green pill so it is clearly visible. */
.nav-burger { border: 0; background: var(--neem-green); color: #fff; width: 42px; height: 42px; border-radius: 12px; display: inline-grid; place-items: center; font-size: 24px; line-height: 1; padding: 0; box-shadow: 0 4px 12px rgba(0,168,89,.28); }
.nav-burger:hover { background: var(--neem-green-dark); color: #fff; }

/* ---------------- Main navigation ---------------- */
.main-nav { background: var(--neem-blue); padding-block: 0; }
.main-nav .navbar-nav .nav-link { color: #dbe4ef; font-size: 14px; font-weight: 500; padding: .8rem 1rem; }
.main-nav .navbar-nav .nav-link:hover, .main-nav .navbar-nav .nav-link.active { color: var(--neem-white); background: rgba(255,255,255,.08); }
.main-nav .dropdown-menu { border-radius: 10px; border: 1px solid var(--neem-border); box-shadow: 0 14px 34px rgba(11,37,69,.16); margin-top: 0; }
.category-menu { max-height: 480px; overflow-y: auto; min-width: 240px; }
.category-menu .dropdown-item { font-size: 13.5px; padding: .45rem 1rem; color: var(--neem-ink); }
.category-menu .dropdown-item:hover { background: #f0fdf6; color: var(--neem-green-dark); }

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  background-color: var(--neem-blue);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M2 2h3v3H2z' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  background-size: 30px 30px;
}
.hero-shape { position: absolute; border-radius: 50%; pointer-events: none; }
.hero-shape-green { top: -130px; right: -80px; width: 430px; height: 430px; background: rgba(0,168,89,.22); }
.hero-shape-orange { bottom: -205px; left: -110px; width: 390px; height: 390px; background: rgba(243,111,33,.14); }
.hero-shape-ring { top: 50%; right: 3%; width: 290px; height: 290px; transform: translateY(-50%); border: 2px solid rgba(255,255,255,.12); background: rgba(255,255,255,.02); }
.hero-accent { position: absolute; left: 0; right: 0; bottom: 0; height: 5px; display: flex; }
.hero-accent span { flex: 1; }
.hero-accent span:nth-child(1) { background: var(--neem-green); }
.hero-accent span:nth-child(2) { background: var(--neem-orange); }
.hero-accent span:nth-child(3) { background: #ffffff; }
.hero > .container { position: relative; z-index: 1; }
.hero .badge-rot { background: var(--neem-orange); color: #fff; }
.hero-title { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 4vw, 2.8rem); line-height: 1.15; color: #fff; }
.hero-title .hl-green { color: #3ddc84; }
.hero-title .hl-orange { color: #ff9f43; }
.hero-text { color: #c9d6e6; }
.hero .btn-hero { background: var(--neem-green); color: #fff; border-radius: 30px; padding: .7rem 1.6rem; font-weight: 600; }
.hero .btn-hero:hover { background: var(--neem-green-dark); color: #fff; }
.hero .btn-hero-outline { border: 1.5px solid rgba(255,255,255,.45); color: #fff; background: transparent; border-radius: 30px; padding: .7rem 1.6rem; font-weight: 600; }
.hero .btn-hero-outline:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
.hero-perk { display: flex; gap: .6rem; align-items: flex-start; font-size: 13px; color: #d7e2ef; }
.hero-perk i { color: var(--neem-green); font-size: 16px; }

/* ---------------- Sections ---------------- */
.section-title { font-weight: 800; font-size: 1.35rem; position: relative; padding-bottom: .5rem; }
.section-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 52px; height: 3px; border-radius: 3px; background: var(--neem-orange); }
.section-title .text-muted { font-weight: 400; }

/* ---------------- Product cards ---------------- */
.product-card { border: 1px solid var(--neem-border); border-radius: 14px; overflow: hidden; background: #fff; transition: transform .15s ease, box-shadow .15s ease; height: 100%; display: flex; flex-direction: column; }
.product-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(11,37,69,.12); }
.product-thumb { aspect-ratio: 4/3; background: #f8fafc; position: relative; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.offer-flag { position: absolute; top: 10px; left: 10px; background: var(--neem-orange); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; z-index: 2; }
.stock-flag { position: absolute; top: 10px; right: 10px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 20px; z-index: 2; }
.stock-flag.in { background: rgba(0,168,89,.14); color: var(--neem-green-dark); }
.stock-flag.out { background: rgba(220,38,38,.12); color: var(--neem-danger); }
.product-body { padding: .85rem 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.product-cat { font-size: 11px; color: var(--neem-orange); font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.product-name { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; color: var(--neem-blue); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; text-decoration: none; }
.product-name:hover { color: var(--neem-green-dark); }
.product-price-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.product-price { font-weight: 800; font-size: 1.05rem; color: var(--neem-ink); }
.product-price .code { font-size: 12px; color: var(--neem-muted); font-weight: 600; margin-right: 2px; }
.product-price-original { text-decoration: line-through; color: var(--neem-muted); font-size: 12px; font-weight: 500; }
.btn-add { background: var(--neem-green); color: #fff; border: 0; border-radius: 10px; width: 38px; height: 38px; display: grid; place-items: center; font-size: 17px; transition: background .15s; }
.btn-add:hover { background: var(--neem-green-dark); color: #fff; }
.btn-add:disabled { background: #cbd5e1; color: #94a3b8; cursor: not-allowed; }
.btn-add.added { background: #10b981; }

/* ---------------- Offers hero strip ---------------- */
.offers-strip { background: var(--neem-orange); border-radius: 16px; color: #fff; }

/* ---------------- Category tiles ---------------- */
.category-tile { border: 1px solid var(--neem-border); border-radius: 14px; background: #fff; display: block; padding: 1.1rem; text-decoration: none; color: var(--neem-ink); height: 100%; transition: all .15s ease; }
.category-tile:hover { border-color: var(--neem-green); box-shadow: 0 10px 24px rgba(0,168,89,.14); color: var(--neem-ink); transform: translateY(-2px); }
.category-tile .icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 20px; background: #f0fdf6; color: var(--neem-green-dark); margin-bottom: .6rem; }
.category-tile h6 { font-weight: 700; margin-bottom: .15rem; }
.category-tile small { color: var(--neem-muted); }

/* ---------------- Cart ---------------- */
.qty-stepper { display: inline-flex; align-items: center; border: 1.5px solid #d4dae2; border-radius: 10px; overflow: hidden; }
.qty-stepper button { border: 0; background: #f8fafc; width: 32px; height: 32px; color: var(--neem-blue); font-size: 16px; line-height: 1; }
.qty-stepper button:hover { background: var(--neem-green); color: #fff; }
.qty-stepper input { border: 0; width: 46px; text-align: center; font-weight: 600; font-size: 14px; }
.cart-line img { width: 64px; height: 64px; object-fit: contain; border-radius: 10px; background: #f8fafc; border: 1px solid var(--neem-border); }

.order-summary { background: #f8fafc; border: 1px solid var(--neem-border); border-radius: 16px; }
.order-summary .summary-row { display: flex; justify-content: space-between; padding: .45rem 0; font-size: 14px; }
.order-summary .summary-row.total { border-top: 2px solid var(--neem-blue); margin-top: .4rem; padding-top: .8rem; font-weight: 800; font-size: 1.1rem; color: var(--neem-blue); }

/* ---------------- Checkout ---------------- */
.checkout-section { border: 1px solid var(--neem-border); border-radius: 16px; background: #fff; }
.checkout-section .checkout-head { background: var(--neem-blue); color: #fff; border-radius: 15px 15px 0 0; padding: .8rem 1.2rem; font-weight: 700; font-family: var(--font-head); font-size: 15px; }
.map-pin-note { font-size: 12.5px; color: var(--neem-muted); }

/* Payment states */
.pay-state { border-radius: 14px; padding: 1.2rem; border: 1px solid var(--neem-border); }
.pay-state.pending { background: #fffbeb; border-color: #fde68a; }
.pay-state.success { background: #f0fdf4; border-color: #86efac; }
.pay-state.failed { background: #fef2f2; border-color: #fca5a5; }
.spin-mpesa { width: 26px; height: 26px; border: 3px solid rgba(11,37,69,.2); border-top-color: var(--neem-green); border-radius: 50%; animation: spin 1s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- Misc ---------------- */
.hero-block { background: var(--neem-blue); border-radius: 18px; color: #fff; padding: 2rem; }
.legal { max-width: 760px; }
.legal h2 { font-size: 1.25rem; margin-top: 1.5rem; }
.legal p, .legal li { color: #374151; font-size: 14.5px; line-height: 1.75; }
.contact-info-card { background: var(--neem-blue); border-radius: 16px; color: #fff; }
.contact-info-card a { color: var(--neem-green); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--neem-muted); }
.empty-state i { font-size: 44px; color: #cbd5e1; }

.track-status li { position: relative; padding-left: 26px; margin-bottom: 1rem; }
.track-status li::before { content: ""; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: #e5e7eb; border: 2px solid #fff; box-shadow: 0 0 0 2px #e5e7eb; }
.track-status li.done::before { background: var(--neem-green); box-shadow: 0 0 0 2px var(--neem-green); }
.track-status li.current::before { background: var(--neem-orange); box-shadow: 0 0 0 2px var(--neem-orange); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 2px var(--neem-orange);} 50% { box-shadow: 0 0 0 5px rgba(243,111,33,.35);} }

/* ---------------- Footer ---------------- */
.site-footer { background: var(--neem-blue); color: #cbd5e1; }
.site-footer .footer-brand { font-family: var(--font-head); font-weight: 800; font-size: 20px; color: #fff; line-height: 1; }
.site-footer .footer-brand-sub { font-size: 9px; color: var(--neem-orange); letter-spacing: 2.4px; font-weight: 700; }
.site-footer .footer-head { color: #fff; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .5rem; }
.footer-links a { color: #b9c6d8; text-decoration: none; font-size: 13.5px; }
.footer-links a:hover { color: var(--neem-green); }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { margin-bottom: .55rem; font-size: 13.5px; }
.footer-contact a { color: #b9c6d8; text-decoration: none; }
.footer-contact a:hover { color: var(--neem-green); }
.social-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; font-size: 17px; text-decoration: none; }
.social-btn:hover { background: var(--neem-green); color: #fff; }
.footer-hours { background: rgba(255,255,255,.07); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.1); }

/* ---------------- Floating actions ---------------- */
.fab-stack { position: fixed; right: 14px; bottom: 14px; z-index: 1500; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.fab { width: 50px; height: 50px; border-radius: 50%; border: 0; display: inline-grid; place-items: center; font-size: 21px; color: #fff; cursor: pointer; box-shadow: 0 10px 24px rgba(11,37,69,.28); transition: background .15s ease, transform .15s ease; }
.fab:hover { transform: translateY(-2px); color: #fff; }
.fab-pwa { background: var(--neem-green); }
.fab-pwa:hover { background: var(--neem-green-dark); }
.fab-welcome { background: var(--neem-orange); }
.fab-welcome:hover { background: var(--neem-orange-dark); }
.fab-top { background: var(--neem-blue); }
.fab-top:hover { background: var(--neem-blue-soft); }
.fab[hidden] { display: none; }

.welcome-badge { position: fixed; right: 14px; bottom: 78px; z-index: 1490; width: min(336px, calc(100vw - 28px)); background: #fff; border: 1px solid var(--neem-border); border-radius: 16px; box-shadow: 0 18px 44px rgba(11,37,69,.22); padding: 1.05rem 1.05rem .95rem; animation: welcomeIn .35s ease; }
@keyframes welcomeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.welcome-badge[hidden] { display: none; }
.welcome-close { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #f1f5f9; color: var(--neem-muted); display: grid; place-items: center; font-size: 14px; }
.welcome-close:hover { background: #fee2e2; color: var(--neem-danger); }
.welcome-badge-icon { width: 46px; height: 46px; border-radius: 13px; background: #f0fdf6; color: var(--neem-green-dark); display: grid; place-items: center; font-size: 22px; margin-bottom: .55rem; }
.welcome-badge-title { font-weight: 800; margin-bottom: .3rem; font-size: 15px; }
.welcome-badge-text { font-size: 13px; color: var(--neem-muted); line-height: 1.55; margin-bottom: .7rem; }

/* ---------------- Responsive ---------------- */
@media (min-width: 1400px) {
  .container, .container-lg, .container-xl, .container-xxl { max-width: 1240px; }
}

@media (max-width: 991.98px) {
  .main-nav .navbar-collapse { background: var(--neem-blue); border-radius: 0 0 14px 14px; padding: .5rem .5rem .7rem; margin-top: 0; }
  .main-nav .navbar-collapse .nav-link { padding: .7rem 1rem; border-radius: 8px; }
  .main-nav .category-menu { border: 0; box-shadow: none; background: transparent; padding-left: .5rem; }
  .main-nav .category-menu .dropdown-item { color: #dbe4ef; border-radius: 8px; }
  .main-nav .category-menu .dropdown-item:hover { background: rgba(255,255,255,.08); color: #fff; }
  .main-nav .category-menu .dropdown-divider { border-color: rgba(255,255,255,.15); }
  .topbar { max-height: 52px; }
}

@media (max-width: 767.98px) {
  .search-form { max-width: 100%; }
  .header-actions .header-icon span { display: none; }
  .search-input { font-size: 16px; }                       /* prevents iOS focus zoom */
  .hero-title { font-size: clamp(1.5rem, 6vw, 2.1rem); }
  .section-title { font-size: 1.2rem; }
  .product-body { padding: .7rem .8rem; }
  .product-name { font-size: 13.5px; }
  .product-price { font-size: 1rem; }
  .cart-line img { width: 54px; height: 54px; }
  .empty-state { padding: 2rem 1rem; }
}

@media (max-width: 575.98px) {
  .brand-name { font-size: 17px; }
  .btn-search { width: 36px; height: 36px; }
  .qty-stepper input { width: 40px; }
  .offers-strip { border-radius: 12px; }
  .hero .btn-hero, .hero .btn-hero-outline { width: 100%; }
  .order-summary { border-radius: 12px; }
  .fab { width: 46px; height: 46px; font-size: 19px; }
  .welcome-badge { right: 10px; bottom: 72px; }
  .topbar { font-size: 11.5px; }
  .topbar-promo > span { max-width: 150px; }
}

@media (hover: none) {
  /* Touch devices: prevent hover elevation from sticking */
  .product-card:hover, .category-tile:hover { transform: none; }
}

@media print {
  .topbar, .main-nav, .site-footer, .header-actions, .fab-stack, .welcome-badge { display: none !important; }
}