/* Design B "Hloubka" — dark night-water theme over Bootstrap 5.3 (html[data-bs-theme=dark]).
   Loaded render-blocking after Bootstrap, so equal-specificity rules here win. */

:root,
[data-bs-theme=dark] {
	--hl-ground: #04141D;
	--hl-deep: #020B10;
	--hl-surface: #0A2633;
	--hl-line: #12394A;
	--hl-line-strong: #1E4D5E;
	--hl-text: #E4F3F4;
	--hl-text-soft: #B5D3D6;
	--hl-muted: #9FC0C4;
	--hl-faint: #6F9095;
	--hl-accent: #3FD6CC;
	--hl-link: #6FE3DC;
	--hl-link-hover: #A8F0EC;
	--hl-warn: #F2B66B;
	--hl-display: 'Bricolage Grotesque', Manrope, system-ui, sans-serif;

	--bs-body-bg: var(--hl-ground);
	--bs-body-bg-rgb: 4, 20, 29;
	--bs-body-color: var(--hl-text);
	--bs-body-color-rgb: 228, 243, 244;
	--bs-body-font-family: Manrope, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--bs-emphasis-color: #FFFFFF;
	--bs-secondary-color: var(--hl-muted);
	--bs-secondary-bg: var(--hl-surface);
	--bs-tertiary-bg: var(--hl-surface);
	--bs-tertiary-bg-rgb: 10, 38, 51;
	--bs-heading-color: #FFFFFF;
	--bs-border-color: var(--hl-line);
	--bs-border-color-translucent: rgba(228, 243, 244, .14);
	--bs-link-color: var(--hl-link);
	--bs-link-color-rgb: 111, 227, 220;
	--bs-link-hover-color: var(--hl-link-hover);
	--bs-link-hover-color-rgb: 168, 240, 236;
	--bs-primary: var(--hl-accent);
	--bs-primary-rgb: 63, 214, 204;
	--bs-success: var(--hl-accent);
	--bs-success-rgb: 63, 214, 204;
	--bs-primary-text-emphasis: var(--hl-link);
	--bs-success-text-emphasis: var(--hl-link);
	--bs-primary-bg-subtle: #0B3440;
	--bs-success-bg-subtle: #0B3440;
	--bs-primary-border-subtle: var(--hl-line-strong);
	--bs-success-border-subtle: var(--hl-line-strong);
	--bs-warning-text-emphasis: var(--hl-warn);
	--bs-warning-bg-subtle: #2A2414;
	--bs-warning-border-subtle: #5A4A26;
	--bs-border-radius: .875rem;
	--bs-border-radius-sm: .625rem;
	--bs-border-radius-lg: 1.125rem;
	--bs-focus-ring-color: rgba(63, 214, 204, .35);
	color-scheme: dark;
}

body {
	background: var(--hl-ground);
	color: var(--hl-text);
	font-family: var(--bs-body-font-family);
}

a { color: var(--hl-link) }
a:hover { color: var(--hl-link-hover) }

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.display-4, .display-5 {
	font-family: var(--hl-display);
	color: #FFFFFF;
	letter-spacing: -.02em;
}

h1, .h1, .display-4, .display-5 { font-weight: 800; letter-spacing: -.03em }
h2, .h2, h3, .h3 { font-weight: 700 }

.lead { color: var(--hl-text-soft); font-weight: 400 }
.text-muted, .text-body-secondary { color: var(--hl-muted) !important }
.text-success, .text-primary { color: var(--hl-accent) !important }
.text-body { color: var(--hl-text) !important }
.bg-light { background-color: var(--hl-surface) !important; color: var(--hl-text) }
.border, .border-top, .border-bottom { border-color: var(--hl-line) !important }
hr { border-color: var(--hl-line); opacity: 1 }

/* Depth marker — the small uppercase label above each section heading. */
.hl-depth {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--hl-accent);
}

.hl-section { padding: 1.75rem 0 }
.hl-section-head { display: flex; flex-direction: column; gap: .25rem; margin-bottom: 1rem }
.hl-section-head h2 { margin: 0; font-size: 1.75rem }

