/* Optimized CSS for Server List Page - Critical styles only */

/* Promotion banner styles - positioned above navbar */
.promotion-banner-top {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1100;
    width: 100%;
}

/* CSS positioning will be overridden by JavaScript for dynamic adjustment */

.promotion-text {
    color: #ffffff;
    font-size: 1rem;
    font-weight: 500;
}

.promotion-text strong {
    color: #ffffff;
    font-weight: 600;
}

.promotion-banner-top .btn-primary {
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-weight: 500;
    transition: all 0.2s ease;
    padding: 0.25rem 0.75rem;
    font-size: 0.875rem;
}

.promotion-banner-top .btn-primary:hover {
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
    transform: translateY(-1px);
}
.server-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem;margin-bottom:2rem}
.server-card{background:#0c1116;border:1px solid rgba(255,255,255,0.06);border-radius:12px;overflow:hidden;transition:transform 0.2s ease,box-shadow 0.2s ease;height:100%;display:flex;flex-direction:column}
.server-card:hover{border-color:rgba(255,255,255,0.12);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.4)}
.server-icon{width:48px;height:48px;border-radius:50%;border:2px solid rgba(255,255,255,0.1)}
.server-name{font-size:1rem;font-weight:600;color:#fff!important;line-height:1.2;margin-bottom:0.2rem}
.lazy-load{opacity:0.7;transition:opacity 0.3s ease}
.lazy-load.loaded{opacity:1}
.featured-servers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}
.featured-card{box-shadow:0 10px 20px rgba(0,0,0,0.4),0 0 20px rgba(145,70,255,0.2);position:relative}
.featured-badge{position:absolute;top:10px;right:10px;background:linear-gradient(45deg,#FFD700,#FFA500);color:#000;padding:5px 10px;border-radius:20px;font-size:0.8rem;font-weight:600;z-index:10}
.mini-featured-sidebar{position:fixed;top:100px;right:20px;width:280px;background:linear-gradient(135deg,rgba(23,37,84,0.9),rgba(30,41,59,0.9));border-radius:16px;border:1px solid rgba(88,101,242,0.4);box-shadow:0 8px 30px rgba(0,0,0,0.5);padding:1.25rem;z-index:1000;opacity:0;transform:translateX(50px);pointer-events:none;transition:all 0.3s ease;backdrop-filter:blur(10px);max-height:80vh;overflow-y:auto}
.mini-featured-sidebar.visible{opacity:1;transform:translateX(0);pointer-events:all}
.category-pills{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:1rem}
.category-pills .pill{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.7);border-radius:20px;padding:0.4rem 0.75rem;font-weight:500;font-size:0.85rem;display:inline-flex;align-items:center;gap:0.3rem;transition:all 0.2s ease;cursor:pointer;text-decoration:none}
.category-pills .pill.active{background:rgba(88,101,242,0.15);border-color:rgba(88,101,242,0.3);color:#5865f2;box-shadow:0 2px 8px rgba(88,101,242,0.2);font-weight:600}
.special-categories{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}
.special-category-btn{padding:0.5rem 1rem;border:2px solid #2c2f33;background:#36393f;color:#fff;border-radius:20px;font-weight:500;transition:all 0.3s ease;flex:0 1 auto;white-space:nowrap;font-size:0.9rem;min-width:min-content;margin-bottom:0.5rem}
.special-category-btn.active{background:#5865f2;border-color:#5865f2;box-shadow:0 0 15px rgba(88,101,242,0.6);transform:translateY(-2px);font-weight:700;color:#fff}
@media(max-width:768px){
.server-grid{grid-template-columns:1fr;gap:1rem}
.featured-servers-grid{grid-template-columns:1fr}
.mini-featured-sidebar{display:none}
.category-pills{gap:0.4rem}
.category-pills .pill{padding:0.35rem 0.6rem;font-size:0.8rem}
.special-categories{gap:0.5rem;justify-content:center}
.special-category-btn{padding:0.4rem 0.8rem;font-size:0.85rem}
}
@media(max-width:576px){
.special-category-btn{flex:1 1 calc(50% - 0.5rem);text-align:center}
}