/* ==========================================================================
   360 Comedy Live Stream
   Colours / sizes are custom properties so Elementor style controls can set them.
   Selectors are scoped as `.c360-live element.class` so theme and Elementor Kit
   styles for button, a, input and h2 don't override the widget.
   ========================================================================== */

.c360-live {
	--c360-bg: #061729;
	--c360-head: #15304c;
	--c360-bubble: #15304c;
	--c360-line: rgba(206, 219, 234, 0.62);
	--c360-ink: #ffffff;
	--c360-muted: #a7b2bf;
	--c360-badge: #ff3b0e;
	--c360-overlay: rgba(6, 23, 41, 0.97);
	--c360-vip: #f6be29;
	--c360-vip-ink: #0a1422;
	--c360-general: #22467a;
	--c360-general-ink: #ffffff;
	--c360-strike: #e5351c;
	--c360-chat-width: 420px;
	--c360-chat-stacked-height: 440px;
	--c360-ratio: 7 / 5;
	--c360-fit: cover;
	--c360-pad: 28px;
	--c360-radius: 20px;
	--c360-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

	container-type: inline-size;
	position: relative;
	display: grid;
	isolation: isolate;
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	background: var(--c360-bg);
	color: var(--c360-ink);
	border-radius: var(--c360-radius);
	font-family: var(--c360-font);
	font-size: 16px;
	line-height: 1.4;
	-webkit-font-smoothing: antialiased;
}

/* Elementor sizing.
   This widget has no natural width of its own (its content sizes itself to the
   space it's given), so like Elementor's Video and Accordion widgets it must
   take its width from the container. Without this, widgets inside boxed
   containers (.e-con-inner) or row-direction containers collapse to 0 px on
   the live site, even though the editor shows them. Custom widths set in
   Advanced → Layout still win because Elementor's own rules are more specific. */
.e-con-inner > .elementor-widget-c360_live_stream,
.e-con > .elementor-widget-c360_live_stream {
	width: var(--container-widget-width, 100%);
	--flex-grow: var(--container-widget-flex-grow, 1);
	flex-grow: var(--container-widget-flex-grow, 1);
	min-width: min(100%, 300px);
}
.elementor-widget-c360_live_stream > .elementor-widget-container {
	width: 100%;
}

.c360-live *,
.c360-live *::before,
.c360-live *::after {
	box-sizing: border-box;
}

/* ---- Theme resets (kept at specificity 0,1,1 / 0,2,1; components below go higher) ---- */
.c360-live button,
.c360-live button:hover,
.c360-live button:focus {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	color: inherit;
	font: inherit;
	text-transform: none;
	letter-spacing: normal;
	min-height: 0;
	width: auto;
}
.c360-live p,
.c360-live h2,
.c360-live h3,
.c360-live ol {
	margin: 0;
	padding: 0;
}

.c360-live .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Layout ----
   The grid and the pass overlay share one cell, so the widget grows to fit
   whichever is taller instead of clipping the overlay. */
.c360-live__grid,
.c360-paywall {
	grid-area: 1 / 1;
	min-width: 0;
}
.c360-live__grid {
	align-self: start;
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--c360-chat-width);
	gap: 20px;
	padding: var(--c360-pad);
}
.c360-live--no-chat .c360-live__grid {
	grid-template-columns: minmax(0, 1fr);
}

/* ---- Stage / player ---- */
.c360-live__stage {
	position: relative;
	aspect-ratio: var(--c360-ratio);
	overflow: hidden;
	border-radius: 14px;
	background: #000;
}
.c360-live__player {
	position: absolute;
	inset: 0;
	background: #000 center / cover no-repeat;
}
.c360-live__player video,
.c360-live__player iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #000;
	object-fit: var(--c360-fit);
}
.c360-live__empty {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(6, 23, 41, 0.55);
	text-align: center;
	font-size: clamp(15px, 1.8cqi, 20px);
	font-weight: 500;
}

