/* ========================================================================== */
/* Orion Mobile Hotfix v2                                                     */
/* Loaded after the legacy theme styles to neutralize fixed-width mobile CSS. */
/* ========================================================================== */

.header-contact-item {
  display: inline-block;
  margin-right: 28px;
}
.header-contact-item:last-child { margin-right: 0; }
#contact-email .header-contact-item i { margin-right: 6px; }

@media (max-width: 767px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  *, *::before, *::after { box-sizing: border-box; }

  /* The legacy theme hard-codes 500/440/280px containers. */
  body .container,
  body .navbar-static-top .container,
  body .navbar-fixed-top .container,
  body .navbar-fixed-bottom .container {
    width: calc(100% - 30px) !important;
    min-width: 0 !important;
    max-width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  body .container > .row,
  #footer > .row,
  #footer-bottom > .row {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body .container .row > [class*="span"] {
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  img,
  .property-item img,
  #footer img,
  .page-carousel img {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Header contact information. */
  #contact-email {
    display: flex !important;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 0 10px !important;
    text-align: center;
  }
  #contact-email .header-contact-item {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    white-space: normal !important;
  }
  #contact-email a { overflow-wrap: anywhere; }

  /* Search/listing blocks that also use fixed pixel widths in old breakpoints. */
  .advance-search .as-form-wrap,
  .advance-search .option-bar.small,
  .advance-search .option-bar.large,
  .widget.calculator .as-form-wrap,
  .widget.advance-search .as-form-wrap,
  .widget.calculator .option-bar,
  .widget.advance-search .option-bar,
  .property-items .span6,
  .sidebar .widget,
  .widget #searchform,
  .property-grid .list-container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .advance-search .selectwrap,
  .widget.advance-search .selectwrap,
  .widget.calculator .selectwrap,
  .advance-search input[type="text"],
  .widget.advance-search input[type="text"],
  .widget.calculator input[type="text"],
  .widget #s {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Partners are a 2012-era fixed-pixel jCarousel. On phones it creates the
     tall banner stack seen in the screenshot. Keep it on desktop, hide only
     this partner carousel on mobile. */
  .page-carousel .brands-carousel {
    display: none !important;
  }

  /* Footer: isolate every column/widget and remove all legacy float behavior. */
  #footer-wrapper {
    clear: both !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  #footer,
  #footer-bottom {
    clear: both !important;
    float: none !important;
  }

  #footer > .row {
    display: block !important;
  }

  #footer > .row > .span3,
  #footer-bottom .span6 {
    display: block !important;
    position: relative !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 0 24px !important;
    padding: 0 !important;
  }

  #footer .widget {
    display: block !important;
    position: relative !important;
    clear: both !important;
    float: none !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 0 24px !important;
    overflow: hidden !important;
  }

  #footer .widget::after,
  #footer .widget ul::after,
  #footer .widget .textwidget::after {
    content: "";
    display: block;
    clear: both;
  }

  #footer .widget.quick-links ul li,
  #footer .widget ul li {
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* If a footer widget itself contains an image, keep it centered and sane. */
  #footer .widget img,
  #footer .textwidget img {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 10px auto !important;
  }

  #footer .widget .title,
  #footer .widget h3 {
    clear: both !important;
    line-height: 1.3 !important;
  }

  #footer-bottom {
    padding-top: 15px !important;
  }
  #footer-bottom p,
  #footer-bottom .designed-by {
    float: none !important;
    width: 100% !important;
    text-align: center !important;
    margin: 0 0 8px !important;
  }
}