/* ==========================================================
   SG Mapping — Tebex store integration styles
   Sits alongside style.min.css, reuses the site's existing
   colour system (#ff0000 theme, #212529 dark cards, Oswald)
   ========================================================== */

/* ---- Trust badge strip (mirrors the Tebex store badges) ---- */
.trust-badges-section {
	background: #212529;
	padding: 30px 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.trust-badge i {
	display: inline-block;
	font-size: 2rem;
	color: #ff0000;
	margin-bottom: 10px;
}

.trust-badge h5 {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 1rem;
	color: #fff;
	margin-bottom: 4px;
}

.trust-badge p {
	color: #a0a6bc;
	font-size: 0.85rem;
	margin-bottom: 0;
}

/* ---- Store category tabs ---- */
.store-tabs {
	gap: 12px;
	margin-bottom: 40px;
}

.store-tab {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	font-size: 0.85rem;
	letter-spacing: 1px;
	color: #fff;
	background: #212529;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 10px 22px;
	border-radius: 3px;
	transition: .3s all linear;
	text-decoration: none;
	cursor: pointer;
	font-weight: 500;
}

.store-tab:hover {
	background: #ff0000;
	border-color: #ff0000;
	color: #fff;
}

.store-tab.active {
	background: #ff0000;
	border-color: #ff0000;
	color: #fff;
}

/* ---- Package grid states (loading / error / empty) ---- */
.store-status {
	text-align: center;
	padding: 40px 0;
	color: #a0a6bc;
	font-family: "Barlow", sans-serif;
}

.store-status a {
	text-decoration: underline;
}

/* ---- Sale flag on package thumbnails ---- */
.product-thumb {
	position: relative;
}

.store-sale-flag {
	position: absolute;
	top: 10px;
	right: 10px;
	background: #ff0000;
	color: #fff;
	font-family: "Oswald", sans-serif;
	font-size: 0.7rem;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 3px;
	z-index: 2;
}

/* ---- Buy Now button (launches embedded Tebex checkout) ---- */
.buy-now-button {
	display: inline-block;
	margin-top: 12px;
	width: 100%;
	background: #ff0000;
	color: #fff;
	border: none;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: 0.85rem;
	font-weight: 600;
	padding: 10px 0;
	border-radius: 3px;
	cursor: pointer;
	transition: .3s all linear;
}

.buy-now-button:hover:not(:disabled) {
	background: #fff;
	color: #ff0000;
}

.buy-now-button:disabled {
	opacity: 0.6;
	cursor: wait;
}

/* ---- Package details modal ---- */
.tebex-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 100px 20px 20px; /* top padding clears the fixed header */
	opacity: 0;
	visibility: hidden;
	transition: .3s all linear;
	z-index: 1050; /* above .header-fixed (999) so it never renders underneath it */
}

.tebex-modal-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.tebex-modal {
	background: #171a1d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	max-width: 560px;
	width: 100%;
	max-height: 70vh;
	overflow-y: auto;
	position: relative;
	padding: 24px;
	font-family: "Barlow", sans-serif;
}

.tebex-modal-close {
	position: absolute;
	top: 14px;
	right: 14px;
	background: none;
	border: none;
	color: #a0a6bc;
	font-size: 1.7rem;
	line-height: 1;
	cursor: pointer;
}

.tebex-modal-close:hover {
	color: #ff0000;
}

.tebex-modal-image {
	width: 100%;
	max-height: 180px;
	object-fit: cover;
	border-radius: 3px;
	margin-bottom: 16px;
}

.tebex-modal-title {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 6px;
}

.tebex-modal-price {
	font-family: "Oswald", sans-serif;
	font-size: 1.3rem;
	font-weight: 600;
	margin-bottom: 14px;
}

.tebex-modal-description {
	color: #a0a6bc;
	font-size: 0.9rem;
	line-height: 1.6;
	margin-bottom: 18px;
}

.tebex-modal-description p:last-child {
	margin-bottom: 0;
}

.tebex-modal-buy {
	display: block;
	text-align: center;
	width: 100%;
}

