#bridge-listings,#bridge-listings-rental {
gap: 12px;
display: grid;
grid-template-columns: repeat(4, 1fr);
}
.filter-row {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.listing-card {
background: #fff;
border: 1px solid #ddd;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
overflow: hidden;
width: 100%;
max-width: 360px;
display: flex;
flex-direction: column;
}
.listing-img {
width: 100%;
height: 250px !important;
object-fit: cover;
}
.listing-content {
padding: 16px;
}
.listing-price {
font-size: 22px !important;
margin: 0 0 8px;
color: black !important;
}
.listing-address {
font-weight: 600;
margin-bottom: 12px;
}
.listing-meta {
display: flex;
flex-wrap: wrap;
gap: 12px;
list-style: none;
padding: 0;
margin: 0 0 12px;
font-size: 14px;
color: #333;
}
.listing-status {
font-size: 13px;
font-style: italic;
color: #666;
margin-bottom: 8px;
}
.btn-tour {
display: inline-block;
margin-top: 10px;
padding: 8px 12px;
background: #0073aa;
color: white;
text-decoration: none;
border-radius: 4px;
font-size: 14px;
}
#bridge-listing-popup,#bridge-listing-popup-rental {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.7);
z-index: 9999;
display: none;
}
.listing-details td {
padding: 6px 8px;
border-bottom: 1px solid #eaeaea;
}
.listing-details tr:last-child td {
border-bottom: none;
}
#popup-content, #popup-content-rental {
max-height: 90vh;
overflow-y: auto;      
padding-right: 16px;    
}
#popup-body img,#popup-body-rental img{
max-height:330px;
height:330px;
object-fit:cover;
width:100%;
}
#popup-body h2,#popup-body-rental h2{
font-size:22px;
color:#F77F50;
}
#popup-body h3, #popup-body-rental h3{
font-size:17px;
color:rgb(51, 51, 51);
}
#popup-body p,#popup-body table
#popup-body-rental p,#popup-body-rental table{
color:rgb(51, 51, 51);
}
#popup-body table,#popup-body-rental table {
border: 1px solid #eaeaea;
}
#popup-close, #popup-close-rental {
position: absolute;
top: 5px;
right: 5px;
cursor: pointer;
font-size: 33px;
font-weight: 600;
color: white;
z-index: 10;
background:rgb(51, 51, 51);
border-radius:10px;
padding: 2px 6px;
}
.listing-building{
font-size:18px !important;
color: #F77F50 !important;
}
.listing-address{
color:rgb(51, 51, 51);
}
.swiper-button-prev:after, .swiper-button-next:after{
font-size:28px !important;
}
@media (max-width: 1200px) {
#bridge-listings, #bridge-listings-rental {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 900px) {
#bridge-listings, #bridge-listings-rental {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
#bridge-listings, #bridge-listings-rental {
grid-template-columns: 1fr;
}
#popup-content,#popup-content-rental  {
max-width: 95%;
width: 100%;
padding: 10px !important;
}
#popup-content img, #popup-content-rental img {
max-height: 222px;
height: auto;
}
#popup-body p, #popup-body-rental p{
font-size:14px !important;
}
.listing-img {
height: 200px !important;
}
}