/*==================================================
  ROOFNEST V2
  MOBILE / RESPONSIVE
  Version : 1.0
==================================================*/


/*==================================================
  TABLET
==================================================*/

@media (max-width: 992px){

    .property-main{
        grid-template-columns:1fr;
    }

    .property-sidebar{
        width:100%;
    }

    .contact-box{
        position:relative;
        top:auto;
    }

    .similar-properties{
        grid-template-columns:repeat(2,1fr);
    }

}


/*==================================================
  MOBILE
==================================================*/

@media (max-width: 768px){

    /* Main Archive Wrapper */

    .roofnest-property{
        width:100%;
        max-width:100%;
        padding:15px;
        margin:20px auto;
    }


    /* Archive Title */

    .archive-title{
        font-size:26px;
        margin-bottom:25px;
    }


    /* Filters */

    .roofnest-filters{
        width:100%;
        padding:18px;
        margin-bottom:20px;
        grid-template-columns:1fr;
        gap:10px;
        box-sizing:border-box;
    }

    .roofnest-filters select{
        width:100%;
        height:46px;
        font-size:14px;
    }

    .filter-btn{
        width:100%;
        height:48px;
        margin-top:5px;
        font-size:15px;
    }


    /* Results / Sort */

    .sort-wrapper,
    .results-sort{
        width:100%;
        justify-content:flex-start;
    }

    .sort-dropdown{
        width:100%;
        max-width:100%;
        height:46px;
        margin-top:10px;
    }


    /* Property Grid */

    .property-grid{
        grid-template-columns:1fr !important;
        width:100%;
        gap:20px;
    }


    /* Property Card */

    .property-card{
        width:100%;
        min-width:0;
        box-sizing:border-box;
        overflow:hidden;
    }


    /* Property Image */

    .property-card img{
        width:100%;
        height:210px;
        object-fit:cover;
    }


    /* Property Content */

    .property-content{
        padding:16px;
        box-sizing:border-box;
    }


    /* Price Fix */

/* Mobile Property Price */

.property-card .property-price{
    display:block;
    width:100%;
    max-width:100%;

    font-size:18px !important;
    line-height:1.25;
    font-weight:700;

    white-space:nowrap;
    overflow:visible;
    text-overflow:clip;

    margin:0 0 10px;
    box-sizing:border-box;
}


    /* Property Title */

    .property-card h3{
        font-size:19px;
        line-height:1.35;
        margin:0 0 12px;

        overflow-wrap:anywhere;
        word-break:normal;
    }


    /* Property Description / Details */

    .property-card p{
        font-size:14px;
        line-height:1.5;
        margin:7px 0;
    }


    /* Views */

    .property-views{
        font-size:13px;
        margin-top:8px;
        padding:7px 12px;
        box-sizing:border-box;
    }


    /* View Details */

    .full-width-btn{
        width:100%;
        margin:14px 0 10px;
        padding:11px 12px;
        font-size:14px;
        box-sizing:border-box;
    }


    /* Save / Share */

    .property-actions{
        display:flex;
        width:100%;
        gap:8px;
        margin:10px 0 0;
    }

    .property-actions .property-action-btn{
        flex:1;
        min-width:0;
        padding:9px 8px;
        font-size:13px;
        box-sizing:border-box;
    }


    /* Featured Badge */

    .featured-badge{
        top:8px;
        left:8px;
        padding:5px 9px;
        font-size:9px;
        gap:4px;
    }


    /* Status Badge */

    .property-status{
        top:42px;
        left:8px;
        padding:5px 9px;
        font-size:9px;
    }


    /* Pagination */

    .roofnest-pagination{
        margin:30px 0;
        width:100%;
        overflow-x:auto;
        padding-bottom:5px;
    }

    .roofnest-pagination .page-numbers{
        padding:8px 11px;
        margin:0 2px;
        font-size:13px;
    }


    /* Single Property */

    .roofnest-single-property{
        width:100%;
        max-width:100%;
        padding:15px;
        margin:20px auto;
        box-sizing:border-box;
    }

    .property-main{
        grid-template-columns:1fr;
        gap:25px;
    }

    .property-left,
    .property-sidebar{
        width:100%;
        min-width:0;
    }


    /* Single Property Info */

    .property-info-grid{
        grid-template-columns:1fr;
        gap:15px;
        margin:25px 0;
    }


    /* Gallery */

    .gallery-main{
        height:350px;
    }

    .gallery-thumb{
        width:75px;
        height:58px;
    }


    /* Similar Properties */

    .similar-properties{
        grid-template-columns:1fr;
        gap:15px;
    }

    .similar-image{
        height:190px;
    }


    /* About Box */

    .about-box{
        padding:20px;
    }

    .about-box p{
        font-size:15px;
        line-height:1.7;
    }


    /* Contact Box */

    .contact-box{
        width:100%;
        box-sizing:border-box;
        padding:20px;
    }

}


