/*
 * Iran Map - SVG and Responsive.
 * By: Mojtaba.
 */
#IranMap{background: #323232;display:block;position:relative;direction:rtl;text-align:right;padding:0;font-family:iransans;font-size:11px;width:90%;margin:50px auto}#IranMap .show-title{display:none;position:absolute;background-color:#333;color:#fff;margin:0!important;padding:0 5px;text-align:center;line-height:26px;border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px;opacity:.8}#IranMap .map{display:block;float:left;width:50%;text-align:left;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none}#IranMap .map svg{height:500px;width:500px}#IranMap .map .border path,#IranMap .map .island path{fill:#fff}#IranMap .map .province path{fill:#72777b}#IranMap .map .sea path,#IranMap .map .lake path{fill:#6caed8}#IranMap .map .province path:hover,#IranMap .map .island path:hover,#IranMap .map .province path.hover,#IranMap .map .island path.hover{fill:#fdb143 !important;cursor:pointer;stroke: #000000 !important;stroke-width: 5px;}#IranMap .list{display:block;float:right;width:50%}#IranMap .list ul{padding:0}#IranMap .list>ul{margin-left:10px}#IranMap .list li{list-style:none;font-size: 14px;}#IranMap .list span{background:#037053;color:#ecf0f1;display:block;margin:0 2px;padding:0 8px;line-height:26px;margin-top:10px;margin-bottom:2px;border-radius: 5px;}#IranMap .list li ul li{display:block;float:right;width:50%}#IranMap .list li ul li a{background:#72777b;color:#fff;display:block;padding:0 8px;line-height:26px;margin:2px 2px;text-decoration:none;border-radius: 4px;}#IranMap .list li ul li a:hover,#IranMap .list li ul li a.hover{background:#fdb143}#IranMap .list ul:before,#IranMap .list ul:after{display:table;content:" "}#IranMap .list ul,#IranMap .list ul:after{clear:both}#IranMap .city{clear:both;padding:10px 0}@media(max-width:930px){#IranMap .list{width:50%}}@media(max-width:745px){#IranMap .list li ul li{width:50%}}@media(max-width:515px){#IranMap .list,#IranMap .map{width:100%}#IranMap .list li ul li{width:50%}#IranMap .list li ul li a{font-size:10px!important}}@media(max-width:515px){#IranMap .list li ul li{width:50%}}@media(max-width:250px){#IranMap .list li ul li{width:100%}
}
path.tehran,path.kurdistan,path.gilan,path.mazandaran,path.fars,path.hormozgan,path.alborz,path.khuzestan,path.lorestan,path.azerbaijan-west {
    fill: #144a8a !important;
    stroke: #fdb143 !important;
    stroke-width: 5px;
}

#IranMap .list li.tehran a:hover,
#IranMap .list li.gilan a:hover,
#IranMap .list li.mazandaran a:hover,
#IranMap .list li.fars a:hover,
#IranMap .list li.hormozgan a:hover,
#IranMap .list li.alborz a:hover,
#IranMap .list li.lorestan a:hover,
#IranMap .list li.khuzestan a:hover,
#IranMap .list li.azerbaijan-west a:hover,
#IranMap .list li.kurdistan a:hover {
    background-color: #fdb143 !important;
    color: #000000 !important;
}
.list ul li {
    position: relative; /* برای اینکه پاپ‌آپ نسبت به li قرار بگیره */
}

#province-popup {
     position: absolute;
    top: 255%;
    left: 0%;
    transform: translateY(-50%);
    padding: 10px 14px;
    background: #ffffff;
    color: #333;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    display: none;
    z-index: 1000;
    white-space: nowrap;
    font-size: 14px;
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

/* وقتی نمایش داده میشه */
#province-popup.show {
    transform: translateY(-50%) translateX(0);
    opacity: 1;
}

#province-popup strong {
    font-weight: 600;
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}

