/****************
 * Theme: glass panels over the map *
****************/
:root {
  --stark-glass-bg: rgba(255, 255, 255, 0.72);
  --stark-glass-blur: blur(16px) saturate(180%);
  --stark-glass-border: 1px solid rgba(255, 255, 255, 0.6);
  --stark-glass-shadow: 0 8px 32px rgba(15, 23, 42, 0.14);
  /* Boxes inside a glass panel (legend classes, waypoints, ...) */
  --stark-glass-inner: rgba(15, 23, 42, 0.05);
  /* Theme colours of the application (injected by the page, with defaults) */
  --stark-primary: var(--primary-color, #276C9F);
  --stark-primary-hover: color-mix(in srgb, var(--stark-primary) 85%, #000000);
  --stark-secondary: var(--secondary-color, #55B9E0);
}

/****************
 * Left Panel *
****************/
.stark-desktop .main-with-left .main-inner #left {
  width: 400px;
  padding: 32px;
}

/****************
 * Slide Show *
****************/
/* Modern UI: "Sponsored by" + logos in cards scrolling continuously */
.stark-component-slideshow-modern {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-height: 0;
  margin: 16px 0 0 0;
  padding: 12px 0 14px 0;
  border-radius: 12px;
  background: var(--Neutrals-400, #EFF0F6);
}

.stark-component-slideshow-modern-title {
  margin: 0 0 10px 0;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: #1A1A1A;
}

/* Faded edges */
.stark-component-slideshow-modern-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%);
}

/* The track contains the images twice: translating it by -50% loops */
.stark-component-slideshow-modern-track {
  display: flex;
  width: max-content;
  animation: stark-slideshow-modern-scroll 12s linear infinite;
}

.stark-component-slideshow-modern-viewport:hover .stark-component-slideshow-modern-track {
  animation-play-state: paused;
}

/* Same card size whatever the image size. It follows the height of the
   screen (10vh), from 72px (short screens, so the panel does not scroll) to
   108px; the width keeps the 16:9 ratio. Margin instead of gap so that both
   halves of the track have exactly the same width. */
.stark-component-slideshow-modern-item {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: clamp(72px, 10vh, 108px);
  aspect-ratio: 16 / 9;
  min-width: 0; /* a wide image must not stretch the card */
  margin: 0 8px 0 0;
  padding: clamp(6px, 0.83vh, 9px);
  border-radius: 8px;
  background-color: #FFFFFF;
}

/* Logos with a link */
a.stark-component-slideshow-modern-item {
  text-decoration: none;
  transition: box-shadow 0.15s ease;
}

a.stark-component-slideshow-modern-item:hover,
a.stark-component-slideshow-modern-item:focus-visible {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  outline: none;
}

.stark-component-slideshow-modern-image {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes stark-slideshow-modern-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stark-component-slideshow-modern-track {
    animation: none;
  }
}

.stark-desktop .mg-control-baselayerswitcher {
  display: none;
}

/****************
 * Mobile app *
****************/
/* Badges drawn over the marketing image (when there is one) */
.stark-desktop .stark-component-mobileapp-big-badges .stark-component-mobileapp-badge img {
  position: absolute;
  bottom: 4px;
  width: 151px !important;
}

.stark-component-mobileapp-badge-ios img {
  right: 13px;
}

.stark-component-mobileapp-badge-android img {
  left: 13px;
}

.stark-component-mobileapp-big-badges {
  position: relative;
}

/* Compact: the left panel does not fit the screen, so no marketing image,
   only the badges side by side (see stark.component.MobileApp). More
   specific than the modern UI rule which displays the image. */
.stark-component-mobileapp-modern-ui.stark-component-mobileapp-compact .stark-component-mobileapp-marketing-img {
  display: none;
}

.stark-desktop .stark-component-mobileapp-compact .stark-component-mobileapp-big-badges {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stark-desktop .stark-component-mobileapp-compact .stark-component-mobileapp-big-badges .stark-component-mobileapp-badge img {
  position: static;
}

.stark-desktop .stark-panel-body {
  overflow-y: unset;
  margin-top: 16px;
}

/* Left panel in a column: the header on top, the panel body (scrolls if
   needed) then, always visible at the bottom, the mobile app card and
   "Sponsored by" */
.stark-desktop .main-with-left .main-inner #left {
  display: flex;
  flex-direction: column;
  overflow-y: auto; /* only on very small screens */
}

.stark-desktop #left > * {
  flex: 0 0 auto;
}

.stark-desktop #left > .stark-panel-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 120px;
  overflow-y: auto;
}

.stark-desktop .stark-panel-body > * {
  flex-shrink: 0;
}

/****************
 * Welcome text *
****************/
/* Description (welcome text + "getting started"), then the toggle, then a
   separator with the rest of the panel */
.stark-desktop .stark-welcome {
  padding: 0 0 16px 0;
  border-bottom: 1px solid #E3E4EB;
}

/* Positioned: also clips the absolutely positioned content when collapsed */
.stark-desktop .stark-welcome-content {
  position: relative;
}

.stark-desktop .stark-welcome .stark-component-plain {
  margin: 0;
  color: #4A4A57;
  font-size: 13px;
  line-height: 1.5;
}

.stark-desktop .stark-welcome .stark-component-plain + .stark-component-plain {
  margin: 12px 0 0 0;
}

/* Collapsed: limited height with a fade at the bottom */
.stark-desktop .stark-welcome-collapsed .stark-welcome-content {
  max-height: 100px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

.stark-desktop .stark-welcome-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 4px 0 0 0;
  padding: 0;
  border: none;
  background: none;
  color: var(--stark-primary);
  font-size: 12px;
}

.stark-desktop .stark-welcome-toggle:after {
  font-family: 'Material Design Icons';
  font-size: 14px;
  line-height: 1;
  content: "\F0374"; /* mdi-minus */
}

.stark-desktop .stark-welcome-collapsed .stark-welcome-toggle:after {
  content: "\F0415"; /* mdi-plus */
}

.stark-component-mobileapp-modern-ui {
  margin: unset;
}

.stark-desktop #left > .stark-component-mobileapp-modern-ui {
  margin: 16px 0 0 0;
}

/* "Terms of use", ...: aligned with the welcome text */
.stark-desktop .stark-panel-body > .stark-component-plain {
  margin: 12px 0 0 0;
  color: #4A4A57;
  font-size: 13px;
  line-height: 1.5;
}

.stark-desktop .stark-panel-body > .stark-component-terms a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--stark-primary);
  font-size: 12px;
}

.stark-desktop .stark-panel-body > .stark-component-terms a:before {
  font-family: 'Material Design Icons';
  font-size: 14px;
  line-height: 1;
  content: "\F09EE"; /* mdi-file-document-outline */
}

/* The marketing image speaks for itself: no text */
.stark-component-mobileapp-modern-ui .stark-component-mobileapp-info {
  display: none;
}

/* Smaller on short screens, so the panel body keeps some room */
.stark-component-mobileapp-modern-ui .stark-component-mobileapp-marketing-img {
  display: block;
  width: 100%;
  max-height: min(320px, 30vh);
  object-fit: cover;
}

/* Text drawn over the top of the marketing image (translated). Sizes follow
   the width of the image (container query units). */
.stark-component-mobileapp-modern-ui .stark-component-mobileapp-big-badges {
  container-type: inline-size;
}