.c360-live__badges {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	pointer-events: none;
}
.c360-badge {
	display: inline-flex;
	gap: 0.3em;
	align-items: center;
	padding: 0.32em 0.55em;
	border-radius: 6px;
	background: var(--c360-badge);
	color: #fff;
	font-size: clamp(13px, 1.5cqi, 19px);
	font-weight: 500;
	line-height: 1.2;
}
.c360-badge--muted {
	background: rgba(6, 23, 41, 0.78);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.c360-live button.c360-live__unmute {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 3;
	display: inline-flex;
	gap: 8px;
	align-items: center;
	padding: 9px 14px;
	border-radius: 999px;
	background: rgba(6, 23, 41, 0.85);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}
.c360-live button.c360-live__unmute[hidden] {
	display: none;
}

.c360-live__guestbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 16px;
	align-items: center;
	justify-content: space-between;
	padding: 36px 18px 16px;
	background: linear-gradient(to top, rgba(6, 23, 41, 0.95) 40%, rgba(6, 23, 41, 0));
	font-size: 15px;
	font-weight: 500;
}
.c360-live__guestbar-actions {
	display: flex;
	gap: 8px;
}
.c360-live a.c360-link-btn {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 6px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}
.c360-live a.c360-link-btn--solid {
	border-color: var(--c360-vip);
	background: var(--c360-vip);
	color: var(--c360-vip-ink);
}

/* ---- Chat ---- */
.c360-chat {
	position: relative;
	min-height: 0;
}
.c360-chat__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--c360-line);
	border-radius: 18px;
	background: var(--c360-bg);
}

.c360-chat__head {
	display: flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	padding: 13px 14px 12px 22px;
	border-bottom: 1px solid var(--c360-line);
	background: var(--c360-head);
}
.c360-live h3.c360-chat__title {
	color: var(--c360-ink);
	font-family: var(--c360-font);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
}
.c360-live p.c360-chat__count {
	margin-top: 2px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 15px;
}

.c360-live button.c360-icon-btn {
	display: inline-grid;
	flex: none;
	place-items: center;
	padding: 4px;
	border-radius: 8px;
	color: var(--c360-ink);
	cursor: pointer;
}
.c360-live button.c360-icon-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	color: var(--c360-ink);
}
.c360-live button.c360-icon-btn[hidden] {
	display: none;
}
.c360-live button:focus:not(:focus-visible),
.c360-live a:focus:not(:focus-visible) {
	outline: none;
}
.c360-live button:focus-visible,
.c360-live a:focus-visible {
	outline: 2px solid var(--c360-vip);
	outline-offset: 2px;
}
.c360-ico-collapse,
.is-expanded .c360-ico-expand {
	display: none;
}
.is-expanded .c360-ico-collapse {
	display: block;
}

.c360-live ol.c360-chat__list {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 14px;
	min-height: 0;
	margin: 0;
	padding: 20px 14px 20px 12px;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
	scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
	scrollbar-width: thin;
}

.c360-msg {
	display: grid;
	grid-template-columns: 46px minmax(0, 1fr);
	column-gap: 8px;
	margin: 0;
}
.c360-msg.is-cont {
	margin-top: -8px;
}
.c360-msg.is-cont .c360-msg__avatar,
.c360-msg.is-cont .c360-msg__name {
	display: none;
}
.c360-msg__avatar {
	position: relative;
	grid-column: 1;
	width: 46px;
	height: 46px;
	overflow: hidden;
	border-radius: 50%;
	background: #fff;
	color: var(--c360-bg);
	font-size: 18px;
	font-weight: 700;
	line-height: 46px;
	text-align: center;
	text-transform: uppercase;
}
.c360-msg__avatar img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.c360-msg__body {
	grid-column: 2;
	min-width: 0;
}
.c360-msg__name {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 6px 0 7px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
}
.c360-msg__bubble {
	display: inline-block;
	max-width: 100%;
	padding: 10px 16px;
	border-radius: 20px;
	background: var(--c360-bubble);
	font-size: 16px;
	line-height: 1.35;
	overflow-wrap: anywhere;
	white-space: pre-wrap;
}
.c360-msg.is-mine .c360-msg__bubble {
	box-shadow: inset 0 0 0 1px rgba(246, 190, 41, 0.35);
}
.c360-live button.c360-msg__remove {
	padding: 2px 6px;
	border-radius: 4px;
	color: var(--c360-muted);
	font-size: 12px;
	font-weight: 500;
	cursor: pointer;
	opacity: 0;
}
.c360-live .c360-msg:hover button.c360-msg__remove,
.c360-live button.c360-msg__remove:focus-visible {
	opacity: 1;
}
.c360-live button.c360-msg__remove:hover {
	color: #ffb4a6;
}
.c360-chat__empty {
	margin: auto;
	max-width: 26ch;
	color: var(--c360-muted);
	text-align: center;
	font-size: 15px;
}

