/* ==========================================================================
   WP Profile Directory — Directory Grid / List / Card
   Color and font defaults reference Elementor V4 global tokens where available.
   var(--e-global-color-primary, #fallback) means: use Elementor's global if it
   exists on :root, otherwise fall back to the plugin default.
   ========================================================================== */

/*
 * CSS custom properties are defined on the outermost ajax wrapper, .directory-plugin,
 * and .wpd-submission-form so all plugin frontend elements share the same token cascade.
 */
.wpd-directory-ajax-wrapper,
.directory-plugin,
.wpd-submission-form {
	--directory-columns:      3;
	--directory-gap:          24px;
	--directory-card-bg:      #ffffff;
	--directory-card-radius:  8px;
	--directory-card-border:  #e5e7eb;
	--directory-card-padding: 16px;

	/* Colors — inherit from Elementor globals, fall back to plugin defaults */
	--directory-accent:       var(--e-global-color-primary,   #4f46e5);
	--directory-text:         var(--e-global-color-text,      #111827);
	--directory-muted:        var(--e-global-color-secondary, #6b7280);

	/* Badge defaults — also reference accent global */
	--directory-badge-bg:       #ede9fe;
	--directory-badge-color:    var(--e-global-color-primary, #4f46e5);
	--directory-featured-bg:    #fef9c3;
	--directory-featured-color: #92400e;

	/* Button defaults — Elementor Accent is the semantic interactive/button color */
	--directory-btn-bg:     var(--e-global-color-accent, var(--e-global-color-primary, #4f46e5));
	--directory-btn-color:  #ffffff;
	--directory-btn-radius: 6px;

	/* Typography — inherit Elementor kit font families, fall back to theme */
	--directory-font-body:    var(--e-global-typography-text-font-family,    inherit);
	--directory-font-heading: var(--e-global-typography-primary-font-family, inherit);

	/* Font sizes — clamp-based for fluid responsive scaling */
	--directory-name-size: clamp(1rem, 0.9rem + 0.3vw, 1.2rem);
	--directory-body-size: clamp(0.875rem, 0.85rem + 0.1vw, 1rem);
}

.directory-plugin {
	box-sizing: border-box;
	font-family: var(--directory-font-body);
	font-size: var(--directory-body-size);
	width: 100%;
}

/* Search bar */
.directory-search {
	margin-bottom: 24px;
}
.directory-search__inner {
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.directory-search__input {
	flex: 1;
	min-width: 200px;
	padding: 9px 14px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: var(--directory-body-size);
	font-family: var(--directory-font-body);
	line-height: 1.4;
}
.directory-search__input:focus {
	outline: none;
	border-color: var(--directory-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--directory-accent) 15%, transparent);
}
.directory-search__btn {
	padding: 9px 18px;
	background: var(--directory-accent);
	color: #fff;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	font-family: var(--directory-font-body);
	cursor: pointer;
}
.directory-search__clear {
	font-size: 13px;
	color: var(--directory-muted);
	text-decoration: underline;
}

/* Grid layout */
.directory-grid {
	display: grid;
	grid-template-columns: repeat(var(--directory-columns), 1fr);
	gap: var(--directory-gap);
}

@media (max-width: 900px) {
	.directory-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.directory-grid { grid-template-columns: 1fr; }
}

/* List layout */
.directory-list {
	display: flex;
	flex-direction: column;
	gap: var(--directory-gap);
}

/* Card */
.directory-card {
	background: var(--directory-card-bg);
	border: 1px solid var(--directory-card-border);
	border-radius: var(--directory-card-radius);
	overflow: hidden;
	position: relative;
	transition: box-shadow 0.15s;
}
.directory-card:hover {
	box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.directory-card--featured {
	border-color: #fbbf24;
}

/* Card: list mode overrides */
.directory-list .directory-card {
	display: flex;
	flex-direction: row;
}
.directory-list .directory-card__image {
	flex: 0 0 100px;
	height: auto;
}

/* Card image */
.directory-card__image {
	aspect-ratio: 1;
	overflow: hidden;
	background: #f3f4f6;
}
.directory-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.directory-card__image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #e5e7eb;
	font-size: 2rem;
	font-weight: 700;
	color: #9ca3af;
	text-transform: uppercase;
}

/* Card content */
.directory-card__content {
	padding: var(--directory-card-padding);
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.directory-card__name {
	font-size: var(--directory-name-size);
	font-weight: 700;
	line-height: 1.3;
	font-family: var(--directory-font-heading);
}
.directory-card__name a {
	color: var(--directory-text);
	text-decoration: none;
}
.directory-card__name a:hover {
	color: var(--directory-accent);
}
.directory-card__credentials {
	display: inline-block;
	margin-left: 6px;
	font-size: 0.8em;
	font-weight: 400;
	color: var(--directory-muted);
}
.directory-card__meta {
	font-size: 13px;
	color: var(--directory-muted);
}
.directory-card__location {
	font-size: 13px;
	color: var(--directory-muted);
}
.directory-card__specialties {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 2px;
}
.directory-card__actions {
	margin-top: auto;
	padding-top: 8px;
}
.directory-card__link {
	font-size: 13px;
	font-weight: 600;
	color: var(--directory-accent);
	text-decoration: none;
}
.directory-card__link:hover {
	text-decoration: underline;
}

/* Badges */
.directory-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.6;
	background: var(--directory-badge-bg);
	color: var(--directory-badge-color);
}
button.directory-badge {
	border: none;
	cursor: pointer;
	font-family: var(--directory-font-body);
	transition: opacity 0.1s;
}
button.directory-badge:hover {
	opacity: 0.75;
}
.directory-badge--featured {
	background: var(--directory-featured-bg);
	color: var(--directory-featured-color);
	position: absolute;
	top: 10px;
	right: 10px;
}
.directory-badge--specialty        { background: #ede9fe; color: #6d28d9; }
.directory-badge--category         { background: #dbeafe; color: #1e40af; }
.directory-badge--location         { background: #dcfce7; color: #166534; }
.directory-badge--membership-tier  { background: #fce7f3; color: #9d174d; }

/* ==========================================================================
   Sidebar filter layout
   ========================================================================== */

.wpd-directory-layout {
	display: grid;
	grid-template-columns: 260px 1fr;
	gap: 32px;
	align-items: flex-start;
}
@media (max-width: 860px) {
	.wpd-directory-layout {
		grid-template-columns: 1fr;
	}
}

.wpd-directory-main {
	min-width: 0;
}

/* Sidebar panel */
.wpd-directory-sidebar {
	background: var(--directory-card-bg);
	border: 1px solid var(--directory-card-border);
	border-radius: var(--directory-card-radius);
	overflow: hidden;
}

.wpd-filters__header {
	padding: 12px 16px;
	background: var(--directory-filter-header-bg, var(--directory-accent));
	color: var(--directory-filter-header-color, #fff);
	font-weight: 700;
	font-size: 14px;
	font-family: var(--directory-font-body);
}

.wpd-filters__body {
	padding: 0 16px;
}

/* Sidebar search */
.wpd-sidebar-search {
	padding: 12px 0 8px;
}
.wpd-sidebar-search__input {
	width: 100%;
	min-width: 0;
	padding: 8px 12px;
	border: 1px solid var(--directory-card-border);
	border-radius: 6px;
	font-size: 13px;
	font-family: var(--directory-font-body);
	line-height: 1.4;
	box-sizing: border-box;
}
.wpd-sidebar-search__input:focus {
	outline: none;
	border-color: var(--directory-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--directory-accent) 15%, transparent);
}

/* Collapsible filter sections */
.wpd-filter-section {
	border-bottom: 1px solid var(--directory-card-border);
}
.wpd-filter-section:last-child {
	border-bottom: none;
}

/* Toggle button spans full width, flush with sidebar edges */
.wpd-directory-sidebar .wpd-filter-section__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: calc(100% + 32px);
	background: var(--directory-filter-header-bg, var(--directory-accent)) !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 12px 16px !important;
	margin: 0 -16px !important;
	cursor: pointer;
	font-weight: 600;
	font-size: 13px;
	font-family: var(--directory-font-body);
	color: var(--directory-filter-header-color, #fff) !important;
	text-align: left;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
}

.wpd-filter-section__arrow {
	font-size: 10px;
	color: var(--directory-filter-header-color, rgba(255, 255, 255, 0.8));
	transition: transform 0.15s;
}
.wpd-filter-section--collapsed .wpd-filter-section__arrow {
	transform: rotate(-90deg);
}
.wpd-filter-section--collapsed .wpd-filter-section__body {
	display: none;
}

/* Checkbox list */
.wpd-filter-checkbox-list {
	list-style: none;
	margin: 0;
	padding: 12px 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.wpd-filter-checkbox-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: pointer;
	color: var(--directory-text);
}
.wpd-filter-checkbox-item input[type="checkbox"] {
	accent-color: var(--directory-accent);
	width: 14px;
	height: 14px;
	flex-shrink: 0;
	cursor: pointer;
}

/* Load More */
.wpd-load-more-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	padding-top: 32px;
}
.wpd-load-more {
	padding: 10px 28px;
	background: var(--directory-btn-bg, var(--directory-accent, #4f46e5)) !important;
	color: var(--directory-btn-color, #fff) !important;
	border: 2px solid var(--directory-btn-bg, var(--directory-accent, #4f46e5));
	border-radius: var(--directory-btn-radius, 6px);
	font-size: 14px;
	font-weight: 600;
	font-family: var(--directory-font-body);
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wpd-load-more:hover:not(:disabled) {
	background: var(--directory-btn-color, #fff) !important;
	border-color: var(--directory-btn-bg, var(--directory-accent, #4f46e5));
	color: var(--directory-btn-bg, var(--directory-accent, #4f46e5)) !important;
}
.wpd-load-more:disabled {
	opacity: 0.55;
	cursor: default;
}

/* No results */
.directory-no-results {
	padding: 40px;
	text-align: center;
	color: var(--directory-muted);
	font-size: 15px;
}