/**
 * Company Directory Search - Frontend Styles
 * 
 * Tailwind-inspired CSS that's scoped to avoid conflicts with WordPress admin
 * All classes are prefixed with 'cds-' to prevent style conflicts
 * 
 * @package CompanyDirectorySearch
 * @since 1.0.0
 */

/* Reset and base styles for CDS components only */
.cds-search-container *,
.cds-search-container *::before,
.cds-search-container *::after {
	box-sizing: border-box;
}

.cds-search-container {
	--cds-primary: #3b82f6;
	--cds-primary-dark: #2563eb;
	--cds-primary-light: #60a5fa;
	--cds-secondary: #6b7280;
	--cds-success: #10b981;
	--cds-error: #ef4444;
	--cds-warning: #f59e0b;
	--cds-gray-50: #f9fafb;
	--cds-gray-100: #f3f4f6;
	--cds-gray-200: #e5e7eb;
	--cds-gray-300: #d1d5db;
	--cds-gray-400: #9ca3af;
	--cds-gray-500: #6b7280;
	--cds-gray-600: #4b5563;
	--cds-gray-700: #374151;
	--cds-gray-800: #1f2937;
	--cds-gray-900: #111827;
	--cds-white: #ffffff;
	--cds-black: #000000;
	--cds-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
	--cds-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--cds-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--cds-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--cds-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	--cds-border-radius: 0.375rem;
	--cds-border-radius-lg: 0.5rem;
	--cds-border-radius-xl: 0.75rem;
	--cds-transition: all 0.15s ease-in-out;
	--cds-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Container and wrapper styles */
.cds-search-container {
	font-family: var(--cds-font-family);
	font-size: 14px;
	line-height: 1.5;
	color: var(--cds-gray-900);
	max-width: 100%;
	margin: 0 auto;
}

.cds-form-wrapper {
	width: 100%;
}

/* Search form styles */
.cds-search-form {
	width: 100%;
	margin-bottom: 1.5rem;
}

.cds-input-container {
	position: relative;
	width: 100%;
}

.cds-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	width: 100%;
}

.cds-search-input {
	width: 100%;
	padding: 0.75rem 3rem 0.75rem 1rem;
	border: 2px solid var(--cds-gray-300);
	border-radius: var(--cds-border-radius-lg);
	font-size: 1rem;
	line-height: 1.5;
	color: var(--cds-gray-900);
	background-color: var(--cds-white);
	transition: var(--cds-transition);
	outline: none;
	font-family: inherit;
}

.cds-search-input:focus {
	border-color: var(--cds-primary);
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.cds-search-input::placeholder {
	color: var(--cds-gray-400);
}

.cds-search-button,
.cds-clear-button {
	position: absolute;
	right: 0.5rem;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.5rem;
	border: none;
	background: none;
	color: var(--cds-gray-400);
	cursor: pointer;
	border-radius: var(--cds-border-radius);
	transition: var(--cds-transition);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cds-search-button:hover,
.cds-clear-button:hover {
	color: var(--cds-gray-600);
	background-color: var(--cds-gray-100);
}

.cds-search-button:focus,
.cds-clear-button:focus {
	outline: 2px solid var(--cds-primary);
	outline-offset: 2px;
}

.cds-search-icon,
.cds-clear-icon {
	width: 1.25rem;
	height: 1.25rem;
}

.cds-clear-button {
	right: 2.5rem;
}

/* Loading indicator */
.cds-loading {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: var(--cds-gray-600);
}

.cds-spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--cds-gray-200);
	border-top: 2px solid var(--cds-primary);
	border-radius: 50%;
	animation: cds-spin 1s linear infinite;
	margin-right: 0.5rem;
}

@keyframes cds-spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.cds-loading-text {
	font-size: 0.875rem;
}

/* Autocomplete dropdown */
.cds-autocomplete-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1000;
	background-color: var(--cds-white);
	border: 1px solid var(--cds-gray-200);
	border-radius: var(--cds-border-radius-lg);
	box-shadow: var(--cds-shadow-lg);
	margin-top: 0.25rem;
	max-height: 16rem;
	overflow-y: auto;
}

.cds-autocomplete-list {
	list-style: none;
	margin: 0;
	padding: 0.25rem 0;
}

.cds-autocomplete-item {
	padding: 0.75rem 1rem;
	cursor: pointer;
	color: var(--cds-gray-900);
	transition: var(--cds-transition);
	border: none;
	background: none;
	width: 100%;
	text-align: left;
}

.cds-autocomplete-item:hover,
.cds-autocomplete-item:focus {
	background-color: var(--cds-gray-50);
	color: var(--cds-primary);
}

.cds-autocomplete-item.cds-selected {
	background-color: var(--cds-primary);
	color: var(--cds-white);
}

.cds-autocomplete-item.cds-no-suggestions {
	color: var(--cds-gray-500);
	cursor: default;
	font-style: italic;
}

.cds-autocomplete-item.cds-no-suggestions:hover {
	background-color: transparent;
	color: var(--cds-gray-500);
}

/* Security elements */
.cds-turnstile-container {
	margin: 1rem 0;
	display: flex;
	justify-content: center;
}

/* Results container */
.cds-results-container {
	width: 100%;
	margin-top: 1.5rem;
}

.cds-results-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--cds-gray-200);
}

.cds-results-title {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--cds-gray-900);
	margin: 0;
}

.cds-results-count {
	font-size: 0.875rem;
	color: var(--cds-gray-600);
	font-weight: 500;
}

/* Results grid */
.cds-results-grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.cds-results-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.cds-results-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Company card */
.cds-company-card {
	background-color: var(--cds-white);
	border: 1px solid var(--cds-gray-200);
	border-radius: var(--cds-border-radius-lg);
	padding: 1.5rem;
	transition: var(--cds-transition);
	box-shadow: var(--cds-shadow-sm);
}

