/**
 * Akar — Day Prices in Datepicker
 *
 * Turns each day cell into a two-line stack: the date on top, the nightly
 * rate underneath. Sizing is applied to every cell, not just priced ones, so
 * the grid keeps a stable height while prices are still loading.
 */

.vbo-horizsearch-dpicker-cont .ui-datepicker-calendar td,
#ui-datepicker-div .ui-datepicker-calendar td {
	padding: 1px;
}

/* Vik Booking styles a day cell as a fixed 40x40 circle with
   `line-height: 40px !important`. That line-height is inherited by the price
   and blows the cell up to ~64px, which then spills into the row below, so it
   has to be beaten explicitly rather than merely re-declared. */
.vbo-horizsearch-dpicker-cont .ui-datepicker-calendar td > a,
.vbo-horizsearch-dpicker-cont .ui-datepicker-calendar td > span,
#ui-datepicker-div .ui-datepicker-calendar td > a,
#ui-datepicker-div .ui-datepicker-calendar td > span {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0;

	width: 40px;
	height: auto !important;
	min-height: 44px;
	padding: 3px 1px !important;

	line-height: 1.15 !important;
	border-radius: 14px !important; /* a two-line cell can't stay a circle */
	text-align: center !important;
}

/* Restated for the picked, hovered and range-end days. Themes tend to give
   those states a `border-radius: 50% !important` of their own, which is a
   circle on a square cell but a flattened ellipse on the 47x38 cell a price
   turns it into. The extra `.ui-datepicker` in the chain carries enough weight
   to win outright rather than by load order, so this holds even where the
   plugin is dropped onto a site whose stylesheet loads after it. */
.vbo-horizsearch-dpicker-cont .ui-datepicker .ui-datepicker-calendar td > a,
.vbo-horizsearch-dpicker-cont .ui-datepicker .ui-datepicker-calendar td > a:hover,
.vbo-horizsearch-dpicker-cont .ui-datepicker .ui-datepicker-calendar td > span,
.vbo-horizsearch-dpicker-cont .ui-datepicker .ui-datepicker-calendar td > span:hover,
#ui-datepicker-div .ui-datepicker-calendar td > a,
#ui-datepicker-div .ui-datepicker-calendar td > a:hover,
#ui-datepicker-div .ui-datepicker-calendar td > span,
#ui-datepicker-div .ui-datepicker-calendar td > span:hover {
	border-radius: 14px !important;
}

/* The price itself. The explicit line-height stops the inherited 40px from
   coming back through this element. */
.akar-dp-price {
	display: block;
	font-size: 10px !important;
	line-height: 1.05 !important;
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	opacity: 0.9;
}

/* Cheap / mid / expensive, relative to this property's own range. Colour is
   never the only signal — the number is always there too. */
.akar-dp-price.akar-dp-low {
	color: #1a7f37;
}

.akar-dp-price.akar-dp-mid {
	color: #6b7280;
}

.akar-dp-price.akar-dp-high {
	color: #b42318;
}

/* Keep the price readable once a day is selected or hovered, where the cell
   background flips to the accent colour. */
.ui-datepicker-calendar td.ui-datepicker-current-day .akar-dp-price,
.ui-datepicker-calendar td .ui-state-active .akar-dp-price,
.ui-datepicker-calendar td .ui-state-hover .akar-dp-price {
	color: inherit;
	opacity: 0.75;
}

/* "Clear dates" and "Close" for the inline calendar, laid out like the pair
   Vik puts under its pop-up: the clear as a plain link on the left, the close
   as the accent button on the right. The button keeps Vik's own `btn
   vbo-pref-color-btn` classes so it inherits the site's button styling rather
   than carrying a second definition of it. */
.akar-dp-commands {
	/* The month blocks are floated, so this has to clear them or it would sit
	   alongside the last month. */
	clear: both;

	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;

	margin: 6px 12px 0;
	padding: 8px 2px 0;
}

