/* ==========================================================
   TELERADIOLOGYHUB — JOIN PAGE V3
   Scoped to /join and Fabrik Form 4
   ========================================================== */

.join-page {

	--thub-ink: #102b46;
	--thub-ink-deep: #092f3a;

	--thub-body: #617385;
	--thub-soft: #8b99a6;

	--thub-accent: #087f86;
	--thub-accent-2: #159188;
	--thub-accent-soft: #edf8f7;

	--thub-border: #dce6ea;
	--thub-border-soft: #ebf0f2;

	--thub-surface: #ffffff;
	--thub-page: #f7f9f9;

	color: var(--thub-ink);
}


/* ==========================================================
   MAIN WRAPPER
   ========================================================== */

.join-page .container-component {
	max-width: none;
}

.join-page .thub-join-shell {
	max-width: 1120px;
	margin: 0 auto;
	padding: 38px 24px 70px;
}


/* ==========================================================
   HERO
   ========================================================== */

.join-page .thub-join-hero {
	max-width: 690px;
	margin: 0 auto 32px;
	text-align: center;
}

.join-page .thub-join-eyebrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	margin-bottom: 12px;
	padding: 5px 12px;

	border: 1px solid #d9e8e9;
	border-radius: 999px;

	background: #f7fbfb;

	color: var(--thub-accent);

	font-size: 0.72rem;
	font-weight: 750;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.join-page .thub-join-hero h1 {
	margin: 0 0 10px;

	color: var(--thub-ink);

	font-size: clamp(2rem, 3.8vw, 2.8rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.12;
}

.join-page .thub-join-hero p {
	max-width: 650px;
	margin: 0 auto;

	color: var(--thub-body);

	font-size: 0.98rem;
	line-height: 1.65;
}


/* ==========================================================
   ONE UNIFIED REGISTRATION PANEL
   ========================================================== */

.join-page .thub-join-grid {
	display: grid;

	grid-template-columns:
		minmax(330px, 0.88fr)
		minmax(500px, 1.12fr);

	gap: 0;

	max-width: 1040px;
	margin: 0 auto;

	overflow: hidden;

	border: 1px solid var(--thub-border);
	border-radius: 20px;

	background: var(--thub-surface);

	box-shadow:
		0 18px 46px rgba(16, 43, 70, 0.07);
}


/* ==========================================================
   LEFT — PLATFORM CONTEXT
   ========================================================== */

.join-page .thub-join-intro {
	padding: 42px 36px;

	border: 0;
	border-radius: 0;

	background:
		linear-gradient(
			155deg,
			#093b45 0%,
			#0d5e63 53%,
			#16867f 100%
		);

	color: #eaf5f3;
}

.join-page .thub-join-intro-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;

	margin-bottom: 24px;
	padding: 6px 12px;

	border: 1px solid rgba(255,255,255,0.17);
	border-radius: 999px;

	background: rgba(255,255,255,0.10);

	color: #def1ee;

	font-size: 0.76rem;
	font-weight: 700;
}

.join-page .thub-join-intro-badge .fa {
	color: #dff5f1;
}

.join-page .thub-join-intro h2 {
	margin: 0 0 12px;

	color: #ffffff;

	font-size: 1.55rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.28;
}

.join-page .thub-join-intro-lead {
	margin: 0 0 31px;

	color: #c8e1de;

	font-size: 0.91rem;
	line-height: 1.65;
}


/* ==========================================================
   LEFT — BENEFITS
   ========================================================== */

.join-page .thub-join-benefit {
	display: grid;

	grid-template-columns: 38px minmax(0, 1fr);

	gap: 13px;

	margin: 0 0 21px;
}

.join-page .thub-join-benefit:last-of-type {
	margin-bottom: 0;
}

.join-page .thub-join-benefit-icon {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 38px;
	height: 38px;

	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 10px;

	background: rgba(255,255,255,0.10);

	color: #eaf7f5;

	font-size: 0.9rem;
}

