/*
SimplyRETS Wordpress Style Guide
====

The SimplyRETS Wordpress plugin generates HTML for the listings
shown on your site. It uses a standard set of classes and id's
that is compatible with most themes out there. It will even use
most of your theme's styling like colors, font-sizes, etc. In the
case that you would like to customize the plugin even more for your
theme, we've made it simple for you. Use the style guide below to
easily find which element for which you need to add style. These
classes and id's are versioned and safe to use, so you don't need
to worry about your custom styles breaking when you upgrade. Like
always, you should still use a child theme or a plugin like Add Custom
CSS to add styles.

*simply-rets-client.css - Copyright (C) 2014-2024 SimplyRETS*
*Licensed under the GNU GPL version 3 or later.*
*/

/*
Listing Results
===

`sr-listing` is the main class wrapping each result on a page
with mulitple listings (ie - search results pages).

It only contains properties for position and display - and wraps classes
for more specificity.You can change height, width, and other general
sizes with this class.

```
    <div class="sr-listing" style="border:solid 1px black;">
      Listing information
    </div>
```

*/
.sr-listing {
    position: relative;
    display: block;
}

#sr-listings-results-list {
    clear: both;
}

.sr-listings-grid-view {
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 15px;
}

.sr-listings-grid-view .sr-listing-grid-item {
    margin-top: 25px;
    width: 100%;
}

.sr-pagination-wrapper {
    clear: both;
    padding-top: 15px;
    padding-bottom: 15px;
}


