/* Register as a Buyer or Tenant
   (directive_hastings.php -> user_register.php -> applicant_register.php).

   applicant_register.php is the shared core applicant form and prints its own
   <style> blocks AFTER this file is linked in <head>, so its global `input`,
   `select`, `.form-control`, `.field-title`, `.reg_box`, `.reg_hd` and mobile
   rules win on source order. Every rule here is therefore scoped to
   #registerContainer and out-specifies the page; !important is only used where
   the page itself uses !important (field-title weight, .form-control radius,
   the mobile .reg_box margin and h1 size, the add-button offsets) or to beat
   an inline style (captcha refresh icon, captcha row margin, the "to" cell).
   The JS-added phone rows, radius blocks and feature sets reuse the same
   classes, so no extra hooks are needed. */

/* ---------- Page shell ---------- */
body #registerContainer{
	background-color:var(--light-color);
	color:var(--dark-color);
	padding:calc(var(--header-height) + 50px) 0 90px;
	min-height:0;
}
#registerContainer > .container{
	max-width:1160px;
}

/* ---------- Card ---------- */
#registerContainer .reg_box{
	display:block;
	width:100%;
	max-width:1080px;
	margin:0 auto;
	overflow:hidden;
	background-color:#fff;
	border:1px solid #ececec;
	border-radius:10px;
	box-shadow:var(--box-shadow);
	font-family:var(--reg);
	font-size:var(--fs-body-sm);
}
#registerContainer .reg_box_inner,
#registerContainer #pageContent,
#registerContainer #content_holder{
	padding:0;
	background:transparent;
	color:var(--dark-color);
}

/* ---------- Title band ---------- */
#registerContainer .popup-title{
	margin:0;
	padding:38px 48px;
	background-color:var(--main-color);
	text-align:left;
}
#registerContainer .popup-title h1,
#registerContainer .popup-title .reg_hd{
	margin:0;
	color:#fff;
	font-family:var(--bold);
	font-size:clamp(30px, 3.2vw, 40px);
	font-weight:400;
	line-height:1.2;
	text-align:left;
}

/* ---------- Form body ----------
   The captcha and submit live outside .applicant_form_des, so the horizontal
   padding sits on the form itself and the title band stays flush to the card. */
#registerContainer #applicant_form{
	padding:36px 48px 40px;
}
#registerContainer .applicant_form_des{
	padding:0;
}
#registerContainer .form_row_one{
	margin:0;
	padding:0;
}
#registerContainer .form-group{
	margin-bottom:20px;
}
#registerContainer .pl0{
	padding-left:0;
}

/* ---------- Labels ---------- */
#registerContainer .field-title{
	display:block;
	margin:0 0 8px;
	color:var(--dark-color);
	font-family:var(--bold);
	font-size:17px;
	font-weight:400 !important;
	line-height:1.35;
	text-transform:none !important;
}
#registerContainer .applicant_form_des > .form-group > .field-title,
#registerContainer [id^="search_attr_"] > .field-title{
	font-size:18px;
	color:var(--main-color);
}

/* ---------- Fields ---------- */
#registerContainer input.form-control,
#registerContainer textarea.form-control{
	display:block;
	width:100%;
	height:50px;
	min-height:50px;
	padding:10px 16px;
	color:#333;
	background-color:#fff;
	border:1px solid #dcdcdc;
	border-radius:10px !important;
	box-shadow:none;
	font-family:var(--reg);
	font-size:var(--fs-body-sm);
	line-height:1.4;
	transition:var(--ease);
}
#registerContainer textarea.form-control{
	height:auto;
	min-height:120px;
	resize:vertical;
}
#registerContainer select.form-control{
	display:block;
	width:100%;
	height:50px;
	min-height:50px;
	padding:0 44px 0 16px;
	color:#333;
	background-color:#fff;
	background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23303e5a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat:no-repeat;
	background-position:right 18px center;
	background-size:14px 9px;
	border:1px solid #dcdcdc;
	border-radius:10px !important;
	box-shadow:none;
	font-family:var(--reg);
	font-size:var(--fs-body-sm);
	line-height:48px;
	cursor:pointer;
	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;
	transition:var(--ease);
}
#registerContainer select.form-control::-ms-expand{
	display:none;
}
#registerContainer .form-control::placeholder{
	color:#9aa1ad;
	opacity:1;
}
#registerContainer .form-control:focus{
	border-color:var(--main-color);
	box-shadow:0 0 0 3px rgba(48, 62, 90, .12);
	outline:0;
}

