/**
 * PVP Providers Directory Styles
 */

/* Container and Grid */
.pvp-providers-search-container {
	margin-bottom: 40px;
	padding: 20px;
	background-color: #f9f9f9;
	border-radius: 8px;
	border: 1px solid #e0e0e0;
}

.pvp-providers-filter-form {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pvp-filter-row {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 20px;
}

.pvp-filter-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}

.pvp-filter-group label {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Form Inputs */
.pvp-filter-select,
.pvp-filter-input {
	padding: 10px 12px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 14px;
	background-color: #fff;
	color: #333;
	cursor: pointer;
	transition: border-color 0.3s ease;
}

.pvp-filter-input {
	cursor: text;
	position: relative;
}

.pvp-filter-select:focus,
.pvp-filter-input:focus {
	outline: none;
	border-color: #0073aa;
	box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.pvp-filter-select:hover,
.pvp-filter-input:hover {
	border-color: #999;
}

/* Autocomplete */
.pvp-autocomplete-input {
	width: 100%;
	box-sizing: border-box;
}

/* PlaceAutocompleteElement (Search near my location) */
.pvp-nearloc-ac-container {
	width: 100%;
}

.pvp-nearloc-ac-container gmp-place-autocomplete {
	width: 100%;
	display: block;
	/* Override Material Design tokens to match pvp-filter-input */
	--gmp-mat-color-surface: #fff;
	--gmp-mat-color-on-surface: #333;
	--gmp-mat-color-on-surface-variant: #666;
	--gmp-mat-color-outline: #ddd;
	--gmp-mat-color-outline-variant: #ddd;
	--gmp-mat-color-primary: #9e045d;
	--gmp-mat-color-secondary-container: #f5f5f5;
	--gmp-mat-color-on-secondary-container: #333;
	--gmp-mat-color-background: #fff;
	--gmp-mat-color-on-background: #333;
	font-size: 14px;
	font-family: inherit;
}

.pvp-autocomplete-list {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background-color: #fff;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 4px 4px;
	max-height: 300px;
	overflow-y: auto;
	z-index: 1000;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.pvp-autocomplete-item {
	padding: 10px 12px;
	cursor: pointer;
	font-size: 14px;
	color: #333;
	border-bottom: 1px solid #f0f0f0;
	transition: background-color 0.2s ease;
}

.pvp-autocomplete-item:last-child {
	border-bottom: none;
}

.pvp-autocomplete-item:hover {
	background-color: #f5f5f5;
	color: #0073aa;
}

.pvp-filter-checkboxes {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pvp-filter-checkboxes label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	user-select: none;
}

.pvp-filter-checkboxes input[type="checkbox"] {
	cursor: pointer;
	margin: 0;
	width: 18px;
	height: 18px;
}

/* Buttons */
.pvp-filter-actions {
	display: flex;
	gap: 10px;
	margin-top: 10px;
}

.pvp-search-button,
.pvp-reset-button {
	padding: 12px 24px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pvp-search-button {
	background-color: #0073aa;
	color: white;
}

.pvp-search-button:hover {
	background-color: #005a87;
	box-shadow: 0 2px 8px rgba(0, 115, 170, 0.3);
}

.pvp-search-button:active {
	transform: translateY(1px);
}

.pvp-reset-button {
	background-color: #f0f0f0;
	color: #333;
	border: 1px solid #ddd;
}

.pvp-reset-button:hover {
	background-color: #e8e8e8;
}

/* Results Container */
.pvp-providers-results-container {
	margin-top: 40px;
}

.pvp-providers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 24px;
	align-items: start;
}

/* Provider Card */
.pvp-provider-card {
	background-color: #fff;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.pvp-provider-card:hover {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

/* Research & therapy centers — promoted to top of listing */
.pvp-provider-center {
	background-color: #fffde7;
	border-color: #f5c518;
}

.pvp-provider-center .pvp-provider-header {
	background-color: #fff8c5;
}

/* Proximity / location row layout */
.pvp-location-row {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	flex-wrap: wrap;
}

.pvp-autocomplete-wrapper {
	flex: 0 0 calc(50% - 6px);
	position: relative;
}

.pvp-autocomplete-wrapper .pvp-filter-input {
	width: 100%;
}

.pvp-proximity-wrapper {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 0 0 calc(50% - 6px);
}

.pvp-proximity-wrapper label {
	font-size: 13px;
	color: #555;
	font-weight: 600;
}

.pvp-proximity-wrapper .pvp-filter-select {
	width: 100%;
}

/* Distance badge on provider card */
.pvp-provider-distance {
	margin: 4px 0 0;
	font-size: 14px;
	color: #9e045d;
	font-weight: 600;
}

.pvp-provider-header {
	padding: 16px;
	background-color: #f5f5f5;
	border-bottom: 2px solid #9e045d;
}

.pvp-provider-name {
	margin: 0 0 8px 0;
	font-size: 22px !important;
	font-weight: 700;
	color: #9e045d;
	line-height: 1.3;
	text-transform: capitalize;
}

.pvp-provider-clinic {
	margin: 0;
	font-size: 15px;
	color: #666;
	font-weight: 500;
	line-height: 22px;
}

.pvp-provider-body {
	padding: 16px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.pvp-provider-phone,
.pvp-provider-languages,
.pvp-provider-offerings,
.pvp-provider-setting,
.pvp-provider-address {
	font-size: 15px;
	line-height: 1.5;
}

.pvp-provider-phone strong,
.pvp-provider-languages strong,
.pvp-provider-offerings strong,
.pvp-provider-setting strong,
.pvp-provider-address strong {
	display: block;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
}

.pvp-provider-phone a {
	color: #9e045d;
	text-decoration: none;
	transition: color 0.3s ease;
}

.pvp-provider-phone a:hover {
	color: #7a0348;
	text-decoration: underline;
}

.pvp-provider-phone p,
.pvp-provider-languages p,
.pvp-provider-offerings p,
.pvp-provider-setting p,
.pvp-provider-address p {
	margin: 0;
	color: #555;
	line-height: 1.5;
}

/* Loading Indicator */
.pvp-providers-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60px 20px;
	gap: 16px;
}

.pvp-providers-loading p {
	margin: 0;
	color: #555;
	font-size: 16px;
}

.pvp-loading-spinner {
	width: 44px;
	height: 44px;
	border: 4px solid #e0e0e0;
	border-top-color: #0073aa;
	border-radius: 50%;
	animation: pvp-spin 0.8s linear infinite;
}

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

/* No Results */
.pvp-providers-no-results {
	grid-column: 1 / -1;
	padding: 40px 20px;
	text-align: center;
	background-color: #f9f9f9;
	border-radius: 8px;
}

.pvp-providers-no-results p {
	margin: 0;
	color: #666;
	font-size: 16px;
}

/* Load More inline loading indicator */
.pvp-load-more-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 30px 20px;
}

.pvp-load-more-loading p {
	margin: 0;
	color: #555;
	font-size: 15px;
}

/* Load More */
.pvp-providers-pagination-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 40px;
	padding: 20px;
}

.pvp-load-more-btn {
	padding: 12px 40px;
	font-size: 15px;
	font-weight: 600;
	border: 2px solid #9e045d;
	border-radius: 4px;
	background-color: #fff;
	color: #9e045d;
	cursor: pointer;
	transition: all 0.3s ease;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.pvp-load-more-btn:hover {
	background-color: #9e045d;
	color: #fff;
}

/* Legacy pagination (kept for reference, not used) */
.pvp-providers-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}

.pvp-pagination-numbers {
	display: flex;
	gap: 4px;
	align-items: center;
}

.pvp-pagination-ellipsis {
	color: #999;
	padding: 0 4px;
	user-select: none;
}

/* Loading State */
.pvp-providers-grid.loading {
	opacity: 0.6;
	pointer-events: none;
}

.pvp-providers-grid.loading::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 40px;
	height: 40px;
	border: 3px solid #0073aa;
	border-top-color: transparent;
	border-radius: 50%;
	animation: pvp-spin-overlay 0.8s linear infinite;
}

@keyframes pvp-spin-overlay {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Search mode radio toggle */
.pvp-search-mode-toggle {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	align-items: center;
}

.pvp-mode-option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}

.pvp-mode-option input[type="radio"] {
	width: 16px;
	height: 16px;
	cursor: pointer;
	accent-color: #9e045d;
	margin: 0;
}

.pvp-mode-option span {
	font-size: 14px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
	user-select: none;
}

.pvp-search-hint {
	margin: 8px 0 0;
	font-size: 15px;
	line-height: 1.4;
	color: #666;
}

.pvp-search-hint--error {
	color: #c0202d;
	font-weight: 600;
}

.pvp-search-section {
	padding-top: 4px;
}

/* Hide "Search by Provider Location" — functionality kept, UI hidden */
label:has(#pvp-mode-location) {
	display: none;
}

/* Hide Clinical Settings filter rows — kept in HTML for future use */
.pvp-checkbox-row div:has(input[name="nearloc_clinical_setting[]"]),
.pvp-checkbox-row div:has(input[name="country_clinical_setting[]"]) {
	display: none;
}

/* Hide Clinical Offerings in the online tab — kept in HTML for future use.
   The whole row goes, not just the checkbox block: the row owns the divider and
   the spacing, so hiding only its contents would leave a stray line and a gap. */
#pvp-online-section .pvp-checkbox-row {
	display: none;
}

