/* ==========================================================================
   Safari Premium — Components
   Buttons, cards, badges, form fields, placeholder, testimonial, newsletter,
   search widget, filter panel, breadcrumbs, stars, page hero.
   ========================================================================== */

/* --- Buttons ---------------------------------------------------------- */
.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--sp-font-sans);
	font-weight: 500;
	letter-spacing: var(--sp-tracking-normal);
	border-radius: var(--sp-radius-pill);
	cursor: pointer;
	transition: transform var(--sp-dur-2) var(--sp-ease),
				background var(--sp-dur-2) var(--sp-ease),
				color var(--sp-dur-2) var(--sp-ease),
				border-color var(--sp-dur-2) var(--sp-ease),
				box-shadow var(--sp-dur-2) var(--sp-ease);
	border: 1px solid transparent;
	white-space: nowrap;
	text-decoration: none;
}
.sp-btn:hover { transform: translateY(-1px); }
.sp-btn:active { transform: translateY(0); }
.sp-btn--full { width: 100%; }
.sp-btn--sm { padding: 8px 16px; font-size: var(--sp-text-sm); }
.sp-btn--md { padding: 11px 22px; font-size: var(--sp-text-base); }
.sp-btn--lg { padding: 14px 28px; font-size: var(--sp-text-md); }

.sp-btn--primary {
	background: var(--sp-color-burnt-orange);
	color: var(--sp-color-cream);
	border-color: var(--sp-color-burnt-orange);
	box-shadow: var(--sp-shadow-btn-primary);
}
.sp-btn--primary:hover { background: var(--sp-color-brown); border-color: var(--sp-color-brown); color: var(--sp-color-cream); }
.sp-btn--primary-dark {
	background: var(--sp-color-brown);
	color: var(--sp-color-cream);
	border-color: var(--sp-color-brown);
}
.sp-btn--primary-dark:hover { background: var(--sp-color-charcoal); color: var(--sp-color-cream); border-color: var(--sp-color-charcoal); }
.sp-btn--secondary {
	background: transparent;
	color: var(--sp-color-brown);
	border: 1.5px solid var(--sp-color-brown);
}
.sp-btn--secondary:hover { background: var(--sp-color-brown); color: var(--sp-color-cream); }
.sp-btn--on-dark {
	background: var(--sp-color-amber);
	color: var(--sp-color-brown);
	border-color: var(--sp-color-amber);
}
.sp-btn--on-dark:hover { background: var(--sp-color-soft-sunset); color: var(--sp-color-brown); }
.sp-btn--ghost {
	background: transparent;
	color: var(--sp-color-burnt-orange);
}
.sp-btn--ghost:hover { background: rgba(194,65,12,0.06); }

/* --- Real featured image (fills the same box as the placeholder) ------ */
.sp-media-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sp-card--excursion .sp-card__media .sp-media-img { aspect-ratio: 16 / 10; }
.sp-card--excursion.is-compact .sp-card__media .sp-media-img { aspect-ratio: 4 / 3; }
.sp-card--stay .sp-card__media .sp-media-img { aspect-ratio: 4 / 3; }
.sp-card--car .sp-card__media .sp-media-img { aspect-ratio: 4 / 3; }
.sp-single__hero .sp-media-img { aspect-ratio: 21 / 9; border-radius: inherit; }
.sp-single__thumbs .sp-media-img { aspect-ratio: 4 / 3; border-radius: var(--sp-radius-md); }
.sp-gallery-grid .sp-media-img,
.sp-meeting__map .sp-media-img { height: 100%; }
.sp-rooms__card .sp-media-img { aspect-ratio: 16 / 10; }