/* ---------- Additional information: add / remove rows ---------- */
#registerContainer .input-group{
	margin-bottom:14px;
}
#registerContainer .input-group .sel-ai{
	padding-left:0;
}
#registerContainer .input-group-addon,
#registerContainer .input-group-addon:last-child{
	display:flex;
	align-items:center;
	width:auto;
	padding:0 0 0 8px;
	background:none;
	border:0;
	border-radius:0 !important;
}
#registerContainer .input-group .btn-info.add-ai,
#registerContainer .radius_btn_grp .btn-info.plus_radius{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:50px;
	height:50px;
	min-width:50px;
	padding:0;
	color:#fff;
	background-color:var(--main-color);
	border:1px solid var(--main-color);
	border-radius:50%;
	box-shadow:none;
	font-family:var(--reg);
	font-size:22px;
	font-weight:400;
	line-height:1;
	cursor:pointer;
	transition:var(--ease);
}
#registerContainer .add-ai,
#registerContainer .plus_radius{
	position:static !important;
	top:auto !important;
	margin:0 !important;
}
#registerContainer .radius_btn_grp .btn-info.plus_radius{
	margin-left:6px !important;
}
#registerContainer .input-group .btn-info.add-ai:hover,
#registerContainer .radius_btn_grp .btn-info.plus_radius:hover{
	color:#fff;
	background-color:var(--secondary-color);
	border-color:var(--secondary-color);
}
#registerContainer .input-group .btn-info.add-ai.btn_red,
#registerContainer .radius_btn_grp .btn-info.plus_radius.btn_red{
	color:var(--main-color);
	background-color:#fff;
	border:1px solid #dcdcdc;
	font-size:18px;
}
#registerContainer .input-group .btn-info.add-ai.btn_red:hover,
#registerContainer .radius_btn_grp .btn-info.plus_radius.btn_red:hover{
	color:#fff;
	background-color:var(--secondary-color);
	border-color:var(--secondary-color);
}
#registerContainer #additional_contact .input-group{
	margin:12px 0 0;
}

/* ---------- Search criteria ---------- */
#registerContainer h4.searc_cri_title{
	margin:8px 0 6px;
	padding:0 0 14px;
	border-bottom:1px solid #ececec;
}
#registerContainer h4.searc_cri_title strong{
	color:var(--dark-color);
	font-family:var(--bold);
	font-size:27px;
	font-weight:400;
	line-height:1.2;
}
#registerContainer .search_criteria_form{
	padding-top:26px;
}
/* labels sit beside the 50px controls on these rows, not above them */
#registerContainer .search_criteria_form > .field-title.col-md-2{
	margin:0;
	padding-top:0;
	font-size:17px;
	line-height:50px;
}
/* plain text cells: "to" and "Expires on" */
#registerContainer .search_criteria_form > .col-md-1,
#registerContainer .search_criteria_form > .col-md-2:not(.input_outer):not(.field-title){
	padding-top:0;
	color:#666;
	font-family:var(--reg);
	font-size:17px;
	line-height:50px;
}
/* the inline width:2% on the "to" cell squeezes it to nothing */
#registerContainer .col-md-1[style*="width:2%"],
#registerContainer .col-md-1[style*="width: 2%"]{
	width:auto !important;
	text-align:center;
}
#registerContainer [id^="search_attr_"]{
	margin-bottom:10px;
}
/* each JS-added search set reads as its own group */
#registerContainer [id^="radiusblock_"]{
	margin-top:24px;
	padding-top:24px;
	border-top:1px dashed #ececec;
}

