/**
 * Plugin styles. Hotel Datepicker brings its own complete stylesheet —
 * this file is for the surrounding form (occupancy field, submit
 * button, error message) and minor overrides on the picker.
 *
 * Selectors are namespaced under .rgvr-guesty.
 */

.rgvr-guesty {
	font-family: inherit;
	margin: 1.5rem 0;
}

.rgvr-guesty__form {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	max-width: 720px;
}

.rgvr-guesty__picker {
	position: relative;
}

/* Loading hint while the availability request is in flight. Sits to
   the right of the input. Hidden as soon as Hotel Datepicker mounts
   (JS removes data-rgvr-loading). */
.rgvr-guesty[data-rgvr-loading] .rgvr-guesty__picker::after {
	content: attr(data-rgvr-loading-text);
	position: absolute;
	right: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: #6b7771;
	font-size: 0.75rem;
	font-style: italic;
	pointer-events: none;
}

.rgvr-guesty__range {
	width: 100%;
	padding: 0.625rem 0.75rem 0.625rem 2.5rem;
	border: 1px solid #ccc;
	border-radius: 1000px;
	font-size: 1rem;
	background-color: #fff;
	background-image: url('/wp-content/uploads/2021/07/Icon-Season-Availability.svg');
	background-repeat: no-repeat;
	background-position: 0.75rem center;
	background-size: 18px 18px;
	cursor: pointer;
	box-sizing: border-box;
}

.rgvr-guesty__row {
	display: flex;
	gap: 0.75rem;
	align-items: end;
	flex-wrap: wrap;
}

.rgvr-guesty__field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-size: 0.875rem;
	flex: 1 1 140px;
}

.rgvr-guesty__field input {
	padding: 0.5rem 0.75rem;
	border: 1px solid #ccc;
	border-radius: 1000px;
	font-size: 1rem;
	width: 100%;
	box-sizing: border-box;
}

/* Guest icon in the occupancy input. Native +/- spinner is left alone
   so users can click to increment without typing. */
.rgvr-guesty [data-rgvr-occupancy] {
	padding-left: 2.5rem;
	background-color: #fff;
	background-image: url('/wp-content/uploads/2021/07/Icon-Guest-Limit.svg');
	background-repeat: no-repeat;
	background-position: 0.75rem center;
	background-size: 18px 18px;
}

.rgvr-guesty__submit {
	flex: 1 1 200px;
	min-width: 200px;
	padding: 15px 35px;
	border: 0;
	border-radius: 1000px;
	background: #eb541d;
	color: #fff;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s ease-in-out;
}

.rgvr-guesty__submit:hover:not(:disabled),
.rgvr-guesty__submit:focus:not(:disabled) {
	background: #c8430f;
}

.rgvr-guesty__submit:disabled {
	background: #f07d54;
	cursor: not-allowed;
}

.rgvr-guesty__error {
	color: #b3261e;
	font-size: 0.875rem;
	margin: 0;
}

/* Hotel Datepicker overrides — keep the inline calendar visually
   anchored to the input instead of overlapping page content. */
.rgvr-guesty .datepicker--inline {
	position: static;
	margin-top: 0.5rem;
}

/* Popup mode — center the calendar horizontally over the input so the
   two-month layout doesn't overflow the right edge of narrow cards.
   z-index pushed high enough to clear sticky headers, sidebars, and
   anything else that might layer on top. */
.rgvr-guesty .datepicker:not(.datepicker--inline) {
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	max-width: calc(100vw - 1rem);
	z-index: 99999;
}

/* Backdrop overlay shown while the picker is open. JS toggles
   data-rgvr-open on the root when Hotel Datepicker shows/hides.
   pointer-events: none so HD's own outside-click-to-close still
   reaches the document. */
.rgvr-guesty[data-rgvr-open]::before {
	content: '';
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 99998;
	pointer-events: none;
	animation: rgvr-fade-in 0.18s ease-out;
}

@keyframes rgvr-fade-in {
	from { background: rgba(0, 0, 0, 0); }
	to   { background: rgba(0, 0, 0, 0.45); }
}

/* Brand color for selected range. Scoped under .rgvr-guesty so it
   doesn't bleed onto any other Hotel Datepicker instance on the site. */
.rgvr-guesty .datepicker__month-day--selected {
	background-color: rgba(235, 84, 29, 0.2);
	color: #fff;
}

.rgvr-guesty .datepicker__month-day--first-day-selected,
.rgvr-guesty .datepicker__month-day--last-day-selected {
	background-color: #eb541d;
	color: #fff;
}

/* Hover preview — slightly lighter than the committed selection so the
   user can tell hint apart from confirmed range. */
.rgvr-guesty .datepicker__month-day--hovering {
	background-color: rgba(235, 84, 29, 0.1);
}

/* Datepicker action buttons in brand orange with pill shape. */
.rgvr-guesty .datepicker__close-button,
.rgvr-guesty .datepicker__clear-button,
.rgvr-guesty .datepicker__submit-button {
	background-color: #eb541d;
	color: #fff;
	border-color: #eb541d;
	border-radius: 1000px;
}

/* Shared button typography — applies to the main form submit and the
   datepicker action buttons (close, clear, submit). Roboto needs to be
   loaded site-wide (Oxygen typically already has it; otherwise add
   <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap" rel="stylesheet">). */
.rgvr-guesty__submit,
.rgvr-guesty .datepicker__close-button,
.rgvr-guesty .datepicker__clear-button,
.rgvr-guesty .datepicker__submit-button {
	font-family: Roboto, sans-serif;
	font-size: clamp(12px, 2vw, 14px);
	color: #ffffff;
	font-weight: 900;
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Smaller, tighter clear + close buttons — override the shared
   button typography so they read as secondary actions. */
.rgvr-guesty .datepicker__clear-button,
.rgvr-guesty .datepicker__close-button {
	font-size: 11px;
	letter-spacing: 0.5px;
}

.rgvr-guesty .datepicker__close-button:hover:not(:disabled),
.rgvr-guesty .datepicker__clear-button:hover:not(:disabled),
.rgvr-guesty .datepicker__submit-button:hover:not(:disabled),
.rgvr-guesty .datepicker__close-button:focus:not(:disabled),
.rgvr-guesty .datepicker__clear-button:focus:not(:disabled),
.rgvr-guesty .datepicker__submit-button:focus:not(:disabled) {
	background-color: #c8430f;
	border-color: #c8430f;
}