/* ========================================================================== */
/* GLOBAL SETTINGS */
/* ========================================================================== */
#map-wrapper {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

#main {
  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  justify-content: stretch;
  align-items: stretch;
}

/* ========================================================================== */
/* MAIN PANELS */
/* ========================================================================== */
#top-panel {
  /* width: 24rem; */

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#main-panel {
  flex: 1;

  position: relative;

  padding-top: 0;
  padding-bottom: 1rem;
}

.panel {
  padding: 1rem;
}

/* ========================================================================== */
/* MAIN CONTAINERS */
/* ========================================================================== */
#map-container {
  padding: 0;
  margin: 0;

  /* Height must be a 'fixed' value for Drupal integration. Using 'vw' rather than vh for better aspect ratio. */
  /* Not using CSS 'aspect-ratio' for better browser support. */
  height: 50vw;

  width: 100%;
}

.major-container {
  padding: 1rem;
}

#location-input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

#location-address-panel {
  flex: 1;

  padding: 1rem 1rem 0 1rem;
}

#geocoder-container {
  display: flex;
  flex-direction: row;
  align-items: center;

  flex: 1;

  border: 1px solid #a6a6a6;
  border-radius: 3px;

  margin-left: 0.5rem;

  /* For the initial state before widget is ready. */
  height: 40px;
}

/* ========================================================================== */
/* GEOCODER */
/* ========================================================================== */
#geocoder {
  width: 99.9%;
  max-width: unset;
  box-shadow: unset;
  height: 100%;

  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

/* ========================================================================== */
/* LOCATION INFO */
/* ========================================================================== */
#location-address-container {
  display: flex;
  flex-direction: column;
}

#location-address-content {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
}

#location-address-text {
  margin: 0;
}

#location-address-icon {
  width: 2rem;
  height: 2rem;
}

.location-address-hint {
  margin-top: 1rem;
  padding-left: 0.5rem;
}

.location-address-background {
  background-color: #f8f8f8;
  padding: 0.25rem;
}

/* ========================================================================== */
/* MISCELLANEOUS */
/* ========================================================================== */
.gone {
  display: none !important;
}

.hidden {
  visibility: hidden;
}

/* ========================================================================== */
/* BUTTONS & ICONS */
/* ========================================================================== */
.pin-button {
  width: 2.5rem;
  height: 2.5rem;

  display: flex;
  justify-content: center;
  align-items: center;

  cursor: pointer;

  border: 1px solid #a6a6a6;
  border-radius: 3px;

  position: relative;
}

#pin-button {
  background-color: white;
}

#pin-button-clicked {
  background-color: white;
}

#pin-button-clicked {
  background-color: white;
}

#pin-button-clicked::before {
  content: "";
  position: absolute;
  top: 2.7rem;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #004375;
}

.pin-image {
  width: 2.25rem;
  height: 2.25rem;
}

#confirm-button {
  margin-bottom: 1rem;
}

#reset-button {
  margin-bottom: 0.5rem;
}

.main-button {
  font-size: 1rem;
  font-weight: 700;

  height: 2.5rem;

  background-color: #004375;
  color: white;
  padding: 0.75rem;
  border: none;
  border-radius: 3px;

  text-align: center;

  cursor: pointer;
}

.secondary-button {
  font-size: 1rem;
  font-weight: 700;

  height: 2.5rem;

  background-color: white;
  color: #004375;
  padding: 0.75rem;
  border: 1px solid #d5d5d5;
  border-radius: 3px;

  text-align: center;

  cursor: pointer;
}

.marker-image {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedcameramap/res/pin.svg");
  background-size: cover;
  width: 56px;
  height: 64px;
  top: -22px;
  cursor: pointer;
}

/* ========================================================================== */
/* MAPBOX OVERRIDES */
/* ========================================================================== */
.mapboxgl-ctrl-top-right {
  /* Make sure the start location suggestions dropdown will go over this. */
  z-index: 0;
}

#map-container
  .mapboxgl-ctrl
  button.mapboxgl-ctrl-fullscreen
  .mapboxgl-ctrl-icon {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedcameramap/res/maximize-svgrepo-com.svg");
  background-size: 18px 18px;
}

#map-container .mapboxgl-ctrl button.mapboxgl-ctrl-shrink .mapboxgl-ctrl-icon {
  background-image: url("/themes/tfnsw_corp_theme/source/tfnsw/form/speedcameramap/res/minimize-svgrepo-com.svg");
  background-size: 18px 18px;
}

#map-container a.mapboxgl-ctrl-logo {
  background-size: auto;
}

/* ========================================================================== */
/* SCREEN RESPONSIVENESS */
/* ========================================================================== */
@media only screen and (max-width: 600px) {
  #main {
    display: flex;
    flex-direction: column;
  }

  #top-panel {
    /* order: 2; */

    width: unset;

    /* flex: 1; */
  }

  #main-panel {
    /* order: 1; */

    height: 50%;

    flex: unset;

    padding: 1rem;
  }

  #map-container {
    height: 50vh;
  }

  .major-container {
    padding: 0;
  }

  #first-search-widget-container {
    max-width: calc(100% - 2.5rem); /* Fixes overlfow issue with Galaxy Fold. */
  }
}

/* ========================================================================== */
/* SMALL DEVICES LANDSCAPE MODE */
/* ========================================================================== */
@media only screen and (max-height: 600px) and (orientation: landscape) {
  .panel {
    padding: 0.5rem;
  }

  .major-container {
    padding: 0.5rem;
  }

  #main-panel {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

#speedCameraError.hide-error {
  display: none;
}

/* ========================================================================== */
/* ULTRA WIDE SCREEN */
/* ========================================================================== */
/* Following Drupal's media query for wide screen configuration. */
@media (min-width: 1200px) {
  #map-container {
    height: 800px;
  }
}