.c360-chat__form {
	display: flex;
	gap: 6px;
	align-items: center;
	min-height: 50px;
	margin: 0;
	padding: 4px 10px 4px 22px;
	border-top: 1px solid var(--c360-line);
	background: var(--c360-head);
}
.c360-chat__form:focus-within {
	box-shadow: inset 0 2px 0 var(--c360-vip);
}
.c360-live input.c360-chat__input,
.c360-live input.c360-chat__input:focus {
	flex: 1;
	min-width: 0;
	height: auto;
	margin: 0;
	padding: 8px 0;
	border: 0;
	border-radius: 0;
	outline: none;
	background: transparent;
	box-shadow: none;
	color: var(--c360-ink);
	font-family: var(--c360-font);
	font-size: 19px;
}
.c360-live input.c360-chat__input::placeholder {
	color: rgba(255, 255, 255, 0.9);
	opacity: 1;
}
.c360-live input.c360-chat__input:disabled::placeholder {
	color: var(--c360-muted);
}
.c360-live p.c360-chat__error {
	padding: 0 22px 8px;
	background: var(--c360-head);
	color: #ffb4a6;
	font-size: 13px;
}
.c360-live p.c360-chat__error[hidden] {
	display: none;
}
.c360-live p.c360-chat__prompt {
	padding: 14px 22px;
	border-top: 1px solid var(--c360-line);
	background: var(--c360-head);
	font-size: 15px;
}
.c360-live p.c360-chat__prompt a {
	color: var(--c360-vip);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---- Expanded (full screen) ---- */
.c360-live.is-expanded {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow-y: auto;
	border-radius: 0;
}
.c360-live.is-expanded .c360-live__grid {
	height: 100%;
}
.c360-live.is-expanded .c360-live__stage {
	aspect-ratio: auto;
	height: 100%;
}
body.c360-no-scroll {
	overflow: hidden;
}

/* ---- Pass overlay ---- */
.c360-paywall {
	position: relative;
	z-index: 10;
	display: flex;
	background: var(--c360-overlay);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	animation: c360-fade 0.35s ease-out;
}
.c360-live .c360-paywall[hidden] {
	display: none;
}
.c360-paywall:focus {
	outline: none;
}
.c360-paywall__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: min(100%, 1120px);
	margin: auto;
	padding: clamp(24px, 4cqi, 44px) clamp(18px, 5cqi, 64px);
	text-align: center;
}
.c360-live h2.c360-paywall__title {
	margin: 0 0 0.3em;
	color: var(--c360-ink);
	font-family: var(--c360-font);
	font-size: clamp(28px, 5cqi, 64px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -0.01em;
	text-transform: none;
}
.c360-live p.c360-paywall__text {
	max-width: 1000px;
	margin-bottom: clamp(18px, 2.6cqi, 32px);
	color: var(--c360-muted);
	font-size: clamp(14px, 1.5cqi, 19px);
	line-height: 1.55;
}
.c360-live a.c360-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(56px, 8cqi, 102px);
	padding: 0.35em 0.8em;
	border-radius: 6px;
	font-family: var(--c360-font);
	font-size: clamp(18px, 3cqi, 38px);
	font-weight: 700;
	line-height: 1.1;
	text-decoration: none;
	transition: filter 0.12s ease, transform 0.12s ease;
}
.c360-live a.c360-btn:hover {
	filter: brightness(1.07);
	text-decoration: none;
}
.c360-live a.c360-btn:active {
	transform: translateY(1px);
}
.c360-live a.c360-btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.c360-live a.c360-btn--vip,
.c360-live a.c360-btn--vip:hover {
	background: var(--c360-vip);
	color: var(--c360-vip-ink);
}
.c360-live a.c360-btn--general,
.c360-live a.c360-btn--general:hover {
	background: var(--c360-general);
	color: var(--c360-general-ink);
}

