/**
 * Tab Search — eholidayer.com (hero mode)
 * Full-bleed background, frosted-glass segmented search bar, Google-material palette.
 * Loaded conditionally by mod_tabsearch.php when ts_hero is set.
 *
 * Palette:
 *   G-Blue   #4285F4  primary action / active state / links
 *   G-Red    #EA4335  urgency / errors
 *   G-Yellow #FBBC05  trust / stars / highlights
 *   G-Green  #34A853  success / availability
 *   White    #FFFFFF  surfaces, text on dark
 */

:root {
	--ts-blue:   #4285F4;
	--ts-blue-70: #1A73E8;
	--ts-ink:    #0F1B2D;
	--ts-fog:    #DCE3EB;
	--ts-mist:   #F5F7FA;
	--ts-white:  #FFFFFF;
	--ts-radius: 8px;
}

/* ---------------------------------------------------------------------
 * Hero wrapper — full-bleed image, centred content.
 * PHP emits: .ts_hero_wrap > .ts_hero_image + .ts_hero_overlay + .ts_hero_content
 * ------------------------------------------------------------------- */
.ts_hero_wrap {
	position: relative;
	width: 100%;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 60px 20px 50px;
	box-sizing: border-box;
}

.ts_hero_wrap .ts_hero_image {
	position: absolute;
	inset: 0;
	margin: 0;
	padding: 0;
}

.ts_hero_wrap .ts_hero_image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ts_hero_wrap .ts_hero_overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(15, 27, 45, 0.48) 0%,
		rgba(15, 27, 45, 0.32) 50%,
		rgba(15, 27, 45, 0.72) 100%
	);
}

.ts_hero_wrap .ts_hero_content {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
}

/* Tagline — hero headline. PHP: <p class="ts_hero_tagline"> */
.ts_hero_wrap .ts_hero_tagline {
	font-family: 'Figtree', 'Inter', system-ui, sans-serif;
	font-size: 36px;
	font-weight: 700;
	color: var(--ts-white);
	text-align: center;
	margin: 0 0 24px;
	letter-spacing: -0.5px;
	line-height: 1.2;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* ---------------------------------------------------------------------
 * Frosted-glass module container — Agoda-style: translucent card with blur
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_container_sblue,
.ts_hero_wrap .ts_container_sgray,
.ts_hero_wrap .ts_container_sblack {
	margin: 0;
	padding: 0;
	background: transparent;
	border: none;
}

/* ---------------------------------------------------------------------
 * Tab bar — translucent with glass effect
 * ------------------------------------------------------------------- */
.ts_hero_wrap ul.ts_tabs_sblue,
.ts_hero_wrap ul.ts_tabs_sgray,
.ts_hero_wrap ul.ts_tabs_sblack {
	display: flex;
	flex-wrap: nowrap;
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, 0.15);
	-webkit-backdrop-filter: blur(14px);
	        backdrop-filter: blur(14px);
	border: none;
	border-radius: var(--ts-radius) var(--ts-radius) 0 0;
}

.ts_hero_wrap ul.ts_tabs_sblue li,
.ts_hero_wrap ul.ts_tabs_sgray li,
.ts_hero_wrap ul.ts_tabs_sblack li,
.ts_hero_wrap ul.ts_tabs_sblue li.ts_link_sblue,
.ts_hero_wrap ul.ts_tabs_sgray li.ts_link_sgray,
.ts_hero_wrap ul.ts_tabs_sblack li.ts_link_sblack {
	flex: 1 1 auto;
	padding: 14px 16px;
	margin: 0;
	font: 600 13px / 1 'Inter', 'Roboto', system-ui, sans-serif;
	color: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	text-align: center;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	background: transparent;
	border-bottom: 3px solid transparent;
	position: relative;
	transition: background-color 0.25s, color 0.25s;
}

.ts_hero_wrap ul.ts_tabs_sblue li::after,
.ts_hero_wrap ul.ts_tabs_sgray li::after,
.ts_hero_wrap ul.ts_tabs_sblack li::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--ts-white);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

.ts_hero_wrap ul.ts_tabs_sblue li:hover,
.ts_hero_wrap ul.ts_tabs_sgray li:hover,
.ts_hero_wrap ul.ts_tabs_sblack li:hover,
.ts_hero_wrap ul.ts_tabs_sblue li.ts_link_sblue:hover,
.ts_hero_wrap ul.ts_tabs_sgray li.ts_link_sgray:hover,
.ts_hero_wrap ul.ts_tabs_sblack li.ts_link_sblack:hover {
	background: rgba(255, 255, 255, 0.22);
	color: var(--ts-white);
}

