/* ==========================================================================
   The Capital — Booking Bar
   Sits at the bottom of the hero, halfway off.
   ========================================================================== */

/* ------------------------------------------------------------------
   0. Wrapper — pulls the bar up over the hero
   ------------------------------------------------------------------ */
.tc-booking-bar-wrap {
	position: relative;
	z-index: 5;
	padding: 0 !important;
	background: transparent !important;
	overflow: visible !important;
	transform: translateY(-100%);
	margin-bottom: -86px; /* collapse the layout space left by translateY(-100%) */
}

.tc-booking-bar-placeholder + section {
	margin-top: 0;
}

.tc-booking-bar-wrap > .elementor-container {
	transition: max-width 0.3s ease;
}

/* Remove any Elementor widget margin */
.tc-booking-bar-widget {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   1. The booking bar itself
   ------------------------------------------------------------------ */
.tc-booking-bar {
	display: flex;
	align-items: stretch;
	width: 100%;
	height: 86px;
	background: #fff;
	box-shadow: 0 11px 16px rgba(118, 129, 149, 0.102);
	margin: 0;
	padding: 0;
	border: none;
	transition: height 0.3s ease, box-shadow 0.3s ease;
}

/* ------------------------------------------------------------------
   Fixed state — full-width, compact bar pinned to viewport bottom
   ------------------------------------------------------------------ */
.tc-booking-bar-wrap.is-fixed {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	z-index: 999 !important;
}

.tc-booking-bar-wrap.is-fixed > .elementor-container {
	max-width: 100%;
}

.is-fixed .tc-booking-bar {
	height: 64px;
	box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.1);
}

.is-fixed .tc-booking-field {
	padding: 10px 20px;
}

.is-fixed .tc-booking-field.tc-booking-field-submit {
	padding: 8px;
}

.tc-booking-bar-wrap.is-fixed.is-hidden {
	transform: translateY(100%);
	transition: transform 0.35s ease;
}

.tc-booking-bar-wrap.is-fixed:not(.is-hidden) {
	transform: translateY(0);
	transition: transform 0.35s ease;
}

/* ------------------------------------------------------------------
   2. Individual fields
   ------------------------------------------------------------------ */