.join-page .thub-join-benefit h3 {
	margin: 0 0 3px;

	color: #f6fbfa;

	font-size: 0.89rem;
	font-weight: 750;
}

.join-page .thub-join-benefit p {
	margin: 0;

	color: #bfdbd7;

	font-size: 0.8rem;
	line-height: 1.55;
}


/* ==========================================================
   LEFT — TRUST ROW
   ========================================================== */

.join-page .thub-join-trust {
	display: flex;
	flex-wrap: wrap;

	gap: 10px 15px;

	margin-top: 31px;
	padding-top: 21px;

	border-top: 1px solid rgba(255,255,255,0.15);

	color: #b7d9d5;

	font-size: 0.71rem;
	font-weight: 650;
}

.join-page .thub-join-trust span {
	display: inline-flex;
	align-items: center;

	gap: 5px;
}

.join-page .thub-join-trust i {
	color: #d8f2ee;
}


/* ==========================================================
   RIGHT — FORM
   ========================================================== */

.join-page .thub-join-card {
	padding: 40px 42px;

	border: 0;
	border-radius: 0;

	background: #ffffff;

	box-shadow: none;
}

.join-page .thub-join-card-header {
	margin-bottom: 25px;
}

.join-page .thub-join-card-header h2 {
	margin: 0 0 5px;

	color: var(--thub-ink);

	font-size: 1.52rem;
	font-weight: 800;
	letter-spacing: -0.015em;
}

.join-page .thub-join-card-header > p {
	margin: 0;

	color: var(--thub-body);

	font-size: 0.88rem;
}


/* ==========================================================
   PRIVACY NOTE
   ========================================================== */

.join-page .thub-join-security-note {
	display: flex;
	align-items: flex-start;

	gap: 8px;

	margin-top: 13px;
	padding: 10px 12px;

	border: 1px solid #dcecea;
	border-radius: 9px;

	background: #f2f9f8;

	color: #536f72;

	font-size: 0.75rem;
	line-height: 1.45;
}

.join-page .thub-join-security-note .fa-shield-halved {
	margin-top: 2px;

	color: var(--thub-accent);
}


/* ==========================================================
   REMOVE UNUSED FABRIK UI
   ========================================================== */

.join-page #form_4 legend.legend {
	display: none !important;
}

.join-page #form_4 .thub-fabrik-top-actions {
	display: none !important;
}

.join-page #form_4 .fabrikGroup {
	margin: 0;
	padding: 0;

	border: 0;
}


/* ==========================================================
   STANDARD FORM FIELDS
   LABEL ABOVE INPUT
   ========================================================== */

.join-page #form_4
.fabrikElementContainer:not(.d-none) {
	margin: 0 0 18px !important;
}


/*
   Fabrik generates:

   .fabrikElementContainer
      > .row
          > label.col-sm-2
          > .fabrikElement.col-sm-10
*/

.join-page #form_4
.fabrikElementContainer:not(.d-none)
> .row {
	display: block !important;

	margin: 0 !important;
}


/* LABEL */

.join-page #form_4
.fabrikElementContainer:not(.d-none)
> .row
> .fabrikLabel {
	display: flex !important;
	align-items: center;

	gap: 7px;

	width: 100% !important;
	max-width: none !important;

	margin: 0 0 7px !important;
	padding: 0 !important;

	color: var(--thub-ink);

	font-size: 0.84rem;
	font-weight: 750;
	line-height: 1.35;
}

.join-page #form_4 .fabrikLabel .fa {
	color: #738694;

	font-size: 0.77rem;
}


/* INPUT WRAPPER */

.join-page #form_4
.fabrikElementContainer:not(.d-none)
> .row
> .fabrikElement {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;

	flex: none !important;
}


/* INPUT */

.join-page #form_4 .form-control,
.join-page #form_4 .form-select {
	width: 100% !important;
	max-width: none !important;

	min-height: 47px;

	padding: 10px 14px;

	border: 1px solid #d3dfe4;
	border-radius: 9px;

	background: #fbfcfc;

	color: var(--thub-ink);

	font-size: 0.9rem;

	box-shadow: none;

	transition:
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		background 0.16s ease;
}

