/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* Filter row alignment */
.filter-row,
.plant-filter-row,
.shop-filter-row,
form.plant-filters,
form.filter-form {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

/* Fix dropdown text clipping */
.filter-row select,
.plant-filter-row select,
.shop-filter-row select,
form.plant-filters select,
form.filter-form select,
select {
	height: 50px !important;
	min-height: 50px !important;
	padding: 0 18px !important;
	line-height: normal !important;
	box-sizing: border-box !important;
}

/* Make button match nicely */
.filter-row button,
.filter-row input[type="submit"],
.plant-filter-row button,
.plant-filter-row input[type="submit"],
.shop-filter-row button,
.shop-filter-row input[type="submit"],
form.plant-filters button,
form.plant-filters input[type="submit"],
form.filter-form button,
form.filter-form input[type="submit"] {
	height: 50px;
	padding: 0 24px;
	border-radius: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

/* Optional: cleaner select appearance */
select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-position: right 14px center;
	background-repeat: no-repeat;
	padding-right: 40px;
}

/* If Flatsome is overriding select styles */
select,
select option {
	font-size: 14px;
}

/*************** ADD MOBILE ONLY CSS HERE  ***************/
@media only screen and (max-width: 48em) {

	.filter-row,
	.plant-filter-row,
	.shop-filter-row,
	form.plant-filters,
	form.filter-form {
		flex-direction: column;
		align-items: stretch;
	}

	.filter-row select,
	.filter-row button,
	.filter-row input[type="submit"],
	.plant-filter-row select,
	.plant-filter-row button,
	.plant-filter-row input[type="submit"],
	.shop-filter-row select,
	.shop-filter-row button,
	.shop-filter-row input[type="submit"],
	form.plant-filters select,
	form.plant-filters button,
	form.plant-filters input[type="submit"],
	form.filter-form select,
	form.filter-form button,
	form.filter-form input[type="submit"] {
		width: 100%;
	}
}