/* =========================================
   استایل‌های پنل مدیریت وردپرس
========================================= */
.ca-admin-wrap { font-family: 'IRANSans', Tahoma, Arial, sans-serif !important; }
.ca-admin-wrap h1 { font-family: 'IRANSans', Tahoma, Arial, sans-serif !important; font-weight: bold; margin-bottom: 10px; }
.ca-desc { font-size: 14px; color: #555; margin-bottom: 25px; }
#ca-sortable-list { margin: 20px 0; max-width: 900px; }

.ca-box-item {
    background: #ffffff;
    margin-bottom: 20px;
    padding: 0;
    display: flex;
    align-items: stretch;
    transition: all 0.2s ease;
    overflow: hidden;
}

.ca-drag-handle {
    cursor: grab;
    background: #f1f1f1;
    width: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 20px;
    color: #666;
}
.ca-drag-handle:active { cursor: grabbing; background: #e5e5e5; }
.ca-remove-box { margin-top: 20px; color: #dc3232; cursor: pointer; transition: color 0.2s ease; }
.ca-remove-box:hover { color: #a00; }
.ca-editor-container { flex: 1; padding: 10px 15px; }
#ca-submit-btn, #ca-add-box-btn { font-family: 'IRANSans', Tahoma, Arial, sans-serif; }

/* =========================================
   استایل‌های فرانت‌اند سایت (نمایش به کاربر)
========================================= */
.custom-announcements-wrapper {
    background: transparent;
    box-sizing: border-box;
    width: 100%;
    font-family: 'IRANSans', Tahoma, Arial, sans-serif;
}

.custom-announcements-wrapper ul.ca-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* 
تغییر مهم: استفاده از gap برای فاصله افقی دقیق
*/
.custom-announcements-wrapper ul.ca-list li {
    padding: 15px 0;
    display: flex;
    align-items: center; /* تراز عمودی در مرکز */
    gap: 12px; /* تنظیم دقیق و استاندارد فاصله افقی بین المان‌ها */
    border-bottom: 1px solid #e0e0e0;
}

.custom-announcements-wrapper ul.ca-list li:last-child { border-bottom: none; }

.ca-number {
    font-weight: bold;
    color: #28a745;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* min-width حذف شد تا فاصله طبیعی و یکدست شود */
}

.ca-separator {
    color: #ccc;
    font-size: 20px;
    display: flex;
    align-items: center;
    transform: scaleY(1.3);
    /* margin حذف شد چون فاصله با gap در li کنترل می‌شود */
}

.ca-text {
    flex: 1;
    color: #000;
    font-size: 15px;
    line-height: 1.8;
    min-width: 0; 
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

.ca-text p { margin: 0 !important; }
 
.ca-text p a {
    font-size: inherit !important;
    line-height: inherit;
}


/* ریسپانسیو برای موبایل */
@media screen and (max-width: 600px) {
    .custom-announcements-wrapper ul.ca-list li {
        font-size: 14px;
        align-items: flex-start;
        gap: 8px; /* در موبایل فاصله کمی کمتر می‌شود */
    }
    .ca-box-item { flex-direction: column; }
    .ca-drag-handle { width: 100%; flex-direction: row; justify-content: space-between; padding: 10px 15px; }
    .ca-remove-box { margin-top: 0; }
}