/**
 * Tab Search — eholidayer.com
 * Agoda-style segmented search bar with Google-material palette.
 *
 * 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
 *
 * Structure:
 *   .ts_container — the card (single rounded border, soft shadow)
 *   .ts_tabs       — pill tab bar
 *   .ts_content    — tab body
 *   .ts_columns    — flex row of inputs
 *   .ts_iconbox    — icon + input
 *   .ts_btn        — submit button (G-Blue)
 *   .ts_morebox    — guest picker drop-down
 *   .ts_error      — inline error note
 *
 *   Never edit the PHP logic — only the CSS below.
 */

:root {
	--ts-blue:   #4285F4;
	--ts-red:    #EA4335;
	--ts-yellow: #FBBC05;
	--ts-green:  #34A853;
	--ts-blue-50:  #E8F0FE;
	--ts-blue-70: #1A73E8;
	--ts-ink:    #0F1B2D;
	--ts-fog:    #DCE3EB;
	--ts-mist:   #F5F7FA;
	--ts-white:  #FFFFFF;
	--ts-maxw-bar: 880px;
	--ts-radius: 8px;
	--ts-shadow: 0 8px 32px rgba(15, 27, 45, 0.12), 0 2px 8px rgba(15, 27, 45, 0.06);
}

/* ---------------------------------------------------------------------
 * Container — single rounded card with soft shadow (Agoda look)
 * ------------------------------------------------------------------- */
.ts_container_sgray,
.ts_container_sblue,
.ts_container_sblack {
	margin: 0 auto 24px;
	padding: 0;
	position: relative;
	max-width: var(--ts-maxw-bar);
}

/* ---------------------------------------------------------------------
 * Pill tab bar
 * Active tab = White with a Blue bottom border.
 * Idle tab    = transparent-white with hover to a white-30 surface.
 * Hover animation: the G-Blue underline slides in from the left.
 * ------------------------------------------------------------------- */
ul.ts_tabs_sgray,
ul.ts_tabs_sblue,
ul.ts_tabs_sblack {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	max-width: var(--ts-maxw-bar);
	margin: 0;
	padding: 0;
	list-style: none;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	border-radius: var(--ts-radius) var(--ts-radius) 0 0;
}

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

/* Sliding underline — a soft G-Background anchor that signals "this tab is alive." */
ul.ts_tabs_sgray li::after,
ul.ts_tabs_sblue li::after,
ul.ts_tabs_sblack li::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: var(--ts-blue);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.25s ease;
}

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

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

/* Active tab */
ul.ts_tabs_sgray li.ts_curlink_sgray,
ul.ts_tabs_sblue li.ts_curlink_sblue,
ul.ts_tabs_sblack li.ts_curlink_sblack {
	background: var(--ts-white);
	color: var(--ts-ink);
}

ul.ts_tabs_sgray li.ts_curlink_sgray::after,
ul.ts_tabs_sblue li.ts_curlink_sblue::after,
ul.ts_tabs_sblack li.ts_curlink_sblack::after {
	transform: scaleX(1);
}

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

ul.ts_tabs_sgray li.ts_curlink_sgray:hover::after,
ul.ts_tabs_sblue li.ts_curlink_sblue:hover::after,
ul.ts_tabs_sblack li.ts_curlink_sblack:hover::after {
	transform: scaleX(1);
}

/* ---------------------------------------------------------------------
 * Content panel — Agoda-style: single rounded card, joined segments
 * ------------------------------------------------------------------- */
.ts_content_sgray,
.ts_content_sblue,
.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_content_sgray > p,
.ts_content_sblue > p,
.ts_content_sblack > p {
	font: normal 14px / 1.5 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
}

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

/* ---------------------------------------------------------------------
 * Segmented search bar — the Agoda-style unified row
 * ------------------------------------------------------------------- */
.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: var(--ts-white);
	border: none;
	border-radius: 0 0 var(--ts-radius) var(--ts-radius);
	box-shadow: var(--ts-shadow);
}

