/* =========================================
           1. BRAND COLORS & THEMING
        ========================================= */
        :root {
            --bg-color: #fafcf7;
            --text-main: #2a3b18;
            --text-muted: #5e7345;
            --primary: #759c3e; 
            --accent: #b3964d;  
            --card-bg: rgba(255, 255, 255, 0.75);
            --nav-bg: rgba(250, 252, 247, 0.85);
            --border-color: rgba(117, 156, 62, 0.2);
            --pattern-opacity: 0.08;
            --logo-opacity: 0.05;
            --glass-shadow: 0 25px 50px rgba(117, 156, 62, 0.15);
        }

        [data-theme="dark"] {
            --bg-color: #0d1208;
            --text-main: #ffffff;
            --text-muted: #a4b590;
            --primary: #759c3e;
            --accent: #d1b673; 
            --card-bg: rgba(26, 36, 16, 0.75);
            --nav-bg: rgba(13, 18, 8, 0.85);
            --border-color: rgba(117, 156, 62, 0.3);
            --pattern-opacity: 0.03;
            --logo-opacity: 0.02;
            --glass-shadow: 0 25px 50px rgba(0, 0, 0, 0.8);
        }

        /* STRICT OVERFLOW CONTROL FOR RESPONSIVENESS */
        html, body { overflow-x: hidden; width: 100%; margin: 0; padding: 0; }
        body { font-family: 'Outfit', 'Noto Sans Ethiopic', sans-serif; background-color: var(--bg-color); color: var(--text-main); transition: background-color 0.5s ease, color 0.5s ease; padding-top: 80px; position: relative; }
        ::-webkit-scrollbar { width: 10px; }
        ::-webkit-scrollbar-track { background: var(--bg-color); }
        ::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 5px; }

       
        /* =========================================
           2. LIVE BACKGROUNDS
        ========================================= */
        body::before {
            content: ""; position: fixed; top: -50%; left: -50%; width: 300vw; height: 500vh;
            background-image: url('../images/pattern.png');
            background-size: 400px; background-repeat: repeat;
            filter: grayscale(100%) sepia(100%) hue-rotate(45deg) saturate(400%) contrast(1.2);
            opacity: 0.03; z-index: -2; pointer-events: none; transition: opacity 0.5s ease;
            animation: panPattern 90s linear infinite;
        }
        @keyframes panPattern { 0% { transform: translate(0, 0); } 100% { transform: translate(400px, 400px); } }

        body::after {
            content: ""; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
            width: 70vw; height: 70vh;
            background-image: url('../logo.webp');
            background-size: contain; background-position: center; background-repeat: no-repeat;
            opacity: 0.1; z-index: -1; pointer-events: none; transition: opacity 0.5s ease;
        }

        .glow-orb { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; animation: orbFloat 12s infinite alternate ease-in-out; }
        .orb-1 { width: 400px; height: 400px; background: rgba(117, 156, 62, 0.3); top: 5%; left: -5%; }
        .orb-2 { width: 350px; height: 350px; background: rgba(179, 150, 77, 0.25); bottom: 20%; right: 5%; animation-delay: -6s; }
        @keyframes orbFloat { 0% { transform: scale(1) translate(0, 0); } 100% { transform: scale(1.3) translate(50px, -50px); } }

        /* =========================================
           3. FLOATING GLOBAL CONTROLS
        ========================================= */
        .floating-controls { position: fixed; bottom: 30px; right: 30px; z-index: 9999; display: flex; flex-direction: column; gap: 15px; }
        .floating-btn {
            background: var(--card-bg); backdrop-filter: blur(15px); border: 2px solid var(--primary); color: var(--primary);
            width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
            font-size: 1.6rem; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            text-decoration: none;
        }
        .floating-btn:hover { background: var(--primary); color: white; transform: scale(1.15) rotate(10deg); box-shadow: 0 15px 30px rgba(117, 156, 62, 0.4); }

        /* =========================================
           4. UNIQUE BOX ANIMATIONS
        ========================================= */
        .anim-levitate { animation: levitate 7s ease-in-out infinite; }
        @keyframes levitate { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

        .anim-swing { animation: swing 9s ease-in-out infinite; transform-origin: top center; }
        @keyframes swing { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }

        .anim-pulse { animation: pulseBox 5s infinite; }
        @keyframes pulseBox { 0%, 100% { box-shadow: 0 10px 30px rgba(117, 156, 62, 0.1); } 50% { box-shadow: 0 20px 50px rgba(179, 150, 77, 0.3); } }

        .anim-morph { animation: morphing 10s ease-in-out infinite; overflow: hidden; }
        @keyframes morphing { 0%, 100% { border-radius: 20px; } 25% { border-radius: 40px 15px 35px 15px; } 75% { border-radius: 15px 35px 15px 40px; } }

        .img-breathe { width: 100%; height: 100%; object-fit: cover; animation: breatheZoom 12s infinite alternate ease-in-out; transition: transform 0.5s; }
        @keyframes breatheZoom { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }

        /* =========================================
           5. UI COMPONENTS
        ========================================= */
        /* =========================================
   FIX FOR FORM PLACEHOLDERS & SELECT OPTIONS IN DARK MODE
========================================= */

/* 1. Force placeholders to use your theme's muted text color */
::-webkit-input-placeholder { color: var(--text-muted) !important; opacity: 0.8; }
::-moz-placeholder { color: var(--text-muted) !important; opacity: 0.8; }
:-ms-input-placeholder { color: var(--text-muted) !important; opacity: 0.8; }
:-moz-placeholder { color: var(--text-muted) !important; opacity: 0.8; }
::placeholder { color: var(--text-muted) !important; opacity: 0.8; }

/* 2. Force <option> tags to use the solid theme background so text doesn't vanish */
select option {
    background-color: var(--bg-color); /* Uses white in light mode, dark-green in dark mode */
    color: var(--text-main);           /* Uses dark text in light mode, white text in dark mode */
    font-weight: 500;
}

/* 3. Ensure input text color stays bright in dark mode */
.form-control, .form-select {
    color: var(--text-main) !important;
}
.form-control:focus, .form-select:focus {
    color: var(--text-main) !important;
}

        .navbar { background: var(--nav-bg) !important; backdrop-filter: blur(25px); border-bottom: 1px solid rgba(117, 156, 62, 0.1); }
        .navbar-brand img { height: 55px; transition: transform 0.3s; }
        .navbar-brand:hover img { transform: scale(1.05); }
        .nav-link { font-weight: 600; margin: 0 10px; color: var(--text-main)!important; transition: color 0.3s; }
        .nav-link:hover, .nav-link.active { color: var(--primary)!important; }
        
        .btn-brand {
            background: linear-gradient(135deg, var(--primary), #5a7d2e); color: white; border: none; padding: 12px 30px; border-radius: 12px; font-weight: 600;
            position: relative; overflow: hidden; z-index: 1; transition: all 0.4s; text-decoration: none; display: inline-block;
        }
        .btn-brand::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(135deg, var(--accent), #8c7336); z-index: -1; transition: all 0.4s ease; }
        .btn-brand:hover::before { left: 0; }
        .btn-brand:hover { transform: translateY(-3px) scale(1.03); color: white; box-shadow: 0 15px 25px rgba(179, 150, 77, 0.4); }

        .btn-brand-outline {
            border: 2px solid var(--primary); color: var(--primary); background: transparent; padding: 10px; border-radius: 10px; font-weight: 600; transition: all 0.3s; text-decoration: none; display: block; text-align: center;
        }
        .btn-brand-outline:hover { background: var(--primary); color: white; transform: translateY(-2px); box-shadow: 0 5px 15px rgba(117, 156, 62, 0.3); }

        .css-slideshow { position: relative; overflow: hidden; height: 380px; width: 100%; border: 4px solid var(--accent); border-radius: 20px; }
        .css-slideshow img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: liveSlideAnim 15s infinite; transform: scale(1.2); }
        .css-slideshow img:nth-child(1) { animation-delay: 0s; } .css-slideshow img:nth-child(2) { animation-delay: 5s; } .css-slideshow img:nth-child(3) { animation-delay: 10s; }
        @keyframes liveSlideAnim { 0% { opacity: 0; transform: scale(1.2); } 10% { opacity: 1; transform: scale(1.1); } 25% { opacity: 1; transform: scale(1.05); } 35% { opacity: 0; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } }

        .search-glass { background: var(--card-bg); backdrop-filter: blur(25px); border: 1px solid var(--border-color); border-radius: 20px; padding: 10px; box-shadow: var(--glass-shadow); transform: translateY(-50%); position: relative; z-index: 10; }
        .search-glass 

        .form-control, .search-glass .form-select { background: transparent; border: none; color: var(--text-main); font-weight: 600; height: 50px; }
        .search-glass 

        .form-control:focus, .search-glass .form-select:focus { box-shadow: none; }
        .search-divider { border-right: 2px solid var(--border-color); }
        
        .property-card { background: var(--card-bg); backdrop-filter: blur(15px); border: 1px solid var(--border-color); border-radius: 20px; padding: 15px; transform-style: preserve-3d; box-shadow: var(--glass-shadow); height: 100%; display: flex; flex-direction: column;}
        .property-card .img-wrapper { border-radius: 15px; overflow: hidden; height: 260px; position: relative; transform: translateZ(30px); }
        .property-card:hover .img-breathe { animation-play-state: paused; transform: scale(1.18); }
        .property-card .card-body { transform: translateZ(20px); flex-grow: 1; display: flex; flex-direction: column;}
        .badge-status { position: absolute; top: 15px; left: 15px; background: var(--accent); color: white; padding: 6px 16px; border-radius: 30px; font-weight: 700; font-size: 0.8rem; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 10px 20px rgba(0,0,0,0.3); transform: translateZ(50px); }

        .info-box { background: var(--card-bg); backdrop-filter: blur(15px); border: 1px solid var(--border-color); padding: 40px 30px; text-align: center; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}
        .info-box i { font-size: 3.5rem; color: var(--primary); margin-bottom: 20px; transition: 0.3s; }
        .info-box:hover i { color: var(--accent); transform: scale(1.2); }


          /* Detail Specific Classes */
        .gallery-box { border-radius: 20px; overflow: hidden; border: 4px solid var(--border-color); box-shadow: var(--glass-shadow); position: relative; cursor: pointer; transform-style: preserve-3d; background: var(--card-bg);}
        .gallery-box:hover .img-breathe { animation-play-state: paused; transform: scale(1.15); }
        .badge-status { position: absolute; top: 20px; left: 20px; background: var(--accent); color: white; padding: 8px 20px; border-radius: 30px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; box-shadow: 0 10px 20px rgba(0,0,0,0.3); z-index: 2; }

        .amenity-box { background: var(--card-bg); backdrop-filter: blur(15px); border: 1px solid var(--border-color); border-radius: 15px; padding: 20px; text-align: center; transition: all 0.3s; box-shadow: var(--glass-shadow); display: flex; flex-direction: column; justify-content: center; align-items: center; }
        .amenity-box i { font-size: 2rem; color: var(--primary); margin-bottom: 10px; transition: 0.3s; }
        .amenity-box:hover i { color: var(--accent); transform: scale(1.2); }
        .amenity-box:hover { border-color: var(--accent); transform: translateY(-5px); }

        .agent-card { background: var(--card-bg); backdrop-filter: blur(25px); border: 2px solid var(--accent); border-radius: 25px; padding: 30px; box-shadow: var(--glass-shadow); position: sticky; top: 110px; }
        .agent-card 

        .form-control { background: transparent; 
            border: 1px solid var(--border-color); 
            color: var(--text-main); 
            font-weight: 500; 
            border-radius: 10px; padding: 12px; }
        .agent-card 



        .form-control:focus { border-color: var(--primary); box-shadow: none; }

        @media (max-width: 991px) {
            .agent-card { position: static; margin-top: 40px; } /* Disable sticky on mobile */
        }




        @media (max-width: 768px) {
            .display-3 { font-size: 2.5rem; } 
            .floating-controls { bottom: 15px; right: 15px; gap: 10px; }
            .floating-btn { width: 45px; height: 45px; font-size: 1.2rem; }
            .search-divider { border-right: none; border-bottom: 2px solid var(--border-color); margin-bottom: 10px; } 
            .search-glass { transform: translateY(0); margin-top: 20px; }
            footer { padding-bottom: 80px !important; text-align: center; }
            footer .text-lg-end { text-align: center !important; margin-top: 20px; }
        }







    /* ... your existing CSS from :root down to the floating controls ... */

    /* =========================================
       3. FLOATING GLOBAL CONTROLS
    ========================================= */
    .floating-controls { 
        position: fixed; bottom: 30px; right: 30px; z-index: 9999;
        display: flex; flex-direction: column; gap: 15px; opacity: 0.7;
    }
    .floating-btn {
        background: var(--card-bg); backdrop-filter: blur(15px); border: 2px solid var(--primary); color: var(--primary);
        width: 55px; height: 55px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        font-size: 1.6rem; cursor: pointer; box-shadow: 0 10px 25px rgba(0,0,0,0.15); transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        text-decoration: none;
    }
    .floating-btn:hover { background: var(--primary); color: white; transform: scale(1.15) rotate(10deg); box-shadow: 0 15px 30px rgba(117, 156, 62, 0.4); }









/* =========================================
   3. FLOATING ACTION BUTTON (FAB)
========================================= */
.floating-fab-container {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 99998;
    display: flex;
    flex-direction: column-reverse; /* Stack actions above main button */
    align-items: center;
}

.fab-main {
    background: var(--primary);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    cursor: pointer;
    position: relative; /* For stacking the icon and image */
    transition: transform 0.3s ease;
    overflow: hidden; /* To keep image contained */
}

.fab-main:hover {
    transform: scale(1.1);
}

.fab-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fab-main .fab-icon {
    font-size: 1.5rem;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    z-index: 2;
    /* Icon starts invisible, under the image */
    opacity: 0;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* --- Active State --- */
.floating-fab-container.active .fab-main {
    transform: rotate(360deg);
}
.floating-fab-container.active .fab-main img {
    opacity: 0; /* Hide image on click */
}
.floating-fab-container.active .fab-main .fab-icon {
    transform: rotate(135deg); /* Turns 'plus' into 'close' (X) */
    opacity: 1; /* Show icon on click */
}

.fab-actions {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.fab-action {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    color: white;
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
    text-decoration: none;
    
    /* Start hidden and scaled down */
    opacity: 0;
    transform: scale(0.5) translateY(20px);
    transition: all 0.3s ease;
}

/* Animate actions appearing one by one */
.floating-fab-container.active .fab-action {
    opacity: 1;
    transform: scale(1) translateY(0);
}
.floating-fab-container.active .fab-action:nth-child(1) { transition-delay: 0.2s; }
.floating-fab-container.active .fab-action:nth-child(2) { transition-delay: 0.1s; }
.floating-fab-container.active .fab-action:nth-child(3) { transition-delay: 0.0s; }

.fab-action:hover {
    transform: scale(1.15);
    filter: brightness(1.1);
}

/* =========================================
   RESPONSIVITY FIXES FOR FAB
========================================= */
@media (max-width: 768px) {
    .floating-fab-container {
        bottom: 15px;
        left: 15px;
    }
    .fab-main {
        width: 50px;
        height: 50px;
    }
    .fab-main .fab-icon {
        font-size: 1.2rem;
    }
    .fab-action {
        width: 42px;
        height: 42px;
        font-size: 1.1rem;
    }
}