/**
 * Component-specific styles.
 *
 * Additional styles for page-specific components
 * that don't belong in the main design system.
 *
 * @package PickleballCourtsFL
 * @since   1.0.0
 */

/* Submit Court Form */
.pcfl-submit-form .pcfl-form-group {
	margin-bottom: var(--space-5);
}

.pcfl-submit-form .pcfl-input:invalid:not(:placeholder-shown) {
	border-color: var(--color-error);
}

/* Contact Form */
#pcfl-contact-form .pcfl-form-group {
	margin-bottom: var(--space-5);
}

/* Archive Header */
.pcfl-archive-header {
	margin-bottom: var(--space-8);
}

/* Loading Spinner */
.pcfl-spinner {
	display: inline-block;
	width: 20px;
	height: 20px;
	border: 2px solid var(--color-gray-200);
	border-top-color: var(--color-primary);
	border-radius: 50%;
	animation: pcfl-spin 0.6s linear infinite;
}

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

/* Empty State */
.pcfl-empty-state {
	text-align: center;
	padding: var(--space-16) var(--space-6);
}

.pcfl-empty-state__icon {
	font-size: 4rem;
	margin-bottom: var(--space-4);
}

.pcfl-empty-state__title {
	font-size: var(--text-2xl);
	color: var(--color-gray-600);
	margin-bottom: var(--space-3);
}

.pcfl-empty-state__text {
	color: var(--color-gray-500);
	margin-bottom: var(--space-6);
}

/* Skeleton Loading */
.pcfl-skeleton {
	background: linear-gradient(90deg, var(--color-gray-100) 25%, var(--color-gray-50) 50%, var(--color-gray-100) 75%);
	background-size: 200% 100%;
	animation: pcfl-shimmer 1.5s infinite;
	border-radius: var(--radius-sm);
}

@keyframes pcfl-shimmer {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* Tags inline list */
.pcfl-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.pcfl-tag {
	display: inline-block;
	padding: var(--space-1) var(--space-3);
	font-size: var(--text-xs);
	background: var(--color-gray-100);
	color: var(--color-gray-600);
	border-radius: var(--radius-full);
	text-decoration: none;
	transition: all var(--transition-fast);
}

.pcfl-tag:hover {
	background: var(--color-primary-light);
	color: var(--color-primary);
}

/* Comments section */
.pcfl-post-content .comments-area {
	margin-top: var(--space-12);
	padding-top: var(--space-8);
	border-top: 1px solid var(--color-gray-200);
}

.pcfl-post-content .comment-respond {
	margin-top: var(--space-6);
}

.pcfl-post-content .comment-form input[type="text"],
.pcfl-post-content .comment-form input[type="email"],
.pcfl-post-content .comment-form input[type="url"],
.pcfl-post-content .comment-form textarea {
	width: 100%;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-gray-300);
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--text-base);
	transition: border-color var(--transition-fast);
}

.pcfl-post-content .comment-form input:focus,
.pcfl-post-content .comment-form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15);
}

.pcfl-post-content .comment-form .submit {
	display: inline-flex;
	align-items: center;
	padding: var(--space-3) var(--space-6);
	background: var(--color-primary);
	color: var(--color-white);
	border: none;
	border-radius: var(--radius-md);
	font-weight: var(--font-semibold);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.pcfl-post-content .comment-form .submit:hover {
	background: var(--color-primary-dark);
}

.pcfl-post-content .comment-list {
	list-style: none;
	padding: 0;
}

.pcfl-post-content .comment-list .comment {
	padding: var(--space-5) 0;
	border-bottom: 1px solid var(--color-gray-100);
}

.pcfl-post-content .comment-author img {
	border-radius: var(--radius-full);
	margin-right: var(--space-2);
	vertical-align: middle;
}

/* Header submit button responsive */
@media (max-width: 768px) {
	.pcfl-header__submit-btn {
		display: none;
	}
}

/* Contact Page Layout */
.pcfl-contact-layout {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: var(--space-8);
	align-items: start;
	margin-top: var(--space-4);
}

@media (max-width: 991px) {
	.pcfl-contact-layout {
		grid-template-columns: 1fr;
		gap: var(--space-8);
	}
}