/* Alexel Luxe Property Listings */

.alx-properties-section{
    width:100%;
    max-width:1260px;
    margin:0 auto;
    padding:20px 20px 60px;
    font-family:Arial,Helvetica,sans-serif;
    box-sizing:border-box;
}
.alx-properties-section *,.alx-properties-section *::before,.alx-properties-section *::after{box-sizing:border-box}

.alx-properties-grid{
    display:grid;
    grid-template-columns:repeat(var(--alx-desktop-columns,3),minmax(0,1fr));
    gap:30px;
}
.alx-properties-grid .alx-property-card.alx-row-hidden{
    display:none!important;
}
.alx-property-card{
    background:#fff;
    border:1px solid #e8e8e8;
    overflow:hidden;
    box-shadow:0 5px 20px rgba(0,0,0,.04);
    transition:all .3s ease;
}
.alx-property-card:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.10)}
.alx-property-image{position:relative;width:100%;height:245px;overflow:hidden;background:#eee}
.alx-property-image>img{width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;display:block!important;transition:transform .5s ease}
.alx-property-card:hover .alx-property-image>img{transform:scale(1.05)}
.alx-no-image{height:100%;display:flex;align-items:center;justify-content:center;color:#999}
.alx-featured-badge{position:absolute;top:15px;left:15px;z-index:3;background:#ff653d;color:#fff;padding:6px 10px;font-size:10px;font-weight:700;text-transform:uppercase}
.alx-status-badges{position:absolute;top:15px;right:15px;z-index:3;display:flex;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.alx-status-badges span{background:rgba(0,0,0,.78);color:#fff;padding:6px 8px;font-size:9px;font-weight:700;text-transform:uppercase}
.alx-property-content{padding:20px}
.alx-property-title{margin:0 0 8px!important;color:#073f3f!important;font-size:18px!important;line-height:1.4!important;font-weight:700!important}
.alx-property-location{color:#888;font-size:13px;margin-bottom:15px}
.alx-property-info{display:flex;gap:10px;flex-wrap:wrap;padding-bottom:15px;border-bottom:1px solid #eee}
.alx-property-info span{color:#555;font-size:12px}
.alx-property-type{margin-top:13px;font-size:10px;font-weight:700;text-transform:uppercase;color:#777}
.alx-property-price{font-size:19px;font-weight:700;color:#073f3f;margin-top:10px}
.alx-property-buttons{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:18px}
.alx-property-buttons .alx-btn{
    width:100%!important;min-width:0!important;min-height:45px!important;
    padding:12px 8px!important;margin:0!important;border:0!important;border-radius:10px!important;
    font-family:Arial,Helvetica,sans-serif!important;font-size:11px!important;line-height:1.2!important;
    font-weight:700!important;text-align:center!important;cursor:pointer!important;transition:all .3s ease
}
.alx-view-btn{background:var(--alx-view-button-color,#279798)!important;color:#fff!important}
.alx-view-btn:hover{background:var(--alx-view-button-hover,#f97827)!important;color:#fff!important}
.alx-inspection-btn{background:var(--alx-inspection-button-color,#f97827)!important;color:#fff!important}
.alx-inspection-btn:hover{background:var(--alx-inspection-button-hover,#279798)!important;color:#fff!important}

.alx-modal{
    display:none;position:fixed!important;z-index:999999!important;inset:0!important;
    width:100%!important;height:100%!important;background:rgba(0,0,0,.78)!important;
    padding:30px 15px!important;overflow-y:auto!important
}
.alx-modal.active{display:flex!important;align-items:center!important;justify-content:center!important}
.alx-modal-box{
    position:relative!important;
    width:100%!important;
    max-width:1050px!important;
    max-height:92vh!important;
    margin:auto!important;
    background:#fff!important;
    overflow:auto!important;
    animation:alxModalIn .3s ease
}
@keyframes alxModalIn{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}

.alx-modal .alx-modal-close{
    position:absolute!important;top:15px!important;right:15px!important;z-index:9999999!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important;
    max-width:40px!important;max-height:40px!important;padding:0!important;margin:0!important;
    border:none!important;border-radius:50%!important;background:#279798!important;background-image:none!important;
    color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;font-size:27px!important;font-weight:300!important;
    line-height:40px!important;text-align:center!important;box-shadow:none!important;text-shadow:none!important;
    outline:none!important;appearance:none!important;-webkit-appearance:none!important;cursor:pointer!important;
    transform:none!important
}
.alx-modal .alx-modal-close:hover{background:#000!important;color:#fff!important}

.alx-property-modal-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr)!important;
    align-items:stretch!important;
    min-width:0!important;
}
.alx-modal-gallery{
    background:#073f3f!important;
    min-width:0!important;
    width:100%!important;
    max-height:540px!important;
    overflow:hidden!important;
}
.alx-main-property-image{
    width:100%!important;
    height:420px!important;
    max-height:420px!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block!important;
    background:#073f3f!important;
    cursor:zoom-in!important;
}
.alx-gallery-thumbs{
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:8px!important;
    width:100%!important;
    height:78px!important;
    max-height:78px!important;
    padding:10px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:thin!important;
}
.alx-gallery-thumbs img{
    width:75px!important;
    height:55px!important;
    min-width:75px!important;
    max-width:75px!important;
    object-fit:cover!important;
    object-position:center!important;
    cursor:pointer;
    opacity:.6;
    border:2px solid transparent!important;
    flex:0 0 75px!important;
}
.alx-gallery-thumbs img:hover,.alx-gallery-thumbs img.active{opacity:1;border-color:#f97827!important}
.alx-modal-details{
    padding:38px 32px 30px!important;
    min-width:0!important;
    max-height:540px!important;
    overflow-y:auto!important;
}
.alx-modal-label{color:#f97827;font-size:11px;text-transform:uppercase;font-weight:700;letter-spacing:1px}
.alx-modal-details h2{margin:8px 0!important;font-size:28px!important;line-height:1.3!important;color:#073f3f!important;font-weight:500!important}
.alx-modal-location{color:#888;font-size:14px;margin-bottom:20px}
.alx-modal-price{font-size:25px;font-weight:700;color:#073f3f;margin-bottom:25px}
.alx-modal-features{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:25px}
.alx-modal-feature{background:#f7f7f7;padding:13px}
.alx-modal-feature small{display:block;color:#888;font-size:11px;margin-bottom:4px}
.alx-modal-feature strong{color:#222;font-size:14px}
.alx-modal-description{color:#666;line-height:1.7;font-size:14px;margin-bottom:25px}
.alx-modal-inspection{display:inline-block!important;padding:14px 22px!important;background:var(--alx-modal-inspection-color,#f97827)!important;color:#fff!important;border:0!important;border-radius:10px!important;font-size:12px!important;font-weight:700!important;cursor:pointer!important}
.alx-modal-inspection:hover{background:var(--alx-modal-inspection-hover,#e86618)!important;color:#fff!important}

.alx-inspection-modal-box{max-width:600px!important}
.alx-inspection-header{padding:35px 35px 20px;border-bottom:1px solid #eee}
.alx-inspection-header h2{margin:0 0 8px!important;font-size:27px!important;font-weight:500!important;color:#171717!important}
.alx-inspection-header p{margin:0;color:#888;font-size:14px;line-height:1.6}
.alx-selected-property{margin:20px 35px 0;padding:13px 15px;background:#f7f7f7;font-size:13px;color:#555;line-height:1.8}
.alx-selected-property strong{color:#222}
.alx-inspection-form{padding:25px 35px 35px}
.alx-inspection-form .wpcf7-form p{margin:0 0 14px!important;padding:0!important}
.alx-inspection-form .wpcf7-form label{display:block;color:#333;font-size:13px;font-weight:600;margin:0 0 5px!important;padding:0!important;line-height:1.4}
.alx-inspection-form .wpcf7-form input:not([type=submit]),.alx-inspection-form .wpcf7-form select,.alx-inspection-form .wpcf7-form textarea{
    width:100%!important;max-width:100%!important;box-sizing:border-box!important;margin:0!important;
    padding:12px 13px!important;border:1px solid #d9d9d9!important;border-radius:0!important;
    background:#fff!important;color:#333!important;font-size:14px!important;line-height:1.4!important;outline:none!important
}
.alx-inspection-form .wpcf7-form input:not([type=submit]),.alx-inspection-form .wpcf7-form select{height:40px!important}
.alx-inspection-form .wpcf7-form textarea{height:90px!important;resize:vertical!important}
.alx-inspection-form .wpcf7-form input[type=submit],.alx-inspection-form .wpcf7-form input.wpcf7-submit{
    width:100%!important;height:50px!important;margin:3px 0 0!important;padding:0 20px!important;border:0!important;border-radius:10px!important;
    background:#f97827!important;background-color:#f97827!important;color:#fff!important;font-family:Arial,Helvetica,sans-serif!important;
    font-size:13px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important;
    cursor:pointer!important;box-shadow:none!important;outline:none!important;appearance:none!important;-webkit-appearance:none!important
}
.alx-inspection-form .wpcf7-form input[type=submit]:hover{background:#e86618!important;color:#fff!important}
.alx-inspection-form .wpcf7-form input[type=hidden]{display:none!important}
.alx-inspection-form .wpcf7-not-valid{border-color:#e74c3c!important}
.alx-inspection-form .wpcf7-not-valid-tip{font-size:11px!important;margin-top:4px!important}
.alx-inspection-form .wpcf7-form br{display:none!important}
body.alx-modal-open{overflow:hidden!important}
.alx-empty{grid-column:1/-1;text-align:center;padding:50px;color:#777}
.alx-cf7-notice{padding:20px;background:#fff4ed;color:#7a3d13}

@media(max-width:1000px){
    .alx-properties-grid{grid-template-columns:repeat(var(--alx-tablet-columns,2),minmax(0,1fr))}
    .alx-property-modal-grid{
        grid-template-columns:minmax(0,1fr) minmax(300px,.9fr)!important;
    }
    .alx-modal-gallery{max-height:500px!important}
    .alx-main-property-image{
        height:380px!important;
        max-height:380px!important;
    }
}
@media(max-width:650px){
    .alx-properties-section{padding:10px 15px 40px}
    .alx-properties-grid{grid-template-columns:repeat(var(--alx-mobile-columns,1),minmax(0,1fr));gap:22px}
    .alx-property-image{height:230px}
    .alx-property-buttons{grid-template-columns:1fr 1fr}
    .alx-modal{padding:10px!important}
    .alx-modal-box{max-height:96vh!important}
    .alx-property-modal-grid{grid-template-columns:1fr!important}
    .alx-modal-gallery{max-height:360px!important}
    .alx-main-property-image{
        height:280px!important;
        max-height:280px!important;
    }
    .alx-modal-details{
        max-height:none!important;
        overflow:visible!important;
        padding:30px 22px!important;
    }
    .alx-modal-details h2{font-size:23px!important}
    .alx-modal-price{font-size:21px}
    .alx-inspection-header{padding:30px 22px 20px}
    .alx-inspection-form{padding:20px 22px 30px}
    .alx-selected-property{margin-left:22px;margin-right:22px}
}


/* Full-image lightbox */
.alx-lightbox{
    display:none;
    position:fixed!important;
    inset:0!important;
    z-index:1000000!important;
    background:rgba(0,0,0,.94)!important;
    align-items:center!important;
    justify-content:center!important;
    padding:30px!important;
}
.alx-lightbox.active{display:flex!important}
.alx-lightbox-image{
    width:auto!important;
    height:auto!important;
    max-width:96vw!important;
    max-height:94vh!important;
    object-fit:contain!important;
    object-position:center!important;
    display:block!important;
    cursor:zoom-out!important;
}
.alx-lightbox-close{
    position:absolute!important;
    top:18px!important;
    right:18px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    padding:0!important;
    border:0!important;
    border-radius:50%!important;
    background:#f97827!important;
    color:#fff!important;
    font-size:30px!important;
    line-height:44px!important;
    text-align:center!important;
    cursor:pointer!important;
    z-index:1000001!important;
}
.alx-lightbox-close:hover{background:#279798!important;color:#fff!important}


/* Lightbox gallery navigation */
.alx-lightbox-stage{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    height:100%!important;
}
.alx-lightbox-prev,
.alx-lightbox-next{
    position:absolute!important;
    top:50%!important;
    transform:translateY(-50%)!important;
    z-index:1000002!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:52px!important;
    height:64px!important;
    min-width:52px!important;
    min-height:64px!important;
    padding:0!important;
    border:0!important;
    border-radius:8px!important;
    background:rgba(0,0,0,.65)!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:50px!important;
    font-weight:300!important;
    line-height:1!important;
    cursor:pointer!important;
    box-shadow:none!important;
}
.alx-lightbox-prev{left:22px!important}
.alx-lightbox-next{right:22px!important}
.alx-lightbox-prev:hover,
.alx-lightbox-next:hover{
    background:#f97827!important;
    color:#fff!important;
}
.alx-lightbox-counter{
    position:absolute!important;
    left:50%!important;
    bottom:18px!important;
    transform:translateX(-50%)!important;
    z-index:1000002!important;
    padding:7px 12px!important;
    border-radius:20px!important;
    background:rgba(0,0,0,.65)!important;
    color:#fff!important;
    font-size:13px!important;
    line-height:1!important;
    white-space:nowrap!important;
}
@media(max-width:650px){
    .alx-lightbox{padding:15px!important}
    .alx-lightbox-prev,
    .alx-lightbox-next{
        width:42px!important;
        height:54px!important;
        min-width:42px!important;
        min-height:54px!important;
        font-size:40px!important;
    }
    .alx-lightbox-prev{left:8px!important}
    .alx-lightbox-next{right:8px!important}
    .alx-lightbox-image{
        max-width:92vw!important;
        max-height:88vh!important;
    }
}
