/**
 * CapSkip Telegram, self-contained styles for the channel invitation card.
 *
 * Built on the same dark surface as CapSkip Promo so the two read as siblings,
 * but accented in Telegram blue (#2AABEE) rather than the promo's green. That
 * difference is deliberate: nobody should mistake a community invitation for a
 * discount, and the colour does that work before a word is read.
 *
 * Every rule is scoped under .csk-tg so nothing here can leak into a theme, and
 * the type and colour values are literal rather than inherited so the card looks
 * the same whatever the host page does.
 */

.csk-tg {
	--csk-tg-blue: #2aabee;
	--csk-tg-blue-2: #229ed9;
	--csk-tg-blue-3: #1b8ec2;
	--csk-tg-card: #0c1020;
	--csk-tg-card-2: #151a33;
	--csk-tg-line: rgba(255, 255, 255, .10);
	--csk-tg-text: #f2f4fb;
	--csk-tg-muted: rgba(226, 230, 245, .66);

	position: fixed;
	z-index: 999985;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

.csk-tg[hidden] {
	display: none !important;
}

.csk-tg *,
.csk-tg *::before,
.csk-tg *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------ theme-proofing ----
 * The card floats over whatever theme the site runs, and many themes force
 * their own button, heading, list, link and svg styling with high-specificity
 * selectors or !important, which is what blows the type up and knocks the icons
 * out of place. These resets neutralise the properties themes most often touch.
 * The card's own sizes, colours and spacing are set below and marked !important
 * too, so they win in turn. */
.csk-tg,
.csk-tg * {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	letter-spacing: normal;
	text-shadow: none !important;
	float: none !important;
}

.csk-tg button {
	-webkit-appearance: none !important;
	appearance: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	text-transform: none !important;
	text-decoration: none !important;
	box-shadow: none;
	outline-offset: 2px;
}

.csk-tg a {
	text-decoration: none !important;
	box-shadow: none;
}

.csk-tg h2,
.csk-tg p,
.csk-tg li {
	text-transform: none !important;
	text-align: left !important;
	max-width: none !important;
	background: none !important;
}

.csk-tg h2::before,
.csk-tg h2::after,
.csk-tg p::before,
.csk-tg p::after,
.csk-tg li::before,
.csk-tg li::after {
	content: none !important;
}

.csk-tg ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Pin every icon to its own size so a global `svg { width: 100% }` cannot
   stretch it to the width of its parent and shove it out of view. */
.csk-tg svg {
	display: block !important;
	max-width: none !important;
	max-height: none !important;
	vertical-align: middle;
}

.csk-tg__close svg {
	width: 16px !important;
	height: 16px !important;
	fill: none;
}

.csk-tg__icon svg {
	width: 15px !important;
	height: 15px !important;
	fill: none;
}

.csk-tg__plane {
	width: 17px !important;
	height: 17px !important;
	fill: currentColor !important;
	stroke: none !important;
}

.csk-tg__arrow {
	width: 17px !important;
	height: 17px !important;
	fill: none !important;
}

/* ------------------------------------------------------------ layout ------
 * The corner container never swallows clicks, only the card does, so the rest
 * of the page stays usable while the invitation is up. */

.csk-tg--corner {
	right: 22px;
	bottom: 22px;
	width: 366px;
	max-width: calc(100vw - 32px);
	pointer-events: none;
}

.csk-tg--center {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	pointer-events: none;
}

/* The scrim and the card only take clicks while the card is actually up. An
   invisible overlay left catching clicks over the page would be far worse than
   no invitation at all. */
.csk-tg__scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 9, 20, .58);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
	opacity: 0;
	pointer-events: none;
	transition: opacity .32s ease;
	border: 0;
}

.csk-tg.is-visible .csk-tg__scrim {
	opacity: 1;
	pointer-events: auto;
}

/* -------------------------------------------------------------- card ------ */