/* --- Striped editorial placeholder ------------------------------------ */
.sp-placeholder {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 0;
	color: var(--sp-color-cream);
}
.sp-placeholder--warm  { background: linear-gradient(135deg, #F59E0B 0%, #C2410C 100%); }
.sp-placeholder--dusk  { background: linear-gradient(135deg, #EA580C 0%, #5C2E0A 100%); }
.sp-placeholder--sea   { background: linear-gradient(135deg, #8B5A2B 0%, #5C2E0A 100%); }
.sp-placeholder--sand  { background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 100%); color: var(--sp-color-brown); }
.sp-placeholder--ivory { background: linear-gradient(135deg, #FAEFD9 0%, #F5DFA8 100%); color: var(--sp-color-brown); }
.sp-placeholder--night { background: linear-gradient(135deg, #1C1410 0%, #5C2E0A 100%); }

.sp-placeholder__stripes {
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 22px);
	pointer-events: none;
}
.sp-placeholder__sun {
	position: absolute;
	left: 50%; top: 62%;
	transform: translate(-50%, -50%);
	width: 44%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 68%);
	pointer-events: none;
}
.sp-placeholder__inner {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 16px;
	text-align: center;
	gap: 8px;
}
.sp-placeholder__tag {
	font-family: var(--sp-font-mono);
	font-size: 10px;
	letter-spacing: var(--sp-tracking-wider);
	text-transform: uppercase;
	opacity: 0.75;
}
.sp-placeholder__label {
	font-family: var(--sp-font-mono);
	font-size: 11px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 1px dashed currentColor;
	padding: 6px 12px;
	border-radius: var(--sp-radius-pill);
	opacity: 0.92;
}
.sp-placeholder__caption {
	font-family: var(--sp-font-mono);
	font-size: 10px;
	opacity: 0.7;
	max-width: 220px;
}

/* --- Eyebrow already in base.css --- */

/* --- Price badge ------------------------------------------------------ */
.sp-price-badge {
	position: absolute;
	top: 14px;
	right: 14px;
	background: var(--sp-color-amber);
	color: var(--sp-color-brown);
	padding: 6px 14px;
	border-radius: var(--sp-radius-pill);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--sp-tracking-normal);
	box-shadow: 0 2px 8px -2px rgba(92,46,10,0.25);
	display: inline-flex;
	gap: 4px;
	align-items: baseline;
	z-index: 2;
}
.sp-price-badge__amount { font-size: var(--sp-text-base); }
/* "Price on request" variant (excursions awaiting a client-supplied price): a
   quieter cream pill instead of the amber price pill. */
.sp-price-badge--request {
	background: var(--sp-color-off-white);
	color: var(--sp-color-muted-brown);
	font-weight: 500;
}

/* --- Sample-content markers ------------------------------------------- */
/* Used to clearly flag placeholder/demo content (e.g. accommodations) so it's
   distinguishable from real migrated content. Remove the _sp_sample meta /
   replace the data and the marker disappears automatically. */
.sp-sample-badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	background: var(--sp-color-charcoal);
	color: var(--sp-color-cream);
	font-family: var(--sp-font-sans);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: var(--sp-tracking-wide);
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: var(--sp-radius-pill);
	opacity: 0.92;
}
.sp-sample-note {
	display: inline-block;
	margin: 0 auto 20px;
	background: rgba(28, 20, 16, 0.06);
	border: 1px dashed var(--sp-color-muted-brown);
	color: var(--sp-color-muted-brown);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	padding: 8px 16px;
	border-radius: var(--sp-radius-md);
	text-align: center;
}

/* --- Stars ------------------------------------------------------------ */
.sp-stars { display: inline-flex; gap: 1px; align-items: center; color: var(--sp-color-amber); }
.sp-star  { display: inline-flex; opacity: 0.3; }
.sp-star svg { fill: none; }
.sp-star--filled { opacity: 1; }
.sp-star--filled svg { fill: currentColor; }

/* --- Icon helpers ----------------------------------------------------- */
.sp-icon--amber { color: var(--sp-color-amber); }
.sp-icon--brown { color: var(--sp-color-brown); }
.sp-icon--orange { color: var(--sp-color-burnt-orange); }

/* --- Cards (shared shell) -------------------------------------------- */
.sp-card {
	background: var(--sp-color-off-white);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-xl);
	box-shadow: var(--sp-shadow-card);
	transition: transform var(--sp-dur-2) var(--sp-ease), box-shadow var(--sp-dur-2) var(--sp-ease);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
a.sp-card:hover, .sp-card:has(a:hover) { transform: translateY(-2px); }

/* --- Excursion card --------------------------------------------------- */
.sp-card--excursion .sp-card__media { position: relative; }
.sp-card--excursion .sp-card__media .sp-placeholder { aspect-ratio: 16 / 10; }
.sp-card--excursion.is-compact .sp-card__media .sp-placeholder { aspect-ratio: 4 / 3; }
.sp-card--excursion .sp-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.sp-card__meta {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	color: var(--sp-color-muted-brown);
}
.sp-card__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.sp-card__title {
	font-family: var(--sp-font-serif);
	font-size: var(--sp-text-2xl);
	font-weight: 500;
	color: var(--sp-color-brown);
	margin: 0;
	line-height: var(--sp-leading-snug);
}
.sp-card--excursion.is-compact .sp-card__title { font-size: 19px; }
.sp-card__blurb {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	line-height: var(--sp-leading-base);
	color: var(--sp-color-muted-brown);
	margin: 0;
}
.sp-card__cta { margin-top: auto; align-self: flex-start; }

/* --- Car card --------------------------------------------------------- */
.sp-card--car .sp-card__media { position: relative; background: var(--sp-color-ivory); }
.sp-card--car .sp-card__media .sp-placeholder { aspect-ratio: 4 / 3; }
.sp-card--car .sp-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sp-card--car.is-compact .sp-card__body { padding: 18px; }
.sp-card--car.is-compact .sp-card__title { font-size: 17px; }
.sp-card--car .sp-card__title { font-size: 19px; }
.sp-card__specs {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	color: var(--sp-color-muted-brown);
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	min-height: 34px;
}
.sp-card__spec { display: inline-flex; align-items: center; gap: 4px; }
.sp-card__spec + .sp-card__spec::before {
	content: "·";
	color: var(--sp-color-ivory);
	margin-right: 4px;
}
.sp-card__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
	margin-top: 4px;
	font-family: var(--sp-font-sans);
}
.sp-card__price-amount {
	font-size: var(--sp-text-2xl);
	font-weight: 600;
	color: var(--sp-color-brown);
	font-variant-numeric: tabular-nums;
}
.sp-card__price-unit {
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
}
/* "Price on request" (no client price yet) — quieter than the bold € amount. */
.sp-card__price-amount--request {
	font-size: var(--sp-text-base);
	font-weight: 500;
	color: var(--sp-color-muted-brown);
}

/* --- Location map (keyless Google embed) ------------------------------ */
.sp-map {
	position: relative;
	overflow: hidden;
	border-radius: var(--sp-radius-xl);
	box-shadow: var(--sp-shadow-card);
	background: var(--sp-color-ivory);
}
.sp-map__frame {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 6;
	border: 0;
}
@media (max-width: 767px) {
	.sp-map__frame { aspect-ratio: 4 / 3; }
}
.sp-map__link {
	position: absolute;
	right: 12px;
	bottom: 12px;
	background: var(--sp-color-off-white);
	color: var(--sp-color-brown);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	font-weight: 500;
	padding: 6px 12px;
	border-radius: var(--sp-radius-pill);
	box-shadow: var(--sp-shadow-card);
	text-decoration: none;
}
.sp-map__link:hover { color: var(--sp-color-burnt-orange); }

/* --- Search results page ---------------------------------------------- */
.sp-search-refine {
	display: flex; align-items: center; gap: 10px;
	max-width: 640px; margin: 0 0 44px;
	background: var(--sp-color-off-white);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-pill);
	padding: 6px 6px 6px 18px;
}
.sp-search-refine .sp-icon { color: var(--sp-color-burnt-orange); flex-shrink: 0; }
.sp-search-refine input[type="search"] {
	flex: 1; min-width: 0; border: 0; background: transparent; min-height: 44px;
	font-family: var(--sp-font-sans); font-size: var(--sp-text-base); color: var(--sp-color-brown);
}
.sp-search-refine input[type="search"]:focus { outline: none; }
.sp-search-group { margin-bottom: 56px; }
.sp-search-empty { text-align: center; padding: 24px 0 48px; }
.sp-search-empty p { color: var(--sp-color-muted-brown); margin: 8px 0 24px; }
.sp-search-empty__links { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sp-search-pages { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-search-pages a {
	display: block; padding: 16px 20px;
	background: var(--sp-color-off-white);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-lg);
	text-decoration: none;
}
.sp-search-pages a:hover { border-color: var(--sp-color-burnt-orange); }
.sp-search-pages__title { display: block; font-family: var(--sp-font-serif); font-size: 18px; color: var(--sp-color-brown); margin-bottom: 4px; }
.sp-search-pages__excerpt { display: block; font-family: var(--sp-font-sans); font-size: var(--sp-text-sm); color: var(--sp-color-muted-brown); }

/* --- Stay card -------------------------------------------------------- */
.sp-card--stay .sp-card__media { position: relative; }
.sp-card--stay .sp-card__media .sp-placeholder { aspect-ratio: 4 / 3; }
.sp-card--stay .sp-card__body {
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sp-card--stay .sp-card__title-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 10px;
}
.sp-card--stay .sp-card__title { font-size: 20px; }
.sp-card--stay .sp-card__location-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
}
.sp-card--stay .sp-card__location-row .sp-stars { margin-left: auto; }
.sp-card__amenities {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 6px;
	padding-top: 14px;
	border-top: 1px solid var(--sp-color-ivory);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	color: var(--sp-color-muted-brown);
}
.sp-card__amenity {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.sp-card__amenity .sp-icon { color: var(--sp-color-burnt-orange); }

/* --- Form field ------------------------------------------------------- */
.sp-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.sp-field__label {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-wide);
	text-transform: uppercase;
	color: var(--sp-color-muted-brown);
}
.sp-field__control,
.sp-field input[type="text"],
.sp-field input[type="email"],
.sp-field input[type="tel"],
.sp-field input[type="date"],
.sp-field input[type="number"],
.sp-field input[type="search"],
.sp-field select,
.sp-field textarea {
	min-height: 48px;
	background: var(--sp-color-off-white);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-md);
	padding: 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-brown);
	width: 100%;
	transition: border-color var(--sp-dur-2) var(--sp-ease), box-shadow var(--sp-dur-2) var(--sp-ease);
}
.sp-field input:focus,
.sp-field select:focus,
.sp-field textarea:focus {
	outline: none;
	border-color: var(--sp-color-burnt-orange);
	box-shadow: 0 0 0 3px rgba(194,65,12,0.15);
}
.sp-field textarea {
	min-height: 100px;
	padding: 12px 14px;
	display: block;
	line-height: var(--sp-leading-base);
}
.sp-field__control--placeholder { color: var(--sp-color-placeholder-text); }
.sp-field__control .sp-icon { color: var(--sp-color-burnt-orange); flex-shrink: 0; }

/* Real controls nested inside a .sp-field__control box render bare (the box owns
   the border/background); they fill the remaining space beside the icon. */
.sp-field__control select,
.sp-field__control input {
	flex: 1;
	min-width: 0;
	min-height: 0;
	border: 0;
	background: transparent;
	padding: 0;
	margin: 0;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-brown);
	box-shadow: none;
	cursor: pointer;
}
.sp-field__control select:focus,
.sp-field__control input:focus { outline: none; box-shadow: none; }
/* Date fields: our left calendar icon is the affordance, so hide the browser's
   redundant picker glyph and let a click anywhere in the field open the picker. */