/*
Result photo
---

`sr-photo` wraps the `sr-listing` thumbnail image
shown for list results.

There's really a lot you can do here, so we'll leave it up to you get
creative, but for any changes to the placement, size, animations, etc
of the image, use this class.

```
    <div class="sr-listing">
      <div class="sr-photo" style="background-image:url('http://placehold.it/350x350.jpg');">
    </div>
```

*/
.sr-photo {
    position: relative;
    display: inline-block;
    height: 155px;
    width: 30%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.sr-listing-grid-item .sr-photo {
    height: 200px;
    width: 100%;
    display: block;
    background-size: cover;
}

.sr-listing-status-banner {
    padding: 5px 10px;
    color: white;
    font-weight: 700;
    display: inline-block;
    background-color: rgba(128, 128, 128, 0.75);
}

.sr-listing-status-banner-active,
.sr-listing-status-banner-comingsoon {
    background-color: rgba(0, 128, 0, 0.75);
}

.sr-listing-status-banner-activeundercontract,
.sr-listing-status-banner-pending {
    background-color: rgba(255, 165, 0, 0.75);
}

.sr-listing > a:first-child,
.sr-listing-grid-item > a:first-child {
    text-decoration: none !important;
}

/*
Primary Data
---

`sr-primary-data` is that banner that displays the listing
address and price. This element only contains the title area of
the listing wrapper.

Utilizing this class is useful for changing colors, size, position,
borders, etc for the primary listing data on results pages.

The font and size will be handled by your theme, but the background
color is a light grey. This is very simply to change by setting:
`.sr-primary-data { background-color: #yourcolor; }`

```
    <div class="sr-listing">
      <div class="sr-photo" style="background-image:url('http://placehold.it/350x350.jpg');">
      </div>
      <div class="sr-primary-data">
        <a href="$listing_link">
          <h4>1234 Listing Address
          <span id="sr-price"><i>$1,000,000</i></span></h4>
        </a>
      </div>
    </div>
```

*/
.sr-listing-data-wrapper {
    display: inline-block;
    position: relative;
    width: 69%;
    vertical-align: top;
}
.sr-primary-data {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
}
.sr-primary-data h4 {
    padding-left: 15px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.sr-listing-grid-item .sr-listing-data-wrapper {
    display: block;
    width: 100%;
}

/*
Secondary Data
---

`sr-secondary-data` contains the additional listing details beneath
the primary data banner.

You can use this class to show or hide pieces of data, change the size,
position or font. Amongts anything else you may want to do with this section.

Most things will be handled by the theme here as well, but a common modification
is to change the `margin-left` property to align better in some themes.

```
    <div class="sr-listing">
      <div class="sr-photo" style="background-image:url('http://placehold.it/350x350.jpg');">
      </div>
      <div class="sr-primary-data">
        <a href="$listing_link">
          <h4>1234 Listing Address
          <span id="sr-price"><i>$1,000,000</i></span></h4>
        </a>
      </div>
      <div class="sr-secondary-data">
        <ul class="sr-data-column">
          <li>
            <span>$bedrooms Bedrooms</span>
          </li>
          <li>
            <span>$bathsFull Full Baths</span>
          </li>
          <li>
            <span>$lotSize Sq Ft</span>
          </li>
          <li>
            <span>Built in $yearBuilt</span>
          </li>
        </ul>
        <ul class="sr-data-column">
          <li>
            <span>In the $subdivision Subdivision</span>
          </li>
          <li>
            <span>The City of $city</span>
          </li>
          <li>
            <span>Listed by $listing_agent</span>
          </li>
          <li>
            <span>Listed on $list_date</span>
          </li>
        </ul>
      </div>
    </div>
```

*/
.sr-secondary-data {
    vertical-align: top;
    padding-top: 10px;
}


/*
Notice that we also provide you with `sr-data-column` for
managing the spacing and margin between the two columns of
secondary data. For example, set the `.sr-data-column` to
`display: block` to make the two columns into one.
*/
.sr-data-column {
    display: inline-block;
    margin: 0px 0px 10px 15px !important;
    vertical-align: top;
    min-width: 15%;
}

/*
"More details" and compliance markup shown by the listing uses this
styling:
*/
.sr-listing .more-details-wrapper {
    margin-top: 5px;
    margin-bottom: 10px;
}

.sr-listing .result-compliance-markup {
    float: right;
}

.sr-listing-grid-item .result-compliance-markup {
    display: block;
}

.result-compliance-markup {
    font-size: 90%;
}


/*
Listing Details
===

`sr-details` is the main class wrapping each **single** listing
details page.

Commonly, this is used in addition with a child class for
specificity, but you can also set the width, height, etc
for the whole page with this class.

```
    <div class="sr-details">
      Listing details
    </div>
```
*/

.sr-details {
    margin-top: 10px;
}

.sr-details table {
    margin-top: 15px;
}

.sr-details th {
    background-color: #eee;
}

/*
Listing Primary Details
---

`sr-primary-details` is the section on single listing pages just
below the slider. It contains property information like Bedrooms,
Baths, Lot Size, and MLS status.

This area also uses `flexbox`, so you can hide any of the fields
without affecting the overall look of the section.

```
    <div class="sr-primary-details">
      <div class="sr-detail" id="sr-primary-details-beds">
        <h3>3 <small>Beds</small></h3>
      </div>
      <div class="sr-detail" id="sr-primary-details-baths">
        <h3>2 <small>Baths</small></h3>
      </div>
      <div class="sr-detail" id="sr-primary-details-size">
        <h3>2500 <small>SqFt</small></h3>
      </div>
      <div class="sr-detail" id="sr-primary-details-status">
        <h3>active</h3>
      </div>
    </div>
```
*/
.sr-primary-details {
  display: flex;
  justify-content: space-between;
  clear: both;
  padding-top: 15px;
}

/*

Within this class you can see that we have a separate class to
access the details individually. Modify these as you wish using either
the class or the id, depending on what you need.

```
    <div class="sr-primary-details">
      <div class="sr-detail" id="sr-primary-details-beds">
        <h3>3 <small>Beds</small></h3>
      </div>
      <div class="sr-detail" id="sr-primary-details-baths">
        <h3>2 <small>Baths</small></h3>
      </div>
      <div class="sr-detail" id="sr-primary-details-size">
        <h3>2500 <small>SqFt</small></h3>
      </div>
      <div class="sr-detail" id="sr-primary-details-status">
        <h3>active</h3>
      </div>
    </div>
    <div class="sr-remarks-details">
      <p>Here's a long paragraph with more information about the listing.</p>
    </div>
```
*/
.sr-primary-details .sr-detail {
    text-align: center;
    width: 100%;
    padding-left: 5px;
    padding-right: 5px;
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
}

.sr-remarks-details {
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
}

.sr-remarks-details p {
    line-height: 20px !important;
    margin-bottom: 0px;
    padding-bottom: 5px;
}

.sr-listing-openhouses-banner {
    border-left: solid 1px #eee;
    border-right: solid 1px #eee;
    border-top: solid 1px #eee;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 15px;
}

.sr-listing-openhouses-banner h3 {
    margin-bottom: 5px;
}

.sr-listing-openhouses-banner-item {
    display: inline-block;
    width: 25%;
    padding-bottom: 5px;
}

/*
Featured Listing Widget
===

`sr-listing-wdgt` is the wrapper for the Featured Listing sidebar widget,
which follows the same patters we've seen so far.

This should mostly inherit the styles your theme uses for Widgets by using
standard class names like `button` and `btn`.

```
    <div class="sr-listing-wdgt" style="max-width: 300px;">
      <a href="$listing_link">
        <h5>123 Test Widget
          <small> - $500,000</small>
        </h5>
      </a>
      <a href="">
        <img src="http://placehold.it/350x350.jpg" width="100%" alt="">
      </a>
      <div class="sr-listing-wdgt-primary">
        <div id="sr-listing-wdgt-details">
          <span>2 Bed | 2 Bath | active</span>
        </div>
        <hr>
        <div id="sr-listing-wdgt-remarks">
          <p>Some lines about this listing</p>
        </div>
      </div>
      <div id="sr-listing-wdgt-btn">
        <a href="$listing_link">
          <button class="button real-btn">
            More about this listing
          </button>
        </a>
      </div>
    </div>
```
*/
.sr-listing-wdgt {
    padding-left: 10px;
    padding-right: 10px;
}

.sr-listing-wdgt hr {
    border: solid 1px #dedede;
    margin-top: 10px;
    margin-bottom: 10px;
}

#sr-listing-wdgt-details {
    text-align: center;
    color: #333;
    margin-top: 5px;
    margin-bottom: -5px;
}
#sr-listing-wdgt-remarks {
    line-height: 1.5em;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 4.6em;
}