.stark-component-mobileapp-marketing-text {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  padding: 7cqw 8cqw 10cqw 8cqw;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(to bottom, rgba(10, 30, 60, 0.55), transparent);
  color: #FFFFFF;
  line-height: 1.05;
  text-align: left;
  text-transform: uppercase;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* No marketing image (compact card): no text either */
.stark-component-mobileapp-modern-ui.stark-component-mobileapp-compact .stark-component-mobileapp-marketing-text {
  display: none;
}

.stark-component-mobileapp-marketing-text-kicker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5cqw;
  margin: 0 0 2cqw 0;
  font-size: 4.2cqw;
  font-weight: 500;
  letter-spacing: 0.06em;
}

.stark-component-mobileapp-marketing-text-kicker:before,
.stark-component-mobileapp-marketing-text-kicker:after {
  content: "";
  width: 6cqw;
  border-top: 2px solid currentColor;
}

.stark-component-mobileapp-marketing-text-title {
  font-size: 7.5cqw;
  font-weight: 800;
}

.stark-component-mobileapp-marketing-text-highlight {
  display: inline-block;
  margin: 1.5cqw 0 0 -2cqw;
  padding: 0.5cqw 4cqw 1cqw 2cqw;
  background-color: var(--stark-primary);
  clip-path: polygon(2% 8%, 98% 0, 100% 90%, 0 100%);
  font-size: 9.5cqw;
  font-weight: 400;
}

/* Sponsored services (left panel): same card as "Sponsored by" */
.stark-desktop .stark-component-servicesponsorsabout {
  margin: 16px 0 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--Neutrals-400, #EFF0F6);
  color: #4A4A57;
  font-size: 12px;
  line-height: 1.5;
}

.stark-desktop .stark-component-servicesponsorsabout-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 700;
  text-align: left;
}

.stark-desktop .stark-component-servicesponsorsabout-header-new {
  margin: 0;
  padding: 0 8px;
  border-radius: 50px;
  background-color: var(--stark-primary);
  font-size: 11px;
  line-height: 20px;
}

.stark-desktop .stark-component-servicesponsorsabout-images {
  margin: 8px 0;
  text-align: left;
}

.stark-desktop .stark-component-servicesponsorsabout-images img {
  height: 28px;
  margin: 0 4px 0 0;
}

/****************
 * Permit button *
****************/
.stark-desktop .permitBtn {
  background-color: #30610E;
  color: #fff;
  width: 158px;
  height: 37px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 11px;
  padding-bottom: 11px;
  border-radius: 4px;
}

/****************
 * Header *
****************/
.stark-desktop .stark-component-header {
  padding: 0px;
  text-align: left;
}

/* Logo on the first line, the language dropdown is on its right: the logo
   never goes under it (the dropdown is about 120px wide) */
.stark-desktop .stark-component-header img {
  display: block;
  width: auto;
  height: auto;
  max-height: 96px;
  max-width: calc(100% - 140px);
  margin: 0;
}

/* Title and subtitle as a single bold title block */
.stark-desktop .stark-component-header .stark-component-header-titles {
  margin: 24px 0 0 0;
  text-align: left;
}

.stark-desktop .stark-component-header .stark-component-header-title,
.stark-desktop .stark-component-header .stark-component-header-subtitle {
  display: block;
  margin: 0;
  color: #1A1A1A;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
}

/****************
 * LocalePicker *
 ****************/
/*
 * Dropdown made from the mg LocalePicker button group: the current language
 * (the "disabled" link) is the toggle, the other languages are revealed under
 * it on hover, or when they get the keyboard focus (:focus-within).
 */
/* Top right of the left panel, next to the logo (#left padding is 32px) */
.stark-desktop .mg-component-localepicker.btn-group {
  position: absolute;
  top: 35px;
  right: 32px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  width: auto;
  min-width: 110px;
  margin: 0;
  overflow: hidden;
  border: 1px solid #E3E4EB;
  border-radius: 8px;
  background-color: #FFFFFF;
  text-align: left;
  transition: box-shadow 0.15s ease;
}

.stark-desktop .mg-component-localepicker.btn-group:hover,
.stark-desktop .mg-component-localepicker.btn-group:focus-within {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.stark-desktop .mg-component-localepicker.btn-group a.btn {
  display: block;
  float: none;
  margin: 0;
  border: none;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
  color: #1A1A1A;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
}

/* Current language: the toggle, always first */
.stark-desktop .mg-component-localepicker.btn-group a.btn.disabled {
  order: -1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  opacity: 1;
  cursor: pointer;
}

.stark-desktop .mg-component-localepicker.btn-group a.btn.disabled:before {
  font-family: 'Material Design Icons';
  font-size: 18px;
  line-height: 1;
  content: "\F059F"; /* mdi-web */
}

/* Square box without padding: the rotation keeps the chevron centered */
.stark-desktop .mg-component-localepicker.btn-group a.btn.disabled:after {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-left: auto;
  padding: 0;
  transform-origin: center;
  font-family: 'Material Design Icons';
  font-size: 16px;
  line-height: 1;
  content: "\F0140"; /* mdi-chevron-down */
  transition: transform 0.15s ease;
}

.stark-desktop .mg-component-localepicker.btn-group:hover a.btn.disabled:after,
.stark-desktop .mg-component-localepicker.btn-group:focus-within a.btn.disabled:after {
  transform: rotate(180deg);
}

/* Other languages: collapsed, but still focusable with the keyboard */
.stark-desktop .mg-component-localepicker.btn-group a.btn:not(.disabled) {
  max-height: 0;
  padding: 0 12px 0 36px;
  opacity: 0;
  transition: max-height 0.15s ease, padding 0.15s ease, opacity 0.15s ease;
}

.stark-desktop .mg-component-localepicker.btn-group:hover a.btn:not(.disabled),
.stark-desktop .mg-component-localepicker.btn-group:focus-within a.btn:not(.disabled) {
  max-height: 40px;
  padding: 8px 12px 8px 36px;
  border-top: 1px solid #EFF0F6;
  opacity: 1;
}

.stark-desktop .mg-component-localepicker.btn-group a.btn:not(.disabled):hover,
.stark-desktop .mg-component-localepicker.btn-group a.btn:not(.disabled):focus {
  background-color: var(--stark-glass-inner);
  outline: none;
}

/****************
 * Legend *
****************/
.stark-desktop .stark-control-legend {
  bottom: unset;
  left: unset;
  right: 16px;
  top: 16px;
  border: none;
  border-radius: 14px;
  background-color: transparent;
  box-shadow: none;
}

.stark-desktop .stark-control-legend .panel-heading {
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 50px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  white-space: nowrap;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.stark-desktop .stark-control-legend .panel-heading .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.stark-desktop .stark-control-legend .panel-heading .panel-title:before {
  font-family: 'Material Design Icons';
  font-size: 20px;
  line-height: 1;
  content: "\F0A01"; /* mdi-map-legend */
}

/* Replace the glyphicon chevron with a smaller MDI chevron */
.stark-desktop .stark-control-legend .panel-heading:after {
  float: none;
  font-family: 'Material Design Icons';
  font-size: 16px;
  line-height: 1;
  content: "\F0143"; /* mdi-chevron-up */
}

.stark-desktop .stark-control-legend .panel-heading.collapsed:after {
  content: "\F0140"; /* mdi-chevron-down */
}

/* Opened: pointer towards the menu */
.stark-desktop .stark-control-legend .panel-heading:not(.collapsed):before {
  position: absolute;
  top: calc(100% + 4px); /* touches the menu, 54px from the top */
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: none;
  border-bottom-color: var(--stark-glass-bg);
  content: "";
}

.stark-desktop #stark-control-legend-body {
  position: absolute;
  top: 54px;
  bottom: unset;
  right: 0px;
  width: 330px;
  max-height: min(480px, calc(100vh - 140px));
  padding: 12px 16px;
  overflow-y: auto;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* While bootstrap animates the height, no scrollbar (the overflow-y above
   overrides the overflow: hidden of .collapsing) */
.stark-desktop #stark-control-legend-body.collapsing,
.stark-desktop .stark-control-menus > .panel > .panel-body.collapsing {
  overflow: hidden;
}

/* Single column: layers first, services after */
.stark-desktop #stark-control-legend-body .stark-control-legend-layers {
  display: flex;
  flex-direction: column;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layersleft,
.stark-desktop #stark-control-legend-body .stark-control-legend-layersright {
  display: block;
  float: none;
  width: 100%;
  margin: 0;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layersleft {
  order: 1;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layersright {
  order: 2;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layer {
  margin: 0 0 12px 0;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layers > *:last-child .stark-control-legend-layer:last-child {
  margin-bottom: 0;
}

/* Layer header: checkbox + blue title */
.stark-desktop #stark-control-legend-body .stark-control-legend-layer-header {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 28px;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layer-header input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--stark-primary);
  cursor: pointer;
}

/* Bold black titles, like the points of interest menu */
.stark-desktop #stark-control-legend-body .stark-control-legend-layer-title {
  margin: 0;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
}

/* Classes in a light grey rounded box. Also by class: apps' custom JS adds
   layers with e.g. class="stark-control-class-closures" (idaho) */
.stark-desktop #stark-control-legend-body [id^='stark-control-class-'],
.stark-desktop #stark-control-legend-body [class^='stark-control-class-'],
.stark-desktop #stark-control-legend-body .mg-qwiz-component-evouala-filter {
  margin: 6px 0 0 0;
  padding: 8px 12px;
  border-radius: 12px;
  background-color: var(--stark-glass-inner);
}

.stark-desktop #stark-control-legend-body [id^='stark-control-class-']:empty,
.stark-desktop #stark-control-legend-body [class^='stark-control-class-']:empty {
  display: none;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 24px;
  margin: 0;
  line-height: 24px;
  font-size: 13px;
  color: #333333;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class-icon-container {
  display: inline-flex;
  flex: 0 0 auto;
  justify-content: center;
  margin: 0;
}

/* Colour swatches: rounded squares */
.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class-icon {
  width: 16px;
  height: 16px;
  object-fit: cover;
  border-radius: 4px;
}

/*
 * All the classes are lines, like the trails on the map: the colour swatch
 * image is stretched (not the large images, e.g. precipitation)
 */
.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class-icon-container {
  width: 40px;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class-icon:not(.stark-control-legend-layer-class-large-icon) {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  object-fit: fill;
}

/* Dashed lines (e.g. ungroomed trails): drawn with their pattern instead of
   the stretched legend icon */
.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class-dashed img.stark-control-legend-layer-class-icon {
  display: none;
}

.stark-desktop #stark-control-legend-body .stark-control-legend-layer-class-dash {
  display: block;
}

.stark-desktop #stark-control-legend-body .mg-qwiz-component-evouala-filter .mg-form-field-checklist-item {
  font-size: 13px;
  color: #333333;
}

