/* StarwayPay Catalog Showcase -- independent of WooCommerce/PPOM styling.
   Two themes: 'original' (light, default) and 'star' (dark/cosmic,
   unlocked via Star Mart + chosen in Wallet Center Settings). Tokens are
   CSS custom properties scoped to .swc2-page so this never leaks into or
   fights the rest of the site's own styling. */

/* Scoped entirely to .swc2-page -- deliberately never touches `body`
   (an earlier version did, which visibly broke the shared header/footer:
   they have no background of their own and rely on the theme's dark
   `body{background-color:#0a0d14}` showing through behind their
   light-colored text/logo -- forcing body white made that text
   effectively invisible). The background image only lives inside this
   page's own box, between the header and footer, exactly as requested. */
.swc2-page {
	--swc2-bg: #ffffff;
	--swc2-surface: #f7f8fc;
	--swc2-border: rgba(20, 25, 60, 0.10);
	--swc2-text: #171a33;
	--swc2-text-muted: #6b7280;
	--swc2-accent-grad: linear-gradient(135deg, #5b7fff 0%, #a855f7 100%);
	--swc2-accent: #5b7fff;
	--swc2-card-bg: #ffffff;
	--swc2-card-border: rgba(91, 127, 255, 0.25);
	--swc2-container-bg: #ffffff;
	--swc2-container-border: rgba(20, 25, 60, 0.12);

	/* No background-image here (body.swc2-original-theme already provides
	   the wavy-line backdrop for the whole page) -- this box only needs a
	   transparent/plain base so the two content cards float on top of
	   that ONE shared background instead of duplicating it. */
	background-color: transparent;
	color: var(--swc2-text);
	/* Header-to-content spacing is handled by a real inline-height spacer
	   div in the PHP output now (padding-top here kept failing to show
	   any visible gap through several attempts), so this is back to a
	   normal base padding, not a large hack value. */
	padding: 20px 20px 64px;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.swc2-page[data-swc2-theme="star"] {
	--swc2-bg: #0a0d1a;
	--swc2-surface: rgba(255, 255, 255, 0.055);
	--swc2-border: rgba(255, 255, 255, 0.11);
	--swc2-text: #f2f4ff;
	--swc2-text-muted: #aab0d6;
	--swc2-card-bg: rgba(255, 255, 255, 0.05);
	--swc2-card-border: rgba(91, 127, 255, 0.3);
	--swc2-container-bg: rgba(255, 255, 255, 0.055);
	--swc2-container-border: rgba(255, 255, 255, 0.11);

	/* The light wavy-line background image doesn't read on a dark
	   backdrop -- star theme keeps its own cosmic gradient instead. */
	background-image:
		radial-gradient(ellipse 900px 600px at 15% -10%, rgba(91, 127, 255, 0.18), transparent 60%),
		radial-gradient(ellipse 900px 700px at 90% 10%, rgba(168, 85, 247, 0.16), transparent 55%);
}

.swc2-columns {
	max-width: 1080px;
	margin: 0 auto;
	display: flex;
	gap: 28px;
	flex-wrap: wrap;
	align-items: stretch;
}

.swc2-col-left,
.swc2-col-right {
	flex: 1 1 420px;
	min-width: 0;
	background: var(--swc2-container-bg);
	border: 1px solid var(--swc2-container-border);
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 10px 40px -20px rgba(20, 25, 60, 0.25);
}

/* Banner */
.swc2-banner {
	display: block;
	margin-bottom: 16px;
	border-radius: 14px;
	overflow: hidden;
	line-height: 0;
}
.swc2-banner-img {
	width: 100%;
	height: auto;
	display: block;
}

/* Product icon + name (left column) */
.swc2-product-heading {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 4px 0 16px;
}
.swc2-product-icon {
	width: 136px;
	height: 136px;
	border-radius: 20px;
	object-fit: cover;
	flex-shrink: 0;
}
.swc2-product-kicker {
	display: inline-block;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
	background: var(--swc2-accent-grad);
	padding: 2px 10px;
	border-radius: 999px;
	margin-bottom: 4px;
}
.swc2-product-heading .swc2-title {
	margin: 0;
	font-size: 22px;
}

/* Trust badges */
.swc2-trust-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 4px 0 18px;
}
.swc2-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 600;
	color: #fff;
	background: var(--swc2-accent-grad);
	padding: 7px 14px;
	border-radius: 999px;
}

