/**
 * Webinar — page styles
 *
 * Scoped to body.webinar to avoid leaking into other pages.
 * Loaded only on page-webinar.php via wp_enqueue_style.
 */

/*--------------------------------------------------------------
# Variables
--------------------------------------------------------------*/
:root {
	--wb-black: #141313;
	--wb-bg: #141313;
	--wb-bg-dark: #191817;
	--wb-white: #fff;
	--wb-muted: #b3afa9;
	--wb-gray: #979797;
	--wb-orange: #f3981f;
	--wb-orange-dark: #e57625;
	--wb-orange-light: #ffaf45;
	--wb-cta-gradient: linear-gradient(103.84deg, #f3981f 0%, #e57625 100%);
	--wb-title-gradient: linear-gradient(90deg, #ffc271 0%, #ff9242 100%);
	--wb-cta-shadow: 0 2px 21.2px rgba(243, 152, 31, 0.39);
	--wb-heading-shadow: 0 14px 24px rgba(0, 0, 0, 0.6);
	--wb-card-shadow: 0 4px 30px rgba(243, 152, 31, 0.2);
	--wb-card-bg: #201914;
	--wb-card-border: #784c0f;
	--wb-btn-secondary-bg: rgba(20, 19, 19, 0.8);
	--wb-btn-secondary-border: #332e2a;
	--wb-countdown-bg: rgba(20, 19, 19, 0.6);
	--wb-countdown-border: #e57625;
	--wb-form-bg: rgba(25, 24, 23, 0.4);
	--wb-form-input-bg: rgba(25, 24, 23, 0.6);
	--wb-form-border: #747474;
	--wb-radius: 12px;
	--wb-radius-sm: 7px;
	--wb-radius-pill: 40px;
	--wb-radius-countdown: 6px;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/
body.webinar {
	margin: 0;
	background: var(--wb-bg);
	font-family: "Figtree", sans-serif;
	color: var(--wb-white);
}

body.webinar *,
body.webinar *::before,
body.webinar *::after {
	box-sizing: border-box;
}

body.webinar ::selection {
	background: var(--wb-orange);
	color: var(--wb-black);
}

body.webinar .wb-mobile-br {
	display: block;

	@media (min-width: 768px) {
		display: none;
	}
}

body.webinar img {
	max-width: 100%;
	height: auto;
}

body.webinar .wrapper {
	max-width: calc(var(--wb-wrapper-max, 976px) + 14px);
	padding-inline: 7px;
	margin-inline: auto;

	@media (min-width: 768px) {
		max-width: calc(var(--wb-wrapper-max, 976px) + 24px);
		padding-inline: 12px;
	}
}

/*--------------------------------------------------------------
# Headings
--------------------------------------------------------------*/
body.webinar .wb-heading-lg {
	font-size: 42px;
	font-weight: 600;
	line-height: 1;
	text-align: center;
	margin-bottom: 1rem;

	@media (min-width: 768px) {
		font-size: 68px;
	}
}

body.webinar .wb-heading-lg span {
	background: var(--wb-title-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

body.webinar .wb-subtitle {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;

	@media (min-width: 768px) {
		font-size: 22px;
	}
}

body.webinar .wb-body-text {
	color: var(--wb-gray);
	text-align: center;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 0;

	@media (min-width: 768px) {
		font-size: 22px;
	}
}

body.webinar .wb-body-text span,
body.webinar .wb-body-text strong {
	color: var(--wb-white);
	font-weight: inherit;
}

/*--------------------------------------------------------------
# Buttons
--------------------------------------------------------------*/
body.webinar .btn-primary {
	display: inline-block;
	padding: 12px 38px;
	background: var(--wb-cta-gradient);
	box-shadow: var(--wb-cta-shadow);
	color: var(--wb-black);
	font-weight: 700;
	font-size: 18px;
	text-decoration: none;
	text-align: center;
	border: none;
	border-radius: var(--wb-radius);
	cursor: pointer;
	transition: box-shadow 0.2s;
}

body.webinar .btn-primary:hover {
	box-shadow: 0 4px 28px rgba(243, 152, 31, 0.55);
}

body.webinar .btn-secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 10px 30px;
	background: var(--wb-btn-secondary-bg);
	border: 1px solid var(--wb-btn-secondary-border);
	border-radius: 10px;
	color: var(--wb-orange);
	font-weight: 500;
	font-size: 18px;
	text-decoration: none;
	cursor: pointer;
	transition: box-shadow 0.2s;
}

body.webinar .btn-secondary:hover {
	box-shadow: 0 2px 16px rgba(243, 152, 31, 0.25);
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
body.webinar .wb-hero-bg {
	position: relative;
	background: url("../img/hero-mobile.jpg") center top / cover no-repeat;
}

@media (min-width: 768px) {
	body.webinar .wb-hero-bg {
		background-image: url("../img/hero-desktop.jpg");
	}
}

@media (min-width: 768px) {
	body.webinar .wb-hero-bg::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120px;
		background: linear-gradient(to bottom, transparent, var(--wb-bg));
		pointer-events: none;
		z-index: 2;
	}
}

body.webinar .wb-header {
	position: relative;
	padding-block: 40px 25px;

	@media (min-width: 992px) {
		padding-block: 50px 35px;
	}
}

body.webinar .wb-header .wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.webinar .wb-header__logo {
	flex-shrink: 0;
}

body.webinar .wb-header__logo img {
	display: block;
	width: 52px;
	height: auto;

	@media (min-width: 992px) {
		width: 80px;
	}
}

/*--------------------------------------------------------------
# Hero
--------------------------------------------------------------*/
body.webinar .wb-hero {
	position: relative;
	z-index: 1;
	padding-bottom: 50px;
	text-align: center;

	@media (min-width: 768px) {
		padding-bottom: 80px;
	}
}

body.webinar .wb-hero__title {
	font-size: 54px;
	font-weight: 700;
	line-height: 1;
	background: var(--wb-title-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 0;

	@media (min-width: 768px) {
		font-size: 78px;
	}
}

body.webinar .wb-hero__date {
	font-size: 50px;
	font-weight: 400;
	line-height: 1;
	color: var(--wb-white);
	margin-bottom: 20px;

	@media (min-width: 768px) {
		font-size: 68px;
	}
}

body.webinar .wb-hero__desc {
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wb-white);
	max-width: 300px;
	margin-inline: auto;

	@media (min-width: 768px) {
		font-size: 22px;
		max-width: 600px;
	}
}

body.webinar .wb-hero__meta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin-top: 20px;
	font-size: 14px;
	color: var(--wb-white);

	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: center;
		gap: 30px;
		margin-top: 26px;
		font-size: 16px;
	}
}

body.webinar .wb-hero__meta-item {
	display: flex;
	align-items: center;
	gap: 6px;

	@media (min-width: 768px) {
		gap: 12px;
	}
}

body.webinar .wb-hero__meta-item img {
	width: 13px;
	height: auto;

	@media (min-width: 768px) {
		width: 20px;
	}
}

body.webinar .wb-hero__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
	width: 220px;
	margin-inline: auto;

	@media (min-width: 768px) {
		margin-top: 40px;
	}
}

body.webinar .wb-hero__actions .btn-primary {
	width: 100%;
}

body.webinar .wb-hero__actions .btn-secondary {
	white-space: nowrap;
}

/*--------------------------------------------------------------
# Countdown
--------------------------------------------------------------*/
body.webinar .wb-hero__countdown {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-top: 30px;
}

body.webinar .wb-hero__countdown-label {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wb-white);
	text-align: center;
}