.join-page #form_4 .form-control:hover {
	border-color: #becdd4;
}

.join-page #form_4 .form-control:focus,
.join-page #form_4 .form-select:focus {
	border-color: var(--thub-accent);

	background: #ffffff;

	box-shadow:
		0 0 0 3px rgba(8,127,134,0.10);

	outline: none;
}

.join-page #form_4 input::placeholder {
	color: #95a3ad;
}


/* ==========================================================
   PASSWORD
   ========================================================== */

.join-page #form_4
.fb_el_rad11_users_registration___password
.progress.strength {
	width: 100% !important;
	max-width: none !important;

	height: 5px;

	margin: 8px 0 10px !important;

	overflow: hidden;

	border-radius: 999px;

	background: #e8eef0;
}


/*
   Do NOT override Fabrik's weak / medium / strong colors.
   Fabrik continues controlling the actual state.
*/

.join-page #form_4
.fb_el_rad11_users_registration___password
.progress-bar {
	height: 100%;

	border-radius: 999px;

	transition: width 0.22s ease;
}

.join-page #form_4
#rad11_users_registration___password_check {
	margin-top: 0;
}


/* ==========================================================
   TERMS — REAL FABRIK DOM
   ========================================================== */

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted {
	margin: 4px 0 19px !important;
}


/*
   Actual structure:

   container
      > .row
         > empty/icon label
         > .fabrikElement
         > .fabrikErrorMessage
         > tipSide span containing consent sentence
*/

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row {
	display: grid !important;

	grid-template-columns: 20px minmax(0,1fr);

	column-gap: 10px;
	row-gap: 5px;

	align-items: start;

	margin: 0 !important;

	padding: 12px 13px;

	border: 1px solid var(--thub-border-soft);
	border-radius: 9px;

	background: #fafcfc;
}


/* Decorative empty Fabrik label */

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row
> .fabrikLabel {
	display: none !important;
}


/* CHECKBOX WRAPPER */

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row
> .fabrikElement {
	grid-column: 1;
	grid-row: 1;

	display: block !important;

	width: 20px !important;
	max-width: 20px !important;

	margin: 0 !important;
	padding: 0 !important;
}

.join-page #form_4
#rad11_users_registration___terms_accepted
> .row {
	display: block !important;

	margin: 0 !important;
}

.join-page #form_4
#rad11_users_registration___terms_accepted
.form-check {
	width: 20px !important;
	max-width: 20px !important;

	margin: 0 !important;
	padding: 0 !important;
}

.join-page #form_4
#rad11_users_registration___terms_accepted
.form-check-input {
	float: none !important;

	width: 17px !important;
	height: 17px !important;

	margin: 1px 0 0 !important;

	border-color: #b8c9ce;

	cursor: pointer;

	accent-color: var(--thub-accent);
}


/* Hide redundant Yes */

.join-page #form_4
#rad11_users_registration___terms_accepted
.form-check-label {
	display: none !important;
}


/* Actual consent sentence */

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row
> span:last-child {
	display: block !important;

	grid-column: 2;
	grid-row: 1;

	width: auto !important;
	min-width: 0;

	margin: 0 !important;
	padding: 0 !important;

	color: #334d61;

	font-size: 0.8rem;
	font-weight: 600;
	line-height: 1.5;
}


/* Don't render tooltip icon as visible content */

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row
> span:last-child
> .fa-question-circle {
	display: none !important;
}


/* Terms validation */

.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row
> .fabrikErrorMessage {
	grid-column: 2;
	grid-row: 2;

	width: 100% !important;

	margin: 0 !important;
	padding: 0 !important;
}


/* ==========================================================
   CAPTCHA
   ========================================================== */

