/**
 * Styles for the [fitrx_welcome_popup] shortcode — the modal's inside only.
 * The overlay and the popup box itself belong to the Elementor Popup
 * template: set its Width to 1400px, Height to "Fit To Content", padding
 * to 0 and background to transparent, so this component's own size and
 * dark background are what you see.
 *
 * Every <img> rule is prefixed with .fitrx-welcome — themes/Elementor ship
 * `img { height: auto; max-width: 100% }` at single-class specificity,
 * which otherwise wins and collapses the object-fit image (same fix as
 * home-gym-collections.css).
 *
 * 'Anton' and 'Manrope' are loaded site-wide — not repeated here.
 */

.fitrx-welcome,
.fitrx-welcome *,
.fitrx-welcome *::before,
.fitrx-welcome *::after {
	box-sizing: border-box;
}

.fitrx-welcome {
	--ink: #181818;
	--red: #ce0e2d;
	--white: #ffffff;
	--muted-gray: #8c8c8c;

	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: 100%;
	/* fills the viewport like the design's full-height modal, minus the
	   overlay's 24px breathing room, but never taller than 860px */
	height: min(860px, calc(100vh - 48px));
	height: min(860px, calc(100dvh - 48px));
	background: var(--ink);
	color: var(--white);
	font-family: 'Manrope', -apple-system, sans-serif;
	-webkit-font-smoothing: antialiased;
	overflow: hidden;
	box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6);
}

.fitrx-welcome p { margin: 0; }
.fitrx-welcome a { text-decoration: none; }

/*
 * ---- close ----
 * Elementor Popup's OWN close button (it can't be turned off, so the
 * shortcode renders none of its own), restyled to the design. Scoped with
 * :has() to only the popup that contains this shortcode, so other popups
 * keep their normal close button. !important is needed only on what
 * Elementor's per-popup CSS sets under an id selector
 * (#elementor-popup-modal-<id> .dialog-close-button — position, color,
 * background, size), which no class-based selector can otherwise outrank.
 * Covers both the <i class="eicon-close"> icon font and the inline <svg>
 * Elementor switches to with its "Inline Font Icons" experiment.
 */
.elementor-popup-modal:has(.fitrx-welcome) .dialog-close-button {
	top: 24px !important;
	right: 24px !important;
	left: auto !important;
	z-index: 5;
	width: 48px;
	height: 48px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: rgba(24, 24, 24, 0.55) !important;
	border: 1px solid rgba(255, 255, 255, 0.25);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-size: 16px !important;
	line-height: 1;
	color: #fff !important;
	opacity: 1;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.elementor-popup-modal:has(.fitrx-welcome) .dialog-close-button:hover {
	background: #ce0e2d !important;
	border-color: #ce0e2d;
	transform: rotate(90deg);
}
.elementor-popup-modal:has(.fitrx-welcome) .dialog-close-button i {
	color: #fff !important;
	font-size: 16px !important;
}
.elementor-popup-modal:has(.fitrx-welcome) .dialog-close-button svg {
	display: block;
	width: 16px !important;
	height: 16px !important;
	fill: #fff !important;
}

/* ---- media (left on desktop) ---- */
.fitrx-welcome-media {
	position: relative;
	min-height: 0;
	background: #2a2a2a;
	overflow: hidden;
}
.fitrx-welcome .fitrx-welcome-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
.fitrx-welcome-media::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(270deg, rgba(24, 24, 24, 0.55) 0%, rgba(24, 24, 24, 0) 35%);
}
.fitrx-welcome-badge {
	position: absolute;
	top: clamp(20px, 2.5vw, 32px);
	left: clamp(20px, 2.5vw, 32px);
	z-index: 3;
	background: var(--red);
	color: var(--white);
	font-weight: 800;
	font-size: clamp(11px, 0.9vw, 13px);
	letter-spacing: 1px;
	text-transform: uppercase;
	padding: 8px 16px;
}

/* ---- panel (right on desktop) ---- */
.fitrx-welcome-panel {
	padding: clamp(24px, 4vw, 80px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
}
.fitrx-welcome .fitrx-welcome-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 800;
	font-size: clamp(12px, 1vw, 15px);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: clamp(10px, 1.6vw, 26px);
}
.fitrx-welcome .fitrx-welcome-eyebrow::before {
	content: '';
	flex: 0 0 40px;
	height: 2px;
	background: var(--red);
}
.fitrx-welcome .fitrx-welcome-title {
	font-family: 'Anton', sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--white);
	font-size: clamp(30px, 5vmin, 68px);
	line-height: 1.06;
	margin: 0 0 clamp(10px, 1.6vw, 24px);
}
.fitrx-welcome .fitrx-welcome-accent { color: var(--red); }
.fitrx-welcome .fitrx-welcome-sub {
	color: var(--muted-gray);
	font-size: clamp(14px, 1.2vw, 20px);
	line-height: 1.5;
	max-width: 520px;
	margin-bottom: clamp(18px, 2.6vw, 44px);
}
.fitrx-welcome-ctas {
	display: flex;
	flex-direction: column;
	gap: clamp(10px, 1.2vw, 18px);
	max-width: 460px;
}
.fitrx-welcome .fitrx-welcome-cta {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background: var(--red);
	color: var(--white);
	border: 1px solid var(--red);
	border-radius: 999px;
	padding: clamp(14px, 2.2vmin, 20px) clamp(20px, 2.2vmin, 32px);
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: clamp(12px, 2vmin, 17px);
	letter-spacing: 1px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.fitrx-welcome .fitrx-welcome-cta:hover {
	background: transparent;
	border-color: var(--red);
	color: var(--red);
}
.fitrx-welcome-cta svg {
	flex: 0 0 auto;
	width: clamp(14px, 1.1vw, 18px);
	height: clamp(14px, 1.1vw, 18px);
	display: block;
	transition: transform 0.2s ease;
}
.fitrx-welcome-cta:hover svg { transform: translateX(3px); }

/*
 * ---- stacked (tablet / mobile) ----
 * Sized to its content rather than the design's full-height 2fr/3fr split:
 * that split was sized for the (since dropped) two-CTA + quiz panel, and
 * with a single CTA it just leaves a tall empty black band under the copy.
 */
@media (max-width: 900px) {
	.fitrx-welcome {
		grid-template-columns: 1fr;
		/* image row gives up height first if the viewport is too short */
		grid-template-rows: minmax(0, 1fr) auto;
		height: auto;
		max-height: calc(100vh - 48px);
		max-height: calc(100dvh - 48px);
	}
	.fitrx-welcome-media { aspect-ratio: 4 / 3; }
	.fitrx-welcome-panel { padding: 32px 28px 32px; }
	.fitrx-welcome-ctas { max-width: none; }
}

@media (max-width: 480px) {
	.fitrx-welcome {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}
	.fitrx-welcome-panel { padding: 24px 20px 24px; }
	.elementor-popup-modal:has(.fitrx-welcome) .dialog-close-button {
		top: 14px !important;
		right: 14px !important;
		width: 40px;
		height: 40px;
	}
}