.c360-paywall__offer {
	margin: clamp(10px, 1.3cqi, 16px) 0 clamp(18px, 2.6cqi, 32px);
}
.c360-live p.c360-paywall__offer-label {
	font-size: clamp(15px, 2cqi, 25px);
	line-height: 1.3;
}
.c360-live p.c360-paywall__price {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 1.2em;
	justify-content: center;
	font-size: clamp(18px, 2.6cqi, 33px);
	line-height: 1.3;
}
.c360-paywall__price s {
	color: var(--c360-ink);
	text-decoration: line-through;
	text-decoration-color: var(--c360-strike);
	text-decoration-thickness: 0.1em;
}
.c360-live p.c360-paywall__note {
	margin-top: 0.9em;
	font-size: clamp(15px, 2cqi, 25px);
}
.c360-live p.c360-paywall__login {
	margin-top: 1.2em;
	color: var(--c360-muted);
	font-size: 15px;
}
.c360-live p.c360-paywall__login a {
	color: var(--c360-ink);
	text-decoration: underline;
	text-underline-offset: 2px;
}

@keyframes c360-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

.c360-live-notice {
	padding: 16px 20px;
	border: 1px dashed #8a99ab;
	border-radius: 8px;
	background: #f4f6f9;
	color: #1d2733;
	font-size: 14px;
}

/* ---- Stacked layout for narrow columns / phones ---- */
@container (max-width: 820px) {
	.c360-live__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
		padding: min(var(--c360-pad), 14px);
	}
	.c360-chat__inner {
		position: relative;
		height: var(--c360-chat-stacked-height);
	}
	.c360-live h3.c360-chat__title {
		font-size: 17px;
	}
	.c360-live input.c360-chat__input {
		font-size: 17px;
	}
	.c360-paywall__text br {
		display: none;
	}
	.c360-live__guestbar {
		padding: 28px 12px 12px;
		font-size: 14px;
	}
	.c360-live.is-expanded .c360-live__grid {
		grid-template-rows: auto minmax(0, 1fr);
	}
	.c360-live.is-expanded .c360-live__stage {
		aspect-ratio: 16 / 9;
		height: auto;
	}
	.c360-live.is-expanded .c360-chat__inner {
		height: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c360-paywall {
		animation: none;
	}
	.c360-live a.c360-btn {
		transition: none;
	}
}

/* ---- Host tag (visible to everyone) ---- */
.c360-live .c360-msg__host {
	padding: 2px 6px;
	border-radius: 4px;
	background: var(--c360-vip);
	color: var(--c360-vip-ink);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.3;
	text-transform: uppercase;
}
.c360-live .c360-msg.is-host .c360-msg__bubble {
	box-shadow: inset 0 0 0 1px var(--c360-vip);
}

/* ---- Pop-out chat window (Control Room) ---- */
.c360-live.c360-live--chat-only {
	--c360-pad: 10px;
	height: 100vh;
	border-radius: 0;
}
.c360-live.c360-live--chat-only .c360-live__grid {
	grid-template-columns: minmax(0, 1fr);
	align-self: stretch;
	height: 100%;
	padding: var(--c360-pad);
}
.c360-live.c360-live--chat-only .c360-live__stage,
.c360-live.c360-live--chat-only .c360-chat__expand {
	display: none;
}
.c360-live.c360-live--chat-only .c360-chat__inner {
	position: absolute;
	inset: 0;
	height: auto;
}