.csk-tg__card {
	position: relative;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	margin: 0 !important;
	padding: 22px 22px 18px !important;
	border-radius: 20px;
	border: 1px solid var(--csk-tg-line);
	background:
		radial-gradient(120% 90% at 100% 0%, rgba(42, 171, 238, .20) 0%, rgba(42, 171, 238, 0) 55%),
		linear-gradient(168deg, var(--csk-tg-card-2) 0%, var(--csk-tg-card) 62%);
	box-shadow:
		0 2px 6px rgba(4, 8, 20, .28),
		0 32px 70px -28px rgba(4, 8, 20, .85),
		inset 0 1px 0 rgba(255, 255, 255, .07);
	color: var(--csk-tg-text);
	text-align: left;

	/* Entrance and exit. The overshoot curve makes the card settle rather than
	   simply appear; the exit is faster and flatter so dismissing feels final. */
	opacity: 0;
	transform: translate3d(0, 26px, 0) scale(.94);
	transition: opacity .28s ease, transform .52s cubic-bezier(.16, 1, .3, 1);
	will-change: transform, opacity;
}

.csk-tg--center .csk-tg__card {
	width: 100%;
	max-width: 430px;
	padding: 26px 26px 20px !important;
}

.csk-tg.is-visible .csk-tg__card,
.csk-tg.is-leaving .csk-tg__card {
	visibility: visible;
}

.csk-tg.is-visible .csk-tg__card {
	opacity: 1;
	pointer-events: auto;
	transform: translate3d(0, 0, 0) scale(1);
}

.csk-tg.is-leaving .csk-tg__card {
	opacity: 0;
	transform: translate3d(0, 12px, 0) scale(.97);
	transition: opacity .2s ease, transform .26s cubic-bezier(.4, 0, .8, .3);
}

.csk-tg.is-leaving .csk-tg__scrim {
	opacity: 0;
}

.csk-tg__card:focus {
	outline: none;
}

/* Soft blue bloom behind the top-left of the card, drifting slowly. */
.csk-tg__aura {
	position: absolute;
	top: -70px;
	left: -60px;
	width: 210px;
	height: 210px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(42, 171, 238, .28) 0%, rgba(42, 171, 238, 0) 68%);
	pointer-events: none;
	animation: csk-tg-drift 9s ease-in-out infinite alternate;
}

@keyframes csk-tg-drift {
	from { transform: translate3d(0, 0, 0) scale(1); }
	to   { transform: translate3d(18px, 14px, 0) scale(1.12); }
}

.csk-tg__close {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px !important;
	height: 30px !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 1px solid var(--csk-tg-line) !important;
	border-radius: 9px;
	/* A faint chip by default, not only on hover, so the icon is always an
	   obvious control against the card whatever the theme does to buttons. */
	background: rgba(255, 255, 255, .06) !important;
	color: rgba(226, 230, 245, .72) !important;
	line-height: 1 !important;
	cursor: pointer;
	transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}

.csk-tg__close:hover,
.csk-tg__close:focus-visible {
	color: var(--csk-tg-text) !important;
	background: rgba(255, 255, 255, .14) !important;
	border-color: rgba(255, 255, 255, .28) !important;
	transform: rotate(90deg);
}

.csk-tg__close:focus-visible {
	outline: 2px solid var(--csk-tg-blue);
	outline-offset: 2px;
}

/* ------------------------------------------------- auto-dismiss bar ------
 * A thin bar along the top edge that empties over the auto-dismiss window, so
 * the card's remaining time is visible rather than a surprise. The card clips
 * it to its own rounded corners, since both live inside overflow: hidden.
 *
 * Deliberately blue rather than the promotion's warm orange. The offer card's
 * bar is a deadline and is supposed to feel like one; this one is a courtesy,
 * telling somebody the card will see itself out. Colouring it like an alarm
 * would put urgency back into a card built not to have any. */

