/* 
*   Global styles 
*/


/* 
 * Archive page styles
 */
/* Search filters styles */
.results-container {
    padding: 15px;
}

.search-box {
    max-width            : 1245px;
    margin               : 0 auto;
    margin-top           : 100px;
    padding              : 20px 20px 35px;
    display              : grid;
    grid-template-columns: 180px 180px 280px 280px 180px;
    gap                  : 25px;
    border               : 1px #eaeeff solid;
    background-color     : #fafafc;
}

.search-box .search-field {
    margin    : 0;
    height    : 80px;
    max-height: 100%;
}

.search-box .search-field.search-settings {
    padding    : 0;
    line-height: unset;
}

.search-box .search-field .search-items .item-wrapper label {
    font-size     : 12px;
    font-weight   : 800;
    font-family   : 'Nunito', sans-serif;
    color         : #333;
    letter-spacing: 1.2px;
}

.search-box .search-field .search-items .item-wrapper select {
    height            : 52px;
    width             : 100%;
    font-family       : 'Nunito', sans-serif;
    border            : 1px solid #707070;
    border-radius     : 5px;
    font-size         : 16px;
    font-weight       : 400;
    line-height       : 1.5;
    color             : #495057;
    background        : #fff url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='4' height='5' viewBox='0 0 4 5'%3e%3cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right .75rem center/8px 10px;
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    cursor            : pointer;
}

.search-box .search-field.search-btn .search-items {
    position: relative;
    height  : 100%;
}

.search-box .search-field.search-btn .search-items .item-wrapper button {
    height          : 52px;
    position        : absolute;
    bottom          : 0;
    left            : 0;
    width           : 130px;
    color           : white;
    background-color: #344273;
    border          : none;
    font-weight     : 600;
    font-size       : 18px;
    cursor          : pointer;
}


/* Search result styles */
#entity-results.search-content {
    margin : 0;
    padding: 0;
}

.results-container {
    max-width            : 1245px;
    margin               : 0 auto;
    margin-top           : 100px;
    display              : grid;
    grid-template-columns: repeat(3, minmax(385px, 1fr));
    gap                  : 30px;
}

.result-card {
    color        : #696969;
    box-shadow   : 0px 3px 30px #00000014;
    border-radius: 0 0 10px 10px;
    height       : max-content;
    position     : relative;
}

.result-card:hover,
.result-card:focus {
    color: #696969;
}

.result-card .thumbnail {
    height  : 230px;
    width   : 100%;
    position: relative;
}

.result-card .thumbnail img {
    height       : 100%;
    width        : 100%;
    object-fit   : cover;
    border-radius: 10px 10px 0px 0px;
}

.result-card .thumbnail .price-label {
    position        : absolute;
    bottom          : 10px;
    left            : 20px;
    width           : max-content;
    height          : 55px;
    line-height     : 55px;
    color           : #222f4d;
    background-color: #fff;
    padding         : 0 15px;
    border-radius   : 5px;
}

.result-card .thumbnail .price-label span {
    font-size  : 26px;
    font-weight: 600;
    font-family: "circular-bold";
}


.result-card .image-detail-box {
    padding    : 25px;
    padding-top: 32px;
    position   : relative;
}

.result-card .image-detail-box .image-text h3 {
    font-family  : 'circular-bold';
    font-size    : 32px;
    color        : #222f4d;
    margin-bottom: 25px;
}

.result-card .image-detail-box .extra-info {
    height          : 0;
    z-index         : -1;
    display         : block;
    position        : absolute;
    bottom          : 0;
    left            : 0;
    background-color: white;
    width           : 100%;
    padding         : 0 50px;
    visibility      : hidden;
    transition      : 0.5s ease-in-out;
    overflow        : hidden;
}

.result-card:hover .image-detail-box .extra-info {
    height    : 100%;
    z-index   : 2;
    visibility: visible;
}

.result-card .image-detail-box .extra-info h3 {
    font-size  : 22px;
    line-height: 1;
    margin-top : 25px;
    font-family: 'circular-bold';
}

.result-card .image-detail-box .extra-info h3 span {
    font-size  : 16px;
    color      : #696969;
    font-weight: 300;
}

.result-card .image-detail-box .extra-info .icon-item {
    font-size  : 16px;
    font-family: "circular-book";
    font-weight: 400;
    color      : #222f4d;
}

.result-card .image-detail-box .extra-info .icon-item .text {
    font-size     : 12px;
    text-transform: uppercase;
    font-family   : "circular-bold";
}

.result-card .image-detail-box .extra-info .extra-price {
    position   : absolute;
    bottom     : 28px;
    padding    : 0;
    left       : 0;
    color      : #222f4d;
    font-weight: 600;
    font-size  : 30px;
    visibility : hidden;
    opacity    : 0;
    transition : visibility 0.5s ease-out 0.5s, opacity 0.5s;
    width      : 100%;
    text-align : center;
}

.result-card:hover .image-detail-box .extra-info .extra-price {
    visibility: visible;
    opacity   : 1;
    transition: visibility 0.5s ease-in 0.5s, opacity 0.7s;
}

