/**
 * AR Hair Specialist Finder Pro
 * Frontend Styles
 */

/*==================================================
Variables
==================================================*/

:root{

	--ahsf-dark:#2d2118;
	--ahsf-primary:#b5724f;
	--ahsf-border:#ddd5cb;
	--ahsf-bg:#f8f6f2;
	--ahsf-white:#ffffff;
	--ahsf-text:#2c2c2c;
	--ahsf-light:#7a7068;

	--ahsf-radius:8px;

	--ahsf-transition:.35s ease;

}

/*==================================================
Reset
==================================================*/

.ahsf-wrapper *,
.ahsf-wrapper *::before,
.ahsf-wrapper *::after{

	box-sizing:border-box;

}

/*==================================================
Wrapper
==================================================*/

.ahsf-wrapper{

	max-width:1400px;

	margin:0 auto;

	padding:60px 20px;

}

.ahsf-specialists-section{

	position:relative;

}

/*==================================================
Sticky Filter
==================================================*/

.ahsf-filter-sticky{

	position:sticky;

	top:0;

	z-index:999;

	background:#f8f6f2;

	padding:25px 0;

	border-bottom:1px solid #ddd;

}

/*==================================================
Filter Layout
==================================================*/

.ahsf-filter-grid{

	display:grid;

	grid-template-columns:2fr 1fr 1fr 1fr;

	gap:20px;

}

.ahsf-filter-item label{

	display:block;

	margin-bottom:10px;

	font-size:11px;

	font-weight:600;

	letter-spacing:2px;

	text-transform:uppercase;

	color:#8a8179;

}

/*==================================================
Search Input & Dropdowns
==================================================*/

.ahsf-filter-item input,
.ahsf-filter-item select{

	width:100%;

	height:52px;

	padding:0 18px;

	background:#fff;

	border:1px solid var(--ahsf-border);

	font-size:16px;

	color:var(--ahsf-text);

	font-family:inherit;

	transition:var(--ahsf-transition);

	outline:none;

	border-radius:0;

}

.ahsf-filter-item input::placeholder{

	color:#8c837b;

}

.ahsf-filter-item input:hover,
.ahsf-filter-item select:hover{

	border-color:#b9aea3;

}

.ahsf-filter-item input:focus,
.ahsf-filter-item select:focus{

	border-color:var(--ahsf-primary);

}

/*==================================================
Custom Select
==================================================*/

.ahsf-filter-item select{

	appearance:none;

	-webkit-appearance:none;

	-moz-appearance:none;

	cursor:pointer;

	padding-right:48px;

	background-color:#fff;

	background-repeat:no-repeat;

	background-position:right 18px center;

	background-size:14px;

	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5' fill='none' stroke='%23322b24' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

}

/*==================================================
Filter Footer
==================================================*/

.ahsf-filter-footer{

	display:flex;

	align-items:center;

	justify-content:space-between;

	padding:20px 0;

	margin-top:18px;

	border-top:1px solid var(--ahsf-border);

}

.ahsf-results-count{

	font-size:12px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:3px;

	color:#6d6258;

}

.ahsf-reset{

	background:none;

	border:none;

	padding:0;

	cursor:pointer;

	font-size:12px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:2px;

	color:#b5724f;

	transition:.3s;

}

.ahsf-reset:hover{

	color:#2d2118;

}

/*==================================================
Results
==================================================*/

.ahsf-results{

	margin-top:50px;

}

.ahsf-grid{

	display:flex;

	flex-direction:column;

	gap:28px;

}

/*==================================================
Card
==================================================*/

.ahsf-card{

	display:grid;

	grid-template-columns:320px 1fr;

	background:#fff;

	border:1px solid var(--ahsf-border);

	overflow:hidden;

	transition:var(--ahsf-transition);

}

.ahsf-card:hover{

	box-shadow:0 12px 35px rgba(0,0,0,.08);

	transform:translateY(-3px);

}

/*==================================================
Left Panel
==================================================*/