/* Column flex sizing — destination wider, dates equal, guests, button */
.ts_col50wbtn { flex: 1 1 45%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_col50     { flex: 0 0 49.5%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_col35wbtn { flex: 1 1 32%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_col30wbtn { flex: 1 1 22%; margin: 0; padding: 0; box-sizing: border-box; }
.ts_colbtn    { flex: 0 0 auto; align-self: stretch; margin: 0; padding: 0; box-sizing: border-box; }

/* Vertical dividers between segments (Agoda's thin separators) */
.ts_col35wbtn,
.ts_col30wbtn,
.ts_col50wbtn {
	position: relative;
	padding: 0 14px;
	border-right: 1px solid var(--ts-fog);
}

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

/* ---------------------------------------------------------------------
 * Icon box — icon on the left, input fills the rest.
 * Vertically centered against the 20px-padded inputs.
 * ------------------------------------------------------------------- */
.ts_iconbox {
	display: flex;
	align-items: stretch;
	background: transparent;
	margin: 0;
	padding: 0;
}

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

.ts_iconboxv {
	flex: 1 1 auto;
	min-width: 0;
}

/* ---------------------------------------------------------------------
 * Labels — smaller, lighter, Agoda uses 12px muted labels
 * ------------------------------------------------------------------- */
label.ts_label,
label.ts_sgray,
label.ts_sblue,
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_nolabel {
	display: block;
	width: 100%;
	height: 15px;
	margin: 0 0 2px;
	padding: 0;
}

/* ---------------------------------------------------------------------
 * Inputs & selects — Agoda-style: no visible border, transparent bg,
 * subtle bottom border on focus, larger padding for comfort.
 * ------------------------------------------------------------------- */
input.ts_text,
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;
}

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

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

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

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;
}

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

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

/* ---------------------------------------------------------------------
 * Submit button — Agoda-style: solid CTA block, rounded right side only
 * ------------------------------------------------------------------- */
button.ts_btn,
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;
}

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

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

/* The PHP still emits these colour variants — keep them working. */
button.ts_sgray, button[type=submit].ts_sgray { background: #5A6A7A; color: var(--ts-white); }
button.ts_sblue, button[type=submit].ts_sblue { background: var(--ts-blue); color: var(--ts-white); }
button.ts_sblack, button[type=submit].ts_sblack { background: var(--ts-ink); color: var(--ts-white); }
button.ts_sred, button[type=submit].ts_sred { background: var(--ts-red); color: var(--ts-white); }
button.ts_sorange, button[type=submit].ts_sorange { background: #FB8C00; color: var(--ts-white); }
button.ts_sgreen, button[type=submit].ts_sgreen { background: var(--ts-green); color: var(--ts-white); }

button.ts_sgray:hover, button[type=submit].ts_sgray:hover,
button.ts_sblue:hover, button[type=submit].ts_sblue:hover,
button.ts_sblack:hover, button[type=submit].ts_sblack:hover,
button.ts_sred:hover, button[type=submit].ts_sred:hover,
button.ts_sorange:hover, button[type=submit].ts_sorange:hover,
button.ts_sgreen:hover, button[type=submit].ts_sgreen:hover {
	background: var(--ts-ink);
}

.ts_btnmobtext {
	display: none;
	visibility: hidden;
}

/* ---------------------------------------------------------------------
 * Guest summary row — sits inside .ts_columns above the picker
 * ------------------------------------------------------------------- */
.ts_guestsrow {
	margin: 8px 0 0 0;
	padding: 0;
	width: 100%;
	box-sizing: border-box;
	font: normal 13px / 1.5 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
}

.ts_guestsrow a,
.ts_guestsrow a:visited,
.ts_guestsrow a:hover,
.ts_guestsrow a:active {
	text-decoration: none;
	color: var(--ts-blue);
	border: none;
	outline: none;
}

.ts_guestsrow a:hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------
 * Guest picker drop-down — clean flexbox card layout
 * ------------------------------------------------------------------- */
.ts_morebox {
	margin: 12px 0 0 0;
	padding: 16px;
	display: none;
	width: 100%;
	box-sizing: border-box;
	background: var(--ts-mist);
	border: 1px solid var(--ts-fog);
	border-radius: 6px;
}

/* Column header row — mirrors .ts_pickrow flex structure.
 * Room-label column + two 96px counter columns + flex spacer.
 * Padding matches .ts_pickrow so labels sit directly above counters.
 * ------------------------------------------------------------------- */
.ts_pickrowguests_sgray,
.ts_pickrowguests_sblue {
	display: flex;
	align-items: center;
	margin: 0 0 8px;
	padding: 10px 12px;
	gap: 12px;
}

.ts_pickrowguests_sgray::after,
.ts_pickrowguests_sblue::after {
	content: '';
	flex: 1 1 auto;
}

/* Room label column — same flex basis as .ts_pickboxroom so the
 * two counter columns land in the same horizontal position as
 * the .ts_pickboxguests columns below.
 */
.ts_pickrowguests_sgray::before,
.ts_pickrowguests_sblue::before {
	content: '';
	flex: 0 0 auto;
	min-width: 72px;
}

.ts_pickhead_sgray,
.ts_pickhead_sblue {
	width: 96px;
	flex: 0 0 96px;
	margin: 0;
	padding: 0;
	font: 600 11px / 1 'Inter', 'Roboto', system-ui, sans-serif;
	color: #6B7B8D;
	text-align: center;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

/* Each room row */
.ts_pickrow {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 10px;
	padding: 10px 12px;
	background: var(--ts-white);
	border: 1px solid var(--ts-fog);
	border-radius: 6px;
	font: 600 13px / 1 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
}

.ts_pickrow:last-of-type {
	margin-bottom: 0;
}

/* Room number badge + add/remove */
.ts_pickboxroom {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 72px;
}

.ts_pickroomnum_sgray,
.ts_pickroomnum_sblue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: var(--ts-blue);
	color: var(--ts-white);
	font: 700 13px / 1 'Inter', 'Roboto', system-ui, sans-serif;
}

a.ts_pickroomact_sgray,
a.ts_pickroomact_sgray:visited,
a.ts_pickroomact_sgray:hover,
a.ts_pickroomact_sgray:link,
a.ts_pickroomact_sgray:active {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	text-decoration: none;
	background-color: #5A6A7A;
	color: var(--ts-white);
	font: 700 14px / 1 'Inter', 'Roboto', system-ui, sans-serif;
	border: none;
	outline: none;
	transition: background-color 0.15s;
}

a.ts_pickroomact_sgray:hover {
	background-color: var(--ts-blue);
}

/* Guest counter columns (Adults / Children) */
.ts_pickboxguests {
	flex: 0 0 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

/* Stepper +/- buttons */
a.ts_pickaction_sgray,
a.ts_pickaction_sgray:active,
a.ts_pickaction_sgray:hover,
a.ts_pickaction_sgray:visited,
a.ts_pickaction_sgray:link,
a.ts_pickaction_sblue,
a.ts_pickaction_sblue:active,
a.ts_pickaction_sblue:hover,
a.ts_pickaction_sblue:visited,
a.ts_pickaction_sblue:link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	text-decoration: none;
	background: var(--ts-white);
	color: var(--ts-blue);
	font: 600 14px / 1 'Inter', 'Roboto', system-ui, sans-serif;
	border: 1.5px solid var(--ts-blue);
	outline: none;
	box-sizing: border-box;
	transition: background-color 0.15s, color 0.15s;
}

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

/* Guest count readout */
input.ts_inguests_sgray,
input[type="text"].ts_inguests_sgray,
input[type="text"].ts_inguests_sgray:hover,
input.ts_inguests_sblue,
input[type="text"].ts_inguests_sblue,
input[type="text"].ts_inguests_sblue:hover {
	display: inline-block;
	width: 28px;
	height: 28px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font: 600 14px / 1 'Inter', 'Roboto', system-ui, sans-serif;
	color: var(--ts-ink);
	background: none;
	border: none;
	text-align: center;
}

/* ---------------------------------------------------------------------
 * Error / description notes
 * ------------------------------------------------------------------- */
p.ts_tabdesc {
	margin: 0 0 12px;
	padding: 0;
	font: normal 13px / 1.5 'Inter', 'Roboto', system-ui, sans-serif;
	color: #5A6A7A;
}

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);
}

