/* Search / category browse (Views/Home/CategoryBrowse.cshtml): ZINGARA X styling.
   - All sizes: bug fix (filter backdrop ignored `hidden`) + search box.
   - Phones (< 768px): dark ZINGARA X design like the mobile home page.
   - Laptop (>= 768px): existing light layout with the brand's black / gold accents instead of red. */

/* The backdrop also has .mobile-only (display:block), which beat the `hidden` attribute and left a grey
   overlay over the page on phones. */
.cb-side-backdrop[hidden] { display: none !important; }

/* ---------- Search box (all sizes) ---------- */
.cb-search {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px; padding: 6px 6px 6px 14px;
  border: 1.5px solid #e2d3a0; border-radius: 999px; background: #fff;
}
.cb-search > .bi-search { color: #8a6d1d; font-size: 15px; }
.cb-search input[type=search] {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 15px; color: #111; padding: 6px 0;
}
.cb-search input[type=search]::-webkit-search-cancel-button { display: none; }
.cb-search:focus-within { border-color: #d4a514; box-shadow: 0 0 0 3px rgba(212, 165, 20, .18); }
.cb-search-clear {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  color: #666; text-decoration: none;
}
.cb-search-clear:hover { background: #f3f3f3; color: #111; }
.cb-search-go {
  border: 0; border-radius: 999px; padding: 8px 18px;
  background: #111; color: #f5c518; font-weight: 800; font-size: 13px; cursor: pointer;
}
.cb-search-go:hover { background: #000; }
.cb-result-count { margin: -10px 0 16px; color: #666; font-size: 14px; }

/* ---------- Laptop / desktop: black & gold accents ---------- */
@media (min-width: 768px) {
  .cb-page { background: #faf8f2; }
  .cb-top-pill { border-color: #111; color: #111; background: #fff; }
  .cb-top-pill:hover { border-color: #d4a514; color: #8a6d1d; }
  .cb-top-pill.active { background: #111; border-color: #111; color: #f5c518; }
  .cb-pill { border-radius: 999px; }
  .cb-pill:hover { border-color: #d4a514; }
  .cb-pill.active { border-color: #111; background: #111; color: #f5c518; }
  .cb-clear { color: #8a6d1d; }
  .cb-venues-btn { border-color: #111; color: #111; border-radius: 999px; }
  .cb-venues-btn:hover { background: #111; color: #f5c518; }
  .cb-promoted { background: #111; color: #f5c518; }
  .cb-card-media { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transition: transform .2s ease, box-shadow .2s ease; }
  .cb-card:hover .cb-card-media { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0, 0, 0, .18); }
  .cb-card-title { color: #111; }
  .cb-card-off { color: #8a6d1d; }
  .cb-search { max-width: 720px; }
}

/* ---------- Phones: ZINGARA X events list (.zxq, same cards as the mobile home) ---------- */
@media (max-width: 767.98px) {
  .zxq-chips {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 6px 12px 12px; -webkit-overflow-scrolling: touch;
  }
  .zxq-chips::-webkit-scrollbar { display: none; }
  .zxq-chip {
    flex: 0 0 auto; padding: 9px 16px; border-radius: 999px;
    background: #1f1f1f; color: #fff; text-decoration: none;
    font-size: .88rem; font-weight: 600; white-space: nowrap;
  }
  .zxq-chip.is-active { background: #f5c518; color: #111; font-weight: 800; }
  .zxq-chip:focus-visible { outline: 2px solid #f5c518; outline-offset: 2px; }
  .zxq-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
  .zxq-clear { color: #8a6d1d; font-size: .85rem; font-weight: 700; text-decoration: none; }
  .zxq-search-btn { color: #f5c518 !important; }
}

/* ---------- Phones: dark styling for the classic browse layout (.cb-*), used only when that layout is
   shown on a phone; the Search page itself shows the .zxq list above on phones. ---------- */
@media (max-width: 767.98px) {
  .cb-page {
    background: #000; color: #fff;
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  }
  .app-shell:has(.cb-page), .app-shell:has(.cb-page) .app-main { background: #000; }

  /* Header bar */
  .cb-mobile-bar { background: #000; border-bottom: 1px solid #222; box-shadow: 0 6px 14px rgba(0, 0, 0, .45); }
  .cb-back { background: transparent; color: #fff; font-size: 1.15rem; }
  .cb-mobile-title { color: #fff; font-size: 1.05rem; }
  .cb-mobile-sub { color: #a3a3a3; }
  .cb-filter-toggle { background: #121212; border-color: #333; color: #fff; border-radius: 999px; }
  .cb-filter-toggle i { color: #f5c518; }

  /* Search box */
  .cb-search { background: #121212; border-color: #2a2a2a; }
  .cb-search > .bi-search { color: #f5c518; }
  .cb-search input[type=search] { color: #fff; font-size: 16px; } /* 16px: no iOS zoom on focus */
  .cb-search input[type=search]::placeholder { color: #777; }
  .cb-search:focus-within { border-color: #f5c518; box-shadow: none; }
  .cb-search-clear { color: #bbb; }
  .cb-search-clear:hover { background: #1f1f1f; color: #fff; }
  .cb-search-go { background: #f5c518; color: #111; }

  /* Category pills */
  .cb-top-pill { background: #121212; border-color: #333; color: #e5e5e5; }
  .cb-top-pill.active { background: #f5c518; border-color: #f5c518; color: #111; }

  /* Result cards (dark, gold price) */
  .cb-main { padding-top: 12px; }
  .cb-grid { gap: 14px 12px; }
  .cb-card-media { background: linear-gradient(135deg, #3a2a0a 0%, #b8860b 100%); border-radius: 14px; }
  .cb-promoted { background: #e11d48; color: #fff; border-radius: 999px; top: 8px; right: 8px; }
  .cb-date-bar { background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 100%); padding-top: 18px; }
  .cb-card-title { color: #fff; }
  .cb-card-desc, .cb-card-venue, .cb-card-cat { color: #a3a3a3; }
  .cb-card-price { color: #f5c518; }
  .cb-card-off { color: #4ade80; }
  .cb-empty { color: #a3a3a3; }

  /* Filters sheet */
  .cb-side.is-open { background: #0b0b0b; color: #fff; box-shadow: 8px 0 24px rgba(0, 0, 0, .6); }
  .cb-side-backdrop { background: rgba(0, 0, 0, .7); }
  .cb-side-head h2 { color: #fff; }
  .cb-side-close { background: #1f1f1f; color: #fff; }
  .cb-panel { background: #121212; border-color: #2a2a2a; }
  .cb-panel summary { color: #fff; }
  .cb-panel summary::after { color: #f5c518; }
  .cb-clear { color: #f5c518; }
  .cb-pill { background: #1a1a1a; border-color: #333; color: #e5e5e5; border-radius: 999px; }
  .cb-pill.active { background: #f5c518; border-color: #f5c518; color: #111; }
  .cb-venues-btn { background: transparent; border-color: #f5c518; color: #f5c518; border-radius: 999px; }

  /* Upcoming & offers */
  .cat-advert-head h3 { color: #fff; font-family: inherit; font-weight: 800; }
  .cat-advert-head span { color: #a3a3a3; }
  .cat-advert-card { background: #121212; border-color: #2a2a2a; color: #fff; }
  .cat-advert-body span { color: #f5c518; }
  .promo-band-card { border: 1.5px dashed #f5c518; box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .55); }
  .promo-band-card b { color: #f5c518; }
}

/* ---------- Inside the Flutter app: white & black theme ---------- */
@media (max-width: 767.98px) {
  html.zx-in-app .zxq-chip { background: #f2f2f4; color: #111; }
  html.zx-in-app .zxq-chip.is-active { background: #F5C518; color: #111; }
  html.zx-in-app .zxq-search-btn { color: #111 !important; }
}

/* ---------- App: category page like a ticketing app (filters bar + two-column poster cards) ----------
   Markup: Views/Home/CategoryBrowse.cshtml (.zxq-filterbar, .zxq-sheet, .zxq-info). Script: js/zx-category-tools.js.
   Backup of the previous files: /backup/2026-10-07-before-category-grid */
@media (max-width: 767.98px) {
  /* One search: the app bar's search box (hide the row's icon) */
  html.zx-in-app .zxq .zxq-search-btn { display: none !important; }

  /* Filters · Sort By · Browse By Venues */
  html.zx-in-app .zxq-filterbar {
    display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none;
    padding: 2px 12px 12px; -webkit-overflow-scrolling: touch;
  }
  html.zx-in-app .zxq-filterbar::-webkit-scrollbar { display: none; }
  .zxq-fbtn {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid #d9d9d9; border-radius: 999px;
    background: #fff; color: #111; font: inherit; font-size: .8rem; font-weight: 700;
    text-decoration: none; white-space: nowrap; cursor: pointer;
  }
  .zxq-fbtn i { font-size: .9rem; }
  .zxq-fcount {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: #F5C518; color: #111; font-size: .65rem; font-weight: 800; line-height: 18px; text-align: center;
  }

  /* Bottom sheets (Filters / Sort By) */
  .zxq-sheet { position: fixed; inset: 0; z-index: 1320; }
  .zxq-sheet[hidden] { display: none; }
  .zxq-sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); opacity: 0; transition: opacity .2s ease; }
  .zxq-sheet-panel {
    position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow: auto;
    padding: 6px 16px 20px; border-radius: 18px 18px 0 0; background: #fff; color: #111;
    transform: translateY(100%); transition: transform .22s ease;
  }
  .zxq-sheet.is-open .zxq-sheet-backdrop { opacity: 1; }
  .zxq-sheet.is-open .zxq-sheet-panel { transform: none; }
  .zxq-sheet-head {
    position: sticky; top: -6px; z-index: 1; display: flex; align-items: center; justify-content: space-between;
    padding: 12px 0 10px; background: #fff; border-bottom: 1px solid #eee; font-size: 1rem;
  }
  .zxq-sheet-head button { width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f2f2f4; color: #111; }
  .zxq-sheet .cb-panel { border: 0; border-bottom: 1px solid #f0f0f0; padding: 10px 0; margin: 0; background: transparent; }
  .zxq-sheet .cb-panel > summary {
    display: flex; align-items: center; justify-content: space-between; list-style: none;
    font-weight: 800; font-size: .9rem; color: #111; cursor: pointer;
  }
  .zxq-sheet .cb-panel > summary::-webkit-details-marker { display: none; }
  .zxq-sheet .cb-panel-body { padding-top: 10px; }
  .zxq-sheet .cb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
  .zxq-sheet .cb-pill {
    padding: 7px 13px; border: 1px solid #e3e3e3; border-radius: 999px;
    background: #f7f7f8; color: #333; font-size: .8rem; font-weight: 600; text-decoration: none;
  }
  .zxq-sheet .cb-pill.active { background: #F5C518; border-color: #F5C518; color: #111; font-weight: 800; }
  .zxq-sheet .cb-clear { font-size: .74rem; font-weight: 700; color: #8a6d1d; text-decoration: none; }
  .zxq-sheet .cb-venues-btn {
    display: flex; justify-content: center; margin-top: 14px; padding: 11px; border: 1px solid #111;
    border-radius: 12px; color: #111; font-weight: 700; text-decoration: none;
  }
  .zxq-sheet-clear {
    display: block; margin-top: 14px; padding: 12px; border-radius: 12px; text-align: center;
    background: #F5C518; color: #111; font-weight: 800; text-decoration: none;
  }
  .zxq-sort-list { display: flex; flex-direction: column; padding-top: 6px; }
  .zxq-sort-list button {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 2px; border: 0; border-bottom: 1px solid #f0f0f0; background: transparent;
    color: #111; font: inherit; font-size: .9rem; text-align: left;
  }
  .zxq-sort-list button.is-active { font-weight: 800; }
  .zxq-sort-list button.is-active::after { content: "\2713"; color: #111; font-weight: 800; }

  /* Two-column poster cards */
  html.zx-in-app .zxq .zxl-panel {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px;
    margin: 0 12px; padding: 0 0 16px; background: transparent; border: 0; box-shadow: none;
  }
  html.zx-in-app .zxq .zxl-panel > .zxl-city,
  html.zx-in-app .zxq .zxl-panel > .zxl-empty { grid-column: 1 / -1; }
  html.zx-in-app .zxq .zxl-card { margin: 0; }
  html.zx-in-app .zxq .zxl-media { padding-bottom: 125%; border-radius: 12px 12px 0 0; }
  html.zx-in-app .zxq .zxl-shade,
  html.zx-in-app .zxq .zxl-date,
  html.zx-in-app .zxq .zxl-copy,
  html.zx-in-app .zxq .zxl-meta { display: none; }
  html.zx-in-app .zxq .zxl-live {
    top: 0; right: 0; left: auto; padding: 3px 7px; border-radius: 0 0 0 8px; font-size: .56rem;
  }
  html.zx-in-app .zxq .zxl-fav { right: 6px; bottom: 6px; width: 28px; height: 28px; font-size: .8rem; }
  html.zx-in-app .zxq-when {
    padding: 5px 8px; border-radius: 0 0 10px 10px;
    background: #f0f0f2; color: #333; font-size: .72rem; font-weight: 600;
  }
  html.zx-in-app .zxq-name {
    margin: 7px 2px 2px; font-size: .86rem; font-weight: 800; line-height: 1.25; color: #111;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  html.zx-in-app .zxq-line {
    margin: 1px 2px 0; font-size: .72rem; color: #666;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}