/* WCFM Vendor Directory - Modern Minimal UI */

/* CSS Variables */
:root {
	--wcfmvd-primary: #f59e0b;
	--wcfmvd-primary-hover: #d97706;
	--wcfmvd-bg: #ffffff;
	--wcfmvd-surface: #fffbeb;
	--wcfmvd-border: #fde68a;
	--wcfmvd-text: #1e293b;
	--wcfmvd-text-muted: #64748b;
	--wcfmvd-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	--wcfmvd-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
	--wcfmvd-radius: 12px;
	--wcfmvd-radius-sm: 8px;
	--wcfmvd-transition: all 0.3s ease;
}

/* Reset & Base */
.wcfmvd-vendor-directory {
	--wcfmvd-columns: 3;
	font-family: inherit;
	color: inherit;
	background: transparent;
	line-height: 1.6;
	box-sizing: border-box;
}

.wcfmvd-vendor-directory * {
	box-sizing: border-box;
}

/* Filters */
.wcfmvd-filters {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 0.8fr 1.2fr 1fr;
	gap: 1rem;
	margin-bottom: 2rem;
	padding: 1.5rem;
	background: var(--wcfmvd-surface);
	border-radius: var(--wcfmvd-radius);
	box-shadow: var(--wcfmvd-shadow);
}

.wcfmvd-filter-group {
	display: flex;
	flex-direction: column;
}

/* Scoped to the directory root so these beat theme rules like
   `input[type="search"]`, which otherwise out-specify a bare class. */
.wcfmvd-vendor-directory .wcfmvd-search-input,
.wcfmvd-vendor-directory .wcfmvd-select {
	/* Inputs and selects pick up different UA defaults for font, height and
	   box model, which made the ZIP field sit taller than the dropdowns beside
	   it. Normalise all three so every control in the filter bar matches. */
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 1rem;
	border: 1px solid var(--wcfmvd-border);
	border-radius: var(--wcfmvd-radius-sm);
	background: var(--wcfmvd-bg);
	color: var(--wcfmvd-text);
	font-family: inherit;
	font-size: 0.95rem;
	line-height: normal;
	transition: var(--wcfmvd-transition);
}

/* Restore the dropdown arrow that appearance:none removes. */
.wcfmvd-vendor-directory .wcfmvd-select {
	padding-right: 2.25rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236b7280' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 12px 8px;
	cursor: pointer;
}

.wcfmvd-search-input:focus,
.wcfmvd-select:focus {
	outline: none;
	border-color: var(--wcfmvd-primary);
	box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.2);
}

/* The theme styles its own input placeholders, including font-size. Restate the
   size here so the ZIP and Search placeholders match the select labels beside
   them instead of inheriting the theme's larger default. */
.wcfmvd-vendor-directory .wcfmvd-search-input::placeholder {
	color: var(--wcfmvd-text-muted);
	font-family: inherit;
	font-size: 0.95rem;
	opacity: 1;
}

/* ZIP filter. The wrapper is a flex column, so the error message below the
   input was stealing height and leaving the field visibly shorter than the
   sibling selects. Pin it out of flow and match the select metrics exactly. */
.wcfmvd-filter-zip {
	position: relative;
	justify-content: center;
}

/* Inherit the shared control metrics rather than overriding them - the earlier
   `height: 100%` here resolved against the wrapper instead of the 48px the
   other controls use, and left font-size unset so the theme's own input styling
   won, which is why the ZIP placeholder rendered larger than its neighbours. */
.wcfmvd-vendor-directory .wcfmvd-filter-zip .wcfmvd-search-input {
	height: 48px;
	min-height: 48px;
	font-size: 0.95rem;
}

.wcfmvd-field-error {
	position: absolute;
	top: 100%;
	left: 0;
	margin-top: 0.25rem;
	font-size: 0.78rem;
	color: #dc2626;
	white-space: nowrap;
	pointer-events: none;
}