body.webinar .wb-hero__countdown-boxes {
	display: flex;
	gap: 8px;
	justify-content: center;
}

body.webinar .wb-hero__countdown-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 80px;
	padding: 8px;
	background: var(--wb-countdown-bg);
	border: 0.2px solid var(--wb-countdown-border);
	border-radius: var(--wb-radius-countdown);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

body.webinar .wb-hero__countdown-number {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 36px;
	font-size: 46px;
	font-weight: 700;
	line-height: 1;
	color: var(--wb-orange-light);
	text-align: center;
}

body.webinar .wb-hero__countdown-unit {
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wb-orange-dark);
	text-align: center;
}

/*--------------------------------------------------------------
# Agenda
--------------------------------------------------------------*/
body.webinar .wb-agenda {
	position: relative;
	padding: 20px 0 60px;
	background: url("../img/agenda-bg-mobile.png") center top / cover no-repeat;
	text-align: center;
	@media (min-width: 768px) {
		padding: 50px 0 105px;
		background-image: url("../img/agenda-bg-desktop.jpg");
	}
}

body.webinar .wb-agenda::before {
	content: "";
	position: absolute;
	top: -120px;
	left: 50%;
	transform: translateX(-50%);
	width: 185px;
	height: 206px;
	background: url("../img/coin.png") center / contain no-repeat;
	pointer-events: none;
	z-index: 0;

	@media (min-width: 768px) {
		display: none;
	}
}