.stark-desktop #stark-control-legend-body .mg-qwiz-component-evouala-filter input[type='checkbox'] {
  accent-color: var(--stark-primary);
}

.stark-desktop #stark-control-legend-body .stark-control-legend-bottom-note {
  margin: 0;
  padding: 12px 0 0 0;
  border-top: 1px solid #EFF0F6;
  font-size: 12px;
}

/****************
 * Map menus bar (services, legend, snow tours, districts; modern UI) *
****************/
.stark-desktop .stark-control-menus {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.stark-desktop .stark-control-menus > .panel {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
}

.stark-desktop .stark-control-menus > .stark-control-services {
  order: 1;
}

.stark-desktop .stark-control-menus > .stark-control-legend {
  order: 2;
}

/* Pill buttons */
.stark-desktop .stark-control-menus > .panel > .panel-heading {
  position: relative;
  top: auto;
  right: auto;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 50px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.stark-desktop .stark-control-menus > .panel > .panel-heading .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.stark-desktop .stark-control-services .panel-heading .panel-title:before {
  font-family: 'Material Design Icons';
  font-size: 20px;
  line-height: 1;
  content: "\F1277"; /* mdi-map-marker-multiple-outline */
}

.stark-desktop .stark-control-menus > .panel > .panel-heading:after {
  float: none;
  font-family: 'Material Design Icons';
  font-size: 16px;
  line-height: 1;
  content: "\F0143"; /* mdi-chevron-up */
}

.stark-desktop .stark-control-menus > .panel > .panel-heading.collapsed:after {
  content: "\F0140"; /* mdi-chevron-down */
}

.stark-desktop .stark-control-menus > .panel > .panel-heading:not(.collapsed):before {
  position: absolute;
  top: calc(100% + 4px); /* touches the menu, 54px from the top */
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: none;
  border-bottom-color: var(--stark-glass-bg);
  content: "";
}

/* Menus, aligned on the right of their button */
.stark-desktop .stark-control-menus > .panel > .panel-body {
  position: absolute;
  top: 54px;
  right: 0;
  bottom: auto;
  width: 330px;
  max-height: min(480px, calc(100vh - 140px));
  padding: 12px 16px;
  overflow-y: auto;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

/* Services menu: title + list, icon / label / checkbox on the right */
.stark-desktop .stark-control-services-title {
  margin: 4px 0 8px 0;
  padding-right: 140px; /* room for "Select all / Unselect all" */
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

/* Reset the bootstrap form layout of the filter */
.stark-desktop .stark-control-services-list .mg-qwiz-component-evouala-filter .row,
.stark-desktop .stark-control-services-list .mg-qwiz-component-evouala-filter .form-group {
  margin: 0;
}

.stark-desktop .stark-control-services-list .mg-qwiz-component-evouala-filter [class*='col-md-'] {
  position: static; /* bootstrap columns are relative */
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* The filter label duplicates the menu title, the help is always empty */
.stark-desktop .stark-control-services-list .mg-qwiz-component-select-label,
.stark-desktop .stark-control-services-list .help-container {
  display: none;
}

/* Items: icon, label, checkbox on the right */
.stark-desktop .stark-control-services-list .mg-form-field-checklist-item.checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  margin: 0;
  padding: 0;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 400;
  cursor: pointer;
}

/* Most amenity icons are small images: 24px limits the upscaling blur */
.stark-desktop .stark-control-services-list .mg-form-field-checklist-item-icon {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.stark-desktop .stark-control-services-list .mg-form-field-checklist-item > span {
  flex: 1 1 auto;
}

.stark-desktop .stark-control-services-list .mg-form-field-checklist-item.checkbox input[type='checkbox'] {
  position: static;
  order: 2;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  margin: 0 0 0 auto;
  accent-color: var(--stark-primary);
  cursor: pointer;
}

/* First item = "Select all / Unselect all": on the right of the title
   (the menu body is the positioning context) */
.stark-desktop .stark-control-services-list .mg-form-field-checklist-item.checkbox:first-child {
  position: absolute;
  top: 12px; /* same line as the title */
  right: 16px;
  gap: 4px;
  min-height: 0;
  height: 20px;
  color: #8A8A99;
  font-size: 12px;
  line-height: 20px;
  cursor: default;
}

.stark-desktop .stark-control-services-list .mg-form-field-checklist-item:first-child a {
  color: var(--stark-primary);
  font-weight: 700;
  cursor: pointer;
}

/* "Sponsored": explains the star on the sponsored amenities */
.stark-desktop .stark-control-services-sponsor {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 0 0;
  padding: 10px 0 0 0;
  border-top: 1px solid #EFF0F6;
  color: #4A4A57;
  font-size: 13px;
}

.stark-desktop .stark-control-services-sponsor img {
  width: 20px;
  height: 20px;
}

/****************
 * Map menus scrollbar (legend, services, itinerary, search results) *
****************/
/* Firefox only: in Chrome, scrollbar-width disables the ::-webkit-scrollbar
   styles below and brings back the arrow buttons */
@supports not selector(::-webkit-scrollbar) {
  .stark-desktop #stark-control-legend-body,
  .stark-desktop #stark-control-services-body,
  .stark-desktop .stark-panel-body,
  .stark-desktop #geocoder .geocoder-results,
  .stark-desktop #geocoder .geocoder-results ul,
  .stark-desktop .mg-osrm-panel-desktop .panel-body {
    scrollbar-width: thin;
    scrollbar-color: #C8CAD4 transparent;
  }
}

.stark-desktop #stark-control-legend-body::-webkit-scrollbar,
.stark-desktop #stark-control-services-body::-webkit-scrollbar,
.stark-desktop .stark-panel-body::-webkit-scrollbar,
.stark-desktop #geocoder .geocoder-results::-webkit-scrollbar,
.stark-desktop #geocoder .geocoder-results ul::-webkit-scrollbar,
.stark-desktop .mg-osrm-panel-desktop .panel-body::-webkit-scrollbar {
  width: 6px;
}

/* Keep the scrollbar away from the rounded corners */
.stark-desktop #stark-control-legend-body::-webkit-scrollbar-track,
.stark-desktop #stark-control-services-body::-webkit-scrollbar-track,
.stark-desktop .stark-panel-body::-webkit-scrollbar-track,
.stark-desktop #geocoder .geocoder-results::-webkit-scrollbar-track,
.stark-desktop #geocoder .geocoder-results ul::-webkit-scrollbar-track,
.stark-desktop .mg-osrm-panel-desktop .panel-body::-webkit-scrollbar-track {
  margin: 12px 0;
  background: transparent;
}

.stark-desktop #stark-control-legend-body::-webkit-scrollbar-thumb,
.stark-desktop #stark-control-services-body::-webkit-scrollbar-thumb,
.stark-desktop .stark-panel-body::-webkit-scrollbar-thumb,
.stark-desktop #geocoder .geocoder-results::-webkit-scrollbar-thumb,
.stark-desktop #geocoder .geocoder-results ul::-webkit-scrollbar-thumb,
.stark-desktop .mg-osrm-panel-desktop .panel-body::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: #C8CAD4;
}

/* No arrows, only the thumb */
.stark-desktop #stark-control-legend-body::-webkit-scrollbar-button,
.stark-desktop #stark-control-services-body::-webkit-scrollbar-button,
.stark-desktop .stark-panel-body::-webkit-scrollbar-button,
.stark-desktop #geocoder .geocoder-results::-webkit-scrollbar-button,
.stark-desktop #geocoder .geocoder-results ul::-webkit-scrollbar-button,
.stark-desktop .mg-osrm-panel-desktop .panel-body::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

/****************
 * Tools *
****************/
.stark-desktop .mg-controlcontainer-topright {
  bottom: 16px !important;
  top: unset;
  right: 14px;
}

.stark-desktop .dropdown-menu.pull-right {
  right: 60px;
  padding: 8px;
  border-radius: 14px;
  bottom: -60px;
  top: auto;
  left: auto;
}

.stark-desktop .ol-viewport .ol-control {
  background-color: unset;
}

.stark-desktop .ol-viewport .ol-control button, .stark-desktop .mg-table-container-default .ol-control button {
  background-color: #fff;
  border: 1px solid #fff;
  color: #333;
  height: 34px;
  line-height: 26px;
  width: 34px;
  border-radius: 6px;
}
/****************
* Zoom button *
****************/
/* Same 8px between all the map buttons, zoom buttons included (the
   OpenLayers buttons have their own margin) */
.stark-desktop .mg-controlcontainer-topright .ol-control {
  margin: 8px 0 0 0;
}

.stark-desktop .mg-controlcontainer-topright .ol-control button {
  margin: 0;
}

.stark-desktop .ol-viewport .ol-zoom .ol-zoom-out {
  border-radius: 6px;
}

.stark-desktop .ol-viewport .ol-zoom .ol-zoom-in {
  border-radius: 6px;
  margin-bottom: 8px;
}

/****************
* Basemap switcher *
****************/
/* Same horizontal place as the print PDF and query panels: away from the
   measure tool dropdown caret. The JS (PublicDesktop) aligns its bottom with
   the basemap button, 8px from it; until then (or without it) it is anchored
   at the bottom, above the Mapgears logo / copyright (top: 56rem was far
   from the button) */
.stark-desktop .mg-basemapswitcher-panel.dropdown-menu {
  top: auto;
  margin: 0;
  right: 96px;
  bottom: 48px;
  min-width: 0px;
  max-height: calc(100% - 64px);
  overflow-y: auto;
  border-radius: 14px;
  padding: 16px;
}

.stark-desktop .mg-controlcontainer-bottomright {
    right: 56px;
}

/* Same bottom line as the map tools column (.mg-controlcontainer-topright):
   right next to it, the 34px buttons are aligned with the last tool */
.stark-desktop .mg-controlcontainer-bottomright {
  bottom: 16px;
  margin: 0;
}

/****************
* Areas of interest *
****************/
/* Same look as the other map buttons: glass, 34px high, 6px radius, 8px
   between the dropdown and the edit button */
.stark-desktop .mg-areasofinterest-tool {
  display: flex;
  align-items: center;
  gap: 8px;
}

.stark-desktop .mg-areasofinterest-dropdown {
  height: 34px;
  max-width: 240px;
  margin: 0;
  padding: 0 32px 0 12px;
  border-radius: 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23333' d='M7.41 8.58 12 13.17l4.59-4.59L18 10l-6 6-6-6z'/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  color: #333;
  font-size: 14px;
  line-height: 32px;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.stark-desktop .mg-areasofinterest-tool-editbtn.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 6px;
  color: #333;
  font-size: 16px;
}

/* Hover: slightly more opaque, like the other map buttons */
.stark-desktop .mg-areasofinterest-dropdown:hover,
.stark-desktop .mg-areasofinterest-tool-editbtn.btn:hover,
.stark-desktop .mg-areasofinterest-tool-editbtn.btn:focus,
.stark-desktop .mg-areasofinterest-tool-editbtn.btn:active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #1A1A1A;
}

.stark-desktop .mg-areasofinterest-dropdown:focus,
.stark-desktop .mg-areasofinterest-tool-editbtn.btn:focus {
  outline: none;
}

.stark-desktop .mg-areasofinterest-dropdown:focus-visible,
.stark-desktop .mg-areasofinterest-tool-editbtn.btn:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stark-primary) 25%, transparent), 0 2px 12px rgba(15, 23, 42, 0.12);
}

