/* Templates catalog page */
.filter-btn {
        background-color: #f8f9fa;
        color: #212529;
        transition: all 0.3s ease;
      }
      .filter-btn:hover {
        background-color: #e9ecef;
        transform: translateY(-2px);
        color: #212529;
      }
      .filter-btn.active {
        background-color: var(--bs-primary) !important;
        color: #000 !important;
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
      }
      .template-section {
        animation: fadeIn 0.5s ease-in;
      }
      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(20px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
      
      /* Template image border */
      .template-image {
        border: 1px solid rgba(0, 0, 0, 0.1);
        border-radius: 0.25rem;
        display: block;
      }
      
      /* Template tags - allow wrapping */
      .template-tags {
        flex-wrap: wrap;
        align-items: flex-start;
      }
      
      .template-tag {
        white-space: nowrap;
        display: inline-block;
        font-size: 0.875rem;
        padding: 0.35rem 0.65rem;
        border-width: 1px;
        border-color: rgba(0, 0, 0, 0.15);
      }

      .view-demo-btn {
        background-color: var(--bs-primary);
        color: #000;
        border: none;
        box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
        transition: all 0.3s ease;
        display: inline-flex;
        align-items: center;
      }

      .view-demo-btn:hover,
      .view-demo-btn:focus {
        background-color: #c9a227;
        color: #000;
        transform: translateY(-2px);
        box-shadow: 0 6px 16px rgba(212, 175, 55, 0.35);
      }
      
      /* Ensure tags wrap on small screens */
      @media (max-width: 768px) {
        .template-tags {
          gap: 0.5rem;
        }
        
        .template-tag {
          font-size: 0.8rem;
          padding: 0.3rem 0.6rem;
          flex-shrink: 0;
        }
      }
      
      @media (max-width: 576px) {
        .template-tags {
          gap: 0.4rem;
        }
        
        .template-tag {
          font-size: 0.75rem;
          padding: 0.25rem 0.5rem;
        }
      }