/* ==========================================================================
   Camp filter bar — [stl_camp_filters]
   Styled to sit inside the existing "Find Your Camp" design. Tweak freely.
   ========================================================================== */

.stl-camp-filters,
.stl-prop-filters {
	--stl-blue: #12457a;
	--stl-red: #d0021b;
	--stl-border: #c9d3df;
	margin: 0 0 32px;
}

/* Properties filter label ("FILTER PROPERTIES") — gray uppercase per Figma,
   not the red camp note. */
.stl-prop-filters .stl-camp-filters__note {
	color: #5a6b7b;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 13px;
	font-weight: 700;
}

.stl-camp-filters__note {
	color: var(--stl-red);
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 10px;
}

.stl-camp-filters__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
}

.stl-filter {
	position: relative;
	flex: 1 1 180px;
	min-width: 160px;
	margin: 0;
}

.stl-filter__select {
	width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2312457a' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1px solid var(--stl-border);
	border-radius: 8px;
	color: #23303d;
	font-size: 15px;
	line-height: 1.2;
	padding: 12px 38px 12px 14px;
	cursor: pointer;
}

.stl-filter__select:focus {
	outline: none;
	border-color: var(--stl-blue);
	box-shadow: 0 0 0 2px rgba(18, 69, 122, 0.15);
}

.stl-camp-filters__apply {
	flex: 0 0 auto;
	background-color: var(--stl-blue);
	color: #fff;
	border: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	padding: 13px 26px;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.stl-camp-filters__apply:hover {
	background-color: #0d3560;
}

.stl-camp-filters__reset {
	flex: 0 0 auto;
	color: var(--stl-blue);
	font-size: 14px;
	font-weight: 600;
	text-decoration: underline;
	padding: 8px 4px;
}

/* Empty-results state rendered by the Loop Grid's "Nothing found" message
   inherits Elementor styles; nudge spacing so it isn't cramped. */
.elementor-widget-loop-grid .elementor-loop-container:empty::after {
	content: "No camps match those filters. Try removing one.";
	display: block;
	color: #5a6b7b;
	font-size: 16px;
	padding: 24px 0;
}

/* Preloader — shown over the cards section while AJAX-filtering */
.stl-camp-grid,
.stl-prop-grid,
.stl-event-grid {
	position: relative;
	min-height: 120px;
	transition: opacity 0.15s ease;
}

.stl-camp-grid.stl-loading,
.stl-prop-grid.stl-loading,
.stl-event-grid.stl-loading {
	opacity: 0.5;
	pointer-events: none;
}

.stl-camp-grid.stl-loading::after,
.stl-prop-grid.stl-loading::after,
.stl-event-grid.stl-loading::after {
	content: "";
	position: absolute;
	top: 60px;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-left: -22px;
	border: 4px solid #c9d3df;
	border-top-color: #12457a;
	border-radius: 50%;
	animation: stl-spin 0.8s linear infinite;
	z-index: 5;
}

@keyframes stl-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Per-camp taxonomy chips inside the Loop Item card ([stl_camp_chips]) */
.stl-camp-chips {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.stl-camp-chips__item {
	display: inline-block;
	background: #f1f4f8;
	color: #707070;
	border: 1px solid #e2e8f0;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	padding: 5px 8px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	.stl-filter,
	.stl-multi {
		flex: 1 1 100%;
	}
	.stl-camp-filters__apply,
	.stl-camp-filters__reset {
		flex: 1 1 auto;
		text-align: center;
	}
}

/* ==========================================================================
   Properties listing — rows, amenity pills, contact list, best-for, filters
   ========================================================================== */

/* Row divider between property cards in the Loop Grid */
.stl-prop-grid .elementor-loop-container > .e-loop-item {
	padding: 22px 0;
	border-bottom: 1px solid #e2e8f0;
}
.stl-prop-grid .elementor-loop-container > .e-loop-item:last-child {
	border-bottom: 0;
}

/* Amenity pills (replaces the original icon-list custom CSS) */
.stl-prop-amenities {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}
.stl-prop-amenities li {
	margin: 0;
}
.stl-prop-amenities span {
	display: inline-block;
	border: 1px solid #9a9a9a;
	color: #707070;
	font-size: 12px;
	padding: 2px 5px;
	border-radius: 5px;
	white-space: nowrap;
}

/* Address + phone contact list */
.stl-prop-contact {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
}
.stl-prop-contact li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: #535353;
	font-size: 14px;
	line-height: 1.6;
	margin: 0 0 2px;
}
.stl-prop-contact li i {
	color: #12457a;
	margin-top: 4px;
	width: 15px;
	text-align: center;
}
.stl-prop-contact a {
	color: #535353;
	text-decoration: none;
}
.stl-prop-contact a:hover {
	text-decoration: underline;
}

/* BEST FOR block */
.prop-bestfor-label {
	color: #d92334;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.5px;
	margin-bottom: 2px;
}
.prop-bestfor-text {
	color: #00338d;
	font-size: 0.95rem;
	font-weight: 600;
	max-width: 200px;
}

/* Amenities multi-select (checkbox dropdown) */
.stl-multi {
	position: relative;
	flex: 1 1 180px;
	min-width: 160px;
}
.stl-multi__summary {
	list-style: none;
	display: block;
	cursor: pointer;
}
.stl-multi__summary::-webkit-details-marker {
	display: none;
}
.stl-multi__panel {
	position: absolute;
	z-index: 20;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid var(--stl-border);
	border-radius: 8px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
	padding: 8px;
	max-height: 260px;
	overflow-y: auto;
}
.stl-multi__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	font-size: 14px;
	color: #23303d;
	border-radius: 6px;
	cursor: pointer;
}
.stl-multi__item:hover {
	background: #f1f4f8;
}

