/* ============================================================================
   No Safe Corner - whitelabel theme (tix.nosafecorner.com)
   Copyright 2005-Present, ITS MY SEAT INC.
   Created 2026-09-24. Matches the client's own site (nosafecorner.com):
   fight-night dark ground, white type, a single gold accent, gold-foil buy
   buttons, Unbounded display + Instrument Sans body.
   Loaded LAST on the event pages (IMSSiteTemplates getSiteThemeHeadHTML hook)
   and on the site's Checkout / Reserve / ResComplete copies.
   RULES: restyle only - never change layout the page scripts depend on
   (ticket tables, seat map). The client logo is used unmodified, always on
   pure black (#000) so its own black ground disappears.
   ============================================================================ */

:root {
	--nsc-black: #000;
	--nsc-ink: #121212;
	--nsc-panel: #1a1a1a;
	--nsc-panel-2: #222;
	--nsc-line: rgba(255, 255, 255, .16);
	--nsc-line-strong: rgba(255, 255, 255, .38);
	--nsc-paper: #fff;
	--nsc-muted: #b8b8b8;
	--nsc-gold: #d7ae53;
	--nsc-gold-deep: #9d651c;
	--nsc-gold-foil: linear-gradient(115deg, #9d651c 0%, #d8a83f 15%, #fff0a0 31%, #e0b34d 47%, #bc8326 60%, #f5db7d 79%, #bc822b 100%);
	--nsc-display: 'Unbounded', 'Arial Black', sans-serif;
	--nsc-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

	/* Bootstrap 5 hooks - everything that reads these follows the theme */
	--bs-body-font-family: var(--nsc-body);
	--bs-body-bg: var(--nsc-ink);
	--bs-body-color: var(--nsc-paper);
	--bs-emphasis-color: var(--nsc-paper);
	--bs-secondary-color: var(--nsc-muted);
	--bs-tertiary-bg: var(--nsc-panel);
	--bs-secondary-bg: var(--nsc-panel-2);
	--bs-border-color: var(--nsc-line);
	--bs-link-color: var(--nsc-gold);
	--bs-link-color-rgb: 215, 174, 83;
	--bs-link-hover-color: #f5db7d;
	--bs-link-hover-color-rgb: 245, 219, 125;
	--bs-heading-color: var(--nsc-paper);
	--bs-primary: var(--nsc-gold);
	--bs-primary-rgb: 215, 174, 83;
}

/* ============ Base ============ */
html { background: var(--nsc-ink); }
body {
	background: var(--nsc-ink);
	color: var(--nsc-paper);
	font-family: var(--nsc-body);
	-webkit-font-smoothing: antialiased;
}
h1, h2, .nsc-display {
	font-family: var(--nsc-display);
	font-weight: 800;
	letter-spacing: -.03em;
}
h3, h4, h5, h6 { font-family: var(--nsc-body); font-weight: 700; }
::selection { background: var(--nsc-gold); color: #171006; }
a:focus-visible, button:focus-visible, .btn:focus-visible {
	outline: 3px solid var(--nsc-paper);
	outline-offset: 3px;
	box-shadow: none;
}

/* ============ Buttons ============
   Buy / continue actions wear the gold foil (their site's purchase buttons);
   secondary actions are white-outline pills. */
.nsc-foil,
.btn-primary,
.btn-success {
	--bs-btn-color: #171006;
	--bs-btn-hover-color: #171006;
	--bs-btn-active-color: #171006;
	--bs-btn-disabled-color: #171006;
	background-color: #d8a83f !important;
	background-image: var(--nsc-gold-foil) !important;
	border: 1px solid #ebcc77 !important;
	color: #171006 !important;
	font-weight: 700;
	border-radius: 28px;
	box-shadow: inset 0 1px 0 #fff3b8aa, inset 0 -2px 0 #74431066, 0 3px 12px #0006;
	text-shadow: 0 1px 0 #fff6c455;
	transition: filter .18s, box-shadow .18s;
}
.nsc-foil:hover,
.btn-primary:hover,
.btn-success:hover { filter: brightness(1.1); }
.nsc-foil:active,
.btn-primary:active,
.btn-success:active { filter: brightness(.94); box-shadow: inset 0 2px 4px #74431066; }

.btn-outline-secondary,
.btn-outline-primary,
.btn-outline-dark,
.btn-light {
	--bs-btn-color: var(--nsc-paper);
	--bs-btn-border-color: var(--nsc-line-strong);
	--bs-btn-hover-color: #111;
	--bs-btn-hover-bg: var(--nsc-paper);
	--bs-btn-hover-border-color: var(--nsc-paper);
	--bs-btn-active-color: #111;
	--bs-btn-active-bg: var(--nsc-paper);
	background-color: transparent;
	color: var(--nsc-paper);
	border-color: var(--nsc-line-strong);
	border-radius: 28px;
}
.btn-dark {
	--bs-btn-bg: var(--nsc-black);
	--bs-btn-border-color: var(--nsc-line-strong);
	border-radius: 28px;
}

/* ============ Surfaces ============
   Light utility panels would put white text on white - pull them onto the
   dark ground instead. */
.bg-light, .bg-white, .card, .list-group-item, .dropdown-menu, .modal-content, .popover, .toast {
	background-color: var(--nsc-panel) !important;
	color: var(--nsc-paper);
	border-color: var(--nsc-line) !important;
}
.text-muted, .text-secondary, .form-text, .small.text-muted { color: var(--nsc-muted) !important; }
.text-dark, .text-body { color: var(--nsc-paper) !important; }
.border, .border-top, .border-bottom { border-color: var(--nsc-line) !important; }
hr { border-color: var(--nsc-line); opacity: 1; }

.form-control, .form-select {
	background-color: var(--nsc-black);
	color: var(--nsc-paper);
	border: 1px solid var(--nsc-line-strong);
	border-radius: 10px;
}
.form-control::placeholder { color: #8a8a8a; }
.form-control:focus, .form-select:focus {
	background-color: var(--nsc-black);
	color: var(--nsc-paper);
	border-color: var(--nsc-gold);
	box-shadow: 0 0 0 .2rem rgba(215, 174, 83, .25);
}
.form-select {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23d7ae53' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}
.btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal-header, .modal-footer { border-color: var(--nsc-line); }

/* ============================================================================
   EVENT PAGES - ground. The page's own inline <style> paints the body #f4f5f7
   and the direct-page wrapper white; this file loads after it, so equal
   selectors win here.
   ============================================================================ */
body { background-color: var(--nsc-ink); }
.event-direct-wrap {
	background: transparent;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
}
.event-direct-header,
.event-direct-description { border-color: var(--nsc-line); }
.event-direct-header h3 { color: var(--nsc-muted); }

/* ============================================================================
   DIRECT TICKET PAGE (events/<slug>-tickets) - fight-poster banner.
   Markup: the standard IMS banner (.ims-banner-outer, no template override),
   whose colours are INLINE styles - hence the !important overrides below.
   ============================================================================ */

/* Poster panel (the standard banner, re-dressed) */
.ims-banner-outer {
	position: relative;
	background:
		radial-gradient(120% 90% at 85% 0%, rgba(215, 174, 83, .16), transparent 60%),
		linear-gradient(180deg, #0b0b0b, var(--nsc-ink)) !important;
	border: 0 !important;
	border-bottom: 1px solid var(--nsc-line) !important;
	border-radius: 0 !important;
	margin: 0 -16px 18px !important;
	padding: 26px 16px 22px !important;
}
@media (min-width: 1400px) { .ims-banner-outer { margin-left: -24px !important; margin-right: -24px !important; padding-left: 24px !important; padding-right: 24px !important; } }
.event-direct-header-ims,
.event-direct-header-ims [style*='background-color'] {
	background: transparent !important;
	border-color: var(--nsc-line) !important;
}
/* Logo box on the right, like The Alex (owner, 2026-09-24). The banner sets an
   inline white/charcoal ground there; the logo's own ground is black, so the box
   is pure black to make it sit seamlessly. Desktop = .col-md-3, phone = .col-4. */
.event-direct-header-ims .col-md-3[style*='background-color'],
.event-direct-header-ims .col-4[style*='background-color'],
.event-direct-header-ims .col-md-3,
.event-direct-header-ims .col-4 {
	background: var(--nsc-black) !important;
	border-left: 1px solid var(--nsc-line) !important;
	border-radius: 6px;
}
.event-direct-header-ims .col-md-9 { padding: 0 !important; }
@media (min-width: 768px) {
	.event-direct-header-ims .col-md-9 > .row > .col-md-4 { flex: 0 0 34%; max-width: 360px; }
	.event-direct-header-ims .col-md-9 > .row > .col-md-8 { flex: 1 1 0; padding-left: 28px; }
}
.event-direct-header-ims img.img-fluid {
	border-radius: 6px !important;
	border: 1px solid rgba(215, 174, 83, .45);
	box-shadow: 0 18px 40px #000a !important;
}
.event-direct-header-ims h1,
.event-direct-header-ims h2 {
	color: var(--nsc-paper) !important;
	font-family: var(--nsc-display);
	font-weight: 800 !important;
	font-size: clamp(28px, 3.6vw, 52px);
	line-height: 1.04;
	letter-spacing: -.035em;
	text-wrap: balance;
	margin-bottom: 12px !important;
}
.event-direct-header-ims h3,
.event-direct-header-ims h5 {
	color: var(--nsc-muted) !important;
	font-family: var(--nsc-body);
	font-weight: 500;
	font-size: clamp(16px, 1.6vw, 21px);
}
/* Date line = the one gold line, like their "Saturday, November 7" */
.event-direct-header-ims p.fw-bold {
	color: var(--nsc-gold) !important;
	font-size: clamp(17px, 1.7vw, 22px);
	font-weight: 700 !important;
	letter-spacing: .01em;
}
.event-direct-header-ims p[style*='495057'] { color: #e6e6e6 !important; font-size: 16px; }
.event-direct-header-ims .bi-geo-alt-fill { color: var(--nsc-gold); }
.event-direct-header-ims .btn-dark {
	background: transparent;
	color: var(--nsc-paper);
	border: 1px solid var(--nsc-line-strong);
	padding: 8px 18px;
	font-weight: 600;
}
.event-direct-header-ims .btn-dark:hover { background: var(--nsc-paper); color: #111; border-color: var(--nsc-paper); }
#eventCountdownContainer {
	background: var(--nsc-black) !important;
	border: 1px solid rgba(215, 174, 83, .55);
	border-radius: 20px !important;
	color: var(--nsc-paper) !important;
	padding: 6px 14px !important;
}
#eventCountdownContainer .bi { color: var(--nsc-gold); }

/* Action row (Why Attend / Bookmark / Calendar / Share) */
.event-direct-wrap > .d-flex.flex-wrap .btn { font-weight: 600; }

/* Price range + availability line */
#ticketAvailabilityContainer .progress { background: #2a2a2a; }
#availabilityBar { background: var(--nsc-gold-foil) !important; }
#availabilityText { color: var(--nsc-gold) !important; }

/* ============ Best Available panel ============ */
#bestAvailablePanel .card.shadow-sm {
	background: #0c0c0c !important;
	border: 1px solid var(--nsc-line) !important;
	border-top: 2px solid var(--nsc-gold) !important;
	border-radius: 10px;
}
#bestAvailablePanel .card-title {
	font-family: var(--nsc-display);
	font-weight: 700;
	letter-spacing: -.02em;
	font-size: 19px;
}
#bestAvailablePanel .card-title .bi { color: var(--nsc-gold); }
#bestAvailablePanel .form-label { color: var(--nsc-paper); }
.bg-primary-subtle { background-color: var(--nsc-black) !important; color: var(--nsc-paper) !important; }
.border-primary { border-color: var(--nsc-gold) !important; }
.form-range::-webkit-slider-thumb { background: var(--nsc-gold); border: 2px solid #171006; }
.form-range::-moz-range-thumb { background: var(--nsc-gold); border: 2px solid #171006; }
.form-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 .2rem rgba(215, 174, 83, .35); }

/* Result rows: dark ticket rows with a gold edge, big white price - the
   ticket list on nosafecorner.com. */
#baResultsArea .card {
	background: #141414 !important;
	border: 1px solid var(--nsc-line) !important;
	border-left: 3px solid var(--nsc-gold) !important;
	border-radius: 8px;
	transition: border-color .18s, background-color .18s;
}
#baResultsArea .card:hover { background: #191919 !important; border-color: rgba(215, 174, 83, .6) !important; border-left-color: var(--nsc-gold) !important; }
#baResultsArea .card .fw-bold { font-size: 16px; }
#baResultsArea .bg-warning {
	background: transparent !important;
	color: var(--nsc-paper) !important;
	align-items: flex-end !important;
}
#baResultsArea .bg-warning .fs-5 {
	font: 700 22px/1 var(--nsc-display) !important;
	letter-spacing: -.03em;
}
#baResultsArea .bg-warning .small { color: var(--nsc-muted); }
#baResultsArea .btn-success { border-radius: 28px; font-size: 17px !important; white-space: nowrap; }
#baResultsArea .text-success { color: var(--nsc-gold) !important; }
/* Section / ticket-type notes ("EARLY BIRD PRICE!! ...") carry an inline near-black
   colour meant for white pages - unreadable on the black cards. */
#baResultsArea [style*='212529'] { color: #e6e6e6 !important; }
#baResultsArea [style*='212529'] .bi { color: var(--nsc-gold); }

/* Seat map toolbar (inline-styled by the map script) */
#mapControlBar {
	background: #0c0c0c !important;
	border-color: var(--nsc-line) !important;
	color: var(--nsc-paper);
}
#mapControlBar > div > span,
#mapControlBar [id*='oom'][id*='abel'],
#mapControlBar [id*='oomLevel'] { color: #e6e6e6 !important; }
#mapControlBar button[style*='background: white'],
#mapControlBar button[style*='background: rgb(255'] { background: var(--nsc-black) !important; }

/* Footer */
footer[role='contentinfo'] { color: var(--nsc-muted); }
footer[role='contentinfo'] a { color: var(--nsc-paper) !important; text-underline-offset: 3px; }
footer[role='contentinfo'] a:hover { color: var(--nsc-gold) !important; }
footer[role='contentinfo'] hr { border-color: var(--nsc-line); }

/* ============================================================================
   FRONT PAGE (index.html) - kept simple; the client runs its own home page.
   ============================================================================ */
.nsc-page { min-height: 100vh; display: flex; flex-direction: column; }

.nsc-masthead {
	background: var(--nsc-black);
	text-align: center;
	padding: 28px 20px 34px;
	border-bottom: 1px solid var(--nsc-line);
}
.nsc-masthead a { display: inline-block; }
.nsc-logo { display: block; width: min(420px, 82vw); height: auto; margin: 0 auto; }
.nsc-tagline {
	margin: 6px 0 0;
	font: 700 12px/1 var(--nsc-body);
	letter-spacing: .22em;
	color: var(--nsc-gold);
}

.nsc-main { flex: 1; width: min(980px, 100%); margin: 0 auto; padding: 56px 24px 72px; }
.nsc-main h1 {
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.02;
	margin: 0 0 8px;
}
.nsc-lede { color: var(--nsc-muted); margin: 0 0 34px; font-size: 17px; }

.nsc-row {
	display: grid;
	grid-template-columns: 150px 1fr auto;
	gap: 28px;
	align-items: center;
	padding: 22px 0;
	border-top: 1px solid var(--nsc-line-strong);
	color: var(--nsc-paper);
	text-decoration: none;
	opacity: 0;
	animation: nsc-rise .5s ease-out forwards;
}
.nsc-row:last-of-type { border-bottom: 1px solid var(--nsc-line-strong); }
.nsc-row:hover { color: var(--nsc-paper); }
.nsc-row:hover .nsc-row-title { color: var(--nsc-gold); }
.nsc-row-img {
	width: 150px;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 6px;
	background: var(--nsc-panel);
	border: 1px solid var(--nsc-line);
}
.nsc-row-date {
	display: block;
	font: 700 12px/1.2 var(--nsc-body);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--nsc-gold);
	margin-bottom: 6px;
}
.nsc-row-title {
	font: 800 clamp(20px, 2.4vw, 28px)/1.12 var(--nsc-display);
	letter-spacing: -.03em;
	margin: 0 0 6px;
	transition: color .18s;
}
.nsc-row-sub, .nsc-row-venue { margin: 0; font-size: 14px; color: var(--nsc-muted); }
.nsc-row-cta {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	padding: 12px 26px;
	font-size: 15px;
	white-space: nowrap;
}
.nsc-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 9px;
	border: 1px solid var(--nsc-gold);
	border-radius: 20px;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--nsc-gold);
	vertical-align: middle;
}
.nsc-badge-sold { border-color: #e05a4f; color: #e05a4f; }
.nsc-empty {
	padding: 40px 0;
	border-top: 1px solid var(--nsc-line-strong);
	border-bottom: 1px solid var(--nsc-line-strong);
	color: var(--nsc-muted);
}

.nsc-footer {
	background: var(--nsc-black);
	border-top: 1px solid var(--nsc-line);
	padding: 26px 24px;
	font-size: 13px;
	color: var(--nsc-muted);
	text-align: center;
}
.nsc-footer a { color: var(--nsc-paper); text-underline-offset: 4px; }
.nsc-footer p { margin: 4px 0; }

@keyframes nsc-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 700px) {
	.nsc-main { padding: 40px 18px 56px; }
	.nsc-row { grid-template-columns: 1fr; gap: 14px; }
	.nsc-row-img { width: 100%; }
	.nsc-row-cta { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
	.nsc-row { animation: none; opacity: 1; }
	* { transition: none !important; }
}

/* ============================================================================
   CLASSIC TICKET TABLE as cards (#tixTable.tix-ga-cards, IMSTemplates.cfc) -
   the "interactive" ticket display: every section listed with a quantity
   stepper and one Find Tickets button. The shared markup is built for white
   pages (white cards, yellow price pill, blue steppers, white sticky totals,
   section names in their map colour inline), so it is re-dressed here to match
   the dark best-available cards. `body` raises specificity over the shared
   rules, which are all !important. (2026-09-25)
   ============================================================================ */
body #tixTable.tix-ga-cards tbody tr {
	background: var(--nsc-panel) !important;
	border: 1px solid var(--nsc-line) !important;
	border-left: 3px solid var(--nsc-gold) !important;
	box-shadow: none !important;
	color: var(--nsc-paper);
}
body #tixTable.tix-ga-cards td { color: var(--nsc-paper); }
/* Section name: its map colour (red/blue on white) is unreadable here */
body #tixTable.tix-ga-cards td:nth-child(2) span,
body #tixTable.tix-ga-cards td:nth-child(2) span[style] {
	color: var(--nsc-paper) !important;
	font-family: var(--nsc-display);
	font-weight: 700 !important;
	letter-spacing: -.01em;
}
/* Price: gold figure, no yellow pill */
body #tixTable.tix-ga-cards td:nth-child(3) input {
	background: transparent !important;
	color: var(--nsc-gold) !important;
	font-size: 1.15rem !important;
	font-weight: 800 !important;
}
body #tixTable.tix-ga-cards td:nth-child(4) { color: var(--nsc-muted) !important; }
/* Quantity stepper in gold */
body #tixTable.tix-ga-cards .tix-qty-btn {
	background: transparent !important;
	border-color: var(--nsc-gold) !important;
	color: var(--nsc-gold) !important;
}
body #tixTable.tix-ga-cards .tix-qty-btn:hover {
	background: var(--nsc-gold) !important;
	color: #111 !important;
}
body #tixTable.tix-ga-cards td.tix-qty-cell select,
body #tixTable.tix-ga-cards td.tix-qty-cell input {
	background: var(--nsc-black) !important;
	color: var(--nsc-paper) !important;
	border-color: var(--nsc-gold) !important;
}
/* Line total */
body #tixTable.tix-ga-cards td:nth-child(6) input {
	background: var(--nsc-black) !important;
	color: var(--nsc-paper) !important;
	border: 1px solid var(--nsc-line) !important;
}
body #tixTable.tix-ga-cards tbody tr td:nth-child(6)::before { color: var(--nsc-muted) !important; }
/* Notes under each card (section notes carry the section colour inline) */
body #tixTable.tix-ga-cards tr.tix-notes-row,
body #tixTable.tix-ga-cards tr.tix-notes-row td {
	background: #151515 !important;
}
body #tixTable.tix-ga-cards tr.tix-notes-row td,
body #tixTable.tix-ga-cards tr.tix-notes-row td div[style] {
	color: #e6e6e6 !important;
	font-weight: 500 !important;
}
/* Sticky Grand Total + Find Tickets bar */
body #tixTable.tix-ga-cards tr.tix-grand-row,
body #tixTable.tix-ga-cards tr.tix-find-row,
body #tixTable.tix-ga-cards tr.tix-grand-row td,
body #tixTable.tix-ga-cards tr.tix-grand-row td[style],
body #tixTable.tix-ga-cards tbody tr.tix-find-row td {
	background: var(--nsc-black) !important;
	border-color: var(--nsc-line) !important;
	border-left-color: var(--nsc-line) !important;
	box-shadow: none !important;
}
body #tixTable.tix-ga-cards tr.tix-grand-row .text-danger,
body #tixTable.tix-ga-cards #totalSelectedValue {
	color: var(--nsc-gold) !important;
	background: transparent !important;
}
/* Headings above the table ("Tickets for event", "All amounts are in") */
.tix-ga-wrap, .tix-ga-wrap p { color: var(--nsc-paper); }
.tix-ga-wrap .text-muted { color: var(--nsc-muted) !important; }
/* The GA list's button says "Checkout" on every site now (IMSTemplates, 2026-09-26),
   so No Safe Corner no longer swaps its text here. */