.ts_hero_wrap ul.ts_tabs_sblue li:hover::after,
.ts_hero_wrap ul.ts_tabs_sgray li:hover::after,
.ts_hero_wrap ul.ts_tabs_sblack li:hover::after {
	transform: scaleX(0.5);
}

.ts_hero_wrap ul.ts_tabs_sblue li.ts_curlink_sblue,
.ts_hero_wrap ul.ts_tabs_sgray li.ts_curlink_sgray,
.ts_hero_wrap ul.ts_tabs_sblack li.ts_curlink_sblack {
	background: rgba(255, 255, 255, 0.95);
	color: var(--ts-ink);
}

.ts_hero_wrap ul.ts_tabs_sblue li.ts_curlink_sblue::after,
.ts_hero_wrap ul.ts_tabs_sgray li.ts_curlink_sgray::after,
.ts_hero_wrap ul.ts_tabs_sblack li.ts_curlink_sblack::after {
	background: var(--ts-blue);
	transform: scaleX(1);
}

.ts_hero_wrap ul.ts_tabs_sblue li.ts_curlink_sblue:hover,
.ts_hero_wrap ul.ts_tabs_sgray li.ts_curlink_sgray:hover,
.ts_hero_wrap ul.ts_tabs_sblack li.ts_curlink_sblack:hover {
	background: rgba(255, 255, 255, 0.95);
	color: var(--ts-ink);
}

