/**
 * Product Search Form Styles
 *
 * Matches existing contact-form styling with .hero-input and .hero-submit-btn patterns.
 *
 * @package GeneratePressChild
 */

/* ==========================================================================
   Wrapper
   ========================================================================== */

.product-search-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.product-search-form {
	width: 100%;
}

/* ==========================================================================
   Form Rows
   ========================================================================== */

.product-search-row {
	margin-bottom: 15px;
}

.product-search-row--filters {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 15px;
}

.product-search-row--submit {
	margin-top: 20px;
}

/* ==========================================================================
   Input & Select Styling (matching .hero-input)
   ========================================================================== */

.product-search-input,
.product-search-select {
	width: 100%;
	padding: 16px 20px;
	font-size: 16px;
	border: 2px solid #e0e0e0;
	border-radius: 4px;
	outline: none;
	transition: all 0.3s ease;
	background-color: #fff;
	color: #333;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.product-search-input:focus,
.product-search-select:focus {
	border-color: #2271b1;
	box-shadow: 0 0 0 1px #2271b1;
}

/* Select dropdown arrow */
.product-search-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 44px;
	cursor: pointer;
}

/* Placeholder styling */
.product-search-input::placeholder {
	color: #999;
}

/* ==========================================================================
   Submit Button (matching .hero-submit-btn)
   ========================================================================== */

.product-search-btn {
	display: block;
	width: 100%;
	padding: 16px 32px;
	font-size: 16px;
	font-weight: 600;
	color: #ffffff;
	background-color: #EE7A10;
	border: 2px solid #EE7A10;
	border-radius: 4px;
	cursor: pointer;
	transition: all 0.3s ease;
	text-align: center;
}

.product-search-btn:hover {
	background-color: #ec8425;
	border-color: #ec8425;
}

.product-search-btn:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(238, 122, 16, 0.3);
}

/* ==========================================================================
   Responsive: Mobile (Stacked Layout)
   ========================================================================== */

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

	.product-search-row--filters {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.product-search-input,
	.product-search-select {
		font-size: 16px; /* Prevent zoom on iOS */
	}

	.product-search-btn {
		padding: 16px 20px;
	}
}

/* ==========================================================================
   Full Width Alignment Support
   ========================================================================== */

.product-search-wrapper.alignwide {
	max-width: 1000px;
}

.product-search-wrapper.alignfull {
	max-width: 100%;
	padding-left: 20px;
	padding-right: 20px;
}