/**
 * WP Travel Engine Trip Search — Hike style (is-style-hike)
 *
 * Pill search bar: stacked label/value, vertical dividers, rounded search button.
 */

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip-sfilter-wrapper {
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields,
.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields.horizontal {
	display: flex;
	flex-direction: row;
	align-items: center;
	width: 100%;
	min-height: 68px;
	padding: 12px;
	background-color: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields .wpte-trip__adv-field,
.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields.horizontal .wpte-trip__adv-field {
	position: relative;
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	grid-template-rows: auto auto;
	column-gap: 10px;
	row-gap: 1px;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
	height: auto !important;
	min-height: 52px;
	margin: 0 !important;
	padding: 4px 16px;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	box-shadow: none;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields .wpte-trip__adv-field + .wpte-trip__adv-field {
	border-left: 1px solid #e8e8e8 !important;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field.wpte__select-field::after {
	content: none !important;
	display: none !important;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field[data-label]::before {
	content: attr(data-label);
	grid-column: 2;
	grid-row: 1;
	font-family: var(--font-family, Inter, sans-serif);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: #8a8a8a;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field .icon {
	position: static !important;
	left: auto;
	top: auto;
	transform: none !important;
	grid-column: 1;
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	font-size: 18px;
	color: #9a9a9a;
	line-height: 1;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field .icon svg {
	width: 18px;
	height: 18px;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field .wpte__input {
	grid-column: 2;
	grid-row: 2;
	width: 100%;
	height: auto !important;
	min-width: 0;
	min-height: 27px !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	box-shadow: none !important;
	font-family: var(--font-family, Inter, sans-serif);
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.3;
	color: #111;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field .wpte__input::placeholder {
	color: #111;
	font-weight: 700;
	opacity: 1;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__submit-field {
	flex: 0 0 auto;
	margin: 0;
	padding: 0 4px 0 8px;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-submit {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: auto !important;
	height: 44px !important;
	margin: 0;
	padding: 0 22px !important;
	border: none !important;
	border-radius: 999px !important;
	background-color: #111 !important;
	color: #fff !important;
	font-family: var(--font-family, Inter, sans-serif);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: none;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-submit::before {
	content: "";
	display: block;
	width: 16px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 20L16.5 16.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Ccircle cx='11' cy='11' r='7' stroke='black' stroke-width='2'/%3E%3Cpath d='M20 20L16.5 16.5' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-submit:hover,
.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-submit:focus {
	background-color: #000 !important;
	color: #fff !important;
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field.wpte__select-field .wpte__select-options {
	top: calc(100% + 10px);
	left: 8px;
	min-width: 220px;
	padding: 8px;
	border-radius: 16px;
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__adv-field.wpte__select-field .wpte__select-options ul li span {
	padding: 10px 12px;
	border-radius: 10px;
}

@media (max-width: 767px) {
	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields,
	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields.horizontal {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 12px;
		border-radius: 24px;
		gap:20px;
	}

	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields .wpte-trip__adv-field,
	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields.horizontal .wpte-trip__adv-field {
		width: 100%;
		padding: 12px 10px;
	}

	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-fields .wpte-trip__adv-field + .wpte-trip__adv-field {
		border-left: none !important;
		border-top: 1px solid #e8e8e8 !important;
	}

	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__submit-field {
		padding: 10px 0 0;
	}

	.wp-block-wptravelengine-trip-search.is-style-hike .wpte-trip__search-submit {
		width: 100% !important;
	}
}