/* CBV design-system reskin for the ROC-P Directory search form. Matches the home page language: flat surfaces, square fields and buttons, Lato, navy/teal palette. */

.roc-p-directory-container {
	font-family: var(--wp--preset--font-family--body);
	color: #585e64;
}

.roc-p-directory-container .ad-field-label,
.roc-p-directory-container .ad-view-toggle-label {
	color: var(--cbv-surface-navy);
	font-size: 1rem;
	font-weight: 700;
}

.roc-p-directory-container .ad-input,
.roc-p-directory-container .ad-select {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 0;
	color: var(--cbv-surface-navy);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.5;
	padding: 15px 16px;
}

.roc-p-directory-container .ad-input:focus-visible,
.roc-p-directory-container .ad-select:focus-visible {
	border-color: var(--wp--preset--color--accent);
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}

.roc-p-directory-container .ad-btn.ad-btn-primary {
	background-color: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 0;
	box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	color: #000000;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	padding: 15px 24px;
	transition: background-color var(--wp--custom--transition, 0.2s ease);
}

.roc-p-directory-container .ad-btn.ad-btn-primary:hover,
.roc-p-directory-container .ad-btn.ad-btn-primary:focus-visible {
	background-color: var(--cbv-accent-hover, var(--wp--preset--color--primary));
	color: #000000;
}

.roc-p-directory-container .ad-btn-link {
	background: none;
	border: 0;
	color: var(--cbv-surface-navy);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.roc-p-directory-container .ad-btn-link:hover,
.roc-p-directory-container .ad-btn-link:focus-visible {
	color: var(--wp--preset--color--accent);
}

.roc-p-directory-container .ad-result-count {
	color: #585e64;
	font-size: 1rem;
}

.roc-p-directory-container .ad-search-loading {
	color: #585e64;
}

.roc-p-directory-container .ad-search-error,
.roc-p-directory-container .ad-field-message {
	background-color: var(--wp--preset--color--surface);
	border-left: 4px solid var(--cbv-surface-navy);
	color: var(--cbv-surface-navy);
	padding: 0.75rem 1rem;
}

/* Pagination - mirrors the theme's .cbv-pager: 40px cells, current page in a navy box. */
.roc-p-directory-container .ad-pagination-wrapper button,
.roc-p-directory-container .ad-pagination-wrapper a {
	align-items: center;
	background: none;
	border: 0;
	border-radius: 8px;
	color: #585e64;
	display: inline-flex;
	font-family: inherit;
	font-size: 1rem;
	height: 40px;
	justify-content: center;
	min-width: 40px;
	padding: 0 6px;
	text-decoration: none;
}

.roc-p-directory-container .ad-pagination-wrapper button:hover,
.roc-p-directory-container .ad-pagination-wrapper a:hover {
	background-color: var(--wp--preset--color--surface);
	color: var(--cbv-surface-navy);
}

.roc-p-directory-container .ad-pagination-wrapper .active,
.roc-p-directory-container .ad-pagination-wrapper [aria-current] {
	background-color: var(--cbv-surface-navy);
	color: var(--wp--preset--color--white);
}

/* Match the theme's wide layout width (1280px) so the directory and the page copy align. */
.roc-p-directory-container .ad-search-header,
.roc-p-directory-container .ad-search-form-wrapper,
.roc-p-directory-container .ad-search-results-wrapper {
	max-width: 1280px;
}

/* Collapse the map info window's fixed 226px photo area when the member has no photo or it fails to load. */
.roc-p-directory-container .ad-map-info-image:empty,
.roc-p-directory-container .ad-map-info-image.ad-image-error {
	display: none;
}

/* Animated loading state for directory searches. */
.roc-p-directory-container .ad-search-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 3rem 1rem;
	text-align: center;
}

.roc-p-directory-container .ad-search-loading.ad-hidden {
	display: none;
}

.roc-p-directory-container .cbv-loading-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid var(--cbv-surface, #E9F3F3);
	border-top-color: var(--wp--preset--color--primary, #170F6B);
	border-radius: 50%;
	animation: cbv-loading-spin 0.9s linear infinite;
}

.roc-p-directory-container .cbv-loading-primary {
	margin: 0;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #170F6B);
}

.roc-p-directory-container .cbv-loading-secondary {
	margin: 0;
	max-width: 32rem;
	color: var(--cbv-text-medium, #585e64);
	animation: cbv-loading-fade-in 0.4s ease-out;
}

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

@keyframes cbv-loading-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}