/* Live JOI countdown — brand palette matches the video platform:
   pink #F674FF / #FFC2FD, purple #A946B4, ink #27103A */

.jg-ljc { font-family: inherit; }

/* ---- slim announcement bar (homepage, above banner) ---- */
.jg-ljc-bar {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 10px 18px;
	padding: 10px 16px;
	background: linear-gradient(90deg, #27103A 0%, #4a1d63 55%, #A946B4 100%);
	color: #fff;
	font-size: 15px;
	line-height: 1.3;
}
/* solid white, always readable — the old opacity pulse read as "transparent
   text" (user feedback); the red dot carries the pulse instead */
.jg-ljc-bar .jg-ljc-live {
	font-weight: 800;
	letter-spacing: .06em;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}
@keyframes jg-ljc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } }

/* the homepage drops the bar in a boxed Elementor column — stretch the dark
   band across the whole viewport there (margins-only breakout) */
body.home .jg-ljc-bar {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	border-radius: 0;
}

/* while a show is actually running */
.jg-ljc-bar.is-live { background: linear-gradient(90deg, #4a0d18 0%, #8a1626 55%, #c0392b 100%); }
.jg-ljc.is-live .jg-ljc-live { animation: jg-ljc-pulse 1.2s infinite; }
.jg-ljc-full.is-live .jg-ljc-timer-big {
	background: linear-gradient(135deg, #c0392b, #ff7b6b);
	-webkit-background-clip: text;
	background-clip: text;
}
.jg-ljc-bar .jg-ljc-timer { font-variant-numeric: tabular-nums; color: #fff; }
.jg-ljc-bar .jg-ljc-date { opacity: .85; }
.jg-ljc-bar .jg-ljc-join {
	background: linear-gradient(135deg, #F674FF, #FFC2FD);
	color: #27103A !important;
	font-weight: 800;
	padding: 6px 18px;
	border-radius: 999px;
	text-decoration: none;
	transition: transform .15s, box-shadow .15s;
	box-shadow: 0 2px 8px rgba(246, 116, 255, .45);
}
.jg-ljc-bar .jg-ljc-join:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(246, 116, 255, .65); }

/* ---- full card (/livejoi) ---- */
.jg-ljc-full {
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	background: #fff;
	border: 1px solid #f3d9f7;
	border-radius: 18px;
	padding: 28px 24px;
	box-shadow: 0 10px 30px rgba(169, 70, 180, .12);
	color: #27103A;
}
.jg-ljc-full .jg-ljc-head {
	font-weight: 800;
	letter-spacing: .14em;
	font-size: 14px;
	color: #A946B4;
}
.jg-ljc-full .jg-ljc-timer-big {
	font-size: clamp(34px, 7vw, 56px);
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	margin: 10px 0 6px;
	background: linear-gradient(135deg, #A946B4, #F674FF);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}
.jg-ljc-full .jg-ljc-next { font-size: 17px; margin-bottom: 6px; }
.jg-ljc-full .jg-ljc-char { font-size: 14px; letter-spacing: .04em; color: #6b5580; }
.jg-ljc-full .jg-ljc-char strong { color: #27103A; }

@media (max-width: 640px) {
	.jg-ljc-bar { font-size: 13px; gap: 6px 12px; padding: 8px 10px; }
	.jg-ljc-bar .jg-ljc-date { flex-basis: 100%; text-align: center; order: 3; }
}

/* the go-live button: appears on /livejoi the moment the countdown hits 0 */
.jg-ljc-full .jg-ljc-golive {
	display: inline-block;
	margin-top: 14px;
	padding: 12px 26px;
	border-radius: 999px;
	font-size: 17px;
	font-weight: 800;
	text-decoration: none;
	color: #fff;
	background: linear-gradient(135deg, #A946B4, #F674FF);
	box-shadow: 0 6px 18px rgba(169, 70, 180, .45);
	animation: jg-ljc-pulse 1.6s ease-in-out infinite;
}
.jg-ljc-full .jg-ljc-golive[hidden] { display: none; }
@keyframes jg-ljc-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

/* live state: the whole LIVE NOW is clickable, the button is unmissable */
.jg-ljc.is-live .jg-ljc-timer-big { cursor: pointer; }
.jg-ljc-full .jg-ljc-golive {
	font-size: 22px;
	padding: 16px 40px;
	margin-top: 18px;
}