#sr-listing-wdgt-btn {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px !important;
}


/**
 * SimplyRETS Search Form Widget
 */
.sr-search-widget {
    text-align: center;
}

.sr-search-widget #sr-search-ptype {
    width: 100%;
    display: block;
}

.sr-search-widget #sr-search-keywords {
    float: left;
    width: 90%;
    margin-bottom: 10px;
}

.sr-search-widget #sr-search-ptype select {
    width: 90%;
}

.sr-search-widget-field {
    display: inline-block;
    margin-top: 10px;
}

.sr-search-widget-filters .sr-search-widget-field {
    width: 49% !important;
}

.sr-search-widget .btn {
    margin-top: 10px;
}

/*
Search Form
===

Much like we've seen so far, your theme will handle most of
the styling for this.

However you can use any classes or id's insde of the
`sr-search-form-wrapper` class to show/hide/move/etc any of the search
form fields.  The backend search should still work with most
search form modifications.

The search form makes use of the `flexbox` CSS property. So if you decide
to hide any of the search options, the rest will fill the remaining space.
Most of these elements also have id's for you to use specifically.

```
        <div id="sr-search-wrapper">
          <h3>Search Listings</h3>
          <form method="get" class="sr-search" action="<?php echo $home_url; ?>">
            <input type="hidden" name="retsd-listings" value="sr-search">

            <div class="sr-minmax-filters">
              <div class="sr-search-field" id="sr-search-keywords">
                <input name="sr_q" type="text" placeholder="Keywords" />
              </div>

              <div class="sr-search-field" id="sr-search-ptype">
                <select name="sr_ptype">
                  <option value="">-- Property Type --</option>
                  <option value="res">Residential</option>
                  <option value="cnd">Condo</option>
                  <option value="rnt">Rental</option>
                </select>
              </div>
            </div>

            <div class="sr-minmax-filters">
              <div class="sr-search-field" id="sr-search-minprice">
                <input name="sr_minprice" type="text" placeholder="Min Price.." />
              </div>
              <div class="sr-search-field" id="sr-search-maxprice">
                <input name="sr_maxprice" type="text" placeholder="Max Price.." />
              </div>

              <div class="sr-search-field" id="sr-search-minbeds">
                <input name="sr_minbeds" type="text" placeholder="Min Beds.." />
              </div>
              <div class="sr-search-field" id="sr-search-maxbeds">
                <input name="sr_maxbeds" type="text" placeholder="Max Beds.." />
              </div>

              <div class="sr-search-field" id="sr-search-minbaths">
                <input name="sr_minbaths" type="text" placeholder="Min Baths.." />
              </div>
              <div class="sr-search-field" id="sr-search-maxbaths">
                <input name="sr_maxbaths" type="text" placeholder="Max Baths.." />
              </div>
            </div>

            <input class="submit real-btn" type="submit" value="Seach Properties">

          </form>
        </div>
```
*/

#sr-search-wrapper {
    padding: 0px;
    padding-top: 0px;
    padding-bottom: 15px;
    margin-bottom: 25px;
}

#sr-search-wrapper form {
    margin-bottom: 0px;
    clear: both;
}

