/* ==========================================================================
   تغییر استایل دراپ‌دان fstdropdown هماهنگ با قالب مدرن Order
   ========================================================================== */

.fstdiv {
    position: relative;
    min-height: 48px; /* هماهنگی تقریبی با ارتفاع اینپوت‌های ۵۲ پیکسلی */
    width: 100%;
    width: -moz-available;
    width: -webkit-fill-available;
    width: fill-available;
    text-align: right;
    direction: rtl;
}

    .fstdiv.open {
        z-index: 2147483647;
    }

/* باکس اصلی دراپ‌دان */
.fstdropdown {
    vertical-align: middle;
    border: 2px solid #e2e8f0; /* رنگ مرزهای قالب اصلی */
    cursor: pointer;
    background: #f8fafc; /* رنگ پس‌زمینه فیلدها در حالت عادی */
    overflow: hidden;
    width: inherit;
    border-radius: 12px !important; /* گوشه‌های گرد هماهنگ با فیلدهای قالب */
    margin-bottom: 22px;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* حالت باز شدن دراپ‌دان */
.fstdiv.open > .fstdropdown {
    position: absolute;
    background: #ffffff;
    border-color: #3b486b;
    box-shadow: 0 10px 25px rgba(202, 157, 113, 0.24);
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
}
/* آیتم انتخاب شده */
.fstdropdown > .fstselected {
    line-height: 1.5;
    padding: 13px 18px 13px 40px; /* ایجاد فضا در چپ برای قرارگیری فلش */
    color: #334155; /* رنگ متن تیره قالب */
    font-size: 13px; /* هماهنگ با سایز فونت فیلدها */
    font-weight: 700;
    outline: 0;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-user-select: none;
    user-select: none;
}

    /* اصلاح و نمایش آیکون فلش رو به پایین */
    .fstdropdown > .fstselected::after {
        position: absolute;
        top: 50%;
        left: 18px; /* انتقال به سمت چپ در ساختار RTL */
        right: auto;
        display: block !important; /* فعال‌سازی مجدد فلش */
        width: 0;
        height: 0;
        margin-top: -2px;
        content: ' ';
        border-color: #64748b transparent transparent; /* رنگ متون ثانویه قالب */
        border-style: solid;
        border-width: 5px 5px 0;
        transition: transform 0.2s ease;
    }

/* حالت باز شو متن انتخاب شده */
.fstdropdown.open > .fstselected {
    border-bottom: 1px solid #f1f5f9;
}

    /* چرخش فلش به سمت بالا در زمان باز بودن */
    .fstdropdown.open > .fstselected::after {
        border-color: transparent transparent #3b486b;
        border-width: 0 5px 5px;
    }

/* لیست گزینه‌ها */
.fstdropdown > .fstlist {
    display: none;
    max-height: 220px;
    overflow-y: auto;
    overflow-x: hidden;
    background: #ffffff;
    padding: 5px 0;
}

.fstdropdown.open > .fstlist {
    display: block;
}

/* تک تک گزینه‌های داخل لیست */
.fstlist > div {
    padding: 5px 18px;
    font-size: 12px;
    color: #475569;
    user-select: none;
    -webkit-user-select: none;
    border-bottom: 1px solid #f8fafc;
    transition: all 0.15s ease;
    text-align: right;
}
    /* هوور روی گزینه‌ها - هماهنگ با بک‌گراند آبی/نارنجی انتخابی شما */
    .fstlist > div:hover {
        background-color: #eff6ff; /* هماهنگ با رنگ هوور دکمه‌های رادیویی قالب */
        color: #3b486b;
        font-weight: 700;
    }

    /* گزینه انتخاب شده در لیست */
    .fstlist > div.selected {
        background-color: #3b486b;
        color: #ffffff;
        font-weight: 700;
    }

/* بخش جستجو درون دراپ‌دان */
.fstsearch {
    padding: 8px 12px !important;
    background: #fff;
}

.fstsearchinput {
    padding: 10px 14px;
    width: 100%;
    box-sizing: border-box;
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    color: #334155;
    font-size: 12px;
    display: none;
    outline: none;
}

    .fstsearchinput:focus {
        border-color: #3b486b;
        background-color: #ffffff;
    }

.fstdropdown.open > .fstsearch,
.fstdropdown.open .fstsearchinput {
    display: block;
}

.fstdropdown .hideFst, .fstdropdown-select.fstcreated {
    display: none;
}

/* دکمه انتخاب همه (در صورت وجود) */
.fstAll {
    width: 100%;
    position: relative;
    background-color: #3b486b;
    color: #fff;
    border: 0;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    height: 34px;
    line-height: 34px;
    display: none;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

    .fstAll:hover {
        background-color: #3b486b;
    }

.open .fstAll {
    display: block;
}

/* ==========================================================================
   بهینه‌سازی ریسپانسیو (زیر ۷۶۸ پیکسل)
   ========================================================================== */
@media (max-width: 768px) {
    .fstdropdown > .fstselected {
        font-size: 12px;
        padding: 10px 14px 10px 35px;
    }

    .fstlist > div {
        font-size: 12px;
        padding: 8px 14px;
    }

    .fstdiv {
        min-height: 42px;
    }
}



/* حل مشکل فضای سفید پایین دراپ‌دان در حالت بسته */
.fstdropdown .fstsearch {
    display: none !important;
}

.fstdropdown.open .fstsearch {
    display: block !important;
}

/* اطمینان از هم‌پوشانی پس‌زمینه با لبه‌های گرد */
.fstdropdown {
    background: #f8fafc !important;
    overflow: hidden !important;
}