/**
 * All of the CSS for the public-facing CSS source
 * for the MODEC distributors interactive map.
 */
#wrapper {
  height: 620px;
  width: 100%;
  position: relative;
  overflow: hidden;
  padding-bottom: 5px;
  /* margin: 30px 0px;
  box-shadow: 0px 0px 30px 10px #a2d4de, 0px 0px 30px 10px var(--color-primary);
  -webkit-box-shadow: 0px 0px 30px 10px #a2d4de, 0px 0px 30px 10px var(--color-primary);
  -moz-box-shadow: 0px 0px 30px 10px #a2d4de, 0px 0px 30px 10px var(--color-primary);
  filter:progid:DXImageTransform.Microsoft.Glow(Color=#a2d4de,Strength=40); */
}

#map {
  height: 100%;
  /*idth: calc(100% - 55px);*/
  margin: auto;
  border-radius: 5px;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,.1);
}
#search {
  outline: none !important;
  width: 300px;
  position: absolute;
  top: 10px;
  left: 75px;
  background-color: #ffffff;
  z-index: 2000;
  padding: 4px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  /* gap: 8px; */
}
#search-field {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
#search-field input {
  outline: none !important;

  flex-grow: 1;
  border: 1px solid #e2e2e2;
  border-radius: 8px;
  font-size: 16px;
  padding: 8px;
}
#search-field button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
#search-results {
  display: none;
}
#search-results ul {
  list-style: none;
  padding: 4px;
  margin: 0;
}
#search-results ul li {
  cursor: pointer;
}
#search-results ul li:hover {
  cursor: pointer;
  color: var(--color-primary);
}
#map > div.leaflet-pane.leaflet-map-pane{
  /*filter: brightness(1.15) contrast(1.2) !important;*/
  filter: brightness(1.1) saturate(0.55) contrast(1.4) !important;
}

#overlay {
  overflow: scroll;
  height: calc(100% - 20px);
  width: 300px;
  position: absolute;
  top: 10px;
  right: -300px;
  background-color: #ffffff;
  z-index: 500;
  margin-left: 10px;
  padding: 12px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  overflow-y: auto;
  transition: right 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895),
    box-shadow 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895);
}
#overlay.visible {
  overflow: hidden;
/*  overflow-y: auto;*/
  right: 0px;
  box-shadow: -2px 0px 10px 2px rgba(0, 0, 0, 0.25);
}
#overlay #overlay-title {

  width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;
    border-color: #007fc163;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    margin-bottom: 5px;
}

#overlay #overlay-title h2 {
  line-height: 1.2;
}
#overlay #overlay-title #close-overlay-button {
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s cubic-bezier(0.82, 0.085, 0.395, 0.895);
}
#overlay.visible #overlay-title #close-overlay-button {
  opacity: 100;
}
#overlay #distributors-list {
  overflow: auto;
  height: calc(100% - 35px);
}
#overlay #distributors-list .distributor-item {
  padding: 24px 0px;
  border-bottom: 1px solid #e2e2e2;
}
#overlay #distributors-list .distributor-item h4 {
  margin-top: 8px;
  margin-bottom: 4px;
  font-weight: 600;
}
#overlay #distributors-list .distributor-item p {
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 10px;
  font-size: 14px;
}
#overlay #distributors-list .distributor-item p.distributor-address,
#overlay #distributors-list .distributor-item .distributor-contact p {
  font-size: small;
}
#overlay #distributors-list .distributor-item .distributor-item-hero {
  width: 100%;
  text-align: center;
}
#overlay
  #distributors-list
  .distributor-item
  .distributor-item-hero
  img.distributor-logo {
  max-width: 95%;
  max-height: 100px;
}

#overlay #distributors-list::-webkit-scrollbar-track
{
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;
	border-radius: 10px;
}

#overlay #distributors-list::-webkit-scrollbar
{
	width: 10px;
	background-color: #F5F5F5;
}

#overlay #distributors-list::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-image: -webkit-gradient(linear,
									   left bottom,
									   left top,
									   color-stop(0.33, var(--color-primary)),
									   /*color-stop(0.5, #004d6d),*/
									   color-stop(0.66, var(--color-primary)));
  box-shadow: inset 0 0 30px rgba(0,0,0,0.3);
}


#map > div.leaflet-control-container > div.leaflet-bottom.leaflet-right .leaflet-control-attribution.leaflet-control{
  display: none !important;
}

.distributor-item i{
  font-size: 14px;
  color: var(--color-primary);
}

/* Styles pour les écrans étroits (mobile) */
@media screen and (max-width: 767px) {
  #overlay {
    overflow: scroll;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    right: -100%;
    background-color: #ffffff;
    z-index: 500;
    margin-left: 10px;
    padding: 12px;
    z-index: 10000;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    overflow-y: auto;
    transition: right 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895),
      box-shadow 0.3s cubic-bezier(0.82, 0.085, 0.395, 0.895);
  }
}