/* Description */
.swc2-description {
	line-height: 1.7;
	color: var(--swc2-text);
}
.swc2-description h2,
.swc2-description h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 18px 0 8px;
}
.swc2-description p {
	margin: 10px 0;
}
.swc2-description ol,
.swc2-description ul {
	margin: 8px 0;
	padding-left: 22px;
}

/* Right column */
.swc2-title {
	font-size: 26px;
	font-weight: 800;
	margin: 0 0 18px;
}
.swc2-loading,
.swc2-error {
	color: var(--swc2-text-muted);
	font-size: 14px;
}
.swc2-error {
	color: #fb7185;
}

.swc2-field {
	margin-bottom: 18px;
}
/* Even, predictable spacing for the guest email/phone/promo fields inside
   the confirmation modal -- owner-reported 2026-07-25: the gap between
   Email and Phone looked noticeably bigger than Phone-to-Promo. Using
   flex `gap` instead of relying on each .swc2-field's own margin-bottom
   avoids whatever was making those margins stack unevenly. */
.swc2-confirm-fields {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.swc2-confirm-fields .swc2-field {
	margin-bottom: 0;
}
.swc2-field-label {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--swc2-text);
}
.swc2-field input[type="text"],
.swc2-field input[type="email"] {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid var(--swc2-border);
	background: var(--swc2-surface);
	color: var(--swc2-text);
	font-size: 14px;
}

.swc2-section {
	margin: 16px 0;
}
.swc2-section-title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 10px;
	padding-left: 10px;
	border-left: 3px solid var(--swc2-accent);
	color: var(--swc2-text);
}
.swc2-section.swc2-promo .swc2-section-title {
	border-left-color: #a855f7;
}
.swc2-option-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 10px;
}
.swc2-option-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 10px;
	border-radius: 12px;
	border: 1px solid var(--swc2-card-border);
	background: var(--swc2-card-bg);
	color: var(--swc2-text);
	cursor: pointer;
	text-align: center;
	font-size: 13px;
	transition: border-color 0.15s, background 0.15s;
}
.swc2-option-card:hover {
	border-color: var(--swc2-accent);
}
.swc2-option-card.swc2-selected {
	border-color: var(--swc2-accent);
	background: linear-gradient(135deg, rgba(91, 127, 255, 0.15) 0%, rgba(168, 85, 247, 0.15) 100%);
	box-shadow: 0 0 0 1px var(--swc2-accent);
}
.swc2-option-card .swc2-option-price {
	font-weight: 700;
	color: var(--swc2-accent);
}
.swc2-option-card.swc2-is-promo::after {
	content: 'Promo';
	position: absolute;
	top: -8px;
	right: -6px;
	background: var(--swc2-accent-grad);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	padding: 2px 8px;
	border-radius: 999px;
}

.swc2-buy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 20px;
	border: none;
	border-radius: 999px;
	background: var(--swc2-accent-grad);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	margin-top: 10px;
}
.swc2-buy-button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.swc2-result {
	margin-top: 14px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
}
.swc2-result a {
	color: inherit;
	text-decoration: underline;
	font-weight: 700;
}
.swc2-result.swc2-result-success {
	background: rgba(52, 211, 153, 0.12);
	color: #34d399;
	border: 1px solid rgba(52, 211, 153, 0.3);
}
.swc2-result.swc2-result-error {
	background: rgba(251, 113, 133, 0.12);
	color: #fb7185;
	border: 1px solid rgba(251, 113, 133, 0.3);
}
.swc2-result.swc2-result-notice {
	background: rgba(91, 127, 255, 0.10);
	color: var(--swc2-accent);
	border: 1px solid rgba(91, 127, 255, 0.25);
}

/* Shared header/footer -- owner-requested 2026-07-25: light theme means
   the WHOLE page, not just this content card. header.wp-block-template-
   part/footer.wp-block-template-part have no background of their own by
   design (starway-sticky-header.php's docblock confirms this -- they
   just show the page's dark body background through), so giving them an
   explicit light background here is enough; scoped to body.swc2-
   original-theme, which ONLY appears on this route, so the header/footer
   stay exactly as dark as ever on every other page. */