.sp-field__control { position: relative; }
.sp-field__control input[type="date"]::-webkit-calendar-picker-indicator {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}
.sp-field__control input[type="date"]::-webkit-inner-spin-button { display: none; }

/* Uniform right-side chevron on every search field (selects + date inputs) so
   they all read the same. Previously date fields had an empty right edge while
   selects showed the browser's native arrow. We hide the native select arrow and
   draw one consistent chevron; it's decorative (clicks pass through to the field). */
.sp-field__control select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.sp-field__control select,
.sp-field__control input[type="date"] { padding-right: 20px; }
/* Kill the native field box on inputs INSIDE a .sp-field__control. The original
   `.sp-field input[type="date"]` box rule (border + bg + min-height) out-ranks the
   bare-input reset above (its [type] selector adds specificity), which left a
   visible inner box ("box-in-a-box") on date fields. These matching-specificity,
   later-in-source rules win. */
.sp-field__control input[type="date"],
.sp-field__control input[type="search"],
.sp-field__control input[type="text"],
.sp-field__control input[type="number"] {
	border: 0;
	background: transparent;
	box-shadow: none;
	min-height: 0;
	-webkit-appearance: none;
	appearance: none;
}
.sp-field__control:has(select)::after,
.sp-field__control:has(input[type="date"])::after {
	content: "";
	position: absolute;
	right: 14px;
	top: 50%;
	width: 7px;
	height: 7px;
	border-right: 1.6px solid var(--sp-color-muted-brown);
	border-bottom: 1.6px solid var(--sp-color-muted-brown);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
	z-index: 1;
}