.stark-desktop .mg-areasofinterest-tool-editbtn .mg-btnicon {
  margin: 0;
}

/****************
 * Print PDF *
****************/
/* Same place as the query results: away from the map tools (the measure
   tool has a dropdown caret, 6rem was only 60px with bootstrap's 10px root
   font size) and above the Mapgears logo / copyright */
.stark-desktop .stark-printPDF-control {
  top: unset !important;
  right: 96px;
  bottom: 48px;
  width: 320px;
  padding: 16px;
  border-radius: 16px;
}

.stark-desktop .stark-printPDF-control-panel {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: none;
}

.stark-desktop .stark-printPDF-control-panel legend {
  width: auto;
  margin: 0 0 12px 0;
  padding: 0;
  border: none;
  color: #1A1A1A;
  font-size: 15px;
  font-weight: 700;
  text-align: left;
}

/* Reset the bootstrap grid: one line per field, label on the left */
.stark-desktop .stark-printPDF-control .row {
  margin: 0;
}

.stark-desktop .stark-printPDF-control [class*='col-md-'] {
  position: static;
  float: none;
  width: 100%;
  margin: 0;
  padding: 0;
}

.stark-desktop .stark-printPDF-control .form-group {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 10px 0;
}

.stark-desktop .stark-printPDF-control .form-group .control-label {
  flex: 0 0 72px;
  width: 72px;
  padding: 0;
  color: #4A4A57;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

.stark-desktop .stark-printPDF-control .input-container {
  flex: 1 1 auto;
}

.stark-desktop .stark-printPDF-control .help-container {
  display: none;
}

.stark-desktop .stark-printPDF-control .form-control {
  height: 36px;
  padding: 6px 12px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.85);
  box-shadow: none;
  color: #1A1A1A;
  font-size: 13px;
}

