#blog-filter-component .blog-filter-flex {display: flex;flex-direction: row;gap: 24px;align-items: flex-start;flex-wrap: wrap;}
#blog-filter-component .blog-filter-search {
    flex: 1 1 250px;
    min-width: 0;
    max-width: 250px;
    margin-bottom: 0;
}
#blog-filter-component .blog-filter-az {
    min-width: 320px;
}

#blog-filter-component .alphabet-btn {all:unset;cursor: pointer;display: inline-block;padding: 5px 10px;border: 1px solid #ccc;border-radius: 4px;background-color: #f9f9f9;transition: background-color 0.3s, color 0.3s;}
#blog-filter-component .alphabet-btn.active, #blog-filter-component .alphabet-btn[aria-pressed="true"], #blog-filter-component .alphabet-btn:hover {background-color: var(--bs-primary);color: white;border-color: var(--bs-primary);}
#blog-filter-component .input-group {display: flex;width: 100%;}
#blog-filter-component .input-group input[type="text"] {flex: 1;padding: 8px 12px;border: 1px solid #ccc;border-radius: 4px 0 0 4px;font-size: 1rem;margin: 0;}
#blog-filter-component .js-filter-submit {all: unset;cursor: pointer;display: inline-block;padding: 8px 16px;background-color: var(--bs-primary);color: white;border-radius: 0px 4px 4px 0;transition: background-color 0.3s;}

#blog-posts-container.blog-container {position: relative;min-height: 200px;}
#blog-posts-container .blog-spinner {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 40px;}
#blog-posts-container .spinner {border: 4px solid #f3f3f3;border-top: 4px solid #3498db;border-radius: 50%;width: 40px;height: 40px;animation: spin 1s linear infinite;}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#blog-posts-container .blog-spinner p {margin-top: 15px;color: #666;font-size: 14px;}


.blog-card{ display: grid; grid-template-rows: auto auto 1fr auto; gap: 5px; border: 1px solid #e0e0e0; border-radius: 8px; background-color: #fff; }
.blog-card img { width: 100%; object-fit: cover; border-top-left-radius: 8px; border-top-right-radius: 8px; aspect-ratio: 16 / 9; max-height: 200px; border-bottom-left-radius: 0!important;border-bottom-right-radius: 0!important;}
.blog-card h5 { font-size: 1.2rem; margin: 20px; }
.blog-card p { font-size: 0.9rem; margin: 0 20px 20px 20px; color: #555; flex-grow: 1; }
.blog-card div { margin: 20px; }
.blog-card .btn{border-color: #5b8222;}
.blog-card .btn:hover{border-color: #004EA0;}
.card-item{margin-bottom: 2rem;}



/* ------------------------------------------------------------------------ */
@media (max-width: 991.98px) {
    #blog-filter-component .blog-filter-flex {
        flex-direction: column;gap: 12px;
    }

    #blog-filter-component .blog-filter-search{
        flex: 1 1 60px!important;
    }

    #blog-filter-component .blog-filter-search,
    #blog-filter-component .blog-filter-az {
        min-width: 0;
        width: 100%;
        max-width: 100%;
        flex-basis: auto;
    }

    #blog-filter-component .alphabet-filter {
        justify-content: center;margin-bottom: 1rem;
    }
}
/* ------------------------------------------------------------------------ */

@media (max-width: 600px) {
    #blog-archive h1{margin: 20px 0;font-size: 300% !important;}
    #blog-archive .mb-4{margin-bottom: 0!important;}

    #blog-filter-component .blog-filter-flex {gap: 8px;}
    #blog-filter-component .blog-filter-search,
    #blog-filter-component .blog-filter-az {
        width: 100%;
        min-width: 0;
        flex-basis: auto;
        margin-bottom: 8px;
    }
    #blog-filter-component .input-group input[type="text"] {
        font-size: 0.95rem;
        padding: 8px 8px;
    }
    #blog-filter-component .js-filter-submit {
        padding: 8px 10px;
        font-size: 0.95rem;
    }
    #blog-filter-component .alphabet-btn {
        padding: 4px 6px;
        font-size: 0.95rem;
        margin: 2px;
    }
    #blog-filter-component .alphabet-filter {
        flex-wrap: wrap;
        gap: 4px;
    }
}

/* ------------------------------------------------------------------------ */