/* ---------------------------------------------------------------------
 * Content panel — frosted white glass, Agoda-style segmented bar inside
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_content_sblue,
.ts_hero_wrap .ts_content_sgray,
.ts_hero_wrap .ts_content_sblack {
	display: none;
	margin: 0;
	padding: 0;
	min-height: auto;
	font: normal 14px / 1.5 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
	background: transparent;
	border: none;
	border-radius: 0;
}

.ts_hero_wrap .ts_content_sblue.ts_curcontent_sblue,
.ts_hero_wrap .ts_content_sgray.ts_curcontent_sgray,
.ts_hero_wrap .ts_content_sblack.ts_curcontent_sblack {
	display: block;
}

.ts_hero_wrap .ts_content_sblue > p,
.ts_hero_wrap .ts_content_sgray > p,
.ts_hero_wrap .ts_content_sblack > p {
	font: normal 14px / 1.5 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
}

/* ---------------------------------------------------------------------
 * Segmented search bar inside hero — frosted glass card
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_columns {
	display: flex;
	flex-wrap: wrap;
	justify-content: stretch;
	align-items: flex-start;
	gap: 0;
	margin: 0;
	padding: 14px;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: blur(6px);
	        backdrop-filter: blur(6px);
	border: none;
	border-radius: 0 0 var(--ts-radius) var(--ts-radius);
}

/* Column flex sizing */
.ts_hero_wrap .ts_col50wbtn { flex: 1 1 45%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_hero_wrap .ts_col50     { flex: 0 0 49.5%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_hero_wrap .ts_col35wbtn { flex: 1 1 32%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_hero_wrap .ts_col30wbtn { flex: 1 1 22%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_hero_wrap .ts_colbtn    { flex: 0 0 auto; align-self: stretch; margin: 0; padding: 0; box-sizing: border-box; }

/* Vertical dividers */
.ts_hero_wrap .ts_col35wbtn,
.ts_hero_wrap .ts_col30wbtn,
.ts_hero_wrap .ts_col50wbtn {
	position: relative;
	padding: 0 14px;
	border-right: 1px solid var(--ts-fog);
}

.ts_hero_wrap .ts_colbtn {
	padding-left: 14px;
	border-right: none;
}

/* ---------------------------------------------------------------------
 * Labels
 * ------------------------------------------------------------------- */
.ts_hero_wrap label.ts_label,
.ts_hero_wrap label.ts_sblue,
.ts_hero_wrap label.ts_sgray,
.ts_hero_wrap label.ts_sblack {
	display: block;
	width: 100%;
	margin: 0 0 2px;
	padding: 0;
	font: 500 11px / 1.3 'Inter', 'Roboto', system-ui, sans-serif;
	color: #6B7B8D;
	letter-spacing: 0.2px;
	float: none;
	box-sizing: border-box;
}

.ts_hero_wrap .ts_nolabel {
	display: none;
}

/* ---------------------------------------------------------------------
 * Inputs & selects — Agoda-style: transparent bg, bottom border on focus
 * ------------------------------------------------------------------- */
.ts_hero_wrap input.ts_text,
.ts_hero_wrap input[type="text"].ts_text {
	margin: 0;
	padding: 8px 0;
	background: transparent;
	font: 500 14px / 1.4 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
	display: block;
	width: 100%;
	border: none;
	border-radius: 0;
	box-sizing: border-box;
	border-bottom: 2px solid transparent;
	transition: border-color 0.15s;
}

.ts_hero_wrap input.ts_text::placeholder,
.ts_hero_wrap input[type="text"].ts_text::placeholder {
	color: #A0ADBC;
	font-weight: 400;
}

.ts_hero_wrap input.ts_text:hover,
.ts_hero_wrap input[type="text"].ts_text:hover {
	border-bottom-color: var(--ts-fog);
}

.ts_hero_wrap input.ts_text:focus,
.ts_hero_wrap input[type="text"].ts_text:focus {
	border-bottom-color: var(--ts-blue);
	outline: none;
	box-shadow: none;
}

.ts_hero_wrap select.ts_select {
	margin: 0;
	padding: 8px 0;
	background: transparent;
	font: 500 14px / 1.4 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
	display: block;
	width: 100%;
	border: none;
	border-bottom: 2px solid transparent;
	border-radius: 0;
	height: auto;
	min-height: 34px;
	box-sizing: border-box;
	transition: border-color 0.15s;
	appearance: none;
	-webkit-appearance: none;
}

.ts_hero_wrap select.ts_select:hover {
	border-bottom-color: var(--ts-fog);
}

.ts_hero_wrap select.ts_select:focus {
	border-bottom-color: var(--ts-blue);
	outline: none;
	box-shadow: none;
}

/* ---------------------------------------------------------------------
 * Icon box
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_iconbox {
	background: transparent;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
}

.ts_hero_wrap .ts_iconboxi {
	flex: 0 0 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	color: #8A99AA;
}

.ts_hero_wrap .ts_iconboxi span.ts_sblue { color: var(--ts-blue); }
.ts_hero_wrap .ts_iconboxi span.ts_sgray { color: #5A6A7A; }
.ts_hero_wrap .ts_iconboxi span.ts_sblack { color: var(--ts-ink); }

/* ---------------------------------------------------------------------
 * Submit button — G-Blue CTA, rounded right side only
 * ------------------------------------------------------------------- */
.ts_hero_wrap button.ts_btn,
.ts_hero_wrap button[type="submit"].ts_btn {
	margin: 0;
	padding: 12px 32px;
	background: var(--ts-blue);
	font: 600 15px / 1.4 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-white);
	height: 100%;
	min-height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	border: none;
	border-radius: 0 var(--ts-radius) var(--ts-radius) 0;
	box-sizing: border-box;
	text-align: center;
	letter-spacing: 0.3px;
	text-transform: none;
	cursor: pointer;
	transition: background-color 0.18s, transform 0.12s, box-shadow 0.18s;
}

.ts_hero_wrap button.ts_btn:hover,
.ts_hero_wrap button[type="submit"].ts_btn:hover {
	background: var(--ts-blue-70);
	box-shadow: 0 4px 14px rgba(66, 133, 244, 0.35);
}

.ts_hero_wrap button.ts_btn:active,
.ts_hero_wrap button[type="submit"].ts_btn:active {
	transform: translateY(1px);
}

/* ---------------------------------------------------------------------
 * Guest summary row — inside the frosted card
 * Solid background so text stays readable against the hero image
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_guestsrow {
	margin: 8px 0 0 0;
	padding: 6px 12px;
	width: 100%;
	box-sizing: border-box;
	background: rgba(255, 255, 255, 0.95);
	border-radius: 4px;
}

/* ---------------------------------------------------------------------
 * Guest picker drop-down — inside the frosted card
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_morebox {
	margin: 0;
	padding: 12px 0 4px 0;
	display: none;
	width: 100%;
	box-sizing: border-box;
	background: transparent;
	border-top: 1px solid var(--ts-fog);
}

/* ---------------------------------------------------------------------
 * Guest picker accent links
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_guestsrow a,
.ts_hero_wrap .ts_guestsrow a:visited,
.ts_hero_wrap .ts_guestsrow a:hover {
	color: var(--ts-blue);
}

.ts_hero_wrap a.ts_pickaction_sblue,
.ts_hero_wrap a.ts_pickaction_sgray,
.ts_hero_wrap a.ts_pickaction_sblue:hover,
.ts_hero_wrap a.ts_pickaction_sgray:hover,
.ts_hero_wrap a.ts_pickaction_sblue:active,
.ts_hero_wrap a.ts_pickaction_sgray:active {
	color: var(--ts-blue);
}

.ts_hero_wrap a.ts_pickaction_sblue:hover,
.ts_hero_wrap a.ts_pickaction_sgray:hover {
	background-color: var(--ts-blue);
	color: var(--ts-white);
}

/* ---------------------------------------------------------------------
 * Date pickers
 * ------------------------------------------------------------------- */
.ts_hero_wrap .ts_dtwrap    { margin: 0; padding: 0; box-sizing: border-box; overflow: hidden; }
.ts_hero_wrap .ts_dttimewrap { margin: 0; padding: 0; box-sizing: border-box; width: 80px; float: left; }
.ts_hero_wrap .ts_dtdatewrap { margin: 0; padding: 0; box-sizing: border-box; width: auto; overflow: hidden; }

/* ---------------------------------------------------------------------
 * Tab description
 * ------------------------------------------------------------------- */
.ts_hero_wrap p.ts_tabdesc {
	margin: 0 0 10px;
	padding: 0;
	font: normal 13px / 1.4 'Inter', 'Roboto', system-ui, sans-serif;
	color: #5A6A7A;
}

/* ---------------------------------------------------------------------
 * Error note
 * ------------------------------------------------------------------- */
.ts_hero_wrap p.ts_taberror {
	margin: 10px 0;
	padding: 10px 14px;
	font: normal 13px / 1.5 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-red);
	background: #FDECEA;
	border-left: 3px solid var(--ts-red);
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.ts_hero_wrap {
		min-height: 320px;
		padding: 40px 12px 30px;
	}

	.ts_hero_wrap .ts_hero_tagline {
		font-size: 24px;
		margin-bottom: 16px;
	}

	.ts_hero_wrap ul.ts_tabs_sblue,
	.ts_hero_wrap ul.ts_tabs_sgray,
	.ts_hero_wrap ul.ts_tabs_sblack {
		flex-wrap: wrap;
	}

	.ts_hero_wrap ul.ts_tabs_sblue li,
	.ts_hero_wrap ul.ts_tabs_sgray li,
	.ts_hero_wrap ul.ts_tabs_sblack li,
	.ts_hero_wrap ul.ts_tabs_sblue li.ts_link_sblue,
	.ts_hero_wrap ul.ts_tabs_sgray li.ts_link_sgray,
	.ts_hero_wrap ul.ts_tabs_sblack li.ts_link_sblack {
		flex: 1 1 50%;
		padding: 10px 8px;
		font-size: 12px;
	}

	.ts_hero_wrap .ts_tabtitle {
		visibility: visible;
		display: inline;
	}

	.ts_hero_wrap .ts_columns {
		flex-wrap: wrap;
		padding: 0;
		gap: 0;
		border-radius: var(--ts-radius);
	}

	.ts_hero_wrap .ts_col50wbtn,
	.ts_hero_wrap .ts_col50,
	.ts_hero_wrap .ts_col35wbtn,
	.ts_hero_wrap .ts_col30wbtn {
		flex: 1 1 100%;
		margin: 0;
		padding: 12px 16px;
		border-right: none;
		border-bottom: 1px solid var(--ts-fog);
	}

	.ts_hero_wrap .ts_colbtn {
		flex: 1 1 100%;
		padding: 0;
		border-bottom: none;
	}

	.ts_hero_wrap .ts_guestsrow {
		padding: 0 16px;
	}

	.ts_hero_wrap .ts_morebox {
		padding: 12px 16px 4px 16px;
	}

	.ts_hero_wrap button.ts_btn,
	.ts_hero_wrap button[type="submit"].ts_btn {
		border-radius: 0 0 var(--ts-radius) var(--ts-radius);
		min-height: 48px;
	}

	.ts_hero_wrap .ts_btnmobtext {
		display: inline;
		visibility: visible;
	}
}

@media only screen and (max-width: 480px) {
	.ts_hero_wrap .ts_hero_tagline {
		font-size: 20px;
	}

	.ts_hero_wrap .ts_content_sblue,
	.ts_hero_wrap .ts_content_sgray,
	.ts_hero_wrap .ts_content_sblack {
		padding: 0;
	}

	.ts_hero_wrap ul.ts_tabs_sblue li,
	.ts_hero_wrap ul.ts_tabs_sgray li,
	.ts_hero_wrap ul.ts_tabs_sblack li {
		flex: 1 1 100%;
		text-align: center;
	}
}