/*
Simply Rets Client Stylesheet
====

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

This file provides the stylesheets for all client side Simply
Rets components, including Custom Post Pages, shortcode markup,
and widgets. It does not, however, include styles for the admin
panel.

Below you can view the classes and id's used to style the output
of the Simply Rets Wordpress plugin.  You can modify the base
styles of any of these elements to your liking, and this should
help you find what you need to change.
*/

/*
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 size and display - and wraps classes
with 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;
}

/*
Result photo
--- 

`sr-photo` affects the properties of the thumbnail image
shown for listing results.

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;
    float: left;
    height: 155px;
    width: 30%;
    overflow: hidden;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

/*
Primary Data
--- 

`sr-primary-data` is that banner that displays the listing
address and price.

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.

```
    <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-primary-data {
    width: 70%;
    display: inline-block;
    vertical-align: top;
    background-color: #eee;
}
.sr-primary-data h4 {
    padding-left: 15px;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

/*
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.

The font and size will be handled by your theme.

```
    <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 {
    display: inline-block;
    vertical-align: top;
    padding-top: 10px;
    width: 70%;
}
/*
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;
}



/*
Listing Details
===

`sr-details` is the main class wrapping each **single** listing
details. This class is only on single list pages.

This class is also just a main wrapper that should only be used
for manipulating size/display/color properties.
The initial height is dependent on the content.

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

.sr-details {
    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 id. 

You can show/hide or change any other properties about this area.

```
    <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 even have a separate class to
access the details individually. Modify these as you wish using either
the class or the id, depending on the specificity 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;
}

/*
Featured Listing Widget
===

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

Mostly it will inherit the styles your theme uses for Widgets.

```
    <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;
}

/*
Search Form
===

Much like a lot of the other components, 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 components.

The backend search should still work with most search form modifications.

```
        <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_keywords" 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;
}

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

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

.sr-minmax-filters {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 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.

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

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

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

.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;
}

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

.sr-details-links {
    text-align: right;
    margin-top: -15px !important;  /* these are both theme specific and should */
    margin-bottom: 0px !important; /* be in the themese css, not the plugins   */
}
#sr-toggle-gallery {
    clear: both;
    cursor: pointer;
}