#sr-search-wrapper h3 {
    margin-top: 0px;
}

.sr-minmax-filters {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
}

#sr-search-keywords {
    width: 70%;
}
#sr-search-keywords input {
    width: 100%;
}

#sr-search-ptype {
    width: 25%;
    text-align: left;
}
#sr-search-ptype select {
    width: 90%;
    vertical-align: middle;
}

#sr-search-minprice,
#sr-search-maxprice,
#sr-search-minbaths,
#sr-search-maxbaths,
#sr-search-minbeds,
#sr-search-maxbeds {
    text-align: left;
}

#sr-search-minprice input,
#sr-search-maxprice input,
#sr-search-minbaths input,
#sr-search-maxbaths input,
#sr-search-minbeds input,
#sr-search-maxbeds input {
    width: 85%;
}
.sr-search-field {
    display: inline-block;
}

#sr-search-wrapper .submit {
    margin-top: 10px;
}

/*
Image Slider - Listing Details
===

The image slider on single listing pages is powered by
pure css (meaning you can style it)!

It's a bit more complicated, but it is idiomatic to the rest
of the class structure used, so if you've already made changes
elsewhere, this should be a breeze.

```
  <div class="sr-slider">
    <img class="sr-slider-img-act" src="http://placehold.it/350x350.jpg">
    <input class="sr-slider-input" type="radio" name"slide_switch" id="id0" value="http://placehold.it/350x350.jpg">
    <label for="id0">
      <img src="http://placehold.it/350x350.jpg" width=100">
    </label>
    <input class="sr-slider-input" type="radio" name"slide_switch" id="id2" value="http://placehold.it/350x350.jpg">
    <label for="id2">
      <img src="http://placehold.it/350x350.jpg" width=100">
    </label>
  </div>

```

*/
.sr-slider{
    max-width: 650px;
    width: 100%;
    position: relative;
    padding-top: 485px;
    margin: 10px auto;
    background-color: transparent;
    transition: all 0.5s;
}

.sr-slider>img{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    height: auto;
    max-height: 485px;
    box-shadow: 0 5px 15px -5px rgba(0, 0, 0, 0.75);
}

.sr-slider input[name='slide_switch'] {
    display: none;
}

.sr-slider label {
    margin: 18px 0 0 18px;
    border: 3px solid #999;
    float: left;
    cursor: pointer;
    transition: all 0.5s;
    opacity: 0.6;
    height: 65px;
    overflow: hidden;
    clear: right;
    display: none;
}

.sr-slider input[name='slide_switch']:checked+label {
    border-color: #666;
    opacity: 1;
}
.sr-slider input[name='slide_switch'] ~ img {
    opacity: 0;
    transform: scale(1.1);
}
.sr-slider input[name='slide_switch']:checked+label+img {
    opacity: 1;
    transform: scale(1);
}

.sr-details-links {
    text-align: right;
    margin-top: -15px !important;
    margin-bottom: 0px !important;
}
#sr-toggle-gallery {
    clear: both;
    cursor: pointer;
}
.sr-gallery {
    margin-top: 20px;
    margin-bottom: 20px;
}

.galleria-errors {
    display: none !important;
}


/**
  * Advanced Search Form
  */
.sr-adv-search-wrap {
    background-color: #f8f8f8;
    border: solid 1px #e7e7e7;
    border-radius: 2px;
    padding: 10px;
}

.sr-adv-search-part {
    margin-bottom: 10px;
}