/*==================================================
  VERY SMALL PHONES
==================================================*/

@media (max-width: 400px){

    .roofnest-property{
        padding:10px;
    }

    .property-content{
        padding:14px;
    }

    .property-card img{
        height:200px;
    }

    .property-price{
        font-size:22px;
    }

    .property-card h3{
        font-size:18px;
    }

    .property-card p{
        font-size:13px;
    }

    .property-actions .property-action-btn{
        font-size:12px;
        padding:8px 5px;
    }

}

/*==================================================
   ROOFNEST V2
   SINGLE PROPERTY MOBILE POLISH
==================================================*/

@media (max-width: 768px){

    /* ---------------------------------
       Single Property Main Spacing
    --------------------------------- */

    .roofnest-single-property{
        padding:12px;
        margin:15px auto;
    }

    .roofnest-single-property .property-main{
        gap:20px;
    }


    /* ---------------------------------
       Property Gallery
    --------------------------------- */

    .roofnest-single-property .gallery-main{
        height:280px;
        border-radius:10px;
    }

    .roofnest-single-property .gallery-thumb{
        width:70px;
        height:55px;
    }


    /* ---------------------------------
       Property Header
    --------------------------------- */

    .roofnest-single-property .property-header{
        margin:18px 0 20px;
    }

    .roofnest-single-property .property-price{
        font-size:28px !important;
        line-height:1.15;
        margin:0 0 12px;
    }

    .roofnest-single-property .property-price span{
        font-size:16px;
    }

    .roofnest-single-property .property-meta{
        margin-top:10px;
        padding-top:10px;
        gap:8px;
    }

    .roofnest-single-property .property-location,
    .roofnest-single-property .property-views{
        font-size:13px;
    }


    /* ---------------------------------
       Information Cards
    --------------------------------- */

    .roofnest-single-property .property-info-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
        margin:20px 0;
    }

    .roofnest-single-property .property-info-grid .property-card{
        min-height:0;
        height:auto;
        padding:13px 15px;
        border-radius:10px;
        display:grid;
        grid-template-columns:38px 1fr;
        grid-template-rows:auto auto;
        column-gap:10px;
        text-align:left;
        align-items:center;
        box-sizing:border-box;
    }

    .roofnest-single-property .property-info-grid .property-icon{
        grid-row:1 / 3;
        grid-column:1;
        font-size:20px;
        margin:0;
        text-align:center;
    }

    .roofnest-single-property .property-info-grid .property-label{
        grid-column:2;
        margin:0;
        font-size:13px;
        line-height:1.3;
    }

    .roofnest-single-property .property-info-grid .property-value{
        grid-column:2;
        margin-top:2px;
        font-size:12px;
        line-height:1.3;
    }


    /* ---------------------------------
       Section Headings
    --------------------------------- */

    .roofnest-single-property .property-section{
        margin-top:28px;
    }

    .roofnest-single-property .property-section h2{
        font-size:22px;
        margin-bottom:12px;
    }


    /* ---------------------------------
       Amenities
    --------------------------------- */

    .roofnest-single-property .amenities-grid{
        grid-template-columns:1fr;
        gap:7px;
        margin-top:10px;
    }

    .roofnest-single-property .amenity-card,
    .roofnest-single-property .amenity-empty{
        padding:10px 12px;
        border-radius:7px;
        font-size:13px;
    }


    /* ---------------------------------
       About Property
    --------------------------------- */

    .roofnest-single-property .about-box{
        padding:16px;
        margin-top:10px;
        border-radius:10px;
    }

    .roofnest-single-property .about-box p{
        font-size:13px;
        line-height:1.65;
        margin:0;
    }


    /* ---------------------------------
       Similar Properties
    --------------------------------- */

    .roofnest-single-property .similar-properties{
        grid-template-columns:1fr;
        gap:14px;
        margin-top:15px;
    }

    .roofnest-single-property .similar-image{
        height:170px;
    }

    .roofnest-single-property .similar-content{
        padding:14px;
    }

    .roofnest-single-property .similar-content h4{
        font-size:16px;
        line-height:1.35;
        margin-bottom:8px;
    }

    .roofnest-single-property .similar-price{
        font-size:18px;
        margin-bottom:6px;
    }

    .roofnest-single-property .similar-location{
        font-size:13px;
        margin-bottom:12px;
    }

    .roofnest-single-property .similar-card .view-btn{
        font-size:13px;
        padding:8px 12px;
    }


    /* ---------------------------------
       Contact Owner
    --------------------------------- */

    .roofnest-single-property .contact-box{
        width:100%;
        padding:18px;
        border-radius:12px;
        box-sizing:border-box;
    }

    .roofnest-single-property .contact-box h3{
        font-size:22px;
    }

    .roofnest-single-property .sidebar-price{
        font-size:26px;
        margin:14px 0;
    }

    .roofnest-single-property .call-btn,
    .roofnest-single-property .whatsapp-btn{
        padding:12px;
        font-size:14px;
        margin-top:10px;
    }

}