/* ---- Buttons ---- */
.btn {
	--bs-btn-font-weight: 700;
	--bs-btn-border-radius: .875rem;
	--bs-btn-border-radius-sm: .625rem;
	--bs-btn-border-radius-lg: .875rem;
	font-family: Manrope, system-ui, sans-serif;
}

.btn-primary,
.btn-success {
	--bs-btn-color: var(--hl-ground);
	--bs-btn-bg: var(--hl-accent);
	--bs-btn-border-color: var(--hl-accent);
	--bs-btn-hover-color: var(--hl-ground);
	--bs-btn-hover-bg: #6FE3DC;
	--bs-btn-hover-border-color: #6FE3DC;
	--bs-btn-active-color: var(--hl-ground);
	--bs-btn-active-bg: #A8F0EC;
	--bs-btn-active-border-color: #A8F0EC;
	--bs-btn-disabled-color: var(--hl-ground);
	--bs-btn-disabled-bg: var(--hl-accent);
	--bs-btn-disabled-border-color: var(--hl-accent);
	--bs-btn-focus-shadow-rgb: 63, 214, 204;
}

.btn-outline-primary,
.btn-outline-success,
.btn-outline-secondary,
.btn-outline-danger,
.btn-outline-light {
	--bs-btn-color: #FFFFFF;
	--bs-btn-bg: transparent;
	--bs-btn-border-color: rgba(228, 243, 244, .3);
	--bs-btn-hover-color: #FFFFFF;
	--bs-btn-hover-bg: var(--hl-surface);
	--bs-btn-hover-border-color: var(--hl-accent);
	--bs-btn-active-color: var(--hl-ground);
	--bs-btn-active-bg: var(--hl-accent);
	--bs-btn-active-border-color: var(--hl-accent);
	--bs-btn-focus-shadow-rgb: 63, 214, 204;
}

.btn-lg { min-height: 50px; padding-top: .7rem; padding-bottom: .7rem; font-size: 1rem }