/* ==========================================================
   Header background — uses the same blue-to-red gradient art
   (assets/images/cta/bg.jpg) already on the site, so the header
   looks the same and intentional on every page, not just a
   coincidental blur-blend on the homepage.
   ========================================================== */
.header-section {
	background-image:
		linear-gradient(90deg, rgba(8, 10, 30, 0.85) 0%, rgba(10, 8, 14, 0.7) 50%, rgba(30, 4, 4, 0.85) 100%),
		url('assets/images/cta/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.header-section.header-fixed {
	background-color: transparent;
	background-image:
		linear-gradient(90deg, rgba(6, 8, 24, 0.94) 0%, rgba(8, 6, 10, 0.85) 50%, rgba(24, 3, 3, 0.94) 100%),
		url('assets/images/cta/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 991px) {
	.menu {
		background-image:
			linear-gradient(90deg, rgba(6, 8, 24, 0.94) 0%, rgba(24, 3, 3, 0.94) 100%),
			url('assets/images/cta/bg.jpg');
		background-size: cover;
		background-position: center;
	}

	.header-top {
		background-image:
			linear-gradient(90deg, rgba(6, 8, 24, 0.94) 0%, rgba(24, 3, 3, 0.94) 100%),
			url('assets/images/cta/bg.jpg');
		background-size: cover;
		background-position: center;
	}
}

/* ==========================================================
   Locked header: always sticky, always the compact size —
   no shrink/pop animation as you scroll. The template only
   applies the compact top-bar spacing and position:fixed to
   .header-fixed (added by JS past 300px scroll, with a
   fadeInDown animation each time); we make .header-section
   behave identically whether or not that class is present so
   there's nothing left to visibly change.
   ========================================================== */
.header-section,
.header-section.header-fixed {
	position: sticky !important;
	top: 0 !important;
	animation: none !important;
	box-shadow: none;
}

.header-top-area .left li {
	padding: 6px 18px;
	font-size: 13px;
}

.header-top-area .social-icons li a {
	height: 32px;
	line-height: 32px;
	width: 32px;
	font-size: 0.9rem;
}

.header-wrapper {
	padding: 8px 0;
}


/* Logo also only shrank via .header-fixed before — lock it to the compact size permanently (desktop only, matching the template's own breakpoints). .logo sits under .brand-logo, a SIBLING of .header-wrapper, not inside it. */
@media (min-width: 992px) {
	.header-section .brand-logo .logo {
		max-width: 80px;
	}
}

@media (min-width: 1200px) {
	.header-section .brand-logo .logo {
		max-width: 90px;
	}
}

/* The template also makes the logo position:absolute with its own
   left/bottom offsets the moment .header-fixed is added on scroll —
   that's the "shape change" jump. Since the header is now always in
   its compact state anyway, keep the logo static/in-flow always. */
.header-section.header-fixed .logo {
	position: static;
	left: auto;
	bottom: auto;
}

/* ==========================================================
   Gallery carousel (Swiper) — left/right arrows + auto-advance
   that pauses on hover, styled to match the site's red theme.
   Slides are a fixed size so every image crops from its centre
   to fill the same amount of space, rather than each stretching
   to its own native aspect ratio.
   ========================================================== */
.tebex-gallery-swiper {
	padding: 40px 55px 60px;
}

.tebex-gallery-swiper .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear !important;
}

.tebex-gallery-swiper .swiper-slide {
	width: 380px;
	height: auto;
}

.tebex-gallery-swiper .gallery-item {
	max-width: none;
	width: 100%;
}

.tebex-gallery-swiper .gallery-thumb {
	height: 260px;
}

.tebex-gallery-swiper .gallery-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.tebex-gallery-swiper .swiper-slide-active .gallery-item {
	box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
}

.tebex-gallery-swiper .swiper-button-next,
.tebex-gallery-swiper .swiper-button-prev {
	color: #ff0000;
	width: 44px;
	height: 44px;
	background: #171a1d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: .3s all linear;
}

.tebex-gallery-swiper:hover .swiper-button-next,
.tebex-gallery-swiper:hover .swiper-button-prev {
	opacity: 1;
	pointer-events: auto;
}

.tebex-gallery-swiper .swiper-button-next:after,
.tebex-gallery-swiper .swiper-button-prev:after {
	font-size: 1rem;
}

.tebex-gallery-swiper .swiper-button-next:hover,
.tebex-gallery-swiper .swiper-button-prev:hover {
	background: #ff0000;
	color: #fff;
}

/* ==========================================================
   Footer background — same treatment as the header (same
   image, same gradient overlay) so the two feel like one
   consistent frame around the page.
   ========================================================== */
.footer-section {
	background-image:
		linear-gradient(90deg, rgba(8, 10, 30, 0.88) 0%, rgba(10, 8, 14, 0.78) 50%, rgba(30, 4, 4, 0.88) 100%),
		url('assets/images/cta/bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ==========================================================
   Ticket Hub page — standalone card for the ticket lookup form
   ========================================================== */
.ticket-hub-card {
	background: #171a1d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 40px;
	text-align: center;
}

.ticket-hub-card .form-control {
	margin-bottom: 0;
}

.ticket-hub-card .default-button {
	width: 100%;
}

/* ==========================================================
   Slim footer — logo, support email, copyright only, sized to
   match the compact header instead of the old multi-row footer.
   ========================================================== */
.footer-section.footer-slim {
	padding: 22px 0;
}

.footer-slim-inner {
	gap: 18px;
}

.footer-slim-logo img {
	max-width: 80px;
}

.footer-slim-social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.footer-slim-social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.06);
	color: #fff;
	font-size: 1rem;
	transition: .3s all linear;
}

.footer-slim-social a:hover {
	background: #ff0000;
	color: #fff;
}

.footer-slim-copyright p {
	margin: 0;
	color: #a0a6bc;
	font-size: 0.85rem;
}

@media (max-width: 767px) {
	.footer-slim-inner {
		justify-content: center !important;
		text-align: center;
	}
}

/* ==========================================================
   Partner carousel — same rotating-carousel treatment as the
   gallery, with its own card style (logo, name, description).
   ========================================================== */
.partner-swiper {
	padding: 40px 55px 60px;
}

.partner-swiper .swiper-wrapper {
	align-items: center;
	transition-timing-function: linear !important;
}

.partner-swiper .swiper-slide {
	width: 340px;
	height: auto;
}

.partner-card {
	background: #171a1d;
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 6px;
	padding: 30px;
	text-align: center;
	width: 100%;
	max-width: 340px;
	height: 360px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.partner-card-thumb {
	width: 70px;
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #212529;
	border-radius: 50%;
	margin: 0 auto 18px;
	overflow: hidden;
	flex-shrink: 0;
}

.partner-card-thumb img {
	max-width: 70%;
	max-height: 70%;
	object-fit: contain;
}

.partner-card-title {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-size: 1.1rem;
	margin-bottom: 12px;
	width: 100%;
}

.partner-card-desc {
	color: #a0a6bc;
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0;
	width: 100%;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
}

.partner-swiper .swiper-button-next,
.partner-swiper .swiper-button-prev {
	color: #ff0000;
	width: 44px;
	height: 44px;
	background: #171a1d;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 50%;
	opacity: 0;
	pointer-events: none;
	transition: .3s all linear;
}

.partner-swiper:hover .swiper-button-next,
.partner-swiper:hover .swiper-button-prev {
	opacity: 1;
	pointer-events: auto;
}

.partner-swiper .swiper-button-next:after,
.partner-swiper .swiper-button-prev:after {
	font-size: 1rem;
}

.partner-swiper .swiper-button-next:hover,
.partner-swiper .swiper-button-prev:hover {
	background: #ff0000;
	color: #fff;
}

/* ==========================================================
   Sticky footer — the footer now always sits at the bottom of
   the viewport, even on pages with very little content, instead
   of leaving a gap below it. Fixed-position elements (preloader,
   scrollToTop, body-shape) are unaffected since they're removed
   from normal flow regardless of the body being a flex container.
   ========================================================== */
html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer.footer-section {
	margin-top: auto;
}

/* ==========================================================
   About page — the template's default 115px top + 110px bottom
   padding was forcing a scroll for what's fairly modest content
   once there's no hero above it. Tightened up for this standalone
   page (also used by the ticket hub page).
   ========================================================== */
.about-section {
	padding-bottom: 60px;
}

.about-section .section-wrapper.padding-top {
	padding-top: 50px;
}

/* ==========================================================
   Sticky footer — on short pages (gallery, partners, ticket
   hub, contact) nothing was forcing the footer to the bottom
   of the viewport, so it just sat wherever the content ended,
   leaving dead space below it. This pins it to the bottom on
   short pages while still pushing down normally on long ones.
   ========================================================== */
html, body {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

footer.footer-section {
	margin-top: auto;
}

/* ==========================================================
   Homepage hero — left-aligned headline/copy/buttons over a
   gradient overlay, with a stat bar along the bottom. Overrides
   several template defaults that were tuned for the old tall
   screenshot hero: huge top padding, a negative bottom margin
   pulling content into the next section, background zoom at
   certain breakpoints, and the centered .banner-content layout.
   ========================================================== */
.homepage-hero {
	position: relative;
	padding: 170px 0 0 !important;
	background-size: cover !important;
	background-position: center;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.homepage-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(2, 3, 9, 0.97) 0%, rgba(4, 3, 6, 0.87) 55%, rgba(4, 3, 6, 0.65) 100%);
	z-index: 0;
}

.homepage-hero > .container {
	position: relative;
	z-index: 1;
}

.hero-left {
	max-width: 620px;
	padding-bottom: 70px;
}

.hero-eyebrow {
	color: #ff0000;
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: 0.95rem;
	margin-bottom: 18px;
}

.hero-title {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-size: 3rem;
	line-height: 1.15;
	font-weight: 700;
	margin-bottom: 22px;
}

.hero-subtitle {
	color: #d6d9e2;
	font-size: 1.05rem;
	margin-bottom: 32px;
	max-width: 480px;
}

.hero-buttons .default-button {
	margin: 0 12px 12px 0;
}

/* ---- Stat bar ---- */
.hero-stats {
	position: relative;
	z-index: 1;
	background: rgba(8, 10, 20, 0.85);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	margin-top: auto;
}

.hero-stats-inner {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
}

.hero-stat {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 22px 20px;
	border-right: 1px solid rgba(255, 255, 255, 0.08);
	min-width: 0;
}

.hero-stat:last-child {
	border-right: none;
}

.hero-stat i {
	font-size: 1.8rem;
	color: #ff0000;
	flex-shrink: 0;
}

.hero-stat h5 {
	font-family: "Oswald", sans-serif;
	text-transform: uppercase;
	color: #fff;
	font-size: 0.95rem;
	margin-bottom: 2px;
}

.hero-stat span {
	color: #a0a6bc;
	font-size: 0.8rem;
}

.hero-stat-cta {
	justify-content: center;
	text-align: center;
}

@media (max-width: 991px) {
	.hero-stats-inner {
		grid-template-columns: repeat(2, 1fr);
	}

	.hero-stat {
		border-right: none;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
}

@media (max-width: 575px) {
	.homepage-hero {
		padding: 130px 0 0 !important;
	}

	.hero-title {
		font-size: 2rem;
	}

	.hero-stats-inner {
		grid-template-columns: 1fr;
	}
}

/* Decorative fixed glow shape (assets/images/shape/body-shape.png) was
   showing through as a stray red/blue stripe in the empty gap the
   sticky-footer flex layout leaves on short pages. Hidden — the
   deliberate header/footer/hero gradients carry that job now. */
.body-shape {
	display: none !important;
}

/* ==========================================================
   Documentation page — just the GitBook docs in a plain iframe,
   filling the page from the header down to the footer. No extra
   chrome (their JS embed widget wasn't loading reliably).
   ========================================================== */
.docs-embed-section {
	flex: 1 0 auto;
	display: flex;
}

.docs-embed-section iframe {
	flex: 1 0 auto;
	width: 100%;
	min-height: 600px;
	border: none;
}