/*
 * Restyles Directorist's front-end markup to match the Locale theme.
 * Targets Directorist's own BEM classes (directorist-*). No plugin
 * template files are copied or overridden, so this survives plugin updates.
 * Uses the theme's CSS custom properties so it auto-adapts to dark mode
 * and the alternate color style variations.
 */

/* ---------- Palette alignment ----------
   The plugin exposes its colors as runtime CSS custom properties in an inline
   :root block printed after stylesheets, so overriding them needs !important.
   Re-pointing them makes checkboxes, tabs, focus rings, ghost buttons, and
   pagination follow the theme's WCAG-AA primary automatically. */
:root {
	--directorist-color-primary: var(--wp--preset--color--primary) !important;
	--directorist-color-dark: var(--wp--preset--color--contrast) !important;
	--directorist-color-body: var(--wp--preset--color--contrast) !important;
	/* Plugin's #808080 text tokens fail WCAG AA on light backgrounds (3.95:1). */
	--directorist-color-light-gray: var(--wp--preset--color--muted) !important;
	--directorist-color-deep-gray: var(--wp--preset--color--muted) !important;
}

/* ---------- Hero search (scoped to the hero pattern) ---------- */

/* Directorist injects its own "Find the best match…" subtitle above the
   search form; the hero pattern already has a headline, so hide it. */
.locale-hero .directorist-search-top {
	display: none;
}

.locale-hero .directorist-search-form__box,
.locale-hero .directorist-search-form-wrap {
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

/* Popular-category chips under the hero search bar */
.locale-hero .directorist-listing-category-top h3 {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	margin: 2rem 0 0.75rem;
}

.locale-hero .directorist-listing-category-top ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.locale-hero .directorist-listing-category-top ul li a {
	display: inline-block;
	padding: 0.45rem 1.1rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	background: rgba(255, 255, 255, 0.06);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.locale-hero .directorist-listing-category-top ul li a:hover {
	border-color: var(--wp--preset--color--primary);
	background: rgba(255, 90, 60, 0.2);
}

/* ---------- Category grid cards ---------- */

.directorist-categories__single {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	padding: 2rem 1.25rem;
	transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.directorist-categories__single:hover {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	transform: translateY(-3px);
}

.directorist-categories__single__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.directorist-categories__single__name:hover {
	color: var(--wp--preset--color--primary);
}

.directorist-categories__single__total {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	margin-top: 0.35rem;
}

/* ---------- Listing cards (archive grid + list view) ---------- */

.directorist-listing-single {
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--base);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.directorist-listing-single:hover {
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.directorist-listing-single__info__top a,
.directorist-listing-single__info__top h3,
.directorist-listing-single__info__top h4 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.directorist-listing-single__info__top a:hover {
	color: var(--wp--preset--color--primary);
}

.directorist-listing-single__info__list {
	color: var(--wp--preset--color--muted);
	font-size: 0.9rem;
}

.directorist-listing-single__meta {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* Category / badge chips */
.directorist-badge,
.directorist-category-badge {
	border-radius: 999px;
	font-weight: 600;
}

/* ---------- Search forms (hero + archive header bars) ---------- */

.directorist-search-adv-filter,
.directorist-advanced-filter {
	background: var(--wp--preset--color--surface);
	border-radius: 12px;
}

.directorist-search-field input,
.directorist-search-field select,
.directorist-search-adv-filter input,
.directorist-search-adv-filter select {
	border-radius: 10px;
	border-color: var(--wp--preset--color--border);
}

.directorist-search-field input:focus,
.directorist-search-adv-filter input:focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}

/* Primary action buttons across search, listing, dashboard.
   Force the theme's AA-conformant primary: the plugin's inline brand color
   (bright coral + white text) fails WCAG contrast on light backgrounds. */
.directorist-btn,
.directorist-btn-primary,
button.directorist-btn.directorist-btn-primary {
	border-radius: 10px;
	font-weight: 600;
}

.directorist-btn-primary,
.directorist-btn.directorist-btn-primary,
a.directorist-btn.directorist-btn-primary {
	background-color: var(--wp--preset--color--primary) !important;
	border-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
}

.directorist-btn-primary:hover,
.directorist-btn-primary:focus {
	background-color: var(--wp--preset--color--primary-dark) !important;
	border-color: var(--wp--preset--color--primary-dark) !important;
	color: var(--wp--preset--color--base) !important;
}

/* Ghost trigger buttons (e.g. advanced search) use primary text. */
.directorist-btn-light.directorist-btn-light {
	color: var(--wp--preset--color--primary);
}

/* Featured badge ships as white text on bright yellow (1.75:1): fixes it.
   Text is pinned to the theme's ink rather than a palette slug, because the
   styles variations swap base/contrast meanings and the accent stays yellowish
   in every variation — so it always needs dark text.
   The plugin sets some of these custom properties inline, so !important is required. */
.directorist-badge-featured {
	--directorist-badge-bg: var(--wp--preset--color--accent) !important;
	--directorist-badge-border: var(--wp--preset--color--accent) !important;
	--directorist-badge-color: #14171f !important;
	--directorist-badge-icon-color: #14171f !important;
	--directorist-badge-tooltip-bg: var(--wp--preset--color--accent) !important;
	--directorist-badge-tooltip-color: #14171f !important;
}

/* Review counts in listing cards render plugin-gray too light. */
.directorist-listing-single .directorist-total-review {
	color: var(--wp--preset--color--muted);
}

/* Pagination: current/hover state follows the theme primary. */
.directorist-pagination .page-numbers.current,
.directorist-pagination .page-numbers:hover {
	color: var(--wp--preset--color--primary);
}

/* The filter modal renders an empty heading when no title is set */
.directorist-search-modal__contents__title:empty {
	display: none;
}

/* ---------- Single listing ---------- */

.directorist-single-listing-header {
	border-radius: 16px;
	overflow: hidden;
}

/* ---------- Front-end dashboard ---------- */

.directorist-user-dashboard__tab-content {
	background: var(--wp--preset--color--base);
	border-radius: 16px;
}

.directorist-tab__pane--active {
	border-color: var(--wp--preset--color--primary);
}