.blog-search-box {
 position:relative;
 max-width:600px;
 margin:0 auto 28px;
}

.blog-search-box .search-icon {
 position:absolute;
 left:16px;
 top:50%;
 transform:translateY(-50%);
 width:20px;
 height:20px;
 color:var(--accent);
 pointer-events:none;
}

.blog-search-input {
 width:100%;
 padding:12px 44px 12px 44px;
 background:rgba(255,255,255,0.05);
 border:1px solid rgba(255,255,255,0.1);
 border-radius:8px;
 font-size:16px;
 color:var(--white);
 font-family:inherit;
 outline:none;
 transition:border-color 0.3s ease,box-shadow 0.3s ease;
}

.blog-search-input::placeholder {
 color:var(--text-secondary);
}

.blog-search-input:focus {
 border-color:var(--accent);
 box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

.search-clear {
 position:absolute;
 right:12px;
 top:50%;
 transform:translateY(-50%);
 display:none;
 align-items:center;
 justify-content:center;
 width:28px;
 height:28px;
 border:none;
 background:rgba(255,255,255,0.1);
 border-radius:50%;
 color:var(--text-secondary);
 font-size:18px;
 line-height:1;
 cursor:pointer;
 transition:background 0.2s,color 0.2s;
}

.search-clear:hover {
 background:rgba(255,255,255,0.15);
 color:var(--white);
}


.blog-categories {
 display:flex;
 flex-wrap:wrap;
 gap:10px;
 justify-content:center;
 margin-bottom:36px;
}

.blog-category-btn {
 display:inline-flex;
 align-items:center;
 gap:4px;
 padding:8px 20px;
 border:1px solid var(--accent);
 border-radius:20px;
 background:transparent;
 color:var(--accent);
 font-size:14px;
 font-weight:500;
 font-family:inherit;
 cursor:pointer;
 transition:background 0.3s ease,color 0.3s ease;
 white-space:nowrap;
}

.blog-category-btn:hover {
 background:rgba(37,99,235,0.1);
}

.blog-category-btn.active {
 background:var(--accent);
 color:var(--white);
}


.blog-search-wrapper .blog-grid {
 display:grid;
 grid-template-columns:repeat(3,1fr);
 gap:clamp(16px,3vw,24px);
 transition:opacity 0.2s ease;
}


.blog-search-wrapper .blog-card:hover {
 border-color:var(--accent);
 box-shadow:0 0 20px rgba(37,99,235,0.25);
}


.blog-load-more-wrapper {
 text-align:center;
 margin-top:40px;
}

.blog-load-more {
 display:inline-flex;
 align-items:center;
 gap:8px;
 padding:12px 32px;
 border:1px solid var(--accent);
 border-radius:8px;
 background:transparent;
 color:var(--accent);
 font-size:15px;
 font-weight:600;
 font-family:inherit;
 cursor:pointer;
 transition:background 0.3s ease,color 0.3s ease;
}

.blog-load-more:hover {
 background:var(--accent);
 color:var(--white);
}


.blog-loader {
 display:none;
 justify-content:center;
 padding:32px 0;
}

.blog-loader .spinner {
 width:36px;
 height:36px;
 border:3px solid rgba(255,255,255,0.1);
 border-top-color:var(--accent);
 border-radius:50%;
 animation:blogSpin 0.7s linear infinite;
}

@keyframes blogSpin {
 to{transform:rotate(360deg);}
}


.blog-empty {
 display:none;
 flex-direction:column;
 align-items:center;
 justify-content:center;
 padding:64px 20px;
 text-align:center;
 color:var(--text-secondary);
 gap:12px;
}

.blog-empty svg {
 opacity:0.4;
}

.blog-empty p {
 font-size:16px;
 margin:0;
}


@media (max-width:1024px) {
 .blog-search-wrapper .blog-grid {
 grid-template-columns:repeat(2,1fr);
}
}

@media (max-width:768px) {
 .blog-search-wrapper .blog-grid {
 grid-template-columns:1fr;
}

 .blog-categories {
 flex-wrap:nowrap;
 justify-content:flex-start;
 overflow-x:auto;
 -webkit-overflow-scrolling:touch;
 padding-bottom:8px;
 scrollbar-width:none;
}

 .blog-categories::-webkit-scrollbar {
 display:none;
}
}