/* ==========================================================================
   Events feed — time/location meta + category tags (Loop Item shortcodes)
   ========================================================================== */
.stl-event-meta {
	list-style: none;
	margin: 6px 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
}
.stl-event-meta li {
	display: flex;
	align-items: center;
	gap: 6px;
	color: #535353;
	font-size: 14px;
	line-height: 1.4;
}
.stl-event-meta li i {
	color: #12457a;
	font-size: 14px;
}
.stl-event-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 8px;
}
.stl-event-tag {
	display: inline-block;
	border: 1px solid #514d4d;
	color: #535353;
	border-radius: 10px;
	padding: 5px 14px;
	font-size: 14px;
	font-weight: 500;
}

/* ==========================================================================
   Camp cards — equal height + bottom-aligned "VIEW DETAILS" buttons
   (so the buttons line up horizontally across each row)
   ========================================================================== */
.stl-camp-grid .elementor-loop-container {
	align-items: stretch;
}
.stl-camp-grid .e-loop-item {
	display: flex;
}
.stl-camp-grid .e-loop-item > .e-con,
.stl-camp-grid .e-loop-item > .elementor-element {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	height: 100%;
	width: 100%;
}
/* push the button widget to the bottom of the card */
.stl-camp-grid .e-loop-item .elementor-widget-button {
	margin-top: auto;
}

/* ==========================================================================
   Financial Assistance — Gravity Form (#gform_wrapper_1) styled to Figma.
   Scoped to this form only (GF can't be fully styled via Elementor controls).
   ========================================================================== */
#gform_wrapper_1 .gfield_label {
	font-size: 13px;
	font-weight: 600;
	color: #3a4a5a;
	margin-bottom: 5px;
}
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 input[type="tel"],
#gform_wrapper_1 input[type="number"],
#gform_wrapper_1 select,
#gform_wrapper_1 textarea {
	width: 100%;
	background: #f4f6f9;
	border: 1px solid #d9e0e8;
	border-radius: 8px;
	padding: 12px 14px;
	font-size: 14px;
	color: #23303d;
	line-height: 1.3;
}
#gform_wrapper_1 input:focus,
#gform_wrapper_1 select:focus,
#gform_wrapper_1 textarea:focus {
	outline: none;
	border-color: #12457a;
	box-shadow: 0 0 0 2px rgba(18, 69, 122, 0.12);
}
#gform_wrapper_1 textarea {
	min-height: 120px;
	resize: vertical;
}
#gform_wrapper_1 .gform_footer {
	margin-top: 10px;
	padding: 0;
}
#gform_wrapper_1 .gform_button {
	width: 100%;
	background: #003d89;
	color: #fff;
	border: 0;
	border-radius: 8px;
	padding: 15px 20px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.15s ease;
}
#gform_wrapper_1 .gform_button:hover {
	background: #0d3560;
}


