/* =====================================================
   PRO Swing + TRI — Ramadan Offer Additions
   File: swing_tri.css
   Depends on: style.min.css + tv.css + swing_lifetime.css
   Purpose: Ramadan-specific overrides & new TRI block
   SAFE: Does NOT modify swing_lifetime.css rules.
         All selectors are unique to this page variant.
   ===================================================== */

/* ─────────────────────────────────────────────────────
   1. BACKGROUND TINT OVERRIDE
   Subtle indigo shift — replaces default bg glow only
   on the pss-main wrapper. Does not touch typography.
   ───────────────────────────────────────────────────── */
.pss-main {
	background: linear-gradient(210deg, #2E2A8F 0%, #4C35C5 100%);
}

/* Soften section backgrounds so they layer over new bg */
.pssContrast {
	background: rgba(0, 0, 0, 0.30);
}
.pssFor__inner {
	background: rgba(0, 0, 0, 0.18);
}


/* ─────────────────────────────────────────────────────
   2. HERO — RAMADAN ADDITIONS
   ───────────────────────────────────────────────────── */

/* "RAMADAN SPECIAL ACCESS" accent save line */
.pssHero__save--ramadan {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 11px;
	font-weight: 900;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: rgba(180, 165, 255, 0.95);
	margin-top: 10px;
}

/* "Includes TRI Indicator ($49 value)" line */
.pssHero__triIncluded {
	margin-top: 5px;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.68);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.pssHero__triIncluded::before {
	content: "✓";
	font-weight: 900;
	color: rgba(140, 120, 255, 1);
}
/* ($49 value) — accent colour only */
.pssHero__triValue {
	color: rgba(180, 165, 255, 0.92);
	font-weight: 700;
}


/* ─────────────────────────────────────────────────────
   3. TRI BLOCK
   Inserted between Pain block and pssFor block.
   Two-column layout on desktop, stacked on mobile.
   ───────────────────────────────────────────────────── */
.pssTriBlock {
	padding: 56px 22px 48px;
	position: relative;
	overflow: hidden;
}
.pssTriBlock::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(900px 500px at 60% 50%, rgba(109, 91, 255, 0.10), rgba(0,0,0,0) 65%);
}

.pssTriBlock__inner {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

/* ── Left column ── */
.pssTriBlock__kicker {
	display: inline-flex;
	align-items: center;
	padding: 7px 14px;
	border-radius: 999px;
	background: rgba(109, 91, 255, 0.10);
	border: 1px solid rgba(109, 91, 255, 0.28);
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 11.5px;
	font-weight: 900;
	letter-spacing: .20em;
	text-transform: uppercase;
	color: rgba(180, 165, 255, 0.90);
	margin-bottom: 16px;
}

.pssTriBlock__heading {
	font-family: Manrope, Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: clamp(26px, 3.2vw, 38px);
	font-weight: 950;
	letter-spacing: -.03em;
	line-height: 1.08;
	color: #fff;
	margin: 0 0 14px;
}
.pssTriBlock__heading span {
	color: rgba(180, 165, 255, 0.85);
	font-size: 0.70em;
	font-weight: 700;
	letter-spacing: .01em;
	display: block;
	margin-top: 4px;
}

.pssTriBlock__bridge {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 13.5px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: .04em;
	margin: 0 0 10px;
	text-transform: uppercase;
}

.pssTriBlock__body {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 15px;
	line-height: 1.62;
	color: rgba(255, 255, 255, 0.72);
	margin: 0 0 22px;
}

/* Bullet list */
.pssTriBlock__list {
	list-style: none;
	margin: 0 0 22px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.pssTriBlock__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: rgba(255, 255, 255, 0.82);
}
.pssTriBlock__check {
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 999px;
	background: rgba(109, 91, 255, 0.15);
	border: 1px solid rgba(109, 91, 255, 0.35);
	color: rgba(180, 165, 255, 0.95);
	font-weight: 900;
	font-size: 11px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Price / included line */
.pssTriBlock__priceRow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.035);
	border: 1px solid rgba(109, 91, 255, 0.18);
}
.pssTriBlock__regularPrice {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: rgba(255, 255, 255, 0.45);
	text-decoration: line-through;
	text-decoration-color: rgba(255, 255, 255, 0.25);
}
.pssTriBlock__sep {
	color: rgba(255, 255, 255, 0.25);
	font-size: 13px;
}
.pssTriBlock__included {
	font-family: Inter, "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 700;
	color: rgba(180, 165, 255, 0.92);
}

/* ── Right column — image card ── */
.pssTriBlock__right {
	display: flex;
	align-items: center;
	justify-content: center;
}
.pssTriBlock__imgWrap {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(109, 91, 255, 0.20);
	box-shadow: 0 28px 90px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,.04) inset;
	padding: 10px;
	max-width: 480px;
	width: 100%;
}
.pssTriBlock__imgWrap::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 18px;
	background: radial-gradient(ellipse at 50% 0%, rgba(109, 91, 255, 0.12), transparent 60%);
	pointer-events: none;
}
.pssTriBlock__imgWrap img {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	object-fit: cover;
}


/* ─────────────────────────────────────────────────────
   4. CHECKOUT — TRI chip highlight
   ───────────────────────────────────────────────────── */
.pss-checkout .platConfirmZ__chip--tri {
	background: rgba(109, 91, 255, 0.14);
	border-color: rgba(109, 91, 255, 0.35);
	color: rgba(180, 165, 255, 0.96);
}


/* ─────────────────────────────────────────────────────
   5. RESPONSIVE — MOBILE
   ───────────────────────────────────────────────────── */
@media (max-width: 860px) {
	.pssTriBlock__inner {
		grid-template-columns: 1fr;
		gap: 32px;
	}
	.pssTriBlock__right {
		order: -1; /* image above text on mobile */
	}
	.pssTriBlock__imgWrap {
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	.pssTriBlock {
		padding: 40px 16px 36px;
	}
	.pssTriBlock__heading {
		font-size: clamp(24px, 7vw, 32px);
	}
	.pssTriBlock__body {
		font-size: 14px;
	}
	.pssTriBlock__priceRow {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.pssTriBlock__sep {
		display: none;
	}
	.pssHero__triIncluded {
		font-size: 11.5px;
	}
}