/**
 * Registration Forms Styling
 * Centers and constrains registration forms to 600px on desktop, 80% on mobile
 *
 * @package Together_Theme
 */

/* Error message styling */
.tjb-message-error {
	background: #fee;
	border: 1px solid #fcc;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	color: #c33;
	font-size: 14px;
}

.tjb-message-error p {
	margin: 0;
}

/* Field error styling */
.tjb-form-field.has-error input,
.form-field.has-error input {
	border-color: #c33 !important;
	box-shadow: 0 0 0 3px rgba(204, 51, 51, 0.1) !important;
}

.tjb-field-error {
	display: block;
	color: #c33;
	font-size: 13px;
	margin-top: 6px;
	font-weight: 500;
}

/* Success message */
.tjb-message-success {
	background: #efe;
	border: 1px solid #cfc;
	border-radius: 8px;
	padding: 12px 16px;
	margin-bottom: 20px;
	color: #3c3;
	font-size: 14px;
}

.tjb-message-success p {
	margin: 0;
}

/* First, ensure entry-content centers its direct children on registration pages */
body.page-template-default .entry-content,
body.single-page .entry-content,
body.page-template-default article .entry-content,
body.single-page article .entry-content {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	max-width: 100% !important;
}

/* Override: Dashboard wrappers should not be centered or constrained */
.entry-content .tjb-employer-dashboard-wrapper,
.entry-content .tjb-candidate-dashboard-wrapper,
.site-main .entry-content .tjb-employer-dashboard-wrapper,
.site-main .entry-content .tjb-candidate-dashboard-wrapper {
	display: flex !important;
	align-items: flex-start !important;
	max-width: 1200px !important;
	margin: 0 auto !important;
	width: 100% !important;
}

/* Target the entry-content area that contains registration forms */
.entry-content .tjb-registration-wrapper,
.entry-content .tjb-employer-registration,
.entry-content .tjb-candidate-registration,
.entry-content .register-form-wrapper,
.entry-content .wp-job-board-pro-register-form-wrapper,
.entry-content .wp-job-board-pro-register-employer-form-wrapper,
.entry-content .wp-job-board-pro-register-candidate-form-wrapper,
.entry-content .wp-job-board-pro-register-form,
.entry-content form.register-form,
.entry-content form#registerform,
.entry-content form#registerform-employer,
.entry-content form#registerform-candidate,
.site-main .tjb-registration-wrapper,
.site-main .tjb-employer-registration,
.site-main .tjb-candidate-registration,
.site-main .register-form-wrapper,
.site-main .wp-job-board-pro-register-form-wrapper,
.site-main .wp-job-board-pro-register-employer-form-wrapper,
.site-main .wp-job-board-pro-register-candidate-form-wrapper,
.site-main .wp-job-board-pro-register-form,
.site-main form.register-form,
.site-main form#registerform,
.site-main form#registerform-employer,
.site-main form#registerform-candidate {
	max-width: 600px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding: 30px 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	display: block !important;
}

/* Ensure the form itself is also constrained */
.entry-content .tjb-registration-form,
.entry-content .tjb-registration-tab-content,
.entry-content .register-form-employer,
.entry-content .register-form-candidate,
.entry-content .wp-job-board-pro-register-form form,
.entry-content form.register-form,
.entry-content form#registerform,
.entry-content form#registerform-employer,
.entry-content form#registerform-candidate,
.site-main .tjb-registration-form,
.site-main .tjb-registration-tab-content,
.site-main .register-form-employer,
.site-main .register-form-candidate,
.site-main .wp-job-board-pro-register-form form,
.site-main form.register-form,
.site-main form#registerform,
.site-main form#registerform-employer,
.site-main form#registerform-candidate {
	max-width: 100% !important;
	width: 100% !important;
	margin: 0 auto !important;
}