/* ---------- Feature checklist (applicant_filter.php) ---------- */
#registerContainer [id^="search_attr_"] > .field-title + div{
	display:flow-root;
	margin:0 -10px;
}
#registerContainer [id^="search_attr_"] > .field-title + div .clear{
	display:none;
}
#registerContainer .boolean_cls{
	float:left;
	width:33.3333%;
	min-height:44px;
	padding:6px 10px;
	box-sizing:border-box;
}
#registerContainer .boolean_cls > label{
	display:block;
	margin:0 0 4px;
	color:var(--dark-color);
	font-family:var(--reg);
	font-size:15px;
	line-height:1.35;
}
#registerContainer .boolean_cls .form-control{
	height:44px;
	min-height:44px;
	padding:8px 12px;
	font-size:16px;
}
#registerContainer .boolean_cls select.form-control{
	padding:0 40px 0 12px;
	line-height:42px;
}
#registerContainer input[type="checkbox"].boolean_name_cls{
	width:18px;
	height:18px !important;
	min-height:18px;
	margin:0 8px 0 0;
	padding:0;
	accent-color:var(--main-color);
	vertical-align:middle;
	cursor:pointer;
}
#registerContainer .boolean_cls span{
	color:#333;
	font-family:var(--reg);
	font-size:16px;
	line-height:1.35;
	vertical-align:middle;
}

/* ---------- Captcha ---------- */
#registerContainer .captcha_div{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px;
	margin:26px 0 10px !important;
	padding:16px 18px;
	background-color:#faf9fb;
	border:1px solid #ececec;
	border-radius:10px;
}
/* form_field is an unknown inline element: make it the row so the refresh
   icon stays beside the captcha image and the input fills the rest */
#registerContainer .captcha_div form_field{
	display:flex;
	align-items:center;
	gap:14px;
}
#registerContainer .captcha_div form_field:last-child{
	flex:1 1 260px;
	min-width:0;
}
#registerContainer .captcha_div img{
	display:block;
	width:auto;
	max-width:100%;
	height:auto;
	border:1px solid #dcdcdc;
	border-radius:8px;
}
#registerContainer .captcha_div .fa_refresh_icon{
	margin:0 !important;
	padding:12px;
	color:var(--main-color) !important;
	background-color:#fff;
	border:1px solid #dcdcdc;
	border-radius:50%;
	font-size:22px !important;
	line-height:1;
	transition:var(--ease);
}
#registerContainer .captcha_div .fa_refresh_icon:hover{
	color:#fff !important;
	background-color:var(--secondary-color);
	border-color:var(--secondary-color);
}
#registerContainer #captcha_holder{
	flex:1 1 220px;
	min-width:0;
	max-width:360px;
	height:50px;
	padding:10px 16px;
	color:#333;
	background-color:#fff;
	border:1px solid #dcdcdc;
	border-radius:10px;
	box-shadow:none;
	font-family:var(--reg);
	font-size:var(--fs-body-sm);
}
#registerContainer #captcha_holder:focus{
	border-color:var(--main-color);
	outline:0;
}