.result-card .image-detail-box .extra-info .icons {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 15px;
    position             : absolute;
    top                  : 50%;
    left                 : 50%;
    transform            : translate(-50%);
    width                : 300px;
}


.result-card .discover-more {
    padding: 10px 36px 20px 25px;
    text-align: center;
}

.result-card .discover-more span {
    font-family        : circular-bold;
    font-size          : 18px;
    font-weight        : 600;
    line-height        : 32px;
    color              : #222f4d;
    background-image   : linear-gradient(#222f4d, #222f4d);
    background-position: 0 100%;
    background-size    : 100% 2px;
    background-repeat  : no-repeat;
    transition         : background-size 0.45s;
}

.result-card .discover-more span:hover {
    background-size    : 0% 2px;
    background-position: 100% 100%;
}

/* Pagination */
.pagination {
    width          : 100%;
    padding-bottom : 20px;
    padding-top    : 20px;
    display        : flex;
    justify-content: center;
}

.pagination .page-numbers {
    text-decoration: none;
    font-size      : 20px;
    margin-left    : 25px;
    line-height    : 20px;
    color          : #222f4d;
}

.pagination .page-numbers.current {
    color: #9ed632;
}

.pagination .prev {
    padding-right: 25px;
    margin       : 0;
}

.pagination .next {
    padding-left: 25px;
}

.pagination .prev.disabled,
.pagination .next.disabled {
    color         : grey;
    pointer-events: none;
}

/* Responsive styles */
@media screen and (max-width: 1300px) {
    .search-box {
        grid-template-columns: repeat(4, 1fr);
    }

    .search-box .search-field.search-btn {
        height: 50px;
    }

    .results-container {
        grid-template-columns: repeat(2, 400px);
        justify-content      : center;
    }
}

@media screen and (max-width: 900px) {
    .search-box {
        grid-template-columns: repeat(auto-fit, 360px);
        gap                  : 15px 25px;
    }

    .search-box .search-field.search-btn {
        height: 80px;
    }

    .results-container {
        grid-template-columns: repeat(auto-fit, 400px);
        justify-content      : center;
        margin-top           : 50px;
    }
    .result-card .image-detail-box .image-text h3 {
        font-size: 25px;
    }
}

@media screen and (max-width: 700px) {
    .search-box {
        grid-template-columns: repeat(2, 1fr);
    }

    .search-box .search-field.search-btn {
        height: 60px;
    }
}

@media screen and (max-width: 500px) {
    .search-box {
        grid-template-columns: 100%
    }
}

@media screen and (max-width: 450px) {
    .results-container {
        grid-template-columns: 335px;
        padding              : 0 50px;
    }

    .result-card .thumbnail .price-label span {
        font-size: 22px;
    }
}

/* 
* END Archive page styles
*/


/* 
 * Detail page styles
 */
.detail-content {
    padding: 15px;
}

.detail-header {
    max-width : 1245px;
    margin    : 0 auto;
    margin-top: 0px;
    margin-top: 30px;
}

.detail-header .header-content h3 {
    font-family  : 'circular-bold';
    font-size    : 60px;
    color        : #222f4d;
    margin-bottom: 12px;
    line-height  : 1;
}

.detail-header .header-content p {
    color        : #696969;
    font-size    : 24px;
    margin-bottom: 22px;
    font-weight  : bold;
    margin-top   : 10px;
}


/* Header images styles */
.header-images {
    display  : flex;
    max-width: 1245px;
    margin   : 0 auto;
}

.header-images .big-image-container {
    width : 820px;
    height: 474px;
}

.header-images .big-image-container .big-image {
    height: 100%;
}

.header-images .big-image-container .big-image img {
    height    : 100%;
    width     : 100%;
    object-fit: cover;
}

.header-images .header-images-nav {
    display              : grid;
    grid-template-columns: repeat(2, 180px);
    grid-template-rows   : 120px;
    gap                  : 20px;
    max-height           : 474px;
    overflow-x           : hidden;
    overflow-y           : scroll;
    flex-grow            : 1;
    padding              : 0 20px;
}

.header-images .header-images-nav .first {
    grid-column: 1/3;
    grid-row   : 1/3;
}

.header-images .header-images-nav img {
    height       : 100%;
    width        : 100%;
    object-fit   : cover;
    border-radius: 10px;
}

/* content styles */

.content-box {
    max-width : 1245px;
    margin    : 0 auto;
    margin-top: 50px;
    display   : flex
}

.content-box .left-content {
    max-width   : 720px;
    width       : 100%;
    margin-right: 25px;
}

.content-box .right-content {
    flex-grow  : 1;
    min-width  : 450px;
    margin-left: auto;
}


/* Description styles */
.description {
    position     : relative;
    margin-bottom: 20px;
}

.description .description-text {
    height  : 300px;
    overflow: hidden;
    position: relative;
}

.description.open .description-text:after {
    position: relative;
}

.description .description-text:after {
    content         : "";
    position        : absolute;
    z-index         : 1;
    bottom          : 0;
    left            : 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgb(255, 255, 255) 30%);
    width           : 100%;
    height          : 50px;
}