/* ==========================================================================
   Properties filter — two compact, LEFT-ALIGNED dropdowns (not stretched),
   Apply Filters pushed to the right (matches the Figma layout).
   ========================================================================== */
.stl-prop-filters .stl-camp-filters__row {
	justify-content: flex-start;
	flex-wrap: wrap;
}
.stl-prop-filters .stl-filter,
.stl-prop-filters .stl-multi {
	flex: 0 0 240px;
	min-width: 200px;
	max-width: 260px;
}
.stl-prop-filters .stl-camp-filters__apply {
	margin-left: auto;
}
@media (max-width: 767px) {
	.stl-prop-filters .stl-filter,
	.stl-prop-filters .stl-multi {
		flex: 1 1 100%;
		max-width: none;
	}
	.stl-prop-filters .stl-camp-filters__apply {
		margin-left: 0;
		flex: 1 1 auto;
	}
}

/* ==========================================================================
   Property card typography — matched to Figma
   Headings=Montserrat (global), body/pills/badge=Open Sans (global).
   These override the specific weights/sizes/colors per the Figma inspect.
   ========================================================================== */
/* Address + phone: Montserrat Medium 500, 14px, #535353, +5% tracking */
.stl-prop-contact,
.stl-prop-contact a {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	font-size: 14px;
	color: #535353;
	letter-spacing: 0.03em;
}
/* BEST FOR label = Montserrat 500 red; value = Montserrat 500 blue */
.prop-bestfor-label {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	color: #CB0A21;
	letter-spacing: 0.05em;
}
.prop-bestfor-text {
	font-family: "Montserrat", sans-serif;
	font-weight: 500;
	color: #003D89;
	letter-spacing: 0.05em;
}
/* Amenity pills: Open Sans 400, 12px, #707070, light border */
.stl-prop-amenities span {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: #707070;
	border-color: #d7d7d7;
}
/* "Camp" badge pill: Open Sans 400, 12px */
.prop-badge,
.prop-badge * {
	font-family: "Open Sans", sans-serif;
	font-weight: 400;
	font-size: 12px;
}
/* VIEW PROPERTY button: Montserrat SemiBold 600, uppercase */
.stl-prop-grid .elementor-button,
.prop-btn-widget .elementor-button {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0;
}

/* ==========================================================================
   Property contact icons (inline SVG) + "Camp" badge pill (Figma)
   ========================================================================== */
.stl-prop-contact li {
	align-items: center;
}
.stl-prop-contact li .stl-prop-ico {
	color: #003D89;      /* brand blue, matches Figma pin/phone */
	flex: 0 0 auto;
	margin-top: 0;
}
/* "Camp" type badge: #747474 bg, 5px radius, ~29px tall, white Open Sans 12px */
.prop-badge {
	display: inline-block;
	background: transparent !important;
	padding: 0 !important;
}
.prop-badge span {
	display: inline-block;
	background-color: #747474;
	color: #fff;
	border-radius: 5px;
	padding: 6px 14px;
	font: 400 12px/1.35 "Open Sans", sans-serif;
}

/* BEST FOR value — Montserrat Medium 500, 20px, blue, right-aligned, +5% tracking */
.prop-bestfor-text {
	font-size: 20px;
	line-height: 1.15;
	text-align: right;
	letter-spacing: 0.05em;
}
.prop-bestfor-label {
	text-align: right;
	font-size: 15px;
}


/* Best-for block: flush right, matching the button (remove the 200px centering) */
.prop-side,
.prop-bestfor-label,
.prop-bestfor-text {
	text-align: right;
}
.prop-bestfor-text {
	max-width: none;
	margin-left: auto;
}

/* Black Pug calendar embed */
.stl-calendar-embed { width: 100%; }
.stl-calendar-embed iframe { display: block; width: 100%; border: 0; }

/* ==========================================================================
   Visitor Resources — collapsible Maps & Policies boxes (global navy #003D89)
   ========================================================================== */