@media (min-width: 768px) {
	body.webinar .wb-agenda::after {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 120px;
		background: linear-gradient(to bottom, transparent, var(--wb-bg));
		pointer-events: none;
		z-index: 0;
	}
}

body.webinar .wb-agenda .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	position: relative;
	z-index: 1;
}

body.webinar .wb-agenda .wb-heading-lg {
	margin-bottom: 0;
}

body.webinar .wb-agenda .wb-subtitle {
	font-size: 18px;
	margin: 0;

	@media (min-width: 768px) {
		font-size: 22px;
	}
}

body.webinar .wb-agenda__pills {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 13px;
	width: 100%;
}

body.webinar .wb-agenda__pill {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	max-width: 329px;
	padding: 20px 26px;
	background: var(--wb-card-bg);
	border: 1px solid var(--wb-card-border);
	border-radius: var(--wb-radius-pill);
	box-shadow: var(--wb-card-shadow);
	font-size: 22px;
	font-weight: 600;
	line-height: 1;

	@media (min-width: 768px) {
		max-width: 451px;
		font-size: 26px;
	}
}

body.webinar .wb-agenda__pill-text {
	background: var(--wb-title-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	text-decoration: underline;
}

/*--------------------------------------------------------------
# Special Guest
--------------------------------------------------------------*/
body.webinar .wb-guest {
	margin-top: 10px;
	padding-bottom: 60px;
	text-align: center;

	@media (min-width: 768px) {
		margin-top: 35px;
		padding-bottom: 80px;
	}
}

body.webinar .wb-guest .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.webinar .wb-guest__img {
	display: block;
	max-width: 500px;
	width: 100%;
	height: auto;
	margin: 10px auto 0;

	@media (min-width: 768px) {
		max-width: 647px;
		margin-top: 20px;
	}
}

body.webinar .wb-guest .wb-heading-lg {
	margin-bottom: 0;
}

body.webinar .wb-guest .wb-body-text {
	max-width: 327px;

	@media (min-width: 768px) {
		max-width: 705px;
	}
}

/*--------------------------------------------------------------
# Markets Recap
--------------------------------------------------------------*/
body.webinar .wb-recap {
	padding-top: 10px;
	padding-bottom: 60px;
	text-align: center;

	@media (min-width: 768px) {
		padding-top: 26px;
		padding-bottom: 80px;
	}
}

body.webinar .wb-recap .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;

	@media (min-width: 768px) {
		gap: 30px;
	}
}

body.webinar .wb-recap .wb-heading-lg {
	margin-bottom: 0;
}

body.webinar .wb-recap .wb-body-text {
	max-width: 327px;

	@media (min-width: 768px) {
		max-width: 705px;
	}
}

