/* Campspot booking widget — default structural skin.
 *
 * Vendor-neutral baseline that normalizes the widget against any host theme:
 * typography routing, spacing, hierarchy, control affordances and sizing.
 * Brand colours and fonts are NOT defined here — they come from the admin
 * Appearance settings (which emit CSS variables) or the Custom CSS field,
 * both of which load after this file. Every rule consumes var(--token, …) so
 * the skin works on its own yet is fully themeable without editing this file.
 *
 * The host theme may force-apply its own font with !important on h1-h5/div/p,
 * so the font-family rules below carry !important to win it back once a font
 * token (--font-cs-heading / --font-cs-body) is provided.
 */

/* Keep search bar clean and proportional. */
.campspot-booking .cs-search-bar__panel,
.campspot-booking .cs-search-bar__field {
	border-color: #b8d0db;
}

.campspot-booking .cs-search-bar__label {
	font-family: var(--font-cs-heading);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-cs-text, #404040);
	line-height: 1.2;
	margin-bottom: 0.2rem;
}

.campspot-booking .cs-search-bar__input,
.campspot-booking .cs-guest-toggle {
	font-family: var(--font-cs-body) !important;
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--color-cs-text, #404040);
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0;
	box-shadow: none !important;
	line-height: 1.35;
}

.campspot-booking .cs-search-bar__input {
	border: none !important;
	padding: 0 !important;
	background: transparent;
}

.campspot-booking .cs-search-bar__input::placeholder {
	color: #7a8e9f;
	opacity: 1;
}

.campspot-booking .cs-guest-toggle {
	background: #f8fcfe;
	border: 1px solid #c8dce6;
	border-radius: var(--radius-cs-field, 0.45rem);
	padding: 0.45rem 0.65rem;
}

.campspot-booking .cs-guest-dropdown {
	margin-top: 0.45rem;
	border: 1px solid #b8d0db;
	border-radius: 0.6rem;
	box-shadow: 0 8px 22px rgb(0 0 0 / 0.1);
	min-width: 300px;
}

