/* ==========================================================================
   Amelia Employee Listing v1.7.0 — Styles
   ========================================================================== */

.ael-container {
	--ael-primary: #893824;
	--ael-primary-hover: #6e2d1d;
	--ael-primary-light: rgba(137, 56, 36, 0.08);
	--ael-text: #1a1a1a;
	--ael-text-secondary: #555;
	--ael-text-muted: #888;
	--ael-border: #e2e2e2;
	--ael-bg: #f7f7f7;
	--ael-card-bg: #ffffff;
	--ael-radius: 10px;
	--ael-radius-lg: 14px;
	--ael-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
	--ael-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
	--ael-shadow-lg: 0 12px 32px rgba(0,0,0,0.12);
	--ael-transition: 0.2s ease;
	--ael-columns: 3;
	--ael-service-bg: #c7f0d8;
	--ael-service-bg-hover: #b1e6c4;
	--ael-service-text: #1a1a1a;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
	color: var(--ael-text);
	max-width: 1200px;
	margin: 0 auto;
	padding: 24px 0;
	line-height: 1.5;
}

.ael-container *, .ael-container *::before, .ael-container *::after { box-sizing: border-box; }

/* ---------- Loading ---------- */
.ael-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; gap:16px; }
.ael-loading p { color:var(--ael-text-muted); font-size:14px; margin:0; }
.ael-spinner { width:36px; height:36px; border:3px solid var(--ael-border); border-top-color:var(--ael-primary); border-radius:50%; animation:ael-spin 0.7s linear infinite; }
@keyframes ael-spin { to { transform:rotate(360deg); } }

.ael-error { text-align:center; padding:40px 20px; }
.ael-error p { color:#b91c1c; font-size:14px; }

/* ======================================================================
   FILTER BAR
   ====================================================================== */
.ael-filters { margin-bottom: 24px; }

.ael-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	padding: 14px;
	background: var(--ael-card-bg);
	border: 1px solid var(--ael-border);
	border-radius: var(--ael-radius-lg);
	box-shadow: var(--ael-shadow);
}

/* All filter-bar SVGs render at their declared dims */
.ael-filter-bar svg { width: auto; height: auto; max-width: none; max-height: none; flex-shrink: 0; }

/* Search */
.ael-search-wrap {
	position: relative;
	flex: 1 1 280px;
	min-width: 200px;
	max-width: 460px;
}
.ael-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ael-text-muted);
	display: inline-flex;
	pointer-events: none;
	z-index: 1;
}
.ael-search-input,
input.ael-search-input[type="search"] {
	display: block !important;
	width: 100% !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 8px 14px 8px 40px !important;
	margin: 0 !important;
	border: 1.5px solid var(--ael-border) !important;
	border-radius: 999px !important;
	background: var(--ael-card-bg) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--ael-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}
.ael-search-input::placeholder { color: var(--ael-text-muted); opacity: 1; }
.ael-search-input:focus,
input.ael-search-input[type="search"]:focus {
	border-color: var(--ael-primary) !important;
	box-shadow: 0 0 0 3px var(--ael-primary-light) !important;
}

/* Dropdown */
.ael-dd { position: relative; flex-shrink: 0; }

.ael-dd-btn,
button.ael-dd-btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	margin: 0 !important;
	background: var(--ael-card-bg) !important;
	border: 1.5px solid var(--ael-border) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--ael-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	transition: border-color var(--ael-transition), background var(--ael-transition), color var(--ael-transition), box-shadow var(--ael-transition) !important;
}
.ael-dd-btn:hover,
button.ael-dd-btn:hover { border-color: var(--ael-primary) !important; color: var(--ael-primary) !important; }
.ael-dd-btn-active,
button.ael-dd-btn-active {
	border-color: var(--ael-primary) !important;
	background: var(--ael-primary-light) !important;
	color: var(--ael-primary) !important;
}
.ael-dd-open .ael-dd-btn,
.ael-dd-open button.ael-dd-btn {
	border-color: var(--ael-primary) !important;
	box-shadow: 0 0 0 3px var(--ael-primary-light) !important;
}
.ael-dd-chevron { display: inline-flex; align-items: center; transition: transform 0.2s ease; }
.ael-dd-chevron svg { width: 14px !important; height: 14px !important; display: block; }
.ael-dd-open .ael-dd-chevron { transform: rotate(180deg); }

.ael-dd-count {
	display: none;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: var(--ael-primary);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	text-transform: none;
}
.ael-dd-btn-active .ael-dd-count { display: inline-block; }

/* Dropdown panel */
.ael-dd-panel {
	display: none;
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 1000;
	width: 420px;
	max-width: calc(100vw - 32px);
	background: var(--ael-card-bg);
	border: 1px solid var(--ael-border);
	border-radius: var(--ael-radius-lg);
	box-shadow: var(--ael-shadow-lg);
	overflow: hidden;
}
.ael-dd-open .ael-dd-panel { display: block; }

