/**
 * Both blocks borrow the site's own colours rather than inventing any: the
 * brand purple #8224e3, the hero gradient used on the profile CTA, and the dark
 * header purple #271c3b.
 */

/* ---- VIP First Look, sign-up page ---- */

.meetem-promo-vip {
	max-width: 760px;
	margin: 0 auto 32px;
	padding: 28px 32px;
	/* Howard asked for everything in this box centred. */
	text-align: center;
	border-radius: 16px;
	background: linear-gradient(331deg, #66288a 0%, #ae1abb 100%);
	color: #fff;
	box-shadow: 0 14px 34px rgba(102, 40, 138, 0.28);
}


.meetem-promo-vip__title {
	margin: 0 0 18px;
	font-size: 30px;
	line-height: 1.15;
	color: #fff;
	/* Howard underlined this line in the wording he sent. */
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

.meetem-promo-vip__points {
	/* Numbered, because the wording Howard sent is numbered 1-4. "Inside" so the
	   number travels with the centred line rather than hanging off an invisible
	   left edge. */
	margin: 0 0 18px;
	padding: 0;
	list-style: decimal inside;
	font-size: 17px;
	line-height: 1.55;
}

.meetem-promo-vip__points li {
	margin-bottom: 6px;
}

.meetem-promo-vip__note {
	/* Under the list, where Howard's own wording puts it, so the rule sits above
	   it as a divider. */
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.25);
	font-size: 15px;
	line-height: 1.5;
	color: #fff;
}

.meetem-promo-vip__term {
	/* He underlines the name of the offer and sets it on its own line, then the
	   explanation follows in plain weight. */
	display: block;
	margin-bottom: 2px;
	font-style: italic;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* ---- social row, homepage ---- */

/*
 * Howard drew these icons ON the For You / Friends row, to the right of the
 * tabs — not in a strip of their own above them. The row is printed by the
 * Elementor hook just before the widget's own markup, so on a wide screen it is
 * pulled back onto the tab line with a negative bottom margin and shrunk to its
 * own content, which leaves the tabs themselves clickable underneath. Stacked
 * and centred on a phone, where the tabs already take the full width.
 */

.meetem-promo-social {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 12px 0 16px;
	/* A phone shows this row above the tabs, full width, so it needs the site's
	   own 16px gutter; the desktop rule below drops the padding again. */
	padding: 0 16px;
	flex-wrap: wrap;
}

.meetem-promo-social__label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: rgba(39, 28, 59, 0.7);
}

.meetem-promo-social__links {
	display: flex;
	align-items: center;
	gap: 10px;
}

.meetem-promo-social__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #271c3b;
	transition: background-color 0.15s ease, transform 0.15s ease;
}

.meetem-promo-social__links a:hover,
.meetem-promo-social__links a:focus-visible {
	background: #8224e3;
	transform: translateY(-2px);
}

.meetem-promo-social__links svg {
	width: 17px;
	height: 17px;
	fill: #fff;
}

@media screen and (min-width: 768px) {
	/*
	 * Out of flow, not pulled up with a negative margin: the first attempt used
	 * one and dragged the tabs up into the dark bar above, which is the spacing
	 * Zain spotted. Absolute keeps the vendor's own tab row exactly where it was
	 * and drops the icons onto that line, right edge flush with the last card.
	 * 16px of padding on the widget gives tabs and icons air below the bar; 27px
	 * is 16 + half the difference between the 58px tab row and the 36px icons,
	 * which centres them on the tab text (measured, not guessed).
	 */
	.elementor-widget:has( > .meetem-promo-social ) {
		position: relative;
		padding-top: 16px;
	}

	.elementor-widget:has( > .meetem-promo-social ) .meetem-promo-social {
		position: absolute;
		top: 27px;
		right: 0;
		width: auto;
		margin: 0;
		padding: 0;
		z-index: 2;
	}

	/* Without :has() support the row stays in flow — right-aligned, with its own
	   space, rather than on the tab line. */
	.meetem-promo-social {
		width: fit-content;
		margin: 0 0 14px auto;
		justify-content: flex-end;
	}
}