/**
 * TNG Audience Protection — Roadblock Styles
 *
 * Provides a clean, accessible roadblock UI that works with any theme.
 * Designed to integrate with Elementor and Hello Elementor child theme.
 */

/* Roadblock Container — matches live: full-width white section, centered text, no card */
.tng-roadblock {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 70px 20px 80px;
	text-align: center;
	font-family: inherit;
	background: #ffffff;
	box-sizing: border-box;
}

.tng-roadblock__inner {
	max-width: 760px;
	margin: 0 auto;
	background: transparent;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

/* Title — matches live .pagetitle: Lato 35px / weight 500, TNG orange. */
.tng-roadblock .tng-roadblock__title {
	font-family: "Lato", sans-serif !important;
	font-size: 35px !important;
	font-weight: 500 !important;
	color: #F26522 !important;
	margin: 0 0 14px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
}

/* Description — live: Lato 20px weight 300 #333 */
.tng-roadblock .tng-roadblock__description {
	font-family: "Lato", sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #333333;
	margin: 0 0 22px;
	line-height: 1.5;
}

/* Invitation line (above form) — live: 20px weight 300 base, link 700 orange */
.tng-roadblock .tng-roadblock__invitation {
	font-family: "Lato", sans-serif;
	font-size: 20px;
	font-weight: 300;
	color: #333333;
	margin: 0 0 22px;
	line-height: 1.5;
}

.tng-roadblock .tng-roadblock__invitation strong { font-weight: 300; }

.tng-roadblock .tng-roadblock__invitation a {
	color: #F26522;
	font-weight: 700;
	text-decoration: none;
}

.tng-roadblock .tng-roadblock__invitation a:hover {
	color: #d4541f;
	text-decoration: none;
}

/* Form — horizontal pill layout */
.tng-roadblock__form {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin: 6px auto 0;
	max-width: 620px;
}

.tng-roadblock__field {
	flex: 1 1 260px;
	max-width: 320px;
	margin: 0;
}

.tng-roadblock__field input[type="password"] {
	width: 100%;
	padding: 14px 22px;
	font-size: 15px;
	border: 1px solid #d6d6d6;
	border-radius: 999px;
	background: #efefef;
	color: #333333;
	outline: none;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	box-sizing: border-box;
	height: 48px;
}

.tng-roadblock__field input[type="password"]:focus {
	border-color: #F26522;
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(242, 101, 34, 0.18);
}

.tng-roadblock__field input[type="password"]::placeholder {
	color: #888888;
}

/* Error message — sits below the inline form */
.tng-roadblock__error {
	flex: 0 0 100%;
	order: 99;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 8px;
	color: #dc2626;
	padding: 10px 16px;
	font-size: 14px;
	margin: 6px auto 0;
	text-align: center;
	max-width: 620px;
	box-sizing: border-box;
}

/* Submit button — matches live .btn-default.loginorange (pill, orange).
   Higher specificity (.tng-roadblock .tng-roadblock__submit) plus !important
   to beat .elementor-kit-N input[type="submit"] kit defaults. */
.tng-roadblock .tng-roadblock__submit,
.tng-roadblock button.tng-roadblock__submit {
	flex: 0 0 auto;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-width: 200px;
	padding: 0 32px !important;
	height: 48px;
	font-family: "Lato", sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #ffffff !important;
	background: #ef662f !important;
	border: none !important;
	border-radius: 999px !important;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
	line-height: 1 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.5px !important;
	position: relative;
	box-shadow: none !important;
}

.tng-roadblock__submit::after {
	content: "›";
	display: inline-block;
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	margin-left: 6px;
	transform: translateY(-1px);
}

.tng-roadblock .tng-roadblock__submit:hover,
.tng-roadblock button.tng-roadblock__submit:hover { background: #d4541f !important; }
.tng-roadblock__submit:active { transform: scale(0.98); }
.tng-roadblock__submit:disabled {
	background: #b8b8b8;
	cursor: not-allowed;
	transform: none;
}

.tng-roadblock__submit--loading { color: transparent; }
.tng-roadblock__submit--loading::after { content: ""; opacity: 0; }
.tng-roadblock__submit--loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	margin: -10px 0 0 -10px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: tng-spin 0.6s linear infinite;
}

@keyframes tng-spin {
	to { transform: rotate(360deg); }
}

/* Forgotten password line — live: plain text, no underline, identical to body */
.tng-roadblock .tng-roadblock__forgot {
	font-family: "Lato", sans-serif;
	margin-top: 26px;
	font-size: 20px;
	font-weight: 300;
	color: #333333;
	line-height: 1.5;
}

.tng-roadblock .tng-roadblock__link,
.tng-roadblock .tng-roadblock__forgot a {
	color: #333333;
	font-weight: 300;
	text-decoration: none;
	transition: color 0.2s ease;
}

.tng-roadblock .tng-roadblock__link:hover,
.tng-roadblock .tng-roadblock__forgot a:hover {
	color: #F26522;
	text-decoration: none;
}

/* Responsive */
@media (max-width: 600px) {
	.tng-roadblock {
		padding: 40px 16px 50px;
	}

	.tng-roadblock__title {
		font-size: 26px;
	}

	.tng-roadblock__form {
		flex-direction: column;
	}

	.tng-roadblock__field,
	.tng-roadblock__submit {
		max-width: 100%;
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
 * Banner-skip mode: when <body class="tng-content-restricted"> is set, the
 * plugin has prepended the roadblock and kept the original page content in
 * the DOM. We hide every Elementor section EXCEPT those (or their ancestors)
 * flagged with .tng-protection-skip so the event banner stays visible.
 *
 * Selectors are scoped to .elementor[data-elementor-type="wp-page"|"wp-post"]
 * so theme headers/footers (which use data-elementor-type="header"/"footer"
 * on hello-elementor + Elementor Pro template parts) stay visible.
 * --------------------------------------------------------------------------- */
.tng-content-restricted .elementor[data-elementor-type="wp-page"] > .elementor-section:not(.tng-protection-skip):not(:has(.tng-protection-skip)),
.tng-content-restricted .elementor[data-elementor-type="wp-page"] > .elementor-element:not(.tng-protection-skip):not(:has(.tng-protection-skip)),
.tng-content-restricted .elementor[data-elementor-type="wp-page"] > .e-con:not(.tng-protection-skip):not(:has(.tng-protection-skip)),
.tng-content-restricted .elementor[data-elementor-type="wp-post"] > .elementor-section:not(.tng-protection-skip):not(:has(.tng-protection-skip)),
.tng-content-restricted .elementor[data-elementor-type="wp-post"] > .elementor-element:not(.tng-protection-skip):not(:has(.tng-protection-skip)),
.tng-content-restricted .elementor[data-elementor-type="wp-post"] > .e-con:not(.tng-protection-skip):not(:has(.tng-protection-skip)) {
	display: none !important;
}

/* Roadblock itself is always shown. We do NOT redeclare display on descendants
   of .tng-protection-skip — Elementor's own rules (display: flex on .e-flex,
   etc.) must remain in effect, otherwise inner button widgets stack/overlap. */
.tng-content-restricted .tng-roadblock {
	display: block !important;
}