/* Center form fields and ensure proper width */
.entry-content .tjb-form-field,
.entry-content .form-field,
.entry-content .register-form-employer .form-field,
.entry-content .register-form-candidate .form-field,
.entry-content .wp-job-board-pro-register-form .form-field,
.entry-content form.register-form .form-field,
.entry-content form#registerform .form-field,
.entry-content form#registerform-employer .form-field,
.entry-content form#registerform-candidate .form-field,
.site-main .tjb-form-field,
.site-main .form-field,
.site-main .register-form-employer .form-field,
.site-main .register-form-candidate .form-field,
.site-main .wp-job-board-pro-register-form .form-field,
.site-main form.register-form .form-field,
.site-main form#registerform .form-field,
.site-main form#registerform-employer .form-field,
.site-main form#registerform-candidate .form-field {
	width: 100% !important;
	max-width: 100% !important;
}

/* Ensure all input fields are properly sized with increased padding */
.entry-content .tjb-input,
.entry-content input[type="text"],
.entry-content input[type="email"],
.entry-content input[type="password"],
.entry-content input[type="url"],
.entry-content textarea,
.entry-content select,
.entry-content .register-form-employer input[type="text"],
.entry-content .register-form-employer input[type="email"],
.entry-content .register-form-employer input[type="password"],
.entry-content .register-form-candidate input[type="text"],
.entry-content .register-form-candidate input[type="email"],
.entry-content .register-form-candidate input[type="password"],
.entry-content .wp-job-board-pro-register-form input[type="text"],
.entry-content .wp-job-board-pro-register-form input[type="email"],
.entry-content .wp-job-board-pro-register-form input[type="password"],
.entry-content form.register-form input[type="text"],
.entry-content form.register-form input[type="email"],
.entry-content form.register-form input[type="password"],
.entry-content form#registerform input[type="text"],
.entry-content form#registerform input[type="email"],
.entry-content form#registerform input[type="password"],
.entry-content form#registerform-employer input[type="text"],
.entry-content form#registerform-employer input[type="email"],
.entry-content form#registerform-employer input[type="password"],
.entry-content form#registerform-candidate input[type="text"],
.entry-content form#registerform-candidate input[type="email"],
.entry-content form#registerform-candidate input[type="password"],
.site-main .tjb-input,
.site-main input[type="text"],
.site-main input[type="email"],
.site-main input[type="password"],
.site-main input[type="url"],
.site-main textarea,
.site-main select,
.site-main .register-form-employer input[type="text"],
.site-main .register-form-employer input[type="email"],
.site-main .register-form-employer input[type="password"],
.site-main .register-form-candidate input[type="text"],
.site-main .register-form-candidate input[type="email"],
.site-main .register-form-candidate input[type="password"],
.site-main .wp-job-board-pro-register-form input[type="text"],
.site-main .wp-job-board-pro-register-form input[type="email"],
.site-main .wp-job-board-pro-register-form input[type="password"],
.site-main form.register-form input[type="text"],
.site-main form.register-form input[type="email"],
.site-main form.register-form input[type="password"],
.site-main form#registerform input[type="text"],
.site-main form#registerform input[type="email"],
.site-main form#registerform input[type="password"],
.site-main form#registerform-employer input[type="text"],
.site-main form#registerform-employer input[type="email"],
.site-main form#registerform-employer input[type="password"],
.site-main form#registerform-candidate input[type="text"],
.site-main form#registerform-candidate input[type="email"],
.site-main form#registerform-candidate input[type="password"] {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	padding: 16px 20px !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	border-radius: 8px !important;
	border: 1px solid #ddd !important;
	transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* Enhanced focus state for better UX */