body.swc2-original-theme .site-header,
body.swc2-original-theme .site-footer,
body.swc2-original-theme header.wp-block-template-part,
body.swc2-original-theme footer.wp-block-template-part {
	background-color: #ffffff !important;
}
body.swc2-original-theme .site-header,
body.swc2-original-theme header.wp-block-template-part {
	border-bottom: 1px solid rgba(20, 25, 60, 0.10) !important;
}
body.swc2-original-theme .site-footer,
body.swc2-original-theme footer.wp-block-template-part {
	border-top: 1px solid rgba(20, 25, 60, 0.10) !important;
}
body.swc2-original-theme .site-header .wp-block-navigation-item__content,
body.swc2-original-theme .site-header .wp-block-site-title,
body.swc2-original-theme .site-header .has-light-color,
body.swc2-original-theme .site-footer .has-light-color,
body.swc2-original-theme .site-footer h1,
body.swc2-original-theme .site-footer h2 {
	color: #182B43 !important;
}
/* Owner-supplied 2026-07-25: a cleaner regenerated version of the same
   logo artwork, swapped in for this page's white header only (site-wide
   Customizer logo is untouched -- content: url() replaces only the
   rendered image on this <img>, not the underlying custom_logo setting
   other pages still use). Same grey/gold-on-transparent artwork as
   before, so the drop-shadow outline trick (each drop-shadow() follows
   the image's own alpha silhouette, unlike box-shadow, faking a thin
   dark outline hugging the actual artwork edges) is still needed for
   contrast against the white background. */
body.swc2-original-theme .site-header .custom-logo {
	content: url('https://starwaypay.com/wp-content/uploads/2026/07/starwaypay-new-logo.png');
	filter:
		drop-shadow(1px 0 0 rgba(24, 43, 67, 0.55))
		drop-shadow(-1px 0 0 rgba(24, 43, 67, 0.55))
		drop-shadow(0 1px 0 rgba(24, 43, 67, 0.55))
		drop-shadow(0 -1px 0 rgba(24, 43, 67, 0.55));
	/* Owner-reported 2026-07-25: header felt too tall at the theme's own
	   200px -- shrunk to 130px, then owner asked for it bigger again --
	   160px as a middle ground. */
	width: 160px !important;
	height: auto !important;
}
/* The header's own top/bottom spacer block (parts/header.html's trailing
   wp:spacer) is the other main contributor to its height. */
body.swc2-original-theme .site-header .wp-block-spacer {
	height: 4px !important;
}
/* The floating star/moon decorations (Space Floating Icons, WPCode
   snippet 2785) are designed to glow against the dark page -- they don't
   read the same way on white, so hidden for this theme only. */
body.swc2-original-theme #space-floating-icons {
	display: none !important;
}

/* Owner-reported 2026-07-25: fixing the header/footer alone left the
   page background BEHIND them (everywhere outside this page's own
   alignwide-constrained .swc2-page box, e.g. either side of it on a wide
   screen) still the theme's global dark body{background-color:#0a0d14}.
   Safe to override now (unlike the very first attempt at this) because
   the header/footer's OWN background/text are fixed above via their own
   explicit rules -- this no longer relies on the dark body showing
   through to make their text readable. */
body.swc2-original-theme {
	background-color: #ffffff !important;
	background-image: url('https://starwaypay.com/wp-content/uploads/2026/07/swc2-bg2.png') !important;
	background-size: cover !important;
	background-position: center top !important;
	background-repeat: no-repeat !important;
	background-attachment: fixed !important;
}

@media (max-width: 680px) {
	.swc2-columns {
		flex-direction: column;
	}
}

/* Purchase confirmation modal -- shown after Buy Now, before the actual
   purchase API call fires, so the member can review item/quantity/total
   first instead of being charged the instant they click Buy. */