/*--------------------------------------------------------------
# Technical Analysis
--------------------------------------------------------------*/
body.webinar .wb-analysis {
	padding-top: 10px;
	padding-bottom: 60px;
	text-align: center;

	@media (min-width: 768px) {
		padding-top: 46px;
		padding-bottom: 80px;
	}
}

body.webinar .wb-analysis .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.webinar .wb-analysis .wb-heading-lg {
	margin-bottom: 0;
}

body.webinar .wb-analysis__img {
	display: block;
	max-width: 340px;
	width: 100%;
	height: auto;
	margin: 12px auto 0;

	@media (min-width: 768px) {
		max-width: 500px;
	}
}

body.webinar .wb-analysis .wb-body-text {
	max-width: 331px;

	@media (min-width: 768px) {
		max-width: 705px;
	}
}

/*--------------------------------------------------------------
# Exclusive Gift
--------------------------------------------------------------*/
body.webinar .wb-gift {
	padding-top: 10px;
	padding-bottom: 60px;
	text-align: center;

	@media (min-width: 768px) {
		padding-top: 20px;
		padding-bottom: 80px;
	}
}

body.webinar .wb-gift .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.webinar .wb-gift .wb-heading-lg {
	margin-bottom: 0;
}

body.webinar .wb-gift__img {
	display: block;
	max-width: 316px;
	width: 100%;
	height: auto;
	margin: 5px auto 0;

	@media (min-width: 768px) {
		max-width: 384px;
	}
}

body.webinar .wb-gift .wb-body-text {
	max-width: 241px;

	@media (min-width: 768px) {
		max-width: 485px;
	}
}

/*--------------------------------------------------------------
# Presenters
--------------------------------------------------------------*/
body.webinar .wb-presenters {
	padding-top: 10px;
	padding-bottom: 60px;
	text-align: center;

	@media (min-width: 768px) {
		padding-top: 46px;
		padding-bottom: 80px;
	}
}

body.webinar .wb-presenters .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
}

body.webinar .wb-presenters .wb-heading-lg {
	margin-bottom: 20px;

	@media (min-width: 768px) {
		margin-bottom: 30px;
	}
}

body.webinar .wb-presenters .wb-subtitle {
	color: var(--wb-gray);
	font-size: 18px;
	font-weight: 400;
	max-width: 257px;
	margin: 0 0 20px;

	@media (min-width: 768px) {
		font-size: 22px;
		max-width: none;
		margin-bottom: 64px;
	}
}

body.webinar .wb-presenters .wb-subtitle strong {
	color: var(--wb-white);
	font-weight: inherit;
}

body.webinar .wb-presenters__grid {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	width: 100%;

	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: center;
		gap: 25px;
	}
}

body.webinar .wb-presenters__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 312px;
	max-width: 100%;
}

body.webinar .wb-presenters__photo {
	display: block;
	width: 312px;
	max-width: 100%;
	height: auto;
}

body.webinar .wb-presenters__info {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 20px 30px;
	background: #161515;
	border-radius: 10px;
}

body.webinar .wb-presenters__info::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(
		38deg,
		rgba(255, 255, 255, 0.2) 0%,
		rgba(116, 116, 116, 0.2) 70%,
		#f3981f 100%
	);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	pointer-events: none;
}

body.webinar .wb-presenters__name {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	background: var(--wb-title-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0;
}

body.webinar .wb-presenters__role {
	font-size: 16px;
	font-weight: 500;
	line-height: 1.2;
	color: var(--wb-white);
	margin: 0;
}

body.webinar .wb-presenters__bio {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--wb-white);
	text-align: center;
	margin: 0;
}

/*--------------------------------------------------------------
# Reserve
--------------------------------------------------------------*/
body.webinar .wb-reserve {
	padding-top: 10px;
	text-align: center;

	@media (min-width: 768px) {
		padding-top: 0;
	}
}

body.webinar .wb-reserve .wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

body.webinar .wb-reserve .wb-body-text {
	max-width: 313px;

	@media (min-width: 768px) {
		max-width: 485px;
	}
}

