/**
 * Divi Pixel Blog Filter Module Styles
 */

 .dbfm-blog-filter {
    font-family: inherit;
    line-height: 1.6;
  }
  
  .dbfm-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  /* Filters Section */
  .dbfm-filters-wrapper {
    margin-bottom: 30px;
  }
  
  .dbfm-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: flex-end;
    padding: 0px;
    background: #ffffff;
    border-radius: 3px;
    border: none;
  }
  
  .dbfm-filter-title {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }
  
  /* Category & Tag Filters */
  .dbfm-category-filter,
  .dbfm-tag-filter {
    flex: 1;
    min-width: 200px;
  }
  
  .dbfm-category-select {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-radius: 3px;
    background: #fff;
    font-size: 14px;
    color: #333;
    cursor: pointer;
    transition: border-color .3s ease;
  }
  
  .dbfm-category-select:focus {
    outline: none;
    border-color: #333333;
    box-shadow: 0 0 0 2px rgba(51,51,51,.2);
  }
  
  .dbfm-category-buttons,
  .dbfm-tag-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  
  .dbfm-category-btn,
  .dbfm-tag-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
    text-decoration: none;
    display: inline-block;
  }
  
  .dbfm-category-btn:hover,
  .dbfm-tag-btn:hover,
  .dbfm-category-btn.active,
  .dbfm-tag-btn.active {
    background: #333333;
    color: #ffffff;
  }
  
  /* Filter Actions */
  .dbfm-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .dbfm-filter-btn,
  .dbfm-clear-btn {
    padding: 10px 20px;
    border: none;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
    text-decoration: none;
    display: inline-block;
  }
  
  .dbfm-filter-btn:hover,
  .dbfm-filter-btn.active {
    background: #333333;
    color: #ffffff;
  }
  
  .dbfm-clear-btn:hover,
  .dbfm-clear-btn.active {
    background: #dc3545;
    color: #ffffff;
  }
  
  /* Posts Grid & Loading */
  .dbfm-posts-wrapper {
    position: relative;
  }
  
  .dbfm-loading {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
  }
  
  .dbfm-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top-color: #333333;
    border-radius: 50%;
    animation: spin 1s linear infinite;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  /* Grid Layout */
  .dbfm-posts-grid {
    display: grid;
    gap: 30px;
    grid-template-columns: repeat(3,1fr);
  }
  
  .dbfm-posts-grid[data-columns="1"] { grid-template-columns: 1fr; }
  .dbfm-posts-grid[data-columns="2"] { grid-template-columns: repeat(2,1fr); }
  .dbfm-posts-grid[data-columns="4"] { grid-template-columns: repeat(4,1fr); }
  
  /* Individual Post Card */
  .dbfm-post {
    border: none;
    border-radius: 3px;
    transition: transform .3s, box-shadow .3s;
    padding: 0;
  }
  
  .dbfm-post:hover {
    transform: translateY(-5px);
  }
  
  .dbfm-post-image {
    overflow: hidden;
  }
  
  .dbfm-post-image img {
    width: 100%;
    height: 170px;
    object-fit: cover;
    transition: transform .3s ease;
  }
  
  .dbfm-post:hover .dbfm-post-image img {
    transform: scale(1.05);
  }
  
  .dbfm-post-content {
    padding: 0;
  }
  
  .dbfm-post-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
  }
  
  .dbfm-post-title a {
    color: #333;
    text-decoration: none;
    transition: color .3s ease;
  }
  
  .dbfm-post-title a:hover {
    color: #333333;
  }
  
  .dbfm-post-excerpt {
    margin-bottom: 15px;
    color: #666;
    font-size: 14px;
    line-height: 1.6;
  }
  
  /* Meta */
  .dbfm-post-meta {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
    font-size: 12px;
    color: #888;
  }
  
  .dbfm-post-date,
  .dbfm-post-author {
    display: flex;
    align-items: center;
  }
  .dbfm-post-tags,
  .dbfm-post-categories {
    display: none;
  }
  
  .dbfm-post-category {
    padding: 2px 8px;
    background: #f0f0f0;
    border-radius: 3px;
    font-size: 11px;
    color: #666;
  }
  
  /* Pagination */
  .dbfm-pagination {
    margin-top: 40px;
    text-align: center;
  }
  
  .dbfm-pagination-wrapper {
    display: flex;
    gap: 15px;
    justify-content: center;
    align-items: center;
  }
  
  .dbfm-prev-page,
  .dbfm-next-page {
    padding: 8px 16px;
    border: none;
    border-radius: 3px;
    background: #fff;
    color: #333;
    font-size: 14px;
    cursor: pointer;
    transition: background .3s ease, color .3s ease;
  }
  
  .dbfm-prev-page:hover,
  .dbfm-next-page:hover {
    background: #333333;
    color: #ffffff;
  }
  
  /* No Posts & Error */
  .dbfm-no-posts,
  .dbfm-error {
    text-align: center;
    padding: 20px;
    color: #666;
  }
  
  .dbfm-error {
    background: #f8d7da;
    border: none;
    color: #721c24;
  }
  
  /* Responsive */
  @media (max-width: 980px) {
    .dbfm-filters { flex-direction: column; }
    .dbfm-posts-grid { grid-template-columns: repeat(2,1fr) !important; gap: 20px; }
  }
  @media (max-width: 680px) {
    .dbfm-container { padding: 0 15px; }
    .dbfm-posts-grid { grid-template-columns: 1fr !important; }
    .dbfm-filter-actions { flex-direction: column; }
    .dbfm-filter-btn,
    .dbfm-clear-btn { width: 100%; text-align: center; }
  }
  
  /* Utility */
  .dbfm-spinner,
  .dbfm-post-category {
    border-radius: 50%;
  }