/* Input row: icon prefix */
.sp-field__icon {
	color: var(--sp-color-burnt-orange);
	flex-shrink: 0;
}

/* Inline checkbox */
.sp-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-brown);
	padding: 6px 0;
	cursor: pointer;
}
.sp-checkbox__box {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	border: 1.5px solid var(--sp-color-muted-brown);
	background: transparent;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all var(--sp-dur-2) var(--sp-ease);
}
.sp-checkbox input:checked + .sp-checkbox__box,
.sp-checkbox.is-checked .sp-checkbox__box {
	background: var(--sp-color-burnt-orange);
	border-color: var(--sp-color-burnt-orange);
	color: var(--sp-color-cream);
}
/* The tick is always in the DOM; reveal it only when checked so clicking the
   native checkbox toggles it with no JS. */
.sp-checkbox__box .sp-icon { opacity: 0; transition: opacity var(--sp-dur-2) var(--sp-ease); }
.sp-checkbox input:checked + .sp-checkbox__box .sp-icon { opacity: 1; }
.sp-checkbox input {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
	pointer-events: none;
}
/* Visible focus ring for keyboard users (input is visually hidden). */
.sp-checkbox input:focus-visible + .sp-checkbox__box {
	outline: 2px solid var(--sp-color-burnt-orange);
	outline-offset: 2px;
}

