/* Custom theme for S-Plots & ToLets */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f8f9fa;
}

.hero-section {
    background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?auto=format&fit=crop&w=1200&q=80');
    background-size: cover;
    background-position: center;
    padding: 100px 0;
    color: white;
    text-align: center;
}

.filter-box {
    background: white;
    padding: 20px;
    border-radius: 8px;
    color: black;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.1);
}

.brand-container {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.sub-brand {
    font-size: 11px;
    color: #ffc107;
    letter-spacing: 1px;
    text-decoration: none;
}

/* Fix Bootstrap Modal Backdrop Overlay Issue */
.modal-backdrop {
    z-index: 1040 !important;
}
#userAuthModal {
    z-index: 1055 !important;
}

/* 📝 4 LINES TRUNCATE DESIGN (CLEAN & COMPATIBLE) */
.description-truncated {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
    max-height: 5.6em; /* Fallback for browsers that don't support line-clamp */
    line-height: 1.4em;
}

.see-more-btn {
    color: #0d6efd;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 5px;
    text-decoration: underline;
}

.see-more-btn:hover {
    color: #0a58ca;
}

/* 🏢 ELEGANT MODAL LAYOUT STYLES */
.modal-lg-custom {
    max-width: 900px !important; /* Expands the modal width for a premium presentation */
}

/* 📸 Carousel Fixed Aspect Ratio */
.property-main-carousel img {
    height: 380px !important;
    object-fit: cover;
    border-radius: 8px;
}

/* 💡 Suggested Properties Flex/Grid Control */
.suggested-card-img {
    height: 140px !important;
    object-fit: cover;
    border-radius: 6px 6px 0 0;
}

.suggested-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.suggested-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* ==========================================
   📱 MOBILE & TABLET RESPONSIVE STYLES
   ========================================== */

/* 1. Prevent Screen Overflow on Mobile */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* 2. Responsive Hero Section Padding */
@media (max-width: 768px) {
    .hero-section {
        padding: 40px 15px !important;
    }
    .hero-section h1 {
        font-size: 1.6rem !important;
    }
    .hero-section p {
        font-size: 0.9rem !important;
    }
    .property-main-carousel img {
        height: 240px !important; /* Mobile screens లో ఇమేజ్ సైజ్ స్వయంచాలకంగా అడ్జస్ట్ అవుతుంది */
    }
}

/* 3. Filter Box & Radio Buttons Stack on Mobile */
@media (max-width: 576px) {
    .filter-box .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
    }
    .filter-box .btn-group .btn {
        flex: 1 1 45%; /* Buttons align cleanly across 2 rows on mobile */
        border-radius: 8px !important;
        font-size: 12px;
        padding: 6px 4px;
    }
    .filter-box .input-group {
        flex-direction: column;
    }
    .filter-box .input-group #mainSearchInput {
        border-radius: 8px !important;
        margin-bottom: 8px;
    }
    .filter-box .input-group .btn-success {
        border-radius: 8px !important;
        width: 100%;
    }
}

/* 4. Navigation Bar Responsive Tweaks */
@media (max-width: 991px) {
    .navbar .container {
        flex-direction: column;
        gap: 10px;
    }
    .navbar .brand-container {
        text-align: center;
    }
}

/* 5. Trending Tags & Modal Responsiveness */
.hover-shadow {
    transition: transform 0.2s, box-shadow 0.2s;
}
.hover-shadow:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

@media (max-width: 576px) {
    .modal-dialog {
        margin: 10px;
    }
    #popularSearchTags button {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
}

/* 🏢 PREMIUM PROPERTY DETAIL MODAL STYLES */
.modal-lg-custom {
    max-width: 900px !important;
}

/* 📸 Carousel Fixed Aspect Ratio & Navigation Arrows */
.property-main-carousel {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-color: #000;
}

.property-main-carousel .carousel-item img {
    height: 380px !important;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 768px) {
    .property-main-carousel .carousel-item img {
        height: 250px !important; /* Mobile Responsive Height */
    }
}

/* 💰 ELEGANT PRICE & DETAILS BADGE */
.modal-price-tag {
    font-size: 1.8rem;
    font-weight: 800;
    color: #198754;
    background: #e8f5e9;
    padding: 6px 16px;
    border-radius: 8px;
    display: inline-block;
}

/* 💡 SUGGESTIONS GRID FIX */
.suggested-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #e0e0e0;
}

.suggested-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.12) !important;
}

.suggested-card-img {
    height: 120px !important;
    object-fit: cover;
    width: 100%;
}