#province-popup span.phone {
    font-size: 13px;
    color: #555555; /* خاکستری کمی روشن تر */
    display: block;
}
span.phone {
    background: #fdb143 !important;
    border-radius: 8px;
}
/* برای موبایل (عرض کمتر از 600px) */
@media screen and (max-width: 600px) {
  #province-popup {
        position: relative;   /* دیگر absolute نیست */
        top: auto;            /* موقعیت بالا برداشته شود */
        right: auto;          /* سمت راست برداشته شود */
        left: auto;           /* سمت چپ برداشته شود */
        transform: none;      
        width: 70%;           /* کمی فاصله از اطراف */
        max-width: 75%;     /* حداکثر عرض */
        margin: 4px auto;     /* زیر لینک، وسط چین */
        padding: 12px 16px;   
        border-radius: 8px;   
        box-shadow: 0 4px 12px rgba(0,0,0,0.2); 
        background: #ffffff;  /* سفید ساده */
        color: #333333;       
        font-size: 14px;      
        z-index: 1000;        
        opacity: 1;  /* همیشه قابل مشاهده */
        align-items: center;
        text-align: center;
    }

    #province-popup.show {
        display: block;       /* حتما نمایش داده شود */
    }

    #province-popup strong {
        font-size: 15px;
        color: #144a8a;       /* رنگ مدرن */
        display: block;
        margin-bottom: 4px;
    }

    #province-popup span.phone {
        font-size: 13px;
        color: #555;
    }
    .popup-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* عکس گرد */
    border: 2px solid #fdb143;
}
    #IranMap {
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-height: none;   /* دیگر محدود به 100vh نیست */
        overflow: visible;  /* اسکرول کل صفحه فعال باشد (یا خود المنتور مدیریت کند) */
    }

    #IranMap .map {
        width: 90%;       /* کمی حاشیه اطراف */
        max-width: 100% !important; /* حداکثر عرض */
              height: auto;       /* ارتفاع خود SVG یا 40vh اختیاری */
        margin: 0 auto;
    }

    #IranMap .map svg {
        width: 100% !important;
        height: auto !important;
    }
    #IranMap .list {
        width: 90%;       /* همانند نقشه */
        max-width: 100% !important;
        margin: 10px auto; /* فاصله از نقشه */
              height: auto !important;       /* ارتفاع آزاد */
           max-height: none;   /* محدودیت برداشته شود */
        overflow: visible;  /* اسکرول داخلی حذف شود */
        text-align: center;    }

    #IranMap .list li ul li a {
        font-size: 12px;  /* فونت کمی بزرگ‌تر از قبل */
        padding: 4px 6px;
    }
       #IranMap .list li ul {
        display: flex;
        flex-wrap: wrap;    /* مرتب کردن لینک‌ها داخل لیست */
          justify-content: center; /* وسط چین لینک‌ها */
    }
      #IranMap .list ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
  }

  #IranMap .list li {
      width: 90%; /* دوتا در هر ردیف */
  }

}
#IranMap {
    display: flex;
    direction: rtl;
    width: 90%;
    max-width: 1200px; /* حداکثر عرض کل */
    margin: 50px auto;
    align-items: flex-start; /* بالای ستون‌ها هماهنگ */
    gap: 20px; /* فاصله بین نقشه و لیست */
}
#IranMap .map {
    flex: 1 1 50%; /* حداقل 50% عرض */
    max-width: 50%;
    height: auto !important;   /* ارتفاع آزاد */
}

/* SVG داخل نقشه */
#IranMap .map svg {
    width: 100% !important;  /* عرض همیشه 100% ستون */
    height: auto !important;   /* نسبت‌ها حفظ میشه */
    max-height: 500px;         /* فقط برای دسکتاپ محدود */
}
#IranMap .list {
    flex: 1 1 50%; /* 50% عرض */
    max-width: 50%;
 text-align: center;
}
.popup-content {
    display: flex;
    align-items: center;
    gap: 10px;
}

.popup-img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%; /* عکس گرد */
    border: 2px solid #fdb143;
}

.popup-text {
    font-size: 13px;
    color: #333;
    line-height: 1.6;
}
#province-popup .phone a {
    background: #fdb143 !important;
    text-decoration: none;
}
#province-popup .phone a:hover {
    color: #fff; /* رنگ هنگام هاور */
}