.ahsf-card-left{

	background:var(--ahsf-dark);

	color:#fff;

	padding:38px;

	display:flex;

	flex-direction:column;

	min-height:100%;

}

.ahsf-top-heading{

	font-size:11px;

	font-weight:700;

	text-transform:uppercase;

	letter-spacing:3px;

	line-height:1.8;

	color:#ffffff;

	margin-bottom:26px;

}

.ahsf-title{

	margin:0 0 18px;

	font-size:38px;

	line-height:1.15;

	font-weight:400;

}

.ahsf-title a{

	color:#fff;

	text-decoration:none;

}

.ahsf-title a:hover{

	color:#d8c8ba;

}

.ahsf-degree{

	font-size:17px;

	font-weight:600;

	letter-spacing:2px;

	text-transform:uppercase;

	margin-bottom:18px;

	color:#ffffff;

}

.ahsf-institute{

	font-size:18px;

	line-height:1.6;

	margin-bottom:12px;

}

.ahsf-location{

	font-size:16px;

	color:#d7cec5;

	margin-bottom:40px;

}

.ahsf-button{

	display:inline-flex;

	align-items:center;

	justify-content:center;

	padding:16px 28px;

	background:#fff;

	color:#2d2118;

	text-decoration:none;

	font-size:12px;

	font-weight:700;

	letter-spacing:3px;

	text-transform:uppercase;

	width:max-content;

	transition:.3s;

	margin-top:auto;

}

.ahsf-button:hover{

	background:#b5724f;

	color:#fff;

}

/*==================================================
Right Panel
==================================================*/

.ahsf-card-right{

	padding:40px 45px;

	display:flex;

	flex-direction:column;

	justify-content:space-between;

}

/*==================================================
Description
==================================================*/

.ahsf-description{

	font-size:18px;

	line-height:1.8;

	color:var(--ahsf-text);

	margin-bottom:35px;

}

.ahsf-description p{

	margin:0;

}

/*==================================================
Information Grid
==================================================*/

.ahsf-info-grid{

	display:grid;

	grid-template-columns:repeat(2,1fr);

	gap:35px 50px;

	margin-bottom:35px;

}

.ahsf-info-grid h4{

	margin:0 0 10px;

	font-size:11px;

	font-weight:700;

	letter-spacing:2px;

	text-transform:uppercase;

	color:#8a8179;

}

.ahsf-info-grid p{

	margin:0;

	font-size:16px;

	line-height:1.8;

	color:var(--ahsf-text);

}

/*==================================================
Bottom Note
==================================================*/

.ahsf-note{

	margin-top:auto;

	padding:22px 25px;

	background:#f7f3ed;

	border-left:4px solid var(--ahsf-primary);

	font-size:15px;

	line-height:1.8;

	color:#5d534a;

}

.ahsf-card a{

	transition:var(--ahsf-transition);

}

.ahsf-title a:hover{

	color:var(--ahsf-primary);

}

/*==================================================
Loading
==================================================*/

.ahsf-grid{

	position:relative;

	transition:.3s;

}

.ahsf-loading{

	opacity:.45;

	pointer-events:none;

}

/*==================================================
Tablet
==================================================*/

@media (max-width:1024px){

	.ahsf-filter-grid{

		grid-template-columns:repeat(2,1fr);

	}

	.ahsf-card{

		grid-template-columns:1fr;

	}

	.ahsf-info-grid{

		grid-template-columns:1fr;

	}

}

/*==================================================
Mobile
==================================================*/

@media (max-width:767px){

	.ahsf-wrapper{

		padding:35px 15px;

	}

	.ahsf-filter-grid{

		grid-template-columns:1fr;

	}

	.ahsf-filter-footer{

		flex-direction:column;

		align-items:flex-start;

		gap:15px;

	}

	.ahsf-card-left,
	.ahsf-card-right{

		padding:25px;

	}

	.ahsf-title{

		font-size:30px;

	}

	.ahsf-description{

		font-size:16px;

	}

}