/**
 * Car Make Model Year — Public Styles
 *
 * Theme-agnostic styles for the [car_selector] shortcode.
 * All classes prefixed with cmmy- to avoid theme conflicts.
 *
 * @package CarMakeModelYear
 */

/* Selector container */
.cmmy-car-selector {
	max-width: 600px;
	margin: 20px 0;
	padding: 25px;
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

/* Form layout */
.cmmy-selector-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Field container */
.cmmy-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

/* Labels */
.cmmy-field label {
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}

/* Inputs and selects */
.cmmy-select,
.cmmy-input {
	width: 100%;
	padding: 10px 12px;
	font-size: 15px;
	line-height: 1.5;
	color: #1f2937;
	background-color: #fff;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
	box-sizing: border-box;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* Select arrow */
.cmmy-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%236b7280'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 20px;
	padding-right: 36px;
	cursor: pointer;
}

/* Focus state */
.cmmy-select:focus,
.cmmy-input:focus {
	border-color: #2563eb;
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

/* Disabled state */
.cmmy-select:disabled {
	background-color: #f3f4f6;
	color: #9ca3af;
	cursor: not-allowed;
}

/* Loading indicator */
.cmmy-select.cmmy-loading {
	background-image: none;
	color: #9ca3af;
}

/* Submit button */
.cmmy-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: #fff;
	background-color: #2563eb;
	border: 1px solid transparent;
	border-radius: 6px;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
	text-decoration: none;
}

.cmmy-button:hover {
	background-color: #1d4ed8;
}

.cmmy-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3);
}

/* Responsive */
@media screen and (min-width: 640px) {
	.cmmy-selector-form {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: flex-end;
	}

	.cmmy-field {
		flex: 1;
		min-width: 140px;
	}

	.cmmy-field-search {
		flex-basis: 100%;
	}

	.cmmy-field-submit {
		flex: 0 0 auto;
	}
}