/* --- Chips ------------------------------------------------------------ */
.sp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-chip {
	padding: 8px 16px;
	border-radius: var(--sp-radius-pill);
	border: 1px solid var(--sp-color-card-border);
	background: transparent;
	color: var(--sp-color-muted-brown);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	font-weight: 500;
	cursor: pointer;
	transition: all var(--sp-dur-2) var(--sp-ease);
	white-space: nowrap;
}
.sp-chip:hover { border-color: var(--sp-color-burnt-orange); color: var(--sp-color-burnt-orange); }
.sp-chip.is-active {
	background: var(--sp-color-burnt-orange);
	border-color: var(--sp-color-burnt-orange);
	color: var(--sp-color-cream);
	font-weight: 600;
}
.sp-chip--soft.is-active {
	background: rgba(194,65,12,0.08);
	color: var(--sp-color-burnt-orange);
	border-color: var(--sp-color-burnt-orange);
}
.sp-chip--sm { padding: 6px 12px; font-size: 13px; }

/* Checkbox-backed chip (filter Duration) — the whole chip is the toggle; active
   state is driven purely by :checked, no JS. */
.sp-chip--check { position: relative; display: inline-flex; align-items: center; }
.sp-chip--check input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sp-chip--check:has(input:checked) {
	background: rgba(194, 65, 12, 0.08);
	color: var(--sp-color-burnt-orange);
	border-color: var(--sp-color-burnt-orange);
	font-weight: 600;
}
.sp-chip--check:has(input:focus-visible) { outline: 2px solid var(--sp-color-burnt-orange); outline-offset: 2px; }

/* Filter form: apply button + option counts */
.sp-filter__apply { padding: 20px 0 4px; }
.sp-checkbox__count { color: var(--sp-color-muted-brown); font-size: 0.92em; }

/* --- Filter panel ----------------------------------------------------- */
.sp-filter {
	background: var(--sp-color-off-white);
	border: 1px solid var(--sp-color-card-border);
	border-radius: var(--sp-radius-xl);
	box-shadow: var(--sp-shadow-card);
	padding: 0 20px 20px;
}
.sp-filter__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 20px 0 16px;
	border-bottom: 1px solid var(--sp-color-ivory);
}
.sp-filter__title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sp-font-serif);
	font-size: 20px;
	color: var(--sp-color-brown);
}
.sp-filter__clear {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	color: var(--sp-color-burnt-orange);
	font-weight: 500;
	background: none;
	border: 0;
	cursor: pointer;
}
.sp-filter__section { padding: 20px 0; border-bottom: 1px solid var(--sp-color-ivory); }
.sp-filter__section:last-child { border-bottom: 0; }
.sp-filter__section-title {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	font-weight: 600;
	letter-spacing: var(--sp-tracking-wider);
	text-transform: uppercase;
	color: var(--sp-color-burnt-orange);
	margin-bottom: 12px;
}
.sp-range {
	margin-top: 10px;
	position: relative;
	height: 4px;
	background: var(--sp-color-ivory);
	border-radius: 2px;
}
.sp-range__fill {
	position: absolute; top: 0; bottom: 0;
	background: var(--sp-color-burnt-orange);
	border-radius: 2px;
}
.sp-range__handle {
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 16px; height: 16px;
	border-radius: 50%;
	background: var(--sp-color-off-white);
	border: 2px solid var(--sp-color-burnt-orange);
	cursor: grab;
	touch-action: none;
	z-index: 1;
	box-shadow: 0 1px 4px rgba(92, 46, 10, 0.25);
}
.sp-range__handle:active { cursor: grabbing; }
.sp-range__handle:focus-visible {
	outline: 2px solid var(--sp-color-burnt-orange);
	outline-offset: 3px;
}
/* Larger invisible hit area so the 16px handle is easy to grab on touch. */
.sp-range__handle::before {
	content: "";
	position: absolute;
	inset: -10px;
}
.sp-range__labels {
	display: flex;
	justify-content: space-between;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
	margin-bottom: 0;
	font-variant-numeric: tabular-nums;
}

/* --- Testimonial ------------------------------------------------------ */
.sp-testimonial {
	text-align: center;
	max-width: 900px;
	margin: 0 auto;
}
/* Rotator: one testimonial visible at a time, with a smooth slide+fade between
   them. Figures are stacked (absolute); the active one fades/slides in. The
   rotator's height is animated to the active figure (set by JS) so different
   review lengths transition smoothly. */