/* Checkbox filter rows inside search sections */
.pvp-checkbox-row {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e0e0e0;
}

.pvp-checkbox-group-label {
	font-weight: 600;
	color: #333;
	font-size: 14px;
	margin-bottom: 4px;
	display: block;
}

.pvp-filter-checkboxes-inline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px 16px;
}

.pvp-filter-checkboxes-inline label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: normal;
	text-transform: none;
	letter-spacing: normal;
	cursor: pointer;
	font-size: 14px;
}

.pvp-filter-checkboxes-inline input[type="checkbox"] {
	cursor: pointer;
	margin: 0;
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	accent-color: #9e045d;
}

/* Website link in provider card */
.pvp-provider-website {
	font-size: 15px;
	line-height: 1.5;
}

.pvp-provider-website strong {
	display: block;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
}

.pvp-provider-website a {
	color: #9e045d;
	text-decoration: none;
	word-break: break-all;
	transition: color 0.3s ease;
}

.pvp-provider-website a:hover {
	color: #7a0348;
	text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
	.pvp-filter-row {
		grid-template-columns: 1fr;
	}

	.pvp-providers-grid {
		grid-template-columns: 1fr;
	}

	.pvp-filter-actions {
		flex-wrap: wrap;
	}

	.pvp-search-button,
	.pvp-reset-button {
		flex: 1;
		min-width: 120px;
	}

	.pvp-providers-search-container {
		padding: 15px;
	}

	.pvp-provider-header {
		padding: 12px;
	}

	.pvp-provider-body {
		padding: 12px;
	}

	.pvp-filter-checkboxes-inline {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.pvp-providers-search-container {
		margin-bottom: 20px;
		padding: 12px;
	}

	.pvp-provider-name {
		font-size: 16px;
	}

	.pvp-provider-clinic {
		font-size: 12px;
	}

	.pvp-provider-phone,
	.pvp-provider-languages,
	.pvp-provider-offerings,
	.pvp-provider-setting,
	.pvp-provider-address {
		font-size: 12px;
	}
}