.csk-tg__dismiss {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	margin: 0 !important;
	padding: 0 !important;
	background: rgba(255, 255, 255, .08);
	overflow: hidden;
	z-index: 2;
}

.csk-tg__dismiss[hidden] {
	display: none !important;
}

.csk-tg__dismiss-bar {
	display: block;
	width: 100%;
	height: 100%;
	transform-origin: left center;
	background: linear-gradient(90deg, var(--csk-tg-blue) 0%, var(--csk-tg-blue-3) 100%);
	/* The scaleX transition is driven from JS, where the duration is the
	   auto-dismiss window. */
	will-change: transform;
}

/* ----------------------------------------------------------- content ------ */

.csk-tg__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 10px !important;
	padding: 0 !important;
	font-size: 11px !important;
	line-height: 1.3 !important;
	font-weight: 700 !important;
	letter-spacing: .13em !important;
	text-transform: uppercase !important;
	color: var(--csk-tg-blue) !important;
}

.csk-tg__pulse {
	position: relative;
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--csk-tg-blue);
	flex: none;
}

.csk-tg__pulse::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--csk-tg-blue);
	animation: csk-tg-ping 1.9s cubic-bezier(0, 0, .2, 1) infinite;
}

@keyframes csk-tg-ping {
	0%        { transform: scale(1);   opacity: .65; }
	80%, 100% { transform: scale(2.8); opacity: 0; }
}

.csk-tg__title {
	margin: 0 0 8px !important;
	padding: 0 !important;
	font-size: 22px !important;
	line-height: 1.18 !important;
	font-weight: 800 !important;
	letter-spacing: -.02em !important;
	color: var(--csk-tg-text) !important;
}

.csk-tg__desc {
	margin: 0 0 14px !important;
	padding: 0 !important;
	font-size: 13.5px !important;
	line-height: 1.55 !important;
	font-weight: 400 !important;
	color: var(--csk-tg-muted) !important;
}

/* ------------------------------------------------------ benefit list ------
 * The list is the part that earns the popup: it turns "join our channel" from
 * a request into an offer by saying what actually arrives. */

/* Written as `ul.csk-tg__list` on purpose. The theme-proofing `.csk-tg ul`
   reset above is more specific than a lone class, and both carry !important, so
   a plain `.csk-tg__list { margin: ... }` loses to it and silently gets no
   margin at all. Qualifying by tag puts this rule back on top.

   The gap down to the button lives on .csk-tg__actions rather than here, so the
   spacing is identical whether or not the benefit list is present. */
.csk-tg ul.csk-tg__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 !important;
	padding: 0 !important;
}

.csk-tg__item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
	color: var(--csk-tg-text) !important;
}

.csk-tg__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	flex: none;
	margin-top: -1px;
	border-radius: 8px;
	border: 1px solid rgba(42, 171, 238, .26);
	background: rgba(42, 171, 238, .12);
	color: var(--csk-tg-blue);
}

.csk-tg__item-text {
	padding-top: 3px;
}

/* --------------------------------------------------------- actions -------- */

.csk-tg__actions {
	display: flex;
	align-items: center;
	gap: 12px;
	/* The single source of truth for the gap above the button. Adjacent sibling
	   margins collapse, so this holds whether the element above is the benefit
	   list or the sub-headline: the result is 18px either way, never the sum. */
	margin-top: 18px !important;
}