.wcfmvd-input-error {
	border-color: #dc2626 !important;
	box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

/* Toolbar & view switch */
.wcfmvd-toolbar {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	margin-bottom: 1rem;
	flex-wrap: wrap;
}

/* Pushes the view switch and page-size control to the right. */
.wcfmvd-result-count {
	margin-right: auto;
	font-size: 0.85rem;
	color: var(--wcfmvd-text-muted);
}

.wcfmvd-per-page {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.wcfmvd-per-page-label {
	font-size: 0.85rem;
	color: var(--wcfmvd-text-muted);
	white-space: nowrap;
}

/* Compact variant - the toolbar is a denser row than the filter bar. */
.wcfmvd-vendor-directory .wcfmvd-per-page .wcfmvd-select {
	width: auto;
	height: 38px;
	padding: 0 2rem 0 0.75rem;
	font-size: 0.85rem;
	background-position: right 0.6rem center;
}

.wcfmvd-view-switch {
	display: inline-flex;
	border: 1px solid var(--wcfmvd-border);
	border-radius: var(--wcfmvd-radius-sm);
	overflow: hidden;
	background: var(--wcfmvd-bg);
}

.wcfmvd-view-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.5rem 0.9rem;
	border: 0;
	background: transparent;
	color: var(--wcfmvd-text-muted);
	font-size: 0.85rem;
	font-family: inherit;
	cursor: pointer;
	transition: var(--wcfmvd-transition);
}

.wcfmvd-view-btn + .wcfmvd-view-btn {
	border-left: 1px solid var(--wcfmvd-border);
}

.wcfmvd-view-btn:hover {
	background: var(--wcfmvd-surface);
	color: var(--wcfmvd-text);
}

.wcfmvd-view-btn.wcfmvd-active {
	background: var(--wcfmvd-primary);
	color: #ffffff;
}

/* Vendors Grid */
.wcfmvd-vendors-grid {
	display: grid;
	grid-template-columns: repeat(var(--wcfmvd-columns), 1fr);
	gap: 1.5rem;
	margin-bottom: 2rem;
}

/* List view - one full-width row per vendor, logo beside the details. The
   description is rendered in both layouts but only revealed here, so switching
   views is a class toggle rather than a refetch. */
.wcfmvd-vendors-grid.wcfmvd-view-list {
	grid-template-columns: 1fr;
	gap: 1rem;
}

.wcfmvd-view-list .wcfmvd-vendor-card-inner {
	display: grid;
	grid-template-columns: 96px 1fr auto;
	align-items: center;
	gap: 1.5rem;
	text-align: left;
}

.wcfmvd-view-list .wcfmvd-vendor-logo {
	width: 96px;
	height: 96px;
	margin: 0;
}

.wcfmvd-view-list .wcfmvd-vendor-info {
	text-align: left;
	min-width: 0;
}

.wcfmvd-view-list .wcfmvd-vendor-rating,
.wcfmvd-view-list .wcfmvd-vendor-badges,
.wcfmvd-view-list .wcfmvd-vendor-categories {
	justify-content: flex-start;
}

.wcfmvd-view-list .wcfmvd-vendor-footer {
	margin: 0;
	padding: 0;
	border: 0;
	white-space: nowrap;
}

.wcfmvd-view-list .wcfmvd-vendor-card:hover {
	transform: none;
}

/* Description - list view only */
.wcfmvd-vendor-description {
	display: none;
	margin: 0.5rem 0 0;
	font-size: 0.88rem;
	line-height: 1.55;
	color: var(--wcfmvd-text-muted);
}

.wcfmvd-view-list .wcfmvd-vendor-description {
	display: block;
}

/* Category chips */
.wcfmvd-vendor-categories {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	justify-content: center;
	margin: 0.5rem 0 0;
}

.wcfmvd-category-chip {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--wcfmvd-surface);
	border: 1px solid var(--wcfmvd-border);
	font-size: 0.75rem;
	color: var(--wcfmvd-text-muted);
	line-height: 1.5;
}

/* Vendor Card */
.wcfmvd-vendor-card {
	background: var(--wcfmvd-bg);
	border-radius: var(--wcfmvd-radius);
	box-shadow: var(--wcfmvd-shadow);
	overflow: hidden;
	transition: var(--wcfmvd-transition);
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wcfmvd-vendor-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wcfmvd-shadow-lg);
}

.wcfmvd-vendor-card-link {
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wcfmvd-vendor-card-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.5rem;
}

/* Vendor Logo */
.wcfmvd-vendor-logo {
	width: 80px;
	height: 80px;
	border-radius: var(--wcfmvd-radius-sm);
	overflow: hidden;
	margin: 0 auto 1rem;
	background: var(--wcfmvd-surface);
	display: flex;
	align-items: center;
	justify-content: center;
}

.wcfmvd-vendor-logo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wcfmvd-vendor-logo-placeholder {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #ffffff;
	font-size: 2rem;
	font-weight: 600;
}

/* Vendor Info */
.wcfmvd-vendor-info {
	flex: 1;
	text-align: center;
	margin-bottom: 1rem;
}

.wcfmvd-vendor-name {
	font-size: 1.1rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
	color: var(--wcfmvd-text);
	line-height: 1.3;
}

.wcfmvd-vendor-location {
	font-size: 0.875rem;
	color: var(--wcfmvd-text-muted);
	margin: 0 0 0.75rem;
}

/* Rating */
.wcfmvd-vendor-rating {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
	flex-wrap: wrap;
}

.wcfmvd-rating-stars {
	color: #fbbf24;
	font-size: 1rem;
	letter-spacing: 0.05em;
}

