/* cmg-arena-suggest.css - every selector is .cmg-as-* (no global leakage).
   Tokens come from checkout.css / quick-request-widget.css: field #111c33-ish navy, 8px field radius,
   16px Arial, gold #C9A768, focus blue #3b82f6, slate text/borders. Panel is one shade lighter than the field. */
:root { --cmg-z-popover: 100500; } /* above .checkout-cta-bar (20), #cmg-qr-root (9999) and profile's .cmg-redemption-modal (99999); below its sending/notice overlays */

.cmg-as-panel {
  position: fixed; display: none; box-sizing: border-box; margin: 0; padding: 4px 0;
  z-index: var(--cmg-z-popover, 100500);
  overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; -webkit-overflow-scrolling: touch;
  background: #182642; color: #f8fafc; font-family: Arial, sans-serif;
  border: 1px solid rgba(148, 163, 184, .22); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .45), 0 1px 4px rgba(2, 6, 23, .3);
}
.cmg-as-panel.cmg-as-open { display: block; animation: cmgAsFade .12s ease-out; }
@keyframes cmgAsFade { from { opacity: 0; } to { opacity: 1; } }

.cmg-as-row {
  box-sizing: border-box; min-height: 50px; padding: 8px 14px;
  display: flex; flex-direction: column; justify-content: center;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.cmg-as-rink .cmg-as-row { min-height: 44px; }
.cmg-as-row + .cmg-as-row { border-top: 1px solid rgba(148, 163, 184, .10); }
.cmg-as-row:hover { background: rgba(148, 163, 184, .10); }
.cmg-as-row.cmg-as-hi { background: rgba(201, 167, 104, .14); box-shadow: inset 3px 0 0 #C9A768; }

.cmg-as-n { font-size: 14px; line-height: 18px; font-weight: 500; color: #aab7cb; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Arena names may wrap onto a second line (clamped at two) so most show in full instead of "..." */
.cmg-as-arena .cmg-as-n { white-space: normal; overflow-wrap: break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.cmg-as-hl { color: #fff; font-weight: 600; }
.cmg-as-s { margin-top: 2px; font-size: 12px; line-height: 16px; color: #8493ad; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The rink chevron is painted as the input's own background by cmg-arena-suggest.js (so it scrolls with the
   field); the only CSS needed is the room for it. !important so the padding beats ID-selector input rules such
   as "#cmg-qr-root .cmg-qr-row--compact .cmg-qr-input". */
.cmg-as-pr { padding-right: 44px !important; }

/* Venue confirmation strip (display only): logo plate + name + city + a quiet gold check. Same hairline border
   and 8px radius as the fields, full width of the column it sits in. */
.cmg-as-venue {
  display: none; box-sizing: border-box; width: 100%; margin: 0 0 12px; min-height: 52px; padding: 6px 12px 6px 6px;
  align-items: center; gap: 12px; font-family: Arial, sans-serif; color: #f8fafc;
  background: rgba(17, 28, 51, .55); border: 1px solid rgba(148, 163, 184, .22); border-radius: 8px;
}
.cmg-field-row > .cmg-as-venue { margin: 0; } /* inside a stacked (1-column) grid the row gap already spaces it */
.cmg-as-venue.cmg-as-on { display: flex; animation: cmgAsIn .18s ease-out; }
@keyframes cmgAsIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
.cmg-as-plate {
  display: none; flex: none; box-sizing: border-box; width: 64px; height: 40px; align-items: center; justify-content: center;
  border-radius: 6px; border: 1px solid rgba(148, 163, 184, .28);
  background: linear-gradient(180deg, #1f3156, #14223f); /* CMG dark blue: white / coloured logos pop; very dark logos need tone 'd' */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.cmg-as-plate.cmg-as-wait { display: flex; }
.cmg-as-plate img { display: block; height: 30px; width: auto; max-width: 54px; object-fit: contain; opacity: 0; transition: opacity .15s ease-out; }
.cmg-as-plate.cmg-as-ready img { opacity: 1; }
/* Optional per-venue tone from the data file (v.t): 'd' = dark logo -> lighter plate ('l' = light logo keeps the default dark plate) */
.cmg-as-tone-d .cmg-as-plate { background: linear-gradient(180deg, #e8edf6, #d5ddeb); border-color: rgba(255, 255, 255, .5); }
/* No logo (none listed, disabled, or failed to load): the plate stays hidden and the name takes its place. The left
   padding was sized for the plate, so give the text normal breathing room; min-height is unchanged, so no extra height. */
.cmg-as-venue.cmg-as-nologo { padding-left: 14px; }
.cmg-as-vt { flex: 1 1 auto; min-width: 0; }
.cmg-as-vn { font-size: 14px; line-height: 18px; font-weight: 600; color: #f8fafc; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.cmg-as-vc { margin-top: 2px; font-size: 12px; line-height: 16px; color: #8fa0bf; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cmg-as-vk { flex: none; display: inline-flex; }

/* Gold "we filled this in" glow, same colors as checkout.css's .cmg-autofill. box-shadow only, so it
   still shows while the field has focus (checkout's focus ring only sets border-color). */
input.cmg-as-glow {
  box-shadow: 0 0 0 1px rgba(201, 167, 104, .18), 0 0 14px rgba(201, 167, 104, .12);
  animation: cmgAsGlow 1.4s ease-out;
}
@keyframes cmgAsGlow {
  0% { box-shadow: 0 0 0 0 rgba(201, 167, 104, .5), 0 0 0 rgba(201, 167, 104, 0); }
  100% { box-shadow: 0 0 0 1px rgba(201, 167, 104, .18), 0 0 14px rgba(201, 167, 104, .12); }
}

.cmg-as-sr { position: fixed; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .cmg-as-panel.cmg-as-open, input.cmg-as-glow, .cmg-as-venue.cmg-as-on { animation: none; }
  .cmg-as-plate img { transition: none; }
  .cmg-as-chev svg { transition: none; }
}