/* ============================================================================
   RESPONSIVE MEDIA QUERIES
   All responsive breakpoints and adjustments
   ============================================================================ */

/* ============================================================================
   SMALL MOBILE DEVICES (max-width: 480px)
   ============================================================================ */

@media only screen and (max-width: 480px) {
  .map_hint_text,
  .map_container {
    display: none !important;
  }

  .app_page {
    margin: 0;
    padding: var(--space-md);
  }

  body {
    margin: 0;
    background-color: var(--color-button-text);
  }

  .btn_position_left {
    left: var(--position-button-left-offset-mobile);
  }

  .btn_position_right {
    left: var(--position-button-right-offset-mobile);
  }

  .btn_position_middle, .btn_position_top {
    top: var(--position-button-mobile-offset);
  }

  .ui_pdfview embed {
    width: var(--pdfview-mobile-width);
    height: var(--pdfview-mobile-height);
  }

  body:has(.navbar .navbar-collapse.show) nav.navbar {
    margin-bottom: var(--mobile-nav-margin-bottom);
  }

  body:not(:has(.navbar .navbar-collapse.show)) nav.navbar {
    margin-bottom: 0;
  }

  .accordion-item .accordion-body {
    padding: var(--space-md);
    box-shadow: unset;
    margin: 0;
  }

  .accordion-header .accordion-button {
    padding: var(--space-md);
  }

  .top_nav_div {
    height: var(--navbar-height-mobile);
    max-height: var(--navbar-max-height-mobile);
  }

  .shopping_cart_button {
    width: var(--shopping-cart-button-width-small);
    padding: var(--space-md);
  }
}

/* ============================================================================
   SMALL SCREENS - right_tabs wrapping (max-width: 768px)
   ============================================================================ */

@media (max-width: 767px) {
  #right_tabs {
    width: auto;
    flex-wrap: wrap;
  }

  #right_tabs > div {
    flex: 0 1 auto !important;
  }

  #right_tabs .shiny-input-container {
    height: var(--shopping-cart-button-height-mobile);
  }


  /* Hide shopping cart label on small screens */
  .shopping_cart_label {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .shopping_cart_label {
    display: block;
  }
}

/* ============================================================================
   TABLET AND LARGER (min-width: 768px)
   ============================================================================ */

@media (min-width: 768px) {
  .button {
    width: var(--button-width);
    height: var(--button-height);
  }

  /*#right_tabs {
    flex-wrap: nowrap;
    width: var(--right-tabs-width);
  }*/

  #right_tabs > div {
    flex: var(--right-tabs-child-flex) !important;
    min-width: 0;
  }

  .ui_global_selectize_language {
    height: var(--selectize-language-height);
    width: var(--selectize-language-width);
  }

  .app_page {
    max-width: var(--app-page-max-width-large);
    margin: 0 auto;
    box-shadow: var(--shadow-default) var(--color-shadow);
  }

  .accordion-item .accordion-body {
    padding: var(--padding-accordion-expanded);
    box-shadow: 0 2px 5px var(--color-shadow);
    margin: 1em;
  }

  .accordion-header .accordion-button {
    padding: var(--padding-accordion);
  }

  .ui_shopping_cart_container {
    flex: var(--shopping-cart-flex-basis);
    margin: var(--space-xl);
    min-width: auto;
  }

  .ui_shopping_cart_sumsiderbar {
    flex: var(--shopping-cart-sidebar-flex);
    margin: var(--space-xl);
  }
}

@media screen and (min-width: 768px) {
  .mapboxgl-ctrl-geocoder {
    position: absolute !important;
  }
}

/* ============================================================================
   BELOW DESKTOP - WRAP RIGHT_TABS CHILDREN (max-width: 1199px)
   ============================================================================ */

@media (max-width: 1199px) {

  /* Hide shopping cart label below desktop breakpoint */
  .shopping_cart_label {
    display: none !important;
  }
}

@media (max-width: 991px) {
  #right_tabs {
    flex-wrap: wrap !important;
  }

  #right_tabs > div {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: auto !important;
  }
}
/* ============================================================================
   LARGE SCREENS (min-width: 1200px)
   ============================================================================ */

@media only screen and (min-width: 1200px) {
  .navbar-header::before {
    display: unset;
  }

  #ui_global_page_root .navbar li {
    width: unset;
  }

  .shopping_cart_button {
    width: var(--shopping-cart-button-width);
  }

  .btn_position_left {
    left: var(--position-button-left-offset-desktop);
  }

  .btn_position_right {
    right: var(--position-button-right-offset-desktop);
  }
}


/* ============================================================================
   DESKTOP NAV TITLE (min-width: 992px)
   Show the custom "empirica regio Wohnungsmarktreports" title in the top nav
   and hide Bootstrap's built-in navbar-header brand area to avoid duplication.
   ============================================================================ */

@media only screen and (min-width: 992px) {
  .nav_div_title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    text-align: left;
    padding: 0 var(--space-xl);
  }

  .navbar-header {
    display: none;
  }
}