/* Container اصلی */
.project-map-container {
    display: flex;
    flex-direction: row-reverse;
    height: 80vh;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    position: relative;
    overflow: hidden;
}

/* --- سایر استایل‌های دسکتاپ (بدون تغییر باقی می‌مانند) --- */
.projects-list-sidebar{width:350px;background-color:#f9f9f9;border-left:1px solid #ddd;display:flex;flex-direction:column;z-index:10;}
.projects-list-sidebar h3{padding:15px;margin:0;font-size:16px;font-weight:bold;background-color:#fff;border-bottom:1px solid #ddd;text-align:right;}
.projects-list{overflow-y:auto;flex-grow:1;}
.project-item{display:flex;padding:10px;border-bottom:1px solid #eee;cursor:pointer;transition:background-color .3s;}
.project-item:hover,.project-item.active{background-color:#eaf2ff;}
.project-image{width:80px;height:80px;flex-shrink:0;margin-left:15px;}
.project-image img{width:100%;height:100%;object-fit:cover;border-radius:4px;}
.project-details{display:flex;flex-direction:column;text-align:right;}
.project-badge{background-color:#ffc107;color:#333;padding:3px 8px;font-size:11px;border-radius:12px;display:inline-block;align-self:flex-start;margin-bottom:5px;}
.project-type{margin:0 0 5px;font-size:15px;font-weight:bold;color:#333;}
.project-title{margin:0 0 8px;font-size:13px;color:#555;}
.project-description{font-size:12px;color:#666;margin-bottom:8px;line-height:1.5;}
.project-description p{margin:0;}
.project-status{font-size:12px;font-weight:bold;padding:4px 8px;border-radius:4px;align-self:flex-start;}
.project-status.completed{background-color:#d4edda;color:#155724;}
.project-status.in-progress{background-color:#fff3cd;color:#856404;}
.map-view{flex-grow:1;height:100%;}
#project-info-card-container{position:absolute;bottom:-200px;left:50%;transform:translateX(-50%);z-index:1001;transition:bottom .4s ease-in-out;width:400px;max-width:90%;}
#project-info-card-container.visible{bottom:20px;}
.project-info-card{background:#fff;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.2);display:flex;padding:10px;position:relative;}
.close-card-btn{position:absolute;top:5px;left:8px;background:none;border:none;font-size:24px;line-height:1;cursor:pointer;color:#888;}
.project-info-card .card-image{width:90px;height:90px;flex-shrink:0;margin-left:15px;}
.project-info-card .card-image img{width:100%;height:100%;object-fit:cover;border-radius:6px;}
.project-info-card .card-details{display:flex;flex-direction:column;align-items:flex-start;text-align:right;flex-grow:1;}
.project-info-card .card-details .project-badge{font-size:10px;}
.project-info-card .card-type{font-size:14px;font-weight:bold;margin:5px 0;}
.project-info-card .card-title{font-size:12px;color:#666;margin:0 0 10px;}
.project-info-card .card-button{background-color:#007bff;color:#fff;padding:8px 16px;text-decoration:none;border-radius:5px;font-size:13px;font-weight:bold;transition:background-color .2s;}
.project-info-card .card-button:hover{background-color:#0056b3;}
.badge-holder{ display: flex;flex-direction: row;justify-content: space-between;}
.btn-holder{ display: flex;flex-direction: row;justify-content: space-between;width: 100%;}


/* --- استایل دکمه‌های تعویض نما (در حالت دسکتاپ مخفی است) --- */
.mobile-view-toggle {
    display: none;
}


/* =========================================== */
/* === استایل‌های ریسپانسیو حرفه‌ای (موبایل) === */
/* =========================================== */
@media (max-width: 768px) {
    .project-map-container {
        height: 85vh; /* تنظیم ارتفاع برای موبایل */
    }

    /* --- استایل دکمه‌های تعویض نما --- */
    .mobile-view-toggle {
        display: flex;
        position: absolute;
        bottom: 15px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 1002; /* بالاتر از کارت اطلاعات */
        background: rgba(255, 255, 255, 0.9);
        border-radius: 30px;
        padding: 5px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.2);
        border: 1px solid #eee;
    }
    .mobile-view-toggle button {
        border: none;
        background: transparent;
        padding: 8px 15px;
        cursor: pointer;
        font-weight: bold;
        color: #555;
        border-radius: 25px;
        transition: all 0.3s ease;
        font-size: 14px;
    }
    .mobile-view-toggle button.active {
        background: #007bff;
        color: #fff;
    }

    /* --- منطق نمایش و مخفی‌سازی نماها --- */
    
    /* در حالت پیش‌فرض (نمای نقشه)، لیست کاملا مخفی است */
    .projects-list-sidebar {
        display: none;
    }
    .map-view {
        display: block;
        width: 100%;
        height: 100%;
    }

    /* وقتی کلاس .show-list-view به کانتینر اضافه می‌شود: */
    .project-map-container.show-list-view .projects-list-sidebar {
        display: flex; /* نمایش لیست */
        width: 100%;
        height: 100%;
        border: none;
    }
    .project-map-container.show-list-view .map-view {
        display: none; /* مخفی کردن نقشه */
    }

    /* موقعیت کارت اطلاعات را کمی بالاتر از دکمه‌های جدید تنظیم می‌کنیم */
    #project-info-card-container.visible {
       bottom: 75px; 
       width: 95%;
    }
}




.project-label {
    background-color: transparent; 
    border: none;             
    box-shadow: none;             
    font-weight: bold;             
    font-size: 13px;
    color: #333;                   
    
 
    text-shadow: 
        1px 1px 1px #fff, 
        -1px -1px 1px #fff, 
        1px -1px 1px #fff, 
        -1px 1px 1px #fff;
}







.project-description p {
	  display: -webkit-box;
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical;
  overflow: hidden;

}