.wcfmvd-rating-value {
	font-weight: 600;
	color: var(--wcfmvd-text);
	font-size: 0.9rem;
}

.wcfmvd-rating-count {
	color: var(--wcfmvd-text-muted);
	font-size: 0.85rem;
}

.wcfmvd-rating-none {
	color: var(--wcfmvd-text-muted);
	font-size: 0.85rem;
	font-style: italic;
}

/* Badges */
.wcfmvd-vendor-badges {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	flex-wrap: wrap;
}

.wcfmvd-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.wcfmvd-badge-featured {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #ffffff;
}

.wcfmvd-badge-verified {
	background: linear-gradient(135deg, #10b981, #059669);
	color: #ffffff;
}

/* Footer */
.wcfmvd-vendor-footer {
	margin-top: auto;
	padding-top: 1rem;
	text-align: center;
}

.wcfmvd-view-store-btn {
	display: inline-block;
	padding: 0.625rem 1.5rem;
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #ffffff;
	border-radius: var(--wcfmvd-radius-sm);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: var(--wcfmvd-transition);
}

.wcfmvd-vendor-card:hover .wcfmvd-view-store-btn {
	transform: scale(1.05);
}

/* Pagination */
.wcfmvd-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 2rem;
	flex-wrap: wrap;
}

.wcfmvd-pagination button,
.wcfmvd-pagination .wcfmvd-page-num {
	min-width: 40px;
	height: 40px;
	padding: 0 0.75rem;
	border: 1px solid var(--wcfmvd-border);
	background: var(--wcfmvd-bg);
	color: var(--wcfmvd-text);
	border-radius: var(--wcfmvd-radius-sm);
	font-size: 0.9rem;
	font-weight: 500;
	cursor: pointer;
	transition: var(--wcfmvd-transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Numbered pages are real buttons now, so exclude the disabled first/last and
   prev/next arrows from the hover treatment. */
.wcfmvd-pagination button:hover:not(:disabled),
.wcfmvd-pagination .wcfmvd-page-num:hover:not(:disabled) {
	background: var(--wcfmvd-surface);
	border-color: var(--wcfmvd-primary);
	color: #d97706;
}

.wcfmvd-pagination button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.wcfmvd-pagination .wcfmvd-page-num.wcfmvd-active {
	background: #f59e0b;
	color: #ffffff;
	border-color: #f59e0b;
}

/* The active page is the current location, not a target. */
.wcfmvd-pagination .wcfmvd-page-num.wcfmvd-active:hover {
	background: #f59e0b;
	color: #ffffff;
	border-color: #f59e0b;
	cursor: default;
}

.wcfmvd-pagination {
	flex-wrap: wrap;
}

/* Overlay */
.wcfmvd-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}

.wcfmvd-spinner {
	width: 50px;
	height: 50px;
	border: 4px solid rgba(255, 255, 255, 0.3);
	border-top-color: #ffffff;
	border-radius: 50%;
	animation: wcfmvd-spin 0.8s linear infinite;
}

@keyframes wcfmvd-spin {
	to {
		transform: rotate(360deg);
	}
}

/* No Results */
.wcfmvd-no-results {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--wcfmvd-text-muted);
}

.wcfmvd-no-results-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.wcfmvd-no-results-text {
	font-size: 1.1rem;
	font-weight: 500;
}

/* Responsive */
@media (max-width: 1024px) {
	/* Scoped to the grid layout so it cannot override list view, which is
	   always a single column. */
	.wcfmvd-vendors-grid.wcfmvd-view-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.wcfmvd-filters {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

@media (max-width: 640px) {
	.wcfmvd-vendors-grid.wcfmvd-view-grid {
		grid-template-columns: 1fr;
	}

	.wcfmvd-filters {
		grid-template-columns: 1fr;
	}

	.wcfmvd-vendor-card-inner {
		padding: 1rem;
	}

	.wcfmvd-vendor-logo {
		width: 60px;
		height: 60px;
	}

	/* Stack the list row: the three-column layout has no room on phones. */
	.wcfmvd-view-list .wcfmvd-vendor-card-inner {
		grid-template-columns: 60px 1fr;
		gap: 1rem;
	}

	.wcfmvd-view-list .wcfmvd-vendor-logo {
		width: 60px;
		height: 60px;
	}

	.wcfmvd-view-list .wcfmvd-vendor-footer {
		grid-column: 1 / -1;
	}

	.wcfmvd-view-label {
		display: none;
	}

	/* The count takes its own row so the switch and page-size sit together. */
	.wcfmvd-result-count {
		flex: 0 0 100%;
		margin-right: 0;
	}

	.wcfmvd-pagination .wcfmvd-page-num,
	.wcfmvd-pagination button {
		min-width: 36px;
		padding: 0.4rem 0.6rem;
	}
}