/* kv_shop_modes.css — the three ways to shop (Quick Delivery · Regular Shopping ·
   Medicines & Pharma). Rendered by incfiles/_shop_modes.php on the CommerceX
   catalogue and on pharmacy.php.

   Added 2026-10-20 (founder: "we should have 1- Quick Delivery 2- Regular
   Shopping 3- Medicines & Pharma options for shopping").

   Scoped entirely under .kvsm — the catalogue is a 2,485-line page with its own
   --cx-* variables and the pharmacy page has its own styling, so nothing here may
   leak into either. No bare element selectors. */

.kvsm{
  --kvsm-ink:#15192e; --kvsm-mut:#616a85; --kvsm-line:#e9ecf4;
  --kvsm-card:#fff; --kvsm-accent:#5b5bd6; --kvsm-accent2:#7c7cf0;
  background:#fff; border-bottom:1px solid var(--kvsm-line);
  padding:14px 0;
}
/* Same correction as kv_module_simple.css — the app's <html data-bs-theme>,
   never the operating system. A dark OS used to repaint these tabs dark on a
   white catalogue page. */
html[data-bs-theme="dark"] .kvsm{
  --kvsm-ink:#eef1f8; --kvsm-mut:#98a1b8; --kvsm-line:rgba(255,255,255,.10);
  --kvsm-card:#141a2e; background:#0f1424;
}

.kvsm-row{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px;
}
/* On a phone the three modes scroll sideways rather than stacking into a tower
   that pushes the catalogue below the fold. */
@media (max-width:760px){
  .kvsm-row{
    grid-template-columns:repeat(3,minmax(190px,1fr));
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch; scrollbar-width:none;
    padding-bottom:2px;
  }
  .kvsm-row::-webkit-scrollbar{display:none}
  .kvsm-tab{scroll-snap-align:start}
}

.kvsm-tab{
  display:flex; align-items:center; gap:12px; min-height:60px;
  padding:12px 16px; border-radius:14px;
  background:var(--kvsm-card); border:1px solid var(--kvsm-line);
  text-decoration:none; color:var(--kvsm-ink);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.kvsm-tab:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--kvsm-accent) 40%,transparent);
  box-shadow:0 10px 24px -14px rgba(21,25,46,.35);
}
.kvsm-tab:focus-visible{outline:2px solid var(--kvsm-accent); outline-offset:3px}

.kvsm-ic{
  flex:0 0 auto; display:grid; place-items:center;
  width:40px; height:40px; border-radius:11px;
  background:color-mix(in srgb,var(--kvsm-accent) 10%,transparent);
  color:var(--kvsm-accent); font-size:17px;
}
.kvsm-txt{display:flex; flex-direction:column; min-width:0; gap:1px}
.kvsm-lb{font-weight:750; font-size:15px; line-height:1.25; letter-spacing:-.01em}
.kvsm-sb{
  font-size:12.5px; color:var(--kvsm-mut); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* The selected mode. A left accent bar plus a tinted ground, so it reads as
   selected without relying on colour alone (the icon tile fills too). */
.kvsm-tab.is-on{
  border-color:color-mix(in srgb,var(--kvsm-accent) 45%,transparent);
  background:color-mix(in srgb,var(--kvsm-accent) 7%,var(--kvsm-card));
  box-shadow:inset 3px 0 0 var(--kvsm-accent);
}
.kvsm-tab.is-on .kvsm-ic{
  background:linear-gradient(135deg,var(--kvsm-accent2),var(--kvsm-accent));
  color:#fff;
}
.kvsm-tab.is-on .kvsm-lb{color:var(--kvsm-accent)}
html[data-bs-theme="dark"] .kvsm .kvsm-tab.is-on .kvsm-lb{color:#a5b4fc}

/* Quick Delivery with nothing to show: say why. */
.kvsm-empty{
  max-width:520px; margin:48px auto; padding:36px 28px; text-align:center;
  background:var(--kvsm-card,#fff); border:1px solid var(--kvsm-line,#e9ecf4);
  border-radius:20px;
}
.kvsm-empty-ic{
  display:grid; place-items:center; width:54px; height:54px; margin:0 auto 16px;
  border-radius:16px; font-size:22px; color:#fff;
  background:linear-gradient(135deg,#7c7cf0,#5b5bd6);
}
.kvsm-empty h3{margin:0 0 8px; font-size:19px; font-weight:800; color:#15192e}
.kvsm-empty p{margin:0 0 20px; font-size:14.5px; line-height:1.6; color:#616a85}
.kvsm-empty-cta{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 22px; border-radius:11px; text-decoration:none;
  font-weight:700; font-size:14.5px; color:#fff;
  background:linear-gradient(135deg,#7c7cf0,#5b5bd6);
}
.kvsm-empty-cta:hover{color:#fff; opacity:.92}

@media (prefers-reduced-motion:reduce){
  .kvsm-tab{transition:none}
  .kvsm-tab:hover{transform:none}
}