.stark-desktop .stark-printPDF-control .form-control:focus {
  border-color: var(--stark-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--stark-primary) 15%, transparent);
}

.stark-desktop .stark-printPDF-control input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--stark-primary);
  cursor: pointer;
}

/* Print button: full width */
.stark-desktop .stark-printPDF-control .mg-form-field-button__container .form-group {
  margin: 4px 0 0 0;
}

.stark-desktop .stark-printPDF-control .mg-form-field-button__container .btn {
  width: 100%;
  height: 40px;
  border: none;
  border-radius: 10px;
  background-color: var(--stark-primary);
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 600;
}

.stark-desktop .stark-printPDF-control .mg-form-field-button__container .btn:hover,
.stark-desktop .stark-printPDF-control .mg-form-field-button__container .btn:focus {
  background-color: var(--stark-primary-hover);
}


/****************
 * Search Bar *
****************/
/* Centered (421px wide) when the map is wide enough, otherwise between the
   "Plan your trip" pill and the menus, on the same line, narrower.
   shortcut: room kept for the widest labels (French, services + legend);
   measure the pills in JS if longer labels overlap */
.stark-desktop #geocoder {
  top: 16px;
  left: max(330px, calc(50% - 210px));
  right: max(410px, calc(50% - 210px));
}

.stark-desktop #geocoder .input-group {
  position: relative;
  width: 100%;
}

/* Must win over the global .form-control radius above */
.stark-desktop #geocoder input.form-control {
  width: 100%;
  height: 44px;
  padding: 4px 48px 4px 16px;
  border: none;
  border-radius: 50px !important;
  background-color: #FFFFFF;
  color: #1A1A1A;
  font-size: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.stark-desktop #geocoder input.form-control::placeholder {
  color: #8A8A99;
}

/* Magnifier icon on the right of the search field */
.stark-desktop #geocoder .input-group:after {
  position: absolute;
  top: 50%;
  right: 16px;
  z-index: 3;
  transform: translateY(-50%);
  font-family: 'Material Design Icons';
  font-size: 20px;
  line-height: 1;
  color: #1A1A1A;
  pointer-events: none;
  content: "\F0349"; /* mdi-magnify */
}

.stark-desktop #geocoder .geocoder-results {
  max-height: 300px;
  max-width: 421px;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: none;
  border-radius: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/****************
 * Query *
****************/
/* Away from the map tools (some have a dropdown caret) and from the
   Mapgears logo / copyright at the bottom */
.stark-desktop .query-panel-popup {
  right: 96px;
  bottom: 48px;
  border-radius: 14px;
}

.stark-desktop .query-panel-popup .mg-component-pattern {
  border: 4px solid var(--stark-primary);
  margin: unset;
  border-radius: 14px;
}

/****************
 * Snow tours, districts *
****************/
/* Old position (not the modern menus bar): right edge aligned with the
   other map tools, 8px above them */
.stark-desktop .stark-list-ctn {
  display: flow-root;
  margin: 0;
}

.stark-desktop .stark-list-ctn > * {
  margin: 0 0 0 8px;
}

/* Snow tours and districts: dropdowns in the menus bar, same pill buttons
   as the services and the legend */
.stark-desktop .stark-control-menus > .dropdown {
  position: relative;
}

.stark-desktop .stark-control-menus > .dropdown > .btn,
.stark-desktop .stark-control-menus > .dropdown > .btn:hover,
.stark-desktop .stark-control-menus > .dropdown > .btn:focus,
.stark-desktop .stark-control-menus > .dropdown > .btn:active,
.stark-desktop .stark-control-menus > .dropdown.open > .btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: var(--stark-glass-border);
  border-radius: 50px;
  background-color: var(--stark-glass-bg);
  -webkit-backdrop-filter: var(--stark-glass-blur);
  backdrop-filter: var(--stark-glass-blur);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  outline: none;
}

/* Arrow under the opened pill, touching its menu (like the other pills) */
.stark-desktop .stark-control-menus > .dropdown.open:after {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  z-index: 1001;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: none;
  border-bottom-color: var(--stark-glass-bg);
  content: "";
}

/* Chevron like the other pills, instead of the bootstrap caret */
.stark-desktop .stark-control-menus > .dropdown > .btn > .caret {
  display: none;
}

.stark-desktop .stark-control-menus > .dropdown > .btn:after {
  font-family: 'Material Design Icons';
  font-size: 16px;
  line-height: 1;
  content: "\F0140"; /* mdi-chevron-down */
}

.stark-desktop .stark-control-menus > .dropdown.open > .btn:after {
  content: "\F0143"; /* mdi-chevron-up */
}

/* Icon on the left, like the services and the legend */
.stark-desktop .stark-control-menus > .dropdown > .btn:before {
  font-family: 'Material Design Icons';
  font-size: 20px;
  line-height: 1;
}

.stark-desktop .stark-control-menus > .stark-control-snowtour > .btn:before {
  content: "\F1283"; /* mdi-selection-marker */
}

.stark-desktop .stark-control-menus > .mg-control-quickzoom > .btn:before {
  content: "\F0117"; /* mdi-checkbox-blank-badge-outline */
}

/* Not enough room for the search bar (class set in JS, see
   stark.addon.page.PublicDesktop#fitMenus_): the snow tour and districts
   pills only show their icon (round buttons) */
.stark-desktop .stark-control-menus.stark-control-menus-compact > .dropdown > .btn,
.stark-desktop .stark-control-menus.stark-control-menus-compact > .dropdown > .btn:hover,
.stark-desktop .stark-control-menus.stark-control-menus-compact > .dropdown > .btn:focus,
.stark-desktop .stark-control-menus.stark-control-menus-compact > .dropdown > .btn:active,
.stark-desktop .stark-control-menus.stark-control-menus-compact > .dropdown.open > .btn {
  justify-content: center;
  width: 44px;
  padding: 0;
  gap: 0;
  font-size: 0;
}

.stark-desktop .stark-control-menus.stark-control-menus-compact > .dropdown > .btn:after {
  display: none;
}

/* Glass menus, under their button and aligned on its right (like the
   services and the legend menus) */