/* Pill chips (cities, region jumps, filters) */
.hl-chips { display: flex; flex-wrap: wrap; gap: .5rem }
.hl-chip,
.btn.hl-chip {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 .875rem;
	margin: 0;
	border-radius: 999px;
	border: 1px solid var(--hl-line-strong);
	background: transparent;
	color: var(--hl-text);
	font-weight: 600;
	font-size: .875rem;
	text-decoration: none;
}
.hl-chip:hover { border-color: var(--hl-accent); color: #FFFFFF; background: var(--hl-surface) }

/* ---- Badges ---- */
.badge {
	font-family: Manrope, system-ui, sans-serif;
	font-weight: 600;
	border-radius: 999px;
}

.pool-badges .badge,
.hl-pills .badge,
.badge.bg-primary, .badge.bg-success, .badge.bg-info,
.badge.bg-warning, .badge.bg-danger,
.badge-indoor, .badge-outdoor, .badge-natural,
.badge-sauna, .badge-hottub, .badge-toboggan {
	background: transparent !important;
	color: var(--hl-text) !important;
	border: 1px solid var(--hl-line-strong);
	padding: .3rem .7rem;
	font-size: .8125rem;
}

.badge.bg-secondary { background: var(--hl-surface) !important; color: var(--hl-text-soft) !important; border: 1px solid var(--hl-line) }
.badge.bg-warning.text-dark { color: var(--hl-warn) !important; border-color: #5A4A26 }
.badge.bg-dark { background: var(--hl-deep) !important; border: 1px solid var(--hl-line) }

/* ---- Header ---- */
.hl-header {
	position: relative;
	z-index: 1030;
	background: var(--hl-ground);
	border-bottom: 1px solid var(--hl-line);
}

.hl-header .navbar { padding: .75rem 0 }

.hl-logo {
	font-family: var(--hl-display);
	font-weight: 800;
	font-size: 1.375rem;
	letter-spacing: -.5px;
	color: #FFFFFF !important;
	text-decoration: none;
}
.hl-logo span { color: var(--hl-accent) }

.hl-menu-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(228, 243, 244, .25);
	background: rgba(4, 20, 29, .4);
	color: #FFFFFF;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.hl-menu-btn:focus { box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color) }

.hl-header .nav-link {
	color: var(--hl-text) !important;
	font-weight: 600;
	font-size: .9375rem;
}
.hl-header .nav-link:hover,
.hl-header .nav-link:focus { color: var(--hl-accent) !important }

@media (max-width: 991.98px) {
	.hl-header .navbar-nav { padding: .75rem 0 .5rem }
	.hl-header .nav-link { min-height: 48px; display: flex; align-items: center; border-bottom: 1px solid var(--hl-line) }
}

.dropdown-menu {
	--bs-dropdown-bg: var(--hl-surface);
	--bs-dropdown-border-color: var(--hl-line);
	--bs-dropdown-link-color: var(--hl-text);
	--bs-dropdown-link-hover-color: #FFFFFF;
	--bs-dropdown-link-hover-bg: #0E3342;
	--bs-dropdown-link-active-bg: var(--hl-accent);
	--bs-dropdown-link-active-color: var(--hl-ground);
	--bs-dropdown-divider-bg: var(--hl-line);
	--bs-dropdown-border-radius: 1rem;
	z-index: 1031;
}

/* ---- Footer ---- */
.hl-footer {
	margin-top: 4rem;
	padding: 1.75rem 0 2rem;
	background: var(--hl-deep);
	color: var(--hl-muted);
	font-size: .9375rem;
}
.hl-footer .hl-footer-brand {
	display: block;
	margin: .75rem 0 .5rem;
	font-family: var(--hl-display);
	font-weight: 800;
	font-size: 1.375rem;
	color: #FFFFFF;
}
.hl-footer p { margin: 0 0 .75rem }
.hl-footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .875rem; margin: .5rem 0 1rem }
.hl-footer-links a { color: var(--hl-muted) }
.hl-footer-links a:hover { color: #FFFFFF }
.hl-footer small { color: var(--hl-faint); font-size: .8125rem }

/* ---- Homepage hero (caustic light on water) ---- */
.hl-hero {
	position: relative;
	overflow: hidden;
	padding: 2.5rem 0 4rem;
	background-color: #06303F;
	background-image:
		radial-gradient(ellipse 60px 30px at 20% 30%, rgba(120, 230, 225, .18), transparent 70%),
		radial-gradient(ellipse 90px 40px at 70% 20%, rgba(120, 230, 225, .14), transparent 70%),
		radial-gradient(ellipse 70px 35px at 50% 70%, rgba(120, 230, 225, .16), transparent 70%),
		radial-gradient(ellipse 50px 25px at 85% 80%, rgba(120, 230, 225, .12), transparent 70%),
		radial-gradient(ellipse 120px 50px at 35% 85%, rgba(120, 230, 225, .10), transparent 70%),
		radial-gradient(ellipse 80px 36px at 92% 45%, rgba(120, 230, 225, .12), transparent 70%);
}

.hl-hero-wave {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 40px;
	display: block;
}

.hl-hero h1 {
	margin: .75rem 0 1rem;
	font-size: clamp(2.5rem, 6vw, 3.75rem);
	line-height: 1;
	letter-spacing: -1.5px;
	text-wrap: balance;
}

.hl-hero-text { font-size: 1.0625rem; line-height: 1.5; color: var(--hl-text-soft); max-width: 34rem }

.hl-hero-panel {
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: .875rem;
	border-radius: 20px;
	background: rgba(228, 243, 244, .08);
	border: 1px solid rgba(228, 243, 244, .16);
	max-width: 34rem;
}

.hl-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem }
.hl-hero-actions .btn { display: flex; align-items: center; justify-content: center; gap: .5rem }

.hl-hero-lanes {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	min-height: 52px;
	padding: .5rem 1rem;
	border-radius: 14px;
	background: var(--hl-ground);
	border: 1px solid var(--hl-line);
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: none;
}
.hl-hero-lanes:hover { color: #FFFFFF; border-color: var(--hl-accent) }

.hl-hero .map-container {
	height: 400px;
	border-radius: 22px;
	border: 1px solid var(--hl-line-strong);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
	background: var(--hl-surface) !important;
}

@media (max-width: 991.98px) {
	.hl-hero .map-container { height: 320px; margin-top: 1.75rem }
}

/* Region list rows */
.hl-rows { display: flex; flex-direction: column; border-top: 1px solid var(--hl-line) }
.hl-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	min-height: 52px;
	border-bottom: 1px solid var(--hl-line);
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 600;
	font-size: 1.0625rem;
}
.hl-row span { color: var(--hl-muted); font-weight: 500; font-size: .875rem; text-align: right }
.hl-row:hover { color: var(--hl-accent) }

@media (min-width: 768px) {
	.hl-rows--2col { display: grid; grid-template-columns: 1fr 1fr; column-gap: 2.5rem; border-top: 0 }
	.hl-rows--2col .hl-row:nth-child(-n+2) { border-top: 1px solid var(--hl-line) }
}

/* ---- Pool cards (PoolList component) ---- */
.pool-card {
	border-radius: 22px;
	overflow: hidden;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line);
	box-shadow: none;
	color: var(--hl-text);
	transition: border-color .2s ease, transform .2s ease;
}
.pool-card:hover { border-color: var(--hl-line-strong); transform: translateY(-3px) }