.join-page #form_4
.fb_el_rad11_users_registration___captcha {
	margin: 0 0 20px !important;
	padding-top: 18px;

	border-top: 1px solid var(--thub-border-soft);
}


/*
   Captcha label above everything
*/

.join-page #form_4
.fb_el_rad11_users_registration___captcha
> .row {
	display: block !important;

	margin: 0 !important;
}


/* Captcha label */

.join-page #form_4
.fb_el_rad11_users_registration___captcha
> .row
> .fabrikLabel {
	display: block !important;

	width: 100% !important;
	max-width: none !important;

	margin: 0 0 8px !important;
	padding: 0 !important;

	color: var(--thub-ink);

	font-size: 0.84rem;
	font-weight: 750;
}


/* Image + input on same row */

.join-page #form_4
.fb_el_rad11_users_registration___captcha
> .row
> .fabrikElement {
	display: flex !important;

	align-items: center;
	flex-wrap: wrap;

	gap: 12px;

	width: 100% !important;
	max-width: none !important;

	margin: 0 !important;
	padding: 0 !important;
}

.join-page #form_4
.fb_el_rad11_users_registration___captcha img {
	display: block;

	width: auto;
	height: auto;

	max-width: 150px;

	margin: 0;

	border: 1px solid #dfe7e9;
	border-radius: 7px;

	background: #f4f6f7;
}

.join-page #form_4
.fb_el_rad11_users_registration___captcha
.captcha_input {
	flex: 1 1 170px;

	max-width: 220px;

	margin: 0 !important;
}

.join-page #form_4
.fb_el_rad11_users_registration___captcha
.captcha_input input {
	width: 100% !important;

	min-height: 43px;
}


/* Captcha validation */

.join-page #form_4
.fb_el_rad11_users_registration___captcha
> .row
> .fabrikErrorMessage {
	width: 100% !important;

	margin: 5px 0 0 !important;
	padding: 0 !important;
}


/* ==========================================================
   VALIDATION
   ========================================================== */

.join-page #form_4 .fabrikErrorMessage {
	color: #b44545;

	font-size: 0.77rem;
	line-height: 1.4;
}

.join-page #form_4 .fabrikMainError {
	margin-bottom: 18px;

	border-radius: 9px;

	font-size: 0.84rem;
}


/* ==========================================================
   PRIMARY CTA
   ========================================================== */

.join-page #form_4 .fabrikActions {
	margin-top: 7px !important;
}

.join-page #form_4 .fabrikActions .btn-toolbar,
.join-page #form_4 .fabrikActions .btn-group {
	display: block;

	width: 100%;
}

.join-page #form_4 .create_account {
	width: 100%;

	min-height: 50px;

	padding: 12px 18px;

	border: 1px solid var(--thub-ink);
	border-radius: 9px;

	background: var(--thub-ink);

	color: #ffffff;

	font-size: 0.94rem;
	font-weight: 750;

	box-shadow: none;

	transition:
		background 0.16s ease,
		border-color 0.16s ease,
		box-shadow 0.16s ease,
		transform 0.16s ease;
}

.join-page #form_4 .create_account:hover,
.join-page #form_4 .create_account:focus {
	border-color: var(--thub-accent);

	background: var(--thub-accent);

	box-shadow:
		0 8px 20px rgba(8,127,134,0.15);

	transform: translateY(-1px);
}


/* ==========================================================
   AFTER SUBMISSION INFO
   ========================================================== */

.join-page .thub-join-after-submit {
	margin-top: 20px;
	padding-top: 17px;

	border-top: 1px solid var(--thub-border-soft);

	text-align: center;
}

.join-page .thub-join-after-submit p {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 6px;

	margin: 0 0 9px;

	color: #84929e;

	font-size: 0.75rem;
	line-height: 1.45;
}

.join-page .thub-join-after-submit p .fa-envelope {
	color: var(--thub-accent);
}

.join-page .thub-join-signin {
	color: var(--thub-body);

	font-size: 0.82rem;
}

