/* ============================================================
   SkyCity — Promo Tools (promo.css)
   Loaded globally via _Layout.cshtml, AFTER forms.css.

   Per-page pop-up dialog (.sc-promo-popup) + countdown bar
   (.sc-countdown). Pop-up reuses the generic <dialog> handler
   in site.js; cookie-gating + auto-open + analytics live in the
   two promo IIFEs appended to site.js.

   Static file: plain @media only (never @@media).
   ============================================================ */

/* ── Pop-up dialog ───────────────────────────────────────── */
.sc-promo-popup {
	border: 0;
	padding: 0;
	background: transparent;
	max-width: min(90vw, 760px);
	width: 100%;
	overflow: visible;
}
.sc-promo-popup::backdrop { background: rgba(0,0,0,.72); }

.sc-promo-popup__media {
	display: block;
	border-radius: var(--sc-radius-card);
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0,0,0,.45);
	line-height: 0;
}
a.sc-promo-popup__media { cursor: pointer; }

.sc-promo-popup__media img,
.sc-promo-popup__media video {
	display: block;
	width: 100%;
	height: auto;
}

.sc-promo-popup__close {
	position: absolute;
	top: -18px;
	right: -18px;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: var(--sc-gold);
	color: var(--sc-text);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,0,0,.35);
	transition: background .2s ease;
	z-index: 1;
}
.sc-promo-popup__close:hover { background: #b58b2f; }
.sc-promo-popup__close .material-symbols-outlined { font-size: 24px; }

/* ── Breadcrumb offset ────────────────────────────────
   MOVED to site.css 2026-09-01, beside the body padding-top rules that
   consume it. The rule that stood here excluded .sc-hotel-brand, which
   left The Grand and Poker (neither brand sheet sets the variable)
   reserving nothing and hiding 49.19px of hero behind the nav band.
   Do not reintroduce a copy here — site.css owns this variable. */

/* ── Countdown bar ───────────────────────────────────────── */
.sc-countdown {
	background: var(--sc-plum);
	color: var(--sc-white);
	/* Establish a stacking context above brand decorations (e.g. the fixed
	   hotel arc at z-index:99) and any hero that bleeds up over it (casino,
	   restaurant). Kept below the nav (1000) so it still tucks away on scroll. */
	position: relative;
	z-index: 990;
}
.sc-countdown__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 8px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	flex-wrap: wrap;
	font-size: .9375rem;
}
.sc-countdown__label {
	font-weight: 600;
	letter-spacing: .02em;
}
.sc-countdown__time {
	font-weight: 700;
	color: var(--sc-gold);
	font-variant-numeric: tabular-nums;
}
.sc-countdown__expired {
	font-weight: 600;
	color: var(--sc-gold);
}

/* ── Countdown bar — hotel pin ───────────────────────────────
   On hotel pages and hotel sub-pages the countdown bar must not scroll away
   behind the fixed nav (the brand layout/arc made the half-scrolled tuck look
   broken). Pin it to the bottom of the nav stack with sticky so it stays put
   while the page scrolls under it. Sticky keeps it in flow, so no spacer or
   padding compensation is needed; `top` mirrors the body padding-top so it
   locks flush beneath the (transparent) breadcrumb row. Scoped via
   body.sc-brand--hotels (set in _Layout from brandSheetDir) so it covers all
   current + future hotels and their room pages, but not branded venues.
   html/body don't clip overflow, so sticky is safe here. Drop the scope to
   apply site-wide. */
body.sc-brand--hotels .sc-countdown {
	position: sticky;
	top: calc(var(--sc-nav-height) + var(--sc-search-height) + var(--sc-breadcrumb-height) + var(--sc-r20-height));
}

@media (max-width: 600px) {
	.sc-promo-popup { max-width: 94vw; }
	.sc-promo-popup__close { width: 38px; height: 38px; top: -14px; right: -14px; }
	.sc-promo-popup__close .material-symbols-outlined { font-size: 20px; }
	.sc-countdown__inner { padding: 7px 16px; font-size: .875rem; }
}

/* ============================================================
   VENUE NOTICE BAR (.sc-venue-notice) — added 2026-07-16

   Rendered by _VenueNotice.cshtml from _Layout, immediately
   above _PromoTools and below the breadcrumb. Operational
   notices only: "closed this evening for a private function",
   "kitchen closed, bar open", "closed for maintenance".

   Lives here rather than in its own stylesheet because it is
   structurally a sibling of the countdown bar (same in-flow
   slot, same stacking problem, same breadcrumb offset fix
   above) and promo.css already loads globally — a new sheet
   would mean another _Layout <link>. NOTE the naming mismatch:
   a venue notice is not a promo.

   Deliberately NOT sticky, unlike the hotel countdown pin: a
   closure notice is read once at load, and two sticky bars at
   the same `top` would overlap.

   Distinct from the RED Site Alert (_SiteAlert, inside the
   fixed header) by surface AND position — plum in page flow vs
   red in the header. Do not restyle toward red; the two must
   stay visually separable when both fire at once.

   Static file: plain @media only (never @@media).
   ============================================================ */
.sc-venue-notice {
	background: var(--sc-plum);
	color: var(--sc-white);
	/* Gold hairline gives a deliberate seam against the breadcrumb
	   above, so the bar doesn't read as a second alert. */
	border-top: 2px solid var(--sc-gold);
	/* Match .sc-countdown: above brand decorations (the fixed hotel
	   arc sits at z-index 99) and heroes that bleed up over it, but
	   below the nav (1000) so it still scrolls away. */
	position: relative;
	z-index: 990;
}
.sc-venue-notice__inner {
	max-width: var(--sc-max-width);
	margin: 0 auto;
	padding: 10px 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .625rem;
}
.sc-venue-notice__icon {
	font-size: 20px;
	/* Gold on plum is legible; gold is confined to the icon + top
	   border, message text stays white per the master-brand rule. */
	color: var(--sc-gold);
	flex-shrink: 0;
}
.sc-venue-notice__text {
	margin: 0;
	font-size: .9375rem;
	font-weight: 500;
	letter-spacing: .01em;
}

@media (max-width: 600px) {
	/* Long notices wrap on mobile — centring an icon against a
	   ragged multi-line block looks broken, so left-align and pin
	   the icon to the first line. */
	.sc-venue-notice__inner {
		padding: 9px 16px;
		justify-content: flex-start;
		align-items: flex-start;
		gap: .5rem;
	}
	.sc-venue-notice__icon { font-size: 18px; }
	.sc-venue-notice__text { font-size: .875rem; }
}