.csk-tg__cta {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 9px;
	flex: 1 1 auto;
	min-width: 0;
	margin: 0 !important;
	padding: 12px 16px !important;
	border: 0 !important;
	border-radius: 13px;
	background: linear-gradient(135deg, var(--csk-tg-blue) 0%, var(--csk-tg-blue-2) 55%, var(--csk-tg-blue-3) 100%) !important;
	color: #04121c !important;
	font-size: 14.5px !important;
	line-height: 1.2 !important;
	font-weight: 800 !important;
	letter-spacing: -.01em !important;
	cursor: pointer;
	box-shadow: 0 10px 24px -10px rgba(34, 158, 217, .75);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.csk-tg__cta:hover,
.csk-tg__cta:focus-visible {
	color: #04121c !important;
	transform: translateY(-1px);
	filter: brightness(1.06);
	box-shadow: 0 14px 30px -10px rgba(34, 158, 217, .85);
}

.csk-tg__cta:active {
	transform: translateY(0);
}

.csk-tg__cta:focus-visible {
	outline: 2px solid var(--csk-tg-text);
	outline-offset: 2px;
}

/* The arrow leans forward on hover, which is the whole animation: enough to
   say the button goes somewhere, not enough to be a distraction. */
.csk-tg__cta .csk-tg__arrow {
	transition: transform .2s ease;
}

.csk-tg__cta:hover .csk-tg__arrow {
	transform: translateX(3px);
}

.csk-tg__later {
	display: inline-block;
	margin: 12px 0 0 !important;
	padding: 4px 0 !important;
	border: 0 !important;
	background: none !important;
	color: var(--csk-tg-muted) !important;
	font-size: 12.5px !important;
	line-height: 1.4 !important;
	font-weight: 500 !important;
	cursor: pointer;
	transition: color .18s ease;
}

.csk-tg__later:hover,
.csk-tg__later:focus-visible {
	color: var(--csk-tg-text) !important;
	text-decoration: underline !important;
}

.csk-tg__later:focus-visible {
	outline: 2px solid var(--csk-tg-blue);
	outline-offset: 3px;
}

.csk-tg__fine {
	margin: 10px 0 0 !important;
	padding: 0 !important;
	font-size: 11.5px !important;
	line-height: 1.45 !important;
	color: rgba(226, 230, 245, .48) !important;
}

/* Screen-reader-only status line for copy and close announcements. */
.csk-tg__live {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------- phones -------- */

@media (max-width: 560px) {
	/* The corner card becomes a bottom sheet: full width, flat bottom corners,
	   sliding up from the edge of the screen the way a native sheet does. */
	.csk-tg--corner {
		right: 0;
		left: 0;
		bottom: 0;
		width: auto;
		max-width: none;
	}

	.csk-tg--corner .csk-tg__card {
		border-radius: 20px 20px 0 0;
		border-bottom: 0;
		padding: 20px 18px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
		transform: translate3d(0, 100%, 0) scale(1);
	}

	.csk-tg--corner.is-visible .csk-tg__card {
		transform: translate3d(0, 0, 0) scale(1);
	}

	.csk-tg--corner.is-leaving .csk-tg__card {
		transform: translate3d(0, 100%, 0) scale(1);
	}

	.csk-tg__title {
		font-size: 20px !important;
	}

	.csk-tg__later {
		width: 100%;
		text-align: center !important;
	}
}

/* -------------------------------------------------- reduced motion -------- */

@media (prefers-reduced-motion: reduce) {
	.csk-tg__card,
	.csk-tg__scrim,
	.csk-tg__cta,
	.csk-tg__close,
	.csk-tg__arrow {
		transition-duration: .01ms !important;
	}

	.csk-tg__card {
		transform: none !important;
	}

	.csk-tg--corner .csk-tg__card,
	.csk-tg--corner.is-visible .csk-tg__card,
	.csk-tg--corner.is-leaving .csk-tg__card {
		transform: none !important;
	}

	.csk-tg__aura,
	.csk-tg__pulse::after {
		animation: none !important;
	}

	/* The bar is nothing but a continuously moving element, so it is dropped
	   rather than frozen. Freezing its transition, which is the obvious way to
	   respect the setting, would leave a permanently full bar sitting at the top
	   of the card looking like something that had broken. The card still sees
	   itself out on time. */
	.csk-tg__dismiss {
		display: none !important;
	}

	.csk-tg__cta:hover {
		transform: none;
	}

	.csk-tg__cta:hover .csk-tg__arrow {
		transform: none;
	}
}