/**
 * استایل‌های فرانت‌اند برای باکس‌های محتوا
 * این استایل‌ها ظاهر باکس‌ها را در سایت شما تعیین می‌کنند.
 */

/* استایل پایه برای همه باکس‌ها */
.box-content {
    padding: 15px;
    margin: 15px auto; /* برای ترازبندی مرکز */
    border-radius: 5px;
    border-width: 1px;
    border-style: solid;
    line-height: 1.6;
    position: relative; /* برای استفاده از pseudo-elements برای آیکون */
    /* در صورتی که نیاز به آیکون دارید، می‌توانید از فضایی برای آن در سمت راست یا چپ استفاده کنید */
    padding-right: 40px; /* مثال: اگر آیکون در سمت راست (در جهت RTL) قرار می‌گیرد */
}

/* ترازبندی مرکز با استفاده از کلاس aligncenter وردپرس */
.box-content.aligncenter {
    display: block; /* مطمئن شوید که بلوک است */
    margin-left: auto;
    margin-right: auto;
}

/* استایل برای نوع "اطلاعات" (info) */
.box-content.box-info {
    background-color: #3fcb2e38; /* آبی روشن */
    border-color: #0a875a; /* آبی کمی تیره‌تر */
    color: #000000; /* متن آبی تیره */
}
/* آیکون اختیاری برای نوع اطلاعات (مثال: با استفاده از pseudo-element) */
.box-content.box-info::before {
    content: '\2139'; /* مثال: کاراکتر Unicode برای آیکون اطلاعات (i در دایره) */
    font-size: 20px;
    position: absolute;
    top: 15px;
    right: 15px; /* در جهت RTL */
    color: #0a875a;
}


/* استایل برای نوع "هشدار" (warning) */
.box-content.box-warning {
    background-color: #ffd5d580; /* زرد روشن */
    border-color: #dc2626; /* زرد کمی تیره‌تر */
    color: #000000; /* متن زرد تیره */
}
/* آیکون اختیاری برای نوع هشدار */
.box-content.box-warning::before {
    content: '\26A0'; /* مثال: کاراکتر Unicode برای آیکون هشدار */
    font-size: 20px;
    position: absolute;
    top: 15px;
    right: 15px; /* در جهت RTL */
    color: #dc2626;
}

/* استایل برای نوع "نکته" (note) */
.box-content.box-note {
    background-color: #fec75242; /* بنفش روشن */
    border-color: #f59e0b; /* بنفش کمی تیره‌تر */
    color: #000000; /* متن بنفش تیره */
}
/* آیکون اختیاری برای نوع نکته */
.box-content.box-note::before {
    content: '\1F4DD'; /* مثال: کاراکتر Unicode برای آیکون دفترچه یادداشت */
     font-size: 20px;
    position: absolute;
    top: 15px;
    right: 15px; /* در جهت RTL */
    color: #4f3e7a;
}

/* استایل برای نوع "سایه" (shadow) */
/* این نوع می‌تواند بدون border و با سایه باشد */
.box-content.box-shadow {
    background-color: #00b8ff24; /* سفید */
    border: none; /* بدون حاشیه */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* سایه ملایم */
    color: #000; /* متن خاکستری تیره */
    padding-right: 15px; /* اگر آیکون ندارد padding را تنظیم کنید */
}
/* برای باکس سایه ممکن است آیکون مناسب نباشد، می‌توانید pseudo-element را حذف کنید یا غیرفعال کنید */
.box-content.box-shadow::before {
    content: none; /* آیکون را حذف کنید */
}


/* می‌توانید استایل‌های بیشتری برای موارد دیگر اضافه کنید */
/* مثال: استایل برای محتوای داخلی باکس (مانند پاراگراف‌ها) */
.box-content p:last-child {
    margin-bottom: 0; /* حذف margin پایین پاراگراف آخر داخل باکس */
}