/* ---------- Submit ---------- */
#registerContainer .comm_btn_sub{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:16px;
	margin-top:6px;
}
#registerContainer .comm_btn_sub .common_button{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:220px;
	padding:15px 48px;
	color:#fff;
	background-color:var(--main-color);
	border:2px solid var(--main-color);
	border-radius:10px;
	box-shadow:none;
	font-family:var(--reg);
	font-size:var(--fs-button);
	letter-spacing:.06em;
	line-height:1.2;
	transition:var(--ease);
}
#registerContainer .comm_btn_sub .common_button:hover{
	color:#fff;
	background-color:var(--secondary-color);
	border-color:var(--secondary-color);
}
#registerContainer .comm_btn_sub .common_button:focus{
	outline:0;
}
#registerContainer #applicant_submit_status{
	font-size:16px;
}
#registerContainer .datepicker{
	padding:8px;
	border:1px solid #dcdcdc;
	border-radius:10px;
	box-shadow:var(--box-shadow);
	font-family:var(--reg);
	font-size:15px;
}

/* ---------- Already logged in ---------- */
#registerContainer .row.talbies_register{
	max-width:820px;
	margin:0 auto;
	padding:40px 30px;
	background-color:#fff;
	border:1px solid #ececec;
	border-radius:10px;
	box-shadow:var(--box-shadow);
}
#registerContainer .row.talbies_register h2{
	margin-bottom:14px;
	color:var(--dark-color);
	font-family:var(--bold);
	font-size:26px;
	font-weight:400;
	line-height:1.35;
}
#search_attr_0 > div > .clear {
    width: 100%;
    min-height: 1px;
    display: block !important;
}
.captcha_div form_field {
    display: flex;
    align-items: center;
}

/* ---------- Responsive ---------- */
@media (max-width:1090px){
	body #registerContainer{
		padding-top:calc(var(--header-height) + 30px);
	}
	#registerContainer #applicant_form{
		padding:32px 32px 32px;
	}
	#registerContainer .popup-title{
		padding:28px 32px;
	}
}
@media (max-width:991px){
	#registerContainer .boolean_cls{
		width:50%;
	}
	#registerContainer .radius_btn_grp{
		padding:0 !important;
		margin-left:0 !important;
	}
}
@media (max-width:767px){
	body #registerContainer{
		padding-top:calc(var(--header-height) + 20px);
		padding-bottom:60px;
	}
	#registerContainer #applicant_form{
		padding:24px 20px 28px;
	}
	#registerContainer .popup-title{
		padding:24px 20px;
	}
	#registerContainer .popup-title h1,
	#registerContainer .popup-title .reg_hd{
		font-size:clamp(24px, 7vw, 32px);
	}
	#registerContainer .field-title{
		margin-bottom:6px;
		font-size:16px;
	}
	#registerContainer .form_row_one > [class*="col-"]{
		padding-left:0;
		padding-right:0;
	}
	#registerContainer .search_criteria_form > .field-title.col-md-2{
		margin:14px 0 6px;
		line-height:1.4;
	}
	#registerContainer .search_criteria_form > .col-md-1,
	#registerContainer .search_criteria_form > .col-md-2:not(.input_outer):not(.field-title){
		padding:0 0 6px;
		line-height:1.4;
		text-align:left;
	}
	#registerContainer .boolean_cls{
		width:100%;
		min-height:0;
	}
	#registerContainer h4.searc_cri_title strong{
		font-size:23px;
	}
	#registerContainer .captcha_div{
		padding:14px;
		gap:10px;
	}
	#registerContainer .comm_btn_sub .common_button{
		width:100%;
		min-width:0;
		padding:15px 24px;
	}
	#registerContainer .row.talbies_register{
		padding:30px 20px;
	}
}
@media (max-width:480px){
	#registerContainer .reg_box{
		margin:0 auto !important;
	}
	#registerContainer .popup-title h1,
	#registerContainer .popup-title .reg_hd{
		font-size:24px !important;
		line-height:1.25 !important;
	}
	#registerContainer .input-group .btn-info.add-ai,
	#registerContainer .radius_btn_grp .btn-info.plus_radius{
		width:46px;
		height:46px;
		min-width:46px;
	}
	#registerContainer .row.talbies_register{
		padding:26px 16px;
	}
	#registerContainer .row.talbies_register h2{
		font-size:22px;
	}
}