/**
 * Elementor Frontend CSS for RM Listings
 */

/* Listing Title */
.rm-listing-title {
    margin: 0;
}

/* Listing Image */
.rm-listing-image {
    display: block;
}

.rm-listing-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Listing Gallery */
.rm-listing-gallery {
    display: grid;
    gap: 10px;
}

.rm-listing-gallery-item {
    overflow: hidden;
}

.rm-listing-gallery-item img {
    display: block;
    width: 100%;
    height: auto;
}

.rm-listing-gallery-grid {
    display: grid;
}

.rm-listing-gallery-masonry {
    display: grid;
    grid-auto-rows: auto;
}

.rm-listing-gallery-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
}

.rm-listing-gallery-carousel .rm-listing-gallery-item {
    flex: 0 0 auto;
    scroll-snap-align: start;
}

/* Listing Field */
.rm-listing-field {
    display: block;
}

.rm-listing-field-label {
    font-weight: bold;
}

.rm-listing-field-value {
    display: inline-block;
}

/* Listing Details */
.rm-listing-details {
    display: block;
}

.rm-listing-details-list .rm-listing-detail-item {
    display: block;
    margin-bottom: 10px;
}

.rm-listing-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
}

.rm-listing-details-grid .rm-listing-detail-item {
    display: block;
}

.rm-listing-details-inline {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.rm-listing-details-inline .rm-listing-detail-item {
    display: inline-block;
}

.rm-listing-detail-label {
    font-weight: bold;
    margin-right: 5px;
}

.rm-listing-detail-value {
    display: inline-block;
}

/* Listing Carousel */
.rm-listing-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.rm-listing-carousel-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
}

.rm-listing-carousel-item {
    flex: 0 0 auto;
    width: 100%;
}

.rm-listing-carousel-item img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.rm-listing-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    z-index: 10;
    transition: background 0.3s ease;
}

.rm-listing-carousel-arrow:hover {
    background: rgba(0, 0, 0, 0.8);
}

.rm-listing-carousel-prev {
    left: 10px;
}

.rm-listing-carousel-next {
    right: 10px;
}

.rm-listing-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
}

.rm-listing-carousel-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ccc;
    cursor: pointer;
    transition: background 0.3s ease;
}

.rm-listing-carousel-dots .dot.active {
    background: #00012F;
}