/*
 * kv_food_module.css — FoodVerse "Swiggy-feel" listing + landing polish.
 * Scoped entirely to food pages (restaurants.php / cpages/food/*). Reuses the
 * existing Koovira brand system (--brand-primary / --accent-color / --module-food
 * from assets/css/keen_polish.css) instead of introducing new brand colours.
 * NO CDN — every rule here is local.
 */

/* ---------- 1. Cuisine circle row ("What's on your mind?") ---------- */
.kv-food-cuisine-wrap {
  position: relative;
  margin-bottom: 2rem;
}
.kv-food-cuisine-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary, #0F172A);
  margin-bottom: 1rem;
}
.kv-food-cuisine-row {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: .25rem .25rem 1rem;
  scrollbar-width: none;
}
.kv-food-cuisine-row::-webkit-scrollbar { display: none; }
.kv-food-cuisine-item {
  flex: 0 0 96px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.kv-food-cuisine-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  margin: 0 auto .6rem;
  border: 3px solid #fff;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kv-food-cuisine-item:hover .kv-food-cuisine-circle {
  transform: translateY(-4px) scale(1.04);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .18);
}
.kv-food-cuisine-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-primary, #0F172A);
}
.kv-food-scroll-btn {
  position: absolute;
  top: 40%;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  box-shadow: 0 3px 10px rgba(15,23,42,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color, var(--brand-primary));
  z-index: 3;
}
.kv-food-scroll-btn.left { left: -6px; }
.kv-food-scroll-btn.right { right: -6px; }