.swc2-confirm-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 18, 35, 0.55);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.swc2-confirm-box {
	background: #ffffff;
	color: #171a33;
	border-radius: 18px;
	max-width: 420px;
	width: 100%;
	/* Fixed max-height + the body below scrolling internally -- without
	   this the modal (product detail + pay method + email/phone fields +
	   payment detail + button) could exceed the viewport height with no
	   way to reach the button at all. */
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	box-shadow: 0 30px 80px -20px rgba(10, 13, 30, 0.4);
}
.swc2-confirm-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 24px 24px 14px;
	flex-shrink: 0;
}
.swc2-confirm-header h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 800;
}
.swc2-confirm-close {
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	color: #6b7280;
	padding: 4px;
}
.swc2-confirm-body {
	padding: 0 24px 24px;
	overflow-y: auto;
	/* Without this, a flex child's default min-height:auto lets it grow to
	   fit its full content height regardless of the parent's max-height,
	   so overflow-y:auto never actually kicks in -- the classic flexbox
	   "won't shrink/scroll" trap (owner-reported 2026-07-25: button still
	   unreachable even after adding max-height + overflow above). */
	min-height: 0;
}
.swc2-confirm-notice {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba(91, 127, 255, 0.08);
	color: #5b7fff;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 13px;
	margin-bottom: 18px;
}
.swc2-confirm-section {
	margin-bottom: 16px;
}
.swc2-confirm-section h4 {
	font-size: 13px;
	font-weight: 700;
	color: #6b7280;
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.swc2-confirm-row {
	display: flex;
	justify-content: space-between;
	font-size: 14px;
	padding: 6px 0;
}
.swc2-confirm-row.swc2-confirm-total {
	font-size: 16px;
	font-weight: 800;
	border-top: 1px solid rgba(20, 25, 60, 0.1);
	margin-top: 6px;
	padding-top: 12px;
}
.swc2-confirm-box .swc2-buy-button {
	margin-top: 4px;
	flex-shrink: 0;
	/* Same var()-out-of-scope bug as the inputs above -- this button
	   normally reads --swc2-accent-grad from .swc2-page, which the modal
	   (appended to <body>, outside .swc2-page) can't see, so the button
	   rendered with NO background and white-on-nothing text: fully
	   invisible but still taking up its own height, which is exactly the
	   "blank gap where the button should be" that was reported. Hardcoded
	   here instead. */
	background: linear-gradient(135deg, #5b7fff 0%, #a855f7 100%) !important;
	color: #fff !important;
}
.swc2-confirm-box .swc2-result {
	margin-top: 12px;
}
/* This modal is appended straight to <body>, outside .swc2-page, so it
   can't see that scope's --swc2-border/--swc2-surface CSS variables
   (owner-reported 2026-07-25: inputs rendered pure white with no visible
   border because of exactly this -- var() with no matching custom
   property in scope resolves to nothing). Explicit, hardcoded colors
   here instead -- this modal is always a plain white card regardless of
   the page's own light/star theme, same as the reference design. */
.swc2-confirm-box .swc2-field-label {
	color: #171a33;
}
.swc2-confirm-box .swc2-field input[type="text"],
.swc2-confirm-box .swc2-field input[type="email"] {
	border: 1px solid rgba(20, 25, 60, 0.18);
	background: #f7f8fc;
	color: #171a33;
}
.swc2-pay-method {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border: 1px solid rgba(91, 127, 255, 0.3);
	border-radius: 10px;
	cursor: pointer;
	font-size: 14px;
}
.swc2-pay-method + .swc2-pay-method {
	margin-top: 8px;
}
.swc2-pay-method-selected {
	border-color: #5b7fff;
	background: rgba(91, 127, 255, 0.08);
}
.swc2-pay-method small {
	color: #6b7280;
	font-weight: 400;
}
.swc2-promo-row {
	display: flex;
	gap: 8px;
}
.swc2-promo-row input {
	flex: 1;
	min-width: 0;
}
.swc2-promo-check-btn {
	flex-shrink: 0;
	padding: 0 18px;
	border: 1px solid rgba(91, 127, 255, 0.3);
	border-radius: 10px;
	background: #ffffff;
	color: #5b7fff;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.swc2-promo-check-btn:hover {
	background: rgba(91, 127, 255, 0.08);
}
.swc2-promo-result {
	margin-top: 6px;
	font-size: 13px;
	color: #6b7280;
}