/* ZINGARA X — mobile "Book Tickets" (Book/Slots) layout.
   Mobile only: every rule lives inside the < 768px media query, so the desktop Slots page is untouched.
   Restyles the existing booking DOM (ids/classes used by the page script are unchanged) plus the
   mobile-only .ssm blocks rendered by Slots.cshtml. */

.ssm { display: none; }

@media (max-width: 767.98px) {
  .ss-page {
    --ssm-bg: #000;
    --ssm-card: #121212;
    --ssm-card-2: #1a1a1a;
    --ssm-line: #2a2a2a;
    --ssm-text: #fff;
    --ssm-muted: #a3a3a3;
    --ssm-gold: #f5c518;
    --ssm-gold-ink: #111;
    --ssm-sale: #e11d48;
    --ssm-head-h: 52px;
    background: var(--ssm-bg);
    color: var(--ssm-text);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    padding: calc(var(--ssm-head-h) + var(--zx-sat)) 0 calc(96px + var(--zx-sab));
    min-height: 100vh;
    -webkit-text-size-adjust: 100%;
  }
  .app-shell:has(.ss-page) { background: #000; }
  .ss-page .ssm { display: block; }

  /* ---------- Header (fixed: body overflow-x:hidden breaks sticky) ---------- */
  .ss-page .ss-sticky { position: static; background: transparent; box-shadow: none; }
  .ss-page .ss-head {
    position: fixed; top: 0; left: 50%; z-index: 150;
    width: 100%; max-width: 520px; box-sizing: border-box;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
    background: #000; border-bottom: 1px solid var(--ssm-line);
    padding-top: var(--zx-sat);
  }
  .ss-page .ss-head-inner {
    height: var(--ssm-head-h); padding: 0 10px; align-items: center; gap: 8px;
  }
  .ss-page .ss-back { color: #fff; margin: 0; font-size: 1.2rem; }
  .ss-page .ss-back:hover, .ss-page .ss-back:active { background: #1c1c1c; }
  .ss-page .ss-head-text { text-align: center; }
  .ss-page .ss-title, .ss-page .ss-tags { display: none; }
  .ss-page .ssm-head-title { font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; }
  .ss-page .ss-head-actions { align-self: center; padding: 0; }
  .ss-page a.ss-cart-nav { background: transparent; border-color: var(--ssm-line); color: #fff; }

  /* ---------- Event summary ---------- */
  .ss-page .ssm-summary {
    display: flex; gap: 12px; padding: 14px 14px 16px;
    border-bottom: 1px solid var(--ssm-line);
  }
  .ssm-summary-img {
    flex: 0 0 104px; height: 80px; border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, #3a2a0a 0%, #b8860b 100%);
  }
  .ssm-summary-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .ssm-summary-body { min-width: 0; flex: 1; }
  .ssm-summary-title { display: block; font-size: 1.05rem; font-weight: 800; line-height: 1.25; }
  .ssm-summary-tag {
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
    margin-top: 2px; font-size: .8rem; color: #d4d4d4;
  }
  .ssm-summary-meta { display: flex; gap: 14px; margin-top: 8px; }
  .ssm-meta-item { display: flex; gap: 7px; align-items: flex-start; min-width: 0; flex: 1 1 0; }
  .ssm-meta-item > i { font-size: 1.05rem; line-height: 1.2; color: #fff; }
  .ssm-meta-item div { min-width: 0; }
  .ssm-meta-item b {
    display: block; font-size: .82rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ssm-meta-item span {
    display: block; font-size: .72rem; color: var(--ssm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* ---------- Step headings ---------- */
  .ss-page .ssm-step {
    display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 16px 14px 10px;
    font-size: 1rem; font-weight: 800; color: #fff; font-family: inherit;
  }
  .ssm-step span {
    flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--ssm-gold); color: var(--ssm-gold-ink); font-size: .85rem; font-weight: 800;
  }

  /* ---------- Step 1: dates + filters ---------- */
  .ss-page .ss-datebar { background: transparent; border: 0; }
  .ss-page .ss-dates { padding: 0 14px 4px; gap: 8px; border: 0; }
  .ss-page .ss-date {
    flex: 0 0 66px; padding: 9px 4px;
    background: var(--ssm-card-2); border: 1px solid var(--ssm-line); border-radius: 10px;
    color: #e5e5e5; font-family: inherit;
  }
  /* Server renders "SUN" / "OCT"; show "Sun" / "Oct" like the design */
  .ss-page .ss-date .ss-dow { font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: lowercase; }
  .ss-page .ss-date .ss-dnum,
  .ss-page .ss-date .ss-mon { display: inline-block; font-size: .8rem; font-weight: 600; color: inherit; margin: 0; }
  .ss-page .ss-date .ss-mon { text-transform: lowercase; margin-left: 3px; }
  .ss-page .ss-date .ss-dow::first-letter,
  .ss-page .ss-date .ss-mon::first-letter { text-transform: uppercase; }
  .ss-page .ss-date.active {
    background: var(--ssm-gold); border-color: var(--ssm-gold); color: var(--ssm-gold-ink); font-weight: 800;
  }
  .ss-page .ss-date.active .ss-dnum { color: var(--ssm-gold-ink); }
  .ss-page .ss-date.disabled, .ss-page .ss-date:disabled { opacity: .3; }

  .ss-page .ss-filters { padding: 10px 14px 0; gap: 8px; }
  .ss-page .ss-filter {
    padding: 7px 12px; border: 1px solid var(--ssm-line); border-radius: 999px;
    background: var(--ssm-card); color: #d4d4d4; font-size: .76rem; font-family: inherit;
  }
  .ss-page .ss-filter.active { color: var(--ssm-gold); border-color: rgba(245,197,24,.55); }
  .ss-page .ss-filter-menu { background: #161616; border-color: var(--ssm-line); box-shadow: 0 10px 28px rgba(0,0,0,.6); }
  .ss-page .ss-filter-menu button { color: #e5e5e5; }
  .ss-page .ss-filter-menu button:hover { background: #222; }
  .ss-page .ss-filter-menu button.on { color: var(--ssm-gold); background: rgba(245,197,24,.1); }

  .ss-page .ss-legend-row { padding: 12px 14px 0; justify-content: flex-start; }
  .ss-page .ss-legend { color: var(--ssm-muted); font-size: .66rem; gap: 12px; }
  .ss-page .ss-dot.avail { background: #22c55e; }

  /* ---------- Step 2: venue + time ---------- */
  .ss-page .ss-venues { padding: 0 14px; margin: 0; gap: 10px; }
  .ss-page .ss-venue {
    background: var(--ssm-card); border: 1px solid var(--ssm-line); border-radius: 12px;
    padding: 12px; gap: 12px; box-shadow: none;
  }
  .ss-page .ss-property-name { color: #fff !important; font-size: .95rem !important; }
  .ss-page .ss-venue-meta { color: var(--ssm-muted); font-size: .74rem; margin-top: 3px; }
  .ss-page .ss-heart { color: #8a8a8a; }
  .ss-page .ss-times { gap: 8px; }
  .ss-page .ss-time {
    min-width: 92px; padding: 9px 10px 7px; border-radius: 10px;
    background: var(--ssm-card-2); border: 1px solid #2f5f3d; color: #4ade80; font-family: inherit;
  }
  .ss-page .ss-time.filling { border-color: #7a5410; color: #fbbf24; }
  .ss-page .ss-time.sold { border-color: var(--ssm-line); color: #6b6b6b; }
  .ss-page .ss-time.active {
    background: rgba(245,197,24,.12); border-color: var(--ssm-gold); color: var(--ssm-gold);
    box-shadow: 0 0 0 1px var(--ssm-gold) inset;
  }
  .ss-page .ss-time-price { color: #fff; }
  .ss-page .ss-time-seats { color: var(--ssm-muted); }
  .ss-page .ss-time .ss-time-sub { color: var(--ssm-muted); }
  .ss-page .ss-time-gift, .ss-page .ss-time.active .ss-time-gift { color: var(--ssm-gold); }

  .ss-page .ss-empty, .ss-page .ss-empty-msg { color: var(--ssm-muted); padding: 0 14px; margin: 16px 0; }
  .ss-page .ss-empty a { color: var(--ssm-gold); }
  .ss-page .ss-error { background: rgba(225,29,72,.14); color: #fda4af; margin: 12px 14px 0; width: auto; }

  /* ---------- Step 3: tickets — inline section instead of a bottom sheet ---------- */
  .ss-page .ss-ticket-panel {
    position: static; min-height: 0; background: transparent; display: block;
    scroll-margin-top: calc(var(--ssm-head-h) + 8px);
  }
  .ss-page .ss-ticket-panel-inner {
    width: auto; background: transparent; border-radius: 0; box-shadow: none; padding: 0;
  }
  .ss-page .ss-ticket-head {
    margin: 0 14px 10px; padding: 10px 12px; border-radius: 10px;
    background: var(--ssm-card); border: 1px solid var(--ssm-line);
  }
  .ss-page .ss-ticket-head b { color: #fff; font-size: .95rem; }
  .ss-page .ss-ticket-head span { color: var(--ssm-muted); }
  .ss-page .ss-ticket-close { background: #222; color: #ddd; width: 30px; height: 30px; }
  .ss-page .ss-ticket-avail { background: rgba(34,197,94,.14); color: #4ade80 !important; }
  .ss-page .ss-ticket-avail.is-low { background: rgba(251,191,36,.14); color: #fbbf24 !important; }
  .ss-page .ss-ticket-avail.is-sold { background: #222; color: #9a9a9a !important; }
  .ss-page .ss-show-gift { background: rgba(245,197,24,.14); color: var(--ssm-gold); }

  .ss-page .ss-ticket-list { max-height: none; overflow: visible; padding: 0 14px; gap: 10px; }
  .ss-page .ss-ticket-row {
    position: relative; padding: 14px 12px 14px 44px; border-radius: 12px;
    background: var(--ssm-card); border: 1px solid var(--ssm-line);
  }
  /* radio indicator (selection is still driven by the stepper) */
  .ss-page .ss-ticket-row::before {
    content: ""; position: absolute; left: 14px; top: 50%; width: 18px; height: 18px; margin-top: -9px;
    border-radius: 50%; border: 2px solid #5a5a5a; box-sizing: border-box;
  }
  .ss-page .ss-ticket-row.active { background: rgba(245,197,24,.06); border-color: var(--ssm-gold); }
  .ss-page .ss-ticket-row.active::before { border-color: var(--ssm-gold); box-shadow: inset 0 0 0 3px #000, inset 0 0 0 9px var(--ssm-gold); }
  .ss-page .ss-ticket-row b { color: #fff; font-size: .95rem; }
  .ss-page .ss-ticket-row span { color: #d4d4d4; }
  .ss-page .ss-ticket-price { margin-top: 3px; }
  .ss-page .ss-price-old { color: #8a8a8a; font-size: .78rem; }
  .ss-page .ss-price-sale, .ss-page .ss-price-base { color: #fff; font-size: 1.05rem; font-weight: 800; }
  .ss-page .ss-ticket-price-pending { color: var(--ssm-muted); }
  .ss-page .ss-ticket-left { color: #4ade80 !important; }
  .ss-page .ss-ticket-complimentary { color: var(--ssm-gold); }

  .ss-page .ss-stepper { background: transparent; border: 0; gap: 8px; padding: 0; }
  .ss-page .ss-stepper button {
    width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
    border: 1.5px solid #8a8a8a; color: #fff; font-size: 1.1rem; line-height: 1; padding: 0;
  }
  .ss-page .ss-stepper .btn-plus { border-color: var(--ssm-gold); color: var(--ssm-gold); }
  .ss-page .ss-stepper .qty { color: #fff; min-width: 16px; }

  /* ---------- Price details ---------- */
  .ss-page .ssm-price {
    margin: 14px 14px 0; padding: 14px; border-radius: 12px;
    background: var(--ssm-card); border: 1px solid var(--ssm-line);
  }
  .ssm-price-head { display: block; font-size: .95rem; font-weight: 800; margin-bottom: 8px; }
  .ssm-price-row { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; color: #e5e5e5; padding: 4px 0; }
  .ssm-price-note { color: var(--ssm-muted); font-size: .72rem; }
  .ssm-price-total {
    margin-top: 6px; padding-top: 10px; border-top: 1px dashed #3a3a3a;
    font-size: .95rem; font-weight: 800; color: #fff;
  }
  .ssm-price-total b { font-size: 1.3rem; }

  /* ---------- Fixed checkout bar ---------- */
  .ss-page .ss-ticket-foot {
    position: fixed; left: 50%; bottom: 0; z-index: 140;
    width: 100%; max-width: 520px; box-sizing: border-box; margin: 0;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
    padding: 10px 14px calc(10px + var(--zx-sab));
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 28%);
    border: 0;
  }
  .ss-page .ss-ticket-foot .footer-price { display: none; }
  .ss-page .ss-continue {
    width: 100%; padding: 15px 16px; border-radius: 12px;
    background: var(--ssm-gold); color: var(--ssm-gold-ink);
    font-size: 1rem; font-weight: 800; font-family: inherit;
  }
  .ss-page .ss-continue:disabled { opacity: 1; background: #3a3a3a; color: #8a8a8a; }
  .ss-page .ss-continue-label { display: none; }
  .ss-page .ss-continue .ssm-continue-label { display: inline; }

  /* ---------- Login sheet over the dark page ----------
     (zx-slots.css is only loaded by Book/Slots, so these .login-modal overrides are page-scoped.
     The base sheet rules later in zing-theme.css override its own mobile bottom-sheet block,
     so the bottom-sheet layout is restated here.) */
  body.login-modal-open .ss-page .ss-head,
  body.login-modal-open .ss-page .ss-ticket-foot { z-index: 5; }
  .login-modal { z-index: 300; align-items: flex-end; padding: 0; }
  .login-modal-backdrop { background: rgba(0,0,0,.78); }
  .login-modal-panel {
    width: 100%; max-width: 520px; box-sizing: border-box;
    border-radius: 18px 18px 0 0; border: 1px solid #2a2a2a; border-bottom: 0;
    background: #111; color: #fff;
    padding: 10px 16px calc(18px + var(--zx-sab));
    max-height: min(92vh, 640px); overflow-y: auto;
    box-shadow: 0 -12px 40px rgba(0,0,0,.6);
    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    -webkit-animation: ssm-sheet-up .22s ease-out; animation: ssm-sheet-up .22s ease-out;
  }
  .login-modal-panel::before {
    content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 12px;
    border-radius: 2px; background: #3a3a3a;
  }
  .login-modal-head h2 { color: #fff; font-size: 1.1rem; font-weight: 800; }
  .login-modal-close { background: #222; color: #ddd; }
  .login-tab { background: #1a1a1a; border-color: #2a2a2a; color: #bdbdbd; }
  .login-tab.active { background: rgba(245,197,24,.12); border-color: #f5c518; color: #f5c518; }
  .login-modal-form label span { color: #a3a3a3; }
  .login-modal-form input {
    background: #1a1a1a; border-color: #333; color: #fff;
    font-size: 16px; /* >= 16px stops iOS Safari zooming on focus */
    padding: 12px;
  }
  .login-modal-form input::placeholder { color: #6b6b6b; }
  .login-modal-form input:focus { outline: none; border-color: #f5c518; box-shadow: 0 0 0 3px rgba(245,197,24,.18); }
  .login-modal-form .btn-primary {
    background: #f5c518; color: #111; border: 0; border-radius: 12px; padding: 14px; font-weight: 800; font-size: 1rem;
  }
  .login-modal-form .btn-secondary {
    background: transparent; color: #f5c518; border: 1px solid rgba(245,197,24,.55); border-radius: 12px; padding: 12px; font-weight: 700;
  }
  .login-modal-error { background: rgba(225,29,72,.14); color: #fda4af; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: no-preference) {
  @-webkit-keyframes ssm-sheet-up { from { -webkit-transform: translateY(24px); opacity: .6; } to { -webkit-transform: none; opacity: 1; } }
  @keyframes ssm-sheet-up { from { transform: translateY(24px); opacity: .6; } to { transform: none; opacity: 1; } }
}

/* ---------- Inside the Flutter app: white & black theme ---------- */
@media (max-width: 767.98px) {
  html.zx-in-app .ss-page {
    --ssm-bg: #fff;
    --ssm-card: #f7f7f8;
    --ssm-card-2: #efeff1;
    --ssm-line: #e6e6e6;
    --ssm-text: #111;
    --ssm-muted: #666;
    --ssm-gold: #111;       /* primary actions: black with gold text */
    --ssm-gold-ink: #F8D21A;
  }
  html.zx-in-app .app-shell:has(.ss-page) { background: #fff; }
  html.zx-in-app .ss-page .ss-head { background: #fff; }
  html.zx-in-app .ss-page .ss-back,
  html.zx-in-app .ss-page a.ss-cart-nav { color: #111; }
  html.zx-in-app .ss-page .ss-back:hover,
  html.zx-in-app .ss-page .ss-back:active { background: #f2f2f4; }
  html.zx-in-app .ssm-meta-item > i,
  html.zx-in-app .ss-page .ss-property-name,
  html.zx-in-app .ss-page .ss-time-price,
  html.zx-in-app .ss-page .ss-ticket-head b,
  html.zx-in-app .ss-page .ss-ticket-row b,
  html.zx-in-app .ss-page .ss-price-sale,
  html.zx-in-app .ss-page .ss-price-base,
  html.zx-in-app .ss-page .ss-stepper .qty,
  html.zx-in-app .ssm-price-total { color: #111 !important; }
  html.zx-in-app .ss-page .ss-stepper button { color: #111; border-color: #999; }
  html.zx-in-app .ssm-price-row { color: #333; }
  html.zx-in-app .ssm-price-total { border-top-color: #ccc; }
  html.zx-in-app .ss-page .ss-ticket-foot { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, #fff 28%); }
  html.zx-in-app .ss-page .ssm-step { color: #111; }
  html.zx-in-app .ssm-summary-tag { color: #666; }
  html.zx-in-app .ss-page .ss-date { color: #333; }
  html.zx-in-app .ss-page .ss-date.active { background: #F5C518; border-color: #F5C518; color: #111; }
  html.zx-in-app .ss-page .ss-date.active .ss-dnum { color: #111; }
  html.zx-in-app .ss-page .ss-stepper .btn-plus { background: #F5C518; border-color: #F5C518; color: #111; }
  html.zx-in-app .ss-page .ss-filter,
  html.zx-in-app .ss-page .ss-filter-menu button,
  html.zx-in-app .ss-page .ss-ticket-row span { color: #333; }
  html.zx-in-app .ss-page .ss-filter.active { color: #111; border-color: #111; background: #fff; }
  html.zx-in-app .ss-page .ss-filter-menu { background: #fff; box-shadow: 0 10px 28px rgba(0,0,0,.12); }
}