.campspot-booking .cs-guest-dropdown__label span {
	font-family: var(--font-cs-body);
	font-size: 0.95rem;
	color: var(--color-cs-text, #404040);
	text-shadow: none;
}

.campspot-booking .cs-guest-dropdown__label small {
	font-family: var(--font-cs-body);
	font-size: 0.78rem;
	color: #7a8e9f;
	text-shadow: none;
}

.campspot-booking .cs-counter__btn {
	width: 1.8rem;
	height: 1.8rem;
	padding: 0;
	font-family: var(--font-cs-heading) !important;
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-cs-primary-dark, #01477b);
	text-shadow: none !important;
	text-transform: none !important;
	background: #f4f9fc;
	border: 1px solid #8fbfd2;
	box-shadow: none !important;
}

.campspot-booking .cs-counter__value {
	font-family: var(--font-cs-body) !important;
	font-size: 0.95rem;
	color: var(--color-cs-text, #404040);
	border: none !important;
	padding: 0 !important;
	text-shadow: none !important;
	box-shadow: none !important;
	background: transparent;
}

/* Override theme button skin; keep search CTA simple. */
.campspot-booking .cs-btn--search {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-shadow: none !important;
	background: var(--color-cs-primary, #4397b7) !important;
	border: 1px solid #3a86a3 !important;
	box-shadow: none !important;
	color: #fff !important;
	padding: 0.65rem 1.6rem;
}

.campspot-booking .cs-btn--search:hover {
	background: #357f9d !important;
}

/* Calendar colours, driven by the calendar token. */
.lightpick {
	border-color: #b8d0db;
	box-shadow: 0 10px 24px rgb(0 0 0 / 0.13);
}

.lightpick__month-title,
.lightpick__month-title > .lightpick__select-months,
.lightpick__month-title > .lightpick__select-years {
	color: var(--color-cs-primary-dark, #01477b);
}

.lightpick__day-of-the-week {
	color: #607f92;
}

.lightpick__day:not(.is-disabled):hover {
	background: color-mix(in srgb, var(--color-cs-calendar, #4397b7) 10%, #fff) !important;
	color: var(--color-cs-primary-dark, #01477b);
}

.lightpick__day.is-today {
	color: var(--color-cs-primary-dark, #01477b);
}

.lightpick__day.is-today::after {
	background: var(--color-cs-calendar, #4397b7);
}

.lightpick__day.is-start-day,
.lightpick__day.is-end-day {
	background: var(--color-cs-calendar, #4397b7) !important;
	color: #fff !important;
}

.lightpick__day.is-in-range {
	background: color-mix(in srgb, var(--color-cs-calendar, #4397b7) 18%, #fff);
	color: var(--color-cs-primary-dark, #01477b);
}

/* Reservation-card calendar (cs-avail-cal) follows the same configurable
 * calendar colour as the search picker above, so one setting recolours both. */
.campspot-booking .cs-avail-cal__day--start,
.campspot-booking .cs-avail-cal__day--end {
	background: var(--color-cs-calendar, #4397b7) !important;
}

.campspot-booking .cs-avail-cal__day--range {
	background: color-mix(in srgb, var(--color-cs-calendar, #4397b7) 14%, transparent);
}

.campspot-booking .cs-avail-cal__nav:hover {
	border-color: var(--color-cs-calendar, #4397b7);
	color: var(--color-cs-calendar, #4397b7);
}

/* Availability step: make controls and cards feel native to the host theme. */
.campspot-booking .cs-results-header select,
.campspot-booking .cs-results-header button,
.campspot-booking .cs-category-tab,
.campspot-booking .cs-filter-way,
.campspot-booking .cs-site-card button,
.campspot-booking .cs-site-card input {
	font-family: var(--font-cs-heading) !important;
	text-shadow: none !important;
	box-shadow: none !important;
	text-transform: none;
}

.campspot-booking .cs-results-header__count {
	color: #6f8898;
}

.campspot-booking .cs-results-header__count strong {
	color: var(--color-cs-text, #404040);
}

.campspot-booking .cs-results-header select {
	border: 1px solid var(--color-cs-field-border, #bfd5df);
	border-radius: var(--radius-cs-field, 0.45rem);
	padding: 0.45rem 0.7rem;
	font-size: 0.9rem;
	background: #fff;
	color: var(--color-cs-text, #404040);
}

.campspot-booking .cs-category-tabs {
	border-bottom-color: #cfe0e7;
}

.campspot-booking .cs-category-tab {
	font-size: 0.95rem;
	font-weight: 600;
	color: #6f8898;
	letter-spacing: 0;
	text-shadow: none;
}

.campspot-booking .cs-category-tab:hover {
	color: var(--color-cs-primary-dark, #01477b);
}

.campspot-booking .cs-category-tab--active {
	color: var(--color-cs-primary-dark, #01477b);
	border-bottom-color: var(--color-cs-primary, #4397b7);
}

.campspot-booking .cs-category-tab__count {
	color: #88a0ae;
}

.campspot-booking .cs-site-card {
	border-color: #cddbe2;
	border-radius: var(--radius-cs-card, 8px);
}

.campspot-booking .cs-site-card__body {
	border-right-color: #d6e2e8;
}

.campspot-booking .cs-site-card__title {
	font-family: var(--font-cs-heading);
	font-size: 1.05rem;
	color: var(--color-cs-heading, #2f3f4b);
	line-height: 1.3;
}

.campspot-booking .cs-site-card__meta,
.campspot-booking .cs-site-card__desc,
.campspot-booking .cs-site-card__amenities,
.campspot-booking .cs-site-card__avail,
.campspot-booking .cs-site-card__total {
	color: var(--color-cs-text-secondary, #516a79);
}

.campspot-booking .cs-site-card__avg {
	color: var(--color-cs-heading, #2f3f4b);
	font-size: 1.9rem;
}

.campspot-booking .cs-btn--book {
	background: linear-gradient(to bottom, #7cc5e0 0%, #4da6c9 48%, #2f87ad 100%) !important;
	border: 1px solid #4b9fbe !important;
	color: #fff !important;
	font-family: var(--font-cs-heading) !important;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-shadow: none !important;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), 0 1px 3px rgb(0 0 0 / 0.16) !important;
	border-radius: 9999px;
	padding: 0.62rem 1.5rem;
}

.campspot-booking .cs-btn--book:hover {
	filter: none;
	background: linear-gradient(to bottom, #6db9d6 0%, #419abd 50%, #2a799a 100%) !important;
}

/* Back link on availability step: remove theme button skin and keep it simple. */
.campspot-booking .campspot-back-btn,
.campspot-booking .cs-btn.campspot-back-btn,
.campspot-booking .cs-btn--outline.campspot-back-btn {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
	text-shadow: none !important;
	background: transparent !important;
	color: var(--color-cs-header, #2f6f8a) !important;
	border: 1px solid #9fc3d2 !important;
	box-shadow: none !important;
	border-radius: var(--radius-cs-field, 0.45rem);
	padding: 0.42rem 0.7rem;
	line-height: 1.2;
}

.campspot-booking .campspot-back-btn:hover,
.campspot-booking .cs-btn.campspot-back-btn:hover,
.campspot-booking .cs-btn--outline.campspot-back-btn:hover {
	background: #edf5f9 !important;
	color: var(--color-cs-primary-dark, #01477b) !important;
	border-color: #7fb1c5 !important;
}

/* Availability card body copy: reduce size for better hierarchy. */
.campspot-booking .cs-site-card__desc,
.campspot-booking .cs-site-card__amenities {
	font-size: 1.2rem;
	line-height: 1.45;
}

/* Carousel arrows: keep visible and high-contrast in Availability cards. */
.campspot-booking .cs-card-carousel__nav {
	opacity: 1 !important;
	width: 2.35rem;
	height: 2.35rem;
	background: var(--color-cs-arrow, #4397b7);
	color: #fff;
	border: 2px solid rgb(255 255 255 / 0.9);
	box-shadow: 0 2px 6px rgb(0 0 0 / 0.26) !important;
	font-size: 1.1rem;
	line-height: 1;
	z-index: 3;
}

.campspot-booking .cs-card-carousel__nav--prev {
	left: 0.6rem;
	opacity: 1 !important;
}

.campspot-booking .cs-card-carousel__nav--next {
	right: 0.6rem;
}

.campspot-booking .cs-card-carousel__nav:hover {
	background: var(--color-cs-primary-dark, #01477b);
}

/* Site Details step: keep map/list/sidebar controls clean and on-theme. */
.campspot-booking .cs-detail__title {
	font-family: var(--font-cs-heading);
	font-size: 1.65rem;
	line-height: 1.2;
	color: var(--color-cs-heading, #2f3f4b);
}

.campspot-booking .cs-detail__heading {
	font-family: var(--font-cs-heading);
	font-size: 1.12rem;
	line-height: 1.25;
	color: var(--color-cs-heading, #2f3f4b);
}

.campspot-booking .cs-detail__description,
.campspot-booking .cs-detail__subtext,
.campspot-booking .cs-amenity-grid__item {
	font-family: var(--font-cs-body);
	color: var(--color-cs-text-secondary, #516a79);
	text-shadow: none;
}

.campspot-booking .cs-location-tabs__tab {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.93rem;
	font-weight: 700;
	text-transform: none !important;
	text-shadow: none !important;
	letter-spacing: 0;
	background: transparent !important;
	box-shadow: none !important;
	color: #688493;
	border-bottom-color: transparent;
}

.campspot-booking .cs-location-tabs__tab--active {
	color: var(--color-cs-primary-dark, #01477b);
	border-bottom-color: var(--color-cs-primary, #4397b7);
}

.campspot-booking .cs-location-tabs__tab:hover:not(.cs-location-tabs__tab--active) {
	color: var(--color-cs-header, #2f6f8a);
}

.campspot-booking .cs-site-list__item,
.campspot-booking .cs-site-list__item:disabled {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.9rem;
	text-transform: none !important;
	text-shadow: none !important;
	background: #fff !important;
	color: var(--color-cs-heading, #2f3f4b) !important;
	border: 1px solid var(--color-cs-field-border, #bfd5df);
	box-shadow: none !important;
	padding: 0.68rem 0.92rem;
}

.campspot-booking .cs-site-list__item:hover {
	border-color: #79abc0;
	background: #f5fafc !important;
}

.campspot-booking .cs-site-list__item--selected {
	border-color: var(--color-cs-primary, #4397b7);
	box-shadow: 0 0 0 1px var(--color-cs-primary, #4397b7);
	background: #edf5f9 !important;
}

.campspot-booking .cs-site-list__name {
	color: var(--color-cs-heading, #2f3f4b);
	text-shadow: none;
}

.campspot-booking .cs-site-list__status {
	font-size: 0.78rem;
	text-shadow: none;
}

.campspot-booking .cs-reservation-card {
	border-color: #cddbe2;
	border-radius: var(--radius-cs-card, 8px);
}

.campspot-booking .cs-reservation-card__header {
	background: var(--color-cs-header, #2f6f8a);
	border-radius: var(--radius-cs-card, 8px) var(--radius-cs-card, 8px) 0 0;
}

.campspot-booking .cs-reservation-card__title {
	font-family: var(--font-cs-heading);
	font-size: 1.02rem;
	line-height: 1.25;
	text-shadow: none;
}

.campspot-booking .cs-res-field__label,
.campspot-booking .cs-res-field__hint,
.campspot-booking .cs-res-field__box,
.campspot-booking .cs-res-guest-row__label,
.campspot-booking .cs-res-guest-hint {
	font-family: var(--font-cs-body);
	text-shadow: none;
}

.campspot-booking .cs-res-field__box,
.campspot-booking .cs-res-field__box--btn {
	border-color: var(--color-cs-field-border, #bfd5df);
	box-shadow: none !important;
	background: #fff;
}

/* Reservation Dates toggle: it's a clickable button, but a faint border and
 * a near-invisible icon made it read as static text. Give the clickable
 * variant a clearer field affordance (stronger border, subtle fill, visible
 * calendar icon, hover feedback). Scoped to --btn so the plain guests display
 * box is unaffected. */
.campspot-booking .cs-res-field__box--btn {
	border-color: #9fc3d2;
	background: #f8fcfe;
}

.campspot-booking .cs-res-field__box--btn:hover {
	border-color: var(--color-cs-primary, #4397b7);
	background: #eef6fa;
}

.campspot-booking .cs-res-field__box--btn svg {
	color: var(--color-cs-header, #2f6f8a) !important;
}

.campspot-booking .cs-res-field__hint--btn {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.82rem;
	font-weight: 700;
	text-shadow: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	color: var(--color-cs-header, #2f6f8a);
}

/* Site Details: remaining button skin bleed cleanup. */
.campspot-booking .cs-gallery__view-all,
.campspot-booking .cs-gallery__view-all.cs-btn,
.campspot-booking .cs-gallery__view-all.cs-btn--outline {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: none !important;
	text-shadow: none !important;
	letter-spacing: 0;
	color: var(--color-cs-header, #2f6f8a) !important;
	background: rgb(255 255 255 / 0.94) !important;
	border: 1px solid #a8c7d5 !important;
	box-shadow: 0 1px 3px rgb(0 0 0 / 0.1) !important;
	padding: 0.4rem 0.7rem;
	border-radius: var(--radius-cs-field, 0.45rem);
}

.campspot-booking .cs-gallery__view-all:hover {
	background: #fff !important;
	border-color: #7fb1c5 !important;
	color: var(--color-cs-primary-dark, #01477b) !important;
}

.campspot-booking .cs-park-map__zoom {
	background: rgb(255 255 255 / 0.96);
	border-color: var(--color-cs-field-border, #bfd5df);
	box-shadow: 0 1px 4px rgb(0 0 0 / 0.14);
	border-radius: 6px;
}

.campspot-booking .cs-park-map__zoom-btn {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	color: var(--color-cs-header, #2f6f8a);
	background: transparent;
	padding: 0;
	width: 1.45rem;
	height: 1.45rem;
	line-height: 1;
}

.campspot-booking .cs-park-map__zoom-btn:hover:not([disabled]) {
	background: #edf5f9;
	color: var(--color-cs-primary-dark, #01477b);
}

/* Cart step: keep typography and controls consistent with site style. */
.campspot-booking .cs-cart__title,
.campspot-booking .cs-cart__section-title,
.campspot-booking .cs-cart-item__name,
.campspot-booking .cs-cart__summary-title,
.campspot-booking .cs-promo__label,
.campspot-booking .cs-cart__total-label,
.campspot-booking .cs-cart__total-amount {
	font-family: var(--font-cs-heading) !important;
	text-shadow: none !important;
}

.campspot-booking .cs-cart-item,
.campspot-booking .cs-cart__summary-panel {
	border-color: #cddbe2;
	border-radius: var(--radius-cs-card, 8px);
}

.campspot-booking .cs-cart__main {
	gap: 1.35rem;
}

.campspot-booking .cs-cart-item {
	padding: 1rem;
	gap: 0.85rem;
}

.campspot-booking .cs-cart-item__dates,
.campspot-booking .cs-cart-item__guests,
.campspot-booking .cs-cart__summary-body,
.campspot-booking .cs-summary-item,
.campspot-booking .cs-summary-item__meta {
	color: var(--color-cs-text-secondary, #516a79);
	text-shadow: none;
}

.campspot-booking .cs-cart-item__name {
	font-size: 1.02rem;
	line-height: 1.28;
	margin-bottom: 0.2rem;
}

.campspot-booking .cs-cart-item__dates,
.campspot-booking .cs-cart-item__guests {
	font-size: 0.98rem !important;
	line-height: 1.35;
	font-family: var(--font-cs-body) !important;
	color: #5b7382;
	margin-bottom: 0.05rem;
}

.campspot-booking .cs-cart-item__price {
	font-size: 1.05rem;
	line-height: 1.2;
}

.campspot-booking .cs-cart-item__img {
	flex-basis: 92px;
}

.campspot-booking .cs-cart-item__img img {
	height: 74px;
}

.campspot-booking .cs-cart__summary-header {
	background: var(--color-cs-header, #2f6f8a);
}

.campspot-booking .cs-cart__summary-title {
	font-size: 1.02rem;
	line-height: 1.25;
}

/* Canonical text/select field skin, shared across the plugin so every input
 * (promo, checkout form, add-on modal, reservation card, filters) matches:
 * clean white field, soft blue border, serif type, no theme shadow/glow. */
.campspot-booking .cs-promo__input,
.campspot-booking .cs-field__input,
.campspot-booking .cs-field__select,
.campspot-booking .cs-res-field__input,
.campspot-booking .cs-res-field__select,
.campspot-booking .cs-filter-price__input {
	font-family: var(--font-cs-body) !important;
	font-size: 0.95rem;
	color: var(--color-cs-text, #404040);
	background: #fff;
	border: 1px solid var(--color-cs-field-border, #bfd5df) !important;
	border-radius: var(--radius-cs-field, 0.45rem);
	padding: 0.55rem 0.7rem !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none !important;
}

.campspot-booking .cs-promo__input:focus,
.campspot-booking .cs-field__input:focus,
.campspot-booking .cs-field__select:focus,
.campspot-booking .cs-res-field__input:focus,
.campspot-booking .cs-res-field__select:focus,
.campspot-booking .cs-filter-price__input:focus {
	border-color: #7fb1c5 !important;
	outline: none;
}

/* Preserve the validation error state (red border) — it must win over the
 * shared !important border above, so it is restated here after it. */
.campspot-booking .cs-field__input--error,
.campspot-booking .cs-field__select--error,
.campspot-booking .cs-res-field__input--error {
	border-color: #dc2626 !important;
	background: #fef2f2;
}

.campspot-booking .cs-promo__row .cs-btn--outline,
.campspot-booking .cs-cart__actions .cs-btn--outline {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.88rem;
	font-weight: 700;
	text-transform: none !important;
	text-shadow: none !important;
	background: transparent !important;
	color: var(--color-cs-header, #2f6f8a) !important;
	border: 1px solid #9fc3d2 !important;
	box-shadow: none !important;
	letter-spacing: 0;
}

.campspot-booking .cs-promo__row .cs-btn--outline:hover,
.campspot-booking .cs-cart__actions .cs-btn--outline:hover {
	background: #edf5f9 !important;
	color: var(--color-cs-primary-dark, #01477b) !important;
	border-color: #7fb1c5 !important;
}

.campspot-booking .cs-addon-card {
	border-color: #cddbe2;
	border-radius: var(--radius-cs-card, 8px);
	box-shadow: none;
}

.campspot-booking .cs-addon-card__name,
.campspot-booking .cs-addon-card__price,
.campspot-booking .cs-addon-card__desc,
.campspot-booking .cs-addon-group__title {
	text-shadow: none !important;
}

.campspot-booking .cs-addon-card__name {
	font-size: 0.98rem;
	line-height: 1.25;
}

.campspot-booking .cs-addon-card__price {
	font-size: 1.02rem;
	line-height: 1.2;
}

.campspot-booking .cs-addon-card__desc {
	font-family: var(--font-cs-body) !important;
	font-size: 0.95rem !important;
	line-height: 1.4;
	color: var(--color-cs-text-muted, #6d8493);
}

.campspot-booking .cs-cart__summary-body {
	padding: 1rem 1.2rem;
	gap: 0.8rem;
}

.campspot-booking .cs-cart__total-label {
	font-size: 0.95rem;
}

.campspot-booking .cs-cart__total-amount {
	font-size: 1.12rem;
}

.campspot-booking .cs-addon-card__details-link {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.82rem;
	font-weight: 700;
	text-transform: none !important;
	text-shadow: none !important;
	box-shadow: none !important;
	color: var(--color-cs-header, #2f6f8a);
	letter-spacing: 0;
}

.campspot-booking .cs-addon-card__details-link:hover {
	color: var(--color-cs-primary-dark, #01477b);
}

/* Add-on modal: close button + description sizing cleanup. */
.campspot-booking .cs-modal__close {
	width: 2rem;
	height: 2rem;
	top: 0.55rem;
	right: 0.55rem;
	border: 1px solid var(--color-cs-field-border, #bfd5df);
	border-radius: 9999px;
	background: #f7fbfd;
	color: var(--color-cs-header, #2f6f8a);
	font-family: var(--font-cs-heading) !important;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1;
	text-shadow: none !important;
	text-transform: none !important;
	box-shadow: none !important;
	padding: 0;
}

.campspot-booking .cs-modal__close:hover {
	background: #edf5f9;
	border-color: #7fb1c5;
	color: var(--color-cs-primary-dark, #01477b);
}

.campspot-booking .cs-addon-modal__desc {
	font-family: var(--font-cs-body) !important;
	font-size: 0.95rem;
	line-height: 1.45;
	color: var(--color-cs-text-secondary, #516a79);
	text-shadow: none !important;
}

/* Add-on modal: promote the product name to a proper serif heading so it
 * outranks the description, matching the title/body hierarchy used
 * elsewhere in the booking flow (default is a small 1.125rem label). */
.campspot-booking .cs-addon-modal__title {
	font-family: var(--font-cs-heading) !important;
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--color-cs-heading, #2f3f4b);
	margin: 0 0 0.6rem;
	text-shadow: none !important;
}

/* Booking Fee: recolor the default emerald-green highlight (name, amount,
 * underline) to the header token so it reads as native on Cart and
 * Site Details instead of a stray off-palette accent. */
.campspot-booking .cs-summary-item--booking-fee .cs-summary-item__name,
.campspot-booking .cs-res-pricing__row--booking-fee > span:first-child {
	color: var(--color-cs-header, #2f6f8a);
	text-decoration-color: rgb(47 111 138 / 0.4);
}

.campspot-booking .cs-summary-item--booking-fee .cs-summary-item__price,
.campspot-booking .cs-res-pricing__row--booking-fee > span:nth-child(2) {
	color: var(--color-cs-header, #2f6f8a);
}

/* Add-on cards: heading stack on the name/price/group title, while the card
 * description stays on the body (Alegreya) stack. Restated after the shared
 * add-on group rule above so only these heading parts switch fonts. */
.campspot-booking .cs-addon-card__name,
.campspot-booking .cs-addon-card__price,
.campspot-booking .cs-addon-group__title {
	font-family: var(--font-cs-heading) !important;
}

/* ============================================================
 * Checkout step
 * ============================================================ */

/* Section headings (Guest Information, Payment Information, page title):
 * brand display font, consistent with the rest of the booking flow. */
.campspot-booking .cs-checkout__title,
.campspot-booking .cs-fieldset__legend {
	font-family: var(--font-cs-heading) !important;
	color: var(--color-cs-heading, #2f3f4b);
	text-shadow: none !important;
}

/* Uppercase micro-labels (FULL NAME, CITY, …): keep crisp and on-palette. */
.campspot-booking .cs-field__label {
	font-family: var(--font-cs-body) !important;
	color: #5b7382;
	text-shadow: none !important;
}

/* Inline validation errors: small and red. */
.campspot-booking .cs-field__error {
	font-family: var(--font-cs-body) !important;
	font-size: 0.8rem;
	color: #dc2626;
}

/* Reservation Summary header: align to the teal-blue used on the cart
 * summary instead of the dark text colour. */
.campspot-booking .cs-order-summary__header {
	background: var(--color-cs-header, #2f6f8a);
}

.campspot-booking .cs-order-summary__title {
	font-family: var(--font-cs-heading) !important;
	color: #fff;
	text-shadow: none !important;
}

/* Order Total row. */
.campspot-booking .cs-order-summary__total span,
.campspot-booking .cs-order-summary__total strong {
	font-family: var(--font-cs-heading) !important;
	color: var(--color-cs-heading, #2f3f4b);
}

/* "Charged Separately" callout label. */
.campspot-booking .cs-summary-charge__head {
	font-family: var(--font-cs-body) !important;
	color: var(--color-cs-text-muted, #6d8493);
}

/* Two-transaction payment disclosure: the theme inflates bare <p> copy, so
 * pin it to a readable helper-note size inside a soft info callout — visible
 * but secondary, the way a payment notice should read. */
.campspot-booking .cs-order-summary__charges-note {
	font-family: var(--font-cs-body) !important;
	font-size: 0.85rem !important;
	line-height: 1.5;
	color: #51687a;
	background: #f1f7fa;
	border: 1px solid #d6e6ee;
	border-radius: var(--radius-cs-field, 0.45rem);
	padding: 0.6rem 0.75rem;
	margin-top: 0.75rem;
	text-shadow: none !important;
}

/* Policies disclosure: collapsible summary + body copy pinned to readable
 * sizes (theme <p>/<li>/heading sizing otherwise makes policy text oversized,
 * as seen on "CANCELLATION POLICY FOR CAMPSITES:"). */
.campspot-booking .cs-policy summary {
	font-family: var(--font-cs-heading) !important;
	font-size: 0.95rem !important;
	color: var(--color-cs-header, #2f6f8a);
	text-shadow: none !important;
}

.campspot-booking .cs-policy__body,
.campspot-booking .cs-policy__body p,
.campspot-booking .cs-policy__body li {
	font-family: var(--font-cs-body) !important;
	font-size: 0.88rem !important;
	line-height: 1.55;
	color: var(--color-cs-text-secondary, #516a79);
	text-shadow: none !important;
}

.campspot-booking .cs-policy__body strong,
.campspot-booking .cs-policy__body h3,
.campspot-booking .cs-policy__body h4 {
	font-family: var(--font-cs-body) !important;
	font-size: 0.95rem !important;
	font-weight: 700;
	line-height: 1.4;
	color: var(--color-cs-heading, #2f3f4b);
}

.campspot-booking .cs-policy__body a {
	color: var(--color-cs-header, #2f6f8a);
}

/* Terms + booking-fee acknowledgement: fine print, readable but quiet. */
.campspot-booking .cs-terms,
.campspot-booking .cs-terms li {
	font-family: var(--font-cs-body) !important;
	font-size: 0.82rem !important;
	line-height: 1.5;
	color: var(--color-cs-text-muted, #6d8493);
}

.campspot-booking .cs-terms a {
	color: var(--color-cs-header, #2f6f8a);
}

/* ============================================================
 * Confirmation step
 * ============================================================ */

/* Success banner: align to the booking flow's teal-blue with a clean white
 * check badge for a clear, on-brand confirmation moment. */
.campspot-booking .cs-confirmation__header {
	background: var(--color-cs-header, #2f6f8a);
}

.campspot-booking .cs-confirmation__icon {
	color: var(--color-cs-header, #2f6f8a);
	background: #fff;
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.campspot-booking .cs-confirmation__title {
	font-family: var(--font-cs-heading) !important;
	color: #fff;
	text-shadow: none !important;
}

.campspot-booking .cs-confirmation__subtitle {
	font-family: var(--font-cs-body) !important;
	color: rgb(255 255 255 / 0.88);
	text-shadow: none !important;
}

/* Body notes pinned to a readable size (theme <p> override). */
.campspot-booking .cs-confirmation__note {
	font-family: var(--font-cs-body) !important;
	font-size: 0.9rem !important;
	line-height: 1.5;
	color: #51687a;
	text-shadow: none !important;
}

.campspot-booking .cs-confirmation__note--fee {
	color: var(--color-cs-text-muted, #6d8493);
}

/* Post-purchase order detail: brand fonts, readable rows. */
.campspot-booking .cs-order-detail__site-name,
.campspot-booking .cs-order-detail__row--total {
	font-family: var(--font-cs-heading) !important;
	color: var(--color-cs-heading, #2f3f4b);
	text-shadow: none !important;
}

.campspot-booking .cs-order-detail__row,
.campspot-booking .cs-order-detail__site-dates,
.campspot-booking .cs-order-detail__site-guests,
.campspot-booking .cs-order-detail__payment {
	font-family: var(--font-cs-body) !important;
	color: var(--color-cs-text-secondary, #516a79);
	text-shadow: none !important;
}

.campspot-booking .cs-order-detail__site-label {
	font-family: var(--font-cs-body) !important;
	color: var(--color-cs-text-muted, #6d8493);
}

/* ============================================================
 * Gallery lightbox (full-screen photo viewer)
 * ============================================================ */

/* Match the Availability carousel arrows: a solid brand-colour circle with a
 * white icon and a subtle ring, clearly visible on the dark overlay (the base
 * style is a faint translucent-white circle, so prev/next/close nearly vanish).
 * The arrow colour is admin-configurable via --color-cs-arrow. */
.campspot-booking .cs-lightbox__nav,
.campspot-booking .cs-lightbox__close {
	background: var(--color-cs-arrow, #4397b7) !important;
	color: #fff !important;
	border: 2px solid rgb(255 255 255 / 0.9) !important;
	box-shadow: 0 2px 8px rgb(0 0 0 / 0.35) !important;
	opacity: 1 !important;
}

.campspot-booking .cs-lightbox__nav:hover,
.campspot-booking .cs-lightbox__close:hover {
	background: var(--color-cs-primary-dark, #01477b) !important;
}

.campspot-booking .cs-lightbox__nav {
	width: 2.75rem;
	height: 2.75rem;
}

.campspot-booking .cs-lightbox__close {
	width: 2.5rem;
	height: 2.5rem;
}

.campspot-booking .cs-lightbox__counter {
	color: #fff;
	text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
}