.stark-desktop .stark-control-snowtour-regions,
.stark-desktop .stark-control-snowtour-list,
.stark-desktop .stark-control-menus .mg-control-quickzoom > .dropdown-menu {
  min-width: 150px;
  padding: 4px;
  border: var(--stark-glass-border);
  border-radius: 10px;
  background-color: var(--stark-glass-bg);
  -webkit-backdrop-filter: var(--stark-glass-blur);
  backdrop-filter: var(--stark-glass-blur);
  box-shadow: var(--stark-glass-shadow);
}

.stark-desktop .stark-control-snowtour-regions,
.stark-desktop .stark-control-menus .mg-control-quickzoom > .dropdown-menu {
  top: 54px;
  right: 0;
  left: auto;
  min-width: 220px;
  margin: 0;
  padding: 8px;
  border-radius: 16px;
}

.stark-desktop .stark-control-menus .mg-control-quickzoom > .dropdown-menu {
  max-height: min(480px, calc(100vh - 140px));
  overflow-y: auto;
}

.stark-desktop .stark-control-menus .mg-control-quickzoom > .dropdown-menu > li > a {
  padding: 5px 8px;
  border-radius: 6px;
  color: #1A1A1A;
  font-size: 13px;
}

.stark-desktop .stark-control-menus .mg-control-quickzoom > .dropdown-menu > li > a:hover,
.stark-desktop .stark-control-menus .mg-control-quickzoom > .dropdown-menu > li > a:focus {
  background-color: var(--stark-glass-inner);
  color: #1A1A1A;
  outline: none;
}

/* 6px between the regions and the snow tours, first snow tour on the same
   line as its region */
.stark-desktop .stark-control-snowtour-list {
  top: -5px;
  right: calc(100% + 11px);
  max-height: 60vh;
  overflow-y: auto;
}

/* Invisible bridge over the 6px: the snow tours stay shown when the mouse
   goes from the region to them */
.stark-desktop .stark-control-snowtour-region:hover:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 11px;
}

/* Inside the blurred regions menu, the blur does not apply to the snow tours
   menu: nearly opaque instead */
.stark-desktop .stark-control-snowtour-list {
  background-color: rgba(255, 255, 255, 0.94);
}

