/**
 * IKS Widgets — shared base styles.
 *
 * Covers: pill button system, multi-color heading helpers,
 * reveal/stagger animations, decorative utilities.
 */

:root {
	--iks-radius-pill: 999px;
	--iks-radius-card: 20px;
	--iks-shadow-soft: 0 8px 32px rgba(45, 17, 56, 0.06);
	--iks-shadow-medium: 0 16px 48px rgba(45, 17, 56, 0.10);
	--iks-shadow-strong: 0 24px 64px rgba(45, 17, 56, 0.18);
	--iks-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--iks-font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--iks-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--iks-ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Pill button system ── */
.iks-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 13px 30px;
	border-radius: var(--iks-radius-pill);
	font-family: var(--iks-font);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.005em;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none !important;
	transition: transform 0.4s var(--iks-ease), box-shadow 0.4s var(--iks-ease), background 0.3s var(--iks-ease), color 0.3s var(--iks-ease), border-color 0.3s var(--iks-ease);
	border: none;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.iks-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, transparent 50%);
	opacity: 0;
	transition: opacity 0.3s var(--iks-ease);
	pointer-events: none;
}
.iks-btn:hover::before { opacity: 1; }

.iks-btn--sm { padding: 9px 22px; font-size: 0.8rem; }
.iks-btn--lg { padding: 16px 38px; font-size: 0.95rem; }