.description .description-text h2 {
    margin-bottom: 50px;
    font-size    : 44px;
}

.description.open .openclose-description {
    position: relative;
}

.description .openclose-description {
    width   : 100%;
    height  : 20px;
    position: absolute;
    bottom  : 10px;
    z-index : 2;
}

.openclose-description .openclose {
    line-height: 1;
    height     : auto;
    width      : 100%;
    cursor     : pointer;
    display    : inline-block;
    font-size  : 18px;
    font-weight: 600;
}

.openclose-description .openclose .openclose-color {
    color: #9ed632;
}

/* Features styles */
.features-box .feature-item {
    margin-bottom: 50px;
}

.features-content h2 {
    margin-bottom: 30px;
    font-size    : 44px;
}

.features-box .feature-item h5 {
    font-size  : 18px;
    margin     : 0;
    font-family: circular-bold;
}

.features-box .feature-item ul {
    margin: 0;
}

.features-box .feature-item ul li {
    list-style : none;
    padding    : 12px;
    border-top : 1px solid #dee2e6;
    color      : #222F4D;
    font-size  : 21px;
    font-family: circular-bold;
}

.features-box .feature-item ul li:last-of-type {
    border-bottom: 1px solid #dee2e6;
}

.features-box .feature-item ul li span {
    float      : right;
    color      : #696969;
    font-family: "circular-book";
    width      : 250px;
    text-align : center;
}

/* Schedule a viewing styles */
.schedule-viewing {
    box-shadow   : 0px 3px 30px #00000014;
    padding      : 25px;
    border-radius: 10px;
    margin-bottom: 30px;
}

/* links styles */
.links {
    padding      : 20px 20px;
    display      : block;
    border-radius: 10px;
    box-shadow   : 0px 3px 30px #00000014;
    text-align   : center;
}

.links a {
    line-height: 50px;
}

.links a {
    font-family        : "circular-bold";
    font-size          : 20px;
    color              : #222f4d;
    background-image   : linear-gradient(#222f4d, #222f4d);
    background-position: 0 90%;
    background-size    : 100% 2px;
    background-repeat  : no-repeat;
    transition         : background-size 0.45s;
    display            : inline;
    padding-bottom     : 10px;
}

.links a:hover {
    background-size    : 0% 2px;
    background-position: 100% 90%;
}

/* Responsive styles */
@media screen and (max-width: 1200px) {
    .header-images .big-image-container {
        max-width: 820px;
        width    : auto;
    }

    .header-images .header-images-nav {
        grid-template-columns: repeat(2, 130px);
    }
}

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

    .header-images .header-images-nav {
        grid-template-columns: 150px;
    }

    .header-images .header-images-nav .first {
        grid-column: auto;
        grid-row   : auto;
    }



    .features-box .feature-item ul li {
        display: flex;
    }

    .features-box .feature-item ul li strong {
        width: 60%;
    }

    .features-box .feature-item ul li span {
        flex-grow: 1;
    }
}

@media screen and (max-width: 900px) {
    .content-box {
        display: block;
    }

    .links {
        display: flex;
        padding: 20px 25px;
    }

    .links img {
        display     : inline-block;
        margin      : 0;
        margin-right: 20px;
    }

    .links a {
        display       : inline-block;
        padding-bottom: 0px;
    }
}

@media screen and (max-width: 800px) {
    .header-images {
        display: block;
    }

    .header-images .header-images-nav {
        overflow-y           : hidden;
        width                : 100%;
        height               : 150px;
        display              : grid;
        grid-gap             : 16px;
        padding              : 16px;
        grid-template-columns: repeat(auto-fill, 180px);
        grid-auto-flow       : column;
        grid-auto-columns    : 180px;
        overflow-x           : auto;
    }

    .content-box .right-content {
        max-width: 100%;
        margin   : 0;
        min-width: 100%;
    }

    .detail-header .header-content h3 {
        font-size: 45px;
    }
}


@media screen and (max-width: 600px) {
    .header-images .header-images-nav {
        height               : 140px;
        grid-template-columns: repeat(auto-fill, 130px);
        grid-auto-columns    : 130px;
    }


    .content-box .left-content {
        margin-right: 0;
    }

    .links a {
        font-size: 18px;
    }
}

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

    .header-images .big-image-container {
        height: 250px;
    }

    .features-box .feature-item ul li span {
        text-align: right;
    }

    .links {
        display: block;
    }

    .links a {
        display: block;
    }
}

@media screen and (max-width: 450px) {
    .detail-header .header-content h3 { 
        font-size: 30px;
    }
    .links {
        display   : inline-block;
        width     : 100%;
        text-align: left;
    }

    .links img {
        display: block;
        margin : 0 auto;
    }

    .links a {
        display       : inline;
        padding-bottom: 10px;
        line-height   : 2;
    }
}