/* ===========================================================
 * AlfaPOS QR Menü — Mobilde yana kaydırmalı kategori barı
 * -----------------------------------------------------------
 * Temaların style.css'inden SONRA yüklenir; bu yüzden 15/30
 * temanın hepsindeki `.category-nav{flex-wrap:wrap}` kuralını
 * ezer. Yeni eklenen temalar için de otomatik geçerlidir.
 *
 * Telefonda kategori sayısı fazla olduğunda bar 6-8 satıra
 * yayılıp ekranı kaplıyordu; artık tek satır + yatay kaydırma.
 * =========================================================== */

@media (max-width: 768px) {

  .category-nav,
  .qr-nav,
  .bistro-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-items: center;

    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;   /* iOS momentum scroll */
    scroll-snap-type: x proximity;
    overscroll-behavior-x: contain;      /* yatay kaydırma sayfaya taşmasın */

    /* Kaydırma çubuğunu gizle (bar zaten dokunmatik) */
    scrollbar-width: none;
    -ms-overflow-style: none;

    /* Tema container'ının yatay padding'i ne olursa olsun barı
       ekranın iki kenarına taşır: %50 = container içerik genişliği
       yarısı, 50vw = ekran yarısı → fark tam olarak -padding kadar. */
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 14px;
    padding-right: 14px;
    max-width: none;
  }

  .category-nav::-webkit-scrollbar,
  .qr-nav::-webkit-scrollbar,
  .bistro-nav::-webkit-scrollbar { height: 0; display: none; }

  /* Çipler daralmasın / kırılmasın */
  .category-nav > a,
  .qr-nav > a,
  .bistro-nav > a,
  .nav-item,
  .b-nav-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    scroll-snap-align: center;
  }

  /* Aktif kategori — tema renklerine karışmayan nötr vurgu */
  .nav-item.is-active,
  .b-nav-item.is-active { font-weight: 700; opacity: 1; }
}