/*==================================================
   VERY SMALL PHONES
==================================================*/

@media (max-width: 400px){

    .roofnest-single-property{
        padding:10px;
    }

    .roofnest-single-property .gallery-main{
        height:260px;
    }

    .roofnest-single-property .property-price{
        font-size:26px !important;
    }

    .roofnest-single-property .property-info-grid .property-card{
        padding:11px 13px;
    }

    .roofnest-single-property .property-info-grid .property-icon{
        font-size:18px;
    }

    .roofnest-single-property .property-info-grid .property-label{
        font-size:12px;
    }

    .roofnest-single-property .property-info-grid .property-value{
        font-size:11px;
    }

}

@media (max-width: 768px){

    .roofnest-single-property .property-info-grid .property-card{
        padding:13px 15px;
        min-height:68px;
    }

    .roofnest-single-property .property-info-grid .property-icon{
        font-size:21px;
    }

    .roofnest-single-property .property-info-grid .property-label{
        font-size:14px;
        font-weight:600;
    }

    .roofnest-single-property .property-info-grid .property-value{
        font-size:13px;
        line-height:1.4;
    }

}

/* =========================================================
   ROOFNEST V2
   SINGLE PROPERTY MOBILE FINAL ALIGNMENT
   ========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       SINGLE PROPERTY OUTER CONTAINER
       ===================================================== */

    .roofnest-single-property {
        width: 100% !important;
        max-width: 100% !important;
        margin: 15px auto !important;
        padding: 10px !important;
        box-sizing: border-box !important;
    }

    .property-main {
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .property-left,
    .property-sidebar {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }


    /* =====================================================
       GALLERY
       ===================================================== */

    .property-gallery {
        width: 100% !important;
        margin: 0 0 18px !important;
        padding: 0 !important;
    }

    .gallery-main {
        width: 100% !important;
        height: 350px !important;
        margin: 0 !important;
        border-radius: 10px !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    .gallery-main img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        display: block !important;
    }

    .gallery-thumbs {
        display: flex !important;
        width: 100% !important;
        gap: 7px !important;
        margin: 8px 0 0 !important;
        padding: 0 !important;
        overflow-x: auto !important;
        box-sizing: border-box !important;
    }

    .gallery-thumb {
        flex: 0 0 55px !important;
        width: 55px !important;
        height: 45px !important;
        border-radius: 5px !important;
        object-fit: cover !important;
        margin: 0 !important;
    }


    /* =====================================================
       PROPERTY PRICE
       ===================================================== */

    .property-header {
        width: 100% !important;
        margin: 15px 0 12px !important;
    }

    .property-price {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;

        font-size: 22px !important;
        line-height: 1.2 !important;
        font-weight: 700 !important;

        color: #16a34a !important;
    }

    .property-price span {
        font-size: 13px !important;
        font-weight: 400 !important;
        color: #777 !important;
        margin-left: 4px !important;
    }


    /* =====================================================
       VIEWS + LOCATION
       ===================================================== */

    .property-meta {
        display: flex !important;
        width: 100% !important;

        justify-content: space-between !important;
        align-items: center !important;

        gap: 10px !important;

        margin: 8px 0 20px !important;
        padding: 8px 0 !important;

        border-top: 1px solid #eeeeee !important;
        border-bottom: 1px solid #eeeeee !important;

        box-sizing: border-box !important;
    }

    .property-meta .property-views,
    .property-meta .property-location {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;

        background: transparent !important;

        font-size: 11px !important;
        line-height: 1.4 !important;
        color: #777 !important;
    }

    .property-meta .property-location {
        text-align: right !important;
    }


    /* =====================================================
       PROPERTY INFORMATION CARDS
       
       IMPORTANT:
       Prevent generic .property-card styles from affecting
       Gender / Occupancy / Deposit / etc.
       ===================================================== */

    .property-info-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 8px !important;

        margin: 15px 0 25px !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .property-info-grid > div,
    .property-info-grid .property-card {
        width: 100% !important;
        min-width: 0 !important;

        min-height: 72px !important;

        margin: 0 !important;
        padding: 16px !important;

        background: #ffffff !important;

        border: 0 !important;
        border-radius: 8px !important;

        box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;

        text-align: center !important;

        box-sizing: border-box !important;

        transform: none !important;
    }

    .property-info-grid > div:hover,
    .property-info-grid .property-card:hover {
        transform: none !important;
        box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
    }

    .property-info-grid .property-icon {
        display: block !important;

        width: 100% !important;

        margin: 0 0 7px !important;

        font-size: 16px !important;
        line-height: 1 !important;

        text-align: center !important;
    }

    .property-info-grid .property-label {
        display: block !important;

        width: 100% !important;

        margin: 0 0 7px !important;

        font-size: 11px !important;
        line-height: 1.3 !important;

        font-weight: 700 !important;

        color: #333 !important;

        text-align: center !important;
    }

    .property-info-grid .property-value {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        font-size: 10px !important;
        line-height: 1.4 !important;

        color: #777 !important;

        text-align: center !important;

        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       SECTION HEADINGS
       ===================================================== */

    .property-section {
        width: 100% !important;
        margin: 28px 0 0 !important;
    }

    .property-section h2 {
        margin: 0 0 10px !important;

        font-size: 18px !important;
        line-height: 1.3 !important;

        font-weight: 700 !important;
        color: #222 !important;
    }


    /* =====================================================
       AMENITIES
       ===================================================== */

    .amenities-grid {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 5px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .amenity-card,
    .amenity-empty {
        width: 100% !important;

        min-height: 28px !important;

        margin: 0 !important;
        padding: 6px 9px !important;

        background: #ffffff !important;

        border-radius: 5px !important;

        box-sizing: border-box !important;

        font-size: 10px !important;
        line-height: 1.3 !important;
    }

    .amenity-card {
        display: flex !important;
        align-items: center !important;

        gap: 5px !important;

        text-align: left !important;
    }

    .amenity-icon {
        width: auto !important;
        margin: 0 !important;

        font-size: 10px !important;
    }

    .amenity-name {
        font-size: 10px !important;
        color: #555 !important;
    }


    /* =====================================================
       ABOUT PROPERTY
       ===================================================== */

    .about-box {
        width: 100% !important;

        margin: 0 !important;
        padding: 18px !important;

        background: #ffffff !important;

        border-radius: 9px !important;

        box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;

        box-sizing: border-box !important;
    }

    .about-box p {
        margin: 0 !important;

        font-size: 12px !important;
        line-height: 1.7 !important;

        color: #666 !important;
    }

    .about-box ul {
        margin: 12px 0 !important;
        padding-left: 18px !important;
    }

    .about-box li {
        margin-bottom: 6px !important;

        font-size: 12px !important;
        line-height: 1.5 !important;
    }


    /* =====================================================
       SIMILAR PROPERTIES
       ===================================================== */

    .similar-properties {
        display: grid !important;

        grid-template-columns: 1fr !important;

        width: 100% !important;
        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .similar-card {
        width: 100% !important;
        min-width: 0 !important;

        margin: 0 !important;

        border-radius: 9px !important;
        overflow: hidden !important;

        box-shadow: 0 3px 12px rgba(0,0,0,.08) !important;

        box-sizing: border-box !important;
    }

    .similar-card a {
        display: block !important;

        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .similar-image {
        width: 100% !important;
        height: 155px !important;

        margin: 0 !important;
        overflow: hidden !important;
    }

    .similar-image img {
        width: 100% !important;
        height: 100% !important;

        object-fit: cover !important;
        display: block !important;
    }

    .similar-content {
        width: 100% !important;

        padding: 12px !important;

        box-sizing: border-box !important;
    }

    .similar-content h4 {
        margin: 0 0 7px !important;

        font-size: 14px !important;
        line-height: 1.35 !important;

        font-weight: 600 !important;
    }

    .similar-price {
        margin: 0 0 5px !important;

        font-size: 15px !important;
        line-height: 1.3 !important;

        font-weight: 700 !important;
        color: #16a34a !important;
    }

    .similar-location {
        margin: 0 0 8px !important;

        font-size: 11px !important;
        line-height: 1.4 !important;

        color: #777 !important;
    }

    .similar-card .view-btn {
        display: inline-block !important;

        padding: 7px 11px !important;

        font-size: 10px !important;
        line-height: 1.2 !important;

        border-radius: 5px !important;
    }


    /* =====================================================
       CONTACT OWNER
       ===================================================== */

    .property-sidebar {
        margin-top: 20px !important;
    }

    .contact-box {
        position: relative !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 16px !important;

        background: #ffffff !important;

        border-radius: 10px !important;

        box-shadow: 0 3px 12px rgba(0,0,0,.08) !important;

        box-sizing: border-box !important;
    }

    .contact-box h3 {
        margin: 0 0 7px !important;

        font-size: 18px !important;
        line-height: 1.3 !important;

        color: #222 !important;
    }

    .sidebar-price {
        margin: 0 0 10px !important;

        font-size: 20px !important;
        line-height: 1.3 !important;

        font-weight: 700 !important;

        color: #16a34a !important;
    }

    .call-btn,
    .whatsapp-btn {
        display: block !important;

        width: 100% !important;

        margin: 7px 0 0 !important;
        padding: 10px !important;

        border-radius: 7px !important;

        font-size: 12px !important;
        line-height: 1.3 !important;

        text-align: center !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       LIGHTBOX
       ===================================================== */

    .lightbox {
        padding: 15px !important;
    }

    .lightbox img {
        max-width: 95vw !important;
        max-height: 70vh !important;
    }

    .close-lightbox {
        top: 10px !important;
        right: 15px !important;
        font-size: 40px !important;
    }

    .lightbox-prev,
    .lightbox-next {
        font-size: 40px !important;
        padding: 10px !important;
    }

    .lightbox-prev {
        left: 5px !important;
    }

    .lightbox-next {
        right: 5px !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 400px) {

    .roofnest-single-property {
        padding: 8px !important;
    }

    .gallery-main {
        height: 320px !important;
    }

    .gallery-thumb {
        flex-basis: 50px !important;
        width: 50px !important;
        height: 42px !important;
    }

    .property-info-grid > div,
    .property-info-grid .property-card {
        min-height: 68px !important;
        padding: 14px !important;
    }

    .similar-image {
        height: 145px !important;
    }

}