.sr-adv-search-part label {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sr-adv-search-wrap .sr-minmax-filters {
    margin-bottom: 0px;
}


/** Single Column */
.sr-adv-search-part .sr-adv-search-col1 {
    padding: 5px 10px;
}

/** Half Column */
.sr-adv-search-part .sr-adv-search-col2 {
    display: inline-block;
    width: 50%;
    padding: 5px 10px;
}

.sr-adv-search-part .sr-adv-search-col2 input {
    display: inline-block;
    width: 45%;
}

.sr-adv-search-part .sr-adv-search-col2 select {
    width: 100%;
}

/** Quarter Column */
.sr-adv-search-part .sr-adv-search-col4 {
    display: inline-block;
    width: 25%;
    padding: 5px 10px;
}
.sr-adv-search-part .sr-adv-search-col4 select {
    width: 100%;
}
.sr-adv-search-part .sr-adv-search-col4 input {
    width: 95%;
}

.sr-adv-search-amenities-wrapper {
    padding: 5px 10px;
}

.sr-adv-search-amenities-wrapper-inner {
    padding: 10px;
    padding-top: 0px;
    max-height: 125px;
    overflow-y: scroll;
    border: solid 1px #ccc;
    border-radius: 4px;
    background-color: white;
}

.sr-adv-search-amenities-wrapper-inner .sr-adv-search-option input {
    margin-right: 5px;
}

.sr-adv-search-part li {
    display: inline-block;
    width: 25%;
}

.sr-sort-wrapper {
    display: inline-block;
    float: right;
    margin: 10px 25px 0px 0px;
}

@media screen and (max-width: 576px) {
    .sr-adv-search-part li {
        width: 50%;
    }
    .sr-adv-search-part #sr-search-keywords {
        width: 100%;
    }
    .sr-adv-search-part #sr-search-ptype {
        width: 100%;
        margin-top: 10px;
    }
    .sr-adv-search-part #sr-search-ptype select {
        width: 100%;
    }
    /* 1/2 Columns Responsiveness */
    .sr-adv-search-part .sr-adv-search-col2 {
        width: 100%;
    }
    .sr-adv-search-part .sr-adv-search-col2 input {
        width: 49%;
    }
    /* 1/4 Columns Responsiveness */
    .sr-adv-search-part .sr-adv-search-col4 {
        width: 49%;
    }
    /* Features checkboxes Responsiveness */
    .sr-adv-search-part .sr-adv-search-option {
        width: 50%;
    }
}


/*
 * Responsive CSS
*/

@media screen and (max-width: 768px) {

    .sr-listings-grid-view {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 10px;
    }
}

@media screen and (max-width: 576px) {

    /* Grid view results */
    .sr-listings-grid-view {
        grid-template-columns: 100%;
    }

    /*
     * Search results
     */
    .sr-photo {
        display: block;
        width: 100%;
    }

    .sr-primary-data {
        display: block;
        width: 100%;
        padding-top: 5px;
        padding-bottom: 5px;
        clear: both;
    }

    .sr-primary-data h4 {
        padding-right: 15px;
    }

    .sr-secondary-data {
        display: block;
        width: 100%;
    }

    /*
     * Search form
     */
    .sr-minmax-filters {
        display: block;
    }

    .sr-minmax-filters #sr-search-ptype,
    .sr-minmax-filters #sr-search-keywords {
        width: 85%;
    }

    .sr-minmax-filters #sr-search-ptype select {
        width: 100%;
        margin-bottom: 15px;
    }

    #sr-search-wrapper .sr-sort-wrapper {
        float: left;
        margin-bottom: 15px;
    }
}

/**
 * Map styling
 */
#sr_map_canvas img {
    max-width: none !important;
}

.sr-iw-inner {
    max-width: 325px;
    min-width: 250px;
}

.sr-iw-inner__img {
    text-align: center !important;
    max-width: 95%;
    margin: auto;
}

.sr-iw-inner__img #sr-iw-inner__img-img {
    max-width: 100% !important;
    max-height: 170px !important;
    box-shadow: 0px 0px 3px #8B9293;
}

#sr-iw-inner__img-img {
    max-width: 100% !important;
    max-height: 170px !important;
    box-shadow: 0px 0px 3px #8B9293;
}

.leaflet-popup-content {
    margin: 10px;
}

.leaflet-popup-content #sr-iw-inner__img-img {
    max-width: 100% !important;
}

.sr-iw-inner__primary {
    text-align: center;
    font-size: 18px;
}
.sr-iw-inner__primary p {
    margin-bottom: 5px !important;
}

.sr-iw-inner hr {
    margin-top: 3px;
    margin-bottom: 3px;
}

.sr-iw-inner__secondary p {
    margin-bottom: 3px !important;
}

.sr-iw-addr {
    margin-top: 5px !important;
    margin-bottom: 5px !important;
    line-height: 1em !important;
    font-size: 23px !important;
}


/** Listing Slider */
.sr-listing-slider-item {
    padding: 10px;
    text-align: center;
}

.sr-listing-slider-item-img {
    height: 170px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

.sr-listing-slider-item-address {
    margin-top: 10px;
}

.sr-listing-slider-item-price,
.sr-listing-slider-item-specs {
    margin-bottom: 5px !important;
    text-align: center;
}

/**
 * Interactive Map Search
 */
#sr-map-search {
    width: 100%;
    height: 550px;
    margin-bottom: 25px;
}

#sr-map-search img {
    margin: auto;
}