.cds-company-card:hover {
	box-shadow: var(--cds-shadow-md);
	border-color: var(--cds-gray-300);
}

.cds-company-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 1rem;
}

.cds-company-name {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--cds-gray-900);
	margin: 0;
	line-height: 1.4;
	flex: 1;
	margin-right: 0.5rem;
}

.cds-company-website {
	color: var(--cds-primary);
	text-decoration: none;
	padding: 0.25rem;
	border-radius: var(--cds-border-radius);
	transition: var(--cds-transition);
	flex-shrink: 0;
}

.cds-company-website:hover {
	background-color: var(--cds-gray-50);
	color: var(--cds-primary-dark);
}

.cds-company-website:focus {
	outline: 2px solid var(--cds-primary);
	outline-offset: 2px;
}

.cds-external-icon {
	width: 1rem;
	height: 1rem;
}

.cds-company-details {
	space-y: 0.75rem;
}

.cds-company-address,
.cds-company-phone {
	display: flex;
	align-items: flex-start;
	color: var(--cds-gray-600);
	font-size: 0.875rem;
	margin-bottom: 0.75rem;
}

.cds-detail-icon {
	width: 1rem;
	height: 1rem;
	margin-right: 0.5rem;
	margin-top: 0.125rem;
	flex-shrink: 0;
	color: var(--cds-gray-400);
}

.cds-phone-link {
	color: inherit;
	text-decoration: none;
	transition: var(--cds-transition);
}

.cds-phone-link:hover {
	color: var(--cds-primary);
}

.cds-phone-link:focus {
	outline: 2px solid var(--cds-primary);
	outline-offset: 2px;
	border-radius: var(--cds-border-radius);
}

/* No results state */
.cds-no-results {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--cds-gray-500);
}

.cds-no-results-icon {
	width: 3rem;
	height: 3rem;
	margin: 0 auto 1rem;
	color: var(--cds-gray-300);
}

.cds-no-results-icon svg {
	width: 100%;
	height: 100%;
}

.cds-no-results-title {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--cds-gray-700);
	margin: 0 0 0.5rem;
}

.cds-no-results-text {
	font-size: 0.875rem;
	margin: 0;
	line-height: 1.6;
}

/* Error state */
.cds-error-message {
	text-align: center;
	padding: 2rem 1rem;
	background-color: var(--cds-gray-50);
	border: 1px solid var(--cds-gray-200);
	border-radius: var(--cds-border-radius-lg);
	color: var(--cds-error);
}

.cds-error-icon {
	width: 2.5rem;
	height: 2.5rem;
	margin: 0 auto 1rem;
	color: var(--cds-error);
}

.cds-error-icon svg {
	width: 100%;
	height: 100%;
}

.cds-error-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 0.5rem;
}

.cds-error-text {
	font-size: 0.875rem;
	margin: 0 0 1rem;
	color: var(--cds-gray-600);
}

.cds-retry-button {
	background-color: var(--cds-primary);
	color: var(--cds-white);
	border: none;
	padding: 0.5rem 1rem;
	border-radius: var(--cds-border-radius);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	transition: var(--cds-transition);
	font-family: inherit;
}

.cds-retry-button:hover {
	background-color: var(--cds-primary-dark);
}

.cds-retry-button:focus {
	outline: 2px solid var(--cds-primary);
	outline-offset: 2px;
}

/* Screen reader only content */
.cds-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Theme variations */
.cds-search-container[data-theme="dark"] {
	--cds-gray-50: #1f2937;
	--cds-gray-100: #374151;
	--cds-gray-200: #4b5563;
	--cds-gray-300: #6b7280;
	--cds-gray-400: #9ca3af;
	--cds-gray-500: #d1d5db;
	--cds-gray-600: #e5e7eb;
	--cds-gray-700: #f3f4f6;
	--cds-gray-800: #f9fafb;
	--cds-gray-900: #ffffff;
	--cds-white: #1f2937;
	background-color: var(--cds-white);
}

.cds-search-container[data-theme="minimal"] .cds-search-input {
	border: none;
	border-bottom: 2px solid var(--cds-gray-300);
	border-radius: 0;
	background-color: transparent;
}

.cds-search-container[data-theme="minimal"] .cds-search-input:focus {
	border-bottom-color: var(--cds-primary);
	box-shadow: none;
}

.cds-search-container[data-theme="minimal"] .cds-company-card {
	border: none;
	border-left: 3px solid var(--cds-primary);
	border-radius: 0;
	box-shadow: none;
}

/* Responsive design */
@media (max-width: 639px) {
	.cds-search-container {
		font-size: 16px; /* Prevent zoom on iOS */
	}
	
	.cds-search-input {
		font-size: 16px; /* Prevent zoom on iOS */
	}
	
	.cds-company-header {
		flex-direction: column;
		align-items: flex-start;
	}
	
	.cds-company-name {
		margin-right: 0;
		margin-bottom: 0.5rem;
	}
	
	.cds-company-website {
		align-self: flex-start;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.cds-search-container {
		--cds-gray-300: #000000;
		--cds-gray-400: #000000;
		--cds-primary: #0000ff;
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.cds-search-container * {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Print styles */
@media print {
	.cds-search-form,
	.cds-loading,
	.cds-autocomplete-dropdown,
	.cds-turnstile-container {
		display: none !important;
	}
	
	.cds-company-card {
		break-inside: avoid;
		border: 1px solid #000;
		margin-bottom: 1rem;
	}
	
	.cds-company-website {
		color: #000;
	}
	
	.cds-company-website::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
	}
}