:root {
  --primary: #0E355E;
  --secondary: #25B7C9;
  --accent: #D9AE58;
  --nature: #4E8A59;
  --background: #F8F7F4;
  --text: #14253D;
  --border: #DCE3E8;
  --surface: #FFFFFF;
  --muted: #607080;
  --shadow-soft: 0 12px 32px rgba(14, 53, 94, .09);
  --shadow-hover: 0 18px 42px rgba(14, 53, 94, .15);

  /* Compatibility aliases for the existing Web Forms UI. */
  --cs-blue: var(--primary);
  --cs-sky: var(--secondary);
  --cs-green: var(--nature);
  --cs-yellow: var(--accent);
  --cs-coral: var(--accent);
  --cs-sand: #EEF6F5;
  --cs-light: var(--background);
  --cs-dark: var(--text);
}

html {
  background: var(--background);
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  color: var(--text);
  background: var(--background);
  font-family: "Montserrat", Arial, sans-serif;
  overflow-x: hidden;
  overflow-x: clip;
}

h1,
h2,
h3,
h4,
h5,
h6,
.section-title {
  color: var(--primary);
  font-family: "Cinzel", Georgia, serif;
}

a {
  color: var(--primary);
}

a:hover {
  color: var(--secondary);
}

.cs-navbar {
  background: rgba(255, 255, 255, .97);
  border-color: var(--border) !important;
  box-shadow: 0 6px 20px rgba(14, 53, 94, .05);
}

.cs-navbar .nav-link {
  color: var(--primary);
  font-weight: 600;
}

.cs-navbar .nav-link:hover,
.cs-navbar .nav-link:focus,
.cs-navbar .dropdown-item:hover,
.cs-navbar .dropdown-item:focus {
  color: var(--secondary);
}

.cs-logo {
  height: 54px;
  max-width: min(310px, 58vw);
  object-fit: contain;
}

.btn-primary {
  color: #fff;
  background: var(--primary);
  border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus {
  color: #fff;
  background: var(--secondary);
  border-color: var(--secondary);
}

.btn-outline-primary {
  color: var(--primary);
  border-color: var(--primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  color: #fff;
  background: var(--secondary);
  border-color: var(--secondary);
}

.cs-hero {
  background:
    linear-gradient(110deg, rgba(14, 53, 94, .94) 0%, rgba(14, 53, 94, .76) 48%, rgba(14, 53, 94, .38) 100%),
    url("/Assets/Brand/splash-screen.png?v=20260704-v2") center / cover no-repeat;
  color: #fff;
}

.cs-hero::after {
  background: rgba(37, 183, 201, .14);
}

.cs-hero h1,
.cs-hero .lead {
  color: #fff;
  text-shadow: 0 3px 18px rgba(8, 30, 54, .28);
}

.cs-hero .text-muted {
  color: rgba(255, 255, 255, .82) !important;
}

.cs-hero .badge-soft {
  color: #fff;
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .4);
}

.cs-hero .btn-primary {
  color: var(--primary);
  background: #fff;
  border-color: #fff;
}

.cs-hero .btn-primary:hover {
  color: #fff;
  background: var(--secondary);
  border-color: var(--secondary);
}

.cs-hero .btn-outline-primary {
  color: #fff;
  border-color: rgba(255, 255, 255, .8);
}

.cs-hero .btn-outline-primary:hover {
  border-color: var(--secondary);
}

.map-preview,
.cs-panel,
.feature-card,
.price-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-soft);
}

.feature-card,
.price-card,
.cs-map-poi-item,
.cs-map-event-item,
.cs-map-sponsor-card {
  transition: transform 250ms ease, box-shadow 250ms ease, border-color 250ms ease;
}

.feature-card:hover,
.price-card:hover,
.cs-map-poi-item:hover,
.cs-map-event-item:hover,
.cs-map-sponsor-card:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(37, 183, 201, .55);
  box-shadow: var(--shadow-hover);
}

.badge-soft,
.badge,
.cs-sponsored-label {
  border-color: rgba(37, 183, 201, .28);
}

.cs-map-sidebar,
.cs-map-sidebar-section,
.cs-map-box-body,
.cs-map-categorybar,
.cs-map-promo-panel {
  border-color: var(--border);
}

.cs-map-category-btn {
  color: var(--muted);
  border-color: var(--border);
}

.cs-map-category-btn:hover,
.cs-map-category-btn:focus,
.cs-map-category-btn.is-active {
  color: var(--primary);
  background: rgba(37, 183, 201, .13);
  border-color: var(--secondary);
}

.cs-map-category-btn img {
  opacity: .72;
  filter: saturate(.45);
}

.cs-map-category-btn.is-active img {
  opacity: 1;
  filter: none;
}

.cs-map-detail-tab.active {
  background: var(--secondary);
  border-color: var(--secondary);
}

.cs-map-sponsor-strip,
.cs-map-sponsor-card,
.cs-sponsor-info,
.cs-sponsored-label {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 10px 28px rgba(217, 174, 88, .16);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-soft);
}

.leaflet-popup-content-wrapper {
  border-radius: 14px;
}

.leaflet-control a,
.leaflet-bar a {
  color: var(--primary);
}

.leaflet-control a:hover,
.leaflet-bar a:hover {
  color: #fff;
  background: var(--secondary);
}

.cs-footer {
  color: rgba(255, 255, 255, .88);
  background: var(--primary);
}

.cs-footer a,
.cs-footer .text-muted,
.cs-footer-cookie-button {
  color: rgba(255, 255, 255, .78) !important;
}

.cs-footer a:hover,
.cs-footer-cookie-button:hover {
  color: var(--secondary) !important;
}

.cs-footer-logo {
  width: auto;
  max-width: 260px;
  max-height: 86px;
}

.cs-mobile-topbar {
  background: #fff;
  border-color: var(--border);
}

.cs-mobile-brand img {
  width: auto;
  height: 42px;
}

@media (max-width: 991.98px) {
  .cs-logo {
    height: 46px;
  }

  .cs-hero {
    min-height: 76vh;
    background-position: 38% center;
  }

  .cs-map-canvas {
    min-height: calc(100dvh - 64px);
  }

  .cs-map-box-toggle,
  .cs-map-top-action,
  .cs-icon-btn {
    min-height: 44px;
    min-width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
