/**
 * RV Rental Booking — front-end styles.
 *
 * Deliberately low-specificity so a theme can override without fighting.
 */

:root {
	--rvrb-radius: 8px;
	--rvrb-border: #dcdcde;
	--rvrb-muted: #646970;
	--rvrb-accent: #2271b1;
	--rvrb-accent-dark: #135e96;
	--rvrb-surface: #fff;
	--rvrb-surface-alt: #f6f7f7;
	--rvrb-text: #1d2327;
	--rvrb-danger: #b32d2e;
	--rvrb-success: #007017;
}

/* ---------- Search form ---------- */

.rvrb-search-form {
	background: var(--rvrb-surface-alt);
	border: 1px solid var(--rvrb-border);
	border-radius: var(--rvrb-radius);
	padding: 1.25rem;
	margin: 0 0 2rem;
}

.rvrb-search-form--inline {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: flex-end;
}

.rvrb-search-form__heading {
	flex: 1 0 100%;
	margin: 0 0 .5rem;
}

.rvrb-field {
	display: flex;
	flex-direction: column;
	flex: 1 1 160px;
	min-width: 0;
}

.rvrb-field label {
	font-size: .8125rem;
	font-weight: 600;
	margin-bottom: .35rem;
	color: var(--rvrb-muted);
}

.rvrb-field input[type="text"],
.rvrb-field select {
	width: 100%;
	padding: .55rem .7rem;
	border: 1px solid var(--rvrb-border);
	border-radius: calc(var(--rvrb-radius) / 2);
	background: var(--rvrb-surface);
	color: var(--rvrb-text);
	font-size: 1rem;
	line-height: 1.4;
}

.rvrb-field--submit {
	flex: 0 0 auto;
}

.rvrb-button {
	display: inline-block;
	padding: .6rem 1.4rem;
	border: 0;
	border-radius: calc(var(--rvrb-radius) / 2);
	background: var(--rvrb-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	line-height: 1.5;
}

.rvrb-button:hover,
.rvrb-button:focus {
	background: var(--rvrb-accent-dark);
	color: #fff;
}

/* ---------- Results ---------- */

.rvrb-results__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.rvrb-results__count {
	margin: 0;
	font-weight: 600;
}

.rvrb-no-results {
	background: var(--rvrb-surface-alt);
	border: 1px dashed var(--rvrb-border);
	border-radius: var(--rvrb-radius);
	padding: 2rem;
	text-align: center;
	color: var(--rvrb-muted);
}

.rvrb-grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.rvrb-grid--1 { grid-template-columns: 1fr; }
.rvrb-grid--2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.rvrb-grid--4 { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.rvrb-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--rvrb-border);
	border-radius: var(--rvrb-radius);
	overflow: hidden;
	background: var(--rvrb-surface);
}

.rvrb-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.rvrb-card__body {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 1rem;
	flex: 1;
}

.rvrb-card__type {
	margin: 0;
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--rvrb-muted);
}

.rvrb-card__title {
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.3;
}

.rvrb-card__title a {
	text-decoration: none;
	color: inherit;
}

.rvrb-card__specs {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	color: var(--rvrb-muted);
}

.rvrb-card__price {
	margin-top: auto;
	padding-top: .5rem;
}

.rvrb-card__total {
	display: block;
	font-size: 1.25rem;
	font-weight: 700;
}

.rvrb-card__nights {
	display: block;
	font-size: .8125rem;
	color: var(--rvrb-muted);
}

.rvrb-card__cta {
	text-align: center;
	margin-top: .5rem;
}

.rvrb-pagination {
	display: flex;
	gap: .5rem;
	justify-content: center;
	margin: 2rem 0 0;
}

.rvrb-page {
	padding: .4rem .8rem;
	border: 1px solid var(--rvrb-border);
	border-radius: calc(var(--rvrb-radius) / 2);
	text-decoration: none;
	color: var(--rvrb-text);
}

.rvrb-page.is-current {
	background: var(--rvrb-accent);
	border-color: var(--rvrb-accent);
	color: #fff;
}

/* ---------- Booking form ---------- */

.rvrb-booking-form {
	border: 1px solid var(--rvrb-border);
	border-radius: var(--rvrb-radius);
	padding: 1.25rem;
	background: var(--rvrb-surface);
}

.rvrb-booking-form__rates {
	display: flex;
	align-items: baseline;
	gap: .5rem;
	flex-wrap: wrap;
	margin-bottom: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--rvrb-border);
}

.rvrb-booking-form__rate {
	font-size: 1.5rem;
	font-weight: 700;
}

.rvrb-booking-form__unit,
.rvrb-booking-form__min {
	font-size: .875rem;
	color: var(--rvrb-muted);
}

