/**
 * Yangze Post Search - Frontend Styles
 *
 * @package Yangze_Post_Search
 */

/* ========================================
   Container Layout
   ======================================== */

.yzps-search-container {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* ========================================
   Title
   ======================================== */

.yzps-title {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 20px 0;
	color: #333;
}

/* ========================================
   Select Boxes Container - Three Column Layout
   ======================================== */

.yzps-selects {
	display: flex;
	gap: 15px;
	margin-bottom: 20px;
}

/* ========================================
   Individual Select Styles
   ======================================== */

.yzps-select {
	flex: 1;                        /* Equal width for all three selects */
	height: 45px;                   /* Fixed height as specified */
	border: 1px solid #dfdfdf;      /* Border color as specified */
	background: white;              /* White background */
	border-radius: 0;               /* No rounded corners */
	padding: 0 10px;
	font-size: 14px;
	color: #333;
	cursor: pointer;
	transition: border-color 0.3s ease, opacity 0.3s ease;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url('data:image/svg+xml;charset=US-ASCII,<svg width="12" height="8" viewBox="0 0 12 8" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="%23333" stroke-width="2" stroke-linecap="round"/></svg>');
	background-repeat: no-repeat;
	background-position: right 10px center;
	padding-right: 35px;
}

.yzps-select:focus {
	outline: none;
	border-color: #999;
}

.yzps-select:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background-color: #f5f5f5;
}

/* ========================================
   Button Container
   ======================================== */

.yzps-button-wrap {
	text-align: center;
}

/* ========================================
   Search Button
   ======================================== */

.yzps-search-btn {
	padding: 12px 40px;
	background: #333;
	color: white;
	border: none;
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.3s ease, transform 0.1s ease;
	border-radius: 0;
}

.yzps-search-btn:hover {
	background: #555;
}

.yzps-search-btn:active {
	transform: translateY(1px);
}

.yzps-search-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
	background: #999;
}

.yzps-search-btn:focus {
	outline: 2px solid #666;
	outline-offset: 2px;
}

/* ========================================
   Message Display
   ======================================== */

.yzps-message {
	margin-top: 15px;
	padding: 12px 15px;
	text-align: center;
	border-radius: 4px;
	font-size: 14px;
}

.yzps-message.error {
	background: #fee;
	color: #c00;
	border: 1px solid #fcc;
}

.yzps-message.info {
	background: #e7f3ff;
	color: #0056b3;
	border: 1px solid #b3d7ff;
}

/* ========================================
   Error Message (for invalid shortcode)
   ======================================== */

.yzps-error {
	padding: 15px;
	background: #fee;
	color: #c00;
	border: 1px solid #fcc;
	border-radius: 4px;
	margin: 10px 0;
}

/* ========================================
   Loading State
   ======================================== */

.yzps-select.loading {
	opacity: 0.6;
	background-color: #f9f9f9;
}

/* ========================================
   Responsive Design - Mobile Mode
   ======================================== */

@media (max-width: 768px) {
	.yzps-search-container {
		padding: 15px;
	}

	.yzps-title {
		font-size: 16px;
		margin-bottom: 15px;
	}

	/* Vertical layout for mobile */
	.yzps-selects {
		flex-direction: column;  /* Stack vertically */
		gap: 15px;               /* Maintain 15px gap */
	}

	.yzps-select {
		width: 100%;             /* Full width on mobile */
		height: 45px;            /* Keep same height */
	}

	.yzps-search-btn {
		width: 100%;             /* Full width button on mobile */
		padding: 14px 20px;
	}

	.yzps-message {
		font-size: 13px;
	}
}

/* ========================================
   Small Mobile Devices
   ======================================== */

@media (max-width: 480px) {
	.yzps-search-container {
		padding: 10px;
	}

	.yzps-title {
		font-size: 15px;
	}

	.yzps-select {
		font-size: 13px;
		height: 42px;
	}

	.yzps-search-btn {
		font-size: 15px;
		padding: 12px 20px;
	}
}

/* ========================================
   Accessibility Improvements
   ======================================== */

.yzps-select:focus-visible,
.yzps-search-btn:focus-visible {
	outline: 2px solid #0066cc;
	outline-offset: 2px;
}

/* Reduced motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
	.yzps-select,
	.yzps-search-btn {
		transition: none;
	}
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.yzps-select {
		border-width: 2px;
	}

	.yzps-search-btn {
		border: 2px solid #000;
	}
}