.entry-content .tjb-input:focus,
.entry-content input[type="text"]:focus,
.entry-content input[type="email"]:focus,
.entry-content input[type="password"]:focus,
.entry-content input[type="url"]:focus,
.entry-content textarea:focus,
.entry-content select:focus,
.entry-content .register-form-employer input:focus,
.entry-content .register-form-candidate input:focus,
.entry-content .wp-job-board-pro-register-form input:focus,
.entry-content form.register-form input:focus,
.entry-content form#registerform input:focus,
.entry-content form#registerform-employer input:focus,
.entry-content form#registerform-candidate input:focus,
.site-main .tjb-input:focus,
.site-main input[type="text"]:focus,
.site-main input[type="email"]:focus,
.site-main input[type="password"]:focus,
.site-main input[type="url"]:focus,
.site-main textarea:focus,
.site-main select:focus,
.site-main .register-form-employer input:focus,
.site-main .register-form-candidate input:focus,
.site-main .wp-job-board-pro-register-form input:focus,
.site-main form.register-form input:focus,
.site-main form#registerform input:focus,
.site-main form#registerform-employer input:focus,
.site-main form#registerform-candidate input:focus {
	outline: none !important;
	border-color: #447AB3 !important;
	box-shadow: 0 0 0 3px rgba(61, 78, 243, 0.1) !important;
}

/* Add spacing between form fields */
.entry-content .tjb-form-field,
.entry-content .form-field,
.entry-content .register-form-employer .form-field,
.entry-content .register-form-candidate .form-field,
.entry-content .wp-job-board-pro-register-form .form-field,
.entry-content form.register-form .form-field,
.entry-content form#registerform .form-field,
.entry-content form#registerform-employer .form-field,
.entry-content form#registerform-candidate .form-field,
.site-main .tjb-form-field,
.site-main .form-field,
.site-main .register-form-employer .form-field,
.site-main .register-form-candidate .form-field,
.site-main .wp-job-board-pro-register-form .form-field,
.site-main form.register-form .form-field,
.site-main form#registerform .form-field,
.site-main form#registerform-employer .form-field,
.site-main form#registerform-candidate .form-field {
	margin-bottom: 24px !important;
}

/* Style labels with better spacing */
.entry-content .tjb-form-field label,
.entry-content .form-field label,
.entry-content .register-form-employer .form-field label,
.entry-content .register-form-candidate .form-field label,
.entry-content .wp-job-board-pro-register-form .form-field label,
.entry-content form.register-form .form-field label,
.entry-content form#registerform .form-field label,
.entry-content form#registerform-employer .form-field label,
.entry-content form#registerform-candidate .form-field label,
.site-main .tjb-form-field label,
.site-main .form-field label,
.site-main .register-form-employer .form-field label,
.site-main .register-form-candidate .form-field label,
.site-main .wp-job-board-pro-register-form .form-field label,
.site-main form.register-form .form-field label,
.site-main form#registerform .form-field label,
.site-main form#registerform-employer .form-field label,
.site-main form#registerform-candidate .form-field label {
	display: block !important;
	font-weight: 600 !important;
	margin-bottom: 10px !important;
	color: #1a1a1a !important;
	font-size: 14px !important;
}

/* Style the register button with better padding */
.entry-content .tjb-form button[type="submit"],
.entry-content .tjb-form .button-primary,
.entry-content .tjb-form .button,
.entry-content form.register-form button[type="submit"],
.entry-content form.register-form .button-primary,
.entry-content form.register-form .button,
.entry-content form#registerform button[type="submit"],
.entry-content form#registerform-employer button[type="submit"],
.entry-content form#registerform-candidate button[type="submit"],
.entry-content .register-form-employer button[type="submit"],
.entry-content .register-form-candidate button[type="submit"],
.entry-content .wp-job-board-pro-register-form button[type="submit"],
.site-main .tjb-form button[type="submit"],
.site-main .tjb-form .button-primary,
.site-main .tjb-form .button,
.site-main form.register-form button[type="submit"],
.site-main form.register-form .button-primary,
.site-main form.register-form .button,
.site-main form#registerform button[type="submit"],
.site-main form#registerform-employer button[type="submit"],
.site-main form#registerform-candidate button[type="submit"],
.site-main .register-form-employer button[type="submit"],
.site-main .register-form-candidate button[type="submit"],
.site-main .wp-job-board-pro-register-form button[type="submit"] {
	padding: 16px 32px !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	border-radius: 8px !important;
	width: 100% !important;
	margin-top: 8px !important;
	transition: all 0.3s ease !important;
	cursor: pointer !important;
}