.tc-booking-field {
	flex: 1;
	padding: 14px 24px;
	border-right: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.tc-booking-field.tc-booking-field--promo {
	border-right: none;
}

.tc-booking-field.tc-booking-field-submit {
	flex: 0 0 auto;
	border-right: none;
	padding: 12px;
}

.tc-booking-field-submit .tc-booking-submit {
	width: 100%;
	height: 100%;
}

/* ---- Labels ---- */
.tc-booking-field label {
	font-family: 'DM Sans', var(--tc-font-body), sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: rgba(0, 0, 0, 0.69);
	margin-bottom: 5px;
	display: block;
	cursor: default;
}

/* ---- Input row (icon + input side by side) ---- */
.tc-booking-field-input {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 24px;
}

.tc-booking-field-input svg {
	opacity: 1;
	flex-shrink: 0;
}

.tc-booking-field input,
.tc-booking-field select {
	background: transparent;
	border: none !important;
	outline: none;
	color: #000;
	font-family: 'DM Sans', var(--tc-font-body), sans-serif;
	font-size: 15px;
	font-weight: 400;
	width: 100%;
	cursor: pointer;
	padding: 0 !important;
	margin: 0;
	height: 24px;
	line-height: 24px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

.tc-booking-field select {
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
	padding-right: 18px;
	padding: 0 5px !important;
}

.tc-booking-field select option {
	background: #fff;
	color: #111;
}

.tc-booking-field input::placeholder {
	color: #000;
	opacity: 1;
}

/* Style the native calendar icon (fallback if Flatpickr doesn't load) */
.tc-booking-field input[type="date"]::-webkit-calendar-picker-indicator {
	opacity: 0.4;
	cursor: pointer;
	filter: none;
}

/* ---- Flatpickr alt-input styling ---- */
.tc-booking-field .tc-dates-input {
	cursor: pointer;
}

.tc-booking-field .tc-dates-input::placeholder {
	color: #000;
	opacity: 1;
}

/* ------------------------------------------------------------------
   3. Submit button
   ------------------------------------------------------------------ */
[type=submit].tc-booking-submit {
	background: #000;
	border: none;
	border-radius: 0;
	padding: 0 48px;
	font-family: 'DM Sans', var(--tc-font-body), sans-serif;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	align-self: stretch;
	transition: background 0.2s ease, color 0.2s ease;
	height: 100%;
}

[type=submit].tc-booking-submit:hover,
[type=submit].tc-booking-submit:focus {
	background: var(--tc-gold, #EBA318) !important;
	color: #fff;
}

/* ------------------------------------------------------------------
   4. Responsive
   ------------------------------------------------------------------ */

/* Tablet */
@media (max-width: 1024px) {
	body:not(.home) .tc-booking-bar-placeholder {
		display: block !important;
	}

	body:not(.home) .tc-booking-bar-wrap {
		transform: none;
	}

	.tc-booking-bar-wrap > .elementor-container {
		max-width: 95%;
	}

	.tc-booking-bar {
		height: auto;
		flex-wrap: wrap;
	}

	.tc-booking-field {
		flex: 1 1 calc(50% - 1px);
		min-width: 0;
		padding: 12px 20px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	}

	/* Remove right border on every second field */
	.tc-booking-field:nth-child(2n) {
		border-right: none;
	}

	.tc-booking-submit {
		width: 100%;
		padding: 16px 48px;
	}
}

/* Mobile */
@media (max-width: 767px) {
	body:not(.home) .tc-booking-bar-placeholder {
		display: none !important;
	}

	.tc-booking-bar-wrap {
		margin-top: -30px !important;
		padding: 0 15px !important;
		display: none !important;
	}

	.tc-booking-bar {
		flex-direction: column;
		height: auto;
		box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
	}

	.tc-booking-field {
		flex: 1 1 100%;
		border-right: none;
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		padding: 14px 20px;
	}

	.tc-booking-submit {
		width: 100%;
		padding: 18px 20px;
		font-size: 13px;
	}

	[type=submit].tc-booking-submit {
		height: 38px;
	}
}

/* ------------------------------------------------------------------
   5. Flatpickr Calendar — themed to match The Capital
   ------------------------------------------------------------------ */

/* Container */
.flatpickr-calendar {
	background: #111 !important;
	border: 1px solid rgba(255, 255, 255, 0.12) !important;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
	border-radius: 8px !important;
	font-family: 'DM Sans', var(--tc-font-body), sans-serif !important;
	overflow: hidden;
}

.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after {
	border-bottom-color: #111 !important;
}

/* Months header */
.flatpickr-months {
	padding: 8px 4px 4px;
}

.flatpickr-months .flatpickr-month {
	color: #fff !important;
	fill: #fff !important;
	height: 36px !important;
}

.flatpickr-current-month {
	font-size: 14px !important;
	font-weight: 600 !important;
	color: #fff !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	color: #fff !important;
	font-weight: 600 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
	background: transparent !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
	background: #111;
	color: #fff;
}

/* Nav arrows */
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
	fill: #fff !important;
	color: #fff !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
	color: var(--tc-gold, #EBA318) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--tc-gold, #EBA318) !important;
}

/* Weekday headers */
.flatpickr-weekdays {
	background: transparent !important;
}

span.flatpickr-weekday {
	background: transparent !important;
	color: rgba(255, 255, 255, 0.45) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* Day cells */
.flatpickr-days {
	border: none !important;
}

.flatpickr-day {
	color: #fff !important;
	border-radius: 4px !important;
	border: none !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	max-width: 36px !important;
	height: 36px !important;
	line-height: 36px !important;
}

.flatpickr-day:hover {
	background: rgba(235, 163, 24, 0.2) !important;
	border: none !important;
}

/* Disabled / other month */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
	color: rgba(255, 255, 255, 0.2) !important;
}

/* Today */
.flatpickr-day.today {
	border: 1px solid var(--tc-gold, #EBA318) !important;
}

.flatpickr-day.today:hover {
	background: rgba(235, 163, 24, 0.2) !important;
}

/* Selected start & end */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
	background: var(--tc-gold, #EBA318) !important;
	border-color: var(--tc-gold, #EBA318) !important;
	color: #000 !important;
	font-weight: 600 !important;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
	background: #d4920e !important;
	border-color: #d4920e !important;
	color: #000 !important;
}

/* In-range days (between start and end) */
.flatpickr-day.inRange {
	background: rgba(235, 163, 24, 0.15) !important;
	border: none !important;
	box-shadow: -5px 0 0 rgba(235, 163, 24, 0.15), 5px 0 0 rgba(235, 163, 24, 0.15) !important;
	color: #fff !important;
}

/* Range endpoints: rounded left/right edges */
.flatpickr-day.startRange {
	border-radius: 4px 0 0 4px !important;
}

.flatpickr-day.endRange {
	border-radius: 0 4px 4px 0 !important;
}

.flatpickr-day.startRange.endRange {
	border-radius: 4px !important;
}

/* Num input (year) arrows */
.flatpickr-current-month .numInputWrapper span {
	border: none !important;
}

.flatpickr-current-month .numInputWrapper span::after {
	border-top-color: #fff !important;
	border-bottom-color: #fff !important;
}

/* Two-month side-by-side spacing */
.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
	border-top-color: rgba(255, 255, 255, 0.12) !important;
}

.flatpickr-innerContainer {
	border-bottom: none !important;
}

.flatpickr-rContainer {
	border: none !important;
}

/* Show 2 months on wider screens, 1 on narrow */
@media (max-width: 580px) {
	.flatpickr-calendar {
		width: auto !important;
	}
}