/* استایل‌های بخش کاربری افزونه برای انتخاب آدرس و فروشگاه */

.afzon-select-address,
.afzon-select-store {
    position: relative;
    display: inline-block;
    margin-left: 10px;
    font-family: inherit;
    z-index: 100;
}

/* دکمه‌های بازکننده منوی آدرس و فروشگاه
 * از متغیرهای CSS برای کنترل فاصله‌های عمودی و افقی استفاده می‌شود تا مدیر بتواند
 * اندازه دکمه‌ها را به دلخواه تنظیم کند. در صورت عدم تعریف متغیر، مقادیر پیش‌فرض 5 و 8 پیکسل
 * به ترتیب برای فاصله عمودی و افقی اعمال می‌شوند. */
.afzon-address-toggle,
.afzon-store-toggle {
    background: #f7f7f7;
    border: 1px solid #ccc;
    padding: var(--afzon-action-padding-vertical, 5px) var(--afzon-action-padding-horizontal, 8px);
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    min-width: 120px;
    /* اندازه فونت دکمه بر اساس اندازه فونت منو تعیین می‌شود */
    font-size: var(--afzon-font-size, 14px);
}

.afzon-address-toggle .afzon-arrow,
.afzon-store-toggle .afzon-arrow {
    margin-right: 5px;
}

.afzon-address-menu,
.afzon-store-menu {
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    padding: 5px 0;
    min-width: 200px;
    max-height: 300px;
    overflow-y: auto;
    display: none;
    border-radius: 4px;
    /* افزایش z-index برای قرارگیری بالاتر از سایر المان‌ها و جلوگیری از فریز شدن در موبایل */
    z-index: 99999;
}

.afzon-address-menu ul,
.afzon-store-menu ul,
.afzon-store-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* آیتم‌های منو: چینش با flex و فضای بین نام و دکمه‌ها */
/* آیتم‌های منو: چینش با flex و فضای بین نام و دکمه‌ها */
.afzon-address-item,
.afzon-store-menu li {
    /* پدینگ قابل تنظیم برای بالا/پایین و چپ/راست از طریق متغیرهای CSS
     * در صورت عدم تعریف، از مقادیر پیش‌فرض 5 پیکسل برای هر دو جهت استفاده می‌شود. */
    padding: var(--afzon-item-padding-vertical, 5px) var(--afzon-item-gap, 5px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: inherit;
}

.afzon-address-item.current,
.afzon-store-menu li.current {
    background-color: #f0f0f0;
}

/* دکمه‌های ویرایش و حذف در منوی آدرس و فروشگاه از متغیرهای CSS برای فاصله داخلی استفاده می‌کنند.
 * مقدار padding عمودی/افقی از طریق متغیرهای --afzon-action-padding-vertical و
 * --afzon-action-padding-horizontal تعیین می‌شود. هیچ margin اضافه‌ای اعمال نمی‌شود تا فاصله‌ها دقیقاً
 * مطابق تنظیمات مدیر باشند. */
.afzon-address-item button,
.afzon-store-menu button {
    background: none;
    border: none;
    color: #007cba;
    cursor: pointer;
    padding: var(--afzon-action-padding-vertical, 4px) var(--afzon-action-padding-horizontal, 4px);
    font-size: 12px;
}

.afzon-address-add-new,
.afzon-store-menu li:not(.afzon-address-item) {
    text-align: center;
    padding: 5px 10px;
}

.afzon-address-add-new button,
.afzon-add-new-address {
    background: #007cba;
    color: #fff;
    border: none;
    padding: 4px 8px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}

/* Modal Styles */
/*
 * Modal container. برای اطمینان از اینکه مودال همیشه بالاتر از منوهای آدرس و فروشگاه قرار می‌گیرد،
 * مقدار z-index را زیاد می‌کنیم. منوی آدرس و فروشگاه z-index 99999 دارند، لذا مودال باید
 * عددی بیشتر داشته باشد.
 */
.afzon-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}

.afzon-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

/* محتویات مودال بالاتر از overlay قرار می‌گیرند */
.afzon-modal-content {
    position: relative;
    background: #fff;
    padding: 20px;
    border-radius: 5px;
    max-width: 600px;
    width: 90%;
    z-index: 100001;
}

.afzon-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.afzon-modal-header h3 {
    margin: 0;
    font-size: 16px;
}

.afzon-modal-close {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: #888;
}

.afzon-modal-body {
    font-size: 14px;
}

.afzon-user-address-display {
    padding: 8px 0;
    font-size: 14px;
}

.afzon-confirm-address {
    margin-top: 10px;
}

