/* ============================================================
   GROUP C2 — shared page-specific polish for the "keep the app's
   own JS/data verbatim, re-skin the presentation" pages: food-catering,
   food-counters, food-shopping-planner. NOT a shared shell file (allowed
   per the group brief — "You MAY add page-specific CSS/JS as
   assets/css/gms-pages-c2.css").

   Each page's ORIGINAL <style> block was moved verbatim into its own
   assets/css/<slug>.css, scoped under .pg-<slug> (see _build/scope-css.js)
   so it cannot leak onto the shared shell. This file loads AFTER those
   per-page files and layers the Samagri-style icon-card treatment
   (tinted card background, 35-40px icon chip with a soft inner ring) on
   top of the pages' own existing card/icon classes, using the SAME
   --tint-N-bg / --chip-N custom properties the AB master package already
   defines on :root (theme-aware — dark mode is automatic, no separate
   rules needed here). No photos anywhere in this file.
   ============================================================ */

/* ---------- food-shopping-planner: .item / .pic ---------- */
.pg-food-shopping-planner .item {
  border-radius: 16px !important;
  border: 1px solid var(--line, #eadfd2) !important;
  transition: box-shadow .18s, transform .18s, border-color .18s;
}
.pg-food-shopping-planner .item:nth-child(6n+1) { background: var(--tint-1-bg) !important; border-color: var(--tint-1-line) !important; }
.pg-food-shopping-planner .item:nth-child(6n+2) { background: var(--tint-2-bg) !important; border-color: var(--tint-2-line) !important; }
.pg-food-shopping-planner .item:nth-child(6n+3) { background: var(--tint-3-bg) !important; border-color: var(--tint-3-line) !important; }
.pg-food-shopping-planner .item:nth-child(6n+4) { background: var(--tint-4-bg) !important; border-color: var(--tint-4-line) !important; }
.pg-food-shopping-planner .item:nth-child(6n+5) { background: var(--tint-5-bg) !important; border-color: var(--tint-5-line) !important; }
.pg-food-shopping-planner .item:nth-child(6n+6) { background: var(--tint-6-bg) !important; border-color: var(--tint-6-line) !important; }
.pg-food-shopping-planner .item:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(80,45,20,.14); }
.pg-food-shopping-planner .pic {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; background: var(--chip-1); box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.pg-food-shopping-planner .item:nth-child(6n+2) .pic { background: var(--chip-2); }
.pg-food-shopping-planner .item:nth-child(6n+3) .pic { background: var(--chip-3); }
.pg-food-shopping-planner .item:nth-child(6n+4) .pic { background: var(--chip-4, var(--chip-1)); }
.pg-food-shopping-planner .item:nth-child(6n+5) .pic { background: var(--chip-5, var(--chip-2)); }
.pg-food-shopping-planner .item:nth-child(6n+6) .pic { background: var(--chip-6, var(--chip-3)); }
.pg-food-shopping-planner .category-card { border-radius: 16px !important; }
.pg-food-shopping-planner .catvisual {
  width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; background: var(--chip-2);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}

/* ---------- food-counters: KEPT its own .card/.icon/.pill/.tag markup and
   render() logic 100% verbatim (mode toggle, subcategory browser, search,
   its own bilingual lang toggle, price/types/notes all already real data
   with a per-item emoji already built in — this app already matches the
   Samagri icon-card shape almost exactly). Only re-skinning colours here. */
.pg-food-counters .card {
  border-radius: 16px !important; border: 1px solid var(--line, #e7e2d6) !important;
  transition: box-shadow .18s, transform .18s;
}
.pg-food-counters .counter-grid > .card:nth-child(6n+1) { background: var(--tint-1-bg) !important; border-color: var(--tint-1-line) !important; }
.pg-food-counters .counter-grid > .card:nth-child(6n+2) { background: var(--tint-2-bg) !important; border-color: var(--tint-2-line) !important; }
.pg-food-counters .counter-grid > .card:nth-child(6n+3) { background: var(--tint-3-bg) !important; border-color: var(--tint-3-line) !important; }
.pg-food-counters .counter-grid > .card:nth-child(6n+4) { background: var(--tint-4-bg) !important; border-color: var(--tint-4-line) !important; }
.pg-food-counters .counter-grid > .card:nth-child(6n+5) { background: var(--tint-5-bg) !important; border-color: var(--tint-5-line) !important; }
.pg-food-counters .counter-grid > .card:nth-child(6n+6) { background: var(--tint-6-bg) !important; border-color: var(--tint-6-line) !important; }
.pg-food-counters .card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,20,30,.12); }
.pg-food-counters .card .icon {
  width: 38px; height: 38px; min-width: 38px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; font-size: 19px !important; background: var(--chip-1);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.pg-food-counters .counter-grid > .card:nth-child(6n+2) .icon { background: var(--chip-2); }
.pg-food-counters .counter-grid > .card:nth-child(6n+3) .icon { background: var(--chip-3); }
.pg-food-counters .counter-grid > .card:nth-child(6n+4) .icon { background: var(--chip-4); }
.pg-food-counters .counter-grid > .card:nth-child(6n+5) .icon { background: var(--chip-5); }
.pg-food-counters .counter-grid > .card:nth-child(6n+6) .icon { background: var(--chip-6); }
.pg-food-counters .card h3 { font-family: Georgia, "Noto Serif Devanagari", serif !important; }
.pg-food-counters .card .price { color: var(--gold-ink, #8A6D1F) !important; }
.pg-food-counters .card .pill { border-radius: 999px !important; background: var(--chip-2) !important; }

/* ---------- food-catering: KEPT its own .card/.card-icon/.card-title/
   .card-price/.view-btn markup, DATA and calculation logic verbatim
   (120 real options, real per-plate prices). Its own colour classes
   (veg-green / mutton-red / chicken-red / blue / gold / etc.) code
   MEANING per category, not decoration, so they are left alone — only
   radius/hover/icon-chip polish is added here, matching the Samagri look
   without erasing that colour coding. */
.pg-food-catering .card {
  border-radius: 16px !important;
  transition: box-shadow .18s, transform .18s;
}
.pg-food-catering .card:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(20,20,30,.14); }
.pg-food-catering .card-icon {
  width: 38px; height: 38px; border-radius: 11px; display: flex;
  align-items: center; justify-content: center; font-size: 19px !important;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.55);
}
.pg-food-catering .card-title { font-family: Georgia, "Noto Serif Devanagari", serif !important; }
.pg-food-catering .view-btn { border-radius: 999px !important; }