/* ====================================
   صفحه مقالات - سفارشی سازی رنگ‌ها
   رنگ آبی: #0a3978
   رنگ نارنجی: #ee8961
==================================== */

/* 1. دکمه "بیشتر بخوانید" - نارنجی با هاور آبی */
.blogpage-section .blog-box .button-portion .read_more {
    background: #ee8961 !important;
    color: #ffffff !important;
    border: 2px solid #ee8961 !important;
    transition: all 0.3s ease-in-out;
}

.blogpage-section .blog-box .button-portion .read_more:hover {
    background: #0a3978 !important;
    color: #ffffff !important;
    border-color: #0a3978 !important;
    transform: translateY(-2px);
}

/* 2. دکمه "دسته‌بندی مقالات" - نارنجی با هاور آبی */
.category-filter-btn {
    background: #ee8961 !important;
    border: 2px solid #ee8961 !important;
    color: #ffffff !important;
    transition: all 0.3s ease-in-out !important;
    box-shadow: 0 4px 15px rgba(238, 137, 97, 0.3) !important;
}

.category-filter-btn:hover {
    background: #0a3978 !important;
    border-color: #0a3978 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(10, 57, 120, 0.4) !important;
}

/* 3. هدر مودال - آبی با متن سفید */
.modal-header {
    background: #0a3978 !important;
    color: #ffffff !important;
}

.modal-header .modal-title {
    color: #ffffff !important;
}

.modal-header .close {
    color: #ffffff !important;
    opacity: 1;
    text-shadow: none;
}

.modal-header .close:hover {
    color: #ee8961 !important;
}

/* 4. آیتم‌های دسته‌بندی - بوردر آبی، هاور نارنجی */
.category-item {
    border-right: 4px solid #0a3978 !important;
    transition: all 0.3s ease !important;
}

.category-item:hover {
    border-right-color: #ee8961 !important;
    background: #fff5f2 !important;
    transform: translateX(-3px) !important;
}

.category-item h6 {
    color: #0a3978 !important;
    transition: color 0.3s ease;
}

.category-item:hover h6 {
    color: #ee8961 !important;
}

/* 5. باکس مقالات - افکت هاور با سایه آبی */
.blog-box {
    transition: all 0.3s ease-in-out;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.blog-box:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 35px rgba(10, 57, 120, 0.18);
}

/* 6. تصاویر مقالات - زوم آرام */
.blog-box .blog-image {
    position: relative;
    overflow: hidden;
    border-radius: 10px 10px 0 0;
}

.blog-box .blog-image img {
    transition: transform 0.4s ease-in-out;
}

.blog-box:hover .blog-image img {
    transform: scale(1.08);
}

/* 7. عنوان مقالات - رنگ آبی با هاور نارنجی */
.lower-portion h5 {
    color: #0a3978 !important;
    font-weight: 600;
    transition: color 0.3s ease;
    line-height: 1.5;
}

.blog-box:hover .lower-portion h5 {
    color: #ee8961 !important;
}

/* 8. دکمه بستن مودال - آبی با هاور نارنجی */
.modal-footer .btn-secondary {
    background: #0a3978 !important;
    border-color: #0a3978 !important;
    transition: all 0.3s ease;
}

.modal-footer .btn-secondary:hover {
    background: #ee8961 !important;
    border-color: #ee8961 !important;
    transform: translateY(-2px);
}

/* 9. محتوای پایین باکس مقالات */
.lower-portion {
    padding: 15px 20px 10px;
}

.button-portion {
    padding: 15px 20px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 10. آیکون‌های SVG نارنجی */
.lower-portion svg path {
    transition: all 0.3s ease;
}

.blog-box:hover .lower-portion svg path {
    stroke: #0a3978 !important;
}

/* 11. انیمیشن برای دکمه‌ها */
@keyframes pulse {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(238, 137, 97, 0.3);
    }
    50% {
        box-shadow: 0 6px 25px rgba(238, 137, 97, 0.5);
    }
}

.category-filter-btn:focus {
    animation: pulse 1.5s infinite;
    outline: none !important;
    box-shadow: none !important;
}

/* 12. ریسپانسیو - موبایل */
@media only screen and (max-width: 767px) {
    .blog-box:hover {
        transform: translateY(-4px);
    }
    
    .button-portion {
        flex-direction: column;
        gap: 10px;
    }
    
    .blogpage-section .blog-box .button-portion .read_more {
        width: 100%;
        text-align: center;
    }
}