@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap');

:root {
	--color_primary: #33ADE3;
	--color_secondary: #2F4858;
	--color_accent: #EF4B2E;
	--color_base: #FFFFFF;

	--color_primary_soft: color-mix(in srgb, var(--color_primary) 12%, var(--color_base));
	--color_primary_softer: color-mix(in srgb, var(--color_primary) 6%, var(--color_base));
	--color_primary_deep: color-mix(in srgb, var(--color_primary) 70%, var(--color_secondary));
	--color_accent_soft: color-mix(in srgb, var(--color_accent) 8%, var(--color_base));
	--color_text_muted: color-mix(in srgb, var(--color_secondary) 60%, var(--color_base));
	--color_line: color-mix(in srgb, var(--color_secondary) 14%, var(--color_base));
	--color_ring: color-mix(in srgb, var(--color_primary) 10%, transparent);

	--font_main: 'Rubik', Arial, Helvetica, sans-serif;
	--radius_card: 18px;
	--shadow_card: 0 8px 24px color-mix(in srgb, var(--color_secondary) 10%, transparent);
	--desktop_max: 1080px;
}

* {
	box-sizing: border-box;
}

html {
	font-size: 16px;
}

body {
	margin: 0;
	font-family: var(--font_main);
	color: var(--color_secondary);
	background:
		radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--color_primary) 10%, transparent), transparent 40%),
		linear-gradient(180deg, var(--color_primary_softer), var(--color_primary_soft));
	min-height: 100vh;
	direction: rtl;
}

/* Decorative background rings */
.bg_rings {
	position: fixed;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.bg_rings::before,
.bg_rings::after {
	content: '';
	position: absolute;
	border-radius: 50%;
	border: 48px solid var(--color_ring);
}

.bg_rings::before {
	width: 480px;
	height: 480px;
	inset-inline-start: -180px;
	bottom: -160px;
}

.bg_rings::after {
	width: 320px;
	height: 320px;
	inset-inline-start: -60px;
	top: 4%;
	border-width: 32px;
}

.page_wrap {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 20px;
	max-width: var(--desktop_max);
	margin: 0 auto;
}

/* ===== Brand block (logo + wordmark + tagline) ===== */
.brand_block {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.brand_logo {
	width: 130px;
	height: auto;
}

.brand_title {
	margin: 8px 0 0;
	font-size: 3.4rem;
	line-height: 0.95;
	font-weight: 900;
	color: var(--color_primary);
	letter-spacing: -0.02em;
}

.brand_tagline {
	margin: 14px 0 0;
	font-size: 1rem;
	font-weight: 500;
	color: var(--color_text_muted);
}

/* ===== Splash page ===== */
.splash_wrap {
	justify-content: center;
	gap: 0;
}

.splash_wrap .brand_title {
	font-size: 4.2rem;
	margin-top: 20px;
}

.splash_footer {
	position: absolute;
	bottom: 32px;
	inset-inline: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.splash_footer_line {
	width: 64px;
	height: 3px;
	border-radius: 2px;
	background: var(--color_primary);
}

.powered_label {
	font-size: 0.65rem;
	letter-spacing: 0.35em;
	color: var(--color_text_muted);
	font-weight: 500;
}

.powered_logo {
	height: 22px;
	width: auto;
}

/* ===== Role select ===== */
.role_section {
	width: 100%;
	max-width: 420px;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.section_title {
	margin: 28px 0 0;
	font-size: 1.8rem;
	font-weight: 800;
	color: var(--color_secondary);
	text-align: center;
}

.section_subtitle {
	margin: 6px 0 0;
	font-size: 1rem;
	color: var(--color_text_muted);
	text-align: center;
}

.role_form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 28px;
}

.role_card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	width: 100%;
	padding: 20px 22px;
	border: none;
	border-radius: var(--radius_card);
	background: var(--color_base);
	box-shadow: var(--shadow_card);
	border-inline-start: 6px solid transparent;
	cursor: pointer;
	font-family: inherit;
	text-align: start;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.role_card:hover,
.role_card:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--color_secondary) 16%, transparent);
	outline: none;
}

.role_card:focus-visible {
	outline: 3px solid var(--color_primary);
	outline-offset: 2px;
}

.role_card_employer {
	border-inline-start-color: var(--color_primary);
}

.role_card_lifeguard {
	background: var(--color_accent_soft);
	border-inline-start-color: var(--color_accent);
}

.role_texts {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.role_title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--color_secondary);
}

.role_desc {
	font-size: 0.9rem;
	color: var(--color_text_muted);
}

.role_icon {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--color_base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	box-shadow: 0 2px 8px color-mix(in srgb, var(--color_secondary) 12%, transparent);
}

.role_card_employer .role_icon {
	background: color-mix(in srgb, var(--color_primary) 14%, var(--color_base));
	color: var(--color_primary_deep);
}

.role_card_lifeguard .role_icon {
	color: var(--color_accent);
}

.login_link_wrap {
	margin-top: 26px;
	text-align: center;
}

.link1 {
	color: var(--color_secondary);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}

.link1:hover {
	color: var(--color_primary_deep);
}

/* ===== Legal footer ===== */
.legal_footer {
	margin-top: 34px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding-bottom: 12px;
}

.legal_intro {
	font-size: 0.85rem;
	color: var(--color_text_muted);
	margin: 0;
}

.legal_links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.legal_links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.85rem;
	color: var(--color_secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.legal_links a:hover {
	color: var(--color_primary_deep);
}

.credit_logo {
	height: 18px;
	width: auto;
	opacity: 0.85;
	filter: grayscale(35%);
}

/* ===== Desktop ===== */
@media (min-width: 992px) {
	.role_page_grid {
		flex-direction: row;
		justify-content: center;
		align-items: center;
		gap: 0;
		min-height: 100vh;
	}

	.role_brand_col {
		flex: 1 1 50%;
		display: flex;
		justify-content: center;
		padding-inline-start: 40px;
		border-inline-start: 1px solid var(--color_line);
	}

	.role_main_col {
		flex: 1 1 50%;
		display: flex;
		justify-content: center;
		padding-inline-end: 40px;
	}

	.role_brand_col .brand_logo {
		width: 190px;
	}

	.role_brand_col .brand_title {
		font-size: 4.6rem;
	}

	.role_main_col .section_title {
		margin-top: 0;
		font-size: 2.1rem;
	}
}