.iks-btn--primary {
	background: var(--iks-purple, #8125A5);
	color: #fff !important;
	box-shadow: 0 6px 20px rgba(129, 37, 165, 0.22);
}
.iks-btn--primary:hover {
	background: var(--iks-magenta, #AE0083);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(129, 37, 165, 0.32);
}

.iks-btn--outline {
	background: transparent;
	color: var(--iks-purple, #8125A5) !important;
	box-shadow: inset 0 0 0 1.5px var(--iks-purple, #8125A5);
}
.iks-btn--outline:hover {
	background: var(--iks-purple, #8125A5);
	color: #fff !important;
	transform: translateY(-2px);
	box-shadow: inset 0 0 0 1.5px var(--iks-purple, #8125A5), 0 12px 28px rgba(129, 37, 165, 0.28);
}

.iks-btn--gold {
	background: linear-gradient(135deg, var(--iks-purple, #8125A5), var(--iks-magenta, #AE0083));
	color: #fff !important;
	box-shadow: 0 6px 20px rgba(129, 37, 165, 0.28);
}
.iks-btn--gold:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(129, 37, 165, 0.40);
	color: #1a0d1f !important;
}

.iks-btn--ghost {
	background: rgba(255, 255, 255, 0.96);
	color: var(--iks-purple, #8125A5) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}
.iks-btn--ghost:hover {
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.18);
	color: var(--iks-purple, #8125A5) !important;
}

.iks-btn__arrow {
	width: 14px;
	height: 14px;
	transition: transform 0.4s var(--iks-ease);
	position: relative;
	z-index: 1;
}
.iks-btn:hover .iks-btn__arrow { transform: translateX(4px); }

/* ── Multi-color heading helpers ── */
.iks-heading-multicolor {
	font-family: var(--iks-font-display);
	font-weight: 700;
	line-height: 1.08;
	margin: 0;
	letter-spacing: -0.025em;
}
.iks-heading-multicolor span {
	display: inline;
}
/* Repurposed: legacy "gold" highlight class now renders the purple→magenta gradient
   so previously-saved widgets with title_2_style="gold-grad" follow the IKS pattern. */
.iks-heading-multicolor .iks-h-gold {
	background: linear-gradient(135deg, var(--iks-purple, #8125A5) 0%, var(--iks-magenta, #AE0083) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.iks-heading-multicolor .iks-h-purple {
	background: linear-gradient(135deg, var(--iks-purple, #8125A5) 0%, var(--iks-magenta, #AE0083) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.iks-heading-multicolor .iks-h-italic {
	font-style: italic;
	font-family: 'Playfair Display', Georgia, serif;
	font-weight: 500;
}

/* ── Reveal animations (Intersection Observer driven) ── */
.iks-reveal {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.85s var(--iks-ease), transform 0.85s var(--iks-ease);
	will-change: transform, opacity;
}
.iks-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.iks-reveal--scale {
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 0.85s var(--iks-ease), transform 0.85s var(--iks-ease);
}
.iks-reveal--scale.is-visible { opacity: 1; transform: scale(1); }

.iks-reveal--fade {
	opacity: 0;
	transition: opacity 1s var(--iks-ease);
}
.iks-reveal--fade.is-visible { opacity: 1; }

/* Stagger: parent has the class, children animate in sequence */
.iks-reveal-stagger > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.7s var(--iks-ease), transform 0.7s var(--iks-ease);
	will-change: transform, opacity;
}
.iks-reveal-stagger > .is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.iks-reveal,
	.iks-reveal--scale,
	.iks-reveal--fade,
	.iks-reveal-stagger > * {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* In the Elementor editor preview, the IntersectionObserver doesn't fire
   reliably and elements stay invisible. Force all reveals visible in editor. */
body.elementor-editor-active .iks-reveal,
body.elementor-editor-active .iks-reveal--scale,
body.elementor-editor-active .iks-reveal--fade,
body.elementor-editor-active .iks-reveal-stagger,
body.elementor-editor-active .iks-reveal-stagger > * {
	opacity: 1 !important;
	transform: none !important;
	transition: none !important;
}

/* ── Decorative bokeh layer (animated softly) ── */
.iks-bokeh {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.iks-bokeh::before,
.iks-bokeh::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
}
.iks-bokeh::before {
	top: -160px;
	right: -100px;
	width: 520px;
	height: 520px;
	background: radial-gradient(circle, rgba(174, 119, 195, 0.55), transparent 70%);
	animation: iks-bokeh-1 22s var(--iks-ease-soft) infinite;
}
.iks-bokeh::after {
	bottom: -200px;
	left: -120px;
	width: 580px;
	height: 580px;
	background: radial-gradient(circle, rgba(255, 182, 6, 0.20), transparent 70%);
	animation: iks-bokeh-2 28s var(--iks-ease-soft) infinite;
}
@keyframes iks-bokeh-1 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(-40px, 60px); }
}
@keyframes iks-bokeh-2 {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(50px, -40px); }
}

/* ── Accent decorations ── */
.iks-accent-line {
	display: block;
	width: 48px;
	height: 2px;
	background: linear-gradient(90deg, var(--iks-purple, #8125A5), var(--iks-magenta, #AE0083));
	border-radius: 2px;
}
.iks-accent-dot {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--iks-purple, #8125A5), var(--iks-magenta, #AE0083));
	vertical-align: middle;
}

/* ── Eyebrow label (consistent across widgets) ── */
.iks-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--iks-font);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--iks-purple, #8125A5);
	margin-bottom: 18px;
}
.iks-eyebrow::before {
	content: '';
	width: 24px;
	height: 1px;
	background: currentColor;
	opacity: 0.6;
}

/* ── Soft section background utilities ── */
.iks-bg-soft {
	background: linear-gradient(180deg, #fff 0%, var(--iks-soft, #F0EDF0) 100%);
}
.iks-bg-cream {
	background: linear-gradient(180deg, #ffffff 0%, var(--iks-soft, #F0EDF0) 100%);
}

/* ──────────────────────────────────────────────────────────
   Full-width page support
   ──────────────────────────────────────────────────────────
   When a page uses Elementor's "Elementor Full Width" template,
   BuddyBoss still wraps content in #content.site-content with a
   max-width. Strip that so Elementor sections can span the viewport
   when set to "Full Width" content width in the editor.
   ────────────────────────────────────────────────────────── */

body.elementor-template-full-width #content,
body.elementor-template-full-width .site-content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
	margin: 0 !important;
}
body.elementor-template-full-width .site-content > * {
	max-width: none !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   IKS — Why Member
   ───────────────────────────────────────────────────────────────────────── */
.iks-why-member { background: #fff; padding: 80px 24px; }
.iks-why-member__grid {
	max-width: 1180px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr; gap: 60px;
	align-items: center;
}
.iks-why-member--left .iks-why-member__copy  { order: 2; }
.iks-why-member--left .iks-why-member__media { order: 1; }

.iks-why-member__title { margin: 0 0 22px; font-size: clamp( 30px, 3.4vw, 44px ); line-height: 1.15; font-weight: 800; }
.iks-why-member__title .t1 { color: #1a0d1f; }
.iks-why-member__title .t2 {
	margin-left: 10px;
	background: linear-gradient(135deg, var(--iks-purple, #8125A5) 0%, var(--iks-magenta, #AE0083) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}
.iks-why-member__body { font-size: 16px; line-height: 1.7; color: #4d4a5a; margin: 0 0 28px; }
.iks-why-member__body--soft { color: #6a6080; margin-top: 28px; margin-bottom: 0; }
.iks-why-member__cta-wrap { margin: 0; }
.iks-why-member__cta {
	display: inline-block; padding: 14px 32px; border-radius: 999px;
	background: linear-gradient(135deg, var(--iks-purple, #8125A5) 0%, var(--iks-magenta, #AE0083) 100%);
	color: #fff !important; font-weight: 600; font-size: 15px;
	text-decoration: none !important; box-shadow: 0 18px 36px -22px rgba(129, 37, 165, 0.55);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.iks-why-member__cta:hover { transform: translateY(-1px); box-shadow: 0 24px 44px -22px rgba(129, 37, 165, 0.65); color: #fff !important; }

.iks-why-member__media { display: flex; align-items: center; justify-content: center; }
.iks-why-member__media-frame { position: relative; max-width: 100%; }
.iks-why-member__media-inner {
	width: 100%; height: 100%; overflow: hidden;
	transform-origin: center center;
	transition: transform 0.4s ease;
}
.iks-why-member__media-inner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.iks-shape-circle { border-radius: 50%; }
.iks-shape-square { border-radius: 22px; }
.iks-shape-none   { border-radius: 0; }

@keyframes iks-rotate-cw  { from { transform: rotate(0deg);    } to { transform: rotate(360deg);  } }
@keyframes iks-rotate-ccw { from { transform: rotate(0deg);    } to { transform: rotate(-360deg); } }
.iks-why-member__media-inner.is-rotating.rotate-cw  { animation: iks-rotate-cw  60s linear infinite; }
.iks-why-member__media-inner.is-rotating.rotate-ccw { animation: iks-rotate-ccw 60s linear infinite; }

@media (max-width: 820px) {
	.iks-why-member { padding: 56px 20px; }
	.iks-why-member__grid { grid-template-columns: 1fr; gap: 36px; }
	.iks-why-member--left  .iks-why-member__copy,
	.iks-why-member--right .iks-why-member__copy { order: 2; }
	.iks-why-member--left  .iks-why-member__media,
	.iks-why-member--right .iks-why-member__media { order: 1; }
}

/* ─────────────────────────────────────────────────────────────────────────
   IKS — Membership Benefits
   ───────────────────────────────────────────────────────────────────────── */
.iks-mbenefits { background: #fff; padding: 60px 24px 90px; }
.iks-mbenefits__heading { max-width: 1180px; margin: 0 auto 40px; text-align: center; }
.iks-mbenefits__title { margin: 0; font-size: clamp( 28px, 3vw, 38px ); font-weight: 800; line-height: 1.2; }
.iks-mbenefits__title .t1 { color: #1a0d1f; }
.iks-mbenefits__title .t2 {
	margin-left: 10px;
	background: linear-gradient(135deg, var(--iks-purple, #8125A5) 0%, var(--iks-magenta, #AE0083) 100%);
	-webkit-background-clip: text; background-clip: text;
	-webkit-text-fill-color: transparent; color: transparent;
}

.iks-mbenefits__wrap { max-width: 1180px; margin: 0 auto; }
.iks-mbenefits__wrap--framed {
	padding: 28px;
	background: var(--iks-soft, #F0EDF0);
	border-radius: 18px;
}
.iks-mbenefits__grid {
	display: grid; gap: 22px;
}
.iks-mbenefits__grid.iks-cols-1 { grid-template-columns: 1fr; }
.iks-mbenefits__grid.iks-cols-2 { grid-template-columns: repeat(2, 1fr); }
.iks-mbenefits__grid.iks-cols-3 { grid-template-columns: repeat(3, 1fr); }
.iks-mbenefits__grid.iks-cols-4 { grid-template-columns: repeat(4, 1fr); }
.iks-mbenefits__grid.iks-cols-5 { grid-template-columns: repeat(5, 1fr); }

/* Stacked card — icon on top, title/copy below. Auto-applied at 4+ cols.
   When the wrap is framed (dark plum panel) and stacked, drop each card's
   background so cards visually dissolve into the frame — matches the
   reference design where 5 features sit on a single plum panel. */
.iks-mbenefits--stacked .iks-mbenefit {
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
	padding: 30px 22px;
}
.iks-mbenefits--stacked .iks-mbenefit__icon { width: 56px; height: 56px; }
.iks-mbenefits--stacked .iks-mbenefit__icon-orb,
.iks-mbenefits--stacked .iks-mbenefit__icon-illust { width: 40px; height: 40px; }
.iks-mbenefits--stacked .iks-mbenefit__icon-orb i,
.iks-mbenefits--stacked .iks-mbenefit__icon-orb svg { width: 18px; height: 18px; font-size: 16px; }
.iks-mbenefits--stacked .iks-mbenefit__copy h3 { font-size: 16px; line-height: 1.35; }
.iks-mbenefits--stacked .iks-mbenefit__copy p  { font-size: 13.5px; line-height: 1.55; }
.iks-mbenefits__wrap--framed.iks-mbenefits--stacked .iks-mbenefit {
	background: transparent;
	padding: 24px 14px;
}

.iks-mbenefit {
	display: flex; gap: 22px;
	padding: 26px 26px;
	background: #3a1f4f;
	border-radius: 14px;
	color: #fff;
}
.iks-mbenefit__icon {
	position: relative;
	flex-shrink: 0;
	width: 92px;
	height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
}

/* Radiating rings — pulse outward behind the icon. */
.iks-mbenefit__icon::before,
.iks-mbenefit__icon::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 64px; height: 64px;
	margin: -32px 0 0 -32px;
	border-radius: 50%;
	border: 1px solid rgba(174, 0, 131, 0.45);
	animation: iks-radiate 3.2s cubic-bezier(0.25, 0.1, 0.25, 1) infinite;
	pointer-events: none;
	z-index: -1;
}
.iks-mbenefit__icon::after { animation-delay: 1.6s; }

/* Soft halo glow */
.iks-mbenefit__icon-orb,
.iks-mbenefit__icon-illust {
	position: relative;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.iks-mbenefit__icon-orb::before {
	content: "";
	position: absolute;
	inset: -10px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(212, 78, 176, 0.45) 0%, rgba(91, 44, 138, 0.15) 55%, transparent 75%);
	filter: blur(8px);
	z-index: -1;
}

/* Gradient bulb that hosts the FontAwesome icon */
.iks-mbenefit__icon-orb {
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, #d44eb0 0%, #8125a5 55%, #5b2c8a 100%);
	box-shadow:
		0 10px 28px -8px rgba(174, 0, 131, 0.55),
		inset 0 -6px 14px rgba(0, 0, 0, 0.22),
		inset 0 4px 10px rgba(255, 255, 255, 0.18);
	color: #fff;
}
.iks-mbenefit__icon-orb i,
.iks-mbenefit__icon-orb svg {
	width: 26px; height: 26px;
	font-size: 24px;
	color: #fff;
	fill: #fff;
}

/* Bare illustration upload — no orb, just the radiating rings behind. */
.iks-mbenefit__icon-illust img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

@keyframes iks-radiate {
	0%   { transform: scale(0.85); opacity: 0.65; }
	100% { transform: scale(1.55); opacity: 0;    }
}

@media (prefers-reduced-motion: reduce) {
	.iks-mbenefit__icon::before,
	.iks-mbenefit__icon::after {
		animation: none;
		opacity: 0.35;
		transform: scale(1.2);
	}
}
.iks-mbenefit__copy { flex: 1; min-width: 0; }
.iks-mbenefit__copy h3 { margin: 0 0 8px; font-size: 19px; font-weight: 700; color: #fff; line-height: 1.3; }
.iks-mbenefit__copy p  { margin: 0; font-size: 15px; line-height: 1.6; color: #fff; opacity: 0.85; }

@media (max-width: 1100px) {
	.iks-mbenefits__grid.iks-cols-4 { grid-template-columns: repeat(2, 1fr); }
	.iks-mbenefits__grid.iks-cols-5 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
	.iks-mbenefits { padding: 48px 18px 64px; }
	.iks-mbenefits__grid.iks-cols-2,
	.iks-mbenefits__grid.iks-cols-3,
	.iks-mbenefits__grid.iks-cols-4,
	.iks-mbenefits__grid.iks-cols-5 { grid-template-columns: 1fr; }
	.iks-mbenefits__wrap--framed { padding: 16px; }
	.iks-mbenefit { padding: 22px 20px; gap: 16px; }
	.iks-mbenefit__icon { width: 56px; height: 56px; }
	.iks-mbenefit__icon i, .iks-mbenefit__icon svg { width: 42px; height: 42px; font-size: 42px; }
}