.pagination{justify-content:center;gap:6px;margin-top:-2px;margin-bottom:20px;display:flex}.bottom-pagination{margin-top:30px;margin-bottom:40px}@media (max-width:767px){.bottom-pagination{margin-bottom:25px}}.page-btn{color:#fff;cursor:pointer;background:#1c1a1af0;border:1px solid #ffffff4d;border-radius:16px;min-width:32px;padding:6px 12px;font-family:inherit;font-size:12px;font-weight:600;transition:all .2s;box-shadow:0 2px 4px #00000026}.page-btn:hover:not(.disabled){background:#282626fa;transform:translateY(-2px);box-shadow:0 4px 8px #00000040}.page-btn.active{background:var(--primary-blue);border-color:var(--primary-blue);color:#fff;box-shadow:0 3px 10px #4a90e266}.page-btn.disabled{opacity:.5;cursor:not-allowed}.page-dots{color:#666;-webkit-user-select:none;user-select:none;align-items:center;padding:6px 8px;font-weight:600;display:inline-flex}
.filter-modal{z-index:2000;background:#00000080;justify-content:center;align-items:center;padding:20px;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.filter-modal-content{background:#fff;border-radius:16px;width:100%;max-width:400px;max-height:90vh;animation:.3s ease-out slideUp;overflow-y:auto;box-shadow:0 10px 40px #0000004d}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.filter-modal-header{border-bottom:1px solid #e0e0e0;justify-content:space-between;align-items:center;padding:20px;display:flex}.filter-modal-header h3{color:#333;margin:0;font-size:18px;font-weight:600}.close-btn{color:#666;cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;padding:0;font-size:24px;transition:background .2s;display:flex}.close-btn:hover{background:#f0f0f0}.filter-modal-body{flex-direction:column;gap:20px;padding:20px;display:flex}.filter-group{flex-direction:column;gap:8px;display:flex}.filter-group label{color:#333;font-size:14px;font-weight:600}.filter-select{cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 9L1 4h10z'/%3E%3C/svg%3E") right 12px center no-repeat;border:2px solid #e0e0e0;border-radius:12px;padding:12px 40px 12px 16px;font-family:inherit;font-size:15px;transition:all .3s}.filter-select:focus{border-color:#667eea;outline:none;box-shadow:0 0 0 3px #667eea1a}.filter-modal-footer{border-top:1px solid #e0e0e0;gap:12px;padding:20px;display:flex}.clear-btn,.apply-btn{cursor:pointer;border:none;border-radius:12px;flex:1;padding:12px 24px;font-size:15px;font-weight:600;transition:all .3s}.clear-btn{color:#333;background:#f0f0f0}.clear-btn:hover{background:#e0e0e0}.apply-btn{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.apply-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea66}.apply-btn:active{transform:translateY(0)}@media (max-width:768px){.filter-modal{justify-content:center;align-items:center;padding:16px 16px 80px}.filter-modal-content{border-radius:16px;width:100%;max-width:390px;max-height:calc(100vh - 160px)}}