/* ---------- 2. "Top restaurant chains" horizontal carousel ---------- */
.kv-food-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: .5rem;
}
.kv-food-section-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-primary, #0F172A);
  margin: 0;
}
.kv-food-section-sub {
  font-size: .85rem;
  color: var(--text-secondary, #64748B);
}
.kv-food-chain-row {
  display: flex;
  gap: 1.1rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding-bottom: 1rem;
  scrollbar-width: none;
}
.kv-food-chain-row::-webkit-scrollbar { display: none; }
.kv-food-chain-card {
  flex: 0 0 240px;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  border: 1px solid rgba(15,23,42,.06);
  transition: box-shadow .18s ease, transform .18s ease;
}
.kv-food-chain-card:hover {
  box-shadow: 0 10px 22px rgba(15,23,42,.14);
  transform: translateY(-3px);
  color: inherit;
}
.kv-food-chain-media {
  height: 130px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.kv-food-chain-ribbon {
  position: absolute;
  left: 0; top: 10px;
  background: var(--accent-color, var(--module-food, #DC2626));
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  padding: .2rem .6rem;
  border-radius: 0 6px 6px 0;
  letter-spacing: .02em;
}
.kv-food-chain-body { padding: .75rem .9rem .9rem; }
.kv-food-chain-name {
  font-weight: 800;
  font-size: .98rem;
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kv-food-chain-meta {
  font-size: .8rem;
  color: var(--text-secondary, #64748B);
  display: flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: wrap;
}
.kv-food-chain-meta .kv-rating {
  color: #fff;
  background: #1D9A4B;
  border-radius: 4px;
  padding: .05rem .35rem;
  font-weight: 700;
  font-size: .76rem;
}
.kv-food-chain-cuisines {
  font-size: .78rem;
  color: var(--text-secondary, #64748B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 3. 4-up delivery grid + sort bar ---------- */
.kv-food-grid-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .6rem;
  margin: 2rem 0 1.1rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(15,23,42,.08);
}
.kv-food-grid-count { font-size: .88rem; color: var(--text-secondary, #64748B); }

/* ---------- 4. SEO chip grids ---------- */
.kv-food-chipblock { margin: 2.25rem 0; }
.kv-food-chipblock h4 {
  font-size: 1.05rem;
  font-weight: 800;
  margin-bottom: .9rem;
  color: var(--text-primary, #0F172A);
}
.kv-food-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
}
.kv-food-chip {
  display: inline-block;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: var(--bg-soft, #EEF0FF);
  color: var(--text-primary, #0F172A);
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid rgba(15,23,42,.05);
  transition: background .15s ease, color .15s ease;
}
.kv-food-chip:hover {
  background: var(--accent-color, var(--brand-primary));
  color: #fff;
}

@media (max-width: 576px) {
  .kv-food-cuisine-item { flex-basis: 78px; }
  .kv-food-cuisine-circle { width: 68px; height: 68px; }
  .kv-food-chain-card { flex-basis: 200px; }
}

/* ---------- 5. Restaurant detail hero (restaurant_menu.php) ----------
   The detail page previously opened with a bare text heading and six utility
   buttons, pushing the menu below three cards. This gives it the same visual
   language as the listing cards in section 2. */
.kv-food-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 1.25rem;
    background: var(--bs-card-bg, #fff);
    border: 1px solid var(--bs-border-color, #e5e7eb);
}
.kv-food-hero-media {
    position: relative;
    height: 180px;
    background: #e9ecef;
}
/* A real <img> rather than a dynamic background-image, so the page needs no inline CSS. */
.kv-food-hero-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.kv-food-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.62) 100%);
}
.kv-food-hero-media-inner {
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .75rem;
    z-index: 2;
}
.kv-food-hero-name {
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.2;
    margin: 0 0 .15rem;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.kv-food-hero-sub {
    color: rgba(255,255,255,.92);
    font-size: .875rem;
    margin: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.kv-food-hero-body { padding: .85rem 1rem; }
.kv-food-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .9rem;
    font-size: .875rem;
    color: var(--text-secondary, #64748B);
}
.kv-food-hero-meta .kv-food-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
.kv-food-rating-pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: #1BA672;
    color: #fff;
    font-weight: 700;
    font-size: .8rem;
    padding: .15rem .45rem;
    border-radius: 5px;
}
.kv-food-rating-pill.is-new {
    background: var(--bs-secondary-bg, #eef0f3);
    color: var(--text-secondary, #64748B);
}
.kv-food-hero-status {
    font-weight: 600;
    font-size: .8rem;
    padding: .15rem .5rem;
    border-radius: 5px;
}
.kv-food-hero-status.is-open   { background: #e6f6ef; color: #12805c; }
.kv-food-hero-status.is-closed { background: #fdeaea; color: #b42318; }

/* Compact food-safety strip. Kept in the hero on purpose: a safety warning
   must stay above the fold even though the menu now comes first. */
.kv-food-safety-strip {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    line-height: 1.35;
    padding: .5rem .7rem;
    border-radius: 8px;
    margin-top: .7rem;
}
.kv-food-safety-strip.is-warn { background: #fff8e6; color: #7a5b00; border: 1px solid #ffe08a; }
.kv-food-safety-strip.is-ok   { background: #e9f7f1; color: #12805c; border: 1px solid #b8e6d3; }

/* Secondary actions collapse into a kebab menu so they stop competing with Cart. */
.kv-food-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    margin-top: .8rem;
}

@media (max-width: 575.98px) {
    .kv-food-hero-media { height: 148px; }
    .kv-food-hero-name  { font-size: 1.25rem; }
    .kv-food-hero-actions .btn { flex: 1 1 auto; }
}

/* ---------- 6. Utilities replacing inline style= on the menu page ----------
   NOTE: .kv-hidden IS !important, because two of these rows also carry Bootstrap
   .d-flex (display:flex !important) which would otherwise always win and leave them
   permanently visible. The JS toggles the class, never el.style.display. */
.kv-hidden { display: none !important; }

.kv-food-thumb      { width: 96px; }
.kv-food-thumb-box  { width: 96px; height: 72px; overflow: hidden; border-radius: 8px; }
.kv-food-thumb-img  { width: 100%; height: 100%; object-fit: cover; }
.kv-food-thumb-empty{ width: 100%; height: 100%; font-size: .7rem; }
.kv-food-qty        { min-width: 28px; text-align: center; }