.sp-testimonial-rotator {
	position: relative;
	overflow: hidden;
	min-height: 200px;
	transition: height 0.45s var(--sp-ease);
}
.sp-testimonial-rotator .sp-testimonial {
	position: absolute;
	top: 0; left: 0; right: 0;
	opacity: 0;
	transform: translateX(32px);
	transition: opacity 0.5s var(--sp-ease), transform 0.55s var(--sp-ease);
	pointer-events: none;
}
.sp-testimonial-rotator .sp-testimonial.is-active {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
	.sp-testimonial-rotator,
	.sp-testimonial-rotator .sp-testimonial { transition: none; }
}
.sp-testimonial__controls {
	display: flex; align-items: center; justify-content: center; gap: 16px;
	margin-top: 36px;
}
.sp-testimonial__controls .sp-testimonial__dots { margin-top: 0; }
.sp-testimonial__playpause {
	width: 34px; height: 34px; flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid var(--sp-color-card-border);
	background: var(--sp-color-off-white);
	color: var(--sp-color-burnt-orange);
	cursor: pointer;
	transition: background var(--sp-dur-2) var(--sp-ease);
}
.sp-testimonial__playpause:hover { background: var(--sp-color-cream); }
.sp-testimonial__playpause:focus-visible { outline: 2px solid var(--sp-color-burnt-orange); outline-offset: 2px; }
.sp-testimonial__mark {
	font-family: var(--sp-font-serif);
	font-size: 60px;
	color: var(--sp-color-amber);
	line-height: 1;
	margin-bottom: 8px;
}
.sp-testimonial__quote {
	font-family: var(--sp-font-serif);
	font-size: 30px;
	line-height: 1.35;
	color: var(--sp-color-brown);
	font-style: italic;
	margin: 0;
	text-wrap: balance;
}
.sp-testimonial__author {
	margin-top: 24px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-muted-brown);
	letter-spacing: 0.05em;
}
.sp-testimonial__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 40px;
}
.sp-testimonial__dot {
	width: 8px; height: 8px;
	border-radius: 4px;
	background: var(--sp-color-muted-brown);
	opacity: 0.3;
	transition: all var(--sp-dur-2) var(--sp-ease);
}
.sp-testimonial__dot.is-active {
	width: 32px;
	background: var(--sp-color-burnt-orange);
	opacity: 1;
}
@media (max-width: 767px) {
	.sp-testimonial__mark { font-size: 44px; }
	.sp-testimonial__quote { font-size: 20px; line-height: 1.4; }
	.sp-testimonial__dots { margin-top: 28px; }
}

/* --- Newsletter ------------------------------------------------------- */
.sp-newsletter {
	background: var(--sp-color-charcoal);
	color: var(--sp-color-cream);
	border-radius: var(--sp-radius-3xl);
	padding: 56px 64px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.sp-newsletter::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at 80% 20%, rgba(234,88,12,0.35) 0%, transparent 60%),
		radial-gradient(ellipse at 10% 80%, rgba(245,158,11,0.18) 0%, transparent 50%);
	opacity: 0.5;
	pointer-events: none;
}
.sp-newsletter__inner {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
}
.sp-newsletter__title {
	font-family: var(--sp-font-serif);
	font-size: 44px;
	font-weight: 500;
	line-height: 1.1;
	margin: 14px 0 12px;
	color: var(--sp-color-cream);
}
.sp-newsletter__copy {
	font-family: var(--sp-font-sans);
	font-size: 15px;
	line-height: var(--sp-leading-base);
	color: var(--sp-color-text-soft-on-dark);
	max-width: 480px;
	margin: 0 auto 28px;
}
.sp-newsletter__form {
	display: flex;
	gap: 8px;
	background: rgba(254,246,233,0.08);
	border: 1px solid rgba(245,158,11,0.25);
	border-radius: var(--sp-radius-pill);
	padding: 6px;
	max-width: 480px;
	margin: 0 auto;
	align-items: center;
}
.sp-newsletter__form input[type="email"] {
	flex: 1;
	padding: 0 18px;
	min-height: 36px;
	background: transparent;
	border: 0;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	color: var(--sp-color-cream);
}
.sp-newsletter__form input::placeholder { color: var(--sp-color-placeholder-text); }
.sp-newsletter__form input:focus { outline: none; }
@media (max-width: 767px) {
	.sp-newsletter { padding: 48px 24px; border-radius: 0; }
	.sp-newsletter__title { font-size: 30px; }
	.sp-newsletter__copy { font-size: 13.5px; margin-bottom: 20px; }
	.sp-newsletter__form { gap: 6px; padding: 4px; }
}

/* --- Search widget (tabbed) ------------------------------------------ */
.sp-search {
	background: var(--sp-color-off-white);
	border-radius: var(--sp-radius-2xl);
	box-shadow: var(--sp-shadow-card-strong);
	overflow: hidden;
	border: 1px solid var(--sp-color-card-border);
}
.sp-search__tabs {
	display: flex;
	background: var(--sp-color-ivory);
	padding: 6px 6px 0;
	gap: 0;
}
.sp-search__tab {
	padding: 14px 28px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	font-weight: 500;
	color: var(--sp-color-muted-brown);
	background: transparent;
	border: 0;
	border-radius: 12px 12px 0 0;
	cursor: pointer;
}
.sp-search__tab.is-active {
	background: var(--sp-color-off-white);
	color: var(--sp-color-brown);
}
.sp-search__panel {
	padding: 14px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}