/* ---------------------------------------------------------------------
 * Utility
 * ------------------------------------------------------------------- */
.ts_invisible  { margin: 0; padding: 0; visibility: hidden; display: none; }
.ts_invisible2 { visibility: hidden; display: none; }
.ts_vsspace    { margin: 7px 0; }
.ts_clear      { clear: both; }

/* ---------------------------------------------------------------------
 * Responsive — Agoda-style stacked mobile layout
 * ------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
	.ts_tabtitle {
		visibility: hidden;
		display: none;
	}

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

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

	.ts_colbtn {
		margin: 0;
		padding: 0;
		flex: none;
		width: 100%;
		border-bottom: none;
	}

	.ts_guestsrow {
		padding: 0 16px;
	}

	.ts_morebox {
		padding: 12px;
	}

	.ts_pickrow {
		flex-wrap: wrap;
		gap: 8px;
	}

	.ts_pickboxroom {
		min-width: auto;
	}

	.ts_pickboxguests {
		flex: 1 1 auto;
		min-width: 80px;
	}

	.ts_pickhead_sgray,
	.ts_pickhead_sblue {
		display: none;
	}

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

	.ts_btnmobtext {
		display: inline;
		visibility: visible;
		padding-left: 10px;
	}

	.ts_nolabel {
		display: none;
		visibility: hidden;
	}

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

	ul.ts_tabs_sgray li,
	ul.ts_tabs_sblue li,
	ul.ts_tabs_sblack li {
		flex: 1 1 50%;
	}
}