/* غیرفعال شدن دکمه تأیید آدرس */
.afzon-confirm-address[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.afzon-confirm-address:not([disabled]) {
    opacity: 1;
    cursor: pointer;
}

/* Store list style */
.afzon-store-menu li.current span.store-name {
    font-weight: bold;
}

/* نمایش وضعیت باز/بسته و امتیاز فروشگاه */
.store-status.open {
    color: green;
}
.store-status.closed {
    color: red;
}
.store-rating {
    color: #f5a623;
}

/* ------ واکنش‌گرایی ------ */
@media (max-width: 600px) {
    /* در صفحه‌های کوچک، فقط عرض مودال کاهش می‌یابد. سایر عناصر از حاشیه‌های کلی افزونه استفاده می‌کنند. */
    .afzon-modal-content {
        width: 95% !important;
        max-width: none;
    }
}

/* آیکون فروشگاه ویژه در لیست فروشگاه‌ها */
.afzon-featured-icon {
    color: #f5a623;
    font-size: 14px;
}

/* کنترل‌های جستجو: لودر درون فیلد */
.afzon-search-controls {
    position: relative;
}
.afzon-search-controls .afzon-loader {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    margin: 0;
    pointer-events: none;
}

/* استایل برای آیتم‌های ویژه */
.afzon-store-menu li.featured {
    background-color: #fff9e6;
}
.afzon-store-menu li.featured .store-name {
    font-weight: bold;
    color: #c48c17;
}

/* آیتم‌هایی که پین چشمک‌زن دارند (برای تمایز در لیست فروشگاه) */
.afzon-store-menu li.blink {
    background-color: #e6f7ff;
}
.afzon-store-menu li.blink .store-name {
    font-weight: bold;
    color: #0073aa;
}

/* آیکون چشمک‌زن برای مارکرهای ویژه در نقشه */
.afzon-blink-container {
    width: 32px;
    height: 32px;
    position: relative;
}
.afzon-blink-icon {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
    animation: afzon-blink 1s infinite;
}

/*
 * نشان انتخاب آدرس (radio-like). این نشان به‌جای دکمه «انتخاب» در منوی آدرس قرار می‌گیرد.
 * برای آدرس انتخاب‌شده، این نشان مخفی می‌شود (در کلاس current).
 */
/* نشان انتخاب آدرس (radio-like) برای هر آیتم منو
 * این کلاس به صورت پیش‌فرض یک دایره خالی با حاشیه رنگی نمایش می‌دهد.
 * هنگامی که آدرس انتخاب شده باشد (کلاس .checked)، دایره پر می‌شود و علامت تیک در داخل آن نمایش داده می‌شود.
 */
.afzon-address-item .afzon-radio {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #007cba;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    /* فاصله کناری از طریق CSS Variables تعیین می‌شود. در صورت عدم تعریف، مقدار پیش‌فرض 5px استفاده می‌شود */
    margin: 0 var(--afzon-selection-gap, 5px);
}
/* حالت انتخاب شده: رنگ پس‌زمینه دایره و علامت تیک سفید */
.afzon-radio.checked {
    background-color: #007cba;
}
.afzon-radio.checked::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 4px;
    width: 3px;
    height: 6px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* آیکون فروشگاه ویژه (بدون چشمک زدن) برای مارکرها */
.afzon-featured-container {
    width: 32px;
    height: 32px;
    position: relative;
}
.afzon-featured-icon-marker {
    width: 32px;
    height: 32px;
    background-size: contain;
    background-repeat: no-repeat;
}

/* اطمینان از اینکه نقشه‌ها روی سایر عناصر صفحه قرار نمی‌گیرند */
#afzon-user-map,
#afzon-vendor-map,
#afzon-approved-map,
#afzon-all-stores-map {
    z-index: 0;
}

/*
 * نقطه چشمک‌زن قرمز برای فروشگاه‌هایی که پین چشمک‌زن دارند.
 * این کلاس‌ها برای divIcon سفارشی استفاده می‌شوند که در اسکریپت all-stores.js تعریف شده است.
 */
.afzon-blink-dot-container {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.afzon-blink-dot {
    width: 14px;
    height: 14px;
    background-color: #ff4d4f;
    border-radius: 50%;
    animation: afzon-blink-red 1s infinite;
}
@keyframes afzon-blink-red {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/*
 * زمانی که فروشگاه هم ویژه است (featured) و هم پین چشمک‌زن دارد (blink) در لیست فروشگاه‌ها،
 * اولویت با رنگ‌بندی و استایل فروشگاه ویژه است. بنابراین رنگ پس‌زمینه طلایی و رنگ عنوان
 * مانند فروشگاه ویژه باقی می‌ماند.
 */
.afzon-store-menu li.featured.blink {
    background-color: #fff9e6;
}
.afzon-store-menu li.featured.blink .store-name {
    color: #c48c17;
}

/*
 * کانتینری که برای آیکون‌های چشمک‌زن استفاده می‌شود. این کانتینر تصویر آپلودی را در مرکز قرار داده
 * و انیمیشن چشمک‌زن را روی آن اعمال می‌کند. مدت زمان انیمیشن به صورت inline در HTML تعیین می‌شود.
 */
.afzon-blink-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: afzon-blink 1s infinite;
}

/*
 * کلاس پین چشمک‌زن (برای container اصلی). این کلاس در divIcon تنظیم می‌شود و می‌تواند بدون
 * استایل خاص مورد استفاده قرار گیرد. در صورت نیاز، استایل‌دهی بیشتر می‌تواند در اینجا تعریف شود.
 */
.afzon-blink-marker {
    /* بدون استایل خاص؛ از ابعاد و ظاهر داخلی استفاده می‌شود */
}
@keyframes afzon-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Loader spinner used for asynchronous actions */
.afzon-loader {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: afzon-spin 0.6s linear infinite;
    margin-right: 4px;
    vertical-align: middle;
}

@keyframes afzon-spin {
    to { transform: rotate(360deg); }
}