.akar-dp-command-clear {
	font-size: 14px;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

.akar-dp-command-clear:hover {
	opacity: 0.7;
}

/* The site's button padding is sized for a page-level call to action; on a
   command inside the panel it came out at 103x49, heavier than the calendar it
   belongs to. */
.akar-dp-commands .akar-dp-command-close {
	padding: 9px 22px !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
}

/* "From" price in the calendar footer, the way flight search shows one.
   Sits below the grid as its own row so nothing about the existing calendar
   layout shifts. */
.akar-dp-footer {
	/* The two month blocks are floated, so the footer must clear them or it
	   would sit alongside the last month instead of beneath both. */
	clear: both;

	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 1px;

	margin: 2px 12px 4px;
	padding: 8px 2px 2px;

	border-top: 1px solid rgba(0, 0, 0, 0.08);
	text-align: right;
	line-height: 1.2;
}

.akar-dp-from {
	font-size: 14px;
	font-weight: 600;
	color: #1a7f37; /* same green the cheapest days use */
}

.akar-dp-from-note {
	font-size: 11px;
	opacity: 0.6;
}

/* A stay total is a statement of cost, not a bargain, so it drops the green. */
.akar-dp-footer.akar-dp-is-total .akar-dp-from {
	color: inherit;
	font-size: 15px;
}

/* Sold out nights read as unavailable rather than simply priceless. */
.ui-datepicker-calendar td.akar-dp-soldout > a,
.ui-datepicker-calendar td.akar-dp-soldout > span {
	opacity: 0.35;
	text-decoration: line-through;
	text-decoration-thickness: 1px;
}

/* Phones: the day grid is a fixed 7 x 40px = 294px wide, which is wider than
   the popup it sits in (290px, of which 40px is padding). The last column
   ended up on the panel's edge with its price hanging over it. Below the
   search bar's own breakpoint the grid becomes fluid instead: seven equal
   columns of whatever the panel can spare, so nothing spills.

   The panel's own padding shrinks too — 20px on a 290px popup is a seventh of
   the width spent on nothing. */
@media (max-width: 767px) {
	.vbo-horizsearch-dpicker-cont .ui-datepicker,
	#ui-datepicker-div .ui-datepicker {
		padding: 12px !important;
	}

	.vbo-horizsearch-dpicker-cont .ui-datepicker-calendar,
	#ui-datepicker-div .ui-datepicker-calendar {
		width: 100% !important;
		margin-right: 0 !important;
		table-layout: fixed;
	}

	.vbo-horizsearch-dpicker-cont .ui-datepicker-calendar td > a,
	.vbo-horizsearch-dpicker-cont .ui-datepicker-calendar td > span,
	#ui-datepicker-div .ui-datepicker-calendar td > a,
	#ui-datepicker-div .ui-datepicker-calendar td > span {
		width: 100%;
		min-height: 38px;
		padding: 4px 0 !important;
	}

	/* Anchored under the check-in field the panel began 509px down the screen
	   and ran 46px past the bottom edge, with half of it lying over the
	   section beneath the search bar. There is no room below the field to grow
	   into, and an absolutely positioned panel cannot flip itself upwards, so
	   on phones it stops being anchored: it becomes a centred sheet, the way a
	   date picker behaves in a native app. Being free of the 290px bar also
	   gives the seven columns the width they were short of. */
	.vbo-horizsearch-dpicker-cont {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%);

		width: min(370px, calc(100vw - 24px)) !important;
		max-height: 88vh;
		max-height: 88svh;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;

		border-radius: 18px;

		/* The second shadow is the scrim: a spread wide enough to reach every
		   edge of any phone, so the sheet reads as a layer over a dimmed page
		   rather than a card floating loose over the hero image. It costs no
		   extra element and no extra script. */
		box-shadow:
			0 24px 60px rgba(0, 0, 0, 0.32),
			0 0 0 100vmax rgba(0, 0, 0, 0.45);
	}

	.vbo-horizsearch-dpicker-cont .ui-datepicker {
		width: 100% !important;
	}

	/* The search form on the results page uses jQuery UI's shared popup rather
	   than the module's inline panel, and it ran off the bottom of a phone the
	   same way — jQuery UI only keeps its popup inside the viewport
	   horizontally. Same sheet treatment, so both calendars on the site behave
	   alike. The inline top/left jQuery UI writes on it is what the
	   !important flags are for.

	   `html` in front of the id is for a second argument, with Vik Booking
	   itself: its stylesheet is enqueued after this one and carries

	       @media (max-width: 550px) { #ui-datepicker-div { transform: translate(-50%) } }
	       @media (max-width: 620px) { #ui-datepicker-div { width: 90% !important } }

	   Same id, later in the cascade, so it won — and dropping the vertical half
	   of the translate left the panel hanging from the middle of the screen
	   downwards. On a phone that put the Clear/Close row below the fold, behind
	   the browser's own toolbar, where it could not be tapped at all. One
	   element deeper is enough to settle both.

	   The height is measured in `svh` where that is supported: `vh` on iOS is
	   the tall viewport, the one you only get once the toolbars have slid away,
	   so a sheet sized in `vh` is taller than what the visitor can actually
	   see. */
	html #ui-datepicker-div {
		position: fixed !important;
		top: 50% !important;
		left: 50% !important;
		right: auto !important;
		bottom: auto !important;
		transform: translate(-50%, -50%) !important;

		width: min(370px, calc(100vw - 24px)) !important;
		max-height: 88vh;
		max-height: 88svh;
		overflow-y: auto;
		overscroll-behavior: contain;

		border-radius: 18px;
		box-shadow:
			0 24px 60px rgba(0, 0, 0, 0.32),
			0 0 0 100vmax rgba(0, 0, 0, 0.45);
	}
}

@media (max-width: 480px) {
	.akar-dp-price {
		font-size: 9px;
	}
}

/* Respect users who have asked for less motion or higher contrast. */
@media (prefers-contrast: more) {
	.akar-dp-price {
		opacity: 1;
	}

	.akar-dp-price.akar-dp-mid {
		color: #374151;
	}
}

/* ---------- prices in the availability calendar ---------- */

/* The room page grid is a plain table of day numbers; the rate goes under the
   number as a second line, the same relationship the datepicker uses. */
.vbo-availcalendars-cont td[data-ymd] {
	vertical-align: middle;
}

.akar-dp-cal-price {
	display: block;
	margin-top: 1px;
	font-size: 10px;
	font-weight: 600;
	line-height: 1.1;
	white-space: nowrap;
	color: #1a7f37;
}