.join-page .thub-join-signin a {
	margin-left: 3px;

	color: var(--thub-accent);

	font-weight: 750;

	text-decoration: none;
}

.join-page .thub-join-signin a:hover {
	text-decoration: underline;
}


/* ==========================================================
   VERY SUBTLE ENTRY MOTION
   ========================================================== */

@media (prefers-reduced-motion: no-preference) {

	.join-page .thub-join-grid {
		animation:
			thubJoinEnter 0.4s ease both;
	}

	@keyframes thubJoinEnter {

		from {
			opacity: 0;
			transform: translateY(7px);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 900px) {

	.join-page .thub-join-shell {
		max-width: 720px;

		padding-top: 30px;
	}

	.join-page .thub-join-grid {
		grid-template-columns: 1fr;
	}

	.join-page .thub-join-intro {
		padding: 32px;
	}

	.join-page .thub-join-card {
		padding: 34px;
	}

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 640px) {

	.join-page .thub-join-shell {
		padding: 25px 14px 45px;
	}

	.join-page .thub-join-hero {
		margin-bottom: 23px;

		text-align: left;
	}

	.join-page .thub-join-eyebrow {
		margin-bottom: 9px;
	}

	.join-page .thub-join-hero h1 {
		font-size: 1.95rem;
	}

	.join-page .thub-join-hero p {
		font-size: 0.91rem;
	}


	/*
	   On small phones the user came here to register.
	   Don't force marketing copy above the form.
	*/

	.join-page .thub-join-intro {
		display: none;
	}

	.join-page .thub-join-grid {
		display: block;

		border-radius: 15px;
	}

	.join-page .thub-join-card {
		padding: 25px 20px;
	}

	.join-page .thub-join-card-header h2 {
		font-size: 1.37rem;
	}

	.join-page #form_4
	.fb_el_rad11_users_registration___captcha
	> .row
	> .fabrikElement {
		align-items: flex-start;
	}

	.join-page #form_4
	.fb_el_rad11_users_registration___captcha
	.captcha_input {
		flex-basis: 100%;

		max-width: none;
	}

}




/* ==========================================================
   V3.1 FINAL REFINEMENTS
   ========================================================== */

/* Use the full left-panel height more intentionally */
.join-page .thub-join-intro {
	display: flex;
	flex-direction: column;
}

/* Push trust indicators toward the bottom of the teal panel */
.join-page .thub-join-trust {
	margin-top: auto;
	padding-top: 22px;
}

/* Slightly tighten standard field rhythm */
.join-page #form_4
.fabrikElementContainer:not(.d-none) {
	margin-bottom: 16px !important;
}

/* Slightly reduce padding in consent box */
.join-page #form_4
.fb_el_rad11_users_registration___terms_accepted
> .row {
	padding: 10px 12px;
}

/* Keep captcha image and input on one horizontal row on desktop */
.join-page #form_4
.fb_el_rad11_users_registration___captcha
> .row
> .fabrikElement {
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
}

.join-page #form_4
.fb_el_rad11_users_registration___captcha
.captcha_input {
	flex: 0 0 180px !important;
	width: 180px !important;
	max-width: 180px !important;
	margin: 0 !important;
}

.join-page #form_4
.fb_el_rad11_users_registration___captcha
.captcha_input input {
	width: 100% !important;
}

/* Mobile: restore stacked captcha for comfortable input width */
@media (max-width: 640px) {

	.join-page #form_4
	.fb_el_rad11_users_registration___captcha
	> .row
	> .fabrikElement {
		flex-direction: column !important;
		align-items: flex-start !important;
		flex-wrap: wrap !important;
	}

	.join-page #form_4
	.fb_el_rad11_users_registration___captcha
	.captcha_input {
		flex: 0 0 auto !important;
		width: 100% !important;
		max-width: none !important;
	}

}

/* ==========================================================
   END V3.1 FINAL REFINEMENTS
   ========================================================== */

/* ==========================================================
   END — TELERADIOLOGYHUB JOIN V3
   ========================================================== */