.rvrb-booking-form__min::before {
	content: "·";
	margin-right: .5rem;
}

.rvrb-booking-form__dates,
.rvrb-booking-form__locations {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1rem;
}

.rvrb-booking-form__extras {
	border: 0;
	padding: 0;
	margin: 0 0 1rem;
}

.rvrb-booking-form__extras legend {
	font-weight: 600;
	font-size: .875rem;
	padding: 0;
	margin-bottom: .5rem;
}

.rvrb-extra {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem 0;
	border-bottom: 1px solid var(--rvrb-surface-alt);
	cursor: pointer;
}

.rvrb-extra__label { flex: 1; }

.rvrb-extra__price {
	font-weight: 600;
	white-space: nowrap;
}

.rvrb-booking-form__mileage {
	font-size: .875rem;
	color: var(--rvrb-muted);
}

/* ---------- Quote ---------- */

.rvrb-quote:empty { display: none; }

.rvrb-quote__inner {
	background: var(--rvrb-surface-alt);
	border-radius: calc(var(--rvrb-radius) / 2);
	padding: 1rem;
	margin-bottom: 1rem;
}

.rvrb-quote__table {
	width: 100%;
	border-collapse: collapse;
	font-size: .9375rem;
}

.rvrb-quote__table th,
.rvrb-quote__table td {
	padding: .35rem 0;
	text-align: left;
	font-weight: 400;
	border: 0;
}

.rvrb-quote__table td { text-align: right; }

.rvrb-quote__deposit small {
	display: block;
	color: var(--rvrb-muted);
	font-size: .75rem;
}

.rvrb-quote__total th,
.rvrb-quote__total td {
	border-top: 1px solid var(--rvrb-border);
	padding-top: .6rem;
	font-weight: 700;
	font-size: 1.0625rem;
}

.rvrb-quote__loading { margin: 0; color: var(--rvrb-muted); }
.rvrb-quote__error { margin: 0; color: var(--rvrb-danger); }

.rvrb-price-suffix {
	font-size: .8125rem;
	color: var(--rvrb-muted);
}

/* ---------- Date picker ---------- */

.ui-datepicker {
	width: 19em;
	padding: .5rem;
	background: var(--rvrb-surface);
	border: 1px solid var(--rvrb-border);
	border-radius: var(--rvrb-radius);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
	display: none;
	z-index: 9999 !important;
}

.ui-datepicker-header {
	position: relative;
	padding: .25rem 0 .5rem;
	text-align: center;
	font-weight: 600;
}

.ui-datepicker-prev,
.ui-datepicker-next {
	position: absolute;
	top: .25rem;
	width: 1.8em;
	height: 1.8em;
	cursor: pointer;
	border-radius: 4px;
	text-indent: -9999px;
	overflow: hidden;
}

.ui-datepicker-prev { left: 0; }
.ui-datepicker-next { right: 0; }

.ui-datepicker-prev::after,
.ui-datepicker-next::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: .5em;
	height: .5em;
	border-top: 2px solid var(--rvrb-text);
	border-right: 2px solid var(--rvrb-text);
}

.ui-datepicker-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.ui-datepicker-next::after { transform: translate(-70%, -50%) rotate(45deg); }

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover { background: var(--rvrb-surface-alt); }

.ui-datepicker-calendar {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
}

.ui-datepicker-calendar th {
	padding: .35rem 0;
	font-size: .75rem;
	font-weight: 600;
	color: var(--rvrb-muted);
}

.ui-datepicker-calendar td { padding: 1px; }

.ui-datepicker-calendar a,
.ui-datepicker-calendar span {
	display: block;
	padding: .45rem 0;
	text-align: center;
	border-radius: 4px;
	text-decoration: none;
	color: var(--rvrb-text);
}

.ui-datepicker-calendar a:hover {
	background: var(--rvrb-accent);
	color: #fff;
}

.ui-datepicker-calendar .ui-state-active {
	background: var(--rvrb-accent);
	color: #fff;
}

/* Booked days: struck through and visibly out of reach. */
.ui-datepicker-calendar .rvrb-date-unavailable span,
.ui-datepicker-calendar td.ui-state-disabled span {
	color: #c3c4c7;
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 3px,
		rgba(195, 196, 199, .35) 3px,
		rgba(195, 196, 199, .35) 6px
	);
	cursor: not-allowed;
}

.ui-datepicker-calendar .ui-datepicker-unselectable span { opacity: .6; }

@media (max-width: 600px) {
	.rvrb-search-form--inline { flex-direction: column; align-items: stretch; }
	.rvrb-field { flex: 1 1 auto; }
}