/* Explore page (/explore) styles.
 *
 * Extracted from the three inline <style> blocks in views/events-explore.ejs
 * (SITE-214). Linked from the same position in <head>, immediately after
 * includes/head, so the cascade order is unchanged. The heavy use of
 * !important below is inherited: these rules override the theme stylesheets
 * and the auto-generated OpenLayers chrome, so specificity and order matter. */

/* Explore is a full-viewport map page, so the footer is not shown. It stays in
 * the markup because it carries the .toastr-notify anchor that every _toastr()
 * call on the site depends on (see views/includes/footer.ejs). Hidden here
 * rather than from JS so it is never painted and then pulled away. */
#footer {
  display: none;
}

#btn-events-menu:after {
  content: none;
}

#select2-communitySelect-container, #select2-purposeSelect-container,
#select2-routeCommunitySelect-container, #select2-routeTypeSelect-container, #select2-routeActivityTypeSelect-container {
  padding-top: 3px !important;
  font-size: 12px !important;
  color: #666;
}

/* Scoped to the routes filter panel. This used to be a bare `input` selector,
 * which also shrank every input in the create-event/route/community wizards and
 * the global modals to ~10px. */
#route_filter_modal input,
#route_filter_modal input::placeholder {
  font-size: x-small !important;
  font-family: "Google Sans", arial, sans-serif !important;
}

#filter-collapse-btn[data-toggle="collapse"] .fa:before {
  content: "Hide filters  \f0d8";
  font-family: 'Google Sans', 'FontAwesome', arial, sans-serif;
}

#filter-collapse-btn[data-toggle="collapse"].collapsed .fa:before {
  content: "Show filters  \f0d7";
  font-family: 'Google Sans', 'FontAwesome', arial, sans-serif;
}

.multiselect-container {
  width: 100% !important;
}

.multiselect-container li a {
  font-size: 13px;
  font-family: "Google Sans", arial, sans-serif !important;
  letter-spacing: 0.25px !important;
  font-weight: 300 !important;
}

.multiselect-container li a label {
  font-size: 13px;
  font-family: "Google Sans", arial, sans-serif !important;
  letter-spacing: 0.25px !important;
  font-weight: 300 !important;
  /* SITE-331: the vendored multiselect handler only acts when the click target is
     this label (or the checkbox inside it) — a click on the bare <a> falls through
     to stopPropagation() + blur(), so it is delivered and ignored. The theme's
     .checkbox rule (assets/css/essentials.css) leaves the label inline-block and
     shrink-to-fit, which left 60-80% of every option row inert. Stretching the
     label over the whole anchor makes any point in the row a label hit, handled by
     the branch the plugin already has — no extra click handler, which would race
     the plugin's own and could double-toggle. The vertical padding also lifts the
     row to 46px, over the 44px touch minimum; the 36px left padding is the theme's
     checkbox gutter, kept so the text does not shift. */
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 12px 6px 36px;
}

.olControlZoom {
  position: absolute;
  top: 10px;
  left: 16px !important;
}

a.olControlZoomIn {
  border-radius: 10px 10px 0 0 !important;
}

a.olControlZoomOut {
  border-radius: 0 0 10px 10px !important;
}

/* At the ends of the map's zoom range the buttons do nothing (the base layer bounds
   them), so show that instead of leaving an inert control looking active. !important
   for the same reason the two rules above use it: OpenLayers' own style.css styles
   these buttons (div.olControlZoom a, a.olControlZoomIn) and loads after this file. */
a.olControlZoomIn.olControlZoomDisabled,
a.olControlZoomOut.olControlZoomDisabled {
  opacity: 0.4 !important;
  cursor: default !important;
}

.map-btn {
  position: absolute;
  z-index: 1000;
  width: 40px;
  height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.7); /* Border color */
  border-radius: 50%; /* Makes the button circular */
  display: flex;
  align-items: center; /* Centers the icon vertically */
  justify-content: center; /* Centers the icon horizontally */
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  font-size: 20px; /* Adjust the icon size */
  background: rgba(0, 60, 136, 0.5);
}

.map-btn:hover {
  background-color: #003C88B3;
}

.map-btn i {
  font-size: 16px;
  color: #fff !important;
}

#my-location-btn {
  top: 70px; /* Adjust to place under the zoom controls */
  left: 10px;
}

#routes-filter-btn {
  top: 120px; /* Adjust to place under the zoom controls */
  left: 10px;
}

#elevationChartContainer {
  width: 102% !important;
}

.nav-link.active {
  background-color: rgba(148, 149, 150, 0.2) !important;
  color: black !important;
  border-radius: unset !important;
}

.nav-link:hover {
  background-color: rgba(148, 149, 150, 0.2) !important;
  color: black !important;
  border-radius: unset !important;
}

.olPopupContent {
  overflow: hidden !important;
}

.olPopup {
  border-radius: 4px !important;
}

.logo-center {
  text-align: -webkit-center !important;
}

#OpenLayers_Map_2_OpenLayers_ViewPort {
  border-radius: 3px !important;
}

.no_margin {
  margin: 0 !important;
}

.no_padding {
  padding: 0 !important;
}

#cover_img {
  padding: 140px 0 !important;
}

/* Empty / loading states. Replaces the stacks of <br/> tags that used to pad
 * these blocks out in the markup. */
.explore-empty-state {
  padding: 30px 0 90px;
  text-align: center;
}

.explore-empty-state h5 {
  margin: 0 auto 20px;
}

.explore-loader-offset {
  padding-top: 80px;
}

@media only screen and (max-width: 768px) {
  .close-slide-out-panel {
    padding: 13px !important;
  }

  .routes-row {
    margin-bottom: 100px !important;
  }

  #eventsTablePages {
    margin-bottom: 10px !important;
  }

  .filter-col {
    margin-bottom: 10px !important;
  }

  .hide-label {
    display: none !important;
  }

  #cover_img {
    padding: 120px 0 !important;
  }

  .no_margin_bottom_mb {
    margin-bottom: 0 !important;
  }

  .alert-info {
    text-align: center;
  }

  #register_to_edition {
    margin-top: 10px !important;
  }
}

.header-sub-title {
  margin-bottom: -4px !important;
}

/* Wizard validation messages. These three ids are rendered by the create
 * community/event/route wizard modals included on this page; the rules were
 * three byte-identical copies before. */
#errorToShowWarning,
#errorToShowWarning2,
#errorToShowTerms {
  color: red !important;
  font-weight: 500 !important;
}

body.modal-open {
  overflow: hidden;
}

.corner-ribbon {
  font-weight: bold;
  width: 200px;
  background: #DAA520;
  position: absolute;
  top: 25px;
  left: -50px;
  text-align: center;
  line-height: 100px;
  letter-spacing: 1px;
  color: #f0f0f0;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.corner-ribbon.shadow {
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
}

.corner-ribbon.top-left {
  top: -10px;
  left: -103px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  background-color: #DAA520;
  width: 256px;
  height: 70px;
}

.rankedC {
  overflow: hidden;
  box-shadow: rgba(0, 0, 0, 0) 0 0 0 !important;
  border: none !important;
  margin-bottom: 0 !important;
}

.peakImg {
  width: 214px !important;
  height: 119px !important;
}

.hide {
  display: none;
}

.show {
  display: block;
}