.sp-search__panel[hidden] { display: none; }
.sp-search__panel .sp-field { flex: 1 1 150px; min-width: 0; }
.sp-search__panel .sp-btn { flex: 0 0 auto; align-self: flex-end; }
/* No-tabs mode (dedicated pages, e.g. Car Rental): panel sits directly in the
   card with no tab bar above it. */
.sp-search--no-tabs .sp-search__panel { padding-top: 16px; }
.sp-search--compact .sp-search__panel { flex-direction: column; align-items: stretch; }
.sp-search--compact .sp-search__panel .sp-field { flex: 1 1 auto; }
.sp-search .sp-btn--lg { min-height: 48px; height: auto; }
@media (max-width: 1023px) {
	.sp-search__panel .sp-field { flex: 1 1 45%; }
	.sp-search__panel .sp-btn { flex: 1 1 100%; }
}
@media (max-width: 767px) {
	.sp-search__panel { flex-direction: column; align-items: stretch; }
	.sp-search__panel .sp-field { flex: 1 1 auto; }
	.sp-search__tab { padding: 12px 18px; font-size: var(--sp-text-sm); }
}

/* --- Page hero -------------------------------------------------------- */
.sp-page-hero {
	position: relative;
	overflow: hidden;
	height: var(--sp-page-hero-h, 340px);
}
@media (max-width: 767px) {
	.sp-page-hero {
		/* Cap mobile hero so it doesn't dominate the viewport. */
		height: min(var(--sp-page-hero-h, 340px), 300px);
	}
}

/* Hero variant that embeds a search widget (e.g. Car Rental). Height must grow
   with the content (a fixed height clips the title), so it uses min-height and
   normal vertical padding instead of the bottom-anchored fixed-height layout.
   The absolutely-positioned media (inset:0) still fills whatever height. */
.sp-page-hero--search {
	height: auto;
}
.sp-page-hero--search .sp-page-hero__inner {
	height: auto;
	justify-content: center;
	padding-top: 48px;
	padding-bottom: 48px;
	min-height: 460px;
}
.sp-page-hero--search .sp-page-hero__search {
	width: 100%;
	max-width: 1080px;
	margin-top: 28px;
}
@media (max-width: 767px) {
	.sp-page-hero--search { height: auto; }
	.sp-page-hero--search .sp-page-hero__inner {
		min-height: 0;
		padding-top: 32px;
		padding-bottom: 32px;
	}
	.sp-page-hero--search .sp-page-hero__search { margin-top: 20px; }
}
.sp-page-hero__media,
.sp-page-hero__media .sp-placeholder {
	position: absolute;
	inset: 0;
	height: 100%;
}
.sp-page-hero__media .sp-placeholder { aspect-ratio: auto; }
.sp-page-hero__overlay {
	position: absolute;
	inset: 0;
	background: var(--sp-gradient-page-hero);
	pointer-events: none;
}
.sp-page-hero__inner {
	position: relative;
	max-width: var(--sp-container-max);
	margin: 0 auto;
	padding: 0 var(--sp-page-gutter);
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding-bottom: 56px;
	color: var(--sp-color-cream);
}
.sp-page-hero__eyebrow {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-xs);
	color: var(--sp-color-amber);
	letter-spacing: var(--sp-tracking-widest);
	text-transform: uppercase;
	font-weight: 500;
	margin-bottom: 14px;
}
.sp-page-hero__title {
	font-family: var(--sp-font-serif);
	font-weight: 500;
	font-size: 64px;
	line-height: var(--sp-leading-tight);
	letter-spacing: var(--sp-tracking-tight);
	margin: 0;
	color: var(--sp-color-cream);
	max-width: 820px;
}
.sp-page-hero__subtitle {
	font-family: var(--sp-font-sans);
	font-size: 17px;
	line-height: var(--sp-leading-base);
	color: var(--sp-color-text-cream-on-dark);
	margin: 18px 0 0;
	max-width: 620px;
}
@media (max-width: 767px) {
	.sp-page-hero__inner { padding: 0 var(--sp-page-gutter-mobile); padding-bottom: 24px; }
	.sp-page-hero__title { font-size: 32px; }
	.sp-page-hero__subtitle { font-size: 14.5px; }
}

/* --- Breadcrumbs ------------------------------------------------------ */
.sp-breadcrumbs ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-muted-brown);
}
.sp-breadcrumbs li + li::before {
	content: "/";
	margin-right: 6px;
	color: var(--sp-color-muted-brown);
}
.sp-breadcrumbs a { color: var(--sp-color-muted-brown); }
.sp-breadcrumbs a:hover { color: var(--sp-color-brown); }
.sp-breadcrumbs [aria-current="page"] { color: var(--sp-color-brown); }