.ael-dd-panel-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px 14px;
}
.ael-dd-panel-title {
	font-size: 17px;
	font-weight: 700;
	color: var(--ael-text);
}
.ael-dd-divider {
	height: 1px;
	background: var(--ael-border);
	margin: 0;
}

/* In-panel search */
.ael-dd-search-wrap {
	position: relative;
	padding: 14px 20px 10px;
}
.ael-dd-search-icon {
	position: absolute;
	left: 34px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--ael-text-muted);
	display: inline-flex;
	pointer-events: none;
	z-index: 1;
}
.ael-dd-search,
input.ael-dd-search[type="search"] {
	display: block !important;
	width: 100% !important;
	height: 38px !important;
	min-height: 38px !important;
	padding: 8px 14px 8px 40px !important;
	margin: 0 !important;
	border: 1.5px solid var(--ael-border) !important;
	border-radius: 999px !important;
	background: var(--ael-card-bg) !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	color: var(--ael-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	outline: none !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
}
.ael-dd-search::placeholder { color: var(--ael-text-muted); opacity: 1; }
.ael-dd-search:focus,
input.ael-dd-search[type="search"]:focus {
	border-color: var(--ael-primary) !important;
	box-shadow: 0 0 0 3px var(--ael-primary-light) !important;
}

/* Chips */
.ael-dd-chips-wrap {
	padding: 4px 20px 14px;
}
.ael-dd-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.ael-chip,
button.ael-chip {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px !important;
	height: 34px !important;
	min-height: 34px !important;
	padding: 0 14px !important;
	margin: 0 !important;
	background: var(--ael-card-bg) !important;
	border: 1.5px solid var(--ael-border) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: var(--ael-text) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	white-space: nowrap !important;
	box-shadow: none !important;
	transition: border-color var(--ael-transition), background var(--ael-transition), color var(--ael-transition) !important;
}
.ael-chip:hover,
button.ael-chip:hover { border-color: var(--ael-primary) !important; color: var(--ael-primary) !important; }
.ael-chip-active,
button.ael-chip-active {
	border-color: var(--ael-primary) !important;
	background: var(--ael-primary) !important;
	color: #fff !important;
}
.ael-chip-active:hover,
button.ael-chip-active:hover {
	background: var(--ael-primary-hover) !important;
	border-color: var(--ael-primary-hover) !important;
	color: #fff !important;
}
.ael-chip-flag { font-size: 15px; line-height: 1; }

.ael-dd-show-more,
button.ael-dd-show-more {
	display: inline-flex !important;
	align-items: center !important;
	height: 34px !important;
	min-height: 34px !important;
	margin: 10px 0 0 !important;
	padding: 0 14px !important;
	background: transparent !important;
	border: 1.5px solid var(--ael-primary) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: var(--ael-primary) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background var(--ael-transition) !important;
}
.ael-dd-show-more:hover,
button.ael-dd-show-more:hover { background: var(--ael-primary-light) !important; color: var(--ael-primary) !important; }

.ael-dd-empty { padding: 8px 0; color: var(--ael-text-muted); font-size: 13px; margin: 0; text-align: center; width: 100%; }

/* Panel footer */
.ael-dd-footer { padding: 14px 20px 18px; }
.ael-dd-close,
button.ael-dd-close {
	display: block !important;
	width: 100% !important;
	height: 44px !important;
	min-height: 44px !important;
	margin: 0 !important;
	padding: 0 16px !important;
	background: var(--ael-primary) !important;
	border: none !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	color: #fff !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: background var(--ael-transition) !important;
}
.ael-dd-close:hover,
button.ael-dd-close:hover { background: var(--ael-primary-hover) !important; color: #fff !important; }

/* Clear button */
.ael-clear-btn,
button.ael-clear-btn {
	margin-left: auto !important;
	display: inline-flex !important;
	align-items: center !important;
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	background: transparent !important;
	border: 1.5px solid var(--ael-border) !important;
	border-radius: 999px !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	color: var(--ael-text-muted) !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: border-color var(--ael-transition), color var(--ael-transition) !important;
}
.ael-clear-btn:hover,
button.ael-clear-btn:hover { border-color: var(--ael-primary) !important; color: var(--ael-primary) !important; }

/* ======================================================================
   GRID & CARDS
   ====================================================================== */
.ael-grid { display:grid; grid-template-columns:repeat(var(--ael-columns),1fr); gap:24px; }

.ael-card { background:var(--ael-card-bg); border:1px solid var(--ael-border); border-radius:var(--ael-radius-lg); overflow:hidden; cursor:pointer; transition:transform var(--ael-transition), box-shadow var(--ael-transition), border-color var(--ael-transition); display:flex; flex-direction:column; }
.ael-card:hover { transform:translateY(-4px); box-shadow:var(--ael-shadow-lg); border-color:rgba(137,56,36,0.3); }
.ael-card:focus-visible { outline:2px solid var(--ael-primary); outline-offset:2px; }

.ael-card-image-wrap { width:100%; aspect-ratio:4/3; overflow:hidden; background:var(--ael-bg); }
.ael-card-image { width:100%; height:100%; object-fit:cover; display:block; transition:transform 0.35s ease; }
.ael-card:hover .ael-card-image { transform:scale(1.04); }
.ael-card-avatar { width:100%; aspect-ratio:4/3; background:linear-gradient(135deg,var(--ael-primary) 0%,#b85a46 100%); display:flex; align-items:center; justify-content:center; font-size:52px; font-weight:600; color:rgba(255,255,255,0.9); letter-spacing:2px; }

.ael-card-body { padding:18px 20px 20px; flex:1; display:flex; flex-direction:column; gap:10px; }
.ael-card-name { font-size:18px; font-weight:700; color:var(--ael-text); margin:0; line-height:1.3; }
.ael-card-badge { display:inline-block; padding:3px 10px; background:var(--ael-primary-light); color:var(--ael-primary); border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; align-self:flex-start; }
.ael-card-languages { display:flex; align-items:center; gap:5px; font-size:18px; line-height:1; }
.ael-card-services { display:flex; flex-wrap:wrap; gap:5px; margin-top:auto; padding-top:6px; align-items:center; }
.ael-service-tag { display:inline-flex; align-items:center; justify-content:center; padding:4px 11px; border-radius:20px; font-size:11px; font-weight:500; line-height:1; white-space:nowrap; border:1px solid transparent; color:var(--ael-service-text); background:var(--ael-service-bg); }
.ael-service-tag-more { background:var(--ael-bg); color:var(--ael-text-muted); border-color:var(--ael-border); }

.ael-no-results { text-align:center; padding:60px 20px; }
.ael-no-results p { color:var(--ael-text-muted); font-size:15px; }

/* ======================================================================
   SHARED MODAL OVERLAY
   ====================================================================== */
.ael-modal-overlay.ael-modal-overlay { position:fixed; inset:0; z-index:9999999; background:rgba(0,0,0,0.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; animation:ael-fadeIn 0.2s ease forwards; }
@keyframes ael-fadeIn { to { opacity:1; } }

/* ======================================================================
   DETAIL MODAL
   ====================================================================== */
.ael-modal-overlay .ael-modal { background:var(--ael-card-bg); border-radius:16px; max-width:640px; width:100%; max-height:85vh; overflow-y:auto; overflow-x:hidden; position:relative; box-shadow:0 24px 64px rgba(0,0,0,0.2); animation:ael-slideUp 0.25s ease; margin:0; padding:0; }
@keyframes ael-slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } }

.ael-modal-overlay .ael-modal .ael-modal-close,
button.ael-modal-close#ael-modal-close,
button.ael-modal-close#ael-booking-modal-close {
	position:absolute !important; top:14px !important; right:14px !important; left:auto !important;
	width:34px !important; height:34px !important; min-width:34px !important; min-height:34px !important;
	border-radius:50% !important; border:none !important; background:rgba(0,0,0,0.06) !important;
	color:var(--ael-text) !important; font-size:20px !important; cursor:pointer !important;
	display:flex !important; align-items:center !important; justify-content:center !important;
	z-index:10 !important; transition:background 0.2s ease !important; line-height:1 !important;
	padding:0 !important; margin:0 !important; float:none !important; transform:none !important;
	overflow:visible !important; box-shadow:none !important; outline:none !important;
}
.ael-modal-overlay .ael-modal .ael-modal-close:hover,
button.ael-modal-close#ael-modal-close:hover,
button.ael-modal-close#ael-booking-modal-close:hover { background:rgba(0,0,0,0.12) !important; }

.ael-modal-header { display:flex; gap:20px; padding:28px 28px 0; align-items:flex-start; }
.ael-modal-avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; flex-shrink:0; border:3px solid var(--ael-bg); box-shadow:var(--ael-shadow-md); }
.ael-modal-avatar-placeholder { width:96px; height:96px; border-radius:50%; background:linear-gradient(135deg,var(--ael-primary) 0%,#b85a46 100%); display:flex; align-items:center; justify-content:center; font-size:30px; font-weight:600; color:rgba(255,255,255,0.9); flex-shrink:0; box-shadow:var(--ael-shadow-md); }
.ael-modal-info { flex:1; min-width:0; padding-top:4px; }
.ael-modal-name { font-size:22px; font-weight:700; color:var(--ael-text); margin:0 0 2px; line-height:1.3; padding:0; }
.ael-modal-badge { display:inline-block; padding:3px 10px; background:var(--ael-primary-light); color:var(--ael-primary); border-radius:20px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; margin-top:4px; }
.ael-modal-meta { display:flex; flex-direction:column; gap:5px; margin-top:10px; }
.ael-modal-meta-item { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--ael-text-secondary); }
.ael-modal-meta-item svg { width:15px; height:15px; flex-shrink:0; color:var(--ael-primary); }

.ael-modal-body { padding:20px 28px 28px; }
.ael-modal-section-title { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--ael-text-muted); margin:0 0 10px; padding:0; }
.ael-modal-services { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:20px; }
.ael-modal-service-tag { display:inline-block; padding:5px 14px; border-radius:20px; font-size:12px; font-weight:500; color:var(--ael-service-text); background:var(--ael-service-bg); }
.ael-modal-description { font-size:14px; line-height:1.7; color:var(--ael-text-secondary); margin:0 0 24px; }
.ael-modal-description p { margin:0 0 8px; }
.ael-modal-description p:last-child { margin-bottom:0; }
.ael-modal-divider { border:none; border-top:1px solid var(--ael-border); margin:0 0 20px; }

.ael-modal-book-btn, button.ael-modal-book-btn {
	display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important;
	padding:13px 28px !important; background:var(--ael-service-bg) !important; color:var(--ael-service-text) !important; border:none !important;
	border-radius:var(--ael-radius) !important; font-size:15px !important; font-weight:600 !important; cursor:pointer !important;
	transition:background 0.2s ease, transform 0.2s ease !important; text-decoration:none !important; width:100% !important; text-align:center !important;
	text-transform: none !important; letter-spacing: normal !important;
}
.ael-modal-book-btn:hover, button.ael-modal-book-btn:hover { background:var(--ael-service-bg-hover) !important; transform:translateY(-1px) !important; color:var(--ael-service-text) !important; }
.ael-modal-book-btn svg { width:18px; height:18px; }


/* ======================================================================
   BOOKING MODAL
   ====================================================================== */
.ael-booking-overlay.ael-booking-overlay { z-index:10000000; }
.ael-booking-modal-dialog.ael-booking-modal-dialog { max-width:860px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; }

.ael-booking-modal-header { display:flex; align-items:center; gap:12px; padding:16px 56px 12px 20px; border-bottom:1px solid var(--ael-border); flex-shrink:0; }
.ael-booking-back { display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--ael-primary); background:none; border:none; cursor:pointer; padding:4px 0; transition:opacity var(--ael-transition); white-space:nowrap; }
.ael-booking-back:hover { opacity:0.7; }
.ael-booking-employee-name { font-size:15px; font-weight:600; color:var(--ael-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.ael-booking-iframe-wrap { flex:1; overflow:hidden; position:relative; height:560px; min-height:560px; }
.ael-booking-iframe-wrap iframe { width:100%; height:100%; min-height:560px; border:none; display:block; }
.ael-booking-loading { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:80px 20px; gap:14px; position:absolute; inset:0; background:var(--ael-card-bg); z-index:1; }
.ael-booking-loading p { color:var(--ael-text-muted); font-size:14px; margin:0; }

/* ======================================================================
   RESPONSIVE
   ====================================================================== */
@media (max-width:1024px) {
	.ael-grid { --ael-columns:2 !important; }
}

@media (max-width:768px) {
	.ael-filter-bar { padding: 10px; gap: 8px; }
	.ael-search-wrap { flex: 1 1 100%; order: -1; }
	.ael-dd-btn { padding: 0 12px; font-size: 13px; }
	.ael-clear-btn { font-size: 12px; padding: 0 12px; }
	.ael-dd-panel { min-width: 240px; }
}

@media (max-width:600px) {
	.ael-grid { --ael-columns:1 !important; gap:14px; }

	.ael-filter-bar { gap: 8px; }
	.ael-clear-btn { margin-left: 0; }

	/* Dropdown panels go full-width on mobile */
	.ael-dd-panel { left: 0; right: 0; min-width: 0; max-width: none; width: 100%; }

	/* Modals */
	.ael-modal-overlay .ael-modal { max-height:95vh; border-radius:12px; }
	.ael-booking-modal-dialog.ael-booking-modal-dialog { max-height:95vh; }
	.ael-modal-header { flex-direction:column; align-items:center; text-align:center; padding:24px 20px 0; }
	.ael-modal-meta { align-items:center; }
	.ael-modal-body { padding:16px 20px 24px; }
	.ael-modal-services {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		justify-content: flex-start;
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-bottom: 4px;
		margin-bottom: 16px;
	}
	.ael-modal-services::-webkit-scrollbar { display: none; }
	.ael-modal-service-tag { flex-shrink: 0; }
}