.pool-card .pool-image-container { height: 200px }
.pool-card .placeholder-image,
.hl-ph { background: repeating-linear-gradient(160deg, #0B3A4A 0 14px, #0E4456 14px 28px) }
.pool-card .placeholder-image { color: var(--hl-muted) }

.pool-card .card-body { padding: 1rem; gap: .5rem }
.pool-card .card-title { margin: 0; font-size: 1.375rem; line-height: 1.2 }
.pool-card .card-title a { color: #FFFFFF; text-decoration: none }
.pool-card .card-title a:hover { color: var(--hl-link-hover) }
.pool-card-meta { font-size: .8125rem; color: var(--hl-muted) }
.pool-card .card-text { font-size: .9375rem; line-height: 1.5; color: var(--hl-text-soft) !important }

.hl-status {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-size: .875rem;
	font-weight: 700;
	color: var(--hl-accent);
}
.hl-status::before {
	content: '';
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
}

.hl-more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-weight: 700;
	text-decoration: none;
}

.pool-card-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem }

.pagination {
	--bs-pagination-bg: transparent;
	--bs-pagination-color: var(--hl-text);
	--bs-pagination-border-color: var(--hl-line-strong);
	--bs-pagination-hover-bg: var(--hl-surface);
	--bs-pagination-hover-color: #FFFFFF;
	--bs-pagination-hover-border-color: var(--hl-accent);
	--bs-pagination-active-bg: var(--hl-accent);
	--bs-pagination-active-border-color: var(--hl-accent);
	--bs-pagination-active-color: var(--hl-ground);
	--bs-pagination-disabled-bg: transparent;
	--bs-pagination-disabled-color: var(--hl-faint);
	--bs-pagination-disabled-border-color: var(--hl-line);
	--bs-pagination-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
	gap: .375rem;
}
.pagination .page-link { border-radius: 999px !important; min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 600 }

/* ---- Generic components ---- */
.card {
	--bs-card-bg: var(--hl-surface);
	--bs-card-border-color: var(--hl-line);
	--bs-card-border-radius: 18px;
	--bs-card-color: var(--hl-text);
}

.list-group {
	--bs-list-group-bg: var(--hl-surface);
	--bs-list-group-color: var(--hl-text);
	--bs-list-group-border-color: var(--hl-line);
	--bs-list-group-border-radius: 18px;
	--bs-list-group-action-color: var(--hl-text);
	--bs-list-group-action-hover-color: #FFFFFF;
	--bs-list-group-action-hover-bg: #0E3342;
	--bs-list-group-action-active-bg: #0E3342;
	--bs-list-group-action-active-color: #FFFFFF;
}
.list-group-item { padding: .875rem 1rem }

.breadcrumb {
	--bs-breadcrumb-divider-color: var(--hl-faint);
	--bs-breadcrumb-item-active-color: var(--hl-muted);
	font-size: .875rem;
}
.breadcrumb a { color: var(--hl-muted); text-decoration: none }
.breadcrumb a:hover { color: var(--hl-accent) }

.alert { border-radius: 16px }
.alert-success {
	--bs-alert-bg: var(--hl-surface);
	--bs-alert-color: var(--hl-text);
	--bs-alert-border-color: var(--hl-line);
}
.alert-warning {
	--bs-alert-bg: #1B1A12;
	--bs-alert-color: #EBD9B4;
	--bs-alert-border-color: #4A3E22;
}

.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--hl-text);
	--bs-table-border-color: var(--hl-line);
}