/*--------------------------------------------------------------
# Info Cards
--------------------------------------------------------------*/
body.webinar .wb-info {
	padding-top: 50px;
	text-align: center;

	@media (min-width: 768px) {
		padding-top: 70px;
	}
}

body.webinar .wb-info__cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;

	@media (min-width: 768px) {
		flex-direction: row;
		justify-content: center;
		gap: 54px;
	}
}

body.webinar .wb-info__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

body.webinar .wb-info__emoji {
	font-size: 26px;
	line-height: 1;
	text-shadow: 0 0 20px rgba(253, 64, 1, 0.6);
}

body.webinar .wb-info__title {
	font-size: 22px;
	font-weight: 500;
	line-height: 1.1;
	background: var(--wb-title-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0;
}

body.webinar .wb-info__desc {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--wb-white);
	max-width: 187px;
	margin: 0;
}

/*--------------------------------------------------------------
# Register Form
--------------------------------------------------------------*/
body.webinar .wb-register {
	padding: 70px 0 100px;
	background: url("../img/register-bg-mobile.png") center top / cover no-repeat;

	@media (min-width: 768px) {
		padding: 112px 0 130px;
		background-image: url("../img/register-bg-desktop.png");
	}
}

body.webinar .wb-register__form-wrap {
	position: relative;
	max-width: 451px;
	margin-inline: auto;
	padding: 30px 17px 50px;

	@media (min-width: 768px) {
		padding: 40px 22px 60px;
	}
	background: var(--wb-form-bg);
	border-radius: var(--wb-radius);
	box-shadow: 0 4px 30px rgba(243, 152, 31, 0.4);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

body.webinar .wb-register__form-wrap::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(to left, #747474, #fff);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0.2;
	pointer-events: none;
}

body.webinar .wb-register__title {
	font-size: 32px;
	font-weight: 600;
	line-height: 1.1;
	text-align: center;
	background: var(--wb-title-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 10px;
}

body.webinar .wb-register__date {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.2;
	text-align: center;
	color: var(--wb-white);
	margin-bottom: 30px;
}

body.webinar .wb-register__form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

body.webinar .wb-register__form input[type="text"],
body.webinar .wb-register__form input[type="email"] {
	width: 100%;
	height: 56px;
	padding: 0 22px;
	background: var(--wb-form-input-bg);
	border: 1px solid var(--wb-form-border);
	border-radius: var(--wb-radius);
	backdrop-filter: blur(8.66px);
	-webkit-backdrop-filter: blur(8.66px);
	font-family: "Figtree", sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 1.2;
	color: var(--wb-white);
	outline: none;
	transition: border-color 0.2s;
}

body.webinar .wb-register__form input[type="text"]::placeholder,
body.webinar .wb-register__form input[type="email"]::placeholder {
	color: var(--wb-gray);
}

body.webinar .wb-register__form input[type="text"]:focus,
body.webinar .wb-register__form input[type="email"]:focus {
	border-color: var(--wb-orange);
}

body.webinar .wb-register__consent {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	margin-top: 6px;
	font-size: 14px;
	font-weight: 300;
	line-height: 1.2;
	color: var(--wb-white);

	@media (min-width: 768px) {
		margin-top: 16px;
	}
	cursor: pointer;
}

body.webinar .wb-register__consent input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	background: rgba(217, 217, 217, 0.2);
	border: 1px solid var(--wb-orange);
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s;
}

body.webinar .wb-register__consent input[type="checkbox"]:checked {
	background: var(--wb-orange);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' fill='none'%3E%3Cpath d='M1 4l2.5 2.5L9 1' stroke='%23141313' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

/* Klaviyo embed form overrides */
body.webinar .wb-register__form-wrap .klaviyo-form [data-testid="form-row"] {
	padding: 0 !important;
	margin-bottom: 14px !important;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	[data-testid="form-row"]:last-child {
	margin-bottom: 0 !important;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	[data-testid="form-component"] {
	padding: 0 !important;
	position: relative !important;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	[data-testid="form-component"]:has(input:not([type="checkbox"]))::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wb-radius);
	padding: 1px;
	background: linear-gradient(to left, #747474, #fff);
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	mask-composite: exclude;
	opacity: 0.2;
	pointer-events: none;
	z-index: 1;
	transition: opacity 0.2s;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	[data-testid="form-component"]:has(input:focus)::before {
	opacity: 0;
}

body.webinar .wb-register__form-wrap .klaviyo-form input[type="text"],
body.webinar .wb-register__form-wrap .klaviyo-form input[type="email"] {
	width: 100% !important;
	height: 56px !important;
	padding: 0 22px !important;
	background: var(--wb-form-input-bg) !important;
	border: 1px solid transparent !important;
	border-radius: var(--wb-radius) !important;
	font-family: "Figtree", sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	color: var(--wb-white) !important;
	backdrop-filter: blur(8.66px);
	-webkit-backdrop-filter: blur(8.66px);
	transition: border-color 0.2s;
}

body.webinar .wb-register__form-wrap .klaviyo-form input[type="text"]:focus,
body.webinar .wb-register__form-wrap .klaviyo-form input[type="email"]:focus {
	background: var(--wb-form-input-bg) !important;
	border: 1px solid var(--wb-orange) !important;
}

body.webinar .wb-register__form-wrap .klaviyo-form input::placeholder {
	color: var(--wb-gray) !important;
	font-size: 18px !important;
	letter-spacing: 0 !important;
	font-family: "Figtree", sans-serif !important;
}

body.webinar .wb-register__form-wrap .klaviyo-form input:focus,
body.webinar .wb-register__form-wrap .klaviyo-form input:focus-visible {
	outline: none !important;
	box-shadow: none !important;
}

body.webinar .wb-register__form-wrap .klaviyo-form fieldset {
	margin-top: 6px !important;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	fieldset
	div[role="group"]
	label {
	align-items: flex-start !important;
	gap: 11px !important;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	fieldset
	div[role="group"]
	label
	svg {
	margin-right: 0 !important;
	min-width: 16px !important;
	width: 16px !important;
	height: 16px !important;
	margin-top: 1px !important;
}

body.webinar .wb-register__form-wrap .klaviyo-form fieldset svg rect {
	fill: rgba(217, 217, 217, 0.2) !important;
	stroke: var(--wb-orange) !important;
	rx: 2 !important;
}

body.webinar
	.wb-register__form-wrap
	.klaviyo-form
	fieldset
	div[role="group"]
	label
	div {
	color: var(--wb-white) !important;
	font-size: 14px !important;
	font-weight: 300 !important;
	letter-spacing: 0 !important;
	line-height: 1.2 !important;
	margin-right: 0 !important;
}

body.webinar .wb-register__form-wrap .klaviyo-form button {
	width: 100% !important;
	height: auto !important;
	margin-top: 6px !important;
	padding: 15px 38px !important;
	background: var(--wb-cta-gradient) !important;
	box-shadow: var(--wb-cta-shadow) !important;
	border: none !important;
	border-radius: var(--wb-radius) !important;
	font-family: "Figtree", sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	color: var(--wb-black) !important;
	filter: none !important;
	cursor: pointer;
	transition: box-shadow 0.2s;
	text-decoration: none;
	text-align: center;

	@media (min-width: 768px) {
		font-size: 22px !important;
	}
}

body.webinar .wb-register__form-wrap .klaviyo-form button:hover {
	box-shadow: 0 4px 28px rgba(243, 152, 31, 0.55) !important;
}

body.webinar .wb-register__form .btn-primary {
	width: 100%;
	margin-top: 6px;
	padding: 15px 38px;
	font-size: 20px;

	@media (min-width: 768px) {
		font-size: 22px;
	}
}

/*--------------------------------------------------------------
# YouTube Interviews
--------------------------------------------------------------*/