/* ---- Access panel (logged-out visitors) ---- */
.c360-live {
	--c360-access-bg: #ffffff;
	--c360-access-ink: #0b1a2c;
	--c360-access-login: linear-gradient(120deg, #22467a 0%, #22467a 45%, #081a2c 100%);
	--c360-access-login-ink: #ffffff;
}
/* The stage keeps the video shape as a minimum (the ::before spacer) but grows
   if the panel needs more room, so nothing is ever cut off. Text sizes follow
   the stage's own width. */
.c360-live--access .c360-live__stage {
	display: grid;
	grid-template-columns: minmax(0, 1fr);   /* never wider than the stage, even with a long heading */
	aspect-ratio: auto;
	overflow: visible;
	background: transparent;
	container-type: inline-size;
}
.c360-live--access .c360-live__stage::before {
	content: "";
	grid-area: 1 / 1;
	aspect-ratio: var(--c360-ratio);
}
.c360-access {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	padding: clamp(18px, 5cqi, 40px) clamp(14px, 4.5cqi, 36px);
	border-radius: 14px;
	background: var(--c360-access-bg);
	color: var(--c360-access-ink);
	text-align: center;
}
.c360-live h2.c360-access__title {
	margin: 0 0 clamp(16px, 5.5cqi, 40px);
	color: var(--c360-access-ink);
	font-family: var(--c360-font);
	font-size: clamp(20px, 5.4cqi, 38px);
	font-weight: 700;
	line-height: 1.12;
	letter-spacing: 0;
	text-transform: uppercase;
	text-wrap: balance;
}
.c360-access__title span,
.c360-access__title time {
	display: block;
}
.c360-live p.c360-access__label {
	margin: 0 0 clamp(10px, 2.4cqi, 18px);
	color: var(--c360-access-ink);
	font-family: var(--c360-font);
	font-size: clamp(20px, 5.4cqi, 38px);
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
}
.c360-access__actions {
	display: flex;
	flex-direction: column;
	gap: clamp(8px, 2cqi, 14px);
	width: min(100%, max(290px, 62cqi));
}
.c360-live a.c360-access__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: clamp(46px, 9.4cqi, 62px);
	padding: 0.35em 0.7em;
	border: 0 solid transparent;
	border-radius: 6px;
	font-family: var(--c360-font);
	font-size: clamp(15px, 4cqi, 27px);
	font-weight: 700;
	line-height: 1.1;
	text-align: center;
	text-decoration: none;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.c360-live a.c360-access__btn:hover {
	filter: brightness(1.08);
	text-decoration: none;
}
.c360-live a.c360-access__btn:active {
	transform: translateY(1px);
}
.c360-live a.c360-access__btn:focus-visible {
	outline: 3px solid var(--c360-vip);
	outline-offset: 3px;
}
.c360-live a.c360-access__btn--vip,
.c360-live a.c360-access__btn--vip:hover {
	background: var(--c360-vip);
	color: var(--c360-vip-ink);
}
.c360-live a.c360-access__btn--general,
.c360-live a.c360-access__btn--general:hover {
	background: var(--c360-general);
	color: var(--c360-general-ink);
}
.c360-live a.c360-access__btn--login,
.c360-live a.c360-access__btn--login:hover {
	background: var(--c360-access-login);
	color: var(--c360-access-login-ink);
}

/* Guest chat bar: looks like the normal one; using it shows this note. */
.c360-live .c360-chat__form--guest input.c360-chat__input {
	cursor: pointer;
}
.c360-live p.c360-chat__login-note {
	padding: 10px 22px 12px;
	background: var(--c360-head);
	color: var(--c360-ink);
	font-size: 14px;
}
.c360-live p.c360-chat__login-note[hidden] {
	display: none;
}
.c360-live p.c360-chat__login-note a {
	color: var(--c360-vip);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 2px;
}