.stark-desktop .stark-control-snowtour-header {
  padding: 4px 8px 2px 8px;
  color: #6E7191;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.stark-desktop .stark-control-snowtour-regions > li > a,
.stark-desktop .stark-control-snowtour-list > li > a {
  gap: 6px;
  padding: 5px 8px;
  border-radius: 6px;
  color: #1A1A1A;
  font-size: 13px;
}

.stark-desktop .stark-control-snowtour-regions > li > a:hover,
.stark-desktop .stark-control-snowtour-regions > li > a:focus,
.stark-desktop .stark-control-snowtour-region:hover > a,
.stark-desktop .stark-control-snowtour-list > li > a:hover,
.stark-desktop .stark-control-snowtour-list > li > a:focus {
  background-color: var(--stark-glass-inner);
  color: #1A1A1A;
  outline: none;
}

.stark-desktop .stark-control-snowtour-region-count {
  color: #6E7191;
  font-size: 12px;
}

.stark-desktop .stark-control-snowtour-region .fa {
  order: -1;
  color: #A0A3BD;
}

.stark-desktop .stark-control-snowtour-list > li > a {
  padding-left: 4px;
}

/* Selected snow tour: theme colour */
.stark-desktop .stark-control-snowtour-list > li.stark-control-snowtour-item-active > a,
.stark-desktop .stark-control-snowtour-list > li.stark-control-snowtour-item-active > a:before {
  color: var(--stark-primary);
}

/* Browsers without backdrop-filter: nearly opaque so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stark-desktop .stark-control-snowtour > .btn,
  .stark-desktop .stark-control-snowtour-regions,
  .stark-desktop .stark-control-snowtour-list {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/****************
 * ORSM TOOL *
****************/

.stark-desktop .panel-default > .panel-heading{
  padding: 8px;
  border-radius: 14px;
  background-color: #fff;
  border-color: unset;
}

/* Same top offset as the search bar and the menus */
.stark-desktop .mg-osrm-panel-desktop {
  position: absolute;
  top: 16px;
  left: 16px;
  margin: 0;
}

.stark-desktop .mg-osrm-panel-desktop {
  border: none;
  background-color: transparent;
  box-shadow: none;
}

/* "Plan your trip" pill, same look as the legend button */
.stark-desktop .mg-osrm-panel-desktop > .panel-heading {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 50px;
  background-color: #FFFFFF;
  color: #1A1A1A;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.stark-desktop .mg-osrm-panel-desktop > .panel-heading .panel-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
}

.stark-desktop .mg-osrm-panel-desktop > .panel-heading .panel-title .mg-fa {
  font-size: 18px;
}

.stark-desktop .mg-osrm-panel-desktop > .panel-heading:after {
  float: none;
  font-family: 'Material Design Icons';
  font-size: 16px;
  line-height: 1;
  content: "\F0143"; /* mdi-chevron-up */
}

.stark-desktop .mg-osrm-panel-desktop > .panel-heading.collapsed:after {
  content: "\F0140"; /* mdi-chevron-down */
}

/* Opened: pointer towards the menu */
.stark-desktop .mg-osrm-panel-desktop > .panel-heading:not(.collapsed):before {
  position: absolute;
  top: calc(100% + 6px); /* touches the card, 12px under the pill */
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top: none;
  border-bottom-color: var(--stark-glass-bg);
  content: "";
}

/* Expanded content as a separate rounded card under the pill */
.stark-desktop .mg-osrm-panel-desktop > .collapse,
.stark-desktop .mg-osrm-panel-desktop > .collapsing {
  position: relative;
  z-index: 1;
  width: 330px;
  margin-top: 12px;
  overflow: hidden;
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.stark-desktop .mg-osrm-panel-desktop .panel-body {
  max-height: min(560px, calc(100vh - 200px));
  padding: 16px;
  overflow-y: auto;
}

/* All the waypoints are visible: the panel scrolls, not only the list (it
   was limited to 11rem, about two waypoints) */
.stark-desktop .mg-osrm-panel-desktop .mg-osrm-manager-waypoints {
  max-height: none;
  overflow: visible;
}

/* Waypoints */
.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 0 0 6px 0;
  padding: 6px 8px 6px 10px;
  border-radius: 12px;
  background-color: var(--stark-glass-inner);
  font-size: 13px;
  color: #333333;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-icon {
  flex: 0 0 auto;
  box-sizing: border-box;
  width: 24px;
  height: 24px;
  max-height: none;
  margin: 0;
  border-radius: 6px;
  line-height: 22px;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-draggable {
  flex: 0 0 auto;
  color: #8A8A99;
  cursor: grab;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-label {
  flex: 1 1 auto;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-removebtn {
  flex: 0 0 auto;
  color: #8A8A99;
}

/* "Add a new destination": text button, no grey box, aligned with the
   letters of the waypoints */
.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-add {
  margin: 0;
  padding: 6px 8px 6px 10px;
  background-color: transparent;
}

/* The button already has a "+" icon: no grey "+" box on its left */
.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-add .mg-osrm-waypoint-icon {
  display: none;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-waypoint-add .btn {
  padding: 0;
  border: none;
  background: none;
  box-shadow: none;
  color: var(--stark-primary);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
}

/* Summary / instructions in a light blue box */
.stark-desktop .mg-osrm-panel-desktop .mg-osrm-directions-summary {
  margin: 10px 0 0 0;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-directions-summary-instructions,
.stark-desktop .mg-osrm-panel-desktop .mg-osrm-directions-summary-ctn:not(:empty) {
  padding: 12px;
  border-radius: 12px;
  background-color: color-mix(in srgb, var(--stark-primary) 8%, transparent);
  font-size: 13px;
  color: #333333;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-directions-summary-instructions:empty {
  display: none;
}

.stark-desktop .mg-osrm-panel-desktop .mg-osrm-directions-summary-error-message:not(:empty) {
  margin: 8px 0 0 0;
  color: #D61F3C;
  font-size: 13px;
}

/* Footer: rounded outlined buttons, reset in red */
.stark-desktop .mg-osrm-panel-desktop .panel-footer {
  padding: 12px 16px;
  border-top: 1px solid #EFF0F6;
  background-color: transparent;
}

.stark-desktop .mg-osrm-panel-desktop .panel-footer .btn-group {
  display: flex;
  gap: 6px;
}

.stark-desktop .mg-osrm-panel-desktop .panel-footer .btn-group > .btn {
  float: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: 1px solid #E3E4EB;
  border-radius: 50px !important;
  background-color: #FFFFFF;
  box-shadow: none;
  color: #1A1A1A;
  font-size: 12px;
}

.stark-desktop .mg-osrm-panel-desktop .panel-footer .btn-group > .btn:first-child {
  color: #D61F3C;
}

.stark-desktop .mg-osrm-panel-desktop .panel-footer .btn-group > .btn:not(:disabled):hover {
  background-color: var(--stark-glass-inner);
}

/* Markers to drag on the map (`enableRoutingDraggableMarkers`): next to the
   routing card (16px + 330px + 12px gap), level with its top */
.stark-desktop .mg-osrm-draggablewaypoints {
  top: 72px;
  left: 358px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.stark-desktop .mg-osrm-draggablewaypoints-item {
  padding: 6px;
  border: 1px solid transparent;
  border-radius: 12px;
  background-color: #FFFFFF;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  cursor: grab;
}

.stark-desktop .mg-osrm-draggablewaypoints-item:hover {
  border-color: var(--stark-primary);
}

.stark-desktop .mg-osrm-draggablewaypoints-item-label {
  top: 6px;
  left: 6px;
}

/****************
 * Info popup *
****************/
.stark-desktop .stark-component-infopopup {
  --stark-infopopup-color: var(--stark-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 20;
  box-sizing: border-box;
  width: 540px;
  max-width: calc(100% - 32px);
  max-height: calc(100% - 32px);
  padding: 28px 24px 24px 24px;
  overflow-y: auto;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background-color: #FFFFFF;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  color: #1A1A1A;
  animation: stark-infopopup-in 0.2s ease-out;
}

/* Coloured bar at the top */
.stark-desktop .stark-component-infopopup:before {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--stark-infopopup-color), var(--stark-secondary));
  content: "";
}

.stark-desktop .stark-component-infopopup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 12px 0;
}

.stark-desktop .stark-component-infopopup-category {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border: 1px solid var(--stark-infopopup-color);
  border-radius: 50px;
  background-color: color-mix(in srgb, var(--stark-infopopup-color) 10%, #FFFFFF);
  color: var(--stark-infopopup-color);
  font-size: 13px;
  font-weight: 600;
  line-height: 22px;
}

.stark-desktop .stark-component-infopopup-close {
  margin: 0 0 0 auto;
  padding: 0;
  border: none;
  background: none;
  color: #8A8A99;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.stark-desktop .stark-component-infopopup-close:before {
  font-family: 'Material Design Icons';
  content: "\F0156"; /* mdi-close */
}

.stark-desktop .stark-component-infopopup-close:hover {
  color: #1A1A1A;
}

.stark-desktop .stark-component-infopopup-image {
  display: block;
  width: 100%;
  max-height: 260px;
  margin: 0 0 10px 0;
  object-fit: cover;
  border-radius: 12px;
}

.stark-desktop .stark-component-infopopup-image-description {
  margin: 0 0 4px 0;
  color: #8A8A99;
  font-size: 13px;
}

.stark-desktop .stark-component-infopopup-title {
  margin: 4px 0 8px 0;
  color: #14111F;
  font-size: 32px;
  font-weight: 800;
  line-height: 1.2;
}

.stark-desktop .stark-component-infopopup-description {
  color: #4A4A57;
  font-size: 16px;
  line-height: 1.5;
}

.stark-desktop .stark-component-infopopup-description p {
  margin: 0 0 8px 0;
}

.stark-desktop .stark-component-infopopup-description ul {
  margin: 8px 0 0 0;
  padding: 0 0 0 18px;
}

.stark-desktop .stark-component-infopopup-description li {
  margin: 0 0 6px 0;
}

.stark-desktop .stark-component-infopopup-description li::marker {
  color: var(--stark-secondary);
}

.stark-desktop .stark-component-infopopup-button {
  display: block;
  margin: 20px 0 0 0;
  padding: 14px 16px;
  border-radius: 12px;
  background-color: #1A1427;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.stark-desktop .stark-component-infopopup-button:hover,
.stark-desktop .stark-component-infopopup-button:focus {
  background-color: #2E2640;
  color: #FFFFFF;
  text-decoration: none;
}

@keyframes stark-infopopup-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 12px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stark-desktop .stark-component-infopopup {
    animation: none;
  }
}

/****************
 * Smaller maps: the search bar, the "Plan your trip" pill and the menus must
 * not overlap (the width of the map, not of the window, is used)
****************/
.stark-desktop #center {
  container-type: inline-size;
}

/* Narrow: the pills only show their icon (round buttons), so the search bar
   keeps a usable width between them */
@container (max-width: 1000px) {
  .stark-desktop #geocoder {
    left: max(68px, calc(50% - 210px));
    right: max(120px, calc(50% - 210px));
  }

  .stark-desktop .stark-control-menus > .panel > .panel-heading,
  .stark-desktop .mg-osrm-panel-desktop > .panel-heading {
    justify-content: center;
    width: 44px;
    padding: 0;
  }

  .stark-desktop .stark-control-menus > .panel > .panel-heading .panel-title,
  .stark-desktop .mg-osrm-panel-desktop > .panel-heading .panel-title {
    gap: 0;
    font-size: 0;
  }

  .stark-desktop .stark-control-menus > .panel > .panel-heading:after,
  .stark-desktop .mg-osrm-panel-desktop > .panel-heading:after {
    display: none;
  }

  .stark-desktop .stark-control-menus > .dropdown > .btn,
  .stark-desktop .stark-control-menus > .dropdown > .btn:hover,
  .stark-desktop .stark-control-menus > .dropdown > .btn:focus,
  .stark-desktop .stark-control-menus > .dropdown > .btn:active,
  .stark-desktop .stark-control-menus > .dropdown.open > .btn {
    justify-content: center;
    width: 44px;
    padding: 0;
    gap: 0;
    font-size: 0;
  }

  .stark-desktop .stark-control-menus > .dropdown > .btn:after {
    display: none;
  }
}

/****************
 * Glass panels and buttons (keep at the end: overrides the white backgrounds above) *
****************/
.stark-desktop #stark-control-legend-body,
.stark-desktop #stark-control-services-body,
.stark-desktop .mg-osrm-panel-desktop > .collapse,
.stark-desktop .mg-osrm-panel-desktop > .collapsing,
.stark-desktop #geocoder .geocoder-results,
.stark-desktop .stark-printPDF-control,
.stark-desktop .mg-basemapswitcher-panel.dropdown-menu {
  border: var(--stark-glass-border);
  background-color: var(--stark-glass-bg);
  -webkit-backdrop-filter: var(--stark-glass-blur);
  backdrop-filter: var(--stark-glass-blur);
  box-shadow: var(--stark-glass-shadow);
}

/*
 * Menus opened with the bootstrap "collapse": it animates the height up to
 * the scrollHeight with jQuery, which adds the padding and the border again
 * (border-box): the menu opened too high, then shrank. No vertical padding
 * and no border on these menus (the spacing is on their content).
 */
.stark-desktop #stark-control-legend-body,
.stark-desktop #stark-control-services-body {
  padding-top: 0;
  padding-bottom: 0;
  border: none;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), var(--stark-glass-shadow);
}

.stark-desktop #stark-control-legend-body > :first-child,
.stark-desktop #stark-control-services-body > :first-child {
  margin-top: 12px;
}

.stark-desktop #stark-control-legend-body > :last-child,
.stark-desktop #stark-control-services-body > :last-child {
  margin-bottom: 12px;
}

