/* Proflyer login/registration form, see templates/proflyer-register.php */

.pf_login_container {
	display: flex;
	gap: 40px;
}

.pf_login_container .pf_login_col {
	flex: 1;
	min-width: 0;
}

.pf_login_container table {
	width: 100%;
	border-collapse: collapse;
}

.pf_login_container td {
	padding: 4px 8px 4px 0;
	vertical-align: middle;
}

.pf_login_container input[type="text"],
.pf_login_container input[type="password"],
.pf_login_container input[type="tel"] {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.pf_login_container {
		flex-direction: column;
		gap: 32px;
	}

	/* Stack each label above its field */
	.pf_login_container table,
	.pf_login_container tbody,
	.pf_login_container tr,
	.pf_login_container td {
		display: block;
		width: 100%;
	}

	.pf_login_container tr {
		margin-bottom: 12px;
	}

	.pf_login_container td {
		padding: 0;
	}

	.pf_login_container td:first-child {
		margin-bottom: 4px;
	}

	/* Keep checkboxes on the same line as their label */
	.pf_login_container tr.pf_checkbox_row {
		display: flex;
		align-items: center;
		gap: 8px;
	}

	.pf_login_container tr.pf_checkbox_row td {
		width: auto;
		margin: 0;
	}

	/* 16px prevents iOS from zooming in when a field gets focus */
	.pf_login_container input[type="text"],
	.pf_login_container input[type="password"],
	.pf_login_container input[type="tel"] {
		font-size: 16px;
		padding: 10px;
	}

	.pf_login_container input[type="submit"] {
		width: 100%;
		margin: 8px 0;
	}
}

/* reCAPTCHA has a fixed width of 304px, shrink it on very narrow screens */
@media (max-width: 360px) {
	.pf_login_container .g-recaptcha {
		transform: scale(0.85);
		transform-origin: center top;
	}
}