.stl-res__box {
	border: 1px solid #c5d4ea;
	border-radius: 10px;
	background: #fff;
	margin-bottom: 16px;
	overflow: hidden;
}
.stl-res__head {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	cursor: pointer;
	list-style: none;
}
.stl-res__head::-webkit-details-marker { display: none; }
.stl-res__icon { color: #003D89; flex: 0 0 auto; display: flex; }
.stl-res__titles { display: flex; flex-direction: column; flex: 1 1 auto; }
.stl-res__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #003D89;
	line-height: 1.3;
}
.stl-res__preview {
	font-family: "Open Sans", sans-serif;
	font-size: 12.5px;
	color: #707070;
	margin-top: 2px;
}
.stl-res__chev { color: #003D89; flex: 0 0 auto; transition: transform 0.2s ease; }
.stl-res__box[open] .stl-res__chev { transform: rotate(180deg); }
.stl-res__list {
	list-style: none;
	margin: 0;
	padding: 4px 20px 18px 60px;
}
.stl-res__list li { margin: 0 0 8px; }
.stl-res__list a {
	font-family: "Open Sans", sans-serif;
	font-size: 14px;
	color: #003D89;
	text-decoration: none;
}
.stl-res__list a:hover { text-decoration: underline; }

/* Beaumont CONTACT INFORMATION block (global navy) */
.stl-ct__row { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; padding: 6px 0; }
.stl-ct__name { font-family: "Montserrat", sans-serif; font-weight: 700; color: #003D89; font-size: 15px; }
.stl-ct__role { font-weight: 700; color: #003D89; }
.stl-ct__desc { font-family: "Open Sans", sans-serif; font-size: 12.5px; color: #707070; margin: 2px 0 4px; }
.stl-ct__email { display: inline-flex; align-items: center; gap: 7px; font-family: "Open Sans", sans-serif; font-size: 13px; color: #003D89; text-decoration: none; margin-top: 2px; }
.stl-ct__email:hover { text-decoration: underline; }
.stl-ct__phones { display: flex; flex-direction: column; gap: 6px; text-align: right; white-space: nowrap; }
.stl-ct__phone { display: inline-flex; align-items: center; gap: 7px; font-family: "Open Sans", sans-serif; font-size: 15px; color: #535353; text-decoration: none; }
.stl-ct__ico { color: #003D89; flex: 0 0 auto; }
.stl-ct__hr { border: 0; border-top: 1px solid #dfe5ee; margin: 12px 0; }
@media (max-width:767px){ .stl-ct__row{ flex-direction:column; gap:6px; } .stl-ct__phones{ text-align:left; align-items:flex-start; } }

/* Beaumont Photo Gallery carousel — clean inset circular nav arrows */
.elementor-element-5e224ee .elementor-swiper-button{
	width:44px;height:44px;border-radius:50%;
	background:#ffffff;color:#003D89;
	display:flex;align-items:center;justify-content:center;
	box-shadow:0 2px 12px rgba(0,0,0,.20);
	top:50%;transform:translateY(-50%);z-index:5;
	transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.elementor-element-5e224ee .elementor-swiper-button:hover{background:#003D89;color:#ffffff;box-shadow:0 4px 16px rgba(0,0,0,.28);}
.elementor-element-5e224ee .elementor-swiper-button-prev{left:14px;right:auto;}
.elementor-element-5e224ee .elementor-swiper-button-next{right:14px;left:auto;}
.elementor-element-5e224ee .elementor-swiper-button svg,
.elementor-element-5e224ee .elementor-swiper-button i{font-size:16px;width:16px;height:16px;}
.elementor-element-5e224ee .swiper-button-disabled{opacity:.35;}
@media (max-width:767px){ .elementor-element-5e224ee .elementor-swiper-button{width:38px;height:38px;} }

/* Apply Filters button — arrow icon (properties) */
.stl-apply--icon{ display:inline-flex; align-items:center; gap:9px; }
.stl-apply--icon .stl-apply-ico{ flex:0 0 auto; width:1em; height:1em; fill:currentColor; transition:transform .2s ease; }
.stl-apply--icon:hover .stl-apply-ico{ transform:translateX(3px); }