/* Global: Ensure white text on all blue buttons */
.button-primary,
button.button-primary,
a.button-primary,
input.button-primary[type="submit"],
input.button-primary[type="button"],
.wp-core-ui .button-primary,
.entry-content .button-primary,
.site-main .button-primary {
	color: #fff !important;
	background-color: #447AB3 !important;
	border-color: #447AB3 !important;
}

.button-primary:hover,
button.button-primary:hover,
a.button-primary:hover,
input.button-primary[type="submit"]:hover,
input.button-primary[type="button"]:hover,
.wp-core-ui .button-primary:hover,
.entry-content .button-primary:hover,
.site-main .button-primary:hover {
	color: #fff !important;
	background-color: #0052a3 !important;
	border-color: #0052a3 !important;
}

.button-primary:focus,
button.button-primary:focus,
a.button-primary:focus,
input.button-primary[type="submit"]:focus,
input.button-primary[type="button"]:focus,
.wp-core-ui .button-primary:focus,
.entry-content .button-primary:focus,
.site-main .button-primary:focus {
	color: #fff !important;
}

/* Center titles */
.entry-content .tjb-registration-title,
.entry-content .register-form-wrapper h2,
.entry-content .wp-job-board-pro-register-form-wrapper h2,
.entry-content .tjb-registration-wrapper h2,
.entry-content .tjb-employer-registration h2,
.entry-content .tjb-candidate-registration h2,
.entry-content .entry-title,
.site-main .tjb-registration-title,
.site-main .register-form-wrapper h2,
.site-main .wp-job-board-pro-register-form-wrapper h2,
.site-main .tjb-registration-wrapper h2,
.site-main .tjb-employer-registration h2,
.site-main .tjb-candidate-registration h2 {
	text-align: center !important;
}

/* Center the entry-title on pages (registration forms keep 600px via their own rules) */
body.page-template-default .entry-title,
body.single-page .entry-title,
body.page-template-default article .entry-title,
body.single-page article .entry-title {
	text-align: center !important;
	max-width: 1200px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: 100% !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
	.entry-content .tjb-registration-wrapper,
	.entry-content .tjb-employer-registration,
	.entry-content .tjb-candidate-registration,
	.entry-content .register-form-wrapper,
	.entry-content .wp-job-board-pro-register-form-wrapper,
	.entry-content .wp-job-board-pro-register-employer-form-wrapper,
	.entry-content .wp-job-board-pro-register-candidate-form-wrapper,
	.entry-content .wp-job-board-pro-register-form,
	.entry-content form.register-form,
	.entry-content form#registerform,
	.entry-content form#registerform-employer,
	.entry-content form#registerform-candidate,
	.site-main .tjb-registration-wrapper,
	.site-main .tjb-employer-registration,
	.site-main .tjb-candidate-registration,
	.site-main .register-form-wrapper,
	.site-main .wp-job-board-pro-register-form-wrapper,
	.site-main .wp-job-board-pro-register-employer-form-wrapper,
	.site-main .wp-job-board-pro-register-candidate-form-wrapper,
	.site-main .wp-job-board-pro-register-form,
	.site-main form.register-form,
	.site-main form#registerform,
	.site-main form#registerform-employer,
	.site-main form#registerform-candidate {
		max-width: 80% !important;
		padding: 20px 15px !important;
	}
	
	body.page-template-default .entry-title,
	body.single-page .entry-title {
		max-width: 80% !important;
	}
}