/* --- "Why us" feature blocks ----------------------------------------- */
.sp-feature-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 32px;
}
.sp-feature {
	text-align: center;
}
.sp-feature__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	margin: 0 auto 20px;
	background: var(--sp-gradient-sunset);
	color: var(--sp-color-cream);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px -8px rgba(234,88,12,0.4);
}
.sp-feature__title {
	font-family: var(--sp-font-serif);
	font-size: 20px;
	color: var(--sp-color-brown);
	margin: 0 0 10px;
	font-weight: 500;
}
.sp-feature__copy {
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	line-height: var(--sp-leading-base);
	color: var(--sp-color-muted-brown);
	margin: 0;
}
@media (max-width: 1023px) {
	.sp-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}
@media (max-width: 767px) {
	.sp-feature-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
	.sp-feature__icon { width: 56px; height: 56px; margin-bottom: 12px; }
	.sp-feature__title { font-size: 16px; margin-bottom: 4px; }
	.sp-feature__copy  { font-size: 12.5px; line-height: 1.5; }
}

/* --- Trust strip ------------------------------------------------------ */
.sp-trust-strip {
	background: var(--sp-color-off-white);
	border-bottom: 1px solid var(--sp-color-ivory);
	padding: 24px var(--sp-page-gutter);
}
.sp-trust-strip__inner {
	max-width: var(--sp-container-max);
	margin: 0 auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
	flex-wrap: wrap;
	gap: 32px;
}
.sp-trust-strip__item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-size: var(--sp-text-base);
	color: var(--sp-color-brown);
	font-weight: 500;
}
.sp-trust-strip__item .sp-icon { color: var(--sp-color-burnt-orange); }
@media (max-width: 767px) {
	.sp-trust-strip { padding: 18px 20px; }
	.sp-trust-strip__inner { gap: 14px; justify-content: flex-start; }
	.sp-trust-strip__item { font-size: 13px; }
}

/* --- Welcome strip --------------------------------------------------- */
.sp-welcome-strip {
	background: var(--sp-color-ivory);
	padding: 40px var(--sp-page-gutter);
	border-top: 1px solid var(--sp-color-card-border);
	border-bottom: 1px solid var(--sp-color-card-border);
}
.sp-welcome-strip__inner {
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
}
.sp-welcome-strip__quote {
	font-family: var(--sp-font-serif);
	font-size: 20px;
	line-height: var(--sp-leading-base);
	color: var(--sp-color-brown);
	font-style: italic;
	margin: 0;
	text-wrap: balance;
}
.sp-welcome-strip__taglines {
	margin-top: 20px;
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-sm);
	color: var(--sp-color-burnt-orange);
	letter-spacing: var(--sp-tracking-widest);
	text-transform: uppercase;
	font-weight: 500;
}
@media (max-width: 767px) {
	.sp-welcome-strip { padding: 40px 20px; }
	.sp-welcome-strip__quote { font-size: 17px; line-height: 1.55; }
	.sp-welcome-strip__taglines { margin-top: 16px; font-size: 11px; letter-spacing: 0.18em; }
}

/* --- Inline social pill row ----------------------------------------- */
.sp-social {
	display: flex;
	gap: 10px;
}
.sp-social__pill {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--sp-color-ivory);
	color: var(--sp-color-brown);
	transition: background var(--sp-dur-2) var(--sp-ease);
}
.sp-social__pill:hover { background: var(--sp-color-burnt-orange); color: var(--sp-color-cream); }
.sp-social--dark .sp-social__pill {
	width: 36px; height: 36px;
	background: rgba(245,158,11,0.12);
	color: var(--sp-color-amber);
}
.sp-social--dark .sp-social__pill:hover { background: var(--sp-color-amber); color: var(--sp-color-brown); }

/* --- Pagination ------------------------------------------------------ */
.sp-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}
.sp-pagination__item {
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border-radius: var(--sp-radius-sm);
	border: 1px solid var(--sp-color-card-border);
	background: var(--sp-color-off-white);
	color: var(--sp-color-brown);
	font-family: var(--sp-font-sans);
	font-size: var(--sp-text-base);
	font-weight: 500;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	text-decoration: none;
	transition: all var(--sp-dur-2) var(--sp-ease);
}
.sp-pagination__item.is-active,
.sp-pagination__item[aria-current="page"] {
	background: var(--sp-color-burnt-orange);
	border-color: var(--sp-color-burnt-orange);
	color: var(--sp-color-cream);
}
.sp-pagination__item:hover { border-color: var(--sp-color-burnt-orange); color: var(--sp-color-burnt-orange); }
.sp-pagination__item.is-active:hover { color: var(--sp-color-cream); }