/* Buttons over the map: pills, search field, map tools */
.stark-desktop .mg-osrm-panel-desktop > .panel-heading,
.stark-desktop .stark-control-legend .panel-heading,
.stark-desktop .stark-control-menus > .panel > .panel-heading,
.stark-desktop #geocoder input.form-control,
.stark-desktop .ol-viewport .ol-control button,
.stark-desktop .mg-areasofinterest-dropdown,
.stark-desktop .mg-areasofinterest-tool-editbtn.btn {
  border: var(--stark-glass-border);
  background-color: var(--stark-glass-bg);
  -webkit-backdrop-filter: var(--stark-glass-blur);
  backdrop-filter: var(--stark-glass-blur);
  box-shadow: 0 2px 12px rgba(15, 23, 42, 0.12);
}

/* No white halo around the buttons: the OpenLayers control container has a
   semi-transparent white background (more opaque on hover) */
.stark-desktop .ol-viewport .ol-control,
.stark-desktop .ol-viewport .ol-control:hover,
.stark-desktop .ol-viewport .ol-control:focus-within {
  padding: 0;
  border: none;
  background-color: transparent;
  box-shadow: none;
}

/* Hover: slightly more opaque, the icon stays dark (not white) */
.stark-desktop .ol-viewport .ol-control button:hover,
.stark-desktop .ol-viewport .ol-control button:focus,
.stark-desktop .ol-viewport .ol-control button:active {
  background-color: rgba(255, 255, 255, 0.9);
  color: #1A1A1A;
  outline: none;
}

.stark-desktop .ol-viewport .ol-control button:hover *,
.stark-desktop .ol-viewport .ol-control button:focus *,
.stark-desktop .ol-viewport .ol-control button:active * {
  color: #1A1A1A;
}

/* Browsers without backdrop-filter: nearly opaque so the text stays readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .stark-desktop #stark-control-legend-body,
  .stark-desktop #stark-control-services-body,
  .stark-desktop .mg-osrm-panel-desktop > .collapse,
  .stark-desktop .mg-osrm-panel-desktop > .collapsing,
  .stark-desktop #geocoder .geocoder-results,
  .stark-desktop .stark-printPDF-control,
  .stark-desktop .mg-basemapswitcher-panel.dropdown-menu,
  .stark-desktop .mg-osrm-panel-desktop > .panel-heading.collapsed,
  .stark-desktop .stark-control-legend .panel-heading.collapsed,
  .stark-desktop .stark-control-menus > .panel > .panel-heading.collapsed,
  .stark-desktop #geocoder input.form-control,
  .stark-desktop .ol-viewport .ol-control button,
  .stark-desktop .mg-areasofinterest-dropdown,
  .stark-desktop .mg-areasofinterest-tool-editbtn.btn {
    background-color: rgba(255, 255, 255, 0.95);
  }
}

/****************
 * Modals (share map, getting started, ...) *
****************/
.stark-desktop .modal-content {
  overflow: hidden;
  border: none;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.25);
}

.stark-desktop .modal-header {
  padding: 16px 20px 12px 20px;
  border-bottom: 1px solid #EFF0F6;
}

.stark-desktop .modal-header .modal-title {
  color: #1A1A1A;
  font-size: 18px;
  font-weight: 700;
}

.stark-desktop .modal-body {
  padding: 16px 20px;
}

.stark-desktop .modal-body > .row {
  margin: 0;
}

/* Nested body (share map tabs content) */
.stark-desktop .modal-body .modal-body {
  padding: 0;
}

.stark-desktop .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #EFF0F6;
}

.stark-desktop .modal-footer .btn {
  padding: 8px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.stark-desktop .modal-footer .btn-default {
  border: 1px solid #E3E4EB;
  background-color: #FFFFFF;
  color: #1A1A1A;
}

.stark-desktop .modal-footer .btn-default:hover {
  background-color: #F7F8FA;
}

.stark-desktop .modal-footer .btn-primary {
  border: none;
  background-color: var(--stark-primary);
}

/* Tabs: underline style */
.stark-desktop .modal .nav-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 16px 0;
  border-bottom: 1px solid #EFF0F6;
}

.stark-desktop .modal .nav-tabs > li {
  float: none;
  margin: 0 0 -1px 0;
}

.stark-desktop .modal .nav-tabs > li > a,
.stark-desktop .modal .nav-tabs > li > a:hover,
.stark-desktop .modal .nav-tabs > li > a:focus {
  margin: 0;
  padding: 8px 12px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: #6B6F80;
  font-size: 14px;
  font-weight: 500;
}

.stark-desktop .modal .nav-tabs > li.active > a,
.stark-desktop .modal .nav-tabs > li.active > a:hover,
.stark-desktop .modal .nav-tabs > li.active > a:focus {
  border: none;
  border-bottom: 2px solid var(--stark-primary);
  background: none;
  color: var(--stark-primary);
}

.stark-desktop .modal .control-label {
  margin: 0 0 6px 0;
  color: #4A4A57;
  font-size: 13px;
  font-weight: 500;
}

/* Field + attached button (share map "Copy & Close") */
.stark-desktop .modal .input-group .form-control {
  height: 40px;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-right: none;
  border-radius: 10px 0 0 10px;
  box-shadow: none;
  font-size: 13px;
}

.stark-desktop .modal .input-group .form-control:focus {
  border-color: var(--stark-primary);
}

.stark-desktop .modal .input-group-btn .btn {
  height: 40px;
  padding: 0 14px;
  border: none;
  border-radius: 0 10px 10px 0;
  background-color: var(--stark-primary);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 600;
}

.stark-desktop .modal .input-group-btn .btn:hover {
  background-color: var(--stark-primary-hover);
  color: #FFFFFF;
}

.stark-desktop .modal #qrcode {
  display: flex;
  justify-content: center;
  margin: 12px 0;
}

.stark-desktop .modal .small {
  display: block;
  color: #6B6F80;
  text-align: center;
}

/****************
 * Loading of the page
****************/
/* The page loader cog is hidden once the trails loader (with its message)
   takes over: only one cog */
.mg-masked > #mg-loading #spinning-icon {
  display: none;
}

/* The loading message is above the grey mask, like the cog */
.mg-masked > .mg-loading-spinner,
.mg-masked > .mg-loading-message {
  z-index: 100000;
}

/****************
 * Terms of use page: above everything (map buttons included) *
****************/
.stark-desktop .stark-terms-container {
  right: 0;
  z-index: 3000;
}