.form-control, .form-select {
	background-color: var(--hl-ground);
	color: #FFFFFF;
	border-color: rgba(228, 243, 244, .2);
	border-radius: 14px;
	min-height: 48px;
}
.form-control:focus, .form-select:focus {
	background-color: var(--hl-ground);
	color: #FFFFFF;
	border-color: var(--hl-accent);
	box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}
.form-control::placeholder { color: var(--hl-faint) }
textarea.form-control { min-height: 120px }

.accordion {
	--bs-accordion-bg: var(--hl-ground);
	--bs-accordion-color: var(--hl-text);
	--bs-accordion-border-color: var(--hl-line);
	--bs-accordion-border-radius: 18px;
	--bs-accordion-inner-border-radius: 17px;
	--bs-accordion-btn-color: #FFFFFF;
	--bs-accordion-btn-bg: var(--hl-ground);
	--bs-accordion-active-color: #FFFFFF;
	--bs-accordion-active-bg: var(--hl-surface);
	--bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color);
}

.flash { border-radius: 14px }
.flash.success { background: var(--hl-surface); color: var(--hl-text); border: 1px solid var(--hl-accent) }
.flash.error { background: #2A1418; color: #F5C6CB; border: 1px solid #6B2B35 }

/* Long-form copy from the database (descriptions, region intros) */
.content { color: var(--hl-text-soft); line-height: 1.65 }
.content h2, .content h3 { margin-top: 1.5rem }
.content strong { color: #FFFFFF }

/* ---- Pool detail ---- */
.hl-detail-hero { position: relative; height: 300px; overflow: hidden; background: var(--hl-surface) }
.hl-detail-hero .flexslider { margin: 0 !important; height: 100%; border: 0 !important; border-radius: 0 !important; background: var(--hl-surface) !important }
.hl-detail-hero .flexslider > .slides { list-style: none; margin: 0; padding: 0 }
.hl-detail-hero .flexslider > .slides > li + li { display: none }
.hl-detail-hero .flexslider .slides img,
.hl-detail-hero-img { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: 0 }
.hl-detail-hero picture { display: block; height: 100% }
.hl-detail-hero .flex-control-nav { bottom: 40px; z-index: 2 }
.hl-detail-hero .flex-direction-nav a { top: 45% }

.hl-round-btn {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(4, 20, 29, .75);
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
.hl-round-btn:hover { color: var(--hl-accent) }
.hl-detail-back { position: absolute; top: 12px; left: 16px; z-index: 3 }

@media (min-width: 768px) {
	.hl-detail-hero { height: 440px }
	.hl-detail-hero .flexslider .slides img,
	.hl-detail-hero-img { height: 440px }
	.hl-detail-back { top: 20px; left: max(16px, calc((100vw - 880px) / 2)) }
}

.hl-detail-body { max-width: 880px }

.hl-sheet {
	position: relative;
	z-index: 3;
	margin: -28px -12px 0;
	padding: 1.25rem 1rem 1.5rem;
	border-radius: 28px 28px 0 0;
	background: var(--hl-ground);
}
@media (min-width: 576px) {
	.hl-sheet { margin-left: 0; margin-right: 0; padding: 1.5rem 1.5rem 1.75rem }
}
.hl-sheet .breadcrumb { margin-bottom: .75rem }

.hl-detail-title { margin: 0 0 .5rem; font-size: clamp(2.125rem, 5vw, 3rem); line-height: 1.05 }
.hl-detail-place { margin: 0 0 .875rem; font-size: 1rem; color: var(--hl-muted) }
.hl-pills { display: flex; flex-wrap: wrap; gap: .5rem }
.hl-pills .badge { height: 32px; display: inline-flex; align-items: center; padding: 0 .75rem; font-size: .875rem; margin: 0 !important }

.hl-actions { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; margin-top: 1.25rem }
.hl-action {
	min-height: 64px;
	border-radius: 16px;
	border: 1px solid var(--hl-line-strong);
	color: #FFFFFF;
	text-decoration: none;
	font-weight: 700;
	font-size: .875rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.hl-action:hover { color: #FFFFFF; border-color: var(--hl-accent); background: var(--hl-surface) }
.hl-action--primary { background: var(--hl-accent); border-color: var(--hl-accent); color: var(--hl-ground) }
.hl-action--primary:hover { background: #6FE3DC; color: var(--hl-ground) }

.hl-block { padding: 1rem 0 1.75rem; scroll-margin-top: 90px }
.hl-block > h2, .hl-block h2:first-child { font-size: 1.5rem; margin-bottom: .875rem }

.hl-hours {
	border-radius: 18px;
	border: 1px solid var(--hl-line);
	overflow: hidden;
}
.hl-hours table { margin: 0 }
.hl-hours th, .hl-hours td { padding: .75rem 1rem; border-color: var(--hl-line); font-size: .9375rem; background: transparent; color: var(--hl-text) }
.hl-hours tr:last-child th, .hl-hours tr:last-child td { border-bottom: 0 }
.hl-hours tr.is-today th, .hl-hours tr.is-today td { background: var(--hl-surface); color: var(--hl-accent); font-weight: 700 }
.hl-hours td { font-variant-numeric: tabular-nums; text-align: right }

.hl-rowlink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 56px;
	padding: 0 1rem;
	border-radius: 16px;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line);
	color: #FFFFFF;
	font-weight: 700;
	text-decoration: none;
}
.hl-rowlink:hover { color: #FFFFFF; border-color: var(--hl-accent) }

.hl-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem }
@media (min-width: 768px) { .hl-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)) } }
.hl-tile {
	padding: .875rem;
	border-radius: 16px;
	background: transparent;
	border: 1px dashed var(--hl-line);
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.hl-tile strong { font-family: var(--hl-display); font-size: 1.0625rem; line-height: 1.25; color: var(--hl-faint) }
.hl-tile span { font-size: .875rem; color: var(--hl-faint) }
.hl-tile.is-on { background: var(--hl-surface); border: 1px solid var(--hl-line) }
.hl-tile.is-on strong { color: #FFFFFF }
.hl-tile.is-on span { color: var(--hl-accent); font-weight: 600 }
.hl-detail-lead { margin: 1.25rem 0 .75rem; font-size: 1rem; line-height: 1.6; color: var(--hl-text-soft) }

.hl-detail-map { height: 220px; overflow: hidden }
.hl-detail-address { margin: .75rem 0 0; color: var(--hl-text-soft) }

.hl-carousel {
	display: flex;
	gap: .75rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	padding: 0 max(16px, calc((100vw - 880px) / 2 + 12px)) .5rem;
	scroll-padding: 0 max(16px, calc((100vw - 880px) / 2 + 12px));
	scrollbar-width: thin;
}
/* From tablet up the carousel stays within the content column instead of bleeding */
@media (min-width: 768px) {
	.hl-carousel { max-width: 856px; margin: 0 12px; padding: 0 0 .5rem; scroll-padding: 0 }
}
@media (min-width: 880px) {
	.hl-carousel { margin: 0 auto }
}
.hl-ncard {
	flex: none;
	width: 240px;
	scroll-snap-align: start;
	border-radius: 18px;
	overflow: hidden;
	background: var(--hl-surface);
	border: 1px solid var(--hl-line);
	color: var(--hl-text);
	text-decoration: none;
	display: flex;
	flex-direction: column;
}
.hl-ncard:hover { color: var(--hl-text); border-color: var(--hl-line-strong) }
.hl-ncard img, .hl-ncard .hl-ph { display: block; width: 100%; height: 120px; object-fit: cover }
.hl-ncard-body { padding: .75rem; display: flex; flex-direction: column; gap: .25rem }
.hl-ncard-body strong { font-family: var(--hl-display); font-size: 1.0625rem; line-height: 1.2; color: #FFFFFF }
.hl-ncard-body > span { font-size: .875rem; color: var(--hl-muted) }
.hl-ncard-body .hl-status { color: var(--hl-accent) }

.news-item { border-radius: 18px !important; border-color: var(--hl-line) !important }

.review-card { background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: 18px; box-shadow: none }
.review-card:hover { transform: none; box-shadow: none; border-color: var(--hl-line-strong) }
.review-header { background: transparent; border-bottom: 1px solid var(--hl-line); border-radius: 18px 18px 0 0 }
.review-author { color: #FFFFFF }
.review-date, .rating-label { color: var(--hl-muted) }
.review-ratings { padding: 0 1.5rem }
.review-content { color: var(--hl-text-soft) }
.rating, .rating-stars { color: var(--hl-accent) }
.review-form-container { background: var(--hl-surface); border: 1px solid var(--hl-line); border-radius: 18px }

.flexslider {
	background: var(--hl-surface) !important;
	border-radius: 22px !important;
	box-shadow: none !important;
	border: 1px solid var(--hl-line) !important;
}
.flex-direction-nav a { background: rgba(4, 20, 29, .75) !important; color: #FFFFFF !important }
.flex-control-paging li a.flex-active { background: var(--hl-accent) !important; border-color: var(--hl-accent) !important }

/* ---- Maps (Leaflet) ---- */
.leaflet-container { background: #071D28; font-family: Manrope, system-ui, sans-serif }
.leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.55) }
#map, #homepage-map, #pool-detail-map { border: 1px solid var(--hl-line-strong); border-radius: 22px !important }
.leaflet-control-zoom a,
.leaflet-bar a { background: var(--hl-ground) !important; color: #FFFFFF !important; border-color: var(--hl-line-strong) !important }
.leaflet-control-attribution { background: rgba(4, 20, 29, .8) !important; color: var(--hl-muted) !important }
.leaflet-control-attribution a { color: var(--hl-link) !important }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--hl-surface); color: var(--hl-text) }

.map-marker { border: 2px solid var(--hl-ground); box-shadow: 0 4px 14px rgba(0, 0, 0, .45) }
.indoor-marker { background-color: var(--hl-accent) }
.outdoor-marker { background-color: #7CC4FF }
.natural-marker { background-color: #B6F27A }
.mixed-marker { background: linear-gradient(90deg, var(--hl-accent) 50%, #7CC4FF 50%) }
.pool-detail-marker { background-color: #FFFFFF; border: 3px solid var(--hl-accent) }

.filter-section,
.map-filter-group {
	background: var(--hl-surface);
	border: 1px solid var(--hl-line);
	border-radius: 18px;
	padding: 1.25rem;
}
.filter-section h5 { font-size: 1rem; color: #FFFFFF }
.map-filter-label { color: var(--hl-text) }
.map-filter-item:hover .map-filter-label { color: var(--hl-accent) }

.filter-btn {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 .875rem;
	border-radius: 999px;
	border: 1px solid var(--hl-line-strong);
	background: var(--hl-ground);
	color: var(--hl-text);
	font-weight: 600;
	font-size: .875rem;
}
.filter-btn:hover { background: var(--hl-surface); border-color: var(--hl-accent); color: #FFFFFF }
.filter-btn.active,
.filter-btn.active:hover { background: var(--hl-accent); border-color: var(--hl-accent); color: var(--hl-ground) }

@media (max-width: 768px) {
	.filter-btn { font-size: .8125rem; padding: 0 .75rem; min-height: 38px }
}

/* Pool popup modal (map) */
.pool-popup-overlay { background: rgba(2, 11, 16, .7) }
.pool-popup-modal { background: var(--hl-surface); border: 1px solid var(--hl-line-strong); border-radius: 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .5) }
.pool-popup-header { background: var(--hl-surface); border-bottom: 1px solid var(--hl-line); border-radius: 22px 22px 0 0 }
.pool-popup-header h5, .pool-popup-header h4, .pool-popup-header h3 { margin: 0; font-family: var(--hl-display); color: #FFFFFF }
.pool-popup-close { color: var(--hl-muted); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(228, 243, 244, .25) }
.pool-popup-close:hover { color: #FFFFFF }
.pool-title, .pool-popup-content .pool-title { font-family: var(--hl-display); color: #FFFFFF }
.pool-description, .pool-popup-content .pool-description { color: var(--hl-text-soft) }
.pool-popup .btn-primary, .pool-popup-content .btn-primary { color: var(--hl-ground); background: var(--hl-accent); border-color: var(--hl-accent); border-radius: 14px; font-weight: 700 }
.pool-popup .btn-outline-success, .pool-popup-content .btn-outline-success { color: #FFFFFF; border-color: rgba(228, 243, 244, .3); border-radius: 14px; font-weight: 700 }
.pool-popup .btn-outline-success:hover, .pool-popup-content .btn-outline-success:hover { background: var(--hl-ground); border-color: var(--hl-accent); color: #FFFFFF }
.pool-popup-content .pool-image-container { border-radius: 22px 22px 0 0 }

@media (max-width: 768px) {
	.pool-popup-modal, .pool-popup-header { border-radius: 0 }
}

/* ---- Lane occupancy timeline ---- */
.lane-name { background: var(--hl-ground); border-right-color: var(--hl-line); box-shadow: 3px 0 4px -2px rgba(0, 0, 0, .5); color: var(--hl-text) }
.pool-popup-modal .lane-name { background: var(--hl-surface) }
.lane-track { background-color: #0C2C3A; background-image: repeating-linear-gradient(to right, rgba(228, 243, 244, .12) 0 1px, transparent 1px calc(100% / var(--lane-hours))), repeating-linear-gradient(to right, rgba(228, 243, 244, .05) 0 1px, transparent 1px calc(100% / (var(--lane-hours) * 2))) }
.lane-track--axis { background: none }
.lane-tick, .lane-nodata, .lane-loading, .pool-lane-title .lane-day-name, .lane-detail-meta, .lane-now-sub { color: var(--hl-muted) }
.lane-slot:focus-visible, .lane-slot.is-active { box-shadow: inset 0 0 0 2px var(--hl-ground), inset 0 0 0 4px #FFFFFF }
.lane-detail-card { background: var(--hl-surface); border-color: var(--hl-line) }
.lane-detail-head { color: var(--hl-text-soft) }
.lane-now--open { background: #0B3440 }
.lane-now--shut { background: var(--hl-surface) }
.lane-now-head { color: #FFFFFF }
.lane-now--open .lane-now-head { color: var(--hl-accent) }
.lane-now--open .lane-now-dot { background: var(--hl-accent); box-shadow: 0 0 0 3px rgba(63, 214, 204, .22) }
.lane-skeleton { background: linear-gradient(90deg, #0C2C3A 25%, #12394A 37%, #0C2C3A 63%); background-size: 400% 100% }

/* ---- Cookie bar ---- */
.cookie-bar { background: rgba(10, 38, 51, .97); border-top: 1px solid var(--hl-line-strong); color: var(--hl-text) }
.cookie-bar a { color: var(--hl-link) !important }
.hl-pills .badge.bg-secondary { background: transparent !important; color: var(--hl-text) !important; border-color: var(--hl-line-strong) }